/**
 * iDi Atlas — Kit Visual "Folio" v2 · "Pliego"
 * ─────────────────────────────────────────────────────────────────────────
 * Rediseño completo (2026-07-22) sobre la gramática UX de Positivus
 * (Figma Community), conservando la paleta y tipografía del Folio v1:
 * tinta verde #14231d · cobre #8a6b34 · papel #f2eedf · serif editorial.
 *
 * Lenguaje v2 — "hojas sobre el escritorio":
 *   · Tarjetas de radio grande (36px) con borde de tinta 1px y SOMBRA DURA
 *     desplazada (0 5px 0) sin blur — la hoja apoyada sobre otra.
 *   · Palabra destacada de cada título dentro de una píldora pergamino-oro.
 *   · Alternancia rítmica del grid de tarjetas: papel → pergamino → tinta.
 *   · Hero de la home VOLTEADO a claro (el v1 lo tenía oscuro); los heros
 *     con fotografía debajo permanecen oscuros.
 *   · Formularios encajonados: borde tinta 1.5px, radio 12px, foco cobre.
 *   · Footer de tinta con esquinas superiores redondeadas.
 *
 * Arquitectura (NO REGRESIONAR — ver memoria kit-visual-frontend-sistema):
 *   inject_brand_palette() emite DOS familias de tokens desconectadas:
 *   @theme {--color-*} (literales PHP, los leen las utilidades Tailwind
 *   crudas bg-accent/text-primary/from-primary) y :root {--idi-*} (los lee
 *   idi-design-system.css + WooCommerce). Un kit debe pisar AMBAS.
 */

body.idi-kit-folio {
  /* (A) Primario/acento NO se fijan aquí (2026-07-23, a pedido del
     usuario): Folio es solo forma (radios "pliego", sombra dura, píldora,
     serif) — el color de marca lo sigue decidiendo Ajustes de Marca →
     Paleta de Colores. Al no redeclarar --color-primary/--color-accent
     (ni --idi-primary/--idi-accent, más abajo) heredan por cascada normal
     el valor que inject_brand_palette() ya escribe en :root (incluidas sus
     variantes -light/-hover, calculadas allí vía color-mix). --folio-ink
     y --folio-pill (más abajo) SÍ derivan de --idi-primary/--idi-accent
     para seguir la marca. Los demás tokens nativos de Tailwind sí se fijan
     aquí porque inject_brand_palette() los escribe como literales PHP sin
     indirección var(--idi-*). */
  --color-secondary: #4a5240 !important;
  --color-success: #2f7d5a !important;
  --color-danger: #8c3b32 !important;
  --color-warning: #b45309 !important;
  --color-background: #f2eedf !important;
  --color-surface: #fdfcf8 !important;
  --color-border-soft: color-mix(in srgb, var(--idi-primary) 16%, transparent) !important;
  /* Pin de la escala neutra completa: con idi_brand_theme_mode='dark' (el
     default) inject_brand_palette() emite slate-* y white INVERTIDOS como
     literales; sin este pin, todo utility no-rescatado rompe legibilidad.
     OJO: jamás escribir "slate-*/white" aquí — el * / cierra el comentario
     y la basura resultante se traga la declaración siguiente (--color-white). */
  --color-white: #fdfcf8 !important;
  --color-slate-50: #f6f2e6 !important;
  --color-slate-100: #ece7d6 !important;
  --color-slate-200: #ddd6c2 !important;
  --color-slate-300: #c2bba6 !important;
  --color-slate-400: #8b917f !important;
  --color-slate-500: #5c6552 !important;
  --color-slate-600: #47503f !important;
  --color-slate-700: #333b2e !important;
  --color-slate-800: #212a22 !important;
  --color-slate-900: #14231d !important;
  --color-slate-950: #0e1913 !important;

  /* (B) Tokens de la suite (--idi-*) — primario/acento heredados (ver
     nota arriba) */
  --idi-secondary: #4a5240;
  --idi-success: #2f7d5a;
  --idi-warning: #b45309;
  /* Tintas de los semánticos de este kit. Van a mano porque el contrato
     las calcula en PHP a partir de SUS valores, y este kit los
     redefine aquí en CSS: sin esto quedan desincronizadas y la tinta
     sigue emparejada al color por defecto (el botón de pagar de folio
     daba 3.43:1). Valores obtenidos con IDI_Color_Contract::auto_ink();
     si cambias un color de arriba, vuelve a calcularlas. */
  --idi-on-success: #ffffff;
  --idi-success-ink: #2f7d5a;
  --idi-on-danger: #ffffff;
  --idi-danger-ink: #8c3b32;
  --idi-on-warning: #ffffff;
  --idi-warning-ink: #b45309;
  --idi-danger: #8c3b32;
  --idi-bg-main: #f2eedf;
  --idi-bg-card: #fdfcf8;
  --idi-border: color-mix(in srgb, var(--idi-primary) 16%, transparent);
  --idi-text-main: #21281d;
  --idi-text-muted: #5c6552;
  --idi-text-inv: #f2eedf;

  /* v2: geometría "pliego" — radios generosos, sombra dura sin blur */
  --idi-radius-xl: 36px;
  --idi-radius-lg: 22px;
  --idi-radius-md: 16px;
  --idi-radius-sm: 12px;
  --idi-shadow-sm: 0 3px 0 color-mix(in srgb, var(--idi-primary) 85%, transparent);
  --idi-shadow: 0 5px 0 color-mix(in srgb, var(--idi-primary) 85%, transparent);
  --idi-shadow-hover: 0 8px 0 color-mix(in srgb, var(--idi-primary) 85%, transparent);
  --idi-shadow-inner: inset 0 2px 4px color-mix(in srgb, var(--idi-primary) 8%, transparent);
  --idi-glass-blur: none;

  /* "Ink" = el primario de marca (en el v2 original, tinta ERA el primario:
     se conserva esa identidad — bordes/hover de Folio siguen al color de
     marca). "Pill" = una mezcla clara del acento, para píldoras legibles
     sobre superficies de tinta. */
  --folio-ink: var(--idi-primary);
  --folio-pill: color-mix(in srgb, var(--idi-accent), white 58%);

  /* Tinta del acento sobre el PAPEL de folio.
     Parte de `--idi-accent-ink` —la que el contrato calcula «oscurecida lo justo
     para ser legible», y por tanto independiente de la marca— y la oscurece un
     paso más hacia la tinta del kit, porque el papel de folio no es blanco: el
     fondo de página es #f2eedf y ahí `accent-ink` a secas se queda en 4.16:1.
     Al 75% mide 6.34:1 sobre tarjeta y 5.60:1 sobre fondo, y sigue leyéndose
     como el color de marca; al 65% ya deja de parecerlo. */
  --folio-accent-ink: color-mix(in srgb, var(--idi-accent-ink) 75%, var(--idi-text-main));

  --idi-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --idi-font-body: -apple-system, "Helvetica Neue", Arial, sans-serif;
  --idi-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  background: var(--idi-bg-main) !important;
  color: var(--idi-text-main) !important;
  font-family: var(--idi-font-body) !important;
}

