/* =========================================================
   CINTIA — page.css (layout de páginas tipo “Acerca”, cursos, etc.)
   ========================================================= */

/* ---------- Variables de selección y alturas ---------- */
:root {
  /* Colores para estados activos/hover en subnav/TOC/chips */
  --sel-bg: #0f1a28;
  --sel-fg: #f4f8ff;

  /* Alturas de elementos “sticky” */
  --header-h: 60px; /* la tienes en nav.css, aquí la usamos como fallback */
  --quickbar-h: 44px; /* alto aprox. de la quickbar */
  --quickbar-overlap: 20px; /* ¡esto es clave! traslape que metiste (-20px) */
  --anchor-extra: 8px; /* respirito extra para que no quede pegado */
}
html[data-theme="dark"] {
  --sel-bg: #0e1622;
  --sel-fg: #eaf1ff;
}

/* ---------- Layout base ---------- */
.page-wrap {
  padding: 10px 0 60px;
}
.page-grid {
  display: grid;
  grid-template-columns: 270px 1fr 290px;
  gap: 24px;
}
.page-content {
  min-width: 0;
}
.page-content .lead {
  color: var(--muted);
  margin: 6px 0 16px;
}

/* Compensación de scroll (header sticky + quickbar) */
.page-content :is(h2[id], h3[id], .anchor-target) {
  scroll-margin-top: calc(
    var(--header-h) + var(--quickbar-h) - var(--quickbar-overlap) +
      var(--anchor-extra)
  );
}

/* ---------- Quickbar superior ---------- */
.quickbar {
  position: sticky;
  /* Si quieres que “desaparezca” mejor bajo el header, prueba -1px/0/+1px */
  top: calc(var(--header-h, 60px) - 20px);
  z-index: 60;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.quickbar .container {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--card);
  text-decoration: none;
  font-size: 14px;
}
.chip:hover {
  background: color-mix(in oklab, var(--brand-2) 8%, var(--card));
}
/* activo */
.chip[aria-current="true"],
.chip.active {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border-color: var(--border);
}

/* ---------- Subnav izquierda ---------- */
.subnav {
  position: sticky;
  top: calc(var(--header-h, 60px) + var(--quickbar-h, 44px) + 8px);
  align-self: start;
}
.subnav h4 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.subnav .list {
  display: grid;
  gap: 8px;
  list-style: none; /* evita viñetas que desalinean */
  padding-left: 0; /* quita sangría por defecto */
}
.subnav .list a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  background: var(--card);
}

/* hover/activo */
.subnav .list a:hover,
.subnav .list a:focus {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border-color: var(--border);
}
.subnav .list a[aria-current="true"],
.subnav .list a.active,
.subnav .list li:focus-within > a {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border-color: var(--border);
}

/* ---------- TOC derecha ---------- */
.toc {
  position: sticky;
  top: calc(var(--header-h, 60px) + var(--quickbar-h, 44px) + 8px);
  align-self: start;
}
.toc .box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
}
.toc h4 {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.toc a {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
}
.toc a:hover,
.toc a:focus {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border-color: var(--border);
}
.toc a[aria-current="true"],
.toc a.active {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border-color: var(--border);
}

/* ---------- Organigrama ---------- */
.org-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0;
}
.org-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.org-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

/* ---------- Sidebar derecha (sustituye al TOC) ---------- */
.sidebar {
  position: sticky;
  top: calc(var(--header-h, 60px) + 64px);
  align-self: start;
}
.sidebar .box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}
.sidebar h4 {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Listado compacto dentro de la caja de precio */
.sidebar .price-box .bullets {
  margin: 0 0 8px 0;
  padding: 0 0 0 18px;
  line-height: 1.5;
}
.sidebar .cta-col {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.sidebar .cta-col .btn {
  width: 100%;
}

/* Calculadora en sidebar */
.beca-calc label {
  display: block;
  margin: 4px 0 6px;
}
.beca-calc input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  padding: 0 10px;
}
.beca-calc .mini-facts {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  font-size: 12px;
  color: var(--muted);
}
.beca-calc output {
  display: block;
  margin-top: 10px;
  background: color-mix(in oklab, var(--brand-2) 6%, var(--card));
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}

/* Layout: ajusta ancho de la tercera columna si quieres */
.page-grid {
  grid-template-columns: 270px 1fr 320px;
}

/* Accordion en la sidebar */
.sidebar-accordion {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: clip;
}
.sidebar-accordion > summary {
  cursor: pointer;
  padding: 12px;
  font-weight: 600;
}
.sidebar-accordion[open] > summary {
  border-bottom: 1px solid var(--border);
}
.sidebar-accordion .acd-body {
  padding: 10px 12px 12px;
}

/* Detalles tipográficos breves */
.small {
  font-size: 12px;
}

/* Responsive: decide si ocultas la sidebar o la bajas debajo del contenido */
@media (max-width: 1160px) {
  .page-grid {
    grid-template-columns: 240px 1fr;
  }
  /* opción A: ocultarla en pantallas medianas/pequeñas */
  /* .sidebar{ display:none; } */

  /* opción B (recomendada): mostrarla debajo del contenido */
  .sidebar {
    position: static; /* quita sticky */
    grid-column: 1 / -1; /* ocupa el ancho completo */
  }
}
@media (max-width: 860px) {
  .page-grid {
    grid-template-columns: 1fr;
  }
  .subnav {
    position: static;
  }
}

/* ---------- Acordeones ---------- */
.acd {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  margin: 8px 0;
}
.acd > summary {
  cursor: pointer;
  padding: 10px 12px;
}
.acd .acd-body {
  padding: 0 12px 12px;
  color: var(--text);
}
.acd[open] > summary {
  border-bottom: 1px solid var(--border);
}

/* ---------- Tarjetas de recursos ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cards-grid .card {
  padding: 14px;
  border-radius: 14px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.cards-grid .card:hover {
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--brand-2) 8%, var(--card));
}
.cards-grid h3 {
  margin: 4px 0 6px;
}
.cards-grid p {
  margin: 0;
  color: var(--muted);
}

/* ---------- Tablas ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  background: var(--card);
}
th,
td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
tbody tr:hover {
  background: color-mix(in oklab, var(--brand-2) 6%, var(--card));
}
/* Encabezado con alto contraste */
thead th {
  font-weight: 700;
  background: #0e1622;
  color: #eaf1ff;
}
html[data-theme="light"] thead th {
  background: #0f1a28;
  color: #f4f8ff;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1160px) {
  .page-grid {
    grid-template-columns: 240px 1fr;
  }
  .toc {
    display: none;
  }
}
@media (max-width: 860px) {
  .page-grid {
    grid-template-columns: 1fr;
  }
  .subnav {
    position: static;
  }
  .quickbar {
    top: var(--header-h, 60px);
  }
  /* Compensación menor en móviles */
  .page-content :is(h2, h3)[id] {
    scroll-margin-top: calc(
      var(--header-h, 60px) + var(--quickbar-h, 44px) + 2px
    );
  }
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .org-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Color de título en plantillas de proyecto ---------- */
html[data-template="project"] h1,
body.page-project h1 {
  color: var(--brand-2);
}
html[data-template="project"] .project-hero h1,
body.page-project .project-hero h1,
html[data-template="project"] .project-header h1,
body.page-project .project-header h1 {
  color: var(--brand-2);
}