/* auth.css — pantallas sin sesión: ingreso y cambio de contraseña (T39). Solo tokens; sin estilos en línea.
   Una columna de ancho acotado en todos los tamaños; el panel es el único contenedor con borde. */

@layer components {
  .auth {
    inline-size: min(100%, calc(30rem + 2 * var(--page-gutter)));
    min-block-size: 100dvh;
    margin-inline: auto;
    padding: var(--page-pad-top) var(--page-gutter) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));   /* holgura al final: el pie nunca queda pegado al borde ni bajo la barra del sistema */
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  @media (min-width: 48rem) {
    .auth { padding-block-start: clamp(var(--space-6), 10dvh, var(--space-8)); }
  }
  /* ---- Esquina superior: interruptor "Modo oscuro" (RF-229) ---- */
  .auth__top { display: flex; justify-content: flex-end; margin-block-end: calc(-1 * var(--space-2)); }

  /* ---- Marca: logo (o ícono por defecto) y nombre; en /system/ solo el texto ---- */
  .auth__brand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;   /* logo ancho (4:1): el nombre baja debajo en vez de quedar en una columna angosta */
    gap: var(--space-2) var(--space-4);
    min-block-size: 3.5rem;
  }
  .auth__brand.is-loading .auth__name { visibility: hidden; }   /* sin parpadeo de un nombre que no es el suyo */
  .auth__brand-text { display: grid; gap: var(--space-1); min-inline-size: 0; flex: 1 1 12rem; }
  /* Nombre de la aplicación y "Licenciado a": secundarios, con la letra mínima de RNF-9 (la base); el nombre del negocio
     (.auth__name) es fluido (--text-3xl, ≥ 26 px), siempre por encima de 1,25 veces la base (RF-231). */
  .auth__secondary, .auth__licensed { margin: 0; color: var(--muted); font-size: var(--text-base); overflow-wrap: anywhere; }
  .auth__name {
    margin: 0;
    font-size: var(--text-3xl);
    font-weight: 650;
    line-height: var(--leading-heading);
    text-wrap: balance;
    min-inline-size: 0;
  }

  .auth__mark {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: var(--radius-2);
    background: var(--accent-bg);
    color: var(--accent-strong);
  }
  .auth__mark .icon { inline-size: 2rem; block-size: 2rem; }
  /* Recuadro del logo (AS-95): hasta 96 px de alto y 288 px de ancho contando el borde y el aire; la imagen se ajusta
     dentro sin deformarse ni recortarse (4:1, cuadrada o 1:4). */
  .auth__logo {
    --logo-box-h: 6rem; --logo-box-w: 18rem;
    flex: none;
    max-inline-size: 100%;   /* a 320 px / zoom 400 % el recuadro nunca desborda la columna */
  }
  .auth__logo img {
    inline-size: auto; block-size: auto; object-fit: contain;
    max-block-size: calc(var(--logo-box-h) - 2 * var(--logo-pad));
    /* con la letra grande (rem) el recuadro crece: nunca más ancho que la columna (un % aquí sería cíclico) */
    max-inline-size: min(calc(var(--logo-box-w) - 2 * var(--logo-pad)), calc(100vw - 2 * var(--page-gutter) - 2 * var(--logo-pad)));
  }

  /* ---- Panel ---- */
  .auth__panel { display: flex; flex-direction: column; gap: var(--space-4); }
  .auth__panel > * { margin-block: 0; }
  .auth__panel > :empty { display: none; }   /* zonas de avisos vacías no suman separación */
  .auth__title { font-size: var(--text-xl); }
  .auth__context { color: var(--muted); }
  .auth__password { display: flex; gap: var(--gap-min); align-items: stretch; }
  .auth__password .input { flex: 1; min-inline-size: 0; }
  .auth__password .btn { padding-inline: var(--space-4); min-inline-size: 6rem; }
  .auth__toggle { align-self: flex-start; }
  .auth__forgot { color: var(--muted); }

  /* ---- Política (RF-127) y términos (RF-222): enlaces secundarios, agrupados bajo el formulario ----
     Misma letra que el resto (la base, el mínimo de RNF-9): de peso normal, no negrita; el objetivo táctil lo da el alto, no la letra. */
  .auth__legal {
    display: grid;
    gap: var(--gap-min);   /* RNF-3: 8 px exactos entre los dos objetivos de 56 px (T59) */
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--border);
  }
  .auth__policy summary {
    display: flex;
    align-items: center;
    min-block-size: var(--target);
    cursor: pointer;
  }
  .auth__policy summary::marker { color: var(--muted); }
  .auth__policy:not([open]) summary {
    inline-size: fit-content;
    max-inline-size: 100%;
    color: var(--accent-strong);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.2em;
  }
  .auth__policy[open] summary { color: var(--text); font-weight: 400; text-decoration: none; }
  .auth__policy-body { display: grid; gap: var(--space-3); padding-block: var(--space-3); }
  .auth__policy-body > * { margin: 0; }
  .auth__policy-text {
    white-space: pre-wrap;
    max-block-size: 18rem;
    overflow: auto;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-1);
    background: var(--bg);
  }
  .auth__policy-text:focus-visible { outline-offset: -1px; }

  /* ---- Reglas de la contraseña: título aquí; la lista .rules/.rule vive en components.css (la usa también "Cambiar contraseña", T105) ---- */
  .auth__rules-title { margin: 0 0 var(--space-2); font-weight: 650; }

  /* ---- Pie: el crédito del desarrollador (.credit, components.css) ---- */
  .auth__footer { color: var(--muted); }

  /* Celular (T59): ingreso más corto, solo con espacios (la letra, los campos y los botones no cambian). */
  @media (max-width: 47.99rem) {
    .auth { --page-pad-top: var(--space-2); gap: var(--space-2); padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
    .auth__top { margin-block-end: 0; }
    .auth__brand-text { gap: 0; }
    .auth__panel { gap: var(--space-2); }
    .auth__legal { padding-block-start: 0; }
    .auth .field__help, .auth__forgot, .auth .credit__who { line-height: 1.3; }   /* textos de varias líneas, algo más juntos (sigue sobre 1,25) */
  }
}

/* El panel y la pila viven en la capa `layout` (layout.css); sus espacios en el celular se ajustan en la misma capa. */
@layer layout {
  @media (max-width: 47.99rem) {
    .auth__panel.panel { padding: var(--space-2) var(--space-4); }
    .auth__panel .stack { --stack-gap: var(--space-2); }
  }
}