/* ── Tipografía: serif editorial en display (el header embebido fija Outfit) ── */
body.idi-kit-folio input,
body.idi-kit-folio textarea,
body.idi-kit-folio select,
body.idi-kit-folio button {
  font-family: var(--idi-font-body) !important;
}
body.idi-kit-folio h1,
body.idi-kit-folio h2,
body.idi-kit-folio h3,
body.idi-kit-folio .idi-badge-title {
  font-family: var(--idi-font-display) !important;
  letter-spacing: -0.01em !important;
}

/* ── Píldora Positivus: la palabra destacada de cada título de sección ──
   Todos los h2 usan el patrón 'Nuestros <span class="text-primary">Programas</span>' */
body.idi-kit-folio h1 > span.text-primary,
body.idi-kit-folio h2 > span.text-primary {
  background: var(--folio-pill);
  color: var(--idi-text-main) !important;
  padding: 0.04em 0.34em;
  border-radius: 12px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── Header: hoja superior con CTA delineado ── */
body.idi-kit-folio .idi-site-header {
  background: var(--idi-bg-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--idi-primary) 35%, transparent) !important;
  box-shadow: none !important;
}
body.idi-kit-folio .idi-site-branding a {
  font-family: var(--idi-font-display) !important;
  font-weight: 700 !important;
}
/* Los links del nav vienen del CSS embebido con #64748b hardcodeado.
   Se excluye el "Salir" (text-red-500) para no matarle el rojo de peligro. */
body.idi-kit-folio .idi-site-navigation a:not(.btn-primary):not(.text-red-500) {
  color: #4a5240 !important;
}
body.idi-kit-folio .idi-site-navigation a:not(.btn-primary):not(.text-red-500):hover {
  color: var(--folio-ink) !important;
}
body.idi-kit-folio .idi-site-navigation a:not(.btn-primary)::after {
  background: var(--idi-accent) !important;
  height: 2px !important;
  border-radius: 0 !important;
}
/* CTA del nav delineado (Positivus "Request a quote").
   Debe superar el !text-white de la utilitaria y la sombra azul embebida. */
