/**
 * iDi Atlas — Páginas por secciones
 * ─────────────────────────────────────────────────────────────────────────
 * Lo poco que es EXCLUSIVO de la plantilla de secciones: el acordeón de
 * preguntas frecuentes.
 *
 * La tipografía del contenido enriquecido vivía aquí como `.idi-seccion-rico`
 * y se mudó a `assets/css/idi-rico.css` con el nombre `.idi-rico`: resolvía el
 * mismo problema que las plantillas del tema y de los plugins intentaban
 * resolver con `prose` (que nunca se compiló), así que dejó de tener sentido
 * que fuera exclusiva de las secciones. Ese archivo se encola en todo el
 * frontend; este solo en páginas que usan la plantilla
 * (IDI_Page_Sections::enqueue_assets).
 *
 * @since idi-hub-central 1.2.0
 */

/* ── Titulares que no caben ────────────────────────────────────────────── */

/* Los títulos de sección NO van dentro de `.idi-rico`, así que no heredan su
   corte de palabra: se escriben en la plantilla, sobre utilidades de Tailwind.
   Sin esto, un titular con una palabra larga —«Interdisciplinariedad», el
   nombre de un programa, una dirección— se sale de la caja en un teléfono. El
   h1 del hero es el caso más visible porque va a 36 px en móvil. */
.idi-seccion h1,
.idi-seccion h2,
.idi-seccion h3 {
  overflow-wrap: break-word;
}

/* ── Acordeón de preguntas frecuentes ──────────────────────────────────── */

/* El marcador nativo no se puede estilar y `list-none` no basta en WebKit. */
.idi-faq-item summary::-webkit-details-marker { display: none; }
.idi-faq-item summary::marker { content: ''; }

