/* ============================================================================
   CYC FACTURACION — auth.css
   DELTA de login.html. Aqui SOLO vive lo propio de la pantalla de acceso:
   el armado de la pagina, el panel de marca de escritorio, el bloque del
   captcha y la celebracion del registro.

   Requiere tokens.css + base.css cargados antes. Regla dura: no se redefinen
   tokens ni componentes compartidos (.card, .btn, .field, .otp, .toast...).
   MOBILE-FIRST: base = celular; solo se sube con min-width 768 y 1200.
   ========================================================================= */

/* ===========================================================================
   1. ARMADO DE LA PAGINA
      En celular la tarjeta manda: se centra vertical si sobra espacio y
      se vuelve scrolleable si no (por eso align-items:center + margin auto).
   ======================================================================== */
.auth{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:max(var(--sp-5), var(--safe-top));
  padding-bottom:max(var(--sp-8), var(--safe-bottom));
  padding-left:max(var(--sp-4), var(--safe-left));
  padding-right:max(var(--sp-4), var(--safe-right));
}

.auth__grid{
  width:100%;
  max-width:var(--maxw-form);
  margin-inline:auto;
}

/* Columna de la tarjeta */
.auth__main{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  width:100%;
  max-width:var(--maxw-form);
  margin-inline:auto;
}

/* Barra superior: marca a la izquierda, switch de tema a la derecha */
.auth__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-inline:var(--sp-1);
}

/* La tarjeta es el ancla de las capas absolutas (celebracion) */
.auth__card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}

.auth__views{ position:relative; }

/* Cada vista es una pila: encabezado + formulario */
.auth__view{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}

.auth__head{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.auth__head .title{ margin:0; }

/* Fila auxiliar (enlace "Olvide mi contrasena") pegada a la derecha */
.auth__aside{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:calc(var(--sp-2) * -1);
}
.auth__aside--center{ justify-content:center; margin-top:0; }

.auth__back{ margin-top:var(--sp-2); }

/* Flecha del enlace "Volver": hereda color y grosor del propio enlace */
.link__arrow{
  width:16px; height:16px;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform var(--dur) var(--ease-spring);
}
#linkBackLogin:hover .link__arrow{ transform:translateX(-3px); }

.auth__mail{
  color:var(--text);
  font-weight:var(--fw-semi);
  overflow-wrap:anywhere;
}

.auth__legal{
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
  color:var(--text-soft);
  text-align:center;
  padding-inline:var(--sp-2);
}

/* El enlace al aviso de privacidad TIENE que verse. Heredaba color y no traia
   subrayado, asi que quedaba identico al texto de junto: decia "aceptas el
   aviso de privacidad" y no habia forma de saber que eso se podia abrir. La ley
   pide que el aviso este a disposicion desde que se recaban los datos, y un
   enlace invisible no lo esta. */
.auth__legal a{
  color:var(--primary);
  font-weight:var(--fw-medium);
  text-decoration:underline;
  text-underline-offset:2px;
}

.auth__legal a:hover{ text-decoration-thickness:2px; }

.auth__foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-1);
  padding-top:var(--sp-2);
  text-align:center;
}
.auth__fooltxt{ margin:0; }

.auth__noscript{
  margin:var(--sp-6) auto;
  max-width:var(--maxw-form);
  padding:var(--sp-4);
  border-radius:var(--r-md);
  background:var(--warning-soft);
  color:var(--text);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semi);
  text-align:center;
}

/* ===========================================================================
   2. TABS (segmented) — se pliegan en la vista Recuperar
      Se anima max-height y no height: el contenido mide distinto por fuente
      y asi no hace falta medirlo desde JS.
   ======================================================================== */
.auth__tabs{
  max-height:64px;
  /* La tarjeta es un flex column: sin min-height:0 el item NO puede encoger
     por debajo de su contenido y max-height:0 no colapsaria nada. */
  min-height:0;
  opacity:1;
  overflow:hidden;
  transition:max-height var(--dur-slow) var(--ease-out),
             opacity var(--dur) var(--ease-out),
             margin-bottom var(--dur-slow) var(--ease-out);
}
.auth__tabs.is-off{
  max-height:0;
  opacity:0;
  margin-bottom:calc(var(--sp-5) * -1);   /* absorbe el gap de la tarjeta */
  pointer-events:none;
}

/* ===========================================================================
   3. CAMPOS EN PAREJA (Nombre / Apellido)
      Celular: uno debajo del otro. Tablet en adelante: dos columnas.
   ======================================================================== */
.auth__pair{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}

/* Los pasos de Recuperar se apilan como una vista mas */
.recstep{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}

