/* ============================================================
   JLN · auth.css — pantalla login / registro (split-screen animado)
   Base estética: modern-animated-sign-up-sign-in-page-with-split-screen-design
   ============================================================ */

.auth-card{
  width:100%;max-width:940px;
  background:#fff;border-radius:26px;overflow:hidden;
  display:flex;
  box-shadow:0 30px 80px rgba(17,17,17,.14);
  animation:cardIn .7s var(--ease) both;
}
@keyframes cardIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ---------- Panel izquierdo: branding ---------- */
.auth-brand{
  width:42%;flex-shrink:0;
  background:linear-gradient(150deg,var(--celeste) 0%,var(--turquesa) 100%);
  padding:26px 24px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.auth-brand::after{
  content:'';position:absolute;right:-90px;top:-90px;width:260px;height:260px;
  border:26px solid rgba(255,255,255,.16);border-radius:50%;
}
.auth-brand__top{position:relative;z-index:1}
.auth-brand__logo{height:34px;width:auto;filter:brightness(0) invert(1)}
.auth-brand__art{margin-top:auto;position:relative;z-index:1}
.auth-brand__slides{position:relative;min-height:96px}
.auth-brand__slide{
  position:absolute;inset:0;
  color:#fff;font-weight:700;font-size:1.15rem;line-height:1.35;
  opacity:0;transform:translateY(10px);transition:.5s var(--ease);
}
.auth-brand__slide.is-active{opacity:1;transform:translateY(0)}
.auth-brand__dots{display:flex;gap:6px;margin-top:14px}
.auth-brand__dots button{
  width:22px;height:3px;border:none;border-radius:3px;background:rgba(255,255,255,.35);
  cursor:pointer;padding:0;transition:.3s var(--ease);
}
.auth-brand__dots button.is-active{background:#fff;width:30px}

/* ---------- Panel derecho: formulario ---------- */
.auth-form{
  flex:1;min-width:0;
  padding:34px 38px 38px;
  display:flex;flex-direction:column;
}
.auth-form__head{margin-bottom:20px}
.auth-form__title{font-weight:800;font-size:1.7rem;line-height:1.2;letter-spacing:-.01em}
.auth-form__sub{color:var(--ink-40);font-size:.86rem;margin-top:6px}

/* animación de entrada escalonada de bloques del form */
.auth-form__head,.auth-form form,.divider,.auth-alt,.auth-createacc{animation:blockIn .5s var(--ease) both}
.auth-form form{animation-delay:.06s}
.auth-createacc{animation-delay:.1s}
.divider{animation-delay:.14s}
.auth-alt{animation-delay:.18s}
@keyframes blockIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* fade al cambiar de modo */
.auth-form.is-switching .auth-form__head,
.auth-form.is-switching form,
.auth-form.is-switching .divider,
.auth-form.is-switching .auth-alt,
.auth-form.is-switching .auth-createacc{opacity:0;transform:translateY(6px);transition:.15s var(--ease)}

/* ---------- Campos ---------- */
.field{margin-bottom:13px}
.field label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-60);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;
  background:var(--field-bg);border:1.6px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--font);font-size:.9rem;color:var(--black);outline:none;
  transition:.16s var(--ease);appearance:none;
}
.field textarea{resize:vertical;min-height:80px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-40)}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:var(--turquesa);box-shadow:0 0 0 3px rgba(54,164,168,.14)}
.field select{
  cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8a8a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.field__note{font-size:.74rem;color:var(--ink-40);margin:-2px 0 7px;line-height:1.4;text-transform:none;letter-spacing:normal;font-weight:500}
.hint{font-size:.74rem;margin-top:5px;color:var(--ink-40);min-height:1em}
.hint.is-ok{color:var(--ok)}
.hint.is-err{color:var(--err)}

/* password + ojo */
.pwd{position:relative}
.pwd input{padding-right:44px}
.pwd__eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:1rem;opacity:.5;padding:6px;line-height:1;
}
.pwd__eye:hover{opacity:.9}

/* teléfono */
.phone{display:flex;gap:8px}
.phone select{width:118px;flex-shrink:0}
.phone input{flex:1;min-width:0}

