/* ==========================================================================
   TANATOS · auth.css
   Ingreso, registro e intro animada del portal. Se carga sólo en esas
   pantallas, después de tanatos.css. Capa: tn.auth.

   Línea de tiempo de la intro (≈3,6 s, sólo la primera vez por sesión):
     0,15 s  el anillo de la marca se dibuja
     0,85 s  la línea del horizonte cruza
     1,05 s  el hemisferio sur se llena
     1,20 s  ondas concéntricas se expanden
     1,45 s  el wordmark TANATOS aparece letra por letra
     2,00 s  descriptor + barra de carga
     2,90 s  la intro se repliega y se convierte en el panel de marca
     3,05 s  el formulario entra escalonado
   Se saltea con click o cualquier tecla. Con "reducir movimiento" no se
   reproduce. Sin JS no existe.
   ========================================================================== */
@layer tn.auth {

  .auth-page { background: var(--tn-surface); }
  html.has-intro:not(.is-intro-done) body { overflow: hidden; }

  /* ---------- Layout de acceso ---------- */
  .auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
  .auth__brand {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    padding: 44px 56px 36px;
    background: var(--tn-ink); color: var(--tn-on-ink);
  }
  .auth__brand::before { /* textura de puntos muy sutil */
    content: ""; position: absolute; inset: 0; z-index: -2;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  }
  .auth__art { position: absolute; right: -170px; bottom: -190px; width: 820px; height: 820px; z-index: -1; color: var(--tn-signal); pointer-events: none; }
  .auth__lockup { width: 210px; height: auto; }
  .auth__headline { font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: var(--tn-fw-semibold); color: #fff; max-width: 14ch; }
  .auth__lede { font-size: 16px; line-height: 1.55; color: var(--tn-on-ink-3); max-width: 42ch; }
  .auth__steps { list-style: none; margin: 0; padding: 0; max-width: 400px; }
  .auth__steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.09); font-size: 14px; color: var(--tn-on-ink-2); }
  .auth__steps b { font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: 12px; color: var(--tn-signal); padding-top: 2px; }
  .auth__foot { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--tn-ink-300); }

  .auth__form { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: var(--tn-surface); }
  .auth__card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 28px; }
  .auth__mobile-brand { display: none; }
  .auth__divider { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--tn-text-3); }
  .auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--tn-line); }
  /* Allow action text to reflow at high zoom without changing normal geometry. */
  .auth .btn--block { white-space: normal; height: auto; min-height: var(--tn-control-h-md); padding-block: 10px; }
  .auth .btn--block.btn--lg { min-height: var(--tn-control-h-lg); }

  /* Real registration contract: preserve selectors reassigned by its script. */
  /* Dueño (2026-11-07): una debajo de la otra, a todo el ancho de la tarjeta: la ayuda y los errores de la contraseña ya
     no quedan en una columna angosta. */
  .auth-passwords { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cuit-validation-icon { min-width: 18px; font-size: 18px; font-weight: 600; padding-right: 6px; }
  /* Botón: la × borra el CUIT; deshabilitado (tilde o vacío) es sólo el ícono de estado. */
  button.cuit-validation-icon { display: inline-grid; place-items: center; align-self: center; min-width: 28px; height: 28px; margin-right: 4px; padding: 0;
    border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: 18px; font-weight: 600; line-height: 1; }
  button.cuit-validation-icon:disabled { cursor: default; }
  button.cuit-validation-icon:not(:disabled) { cursor: pointer; }
  button.cuit-validation-icon:not(:disabled):hover { background: var(--tn-critical-bg, rgba(158, 27, 37, .08)); }
  button.cuit-validation-icon:focus-visible { outline: 2px solid var(--tn-ink); outline-offset: 1px; }
  [data-cuit-server-error][hidden] { display: none; }
  .cuit-validation-icon.is-valid, .cuit-validation-icon.is-registered { color: var(--tn-approved-fg); }
  .cuit-validation-icon.is-invalid { color: var(--tn-critical-fg); }
  .cuit-validation-message { font-size: 12.5px; line-height: 1.45; color: var(--tn-text-3); }
  .cuit-validation-message.is-valid, .cuit-validation-message.is-registered { color: var(--tn-approved-fg); font-weight: var(--tn-fw-medium); }
  .cuit-validation-message.is-invalid { color: var(--tn-critical-fg); }
  .registration-cuit-field:has(input[aria-invalid="true"]) .input-group { border-color: var(--tn-critical-fg); box-shadow: 0 0 0 3px rgba(158,27,37,.08); }
  .registration-cuit-field:has(input[data-validation-state="valid"]) .input-group,
  .registration-cuit-field:has(input[data-validation-state="registered"]) .input-group { border-color: #7FB894; box-shadow: none; }
  .auth__foot .mono { overflow-wrap: anywhere; min-width: 0; }
  .auth__card .flash a { color: inherit; text-decoration: underline; }
  .auth__card .field__error ul { margin: 0; padding-left: 18px; }

  .registration-success { text-align: center; outline: none; }
  .registration-success__seal { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: 0 auto; border-radius: 50%; background: var(--tn-ink); color: var(--tn-signal); }
  .registration-success__mark { display: block; width: 72px; height: 72px; filter: brightness(0) invert(1); animation: tn-registration-land .8s var(--tn-ease-out-expo) both; }
  .registration-success__orbit { position: absolute; inset: -7px; border: 1px solid var(--tn-line-strong); border-radius: inherit; animation: tn-registration-orbit 1.1s var(--tn-ease-out-expo) both; }
  .registration-success__check { position: absolute; right: -3px; bottom: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 4px solid var(--tn-surface); border-radius: 50%; background: var(--tn-signal); color: var(--tn-ink); animation: tn-registration-land .6s var(--tn-ease-out-expo) .4s both; }
  .registration-success .t-lede { font-size: 15px; }
  .registration-success [hidden] { display: none; }
  @keyframes tn-registration-land { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }
  @keyframes tn-registration-orbit { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .registration-success__mark, .registration-success__orbit, .registration-success__check { animation: none; } }

  @media (max-width: 900px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth__brand { display: none; }
    .auth__form { align-items: stretch; justify-content: flex-start; padding: 0; background: var(--tn-surface); min-height: 100vh; flex-direction: column; }
    .auth__mobile-brand { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 22px 20px 64px; background: var(--tn-ink); position: relative; overflow: hidden; }
    .auth__mobile-brand .auth__art { width: 420px; height: 420px; right: -120px; bottom: -150px; }
    .auth__card { position: relative; z-index: 1; max-width: none; margin-top: -40px; padding: 28px 20px 32px; background: var(--tn-surface); border-radius: 22px 22px 0 0; }
  }

  /* ---------- Entrada escalonada del login ---------- */
  .auth-anim { --i: 0; animation: tn-auth-in .9s var(--tn-ease-out-expo) both; animation-delay: calc(120ms + var(--i) * 70ms); }
  html.has-intro .auth__form .auth-anim { animation-delay: calc(3000ms + var(--i) * 70ms); }
  html.has-intro .auth__brand .auth-anim { animation-delay: calc(3550ms + var(--i) * 80ms); }
  /* El lockup del panel aparece sin desplazamiento: es donde "aterriza" el logo de la intro */
  html.has-intro .auth__brand .auth-anim--land { animation: tn-land .01s linear 3.52s both; }
  html.has-intro.is-intro-skipped .auth-anim,
  html.has-intro.is-intro-skipped .auth__brand .auth-anim,
  html.has-intro.is-intro-skipped .auth__form .auth-anim { animation-name: tn-auth-in-b; animation-duration: .7s; animation-delay: calc(140ms + var(--i) * 55ms); }
  @keyframes tn-land { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tn-auth-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes tn-auth-in-b { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* El arte zig.art anima terrazas y mar desde patterns.css (sólo sin "reducir movimiento"). */

  /* ---------- Intro ---------- */
  .intro { display: none; }
  html.has-intro .intro {
    position: fixed; inset: 0; z-index: var(--tn-z-intro); overflow: hidden;
    display: grid; place-items: center;
    background: radial-gradient(1200px 700px at 50% 45%, #10302C 0%, var(--tn-ink) 55%, var(--tn-ink-950) 100%);
    color: var(--tn-signal); cursor: pointer;
    clip-path: inset(0 0 0 0);
    animation: tn-intro-clip .78s cubic-bezier(.65, 0, .35, 1) 2.86s forwards, tn-intro-fade .45s ease 3.56s forwards;
  }
  html.has-intro.is-intro-skipped .intro { animation: tn-intro-fade-quick .38s ease forwards; }

  .intro__grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px; background-position: center;
    -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
    opacity: 0; animation: tn-fade-in 1.4s ease .05s forwards;
  }
  .intro__waves { position: absolute; left: 50%; top: calc(50% - 84.8px); width: 0; height: 0; }
  .intro__waves span {
    position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%;
    border: 1px solid rgba(200, 241, 105, .45); opacity: 0;
    animation: tn-wave 2.2s cubic-bezier(.2,.6,.2,1) forwards;
  }
  .intro__waves span:nth-child(1) { animation-delay: 1.2s; }
  .intro__waves span:nth-child(2) { animation-delay: 1.45s; }
  .intro__waves span:nth-child(3) { animation-delay: 1.7s; }

  /* Columna determinística: marca 132 · 30 · wordmark 440×67,6 · 30 · descriptor · 30 · barra.
     Centro de la marca = 50vh − 84,8 px · centro del wordmark = 50vh + 45 px (se usan en el vuelo). */
  .intro__center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
  .intro__mark { width: 132px; height: 132px; flex: none; overflow: visible; filter: drop-shadow(0 0 0 rgba(200,241,105,0)); animation: tn-glow 1.6s ease 1.05s forwards; }
  .intro__ring { fill: none; stroke: currentColor; stroke-width: 11; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 80px 80px; animation: tn-draw .95s cubic-bezier(.65,0,.35,1) .15s forwards; }
  .intro__horizon { stroke: currentColor; stroke-width: 3; stroke-linecap: round; transform: scaleX(0); transform-origin: 80px 80px; animation: tn-horizon .9s var(--tn-ease-out-expo) .85s forwards; }
  .intro__fill { fill: currentColor; transform: scaleY(0); transform-origin: 80px 80px; animation: tn-fill .6s var(--tn-ease-out-expo) 1.05s forwards; }

  .intro__word { width: 440px; height: 67.58px; flex: none; overflow: visible; fill: #fff; }
  .intro__letter { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: tn-letter .8s var(--tn-ease-out-expo) forwards; animation-delay: calc(1.45s + var(--i) * 65ms); }
  .intro__tag { font-family: var(--tn-font-mono); font-size: 12px; line-height: 18px; height: 18px; letter-spacing: .32em; text-transform: uppercase; color: var(--tn-ink-300); opacity: 0; animation: tn-fade-up .7s var(--tn-ease-out-expo) 2s forwards, tn-fade-out .3s ease 2.7s forwards; margin-top: -8px; text-align: center; padding: 0 20px; white-space: nowrap; }
  .intro__bar { width: 160px; height: 2px; flex: none; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; opacity: 0; animation: tn-fade-in .3s ease 2s forwards, tn-fade-out .3s ease 2.7s forwards; }

  /* Vuelo final: marca y wordmark viajan al lockup del panel de marca (arriba a la izquierda).
     Lockup: 210 px de ancho en (56, 44) → centro de la marca (78,45; 66,45), diámetro 31 px;
     centro del wordmark (188,1; 60,7), alto de mayúscula 18,6 px.
     La marca vuela más rápido (0,6 s) que el wordmark (0,72 s): así va siempre por delante y
     nunca pasa por encima de las letras. */
  @media (min-width: 901px) {
    html.has-intro .intro__mark { animation: tn-glow 1.6s ease 1.05s forwards, tn-fly-mark .6s cubic-bezier(.7, 0, .2, 1) 2.82s forwards; }
    html.has-intro .intro__word { animation: tn-fly-word .72s cubic-bezier(.7, 0, .2, 1) 2.82s forwards; }
  }
  @keyframes tn-fly-mark { to { transform: translate(calc(78.45px - 50vw), calc(151.25px - 50vh)) scale(.306); filter: drop-shadow(0 0 0 rgba(200,241,105,0)); } }
  @keyframes tn-fly-word { to { transform: translate(calc(188.1px - 50vw), calc(15.7px - 50vh)) scale(.353); } }
  @keyframes tn-fade-out { to { opacity: 0; } }
  .intro__bar i { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; animation: tn-bar .8s cubic-bezier(.65,0,.35,1) 2.05s forwards; }
  .intro__skip { position: absolute; right: 24px; bottom: 22px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--tn-ink-200); font-size: 12.5px; font-weight: var(--tn-fw-medium); opacity: 0; animation: tn-fade-in .4s ease .6s forwards; }
  .intro__skip:hover { background: rgba(255,255,255,.1); color: #fff; }

  @keyframes tn-draw { to { stroke-dashoffset: 0; } }
  @keyframes tn-horizon { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.8); opacity: 0; } }
  @keyframes tn-fill { to { transform: scaleY(1); } }
  @keyframes tn-glow { 0% { filter: drop-shadow(0 0 0 rgba(200,241,105,0)); } 40% { filter: drop-shadow(0 0 28px rgba(200,241,105,.55)); } 100% { filter: drop-shadow(0 0 14px rgba(200,241,105,.22)); } }
  @keyframes tn-wave { 0% { opacity: .7; transform: scale(.7); } 100% { opacity: 0; transform: scale(3.2); } }
  @keyframes tn-letter { from { opacity: 0; transform: translateY(22px) scaleY(1.15); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes tn-fade-in { to { opacity: 1; } }
  @keyframes tn-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes tn-bar { to { transform: scaleX(1); } }
  @keyframes tn-intro-center-out { to { opacity: 0; transform: scale(.94) translateY(-6px); filter: blur(4px); } }
  /* La intro se repliega exactamente sobre el panel de marca (51,2 % = 1.05fr / 2.05fr) */
  @keyframes tn-intro-clip { to { clip-path: inset(0 48.78% 0 0); } }
  @keyframes tn-intro-fade { to { opacity: 0; visibility: hidden; } }
  @keyframes tn-intro-fade-quick { to { opacity: 0; visibility: hidden; } }

  @media (max-width: 900px) {
    .intro__word { width: min(440px, 78vw); height: auto; }
    .intro__center { animation: tn-intro-center-out .55s var(--tn-ease) 2.8s forwards; }
    html.has-intro .intro { animation: tn-intro-wipe .8s var(--tn-ease-out-expo) 2.9s forwards, tn-intro-fade .4s ease 3.5s forwards; }
    html.has-intro .auth__form .auth-anim { animation-delay: calc(3150ms + var(--i) * 70ms); }
    @keyframes tn-intro-wipe { to { clip-path: inset(0 0 calc(100% - 131px) 0); } }
  }
  .field__help:empty { display: none; }
  .auth-passwords { grid-template-columns: minmax(0, 1fr); }
}