/* ===========================================================================
   4. BLOQUE DEL CAPTCHA
      Va separado del formulario por una linea: se lee como un tramite aparte,
      no como un campo mas del alta.
   ======================================================================== */
.captcha{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding-top:var(--sp-5);
  border-top:1px solid var(--border);
  transition:opacity var(--dur) var(--ease-out);
}
.captcha[hidden]{ display:none; }

.captcha__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}
.captcha__eyebrow{
  font-size:var(--fs-xs);
  font-weight:var(--fw-semi);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--text-soft);
}

/* Boton de refrescar: area tactil completa, el icono gira al pulsarlo */
.captcha__refresh{
  flex:0 0 auto;
  width:var(--tap); height:var(--tap);
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-full);
  color:var(--primary);
  background:var(--primary-soft);
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur) var(--ease-spring),
             box-shadow var(--dur) var(--ease-out),
             background-color var(--dur) var(--ease-out);
}
.captcha__refresh svg{
  width:20px; height:20px;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--dur-slow) var(--ease-spring);
}
.captcha__refresh:hover{ box-shadow:var(--sh-1); }
.captcha__refresh:active{ transform:scale(.92); }
/* Mientras trae otro codigo, captcha.js lo deshabilita y gira el icono */
.captcha__refresh[disabled]{ opacity:.55; cursor:progress; transform:none; }
/* Clase gemela por si el JS marca el estado con .is-spinning en vez de
   [disabled]: sin ella el boton seguia aceptando clics durante la recarga. */
.captcha__refresh.is-spinning{ pointer-events:none; opacity:.7; }
.captcha__refresh.is-spinning svg{ animation:spin 700ms linear infinite; }

/* Celular: imagen arriba, campo abajo (el codigo debe verse grande) */
.captcha__body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

.captcha__imgwrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:var(--sp-2);
  border-radius:var(--r-sm);
  border:1.5px dashed var(--border-strong);
  background:var(--surface-2);
  overflow:hidden;
}
/* Brillo que barre la caja mientras la API devuelve el codigo.
   Solo existe en [data-state="loading"]: captcha.js marca ese estado. */
.captcha[data-state="loading"] .captcha__imgwrap::after{
  content:"";
  position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  animation:shimmer 1.6s var(--ease-in-out) infinite;
  pointer-events:none;
}

/* En celular el codigo se pinta grande: es lo que hay que poder leer.
   La imagen de la API mide 300x100, asi que el alto manda sobre el ancho. */
.captcha__img{
  max-height:70px;
  width:auto;
  border-radius:var(--r-xs);
  /* Sin src todavia: el alt no debe romper la caja */
  min-width:1px;
}

.captcha__field{ flex:1 1 auto; }

.captcha__hint{
  font-size:var(--fs-xs);
  color:var(--text-soft);
  padding-left:var(--sp-2);
}

/* Estados que publica captcha.js en #captchaCard[data-state]:
   loading | idle | checking | ok | error */
.captcha[data-state="checking"] .captcha__imgwrap{ border-color:var(--primary); }
.captcha[data-state="error"] .captcha__imgwrap{ border-style:solid; border-color:var(--danger); }

/* Ya validado: el bloque se atenua y deja de pedir atencion */
.captcha[data-state="ok"]{ opacity:.72; }
.captcha[data-state="ok"] .captcha__imgwrap{ border-style:solid; border-color:var(--success); }

/* La imagen del captcha viene con fondo claro desde la API: en tema oscuro se
   invierte para que no quede un rectangulo blanco quemando la pantalla. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .captcha__img{
    filter:invert(1) hue-rotate(180deg) contrast(.94);
  }
}
:root[data-theme="dark"] .captcha__img{
  filter:invert(1) hue-rotate(180deg) contrast(.94);
}

/* ===========================================================================
   5. CELEBRACION DE REGISTRO
      Cubre la tarjeta completa: el formulario ya no importa, solo el logro.
   ======================================================================== */
.authdone{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  padding:var(--sp-6);
  text-align:center;
  background:var(--surface);
  animation:card-in var(--dur-slow) var(--ease-spring) both;
}
.authdone[hidden]{ display:none; }
.authdone__title{ margin:0; }
.authdone__text{ max-width:32ch; }

/* ===========================================================================
   6. PANEL DE MARCA (solo escritorio)
      En celular y tablet NO se renderiza: la promesa de valor la da el
      encabezado de la tarjeta y no hay espacio que gastar.
   ======================================================================== */
.brandpanel{ display:none; }

