/* ════════════════════════════════════════════════════════════════════════
   Layout — LINEAMIENTOS_DISENO.md §4 (retícula) y §5.1/§5.2/§5.12 (cromo).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Barra de marca: 4px degradado en toda página (§5.1) ─────────────── */
.brandbar { height: 4px; background: var(--grad); }

/* ── Header sticky blanco (§5.2) ─────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-6);
  align-items: center;
  min-height: var(--header-h);
  padding: var(--s-3) 28px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.topbar__brand { min-width: 0; }

.topbar__title {
  font-size: var(--fs-lg);          /* H1 de app: 22px/800 (§3) */
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--navy);
}

/* Línea de metadatos bajo el H1 (§5.2): 12.5px slate, datos con · */
.head-sub {
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.4;
  margin-top: 2px;
}

.topbar__controls { display: flex; gap: var(--s-3); }
.topbar__actions  { display: flex; gap: var(--s-2); }

/* ── App shell: rail + contenido, cap fluido min(1720px, 100%) (§4) ──── */
.shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  max-width: min(1720px, 100%);
  margin: 0 auto;
  min-height: calc(100vh - var(--header-h) - 4px);
  background: var(--card);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.rail {
  background: var(--card);
  border-right: 1px solid var(--line);
  min-width: 0;
}

.rail__inner {
  position: sticky;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.rail__group { display: flex; flex-direction: column; gap: var(--s-4); }
.rail__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.rail__footer { margin-top: auto; }

.content {
  padding: var(--s-6) 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;                 /* gap entre tarjetas grandes (§4) */
  min-width: 0;
  background: var(--bg);
}

/* ── KPIs (§4): auto-fit minmax(170px,1fr) ───────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

/* ── Footer de app (§5.12): claro, 3 bloques 12px muted ──────────────── */
.foot {
  max-width: min(1720px, 100%);
  margin: 0 auto;
  padding: var(--s-5) 28px var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--card);
}
.foot b { color: var(--slate); font-weight: 600; }

.footnote {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--slate);
  font-size: var(--fs-xs);
}

/* ── Responsive: colapso a 1 columna en 920px (§4) ───────────────────── */
@media (max-width: 920px) {
  .shell { grid-template-columns: minmax(0, 1fr); border-left: none; border-right: none; }
  .rail {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .rail__inner {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .topbar { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-3) 18px; }
  .topbar__controls, .topbar__actions { flex-wrap: wrap; }
  .content { padding: var(--s-4) 18px; }
  .foot { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Pantallas anchas (≥1500px): más aire lateral en el contenido (§4) ─ */
@media (min-width: 1500px) {
  .content { padding: var(--s-6) var(--s-8); }
}

/* ── Print ───────────────────────────────────────────────────────────── */
@media print {
  .topbar__actions, .rail, #seg-modo, .card__actions, [data-export-csv], #btn-print { display: none !important; }
  .shell { grid-template-columns: 1fr; max-width: none; border: none; }
  .topbar { position: static; }
  .brandbar { display: none; }
  body { background: white; }
  .card, .kpi-card { break-inside: avoid; box-shadow: none; border: 1px solid var(--line); }
}