/* ==========================================================================
   Stackapital — layout.css · el shell del backoffice y primitivas de
   composición. Nada de color ni tipografía: roles y tokens.
   ========================================================================== */

@layer layout {

  /* ---------------------------------------------------------------------
     El shell: barra lateral fija + columna (cabecera + contenido + pie).
     Para el ANÓNIMO (verificación del QR, páginas de acceso propias) solo
     existe la columna, con el contenido estrecho y centrado. En móvil la
     barra lateral se convierte en un <dialog> que abre el botón del menú
     (nativo, una línea en app.js).
     --------------------------------------------------------------------- */
  .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      'main'
      'footer';
    min-height: 100svh;
  }
  body.app--shell .app {
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      'sidebar header'
      'sidebar main'
      'sidebar footer';
  }

  /* ---------- Barra lateral ---------- */
  .app-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: sticky;
    top: 0;
    height: 100svh;
    padding: var(--space-5) var(--space-4);
    background: var(--surface);
    border-right: 1px solid var(--line);
    overflow-y: auto;
  }
  .app-sidebar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) 0;
    color: var(--fg);
    --marca-iso: 32px;
  }
  .app-sidebar__brand:hover { text-decoration: none; }
  .app-sidebar__iso { width: var(--marca-iso); height: var(--marca-iso); flex: none; }
  /* Lockup calibrado sobre logo.svg (como .brand__wm de la landing):
     nombre = 3.18×isotipo de ancho, 0.70×isotipo de alto, centro de la caja
     igualado al isotipo y descendente colgando (8.62 % de su alto). */
  .app-sidebar__wm {
    width: calc(var(--marca-iso) * 3.18);
    height: calc(var(--marca-iso) * 0.7008);
    transform: translateY(8.62%);
    flex: none;
  }

  .app-nav { display: grid; gap: var(--space-1); }
  .app-nav__section { padding: var(--space-3) var(--space-2) var(--space-1); }
  .app-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--fg-2);
    font-weight: 500;
    font-size: var(--text-md);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast);
  }
  .app-nav__link:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
  /* Activo (#91): tinta normal sobre fondo sutil — accent/bg-2 se queda en
     4,34:1 y no llega a AA en texto de 15 px. La marca la ponen el peso y
     la barra --accent (3,97:1 ≥ 3:1 no textual), nunca solo el color. */
  .app-nav__link[aria-current='page'] {
    background: var(--surface-2);
    color: var(--fg);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .app-nav__link .icon { flex: none; }

  .app-sidebar__foot {
    margin-top: auto;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2) 0;
    border-top: 1px solid var(--line);
    font-size: var(--text-xs);
    color: var(--fg-3);
  }
  .app-sidebar__foot a { color: var(--fg-2); }

  /* ---------- Cabecera de la página (dentro de la columna) ---------- */
  .app-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--header-h);
    padding: var(--space-3) var(--space-5);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  /* El botón del menú (solo móvil; abre el <dialog>) lo viste
     components.css: su display tiene que ganar a `.button`, y una regla
     de esta capa pierde siempre con components (#87). */
  .app-header__user {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
  }
  .app-header__user:hover { background: var(--surface-2); text-decoration: none; }
  .app-header__email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--fg-2);
  }

  /* ---------- Zona de contenido ---------- */
  .app-main {
    grid-area: main;
    width: 100%;
    padding: var(--space-6) var(--space-5) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  /* El anónimo ve una columna estrecha y centrada (sin secciones que anclar) */
  body:not(.app--shell) .app-main {
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-block: var(--space-7);
  }

  .app-footer {
    grid-area: footer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--line);
    font-size: var(--text-xs);
    color: var(--fg-3);
  }
  .app-footer a { color: var(--fg-2); }

  /* ---------- Móvil: la barra lateral es un <dialog> ---------- */
  @media (max-width: 900px) {
    /* Misma especificidad (0,2,1) que la regla base del shell de arriba:
       al estar después en la MISMA capa, gana por orden de cascada. Con
       `.app` a secas (0,1,0) esta versión perdía siempre y la pista de
       var(--nav-w) seguía reservando su columna con la barra oculta
       (`display: none` no borra la pista): el contenido quedaba aplastado
       en la columna derecha. El anónimo no la necesita: su rejilla base ya
       es una sola columna ('main' 'footer'). */
    body.app--shell .app {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        'header'
        'main'
        'footer';
    }
    .app-sidebar { display: none; }
    /* El botón del menú vuelve aquí arriba: lo re-muestra el media query
       de components.css (esta capa perdería con `.button`). */
    .app-main { padding: var(--space-5) var(--space-4) var(--space-7); }
    /* Objetivo táctil 44 px en el menú del móvil (docs/06 §Accesibilidad):
       en el <dialog> la densidad de escritorio sobra. */
    .app-nav__link { min-height: 44px; }

    /* El MISMO contenido de la barra lateral vive dentro del dialog; Django
       lo pinta una vez por página con {% include %} y el CSS decide cuál se
       ve. El dialog es nativo: Escape y clic fuera cierran solos. */
    .app-nav-dialog {
      width: min(88vw, 340px);
      height: 100dvh;
      max-height: none;
      margin: 0 0 0 auto;
      border: 0;
      border-left: 1px solid var(--line);
      border-radius: 0;
      padding: var(--space-5) var(--space-4);
      background: var(--surface);
    }
    .app-nav-dialog::backdrop {
      background: var(--scrim); /* #109: el tinte vive en tokens.css */
      backdrop-filter: blur(2px);
    }
    .app-nav-dialog .app-sidebar__foot { display: none; }
  }

  /* ---------------------------------------------------------------------
     Primitivas de composición (el gap sale de los tokens de espacio)
     --------------------------------------------------------------------- */

  /* .container: cerra el ancho de lectura del backoffice */
  .container { width: 100%; max-width: var(--container); margin-inline: auto; }
  .container--narrow { max-width: var(--container-narrow); }

  /* .stack: apilar en columna (el 90 % de los casos). Los modificadores son
     autosuficientes (``stack--sm`` vale solo: ``stack stack--sm`` también) —
     el gap del modificador gana al base por orden de cascada. La escala
     llega hasta ``--lg``: el salto a 48 px (--xl) no lo habla nadie (#137);
     vuelve cuando una pantalla lo pida. */
  .stack, .stack--xs, .stack--sm, .stack--md, .stack--lg {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-4);
  }
  .stack--xs { gap: var(--space-1); }
  .stack--sm { gap: var(--space-2); }
  .stack--md { gap: var(--space-3); }
  .stack--lg { gap: var(--space-6); }

  /* .cluster: una fila que envuelve (botones, filtros, chips). Modificadores
     autosuficientes, igual que .stack. El pie alineado a la derecha lo
     ponen .button-group, .card__footer y .modal__footer (#137: cluster--end
     no lo hablaba nadie). */
  .cluster, .cluster--sm, .cluster--between {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
  .cluster--sm { gap: var(--space-2); }
  .cluster--between { justify-content: space-between; }

  /* .grid-auto: rejilla de tarjetas que se apañan solas */
  .grid-auto {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  }

  /* .grid-fit: como grid-auto pero con auto-FIT — cuando el número de
     tarjetas es FIJO y deben repartirse el ancho entre sí (las tres cifras
     del panel, los dos tops, los cubos del aging): auto-fill dejaría las
     pistas sobrantes vacías a la derecha y las tarjetas más estrechas. */
  .grid-fit {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  }

  /* .split: dos columnas que colapsan (filtros | listado, ficha | acciones) */
  .split {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 900px) {
    .split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .split--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  /* Cabecera de vista: título + una sola acción primaria */
  .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .page-head__titles { display: grid; gap: var(--space-2); }

  /* ---------------------------------------------------------------------
     La PUERTA de acceso (login, recuperar contraseña, MFA…): la página
     entera ES el layout — cal de fondo con el resplandor albero de la
     marca, logotipo arriba, tarjeta en el centro (templates/acceso.html).
     --------------------------------------------------------------------- */
  .acceso {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: var(--space-6) var(--space-4);
    background:
      radial-gradient(60% 50% at 78% 12%, color-mix(in srgb, var(--brasa) 16%, transparent), transparent 70%),
      radial-gradient(50% 40% at 12% 92%, color-mix(in srgb, var(--azulejo) 7%, transparent), transparent 70%),
      var(--bg);
  }
  .acceso__panel {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: stretch;
  }
  .acceso__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    align-self: center;
    color: var(--fg);
  }
  .acceso__brand:hover { text-decoration: none; }
  .acceso__brand { --marca-iso: 34px; }
  .acceso__card {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .acceso__title {
    font: 500 var(--text-xl)/var(--leading-tight) var(--f-display);
    letter-spacing: -0.02em;
  }
  .acceso__intro { font-size: var(--text-sm); color: var(--fg-2); }
  .acceso__pie {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--fg-3);
  }
  .acceso__pie a { color: var(--fg-2); }
}