.brandpanel__inner{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
  max-width:520px;
}
.brandpanel__title{ margin:0; }
.brandpanel__lead{
  font-size:var(--fs-lg);
  line-height:var(--lh-snug);
  color:var(--text-muted);
  max-width:46ch;
}

.benefits{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  margin:0;
  padding:0;
  list-style:none;
}
.benefit{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-4);
}
.benefit__icon{
  flex:0 0 auto;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  color:var(--primary);
  background:var(--primary-soft);
  box-shadow:var(--sh-1);
}
.benefit__icon svg{
  width:22px; height:22px;
  stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.benefit__body{ display:flex; flex-direction:column; gap:2px; }
.benefit__title{
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight);
  color:var(--text);
}
.benefit__text{
  font-size:var(--fs-sm);
  color:var(--text-muted);
  line-height:var(--lh-snug);
}

/* Ilustracion abstracta: flota muy despacio para que el panel no se sienta
   estatico junto a una tarjeta llena de movimiento. */
.brandpanel__art{
  width:100%;
  max-width:300px;
  opacity:.95;
  animation:art-float 9s var(--ease-in-out) infinite alternate;
}
.brandpanel__art svg{ width:100%; height:auto; overflow:visible; }

.art__sheet{
  fill:var(--surface);
  stroke:var(--border);
  stroke-width:1.5;
  /* Token y no literal: era el unico hex suelto fuera de tokens.css, y una
     sombra negra al 10% no se ve en tema oscuro. --sh-art tiene valor propio
     por tema. */
  filter:drop-shadow(var(--sh-art));
}
.art__line{ fill:var(--border-strong); }
.art__line--wide{ fill:var(--primary); opacity:.85; }
.art__line--soft{ fill:var(--primary-2); opacity:.55; }
.art__stamp{
  fill:var(--success-soft);
  stroke:var(--success);
  stroke-width:2;
  stroke-dasharray:189;
  stroke-dashoffset:189;
  animation:draw-circle var(--dur-xslow) var(--ease-out) 300ms forwards;
}
.art__check{
  fill:none;
  stroke:var(--success);
  stroke-width:3.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:40;
  stroke-dashoffset:40;
  animation:draw-check var(--dur-slow) var(--ease-out) 900ms forwards;
}

@keyframes art-float{
  0%  { transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(-14px) rotate(-1.2deg); }
}

/* ===========================================================================
   7. TABLET (>=768px)
      Aparece la segunda columna de nombre/apellido y el captcha se acomoda
      en linea: ya hay ancho para la imagen junto al campo.
   ======================================================================== */
@media (min-width:768px){
  .auth{
    padding-top:max(var(--sp-8), var(--safe-top));
    padding-bottom:max(var(--sp-10), var(--safe-bottom));
  }
  .auth__grid{ max-width:480px; }
  .auth__main{ max-width:480px; gap:var(--sp-5); }

  .auth__pair{ grid-template-columns:1fr 1fr; }

  .captcha__body{
    flex-direction:row;
    align-items:flex-start;
  }
  .captcha__imgwrap{
    flex:0 0 auto;
    width:170px;
    min-height:var(--field-h);
  }
  .captcha__img{ max-height:46px; }
}

/* ===========================================================================
   8. ESCRITORIO (>=1200px)
      Dos columnas: marca a la izquierda, tarjeta a la derecha.
   ======================================================================== */
@media (min-width:1200px){
  .auth{ padding-inline:var(--sp-8); }

  .auth__grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,var(--maxw-form));
    align-items:center;
    gap:var(--sp-16);
    max-width:var(--maxw-content);
  }

  .brandpanel{
    display:flex;
    align-items:center;
    animation:stagger-in var(--dur-xslow) var(--ease-out) both;
  }

  .auth__main{
    max-width:var(--maxw-form);
    margin-inline:0;
  }
}

/* Se elimino el @media (min-width:1600px) que ampliaba el gap: era un CUARTO
   punto de quiebre y la especificacion del proyecto fija solo 768 y 1200.
   Con --sp-16 el aire entre columnas ya se ve bien en pantallas anchas. */

/* En tactil no se dejan estados de hover "pegados" */
@media (hover:none){
  .captcha__refresh:hover{ box-shadow:none; }
}

/* ===========================================================================
   9. MOVIMIENTO REDUCIDO (obligatorio, al final para ganar en cascada)
   ======================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  /* Los trazos que se dibujan deben quedar VISIBLES, no a medio dibujar */
  .art__stamp,
  .art__check{ stroke-dashoffset:0; }
  .captcha[data-state="loading"] .captcha__imgwrap::after{ display:none; }
}