/* uploads */
.drop{
  display:block;border:2px dashed var(--line);border-radius:var(--radius-sm);
  padding:18px;text-align:center;cursor:pointer;transition:.16s var(--ease);background:var(--field-bg);
  text-transform:none;letter-spacing:normal;
}
.drop:hover{border-color:var(--turquesa);background:#fff}
.drop__placeholder{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.82rem;font-weight:700;color:var(--ink-60);text-transform:none;letter-spacing:normal}
.drop__icon{font-size:1.5rem}
.drop__note{font-size:.72rem;font-weight:500;color:var(--ink-40);line-height:1.4;text-transform:none;letter-spacing:normal}
.drop__preview{width:66px;height:66px;border-radius:12px;object-fit:cover;margin:0 auto 6px;border:3px solid var(--turquesa)}

/* checkbox términos / ediciones anteriores / categorías / idiomas — estilo
   ÚNICO de checkbox de TODA la plataforma: ver JLNmemory.md → "Checkboxes"
   antes de crear uno nuevo. Regla fija (pedido explícito, no tocar los
   números sin que lo pidan): 10px exactos entre el cuadro y el texto,
   texto 4px más arriba que el cuadro. */
.check{display:flex;align-items:center;gap:0;font-size:.82rem;line-height:1.45;cursor:pointer;margin-bottom:4px}
.check a{color:var(--turquesa);font-weight:700;text-underline-offset:2px}

/* Checkbox custom (ÚNICO estilo de checkbox de la plataforma — reutilizar esta
   clase .check para cualquier checkbox nuevo, incluidos los de .cat-grid y
   .multiselect__option, en vez de crear una variante propia).
   .field input pisa appearance/padding/background, así que acá se redeclara
   todo con selector de mayor especificidad para que siempre gane (permite
   tildar más de una opción — son checkboxes independientes). */
.check input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  box-sizing:border-box;width:17px;height:17px;flex:0 0 17px;
  margin:0;margin-right:10px;padding:0;
  border:1.6px solid var(--ink-40);border-radius:4px;
  background:#fff center/11px 11px no-repeat;
  cursor:pointer;transition:.15s var(--ease);
}
.check input[type="checkbox"]:checked{
  border-color:var(--turquesa);background-color:var(--turquesa);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
}
.check input[type="checkbox"]:focus-visible{box-shadow:0 0 0 3px rgba(54,164,168,.25)}
.check > span{position:relative;top:-4px}
.check--terms > span{top:-2px}

/* grupo de checkboxes (ediciones anteriores, idiomas, etc.) — separación entre filas */
.check-group{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.check-group .check{margin-bottom:0;padding:3px 0}

/* ---------- Radio (selección única, ej. tipo de alojamiento en Pagos) ----------
   Mismos criterios que .check (10px al texto, texto 4px arriba), círculo en vez
   de tilde para diferenciar "elegí una" de "elegí las que quieras". Ver
   JLNmemory.md → "Checkboxes / Radios". */
.radio{display:flex;align-items:center;gap:0;font-size:.86rem;line-height:1.45;cursor:pointer;margin-bottom:4px}
.radio > span{position:relative;top:-4px}
.radio input[type="radio"]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  box-sizing:border-box;width:17px;height:17px;flex:0 0 17px;position:relative;
  margin:0;margin-right:10px;padding:0;
  border:1.6px solid var(--ink-40);border-radius:50%;
  background:#fff;cursor:pointer;transition:.15s var(--ease);
}
.radio input[type="radio"]:checked{border-color:var(--turquesa)}
.radio input[type="radio"]:checked::after{
  content:'';position:absolute;top:3px;left:3px;width:9px;height:9px;border-radius:50%;background:var(--turquesa);
}
.radio input[type="radio"]:focus-visible{box-shadow:0 0 0 3px rgba(54,164,168,.25)}

.radio-group{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.radio-group .radio{margin-bottom:0;padding:3px 0}

/* ---------- Divider ---------- */
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-40);font-size:.76rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

/* ---------- Alternativas ---------- */
.auth-alt{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.auth-alt .btn{width:100%}
.auth-alt .linkbtn--muted{align-self:center}

.code-field{display:flex;flex-direction:column;gap:10px;margin:12px 0 0}
.code-field input{width:100%}
.code-field .btn{width:100%}

/* ---------- Colapsables (animación signup ↔ login) ---------- */
.collapse{width:100%;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .34s var(--ease),opacity .24s var(--ease),margin .34s var(--ease)}
.collapse > .collapse__inner{overflow:hidden;min-height:0}
.collapse.is-open{grid-template-rows:1fr;opacity:1}

/* Estado por modo (login / choose / signup) */
.auth-form[data-mode="login"]   .mode-signup,
.auth-form[data-mode="login"]   .mode-choose{display:none}
.auth-form[data-mode="signup"]  .mode-login,
.auth-form[data-mode="signup"]  .mode-choose{display:none}
.auth-form[data-mode="choose"]  .mode-login,
.auth-form[data-mode="choose"]  .mode-signup,
.auth-form[data-mode="choose"]  .auth-credentials{display:none}
.auth-form[data-mode="login"]   .mode-signup-only-inline{display:none}
/* .mode-signup-only se maneja por JS con .is-open (para poder animar) */

/* spans inline de título/subtítulo */
.auth-form__title span,.auth-form__sub > span{display:inline}

/* ---------- Crear cuenta (debajo del login) ---------- */
.auth-createacc{text-align:center;margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.auth-createacc > span{color:var(--ink-40);font-size:.86rem}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .auth-card{flex-direction:column;max-width:460px}
  .auth-brand{width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding:20px 22px}
  .auth-brand::after{width:150px;height:150px;right:-60px;top:-70px}
  .auth-brand__art{margin-top:0;max-width:52%}
  .auth-brand__slides{min-height:0}
  .auth-brand__slide{position:static;font-size:.9rem}
  .auth-brand__slide:not(.is-active){display:none}
  .auth-brand__dots{display:none}
  .auth-form{padding:26px 22px 30px;max-height:none}
}
@media(max-width:420px){
  .grid-2{grid-template-columns:1fr}
  .auth-form__title{font-size:1.4rem}
}