/* src/styles/Layout.css — Base de layout y jerarquía tipográfica */

/* ── BASE DE DOCUMENTO ────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* Red de seguridad: evita que la página se pueda arrastrar
     lateralmente si algún elemento se desborda por error.
     Se usa `clip` en vez de `hidden`: `hidden` fuerza a que
     overflow-y compute a `auto` (regla del spec de CSS), lo que
     convierte a <body> en su propio contenedor de scroll y rompe
     `position: sticky` en cualquier parte de la app (ej. el índice
     lateral de la Guía). `clip` recorta igual mens que `hidden`, sin
     ese efecto secundario. */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  background-color: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.dark-mode-active {
  background-color: var(--surface-page);
  color: var(--text-primary);
}

.App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

/* ── CONTENEDORES DE PÁGINA ───────────────────────────────────── */
.page-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
  width: 100%;
}

.page-container-sm {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
  width: 100%;
}

/* ── GRID ESTÁNDAR ────────────────────────────────────────────── */
.modern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-7);
  width: 100%;
}

@media (max-width: 768px) {
  .modern-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .page-container,
  .page-container-sm {
    padding: var(--space-6) var(--space-4);
  }
}

/* ── JERARQUÍA TIPOGRÁFICA ────────────────────────────────────── */

/* Display — encabezados de landing/hero */
.text-display {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Títulos de página (H1 semántico) */
h1,
.page-title {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-700);
  margin-bottom: var(--space-2);
}

/* Subtítulos de sección (H2) */
h2,
.section-heading {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* Títulos de panel / card (H3) */
h3,
.panel-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

/* Encabezados menores */
h4 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); color: var(--text-primary); }
h5 { font-size: var(--text-md);  font-weight: var(--weight-semibold); color: var(--text-secondary); }
h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-secondary); }

/* Texto base */
p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

/* Labels semánticos */
label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

/* Texto auxiliar / captions */
.text-caption,
.text-aux {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
}

/* Texto de tabla */
.text-table {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

/* Etiquetas de tabla (th) */
.text-table-head {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Texto de botones */
.text-btn {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

/* ── DARK MODE — TIPOGRAFÍA ────────────────────────────────────── */
.dark-mode-active h1,
.dark-mode-active .page-title {
  color: var(--color-secondary-400);
}

.dark-mode-active h2,
.dark-mode-active h3,
.dark-mode-active h4 {
  color: var(--text-primary);
}

.dark-mode-active p {
  color: var(--text-secondary);
}

/* ── UTILIDADES DE TEXTO ──────────────────────────────────────── */
.text-muted,
.text-muted-foreground {
  color: var(--text-secondary) !important;
}

/* Subtítulos/leyendas pequeñas bajo un título o un valor (stats, cards de
   proyecto...). Usa el token de texto secundario -no tertiary- para que siga
   siendo legible en modo claro; se ajusta solo en modo oscuro vía el token. */
.text-caption {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

/* .text-tertiary: se usa como clase plana en ~40 archivos asumiendo que
   Tailwind la generaba (como hace con text-primary/text-secondary, que sí
   son colores de marca en tailwind.config.js). "tertiary" nunca se declaró
   ahí, así que esta clase no existía y el texto quedaba sin colorear. */
.text-tertiary {
  color: var(--text-tertiary);
}

.dark-mode-active .text-muted,
.dark-mode-active .text-muted-foreground {
  color: var(--text-secondary) !important;
}

.dark-mode-active .dark-mode-text {
  color: var(--text-primary);
}

.dark-mode-active .dark-mode-title {
  color: var(--color-secondary-400);
}

/* ── DIVISORES ────────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-6) 0;
}

.dark-mode-active hr {
  border-top-color: var(--border-subtle);
}

/* ── OVERLINE / EYEBROW ───────────────────────────────────────── */
.overline {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary-500);
}

.dark-mode-active .overline {
  color: var(--color-secondary-400);
}