/* layout.css — contenedor, rejilla y pila responsive de 375 px a escritorio.
   Marco base de página SIN la navegación (la navegación es T40).
   Puntos de corte (plan §7): < 48rem una columna; 48-64rem tableta; >= 64rem escritorio. */

@layer layout {
  /* Marco: [enlace saltar] encabezado / contenido / pie */
  .app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* el contenido ancho (tablas) nunca ensancha la página */
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
  }

  .app-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-3);
    padding-inline: var(--page-gutter);
    background: var(--surface);
    border-block-end: 1px solid var(--border);
  }
  .app-header__title { font-size: var(--text-lg); font-weight: 650; margin: 0; }
  .app-header__actions { margin-inline-start: auto; display: flex; gap: var(--gap-min); }

  .app-main { padding-block: var(--page-pad-top) var(--page-pad-bottom); }

  .app-footer {
    padding-block: var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--page-gutter);
    border-block-start: 1px solid var(--border);
    color: var(--muted);
  }

  /* Contenedor centrado con márgenes laterales que crecen con la pantalla */
  :root { --page-gutter: var(--space-4); }
  @media (min-width: 48rem) { :root { --page-gutter: var(--space-6); } }
  @media (min-width: 64rem) { :root { --page-gutter: var(--space-7); } }

  .container {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
  }
  .container--form { inline-size: min(100%, 40rem + 2 * var(--page-gutter)); margin-inline: 0; }
  .container--narrow { inline-size: min(100%, 48rem); }

  /* Pila vertical: separa hijos directos con un espacio constante */
  .stack { --stack-gap: var(--space-4); display: flex; flex-direction: column; gap: var(--stack-gap); }   /* la variable se reinicia: una pila anidada no hereda el espacio de la de fuera */
  .stack--tight { --stack-gap: var(--space-2); }
  .stack--loose { --stack-gap: var(--space-6); }
  .stack > * { margin-block: 0; }

  /* Fila que se parte sola cuando no cabe */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-min) var(--space-3);
  }

  /* Rejilla adaptable sin puntos de corte: columnas de al menos 18rem */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-4);
  }

  /* Formularios: una columna; dos cuando el contenedor (no la pantalla) lo permite */
  .form-grid { container-type: inline-size; }
  .form-grid__fields { display: grid; gap: var(--space-4); }
  @container (min-width: 36rem) {
    .form-grid__fields { grid-template-columns: 1fr 1fr; }
    .form-grid__fields > .field--wide { grid-column: 1 / -1; }
  }

  /* Pantalla de trabajo: el contenido ocupa una columna hasta tableta */
  .split { display: grid; gap: var(--space-5); }
  @media (min-width: 64rem) {
    .split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  }

  /* Superficie con borde: contenedor de grupo (nunca anidar otra dentro) */
  .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    padding: var(--space-5);
    box-shadow: var(--shadow-1);
  }
  @media (max-width: 47.99rem) { .panel { padding: var(--space-4); } }
}