body.idi-kit-folio .idi-site-header .btn-primary {
  background: transparent !important;
  color: var(--folio-ink) !important;
  border: 1.5px solid var(--folio-ink) !important;
  border-radius: var(--idi-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--idi-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
body.idi-kit-folio .idi-site-header .btn-primary:hover {
  background: var(--folio-ink) !important;
  color: var(--idi-text-inv) !important;
}
body.idi-kit-folio .idi-site-navigation .submenu {
  background: var(--idi-bg-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid color-mix(in srgb, var(--idi-primary) 35%, transparent) !important;
  border-radius: var(--idi-radius-sm) !important;
  box-shadow: var(--idi-shadow-sm) !important;
}

/* ── Footer: tinta con esquinas superiores redondeadas (Positivus) ── */
body.idi-kit-folio .idi-site-footer {
  background: var(--idi-primary) !important;
  border-top: none !important;
  /* !important: el footer lleva la clase bg-primary y perdería la forma
     contra cualquier regla de radius de botones */
  border-radius: var(--idi-radius-xl) var(--idi-radius-xl) 0 0 !important;
  margin-top: 2.5rem;
}
/* El CSS embebido del footer hardcodea #94a3b8; el remap claro de
   .text-slate-400 (→ oliva) sería ilegible aquí. Rescate explícito: */
body.idi-kit-folio .idi-site-footer .text-slate-400,
body.idi-kit-folio .idi-site-footer .text-slate-300,
body.idi-kit-folio .idi-site-footer p,
body.idi-kit-folio .idi-site-footer span.text-slate-400 {
  color: rgba(242, 238, 223, 0.72) !important;
}
body.idi-kit-folio .idi-site-footer a,
body.idi-kit-folio .idi-site-footer .idi-footer-nav a {
  color: rgba(242, 238, 223, 0.72) !important;
}
body.idi-kit-folio .idi-site-footer a:hover,
body.idi-kit-folio .idi-site-footer .idi-footer-nav a:hover {
  color: var(--idi-text-inv) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
body.idi-kit-folio .idi-site-footer h3,
body.idi-kit-folio .idi-site-footer h4 {
  color: var(--idi-text-inv) !important;
}

/* ── Utilidades Tailwind crudas: radios, sombras, blur ── */
body.idi-kit-folio .rounded-3xl,
body.idi-kit-folio .rounded-2xl {
  border-radius: var(--idi-radius-xl) !important;
}
body.idi-kit-folio .rounded-xl {
  border-radius: var(--idi-radius-md) !important;
}
body.idi-kit-folio .rounded-lg,
body.idi-kit-folio .rounded-md {
  border-radius: var(--idi-radius-sm) !important;
}
body.idi-kit-folio .shadow-xl,
body.idi-kit-folio .shadow-lg,
body.idi-kit-folio .shadow-2xl {
  box-shadow: var(--idi-shadow) !important;
}
body.idi-kit-folio .shadow-sm,
body.idi-kit-folio .shadow-md {
  box-shadow: var(--idi-shadow-sm) !important;
}
body.idi-kit-folio .hover\:shadow-xl:hover,
body.idi-kit-folio .hover\:shadow-md:hover,
body.idi-kit-folio .hover\:shadow-lg:hover {
  box-shadow: var(--idi-shadow-hover) !important;
}
/* v2: la hoja SÍ se levanta un poco al pasar el cursor */
body.idi-kit-folio .hover\:-translate-y-1:hover,
body.idi-kit-folio .hover\:-translate-y-2:hover {
  transform: translateY(-3px) !important;
}
body.idi-kit-folio .backdrop-blur-sm,
body.idi-kit-folio .backdrop-blur-md,
body.idi-kit-folio .backdrop-blur-xl,
body.idi-kit-folio .backdrop-blur {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Neutrales → tonos papel ── */
body.idi-kit-folio .bg-slate-50,
body.idi-kit-folio .bg-gray-50 {
  background-color: var(--idi-bg-main) !important;
}
body.idi-kit-folio .bg-white {
  background-color: var(--idi-bg-card) !important;
}
body.idi-kit-folio .bg-slate-100 {
  background-color: color-mix(in srgb, var(--idi-bg-main) 70%, var(--idi-border)) !important;
}
body.idi-kit-folio .border-slate-200,
body.idi-kit-folio .border-slate-100,
body.idi-kit-folio .border-gray-100,
body.idi-kit-folio .border-gray-200,
body.idi-kit-folio .border-gray-300 {
  border-color: var(--idi-border) !important;
}
body.idi-kit-folio .text-slate-900,
body.idi-kit-folio .text-slate-800,
body.idi-kit-folio .text-gray-900,
body.idi-kit-folio .text-gray-800 {
  color: var(--idi-text-main) !important;
}
body.idi-kit-folio .text-slate-500,
body.idi-kit-folio .text-slate-400,
body.idi-kit-folio .text-gray-500,
body.idi-kit-folio .text-gray-700 {
  color: var(--idi-text-muted) !important;
}

/* ── Superficies oscuras que se conservan (color puro sin foto) ── */
body.idi-kit-folio .bg-slate-900 {
  background: var(--idi-primary) !important;
}
/* Texto muted dentro de superficies oscuras: el remap claro sería
   ilegible (fix heredado del v1 — NO quitar). El overlay sobre foto
   .from-black/90 conserva su degradado (v2 ya no lo aplana). */
body.idi-kit-folio .bg-slate-900 .text-slate-400,
body.idi-kit-folio .bg-slate-900 .text-slate-500,
body.idi-kit-folio .bg-gradient-to-t.from-black\/90 .text-slate-400,
body.idi-kit-folio .bg-gradient-to-t.from-black\/90 .text-slate-500 {
  color: rgba(242, 238, 223, 0.6) !important;
}
/* bg-slate-700 como fondo propio (botones bloqueados del LMS): el muted
   oliva remapeado quedaría a 1.9:1 sobre el slate-700 pineado oscuro */
body.idi-kit-folio .bg-slate-700.text-slate-400,
body.idi-kit-folio .bg-slate-700 .text-slate-400,
body.idi-kit-folio .bg-slate-700 .text-slate-500 {
  color: rgba(242, 238, 223, 0.6) !important;
}

/* ── HERO DE LA HOME: volteado a papel (gradiente puro, sin foto) ──
   Acotado a la variante TARJETA (.rounded-3xl): el hero full-bleed de
   homepage-alt usa el mismo gradiente sin rounded y debe seguir oscuro. */
body.idi-kit-folio .bg-gradient-to-br.from-primary.to-slate-900.rounded-3xl {
  background: var(--idi-bg-card) !important;
  border: 1px solid var(--folio-ink) !important;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--idi-primary) 85%, transparent) !important;
}
body.idi-kit-folio .bg-gradient-to-br.from-primary.to-slate-900.rounded-3xl .text-white,
body.idi-kit-folio .bg-gradient-to-br.from-primary.to-slate-900.rounded-3xl h1 {
  color: var(--idi-text-main) !important;
}
body.idi-kit-folio .bg-gradient-to-br.from-primary.to-slate-900.rounded-3xl .text-slate-200,
body.idi-kit-folio .bg-gradient-to-br.from-primary.to-slate-900.rounded-3xl .text-slate-300 {
  color: var(--idi-text-muted) !important;
}
/* Badge del hero → píldora pergamino con tinta */
body.idi-kit-folio .bg-gradient-to-br.from-primary.to-slate-900.rounded-3xl .bg-white\/10 {
  background: var(--folio-pill) !important;
  border-color: color-mix(in srgb, var(--idi-primary) 35%, transparent) !important;
  color: var(--idi-text-main) !important;
}

/* ── Tarjetas "hoja": borde tinta + sombra dura (adiós dog-ear del v1) ── */
body.idi-kit-folio article.rounded-2xl,
body.idi-kit-folio article.rounded-3xl,
body.idi-kit-folio .idi-teacher-card {
  clip-path: none !important;
  border: 1px solid var(--folio-ink) !important;
  border-top-width: 1px !important;
  box-shadow: var(--idi-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.idi-kit-folio article.rounded-2xl::after,
body.idi-kit-folio article.rounded-3xl::after {
  display: none !important;
}
body.idi-kit-folio article.rounded-2xl:hover,
body.idi-kit-folio article.rounded-3xl:hover,
body.idi-kit-folio .idi-teacher-card:hover {
  box-shadow: var(--idi-shadow-hover) !important;
}
/* Tarjetas-contenedor no-article (formularios, filtros, sidebar eventos,
   form del webinar rounded-3xl, tarjeta QA bg-surface) */
body.idi-kit-folio div.bg-white.rounded-2xl,
body.idi-kit-folio div.bg-white.rounded-3xl,
body.idi-kit-folio form.bg-white.rounded-2xl,
body.idi-kit-folio form.bg-white.rounded-3xl,
body.idi-kit-folio form.bg-slate-50.rounded-2xl,
body.idi-kit-folio div.bg-surface.rounded-2xl,
body.idi-kit-folio div.bg-white.p-6.rounded-2xl {
  border: 1px solid var(--folio-ink) !important;
  box-shadow: var(--idi-shadow) !important;
}

/* ── Alternancia Positivus del grid: papel → pergamino → tinta ──
   Acotada a los grids de catálogo (xl:grid-cols-4: home programas,
   archivo programas/eventos) — NO alcanza equipo, mis-cursos ni B2B,
   cuyo contenido interno no está rescatado para fondo tinta. */
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n + 2) {
  background: var(--idi-accent-light) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) {
  background: var(--idi-primary) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .text-slate-900,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .text-slate-800,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) a.text-slate-900 {
  color: var(--idi-text-inv) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .text-slate-500,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .text-slate-400,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .text-slate-600:not(.bg-slate-100):not(.bg-slate-50):not(.bg-white),
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .text-slate-700:not(.bg-slate-100):not(.bg-slate-50):not(.bg-white) {
  color: rgba(242, 238, 223, 0.72) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) a.text-slate-900:hover,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) a.hover\:text-primary:hover {
  color: var(--folio-pill) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .border-slate-100,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .border-slate-200 {
  border-color: rgba(242, 238, 223, 0.25) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .bg-slate-100,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .bg-slate-200 {
  background-color: rgba(242, 238, 223, 0.12) !important;
}
/* Chips claros con texto en el MISMO elemento (bg-slate-100 text-slate-600):
   dentro de tinta el chip pasa a translúcido, el texto debe ser crema */
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .bg-slate-100.text-slate-600,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .bg-slate-200.text-slate-500 {
  color: rgba(242, 238, 223, 0.85) !important;
}
/* El precio (text-primary) y acentos dentro de la tarjeta tinta se aclaran */
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .text-primary,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .text-accent {
  color: var(--folio-pill) !important;
}
/* Chips con fondo claro propio (badge fecha de eventos: text-accent +
   bg-accent-light): el pin anterior dejaría oro-sobre-pergamino (1.39:1) */
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .text-accent.bg-accent-light {
  background: var(--folio-pill) !important;
  color: var(--idi-text-main) !important;
  border-color: color-mix(in srgb, var(--idi-primary) 35%, transparent) !important;
}
/* Elementos bg-primary (barras de progreso, botones) serían tinta-sobre-tinta */
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white:nth-child(3n) .bg-primary {
  background: var(--folio-pill) !important;
}
/* Tarjetas de evento pasado (grayscale): quedan en papel, sin alternar —
   tinta × grayscale × opacity-60 destruye el contraste */
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white.grayscale:nth-child(3n) {
  background: var(--idi-bg-card) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white.grayscale:nth-child(3n) .text-slate-900,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white.grayscale:nth-child(3n) a.text-slate-900 {
  color: var(--idi-text-main) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white.grayscale:nth-child(3n) .text-slate-500,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white.grayscale:nth-child(3n) .text-slate-400 {
  color: var(--idi-text-muted) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white.grayscale:nth-child(3n) .bg-slate-200.text-slate-500 {
  color: var(--idi-text-muted) !important;
}
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white.grayscale:nth-child(3n) .bg-slate-100,
body.idi-kit-folio div.grid.xl\:grid-cols-4 > article.bg-white.grayscale:nth-child(3n) .bg-slate-200 {
  background-color: color-mix(in srgb, var(--idi-bg-main) 70%, var(--idi-border)) !important;
}

/* ── Badges y píldoras ── */
body.idi-kit-folio span.rounded-full:not(:has(> img)),
body.idi-kit-folio div.rounded-full:not(:has(> img)) {
  border-radius: var(--idi-radius-sm) !important;
}
/* Rescate del bug de template text-accent+bg-accent (badge fecha eventos,
   píldora arquetipo del wizard): mismo token en texto y fondo = invisible */
body.idi-kit-folio .text-accent.bg-accent {
  background: var(--folio-pill) !important;
  color: var(--idi-text-main) !important;
  border-color: color-mix(in srgb, var(--idi-primary) 35%, transparent) !important;
}
body.idi-kit-folio span.inline-block.bg-primary\/10,
body.idi-kit-folio span.inline-flex.items-center.bg-primary\/10 {
  background: var(--folio-pill) !important;
  color: var(--idi-text-main) !important;
  border-radius: var(--idi-radius-sm) !important;
}

/* ── El acento como TEXTO sobre papel. Sobre superficies tinta pasa a
   píldora-oro (9.9:1); esas reglas van después para que ganen. ──

   ANTES esto usaba `--idi-accent-hover`, y el comentario decía «se oscurece al
   tono hover (5.96:1)». Era cierto PARA EL COBRE de folio y falso en general:
   `hover_variant()` aclara u oscurece según el color, así que con una marca
   AZUL el tono hover sale más claro (#5897ff) y el rol de cada persona en la
   sección de equipo y los ✓ de la oferta caían a 2.81:1 sobre el papel.

   Era una regla que solo se sostenía con una marca concreta. `--folio-accent-ink`
   parte de la tinta que calcula el contrato, que no depende de la marca. ── */
body.idi-kit-folio .text-accent {
  color: var(--folio-accent-ink) !important;
}
body.idi-kit-folio .hover\:text-accent:hover {
  color: var(--folio-accent-ink) !important;
}
body.idi-kit-folio .bg-primary .text-accent,
body.idi-kit-folio .bg-slate-900 .text-accent,
body.idi-kit-folio main.bg-slate-950 .text-accent,
body.idi-kit-folio .bg-gradient-to-br.from-primary .text-accent {
  color: var(--folio-pill) !important;
}
/* El pin de .text-accent aplasta el hover:text-white compilado: cuando el
   fondo pasa a accent-hover en hover, el texto debe aclararse */
body.idi-kit-folio .hover\:bg-accent-hover:hover,
body.idi-kit-folio .group:hover .group-hover\:bg-accent-hover {
  color: var(--idi-bg-card) !important;
}

/* ── Botones ──
   Solo elementos interactivos: un .bg-primary genérico alcanzaría el
   footer y los heros full-bleed y les pisaría la forma. */
body.idi-kit-folio a.bg-accent,
body.idi-kit-folio button.bg-accent,
body.idi-kit-folio a.bg-primary,
body.idi-kit-folio button.bg-primary {
  border-radius: var(--idi-radius-sm) !important;
}
body.idi-kit-folio a.rounded-full.bg-primary,
body.idi-kit-folio a.rounded-full.bg-accent,
body.idi-kit-folio a.rounded-full.border-2,
body.idi-kit-folio button.rounded-full {
  border-radius: var(--idi-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
body.idi-kit-folio button[type="submit"] {
  border-radius: var(--idi-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.idi-kit-folio button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-2px);
}
/* Las sombras azules fosilizadas de algunos submit (rgba(30,58,138,…)) */
body.idi-kit-folio button[type="submit"].bg-primary,
body.idi-kit-folio #btn-submit-scholarship,
body.idi-kit-folio #idi-corporate-quote-form button[type="submit"] {
  box-shadow: 0 4px 0 color-mix(in srgb, var(--idi-primary) 35%, transparent) !important;
}
/* CTA bg-primary sobre el bloque CTA final (que ya es primary): a cobre */
body.idi-kit-folio .program-cta-box a.bg-primary {
  background: var(--idi-accent) !important;

  /* Quien cambia el relleno cambia la tinta: esta regla repinta el
     fondo con el OTRO color de marca, pero la clase del marcado sigue
     diciendo lo contrario, así que el emparejamiento del contrato le
     aplicaría la tinta del color anterior (medido 1.07:1 en el CTA
     "Comenzar Curso" del aula). */
  color: var(--idi-on-accent) !important;
}

/* ── Formularios encajonados (reemplaza la "línea contable" del v1) ── */
body.idi-kit-folio input[type="text"],
body.idi-kit-folio input[type="email"],
body.idi-kit-folio input[type="tel"],
body.idi-kit-folio input[type="password"],
body.idi-kit-folio input[type="number"],
body.idi-kit-folio input[type="search"],
body.idi-kit-folio textarea,
body.idi-kit-folio select {
  background: var(--idi-bg-card) !important;
  border: 1.5px solid var(--folio-ink) !important;
  border-radius: var(--idi-radius-sm) !important;
  box-shadow: none !important;
  color: var(--idi-text-main) !important;
}
body.idi-kit-folio input[readonly] {
  background: color-mix(in srgb, var(--idi-bg-main) 85%, var(--idi-border)) !important;
  border-style: dashed !important;
  border-width: 1.5px !important;
}
body.idi-kit-folio input:focus,
body.idi-kit-folio textarea:focus,
body.idi-kit-folio select:focus {
  border-color: var(--idi-accent) !important;
  /* halo cobre translúcido: accent-light sobre papel era 1.01:1 (invisible) */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--idi-accent) 35%, transparent), 0 3px 0 color-mix(in srgb, var(--idi-primary) 25%, transparent) !important;
  outline: none !important;
}
/* El buscador del admin bar de WP no es parte del frontend del kit */
body.idi-kit-folio #wpadminbar input[type="text"] {
  background: revert !important;
  border: revert !important;
  border-radius: revert !important;
  color: revert !important;
  box-shadow: revert !important;
}
body.idi-kit-folio label.font-semibold,
body.idi-kit-folio label.font-bold {
  text-transform: uppercase;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  color: var(--idi-secondary) !important;
  font-family: var(--idi-font-body) !important;
}
body.idi-kit-folio input[type="radio"],
body.idi-kit-folio input[type="checkbox"] {
  accent-color: var(--idi-accent);
}
/* Labels de consentimiento con color inline #475569 (style="",
   un !important de autor SÍ gana al estilo inline) */
body.idi-kit-folio form label[style*="#475569"] {
  color: var(--idi-text-muted) !important;
}
/* Tiles Likert / NPS */
body.idi-kit-folio .peer-checked\:bg-primary,
body.idi-kit-folio .idi-nps-label {
  border-radius: var(--idi-radius-sm) !important;
}
/* CRÍTICO: los estados checked compilados van SIN !important y pierden
   contra el remap crema de .bg-white — el dígito marcado quedaba
   blanco-sobre-crema (invisible). Rescate con !important propio: */
body.idi-kit-folio .peer:checked ~ .peer-checked\:bg-primary {
  background-color: var(--idi-primary) !important;
  border-color: var(--idi-primary) !important;
  color: var(--idi-text-inv) !important;
}
body.idi-kit-folio .peer:checked ~ .peer-checked\:bg-warning\/10 {
  background-color: color-mix(in srgb, var(--idi-warning) 14%, var(--idi-bg-card)) !important;
}
/* NPS: las clases peer-checked:idi-bg-* del template no existen en ningún
   CSS (bug preexistente) — la selección no coloreaba nada en ningún kit.
   Rescate uniforme en tinta: */
body.idi-kit-folio .peer:checked ~ .idi-nps-label {
  background-color: var(--idi-primary) !important;
  border-color: var(--idi-primary) !important;
  color: var(--idi-text-inv) !important;
}
/* hover:bg-primary muere contra los remaps !important de bg-slate-50/white:
   quedaba texto blanco sobre papel en el CTA "Ver detalles" del catálogo */
body.idi-kit-folio .bg-slate-50.hover\:bg-primary:hover,
body.idi-kit-folio .bg-white.hover\:bg-primary:hover {
  background-color: var(--idi-primary) !important;
  color: var(--idi-text-inv) !important;
}

/* ── Rescate genérico: varios templates usan var(--idi-border) como COLOR
   DE TEXTO inline sobre fondos tinta (hero B2B, videoteca de egresados);
   con el border translúcido del kit quedaba invisible. El !important de
   autor gana al estilo inline. Verificado por grep: todos los usos del
   patrón están sobre fondo oscuro. ── */
body.idi-kit-folio [style*="color: var(--idi-border)"],
body.idi-kit-folio [style*="color:var(--idi-border)"] {
  color: rgba(242, 238, 223, 0.85) !important;
}
/* Patrón hermano en las mismas páginas oscuras (videoteca egresados):
   var(--idi-text-muted) inline sobre tinta/slate-800 */
body.idi-kit-folio [style*="var(--idi-primary)"] [style*="color: var(--idi-text-muted)"],
body.idi-kit-folio [style*="var(--idi-primary)"] [style*="color:var(--idi-text-muted)"],
body.idi-kit-folio .bg-slate-800 [style*="var(--idi-text-muted)"] {
  color: rgba(242, 238, 223, 0.65) !important;
}

/* ── Wizard de diagnóstico ── */
body.idi-kit-folio #idi-diagnostic-app {
  border-radius: var(--idi-radius-lg) !important;
  border: 1px solid var(--folio-ink) !important;
  box-shadow: var(--idi-shadow) !important;
}
/* Acotado a #idi-diagnostic-app: el combo bg-accent+px-6+py-4 también
   aparece en el submit del webinar (matcheo por conjunto, no por orden) */
body.idi-kit-folio #idi-diagnostic-app .bg-accent.px-6.py-4 {
  background: var(--idi-primary) !important;

  /* Tinta emparejada al relleno repintado (ver nota de arriba). */
  color: var(--idi-on-primary) !important;
}
body.idi-kit-folio #idi-diagnostic-app .bg-accent.px-6.py-4 .text-accent {
  color: rgba(242, 238, 223, 0.8) !important;
}
/* Track vs barra de progreso (el template usa bg-accent en ambos) */
body.idi-kit-folio div.h-2.w-full.bg-accent {
  background: var(--idi-accent-light) !important;
}
body.idi-kit-folio #progress-bar {
  background: var(--idi-accent) !important;
}
body.idi-kit-folio .option-btn {
  border-radius: var(--idi-radius-sm) !important;
  border-width: 1.5px !important;
}
body.idi-kit-folio .option-btn:hover {
  border-color: var(--idi-accent) !important;
  background: var(--idi-accent-light) !important;
  color: var(--idi-text-main) !important;
}
/* Badges de resultado compuestos en runtime por el JS del wizard */
body.idi-kit-folio .text-green-600 {
  color: var(--idi-success) !important;
}
body.idi-kit-folio .text-blue-600 {
  color: var(--idi-accent-hover) !important;
}

/* ── Verificador de certificados (página oscura standalone) ── */
body.idi-kit-folio main.bg-slate-950 {
  background: var(--idi-primary) !important;
}
body.idi-kit-folio main.bg-slate-950 .bg-slate-900,
body.idi-kit-folio main.bg-slate-950 header.bg-slate-950\/50 {
  /* Antes: var(--idi-primary-light), que dependía del modo de color. En modo
     claro resolvía a casi-blanco y esta tarjeta —cuyo texto está rescatado a
     tinta CLARA porque el verificador es una pantalla siempre-oscura— quedaba
     blanco sobre blanco (medido: 1.09:1). Al eliminarse el modo oscuro ese
     caso pasaba a ser permanente. Se fija un tono derivado del primario, sin
     depender de ningún modo. */
  background: color-mix(in srgb, var(--idi-primary), #ffffff 8%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.idi-kit-folio main.bg-slate-950 .border-slate-800 {
  border-color: rgba(242, 238, 223, 0.16) !important;
}
body.idi-kit-folio main.bg-slate-950 .rounded-3xl,
body.idi-kit-folio main.bg-slate-950 .rounded-\[2\.5rem\] {
  border-radius: var(--idi-radius-lg) !important;
}
/* El footer interno de la tarjeta usa rounded-b-[2.5rem]: debe seguir
   la curva de 22px del contenedor, no sobresalir con 40px */
body.idi-kit-folio main.bg-slate-950 .rounded-b-\[2\.5rem\] {
  border-radius: 0 0 var(--idi-radius-lg) var(--idi-radius-lg) !important;
}
body.idi-kit-folio .idi-badge-wrapper {
  border-radius: var(--idi-radius-lg) !important;
  filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--idi-primary) 55%, transparent));
}
body.idi-kit-folio .idi-badge-card {
  border-radius: calc(var(--idi-radius-lg) - 2px) !important;
}
body.idi-kit-folio .idi-badge-title,
body.idi-kit-folio .idi-badge-academy-name {
  font-family: var(--idi-font-display) !important;
}

/* ── Páginas QA standalone (evaluación docente / encuesta NPS) ── */
body.idi-standalone-page.idi-kit-folio {
  background: var(--idi-bg-main) !important;
}
body.idi-kit-folio .bg-surface {
  background: var(--idi-bg-card) !important;
}
body.idi-kit-folio .rounded-3xl.shadow-2xl {
  box-shadow: var(--idi-shadow) !important;
  border: 1px solid var(--folio-ink) !important;
}

/* ── Paginación del archivo (compite con @apply embebido) ── */
body.idi-kit-folio .page-numbers li a,
body.idi-kit-folio .page-numbers li span {
  border-radius: var(--idi-radius-sm) !important;
  background: var(--idi-bg-card) !important;
  color: var(--idi-text-main) !important;
  border-color: var(--idi-border) !important;
}
body.idi-kit-folio .page-numbers li a:hover {
  background: var(--idi-bg-main) !important;
  color: var(--idi-accent-hover) !important;
  border-color: var(--folio-ink) !important;
}
body.idi-kit-folio .page-numbers li span.dots {
  background: transparent !important;
  border-color: transparent !important;
}
body.idi-kit-folio .page-numbers li span.current {
  background: var(--idi-primary) !important;
  color: var(--idi-text-inv) !important;
  border-color: var(--idi-primary) !important;
}

/* ── WooCommerce: botones y paneles que no llegan por tokens ── */
body.idi-kit-folio .woocommerce a.button,
body.idi-kit-folio .wc-block-checkout__button,
body.idi-kit-folio .wc-block-components-button:not(.is-link),
body.idi-kit-folio #payment #place_order {
  border-radius: var(--idi-radius-sm) !important;
  font-weight: 700 !important;
}
body.idi-kit-folio .wc-block-components-checkout-step,
body.idi-kit-folio .wc-block-components-sidebar,
body.idi-kit-folio #order_review {
  border-radius: var(--idi-radius-lg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* El design-system hardcodea el hover del CTA de pago en esmeralda ajeno
   a la paleta (#059669 + glow rgba(16,185,129)): se re-ancla al token */
body.idi-kit-folio #payment #place_order:hover,
body.idi-kit-folio .wc-block-components-button:not(.is-link):hover {
  background: color-mix(in srgb, var(--idi-success) 82%, #000) !important;
  box-shadow: var(--idi-shadow-sm) !important;
}

/* ─────────────────────────────────────────────────────────────────
   EL CONTRATO KIT ↔ BLOQUES (F6, hub 1.48.0): tarjeta, botón, botón de
   contorno, título de sección, bajada y antetítulo con el vocabulario
   editorial de Folio. Nunca dentro de «Mi propio código».
   ───────────────────────────────────────────────────────────────── */
body.idi-kit-folio .idi-seccion:not(.idi-seccion-html-libre) .idi-tarjeta { border-radius: var(--idi-radius-sm) !important; box-shadow: none !important; }
body.idi-kit-folio .idi-seccion:not(.idi-seccion-html-libre) .idi-boton,
body.idi-kit-folio .idi-seccion:not(.idi-seccion-html-libre) .idi-boton-contorno { border-radius: var(--idi-radius-sm) !important; box-shadow: none !important; letter-spacing: 0.02em; }
body.idi-kit-folio .idi-seccion:not(.idi-seccion-html-libre) .idi-titulo-seccion { font-family: var(--idi-font-display) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
body.idi-kit-folio .idi-seccion:not(.idi-seccion-html-libre) .idi-bajada { font-family: var(--idi-font-display) !important; font-style: italic; }
body.idi-kit-folio .idi-seccion:not(.idi-seccion-html-libre) .idi-kicker { font-family: var(--idi-font-body) !important; letter-spacing: 0.18em !important; font-weight: 600 !important; }