.idi-faq-item .idi-faq-chevron {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.idi-faq-item[open] .idi-faq-chevron {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .idi-faq-item .idi-faq-chevron { transition: none; }
}

/* ── Carrusel ───────────────────────────────────────────────────────────
   La pista es `scroll-snap` nativo; aquí solo va lo que Tailwind no cubre:
   esconder la barra de desplazamiento, los mandos y los dos cruces.

   OJO con `snap-x` sin `snap-mandatory`: es la peor combinación posible,
   porque en escritorio parece funcionar y en un teléfono la pista se envuelve
   en varias filas. Las dos van juntas en las plantillas, siempre. */

.idi-pista {
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;
}

.idi-pista::-webkit-scrollbar { display: none; }

/* El desplazamiento suave se declara AQUÍ y no con `scroll-smooth` en el
   marcado, para poder retirarlo bajo `prefers-reduced-motion`: una utilidad en
   el HTML no se puede desactivar por consulta de medios. */
.idi-pista { scroll-behavior: smooth; }

.idi-carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;          /* 44 px es el objetivo táctil mínimo */
  border: 0; border-radius: 999px;
  background: var(--idi-surface, #fff);
  /* Token de RELLENO usado como tinta, A PROPÓSITO, y el verificador de uso de
     color lo marcará: aquí es lo correcto y conviene dejarlo escrito.

     La flecha es una isla CLARA dentro de `idi-surface-dark`, el ámbito que
     recalcula las tintas neutras contra el primario para que el texto se lea
     sobre fondo oscuro. Dentro de él, `--idi-primary-ink` se invierte a claro
     — y sobre el fondo claro de este botón eso es blanco sobre blanco. Lo
     probé: los seis kits pasaron de 0 a 2 fallos.

     Los tokens de RELLENO no participan en esa inversión, así que son los
     únicos que describen un par claro/oscuro estable dentro de un ámbito
     oscuro. El fondo es `--idi-surface` y la tinta, el primario. */
  color: var(--idi-primary, #0a1128);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .18);
  transition: opacity .2s ease;
}

.idi-carrusel-prev { left: 12px; }
.idi-carrusel-next { right: 12px; }

/* En los extremos se deshabilita, no se esconde: un control que se esfuma mueve
   la maqueta y el dedo falla el siguiente objetivo. */
.idi-carrusel-flecha:disabled { opacity: .35; cursor: default; }

.idi-carrusel-flecha:focus-visible {
  /* Reserva `currentColor` y no un azul: si el token faltara, un literal de
     marca pintaría el azul por defecto sobre un sitio que puede no serlo.
     Y no se deja sin reserva porque un `var()` sin resolver anula la
     declaración ENTERA, y ahí se pierde el indicador de foco. */
  outline: 3px solid var(--idi-accent, currentColor);
  outline-offset: 2px;
}

.idi-carrusel-mandos {
  position: absolute; left: 0; right: 0; bottom: 18px;
  z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}

.idi-carrusel-puntos { display: flex; align-items: center; gap: 8px; }

.idi-carrusel-punto {
  width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}

.idi-carrusel-punto.esta-activa { width: 26px; background: var(--idi-on-primary, #fff); }

/* El punto mide 10 px, muy por debajo del objetivo táctil. En vez de agrandar
   el punto —que estropearía el diseño— se agranda su ÁREA con un pseudoelemento
   transparente. Se ve un punto y se pulsa un cuadrado de 44. */
.idi-carrusel-punto::before {
  content: ''; position: absolute;
  width: 44px; height: 44px;
  transform: translate(-17px, -17px);
}

.idi-carrusel-punto { position: relative; }

.idi-carrusel-punto:focus-visible {
  outline: 3px solid var(--idi-on-primary, #fff);
  outline-offset: 3px;
}

.idi-carrusel-pausa {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  color: var(--idi-on-primary, #fff);
  font-size: 12px; line-height: 1;
  cursor: pointer;
}

.idi-carrusel-pausa:focus-visible { outline: 3px solid var(--idi-on-primary, #fff); outline-offset: 2px; }

/* El carrusel del listado vive en el flujo de la página, no a pantalla
   completa: sus flechas van fuera de las tarjetas, no encima. */
.idi-carrusel-listado .idi-carrusel-prev { left: -8px; }
.idi-carrusel-listado .idi-carrusel-next { right: -8px; }

/* ── Fondos: galería que se cruza y vídeo ──────────────────────────────── */

.idi-galeria-foto {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.idi-galeria-foto.esta-activa { opacity: 1; }

/* Un <video> todavía vacío a `absolute inset-0` es una caja NEGRA encima del
   cartel, y si el archivo no llega a cargar se queda así para siempre sin dar
   ningún error. Por eso nace invisible y solo aparece cuando tiene algo que
   pintar; hasta entonces —y siempre, con movimiento reducido— se ve el cartel,
   que es un <img> de verdad debajo. */
.idi-video-fondo { opacity: 0; transition: opacity .6s ease; }
.idi-video-fondo.esta-listo { opacity: 1; }

/* El botón de pausa de un vídeo de fondo (portada). Mismo dibujo que el de
   avance automático del carrusel, pero anclado a la esquina de la sección y
   por encima del velo. 44 px: objetivo táctil mínimo. `hidden` lo trae de
   fábrica y lo quita el guion al engancharlo; la regla `[hidden]` de abajo va
   a propósito, porque este `display: flex` ganaría al `hidden` del navegador
   si el reset de Tailwind no estuviera cargado (una página sin el compilado). */
.idi-video-pausa {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  color: var(--idi-on-primary, #fff);
  font-size: 14px; line-height: 1;
  cursor: pointer;
}

.idi-video-pausa[hidden] { display: none; }
.idi-video-pausa:hover { background: rgba(255, 255, 255, .35); }
.idi-video-pausa:focus-visible { outline: 3px solid var(--idi-on-primary, #fff); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .idi-pista { scroll-behavior: auto; }
  .idi-galeria-foto { transition: none; }
  .idi-video-fondo { transition: none; }
  .idi-carrusel-punto { transition: none; }
}

/* ── Fondo «claro» de una sección (hub 1.27.1) ────────────────────────────
   NO es `bg-slate-50`, y el motivo está medido: en demo.idiatlas.cl el cuerpo
   de la página vale #f8fafc, que ES slate-50. La banda pintaba exactamente el
   fondo sobre el que caía, así que la opción no hacía NADA — y llevaba
   haciendo nada desde siempre, porque `tarjetas` y `faq` traían ese literal
   clavado. Un no-op silencioso: el usuario elige, guarda, y no pasa nada.

   Tampoco vale `var(--idi-bg-card)`, que era el candidato obvio. Sirve en
   cinco kits pero no en RELIEVE, donde papel y tarjeta son el mismo #e6e9ef
   a propósito: el neumorfismo es UNA superficie de la que todo se extruye.
   Habría dejado el mismo no-op, en un solo kit y sin avisar.

   Se deriva del PAPEL de cada kit, un tono hacia la tinta. Así hay escalón
   por construcción —da igual qué kit, qué paleta o qué papel— y se conserva
   la temperatura: sobre el crema de folio oscurece el crema, no le pone
   encima un gris azulado. Que era, textualmente, lo que el contenedor
   advertía en 1.23.0 al rechazar `bg-white`. */
.idi-seccion-fondo-claro {
  background-color: color-mix(in srgb, var(--idi-bg-main, #f8fafc) 93%, var(--idi-text-main, #0f172a));
}

/* ── El lienzo recupera los valores de fábrica del navegador ─────────────────
 *
 * Nace del primer cliente real que pegó su prototipo (Daniel, 2026-09-02). El
 * reset de Tailwind que la suite sirve en todas sus páginas incluye
 *
 *     h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
 *
 * y eso es correcto para NUESTRAS plantillas, donde cada título trae sus
 * clases. Pero dentro del lienzo el HTML es del cliente y da por hechos los
 * valores de fábrica: su hoja declaraba `font-weight:850` en el titular de la
 * portada y NADA en los de las páginas interiores, porque contaba con que un
 * `h1` viene en negrita. Sin esto, sus titulares interiores salían a peso 400
 * —el diseño se veía «desinflado» y el cliente lo nota antes que nadie—.
 *
 * VAN DENTRO DE `@layer base`, y esa línea es la que hace que sean un suelo y
 * no un techo. El razonamiento de la especificidad —`:where()` no suma, valen
 * (0,0,1) como el reset y ganan por orden— es correcto pero INSUFICIENTE, y
 * la primera versión se quedó ahí: en la cascada, el CSS SIN CAPA gana a todo
 * el CSS en capas, sin mirar la especificidad. Tailwind v4 emite sus
 * utilidades en `@layer utilities`, así que un suelo sin capa pisaba
 * `text-3xl` y `font-bold` en los propios shortcodes de la casa servidos
 * dentro del lienzo, y también el CSS de un cliente que pegara un build de
 * Tailwind (que va en capas). Medido en Chrome, con el suelo dentro de
 * `base`: la utilidad recupera sus 30 px, el `h1` pelado conserva su negrita,
 * y una regla del cliente en `@layer` vuelve a ganar.
 */
@layer base {
    :where(.idi-lienzo) h1 { font-size: 2em;    font-weight: bold; }
    :where(.idi-lienzo) h2 { font-size: 1.5em;  font-weight: bold; }
    :where(.idi-lienzo) h3 { font-size: 1.17em; font-weight: bold; }
    :where(.idi-lienzo) h4 { font-weight: bold; }
    :where(.idi-lienzo) h5 { font-size: .83em;  font-weight: bold; }
    :where(.idi-lienzo) h6 { font-size: .67em;  font-weight: bold; }
}

/* El cepo del formulario mínimo (F3): fuera de la vista y del flujo, nunca
   display:none (algunos robots saltan lo oculto así). */
.idi-form-cepo { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.idi-seccion-formulario { position: relative; }

/* ─────────────────────────────────────────────────────────────────
   F6 «Carácter» (hub 1.48.0)
   ───────────────────────────────────────────────────────────────── */

/* TIPOGRAFÍA DISPLAY: los títulos de las secciones y las piezas de título
   toman la fuente de display del kit cuando la define (`--idi-font-display`);
   sin kit, heredan la del cuerpo y nada cambia. Nunca dentro de «Mi propio
   código»: ese HTML trae su tipografía. La escala va en `clamp()` para que un
   título no salte de 36 a 60 px de un ancho al siguiente. */
.idi-seccion:not(.idi-seccion-html-libre) :is(h1, h2, h3),
.idi-el-titulo {
    font-family: var(--idi-font-display, inherit);
}
.idi-seccion:not(.idi-seccion-html-libre) .idi-titulo-apertura { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.idi-seccion:not(.idi-seccion-html-libre) .idi-titulo-seccion  { font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.25rem); }

/* «APARECE AL DESPLAZARSE»: una clase por bloque; el guion público la marca
   `es-visible` al entrar en pantalla. Editando siempre visible. Con
   `prefers-reduced-motion` no hay nada que aparecer: se ve desde el principio.
   Y SOLO se oculta cuando el guion está (`html.idi-js`, que él mismo pone al
   arrancar): si el archivo no llega, el bloque se ve desde el principio en vez
   de quedarse invisible para siempre. Es la misma promesa de degradación que
   hace el resto del runtime. */
html.idi-js .idi-aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.idi-js .idi-aparece.es-visible, html.idi-js body.idi-editando .idi-aparece { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.idi-js .idi-aparece { opacity: 1; transform: none; transition: none; }
}