/* ═══════════════════════════════════════════════════════════════════════════
   XAKROM · Estilos principales
   Paleta: azul marino casi negro (bg-main #0a1526) + acento azul frio (#4fa6e8),
   texto blanco. Migrada desde el teal de Emma (#3CCFCF) en v3.21.
   Tipografia: Geist · Iconos: Lucide
   v3.33 · Julio 2026 (barra del Coach más ancha, 560px, y coletilla en una
   sola línea en escritorio: la envolvente a dos líneas subía la altura de la
   barra sin aportar nada)
   v3.32 · Julio 2026 (identidad dentro de la barra del Coach:
   .training-coach-id y .training-coach-cta, nombre, rol y coletilla a la
   izquierda del teléfono)
   v3.31 · Julio 2026 (barra del Coach en la parrilla de Entrenamiento:
   .training-coach-col, .training-coach-bar y .training-coach-line; formato
   alargado con foto, piloto y teléfono, y la recomendación de personaje afín
   como texto fuera de la tarjeta, para no comerse la vista de los seis
   personajes. La franja .training-coach-strip queda sin montar, sus reglas se
   conservan)
   v3.30 · Julio 2026 (aspect-ratio 1/1 en .emma-welcome-video, para el póster
   del vídeo de bienvenida; retirada de la regla body.xk-onb #onb-btn-finish: el CTA
   de cierre del onboarding pasa a control por JS desde showMpResult, app.js
   v3.60, porque el modo xk-onb se desmonta al pintar el resultado y el botón
   debe seguir visible en esa pantalla)
   v3.29 · Julio 2026 (tracker de autoimagen: .onb-game-instr, .mp-btn-secondary,
   .mp-selfview-actions, .sess-row--static)
   v3.28 · Julio 2026 (etiqueta Onboarding en Tus resultados, .sess-onb-tag)
   v3.27 · Julio 2026 (segundo humo O2: carril de audio del juego, columnas del
   orden comparado en el Bloque 4)
   v3.26 · Julio 2026 (retoques O2: toggle de idioma del onboarding, botón de
   audio por tarjeta del juego, enlace Privacidad como entrada de menú)
   v3.25 · Julio 2026 (O2: familia .onb-* del onboarding lineal + modo body.xk-onb)
   v3.24 · Julio 2026

   Cambios v3.24 (F6 · nota del PDF ampliado):
     · .mp-pdf-note: linea informativa previa al CTA de descarga (resultado de
       Mi perfil y detalle historico): el PDF es un documento ampliado con el
       informe mas el desarrollo completo de los dos estilos. Texto discreto
       en muted, bilingue via data-en/data-es. index.html: ?v= 62->63.

   Cambios v3.23 (F6 · informe de perfil):
     · Familia .xk-report / .xkr-*: informe de cinco bloques en la pantalla de
       resultado de Mi perfil y en el detalle historico (cabecera, frase marco,
       tarjetas de estilo principal y secundario, arana en canvas, bloque de
       coincidencia, siguiente paso y pie). Tarjetas en dos columnas con caida
       a una en movil; canvas de la arana fluido y centrado.
       index.html: ?v= styles.css 61->62.

   Cambios v3.22 (Lote 7 · briefing en cuatro paginas + menu de temas):
     · .nav-btn--sub: sub-entrada del sidebar sin icono ("¿Que quieres
       practicar?" bajo Entrenamiento): sangria alineada con las etiquetas,
       cuerpo menor, mismo hover/active del sistema. En sidebar colapsado se
       oculta (no tiene icono que mostrar).
     · .ref3-diff / .ref3-diff-title: caja de resalte "Lo que marcara la
       diferencia" del briefing (P3), sobre los tokens accent-subtle /
       border-accent, patron visual de .ref3-goal con titulo propio.

   Cambios v3.21 (identidad marino · decisión de Ricardo):
     · Paleta migrada de teal (bg #0a1616 / acento Emma #3CCFCF) a azul marino
       casi negro (bg-main #0a1526) con acento azul frio (#4fa6e8) y texto
       blanco. text-primary/secondary a #ffffff (peticion de legibilidad),
       text-muted a #c3ccd9 (etiqueta clara, no gris apagado), bordes
       reforzados. Modo alto contraste re-basado en marino. Rojo de senal
       como TEXTO suavizado a #ff5b5b (fills/bordes #FE0000 intactos). Solo
       cambian los dos bloques :root y los dos literales de rojo-texto; el
       resto cae en cascada por var(--*). Sustituye al despliegue de prueba.
     · auth.js v1.3 (aparte) tokeniza la puerta de login a var(--*), que ahora
       hereda esta paleta y el modo alto contraste.

   v3.20 · Julio 2026

   Cambios v3.20 (Lote 6 · segunda ronda de la revisión de Ricardo, 12-jul):
     · .ck-match-note sube a formato de párrafo normal (0.875rem, 1.7,
       text-secondary, alineado a la izquierda): ya no es un comentario al
       margen sino la explicación del gráfico de coincidencia.
     · La píldora de modo de la cabecera de Entrenamiento reutiliza
       .ref3-mode-pill; ajuste de margen scoped a .training-header.
     · Retiradas .ti-revisit-link y su hover (el enlace "Sobre estos
       perfiles" desaparece de Entrenamiento).

   v3.19 · Julio 2026

   Cambios v3.19 (Lote 5 · retoques de la revisión de Ricardo, 12-jul):
     · Retirada .char-mode-badge (la píldora de modo desaparece de las cards
       de Entrenamiento; el modo vive en el subtítulo y la barra lateral).
     · Retirada .tests-ver del bloque .intro-results-list (la etiqueta técnica
       de versión del instrumento deja de pintarse en las filas de Mi perfil).
     · La alineación del detalle de interlocutor (.td-ranking + .ck-match-note)
       se extiende al segundo párrafo de la nota del gráfico.

   v3.18 · Julio 2026

   Cambios v3.18 (Lote 4 · C3: resultados bajo el arranque de cada test):
     · .intro-results (bloque "Tus resultados" en screen-mp-intro y
       screen-test-intro): título de sección, lista con tope de altura y
       scroll interno (el pie con el botón Empezar no se desplaza), y filas
       .sess-row idénticas a las de la pantalla Mis tests retirada (sus
       estilos vivían inline en index.html y se trasladan aquí, scoped a
       .intro-results-list).

   v3.17 · Julio 2026

   Cambios v3.17 (Lote 2 · ronda 2 pre-demo):
     · R3: .training-top (cabecera de Entrenamiento y franja del coach a dos
       columnas en desktop, apiladas en móvil); la franja gana alineación y
       tope de ancho dentro de la fila.
     · R1: .welcome-path-title (título "Principales opciones" sobre la ruta
       de bienvenida).
     · R4: .mp-bars-note (nota bajo las barras de distribución) y
       .ck-match-note (aclaración del % de coincidencia en el resultado del
       test de interlocutor y su detalle histórico).
     · R5: .ck-framing-note (línea de encuadre en la intro del test de
       interlocutor).

   v3.16 · Julio 2026

   Cambios v3.16 (Lote 2 · bloque B pre-demo):
     · B2: .training-coach-strip (franja informativa del coach sobre el grid de
       Entrenamiento, sin widget de voz) y remarcado del personaje afín:
       .char-card--reco (borde y halo con --reco-color, la fija app.js) +
       .char-reco-badge (badge superior derecha en el color del personaje).
     · B3: bloque de barras de distribución por los seis tipos (.mp-bars-block,
       .mp-bars-title, .mp-bar-row/-label/-track/-fill/-pct). Se usa en el
       resultado de Mi perfil (#mp-result-bars) y en el detalle histórico de
       Mis tests. Fila ganadora con énfasis (.mp-bar-row--top).

   v3.15 · Julio 2026

   Cambios v3.15 (ronda de fixes post-humo del Lote 1):
     · #screen-test-intro .ref3-layout a width:100%: las pantallas del test son
       columnas flex centradas (align-items:center) y el layout se encogia a su
       contenido (~770px) en vez de estirarse a 960px. Causa raiz del A4: la
       caja del arranque del interlocutor se veia menor que la de Mi Perfil.
     · Bienvenida al canon de las intros: .welcome-layout 720px -> 960px,
       .welcome-host-text 420px -> 640px, .welcome-actions ocupa las dos
       columnas del grid (grid-column 1/-1) y alinea a la derecha; el orden de
       botones (CTA ultimo) va en index.html.
     · .ti-matrix alineado a la izquierda (margin auto -> 0). Afecta a
       screen-training-intro y screen-score (decision de coherencia, 10-jul).

   v3.14 · Julio 2026

   Cambios v3.14 (Lote 1 A4, igualar arranques Mi Perfil / Tu interlocutor):
     · .ck-pills margin-bottom 48px -> 36px, .ck-pill padding lateral 12px ->
       14px y .ck-btn-primary padding 14px 30px -> 12px 28px: metricas
       alineadas al canon mp-* para que las cajas de las dos pantallas de
       arranque midan igual. Alcanza a todos los ck-btn-primary del test de
       interlocutor (consistencia con los mp-btn-primary del test Mi Perfil).

   Cambios v3.13 (pantalla de confidencialidad del test de interlocutor + aviso de duracion):
     · .tc-card / .tc-lock / .tc-field / .tc-label / .tc-input / .tc-warning:
       estilos de screen-test-confidentiality (pieza 1), construidos sobre los
       tokens del sistema (bg-card, border, accent-subtle, radius, fs-*). El
       input usa bg-main + border-light, foco en accent.
     · .session-duration-notice: linea del aviso de 15 min en la pantalla de
       sesion, antes de la llamada (pieza 4). Texto-muted, fs-xs.
     · index.html: ?v= styles.css 51->52.

   Cambios v3.12 (boton PDF de Mi Perfil a la izquierda):
     · .mp-pdf-row: wrapper del boton #mp-btn-download en screen-mp-result. Lleva
       el pill (sd-pdf-btn) al borde izquierdo de la columna de contenido (640),
       en vez de centrado, igualando el del informe de sesion. Conserva estetica
       y margen del boton. index.html: ?v= styles.css 50->51.

   v3.11 · Junio 2026

   Cambios v3.11 (cards del bloque de modo a 2 columnas):
     · .op-cards--two: las dos cards de "Dos direcciones de feedback" (intro)
       pasan de la rejilla de 4 columnas a 2 a todo el ancho, para que no parezca
       que faltan dos. Responsive heredado de .op-cards (1 columna en <=460px).

   v3.10 · Junio 2026

   Cambios v3.10 (pantalla de temas · U1 scaffold):
     · Bloque .theme-* nuevo para screen-themes (selector de tema): .themes-layout
       (centrado, max-width 760px), .themes-subtitle, .theme-grid (2 cols, 1 en
       movil), .theme-card (activa con hover/focus-visible, soon con opacidad y
       badge "Proximamente"). Iconos Lucide via .theme-icon. Todo sobre tokens
       (paleta, acento, radios); alto contraste y responsive respetados.
     · Sin cambios en el resto. Aplica solo a la pantalla nueva.

   v3.9 · Junio 2026

   Cambios v3.9 (legibilidad del briefing · pase de maquetacion, solo CSS):
     · Medida de lectura acotada en .ref3-prose (max-width:32rem) para caer
       en el rango legible (orden de 70 car./linea) en lugar de prosa a todo
       el ancho de la columna (~700px / ~100 car.). Afecta P1/P2/P3 del
       briefing y las intros de test/Mi Perfil (mejora, no regresion).
     · Ritmo de parrafo en la prosa corrida (margin entre parrafos de
       #ref3-p1-prose, #ref3-p2-prose-d/u, #ref3-p3-statesprose): los
       parrafos dejan de leerse como un bloque continuo. Scoped por ID para
       no tocar etiquetas de columna ni otros <p> de bloques estructurados.
     · Lead en la apertura de P1 (#ref3-p1-prose > p:first-child): punto de
       entrada antes del bloque denso (cuerpo mayor, color --text-primary).
     · P3 recorrible: .ref3-sub-label gana divisor superior (hairline
       --border-light) como separador de seccion; el primero (#ref3-p3-starts)
       sin divisor por abrir bajo el titulo.
     · Sin cambio de contenido (canonico en chars/*.js), sin tocar app.js ni
       el marcado. Paleta, Geist, alto contraste y responsive intactos
       (en movil el cap queda inerte; el divisor usa token con override de
       alto contraste). Aplicado por igual a los seis personajes.

   Cambios v3.8 (acento global a color de la anfitriona):
     · Familia --accent migrada del azul corporativo #38b6ff al teal de Emma
       #3CCFCF (SUPPORT_META.host en config.js v2.7). Criterio: la anfitriona
       guia la app, su color es el acento de sistema; los personajes
       conservan su color solo en la pantalla de entrenamiento (botones
       Practicar, banda, etiquetas), aplicado desde app.js.
     · Derivados recalculados: --accent-hover #66dcdc, --accent-dim #143e3e,
       --accent-subtle y --border-accent en rgba(60,207,207,·).
     · Alto contraste: familia --accent redefinida en teal brillante
       (#6fe0e0 · 12.5:1 sobre fondo) con sus derivados.
     · Literales rgba(56,182,255,·) sueltos (.ref-victory, .ref3-mode-pill,
       .ref3-goal) tokenizados a var(--accent-subtle)/var(--border-accent):
       ya no quedan colores de acento fuera de tokens.
     · Contraste verificado: texto #0a1616 sobre #3CCFCF = 10.0:1 (AAA);
       sin cambios de texto en botones.

   Cambios v3.7 (fix responsive KPIs del dashboard):
     · En ≤560px la fila .dash-kpi-row pasa de flex a rejilla 2×2 con
       minmax(0,1fr): las etiquetas largas (PUNTUACION MEDIA, PERSONAJES
       ENTRENADOS) ya no se solapan. letter-spacing reducido a .04em y
       overflow-wrap:anywhere en las etiquetas. El anillo de minutos
       (.dash-kpi--ring) ocupa la fila completa con separador superior.

   Cambios v3.6 (drawer movil · Opcion A):
     · En ≤640px el sidebar queda totalmente oculto por defecto
       (translateX(-100%)) y el contenido ocupa el ancho completo.
     · Nuevo boton flotante .sidebar-fab (abajo-izquierda, 48px, favicon
       hexagonal, safe-area-inset) que abre el sidebar como drawer overlay
       (.sidebar.mobile-open). Cierre: backdrop, Escape, seleccion de nav
       o toggle (logica en app.js).
     · El FAB se oculta con el drawer abierto (body.xk-drawer-open) y
       durante la llamada de practica activa (body.xk-call-live) para
       evitar salidas accidentales en mitad de la sesion.
     · El estado colapsado de 58px deja de usarse en movil; sigue intacto
       en escritorio. z-index FAB 198 (bajo backdrop 199, sidebar 200,
       panel a11y 250).

   Cambios v3.5 (fix movil):
     · Panel de accesibilidad subido a z-index 250, por encima del overlay del
       sidebar (200) y su backdrop (199). Antes (151) quedaba detras y atenuado
       en movil al abrirlo con el menu desplegado; ahora se usa sobre el menu
       abierto sin recogerlo.

   Cambios v3.4 (esqueleto de accesibilidad · lector de pantalla):
     · .sr-only (oculto visualmente, disponible para lector de pantalla) y
       .skip-link (enlace de salto al contenido, visible al enfocar).
     · Soporte de landmarks/anuncios; logica de foco y anuncios en app.js
       (showScreen, applyLang) y region #a11y-live en index.html.

   Cambios v3.3 (control de accesibilidad e idioma en el menu):
     · Conmutador de idioma convertido en desplegable (.lang-dd-*, .lang-menu),
       escalable a mas idiomas. Logica en app.js (initLangDropdown).
     · Boton de accesibilidad (.sidebar-a11y-btn) en la cabecera de la barra,
       junto al idioma (expandida) y apilado (contraida). El panel de
       accesibilidad ya no es flotante: a11y.js lo posiciona junto al boton.

   Cambios v3.2 (Evaluacion 2 · boton de accesibilidad):
     · Modo alto contraste via html[data-contrast="high"]: redefine los tokens
       de color a maximos validados WCAG (texto 17-20:1 AAA, bordes >=3:1).
       Mas correcciones puntuales de verde/rojo semantico y fills tenues.
     · Escalado de tamano de letra via html[data-fontscale="lg"|"xl"]:
       reescala la raiz (20px / 24px = 125% / 150%). Ensancha --sidebar-w en
       los pasos grandes para que las etiquetas de nav no se recorten.
     · Estilos del disparador flotante y el panel de accesibilidad
       (.xk-a11y-*). Logica y persistencia en a11y.js.

   Cambios v3.1 (Evaluacion 1 · legibilidad y contraste):
     · Tipografia migrada de px a rem en todo el archivo. Suelo de cuerpo
       subido de 12-13px a 14px. Raiz html anclada en 16px: cambiarla
       reescala toda la UI (gancho para el boton de accesibilidad, Eval 2).
     · Tokens de color corregidos contra WCAG:
         --text-secondary  #9da2a2 -> #b8c0c0  (cuerpo, ahora AAA)
         --text-muted      #4a5555 -> #909a9a  (etiquetas, antes fallaba AA 2.2:1)
         --text-disabled   #3a4444 -> #5a6565  (solo disabled)
         --border-light    #1e2e2e -> #243838
     · CTA corregidos: texto blanco sobre accent claro (2.26:1, fallaba)
       pasado a texto oscuro #0a1616 (8.2:1, AAA) en .btn-primary,
       .ck-btn-primary y .xk-btn-start, alineado con .mp-btn-primary.
     · Escala tipografica documentada en :root (--fs-*).
     · Suelo de calidad: focus-visible para teclado y prefers-reduced-motion.
   Pendiente Evaluacion 2: boton de accesibilidad (tamano + alto contraste).
═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ── */
:root {
  --bg-main:         #0a1526;   /* azul marino casi negro */
  --bg-sidebar:      #0d1d34;
  --bg-card:         #13233f;
  --bg-card-hover:   #18294a;
  --bg-elevated:     #172640;

  --text-primary:    #ffffff;   /* titulos · blanco puro */
  --text-secondary:  #ffffff;   /* cuerpo · blanco puro (peticion de legibilidad) */
  --text-muted:      #c3ccd9;   /* etiquetas/eyebrows/captions · ~11:1 sobre bg-card, claro pero un escalon por debajo */
  --text-disabled:   #7f8aa0;   /* solo estados disabled */

  --accent:          #4fa6e8;   /* azul frio · bordes, iconos, fills */
  --accent-hover:    #7cc0f2;   /* usar este para acento como texto/enlace */
  --accent-dim:      #13314f;
  --accent-subtle:   rgba(79,166,232,0.10);

  --border:          #24344f;   /* subido: con texto blanco los separadores tenues desaparecian */
  --border-light:    #33465f;
  --border-accent:   rgba(79,166,232,0.30);

  --sidebar-w:       220px;
  --sidebar-w-collapsed: 58px;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;

  --transition:      0.15s ease;
  --transition-slow: 0.25s ease;

  /* ── Escala tipografica (referencia · v3.1) ──────────────────────────────
     Raiz = 16px. Todos los font-size del archivo estan en rem, por lo que
     cambiar font-size del elemento html reescala toda la UI de forma
     proporcional. Esto es el gancho para el modo de tamano de letra del
     boton de accesibilidad (Evaluacion 2): basta con html{font-size:20px}.
     Suelo de cuerpo subido a 0.875rem (14px); antes 12-13px. */
  --fs-2xs:  0.6875rem;  /* 11px · micro-etiquetas, badges, eyebrows */
  --fs-xs:   0.75rem;    /* 12px · chrome pequeno, pills, captions    */
  --fs-sm:   0.875rem;   /* 14px · SUELO de cuerpo                    */
  --fs-base: 0.9375rem;  /* 15px · cuerpo comodo, botones             */
  --fs-md:   1rem;       /* 16px · enfasis, texto de escenario        */
  --fs-lg:   1.1875rem;  /* 19px · subtitulos                         */
  --fs-xl:   1.5625rem;  /* 25px · titulos de seccion                 */
}

/* ── Base ── */
html { font-size: 16px; }
body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  background: var(--bg-main);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  -webkit-font-smoothing: antialiased;
}

/* ── Suelo de accesibilidad (aplica a toda la UI) ──────────────────────────
   Foco de teclado visible: requisito WCAG 2.4.7 y base para navegacion sin
   raton. Antes no habia estilo de foco propio. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* No quitar el foco a quien navega con teclado, solo a click con raton */
:focus:not(:focus-visible) { outline: none; }

/* Respeto a quien pide menos movimiento (WCAG 2.3.3 · prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 100;
  border-right: 1px solid var(--border);
  transition: width 0.2s ease;
  overflow: hidden;
}

/* Logo area — two variants: expanded and collapsed */
.sidebar-logo {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* EXPANDED: logo left, controls (lang + toggle) right */
.sidebar-logo--expanded {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 12px 12px 16px;
  gap: 8px;
}
/* Default visibility: show expanded header, hide collapsed header */
.sidebar-logo--collapsed { display: none; }

/* When collapsed: swap headers */
.sidebar.collapsed .sidebar-logo--expanded { display: none; }
.sidebar.collapsed .sidebar-logo--collapsed { display: flex; }

.sidebar-logo-img     { height: 22px; width: auto; display: block; }
.sidebar-logo-favicon { width: 28px; height: 28px; display: block; flex-shrink: 0; object-fit: contain; }

/* Controls: lang bar left + toggle right, full width */
.sidebar-logo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
}

/* Lang bar inside controls */
.sidebar-lang-bar {
  display: flex;
  gap: 4px;
}
.sidebar-lang-bar .lang-btn {
  padding: 4px 8px;
  font-size: 0.6875rem;
}

/* Toggle button */
.sidebar-toggle {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
}
.sidebar-toggle:hover { background: var(--bg-card-hover); border-color: var(--text-muted); }
.sidebar-toggle svg   { pointer-events: none; }

/* COLLAPSED header: favicon · toggle · flag stacked vertically */
.sidebar-logo--collapsed {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0 10px;
  gap: 6px;
  min-height: 88px;
}

.sidebar-toggle--collapsed {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.sidebar-toggle--collapsed:hover { background: var(--bg-card-hover); }

/* Active language flag in collapsed state */
.sidebar-active-flag {
  font-size: 1.1875rem;
  line-height: 1;
  display: block;
}

/* Section label */
.sidebar-label {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 18px 6px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.15s;
}

/* Nav buttons */
.nav-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  color: var(--text-secondary); font-size: 0.9375rem;
  cursor: pointer; border: none; background: none;
  font-family: inherit; width: 100%; text-align: left;
  border-left: 2px solid transparent;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav-btn .nav-icon { flex-shrink: 0; width: 18px; height: 18px; }
.nav-btn .nav-label { overflow: hidden; transition: opacity 0.15s, max-width 0.2s; }
.nav-btn:hover { background: var(--bg-card); color: var(--text-primary); }
.nav-btn.active {
  background: var(--bg-elevated); color: var(--text-primary);
  border-left-color: var(--accent);
}

/* Lote 7: sub-entrada del menu, sin icono (temas bajo Entrenamiento) */
.nav-btn--sub {
  padding-left: 46px;              /* alinea con las etiquetas de los botones con icono */
  font-size: 0.84rem;
  color: var(--text-muted);
}
.nav-btn--sub:hover { color: var(--text-primary); }
.sidebar.collapsed .nav-btn--sub { display: none; }

/* Mode selector */
.mode-selector {
  margin: 8px 10px 4px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  flex-shrink: 0;
}
.mode-selector-label {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 8px 6px;
  display: block; white-space: nowrap;
  transition: opacity 0.15s;
}
.mode-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 8px; margin-bottom: 3px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; text-align: left;
  transition: border-color var(--transition), background var(--transition);
  white-space: nowrap; overflow: hidden;
}
.mode-btn:hover { background: var(--bg-card); border-color: var(--border-light); }
.mode-btn.active { border-color: var(--border-accent); background: var(--accent-subtle); }
.mode-btn-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-muted); }
.mode-btn.active .mode-btn-icon { color: var(--accent); }
.mode-btn-text { overflow: hidden; transition: opacity 0.15s, max-width 0.2s; }
.mode-btn-title { font-size: 0.75rem; font-weight: 500; color: var(--text-primary); display: block; }
.mode-btn.active .mode-btn-title { color: var(--accent); }
.mode-btn-sub { font-size: 0.6875rem; color: var(--text-muted); display: block; line-height: 1.3; }

/* Sidebar bottom */
.sidebar-bottom {
  margin-top: auto; padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-lang { display: flex; gap: 6px; margin-bottom: 8px; white-space: nowrap; }
.lang-btn {
  background: none; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); font-family: inherit;
  font-size: 0.75rem; color: var(--text-secondary);
  cursor: pointer; padding: 4px 10px;
  transition: color var(--transition), border-color var(--transition);
}
.lang-btn.active { color: var(--text-primary); border-color: var(--text-muted); }
.lang-btn:hover  { color: var(--text-primary); }
.sidebar-version { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; }

/* ── COLLAPSED STATE ── */
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

.sidebar.collapsed .sidebar-label          { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.sidebar.collapsed .nav-btn                { padding: 11px 0; justify-content: center; border-left: none; }
.sidebar.collapsed .nav-btn.active         {
  background: var(--bg-elevated); border-radius: var(--radius-sm);
  margin: 0 6px; width: calc(100% - 12px); border-left: none;
}
.sidebar.collapsed .nav-btn .nav-label     { opacity: 0; max-width: 0; overflow: hidden; }
.sidebar.collapsed .nav-btn .nav-icon      { width: 22px; height: 22px; }
.sidebar.collapsed .mode-selector          { margin: 6px 4px; padding-top: 8px; }
.sidebar.collapsed .mode-selector-label    { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.sidebar.collapsed .mode-btn               { padding: 8px 0; justify-content: center; margin-bottom: 4px; }
.sidebar.collapsed .mode-btn-text          { opacity: 0; max-width: 0; overflow: hidden; }
.sidebar.collapsed .mode-btn-icon          { width: 20px; height: 20px; }
.sidebar.collapsed .sidebar-bottom         { padding: 10px 4px; display: flex; justify-content: center; }
.sidebar.collapsed .sidebar-version        { display: none; }

/* ── MAIN CONTENT ── */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1; min-height: 100vh;
  transition: margin-left 0.2s ease;
}
.sidebar.collapsed + .main-content { margin-left: var(--sidebar-w-collapsed); }

.screen { display: none; min-height: 100vh; padding: 48px 40px; }
.screen.active { display: block; }

/* Progress bar */
#ck-progress-bar {
  position: fixed; top: 0;
  left: var(--sidebar-w); right: 0;
  height: 2px; background: var(--border); z-index: 50;
  pointer-events: none;
  transition: left 0.2s ease;
}
.sidebar.collapsed ~ .main-content #ck-progress-bar,
body.sidebar-collapsed #ck-progress-bar { left: var(--sidebar-w-collapsed); }
#ck-progress-fill {
  height: 100%; background: var(--accent); width: 0%;
  transition: width 0.45s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════════
   SHARED TYPOGRAPHY
═══════════════════════════════════════════════════════════════ */
.section-eyebrow {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
.section-title {
  font-size: 1.5625rem; font-weight: 400;
  letter-spacing: -0.01em; color: var(--text-primary);
  margin-bottom: 6px;
}
.section-subtitle { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   SHARED BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 24px; border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  cursor: pointer; background: var(--accent); color: #0a1616;
  transition: opacity var(--transition), transform 0.1s;
}
.btn-primary:hover  { opacity: 0.88; }
.btn-primary:active { transform: scale(0.98); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 24px; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); background: transparent;
  color: var(--text-primary); font-family: inherit; font-size: 0.9375rem;
  font-weight: 500; cursor: pointer;
  transition: border-color var(--transition);
}
.btn-outline:hover { border-color: var(--text-secondary); }

.btn-ghost-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; font-family: inherit;
  font-size: 0.875rem; color: var(--text-secondary);
  cursor: pointer; padding: 0;
  transition: color var(--transition);
}
.btn-ghost-back:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════════ */
.dash-header { margin-bottom: 40px; }
.how-it-works-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 16px; margin-bottom: 40px; max-width: 800px;
}
@media (max-width:780px) { .how-it-works-grid { grid-template-columns:1fr; } }
.info-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); padding: 22px 20px;
}
.info-card-num { font-size: 0.6875rem; font-weight:600; letter-spacing:.12em; color:var(--text-muted); margin-bottom:12px; }
.info-card-title { font-size: 1rem; font-weight:500; color:var(--text-primary); margin-bottom:8px; }
.info-card-body { font-size: 0.875rem; line-height:1.65; color:var(--text-secondary); }
.coming-soon-grid { display:flex; gap:16px; flex-wrap:wrap; max-width:800px; }
.coming-soon-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 22px 20px; flex:1; min-width:200px;
}
.coming-soon-icon { font-size: 1.375rem; margin-bottom:10px; opacity:.4; }

/* ═══════════════════════════════════════════════════════════════
   TRAINING — CHARACTER GRID
═══════════════════════════════════════════════════════════════ */
.training-header { margin-bottom: 28px; }
.char-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 20px; max-width: 960px; margin-bottom: 28px;
}
@media (max-width:860px) { .char-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px) { .char-grid { grid-template-columns: 1fr; } }

.char-card {
  background: var(--bg-card); border-radius: var(--radius-lg);
  padding: 24px; text-align: center;
  border: 1px solid var(--border); border-bottom: 4px solid transparent;
  transition: transform var(--transition-slow), background var(--transition-slow);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.char-card:not(.char-card--locked):hover { background: var(--bg-card-hover); transform: translateY(-2px); }
.char-card--locked { opacity: 0.48; cursor: default; }
.char-avatar { width:112px; height:112px; object-fit:cover; border-radius:var(--radius-sm); margin:0 auto 14px; display:block; }
.char-name { font-size: 1rem; font-weight:600; color:var(--text-primary); margin-bottom:3px; }
.char-role { font-size: 0.75rem; color:var(--text-secondary); margin-bottom:6px; }
.char-type { font-size: 0.6875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px; }
.char-desc { font-size: 0.875rem; color:var(--text-secondary); line-height:1.55; margin-bottom:18px; flex:1; }
.char-badge {
  position:absolute; top:12px; right:12px;
  font-size: 0.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:20px;
  background:var(--bg-elevated); border:1px solid var(--border-light); color:var(--text-muted);
}
.btn-practice {
  display:block; width:100%; padding:10px 20px; border:none;
  border-radius:var(--radius-sm); font-family:inherit; font-size: 0.875rem;
  font-weight:600; letter-spacing:.02em; cursor:pointer;
  transition: opacity var(--transition), transform 0.1s;
}
.btn-practice:hover  { opacity:.88; }
.btn-practice:active { transform:scale(.98); }

/* ══ Lote 2 · R3 (ronda 2): cabecera de Entrenamiento a dos columnas ══ */
.training-top {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; max-width:960px; margin-bottom:8px;
}
.training-top .training-header { margin-bottom:20px; flex:0 1 auto; }
.training-top .training-coach-strip {
  flex:0 1 480px; margin:4px 0 20px;
}
@media (max-width: 860px) {
  .training-top { flex-direction:column; gap:0; }
  .training-top .training-coach-strip,
  .training-top .training-coach-col { flex:1 1 auto; width:100%; margin-top:0; }
}

/* ══ v3.31 (23-jul): barra del Coach en la parrilla de Entrenamiento ══
   Formato alargado: foto, piloto y teléfono en una línea, y la recomendación
   de personaje afín como texto fuera de la tarjeta. La franja anterior
   (.training-coach-strip) llevaba encabezado y mensaje dentro y empujaba la
   parrilla hacia abajo; sus reglas se conservan porque el marcado puede volver
   a usarlas, pero la pantalla ya no las monta. */
.training-coach-col { flex:0 1 560px; margin:4px 0 16px; }
.training-coach-bar {
  display:flex; align-items:center; gap:14px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:10px 16px;
}
.training-coach-id { flex:1 1 auto; min-width:0; }
.training-coach-id .support-agent-name { margin:0; }
.training-coach-id .support-agent-role { margin:1px 0 0; }
.training-coach-cta {
  font-size:0.75rem; line-height:1.4; color:var(--text-muted);
  font-style:italic; margin:4px 0 0;
}
/* La coletilla en una sola línea en escritorio: dos líneas hacían crecer la
   barra a lo alto sin necesidad. Si algún idioma no cupiera, se recorta antes
   que romper la altura. En móvil la barra apila y puede envolver. */
@media (min-width: 861px) {
  .training-coach-cta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
.training-coach-bar .support-widget-area { min-height:0; flex:0 0 auto; }
.training-coach-bar .xk-agent-phone {
  flex-direction:row; align-items:center; justify-content:flex-end;
  gap:14px; padding:0; width:auto;
}
.training-coach-line {
  font-size:0.8125rem; line-height:1.5; color:var(--text-secondary);
  margin:10px 4px 0;
}
@media (max-width: 860px) {
  .training-coach-col { flex:1 1 auto; width:100%; margin-top:0; }
}

/* ══ Lote 2 · B2: franja del coach en Entrenamiento + personaje afín ══ */
.training-coach-strip {
  display:flex; align-items:center; gap:14px;
  max-width:960px; margin:0 0 20px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:14px 18px;
}
.training-strip-thumb {
  width:44px; height:44px; border-radius:50%;
  object-fit:cover; object-position:top center; flex-shrink:0;
}
.training-strip-heading {
  font-size:0.75rem; font-weight:500; color:var(--accent); margin:0 0 3px;
}
.training-strip-msg {
  font-size:0.875rem; line-height:1.5; color:var(--text-secondary); margin:0;
}
.char-card--reco {
  box-shadow:0 0 16px -8px var(--reco-color);
}
.char-reco-badge {
  position:absolute; top:12px; right:12px;
  font-size:0.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:20px;
  background:var(--bg-elevated); border:1px solid var(--reco-color); color:var(--reco-color);
}

.training-footer-cta { max-width:960px; text-align:center; padding:4px 0 16px; }
.btn-not-sure {
  display:inline-block; padding:12px 28px;
  background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--radius-md); color:var(--text-secondary);
  font-family:inherit; font-size: 0.9375rem; cursor:pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-not-sure:hover { background:var(--bg-card-hover); color:var(--text-primary); border-color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   SCENARIO SCREEN
═══════════════════════════════════════════════════════════════ */
.scenario-layout { max-width:680px; margin:0 auto; }
.scenario-char-row { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.scenario-avatar { width:64px; height:64px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.scenario-char-name { font-size: 1.1875rem; font-weight:600; margin-bottom:2px; }
.scenario-char-role { font-size: 0.875rem; color:var(--text-secondary); margin-bottom:3px; }
.scenario-char-type { font-size: 0.6875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.scenario-mode-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:20px;
  border:1px solid var(--border-accent); background:var(--accent-subtle);
  font-size: 0.6875rem; font-weight:600; color:var(--accent); letter-spacing:.05em;
  margin-bottom:24px;
}
.scenario-intro { font-size: 0.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
.scenario-text { font-size: 1rem; line-height:1.8; color:var(--text-primary); margin-bottom:16px; }
.scenario-goal {
  font-size: 0.9375rem; line-height:1.7; color:var(--text-secondary);
  padding:14px 18px; background:var(--bg-card);
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); margin-bottom:32px;
}
.scenario-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }

/* ═══════════════════════════════════════════════════════════════
   QUICK REFERENCE
═══════════════════════════════════════════════════════════════ */
.ref-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:32px; max-width:820px; gap:24px;
}
.ref-header-left { flex:1; }
.ref-mode-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:20px;
  border:1px solid var(--border-accent); background:var(--accent-subtle);
  font-size: 0.6875rem; font-weight:600; color:var(--accent); letter-spacing:.05em; margin-bottom:10px;
}
.ref-char-meta { font-size: 0.75rem; color:var(--text-secondary); margin-bottom:2px; }

.ref-body { max-width:820px; display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; }
@media (max-width:720px) { .ref-body { grid-template-columns:1fr; } }
.ref-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.ref-section-full { grid-column:1/-1; }
.ref-section-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; cursor:pointer; user-select:none;
  transition: background var(--transition);
}
.ref-section-head:hover { background:var(--bg-card-hover); }
.ref-section-title { font-size: 0.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); }
.ref-chevron { font-size: 0.75rem; color:var(--text-muted); transition:transform var(--transition); }
.ref-section.open .ref-chevron { transform:rotate(180deg); }
.ref-section-body { display:none; padding:0 18px 16px; border-top:1px solid var(--border); }
.ref-section.open .ref-section-body { display:block; }

.ref-states-table { width:100%; border-collapse:collapse; margin-top:12px; }
.ref-states-table th { font-size: 0.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); text-align:left; padding:0 0 8px; border-bottom:1px solid var(--border); }
.ref-states-table td { font-size: 0.875rem; color:var(--text-secondary); padding:8px 0; vertical-align:top; border-bottom:1px solid var(--border); line-height:1.5; }
.ref-states-table tr:last-child td { border-bottom:none; }
.ref-states-table td:first-child { font-weight:700; color:var(--text-primary); width:28px; padding-right:10px; }
.ref-states-table td:nth-child(2) { font-weight:500; color:var(--text-primary); width:110px; padding-right:12px; }
.state-default { color:var(--accent) !important; }

.ref-trigger-block {
  margin-top:10px; padding:10px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border); margin-bottom:8px;
  font-size: 0.875rem; line-height:1.6; color:var(--text-secondary);
}
.ref-trigger-block strong { color:var(--text-primary); }
.ref-trigger-block em { display:block; margin-top:4px; color:var(--accent); font-style:normal; font-size: 0.75rem; }
.ref-callout {
  margin-top:10px; padding:10px 14px;
  background:var(--accent-subtle); border:1px solid var(--border-accent);
  border-radius:var(--radius-sm); font-size: 0.75rem; color:var(--text-secondary); line-height:1.6;
}
.ref-callout strong { color:var(--accent); }

.ref-score-step { display:grid; grid-template-columns:28px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); align-items:start; }
.ref-score-step:last-child { border-bottom:none; }
.ref-score-letter { font-size: 1.1875rem; font-weight:700; color:var(--accent); margin-top:2px; }
.ref-score-text { font-size: 0.875rem; color:var(--text-secondary); line-height:1.6; }
.ref-score-text strong { color:var(--text-primary); display:block; margin-bottom:2px; }
.ref-score-text em { font-style:italic; color:var(--accent); }

.ref-lever { margin-top:12px; padding:12px 14px; background:var(--bg-elevated); border-radius:var(--radius-sm); border:1px solid var(--border); margin-bottom:8px; }
.ref-lever-title { font-size: 0.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.ref-lever-body { font-size: 0.875rem; color:var(--text-secondary); line-height:1.65; }
.ref-lever-body blockquote { margin:8px 0 0; padding-left:10px; border-left:2px solid var(--accent); font-style:italic; color:var(--text-primary); font-size: 0.875rem; }
.ref-lever-warning { margin-top:6px; font-size: 0.75rem; color:var(--text-muted); }
.ref-lever-warning strong { color:var(--text-secondary); }

.ref-signals { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ref-signal-group-title { font-size: 0.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.ref-signal-group-title.positive { color:#6ED140; }
.ref-signal-group-title.negative { color:#ff5b5b; }
.ref-signal-list { list-style:none; font-size: 0.875rem; color:var(--text-secondary); line-height:1.6; }
.ref-signal-list li { padding:3px 0; }
.ref-signal-list li::before { content:'·'; color:var(--text-muted); margin-right:6px; }

.ref-victory { margin-top:12px; padding:12px 14px; background:var(--accent-subtle); border:1px solid var(--border-accent); border-radius:var(--radius-sm); }
.ref-victory-label { font-size: 0.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.ref-victory-body { font-size: 0.875rem; color:var(--text-secondary); line-height:1.65; }
.ref-victory-body em { display:block; margin:6px 0; font-style:italic; color:var(--text-primary); padding-left:10px; border-left:2px solid var(--accent); }

.ref-footer {
  max-width:820px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding-top:8px; flex-wrap:wrap;
}
.ref-skip-label { display:flex; align-items:center; gap:8px; font-size: 0.875rem; color:var(--text-secondary); cursor:pointer; user-select:none; }
.ref-skip-label input[type="checkbox"] { accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }

/* ═══════════════════════════════════════════════════════════════
   SESSION
═══════════════════════════════════════════════════════════════ */
#screen-session { display:none; padding:32px 40px; }
#screen-session.active { display:block; }

.session-layout { display:grid; grid-template-columns:1fr 300px; gap:28px; max-width:980px; margin:0 auto; }
@media (max-width:820px) { .session-layout { grid-template-columns:1fr; } }
.session-main { display:flex; flex-direction:column; }

.session-char-header { display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.session-avatar { width:72px; height:72px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.session-avatar-wrap { position:relative; }
.session-color-band { height:3px; width:72px; margin-top:4px; border-radius:2px; }
.session-char-info { flex:1; }
.session-char-name { font-size: 1.1875rem; font-weight:600; margin-bottom:2px; }
.session-char-role { font-size: 0.875rem; color:var(--text-secondary); margin-bottom:4px; }
.session-char-type { font-size: 0.6875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }

.session-mode-indicator {
  display:inline-flex; align-items:center; gap:6px; font-size: 0.6875rem; font-weight:600;
  padding:4px 10px; border-radius:20px;
  background:var(--accent-dim); border:1px solid var(--border-accent); color:var(--accent);
  letter-spacing:.04em; margin-bottom:16px; align-self:flex-start;
}
.session-context-block {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:18px 20px;
  font-size: 0.9375rem; line-height:1.7; color:var(--text-secondary); margin-bottom:20px;
}
.session-divider { border:none; border-top:1px solid var(--border); margin:0 0 20px; }
.session-voice { display:flex; flex-direction:column; align-items:center; gap:12px; }
.session-call-controls { justify-content:center; }
.session-timer { font-size: 2.25rem; font-weight:300; letter-spacing:.08em; color:var(--text-primary); }
.session-status { font-size: 0.875rem; color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
.session-status.is-listening .status-text { color:var(--text-primary); }
.session-status.is-speaking .status-dot { animation:pulse-dot 1.2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
.session-hint { font-size: 0.875rem; color:var(--text-secondary); text-align:center; }
.btn-end-session {
  display:inline-flex; align-items:center; gap:8px; padding:10px 22px;
  border:1px solid var(--border-light); border-radius:var(--radius-sm);
  background:transparent; color:var(--text-primary); font-family:inherit;
  font-size: 0.9375rem; font-weight:500; cursor:pointer;
  transition: border-color var(--transition), background var(--transition);
}
.btn-end-session:hover { border-color:var(--text-secondary); }
@keyframes pulse-band { 0%,100%{opacity:1} 50%{opacity:.4} }
.color-band.speaking { animation:pulse-band 1.2s infinite; }

/* Session side panel */
.session-side { display:flex; flex-direction:column; gap:12px; }
.side-placeholder { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.side-placeholder-img { width:100%; aspect-ratio:1; object-fit:cover; object-position:top center; display:block; }
.side-placeholder-body { padding:14px 16px; }
.side-placeholder-name { font-size: 0.9375rem; font-weight:600; color:var(--text-primary); margin-bottom:3px; }
.side-placeholder-role { font-size: 0.75rem; color:var(--accent); font-weight:500; margin-bottom:6px; }
.side-placeholder-text { font-size: 0.75rem; color:var(--text-secondary); line-height:1.6; }
.side-coming-soon {
  display:inline-block; margin-top:8px; font-size: 0.6875rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:20px;
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-muted);
}
.ref-panel-link {
  background:none; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px 14px; font-family:inherit; font-size: 0.875rem; color:var(--text-secondary);
  cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between;
  transition: border-color var(--transition), background var(--transition); width:100%;
}
.ref-panel-link:hover { background:var(--bg-card); border-color:var(--border-light); }
.ref-panel-link-title { font-weight:500; color:var(--text-primary); }
.ref-panel-link-sub { font-size: 0.75rem; color:var(--text-muted); margin-top:1px; }

/* ═══════════════════════════════════════════════════════════════
   WELCOME + SUPPORT WIDGETS
═══════════════════════════════════════════════════════════════ */
.welcome-layout { max-width:960px; margin:0 auto; }
.welcome-host-card {
  display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:start;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; margin-bottom:28px;
}
.welcome-host-img { width:100%; aspect-ratio:1; object-fit:cover; object-position:top center; border-radius:var(--radius-md); }
.welcome-host-text { font-size: 1rem; line-height:1.7; color:var(--text-secondary); margin:12px 0 20px; max-width:640px; }
.welcome-actions { display:flex; gap:12px; flex-wrap:wrap; grid-column:1 / -1; justify-content:flex-end; }

.support-agent-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px; margin-bottom:24px;
}
.support-agent-card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.support-agent-thumb { width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top center; flex-shrink:0; }
.support-agent-name { font-size: 0.9375rem; font-weight:600; color:var(--text-primary); }
.support-agent-role { font-size: 0.75rem; color:var(--accent); font-weight:500; margin-top:2px; }
.support-widget-area { min-height: 52px; }

/* ── Agent phone card (SDK) ────────────────────────────────────────────────── */
.xk-agent-phone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 4px;
  width: 100%;
}
.xk-agent-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}
.xk-agent-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.3s;
}
@keyframes xk-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(1.35); }
}
.xk-agent-status-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}
.xk-agent-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.xk-agent-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.xk-agent-call-btn:active { transform: scale(0.97); }
.xk-btn-start {
  background: var(--accent);
  color: #0a1616;
}
.xk-btn-end {
  background: #FE0000;
  color: #fff;
}
.xk-agent-mute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: opacity 0.2s;
}
.xk-agent-mute-btn:hover { background: var(--bg-hover, var(--border)); }
.ref-coach-card { max-width:960px; margin:0 auto 20px; }

/* ═══════════════════════════════════════════════════════════════
   SUMMARY
═══════════════════════════════════════════════════════════════ */
#screen-summary { display:none; min-height:100vh; padding:32px 40px; align-items:center; justify-content:center; }
#screen-summary.active { display:flex; }
.summary-layout {
  display:grid; grid-template-columns:minmax(260px,320px) minmax(280px,480px);
  gap:40px; align-items:start; width:100%; max-width:960px;
}
.summary-support { display:flex; flex-direction:column; gap:12px; }
.summary-content { width:100%; text-align:center; }
.summary-icon { font-size: 2.5rem; margin-bottom:16px; }
.summary-title { font-size: 1.75rem; font-weight:500; margin-bottom:8px; }
.summary-duration { font-size: 0.9375rem; color:var(--text-secondary); margin-bottom:32px; }
.behaviors { list-style:none; text-align:left; margin-bottom:32px; }
.behaviors li { padding:12px 0; border-bottom:1px solid var(--border); font-size: 0.9375rem; color:var(--text-secondary); line-height:1.5; }
.behaviors li:last-child { border-bottom:none; }
.summary-actions { display:flex; flex-direction:column; gap:12px; align-items:center; }

@media (max-width: 860px) {
  .welcome-host-card { grid-template-columns:1fr; }
  .summary-layout { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   TEST / PTIT
═══════════════════════════════════════════════════════════════ */
#screen-test-intro, #screen-test-question, #screen-test-break,
#screen-test-break-c, #screen-test-rank, #screen-test-result {
  display:none; flex-direction:column; align-items:center;
  padding:48px 40px 64px; min-height:100vh;
}
#screen-test-intro.active, #screen-test-question.active, #screen-test-break.active,
#screen-test-break-c.active, #screen-test-rank.active, #screen-test-result.active { display:flex; }

/* La intro usa el layout ref3 (canon mp): dentro de la columna flex centrada
   debe estirarse a los 960px, no encogerse a su contenido (fix A4, 10-jul) */
#screen-test-intro .ref3-layout { width:100%; }

#ck-counter { font-size: 0.75rem; font-weight:500; color:var(--text-secondary); letter-spacing:.08em; }

/* Intro */
.ck-intro-label { font-size: 0.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:20px; }
.ck-intro-title { font-size: 2.375rem; font-weight:400; text-align:center; line-height:1.35; max-width:480px; margin-bottom:16px; color:var(--text-primary); }
.ck-intro-sub { font-size: 1.1875rem; color:var(--text-secondary); text-align:center; line-height:1.7; max-width:400px; margin-bottom:48px; }
.ck-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.ck-pill { font-size: 0.75rem; color:var(--text-secondary); border:.5px solid var(--text-muted); border-radius:20px; padding:5px 14px; }

/* Question */
.ck-q-badge {
  font-size: 0.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); border:.5px solid var(--border-light);
  border-radius:var(--radius-sm); padding:4px 10px;
}
.ck-q-label { font-size: 2rem; font-weight:400; text-align:center; line-height:1.4; max-width:500px; margin-bottom:52px; color:var(--text-primary); }
.ck-bipolar { width:100%; max-width:560px; margin-bottom:44px; }
.ck-poles { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.ck-pole { font-size: 1.125rem; color:#C0C0C0; line-height:1.55; font-style:italic; display:flex; flex-direction:column; align-items:flex-start; }
.ck-pole.r { text-align:right; align-items:flex-end; }

/* Pole number circle — above the text */
.ck-pole-num-circle {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--text-muted);
  font-size: 0.75rem; font-weight:500; color:var(--text-secondary);
  margin-bottom:8px; font-style:normal; flex-shrink:0;
}

.ck-sel-row { display:flex; justify-content:center; gap:14px; }
.ck-sel-btn {
  width:54px; height:54px; border-radius:50%;
  border:1.5px solid var(--text-muted); background:transparent;
  color:var(--text-secondary); font-size: 1rem; font-weight:500;
  cursor:pointer; font-family:inherit; flex-shrink:0;
  transition: border-color .18s, color .18s, background .18s, transform .12s;
}
.ck-sel-btn:hover { border-color:var(--text-secondary); color:var(--text-primary); }
.ck-sel-btn:active { transform:scale(.94); }
.ck-sel-btn.on { background:var(--accent); border-color:var(--accent); color:#0a1616; }
.ck-scale-note {
  text-align:center; font-size: 0.875rem; color:var(--text-secondary);
  margin-top:16px; letter-spacing:.02em;
}
.ck-q-nav { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:560px; }

/* Break */
.ck-break-rule { width:40px; height:1px; background:var(--text-muted); margin-bottom:36px; }
.ck-break-section { font-size: 0.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:10px; }
.ck-break-title { font-size: 2.1875rem; font-weight:400; text-align:center; margin-bottom:16px; color:var(--text-primary); }
.ck-break-sub { font-size: 1.25rem; color:var(--text-secondary); text-align:center; line-height:1.7; max-width:380px; margin-bottom:44px; }

/* Rank */
.ck-rank-title { font-size: 2.125rem; font-weight:400; text-align:center; max-width:500px; margin-bottom:16px; color:var(--text-primary); }
.ck-rank-instr { font-size: 0.875rem; color:var(--text-secondary); margin-bottom:20px; }
.ck-rank-max-msg { font-size: 0.75rem; color:var(--accent); min-height:18px; margin-bottom:6px; }
.ck-rank-list { width:100%; max-width:500px; margin-bottom:36px; }
.ck-rank-item {
  display:flex; align-items:center; gap:16px; width:100%;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:8px;
  cursor:pointer; font-family:inherit;
  transition: background .18s, border-color .18s;
}
.ck-rank-item:hover { border-color:var(--border-light); }
.ck-rank-item.on { background:var(--bg-elevated); border-color:var(--border-light); }
.ck-rank-badge {
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--text-muted); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size: 0.875rem; font-weight:600; color:transparent; margin-top:2px;
  transition: background .18s, border-color .18s, color .18s;
}
.ck-rank-badge.filled { background:var(--accent); border-color:var(--accent); color:#0a1616; }
.ck-rank-text { font-size: 1rem; color:#C0C0C0; line-height:1.55; flex:1; }
.ck-rank-nav { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:560px; }
.ck-result-disclaimer { width:100%; max-width:720px; font-size: 0.9375rem; color:var(--text-secondary); line-height:1.7; text-align:center; margin-bottom:28px; padding:0 12px; }

/* Result */
.ck-result-label { font-size: 0.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:28px; }
.ck-result-avatar { width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size: 1.375rem; font-weight:500; margin-bottom:20px; border:2px solid transparent; }
.ck-result-name { font-size: 1.875rem; font-weight:500; text-align:center; margin-bottom:5px; }
.ck-result-type { font-size: 0.875rem; font-weight:500; text-align:center; margin-bottom:4px; }
.ck-result-role { font-size: 0.875rem; color:var(--text-secondary); text-align:center; margin-bottom:28px; }
.ck-match-wrap { width:100%; max-width:280px; margin-bottom:32px; }
.ck-match-meta { display:flex; justify-content:space-between; font-size: 0.6875rem; color:var(--text-muted); margin-bottom:6px; }
.ck-match-bg { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.ck-match-fill { height:100%; border-radius:2px; width:0%; transition:width 1.1s cubic-bezier(.4,0,.2,1); }
.ck-insights-card { width:100%; max-width:500px; background:var(--bg-card); border:.5px solid var(--border); border-radius:var(--radius-md); padding:20px 24px; margin-bottom:28px; }
.ck-insights-hd { font-size: 0.6875rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
.ck-insight { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:.5px solid var(--border); }
.ck-insight:first-of-type { padding-top:0; border-top:none; }
.ck-i-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; margin-top:6px; }
.ck-i-text { font-size: 0.9375rem; color:#D8D8D8; line-height:1.6; }
.ck-result-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.ck-result-columns { display:flex; gap:24px; width:100%; max-width:860px; margin-bottom:24px; }
.ck-result-col { flex:1; display:flex; flex-direction:column; align-items:center; background:var(--bg-card); border-radius:var(--radius-xl); padding:28px 24px; }
.ck-result-col--secondary { border:1px solid var(--border); background:var(--bg-elevated); }
@media (max-width:640px) { .ck-result-columns { flex-direction:column; } }

/* Test buttons */
.ck-btn-primary {
  background:var(--accent); color:#0a1616;
  border:none; padding:12px 28px; border-radius:var(--radius-sm);
  font-size: 0.9375rem; font-weight:600; cursor:pointer; font-family:inherit;
  transition:opacity .18s, transform .1s;
}
.ck-btn-primary:hover  { opacity:.88; }
.ck-btn-primary:active { transform:scale(.98); }
.ck-btn-primary:disabled { opacity:.28; cursor:not-allowed; }
.ck-btn-outline {
  background:transparent; color:var(--text-secondary);
  border:.5px solid var(--text-muted); padding:13px 24px;
  border-radius:var(--radius-sm); font-size: 0.9375rem; cursor:pointer; font-family:inherit;
  transition:border-color .18s, color .18s;
}
.ck-btn-outline:hover { border-color:var(--text-secondary); color:var(--text-primary); }
.ck-btn-ghost {
  background:transparent; color:var(--text-muted); border:none;
  padding:12px 8px; font-size: 0.9375rem; cursor:pointer; font-family:inherit;
  transition:color .18s;
}
.ck-btn-ghost:hover { color:var(--text-secondary); }
.ck-btn-ghost.invisible { visibility:hidden; }

/* ── Session quick-access icons (next to avatar) ── */
.session-char-header { align-items: flex-start; }

.emma-welcome-video {
  width: 100%;
  max-width: 480px;
  /* v3.30: los dos vídeos son 960x960. Fijar la proporción evita que la caja
     colapse a la altura por defecto del elemento antes de que cargue el
     póster, y el salto de maquetado que eso provocaba. */
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  margin: 8px 0 0;
  display: block;
}

.welcome-host-body {
  min-width: 0;
  overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════════════════════
   MY PROFILE — styles
   Append to end of styles.css
   Prefix: mp-
   ═══════════════════════════════════════════════════════════════════════════ */

/* MP screens inherit base .screen hide/show — only add layout overrides here */
.mp-screen {
  align-items: center;
  padding: 64px 40px 80px;
  box-sizing: border-box;
}
/* mp-screen shown as flex column (overrides .screen's display:block) */
.mp-screen.active {
  display: flex;
  flex-direction: column;
}

/* ── Intro screen ──────────────────────────────────────────────────────────── */
.mp-eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.mp-intro-title {
  font-size: 3.25rem;
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--text-primary);
  margin-bottom: 20px;
  text-align: center;
}

.mp-intro-sub {
  font-size: 1.125rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.7;
  max-width: 440px;
  margin-bottom: 36px;
}

.mp-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
}

.mp-pill {
  font-size: 0.75rem;
  color: var(--text-secondary);
  border: .5px solid var(--text-muted);
  border-radius: 20px;
  padding: 5px 14px;
}

.mp-intro-note {
  max-width: 400px;
  background: var(--bg-elevated);
  border: .5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 44px;
}

.mp-intro-note p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  text-align: center;
  margin: 0;
}

/* ── Question screen ───────────────────────────────────────────────────────── */
.mp-q-header {
  width: 100%;
  max-width: 560px;
  margin-bottom: 52px;
}

.mp-progress-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mp-progress-track {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.mp-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

.mp-counter {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .06em;
  white-space: nowrap;
}

.mp-q-instruction {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 32px;
  text-align: center;
}

/* Binary choice cards */
.mp-choice-wrap {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 44px;
}

.mp-choice {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  transition: border-color .15s, background .15s, transform .1s;
  font-family: inherit;
}

.mp-choice:hover {
  border-color: var(--text-muted);
  background: var(--bg-card-hover);
}

.mp-choice:active {
  transform: scale(.99);
}

.mp-choice.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.mp-choice-tag {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .04em;
  transition: background .15s, border-color .15s, color .15s;
}

.mp-choice.selected .mp-choice-tag {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a1616;
}

.mp-choice-text {
  font-size: 1.125rem;
  color: var(--text-primary);
  line-height: 1.6;
  padding-top: 3px;
  transition: color .15s;
}

.mp-choice.selected .mp-choice-text {
  color: var(--text-primary);
}

.mp-choice-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mp-choice-divider::before,
.mp-choice-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Nav */
.mp-q-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 560px;
}

/* ── Break screen ──────────────────────────────────────────────────────────── */
.mp-break-rule {
  width: 40px;
  height: 1px;
  background: var(--text-muted);
  margin-bottom: 36px;
}

.mp-break-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.mp-break-title {
  font-size: 2.375rem;
  font-weight: 300;
  text-align: center;
  margin-bottom: 16px;
  color: var(--text-primary);
  letter-spacing: -.01em;
}

.mp-break-sub {
  font-size: 1.125rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.7;
  max-width: 380px;
  margin-bottom: 44px;
}

/* ── Result screen ─────────────────────────────────────────────────────────── */
.mp-coach-card {
  margin-bottom: 48px;
  width: 100%;
  max-width: 640px;
}

/* Type badge */
.mp-result-badge {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
  border: .5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  width: 100%;
  max-width: 640px;
  margin-bottom: 24px;
}

.mp-result-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid transparent;
}

.mp-result-badge-text {
  flex: 1;
}

.mp-result-eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.mp-result-type {
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}

.mp-result-character {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mp-result-character span {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ══ Lote 2 · ronda 2: título de ruta y notas explicativas ══ */
.welcome-path-title {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 18px 0 10px;
}
.mp-bars-note {
  font-size: 0.75rem; line-height: 1.55; color: var(--text-muted);
  margin: 10px 0 0;
}
.ck-match-note {
  width:100%; max-width:720px; font-size: 0.875rem; line-height: 1.7;
  color: var(--text-secondary); text-align:left; margin: 10px auto 12px; padding: 0 12px;
}
.td-ranking + .ck-match-note, .td-ranking + .ck-match-note + .ck-match-note { text-align:left; margin: 8px 0 0; padding: 0; }
.ck-framing-note {
  font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted);
  font-style: italic;
}

/* ══ Lote 2 · B3: barras de distribución por los seis tipos ══ */
/* Se usan en #mp-result-bars (resultado fresco) y en el detalle histórico de
   Mis tests (renderPtitDetail). Misma columna de 640 que el resto del bloque. */
.mp-bars-block {
  width: 100%;
  max-width: 640px;
  margin: 4px 0 18px;
}
.mp-bars-title {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.mp-bars-list { display: flex; flex-direction: column; gap: 10px; }
.mp-bar-row { display: flex; align-items: center; gap: 12px; }
.mp-bar-label {
  flex: 0 0 130px;
  font-size: 0.875rem;
  font-weight: 500;
}
.mp-bar-row--top .mp-bar-label { font-weight: 700; }
.mp-bar-track {
  flex: 1 1 auto; height: 8px; border-radius: 6px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.mp-bar-fill { height: 100%; border-radius: 6px; transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .mp-bar-fill { transition: none; } }
.mp-bar-pct {
  flex: 0 0 auto; width: 44px; text-align: right;
  font-size: 0.8125rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.mp-bar-row--top .mp-bar-pct { color: var(--text-primary); font-weight: 600; }
@media (max-width: 560px) { .mp-bar-label { flex-basis: 104px; font-size: 0.8125rem; } }

/* Summary */
/* Boton PDF de Mi Perfil: a la izquierda, a ras de la columna de contenido (640),
   conservando la estetica sd-pdf-btn y su margen (mismo patron que el informe de
   sesion). El wrapper se centra por el align-items:center de .mp-screen; dentro,
   text-align:left lleva el pill al borde izquierdo de la columna. */
.mp-pdf-row {
  width: 100%;
  max-width: 640px;
  text-align: left;
}

.mp-result-summary {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 640px;
  text-align: left;
  margin-bottom: 36px;
  padding: 0 2px;
}

/* Sections accordion */
.mp-sections {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 48px;
}

.mp-section {
  background: var(--bg-card);
  border: .5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .15s;
}

.mp-section.open {
  border-color: var(--border-light);
}

.mp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}

.mp-section-head:hover .mp-section-title {
  color: var(--text-primary);
}

.mp-section-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color .15s;
}

.mp-section.open .mp-section-title {
  color: var(--text-primary);
}

.mp-section-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}

.mp-section.open .mp-section-chevron {
  transform: rotate(180deg);
}

.mp-section-body {
  display: none;
  padding: 0 20px 20px;
}

.mp-section.open .mp-section-body {
  display: block;
}

.mp-section-body p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
  white-space: pre-line;
}

/* Accent stripe on left for first section (open by default) */
.mp-section:first-child {
  border-left-width: 2px;
}

.mp-section:first-child.open {
  border-left-color: var(--accent);
}

/* Actions */
.mp-result-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
  width: 100%;
  max-width: 640px;
}

.mp-redo {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mp-redo:hover {
  color: var(--text-secondary);
}

/* ── Shared buttons ────────────────────────────────────────────────────────── */
.mp-btn-primary {
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--accent);
  color: #0a1616;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}

.mp-btn-primary:hover  { opacity: .88; }
.mp-btn-primary:active { transform: scale(.98); }
.mp-btn-primary:disabled { opacity: .28; cursor: not-allowed; }

.mp-btn-outline {
  padding: 11px 24px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s;
  white-space: nowrap;
}

.mp-btn-outline:hover { border-color: var(--text-secondary); }

.mp-btn-ghost {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px 4px;
  transition: color .15s;
}

.mp-btn-ghost:hover { color: var(--text-primary); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mp-screen { padding: 48px 20px 64px; }
  .mp-intro-title { font-size: 2.25rem; }
  .mp-result-badge { flex-direction: column; align-items: flex-start; }
  .mp-result-actions { flex-direction: column; align-items: stretch; }
  .mp-btn-primary, .mp-btn-outline { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SIDEBAR — drawer mode (Opcion A) + FAB
   Breakpoint: ≤ 640px
═══════════════════════════════════════════════════════════════ */

/* FAB: oculto por defecto (solo existe visualmente en movil) */
.sidebar-fab { display: none; }

@media (max-width: 640px) {

  /* Sidebar: drawer oculto por defecto, entra como overlay */
  .sidebar {
    position: fixed;
    z-index: 200;
    width: var(--sidebar-w);
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .sidebar.mobile-open { transform: translateX(0); }

  /* Contenido: siempre a ancho completo en movil */
  .main-content { margin-left: 0 !important; }

  /* Barra de progreso del checklist: ancho completo */
  #ck-progress-bar { left: 0 !important; }

  /* El estado colapsado no aplica en movil: el drawer abre expandido */
  .sidebar.collapsed { width: var(--sidebar-w); }

  /* Backdrop — visible con el drawer abierto */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 199;
  }
  .sidebar-backdrop.visible { display: block; }

  /* Toggle button — more gap from logo on mobile */
  .sidebar-toggle {
    margin-left: 8px;
  }

  /* Lang bar — always visible in expanded state, hidden when collapsed */
  .sidebar-lang-bar {
    display: flex;
  }
  .sidebar.collapsed .sidebar-lang-bar {
    display: none;
  }

  /* FAB: boton flotante abajo-izquierda que abre el drawer */
  .sidebar-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 16px rgba(0,0,0,.55);
    cursor: pointer;
    z-index: 198;
  }
  .sidebar-fab img { width: 26px; height: 26px; display: block; }
  .sidebar-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* FAB oculto con el drawer abierto o durante la llamada de practica */
  body.xk-drawer-open .sidebar-fab,
  body.xk-call-live  .sidebar-fab { display: none; }

  /* Screens — reduce padding on mobile */
  .screen { padding: 32px 20px; }
}

/* ── Dashboard My Profile card ── */
.dash-myprofile-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 36px;
}
.dash-myprofile-left { flex: 1; }
.dash-myprofile-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.dash-myprofile-title {
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.dash-myprofile-sub {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
.dash-myprofile-btn {
  flex-shrink: 0;
  padding: 10px 22px;
  background: var(--accent);
  color: #0a1616;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.dash-myprofile-btn:hover { opacity: .85; }

@media (max-width: 560px) {
  .dash-myprofile-card { flex-direction: column; align-items: flex-start; }
  .dash-myprofile-btn  { width: 100%; text-align: center; }
}

/* ── Info card with action button (dashboard how-it-works) ── */
.info-card--action {
  display: flex;
  flex-direction: column;
}
.info-card--action .info-card-body {
  flex: 1;
}
.info-card-btn {
  margin-top: 16px;
  align-self: flex-start;
  padding: 7px 20px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0a1616;
  cursor: pointer;
  transition: opacity .15s;
}
.info-card-btn:hover {
  opacity: .85;
}

/* ── Mobile sidebar: override for new dual-header structure ── */
@media (max-width: 640px) {
  .sidebar-logo--expanded  { padding: 10px 10px 10px 14px; min-height: 54px; }
  .sidebar-logo--collapsed { min-height: 80px; overflow: hidden; }
  .sidebar-lang-bar .lang-btn { padding: 3px 6px; font-size: 0.6875rem; }
  /* Ensure collapsed header doesn't bleed when sidebar is expanded */
  .sidebar:not(.collapsed) .sidebar-logo--collapsed { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — new layout v2
═══════════════════════════════════════════════════════════════ */

/* Top grid: Emma card (left) + intro text (right) */
.dash-top-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.dash-emma-compact { margin-bottom: 0; }
.dash-intro-text { padding-top: 4px; }

@media (max-width: 680px) {
  .dash-top-grid { grid-template-columns: 1fr; }
}

/* ── Metrics card ── */
.dash-metrics-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 36px;
}
.dash-metrics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-metrics-header .section-eyebrow { margin: 0; }

.dash-coming-soon-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 3px 10px;
}

/* Onboarding checklist row */
.dash-metrics-onboarding {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.dash-onboarding-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-onboarding-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  flex-shrink: 0;
}
.dash-onboarding-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* KPI row */
.dash-kpi-row {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.dash-kpi {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.dash-kpi:last-child { border-right: none; }

.dash-kpi-value {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}
.dash-kpi-value--neutral { color: var(--text-muted); }

.dash-kpi-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Minutes ring */
.dash-kpi--ring { gap: 6px; }
.dash-ring-wrap {
  position: relative;
  width: 44px; height: 44px;
}
.dash-ring-svg {
  width: 44px; height: 44px;
  transform: rotate(-90deg);
}
.dash-ring-track {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 4;
}
.dash-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dasharray .6s ease;
}
.dash-ring-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 560px) {
  /* KPIs en rejilla 2×2: evita el solape de etiquetas largas en flex */
  .dash-kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpi { min-width: 0; padding: 12px 6px; border-right: none; }
  .dash-kpi-value { font-size: 1.1875rem; }
  .dash-kpi-label { letter-spacing: .04em; overflow-wrap: anywhere; }
  /* El anillo de minutos ocupa la fila completa bajo los cuatro KPIs */
  .dash-kpi--ring { grid-column: 1 / -1; border-top: 1px solid var(--border); }
  .dash-metrics-onboarding { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   BRIEFING — Three-page reference (ref3)
   Follows Dashboard two-column card pattern
═══════════════════════════════════════════════════════════════ */
.ref3-layout { max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.ref3-top-grid { display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start; }

/* Cards */
.ref3-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column; }
.ref3-card--char { aspect-ratio:1/1; }
.ref3-char-img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.ref3-card--company { min-height:240px; align-items:center; justify-content:center; padding:28px; }
.ref3-company-logo { width:100%; height:auto; object-fit:contain; display:block; }
.ref3-card--coach { padding:16px; min-height:240px; }
.intro-coach-card { max-width: 420px; width: 100%; margin: 0 auto 20px; }
.ref3-coach-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ref3-coach-thumb { width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top center; flex-shrink:0; }
.ref3-widget-space { min-height:100px; flex:1; }

/* Text area */
.ref3-text-area { padding-top:4px; display:flex; flex-direction:column; gap:0; }
.ref3-mode-pill { display:inline-flex; align-items:center; gap:6px; font-size: 0.6875rem; font-weight:600; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; background:var(--accent-subtle); border:1px solid var(--border-accent); border-radius:20px; padding:3px 10px; width:fit-content; margin-bottom:8px; }
.ref3-meta { font-size: 0.75rem; color:var(--text-secondary); margin:4px 0 14px; }
.ref3-title { font-size: 1.375rem; font-weight:600; color:var(--text-primary); margin:4px 0 4px; line-height:1.2; }
.ref3-eyebrow { font-size: 0.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); margin:0 0 12px; }
.ref3-eyebrow--label { font-size: 0.6875rem; letter-spacing:.08em; color:var(--accent); margin-bottom:0; }
.ref3-case-name { font-size: 0.75rem; color:var(--text-secondary); margin:4px 0 14px; }
.ref3-sub-label { font-size: 0.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:24px 0 10px; padding-top:18px; border-top:1px solid var(--border-light); }
/* P3: el primer sub-label abre la seccion bajo el titulo, sin divisor. */
#ref3-p3-starts { margin-top:0; padding-top:0; border-top:none; }
.ref3-note { font-size: 0.75rem; color:var(--text-muted); font-style:italic; }

/* Prose */
.ref3-prose { display:flex; flex-direction:column; gap:14px; max-width:32rem; }
.ref3-prose p { font-size: 0.875rem; line-height:1.75; color:var(--text-secondary); margin:0; }
.ref3-prose strong { color:var(--text-primary); font-weight:600; }

/* Ritmo de lectura: separa los parrafos de prosa corrida (P1 persona, P2
   situacion, P3 estados). Scoped a los contenedores de prosa-cuerpo para que
   las etiquetas de columna y otros <p> de bloques estructurados conserven su
   propio espaciado. */
#ref3-p1-prose > p,
#ref3-p2-prose-d > p,
#ref3-p2-prose-u > p,
#ref3-p3-statesprose > p { margin:0 0 0.85em; }
#ref3-p1-prose > p:last-child,
#ref3-p2-prose-d > p:last-child,
#ref3-p2-prose-u > p:last-child,
#ref3-p3-statesprose > p:last-child { margin-bottom:0; }

/* Lead de P1: el parrafo de apertura es el punto de entrada al perfil denso. */
#ref3-p1-prose > p:first-child { font-size:1.0625rem; line-height:1.6; color:var(--text-primary); margin-bottom:1em; }

/* Two-col */
.ref3-two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.ref3-col { padding:10px 12px; border-radius:var(--radius-sm); background:var(--bg-elevated); border:1px solid var(--border); }
.ref3-col--pos { border-left:3px solid #6ED140; }
.ref3-col--neg { border-left:3px solid #FE0000; }
.ref3-col-label { font-size: 0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:6px; }
.ref3-col ul { margin:0; padding-left:14px; }
.ref3-col li { font-size: 0.75rem; color:var(--text-secondary); line-height:1.6; }

/* Goal block */
.ref3-goal { padding:12px 14px; background:var(--accent-subtle); border:1px solid var(--border-accent); border-radius:var(--radius-sm); font-size: 0.875rem; line-height:1.65; color:var(--text-secondary); }
.ref3-goal strong { color:var(--accent); font-weight:700; margin-right:6px; }

/* Lote 7: caja de resalte "Lo que marcara la diferencia" (P3 del briefing) */
.ref3-diff { margin:16px 0 4px; padding:14px 16px; background:var(--accent-subtle); border:1px solid var(--border-accent); border-radius:var(--radius-sm); }
.ref3-diff-title { font-size: 0.875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.ref3-diff p { font-size: 0.875rem; line-height:1.65; color:var(--text-secondary); margin:0 0 8px; }
.ref3-diff p:last-child { margin-bottom:0; }

/* Triggers */
.ref3-trigger { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; padding:8px 10px; border-left:2px solid var(--border); margin-bottom:6px; font-size: 0.8125rem; line-height:1.6; }
.ref3-trigger strong { color:var(--text-muted); font-weight:700; }
.ref3-trigger span   { color:var(--text-secondary); }
.ref3-trigger em     { display:block; width:100%; color:var(--text-muted); font-style:normal; font-size: 0.75rem; margin-top:2px; }
.ref3-trigger--positive { border-left-color:var(--accent); }
.ref3-trigger--positive strong { color:var(--accent); }

/* SCORE steps */
.ref3-score-step { display:grid; grid-template-columns:24px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); align-items:start; font-size: 0.8125rem; line-height:1.6; }
.ref3-score-step:last-child { border-bottom:none; }
.ref3-score-letter { font-size: 0.9375rem; font-weight:700; color:var(--accent); padding-top:1px; }
.ref3-score-step strong { color:var(--text-primary); }
.ref3-score-step span   { color:var(--text-secondary); }
.ref3-score-step em     { display:block; color:var(--text-muted); font-style:italic; font-size: 0.75rem; margin-top:3px; padding-left:8px; border-left:2px solid var(--accent); }

/* Signals */
.ref3-signals { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.ref3-signal-title { font-size: 0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.ref3-signal-title.positive { color:#6ED140; }
.ref3-signal-title.negative { color:#ff5b5b; }
.ref3-signals ul { margin:0; padding-left:14px; }
.ref3-signals li { font-size: 0.75rem; color:var(--text-secondary); line-height:1.65; }

/* Footer */
.ref3-footer { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid var(--border); }
.ref3-footer-nav { display:flex; gap:12px; align-items:center; }

/* C3 (Lote 4) · Bloque "Tus resultados" bajo el arranque de cada test */
.intro-results { border-top:1px solid var(--border); padding-top:16px; }
.intro-results-h { font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:0; }
.intro-results-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; max-height:320px; overflow-y:auto; padding-right:4px; }
.intro-results-list .sess-row { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); cursor:pointer; transition:background .12s, border-color .12s; }
.intro-results-list .sess-row:hover, .intro-results-list .sess-row:focus-visible { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); outline:none; }
.intro-results-list .sess-dot { width:10px; height:10px; border-radius:50%; margin-top:6px; flex:0 0 auto; }
.intro-results-list .sess-main { flex:1 1 auto; min-width:0; }
.intro-results-list .sess-line1 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.intro-results-list .sess-char { font-weight:600; }
.intro-results-list .sess-line2 { color:var(--text-muted); font-size:13px; margin-top:2px; }
.intro-results-list .sess-empty { color:var(--text-muted); margin:8px 0 0; }
/* Bloque "Cómo te ves": la fila es informativa (no navegable), sin cursor ni hover. */
.intro-results-list .sess-row--static { cursor:default; }
.intro-results-list .sess-row--static:hover { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.06); }
.mp-selfview-actions { margin-top:12px; }
.mp-btn-secondary {
  padding:8px 18px; border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; background:transparent; color:var(--text-primary);
  font-family:inherit; font-size:0.875rem; font-weight:600;
  transition:background .15s, border-color .15s;
}
.mp-btn-secondary:hover  { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
.mp-btn-secondary:active { transform:scale(.98); }

/* Responsive */
@media (max-width:680px) {
  .ref3-top-grid { grid-template-columns:1fr; }
  .ref3-card--char { aspect-ratio:unset; max-height:220px; }
  .ref3-card--company { min-height:120px; }
  .ref3-two-col, .ref3-signals { grid-template-columns:1fr; }
}

/* ══ THEMES SCREEN (selector de tema · U1 scaffold) ═════════════════════════════ */
.themes-layout { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:28px; }
.themes-subtitle { font-size:0.9375rem; line-height:1.6; color:var(--text-secondary); margin:8px 0 0; max-width:34rem; }
.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.theme-card { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:10px; transition:border-color var(--transition), background var(--transition); }
.theme-card--active { cursor:pointer; }
.theme-card--active:hover { border-color:var(--border-accent); background:var(--bg-card-hover); }
.theme-card--active:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.theme-card--soon { opacity:0.7; }
.theme-icon { color:var(--accent); width:28px; height:28px; }
.theme-card--soon .theme-icon { color:var(--text-muted); }
.theme-title { font-size:1.125rem; font-weight:600; color:var(--text-primary); margin:0; }
.theme-desc { font-size:0.875rem; line-height:1.6; color:var(--text-secondary); margin:0; }
.theme-badge { position:absolute; top:16px; right:16px; font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:var(--bg-elevated); border:1px solid var(--border); border-radius:20px; padding:3px 10px; }
@media (max-width:680px) { .theme-grid { grid-template-columns:1fr; } }

/* ══ SCORE METHOD SCREEN ════════════════════════════════════════════════════ */

.score-layout {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.score-header {
  margin-bottom: 40px;
}

.score-premise {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-top: 14px;
  max-width: 640px;
}

/* Steps */
.score-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.score-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: border-color var(--transition);
}

.score-step:hover { border-color: var(--border-light); }

.score-step-letter {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 700;
  flex-shrink: 0;
}

.score-step-body { display: flex; flex-direction: column; gap: 4px; }

.score-step-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.score-step-tag {
  font-size: 0.75rem;
  color: var(--accent);
  font-style: italic;
  margin: 0 0 6px;
}

.score-step-desc {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0;
}

/* Intensities */
.score-levels-wrap {
  margin-bottom: 40px;
}

.score-levels-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.score-levels-sub {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 20px;
  max-width: 560px;
}

.score-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.score-level-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: border-color var(--transition);
}

.score-level-card:hover { border-color: var(--border-light); }

.score-level-num {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.score-level-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 8px;
}

.score-level-desc {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* Footer link */
.score-footer-link {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.score-footer-link a {
  color: var(--accent);
  text-decoration: none;
  margin-left: 4px;
}

.score-footer-link a:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 640px) {
  .score-levels { grid-template-columns: 1fr; }
  .score-step { grid-template-columns: 40px 1fr; gap: 12px; padding: 16px; }
  .score-step-letter { width: 40px; height: 40px; font-size: 1.1875rem; }
}


/* ═══════════════════════════════════════════════════════════════
   ACCESIBILIDAD (Evaluacion 2)
   Logica y persistencia: a11y.js. Aqui solo estilos y overrides.
═══════════════════════════════════════════════════════════════ */

/* ── Escalado de tamano de letra ──────────────────────────────────────────
   Toda la tipografia esta en rem, asi que cambiar la raiz reescala la UI.
   Se ensancha la barra lateral en los pasos grandes para que las etiquetas
   de navegacion no se recorten (todo el layout referencia --sidebar-w). */
html[data-fontscale="lg"] { font-size: 20px; --sidebar-w: 268px; }   /* 125% */
html[data-fontscale="xl"] { font-size: 24px; --sidebar-w: 320px; }   /* 150% */

/* En movil la barra es overlay; se limita para no tapar toda la pantalla */
@media (max-width: 640px) {
  html[data-fontscale="lg"] .sidebar:not(.collapsed),
  html[data-fontscale="xl"] .sidebar:not(.collapsed) { max-width: 88vw; }
}

/* ── Modo alto contraste ──────────────────────────────────────────────────
   Redefine los tokens de color a maximos. Como casi todo el CSS usa
   var(--text-*) / var(--border*), el cambio cae en cascada por toda la app. */
html[data-contrast="high"] {
  --bg-main:        #050e1c;   /* marino profundo */
  --bg-sidebar:     #050e1c;
  --bg-card:        #0e1b30;
  --bg-card-hover:  #16243d;
  --bg-elevated:    #16243d;

  --text-primary:   #ffffff;
  --text-secondary: #ffffff;
  --text-muted:     #d5dce8;   /* etiqueta clara */
  --text-disabled:  #97a2b8;

  --accent:         #7cc0f2;   /* azul frio mas brillante */
  --accent-hover:   #a6d6f8;
  --accent-dim:     #123048;
  --accent-subtle:  rgba(124,192,242,0.22);

  --border:         #4a5a76;   /* separadores visibles */
  --border-light:   #5a6a86;
  --border-accent:  rgba(124,192,242,0.55);
}

/* Correcciones puntuales de colores literales (no tokenizados) en alto contraste */
html[data-contrast="high"] .ref3-signal-title.positive,
html[data-contrast="high"] .ref-signal-group-title.positive { color: #8ee85a; }
html[data-contrast="high"] .ref3-signal-title.negative,
html[data-contrast="high"] .ref-signal-group-title.negative { color: #ff5b5b; }
html[data-contrast="high"] .ref3-col--pos { border-left-color: #8ee85a; }
html[data-contrast="high"] .ref3-col--neg { border-left-color: #ff5b5b; }
html[data-contrast="high"] .ck-i-text     { color: #ffffff; }
/* Refuerzo de fills tenues con base rgba literal */
html[data-contrast="high"] .ref3-goal    { background: rgba(95,200,255,0.16); }
html[data-contrast="high"] .ref-victory  { background: rgba(95,200,255,0.16); }

/* ── Disparador flotante ──────────────────────────────────────────────────
   Fijo y visible en todas las pantallas (incluida la sesion de voz). 44px
   minimo de objetivo tactil (WCAG 2.5.5). */
.xk-a11y-trigger {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 48px; height: 48px;
  z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: background var(--transition), transform 0.1s;
}
.xk-a11y-trigger:hover  { background: var(--accent-subtle); }
.xk-a11y-trigger:active { transform: scale(0.95); }
.xk-a11y-trigger svg    { width: 24px; height: 24px; pointer-events: none; }

@media (max-width: 640px) {
  .xk-a11y-trigger { right: 14px; bottom: 14px; }
}

/* ── Panel ────────────────────────────────────────────────────────────────*/
.xk-a11y-panel {
  position: fixed;
  top: 80px; left: 80px;      /* valores por defecto · a11y.js los recalcula al abrir */
  z-index: 250;               /* por encima del overlay del sidebar en movil (200) y su backdrop (199) */
  width: 280px; max-width: calc(100vw - 32px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  padding: 18px;
}
.xk-a11y-panel[hidden] { display: none; }

.xk-a11y-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.xk-a11y-title {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-primary);
}
.xk-a11y-close {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 1.25rem; line-height: 1;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.xk-a11y-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.xk-a11y-group { margin-bottom: 16px; }
.xk-a11y-group:last-of-type { margin-bottom: 8px; }
.xk-a11y-label {
  display: block; margin-bottom: 8px;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-secondary);
}

/* Control segmentado de tamano */
.xk-a11y-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.xk-a11y-seg button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit; cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.xk-a11y-seg button:hover { border-color: var(--border-light); color: var(--text-primary); }
.xk-a11y-seg button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-subtle); color: var(--accent);
}
.xk-a11y-seg .xk-a11y-seg-a   { font-weight: 700; line-height: 1; }
.xk-a11y-seg button:nth-child(1) .xk-a11y-seg-a { font-size: 0.875rem; }
.xk-a11y-seg button:nth-child(2) .xk-a11y-seg-a { font-size: 1.0625rem; }
.xk-a11y-seg button:nth-child(3) .xk-a11y-seg-a { font-size: 1.3125rem; }
.xk-a11y-seg small { font-size: 0.625rem; color: var(--text-muted); letter-spacing: .03em; }
.xk-a11y-seg button[aria-pressed="true"] small { color: var(--accent); }

/* Interruptor de contraste */
.xk-a11y-switch {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; font-family: inherit;
  transition: border-color var(--transition);
}
.xk-a11y-switch:hover { border-color: var(--border-light); }
.xk-a11y-switch-track {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px;
  background: var(--border-light);
  border-radius: 20px;
  transition: background var(--transition);
}
.xk-a11y-switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: transform var(--transition), background var(--transition);
}
.xk-a11y-switch[aria-checked="true"] .xk-a11y-switch-track { background: var(--accent); }
.xk-a11y-switch[aria-checked="true"] .xk-a11y-switch-knob  { transform: translateX(16px); background: #0a1616; }
.xk-a11y-switch-state { font-size: 0.8125rem; color: var(--text-secondary); }
.xk-a11y-switch[aria-checked="true"] .xk-a11y-switch-state { color: var(--text-primary); }

/* Restablecer */
.xk-a11y-reset {
  width: 100%; padding: 8px;
  background: none; border: none;
  color: var(--text-muted); font-family: inherit; font-size: 0.75rem;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.xk-a11y-reset:hover { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════
   CONTROL DE IDIOMA Y ACCESIBILIDAD EN LA BARRA (v3.3)
═══════════════════════════════════════════════════════════════ */

/* Grupo izquierdo de la fila de controles (idioma + accesibilidad) */
.sidebar-ctl-left { display: flex; align-items: center; gap: 6px; }

/* ── Boton de accesibilidad ───────────────────────────────────────────────*/
.sidebar-a11y-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.sidebar-a11y-btn:hover { background: var(--bg-card-hover); border-color: var(--accent); color: var(--accent); }
.sidebar-a11y-btn svg   { width: 18px; height: 18px; pointer-events: none; }
.sidebar-a11y-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* ── Desplegable de idioma ────────────────────────────────────────────────*/
.lang-dd-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 7px;
  color: var(--text-secondary);
  font-family: inherit; font-size: 0.6875rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.lang-dd-trigger:hover,
.lang-dd-trigger[aria-expanded="true"] { color: var(--text-primary); border-color: var(--accent); }
.lang-dd-flag  { line-height: 1; }
.lang-dd-caret { width: 12px; height: 12px; opacity: .7; pointer-events: none; }

/* Disparador de idioma en estado contraido (solo la bandera) */
.sidebar-active-flag-btn {
  width: 30px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.sidebar-active-flag-btn:hover,
.sidebar-active-flag-btn[aria-expanded="true"] { border-color: var(--accent); }

/* Menu de idioma (posicionado por JS · fixed) */
.lang-menu {
  position: fixed;
  z-index: 152;
  min-width: 96px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.lang-menu[hidden] { display: none; }
.lang-menu .lang-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 10px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit; font-size: 0.8125rem; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.lang-menu .lang-btn:hover  { background: var(--bg-card-hover); color: var(--text-primary); }
.lang-menu .lang-btn.active { color: var(--accent); }
.lang-menu .lang-btn.active::after {
  content: '✓'; margin-left: auto; font-size: 0.75rem; color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   ACCESIBILIDAD · lector de pantalla (v3.4)
═══════════════════════════════════════════════════════════════ */

/* Oculto visualmente, pero presente para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Enlace de salto al contenido: fuera de pantalla hasta recibir foco */
.skip-link {
  position: fixed; top: 8px; left: -9999px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--accent);
  color: #0a1616;
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* El contenedor principal no debe mostrar contorno al recibir foco por programa */
#main-content:focus { outline: none; }


/* ══ v36 · Semáforo en "Cosas a tener en cuenta" (severity de triggers) ══
   Verde = palanca positiva · Rojo = riesgo alto · Calabaza = riesgo medio.
   En "SCORE, puntos de atención" el azul se mantiene: ahí remarca, no evalúa. */
.ref3-trigger--positive { border-left-color:#3fb950; }
.ref3-trigger--positive strong { color:#3fb950; }
.ref3-trigger--high { border-left-color:#e5484d; }
.ref3-trigger--high strong { color:#e5484d; }
.ref3-trigger--medium { border-left-color:#e8883a; }
.ref3-trigger--medium strong { color:#e8883a; }

/* ══ v36 · CTA contextual en tarjetas de Emma y Ricardo ══ */
.support-agent-cta {
  font-size: 0.75rem; line-height: 1.55; color: var(--text-muted);
  font-style: italic; margin: 8px 0 0; padding: 0 2px;
}

/* ── Welcome · ruta de pasos ──────────────────────────────────────────────── */
.welcome-path { display:flex; flex-direction:column; gap:10px; margin:18px 0 6px; }
.welcome-path-step { display:flex; align-items:flex-start; gap:10px; }
.welcome-path-icon { width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:2px; }
.welcome-path-step p { font-size:0.875rem; line-height:1.6; color:var(--text-secondary); margin:0; }
.welcome-path-step strong { color:var(--text-primary); font-weight:600; }

/* ── Training intro (previa) ──────────────────────────────────────────────── */
.ti-layout { max-width: 760px; margin: 0 auto; }
.ti-header { margin-bottom: 28px; }
.ti-block { margin-bottom: 32px; }
.ti-h { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 10px; }
.ti-body { font-size: 0.9375rem; line-height: 1.8; color: var(--text-secondary); max-width: 640px; margin: 0; }
.ti-matrix { max-width: 680px; margin: 22px 0 4px; }
.ti-tells { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ti-tell { display: flex; align-items: flex-start; gap: 10px; }
.ti-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ti-tell p { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.ti-tell strong { color: var(--text-primary); font-weight: 600; }
.op-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.op-cards--two { grid-template-columns: repeat(2, 1fr); }  /* bloque de modo: 2 cards a todo el ancho */
.op-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 10px; padding: 14px; }
.op-icon { width: 20px; height: 20px; color: var(--accent); display: block; margin-bottom: 8px; }
.op-card h3 { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.op-card p { font-size: 0.75rem; line-height: 1.5; color: var(--text-muted); margin: 0; }
.ti-cta { margin-top: 8px; }
.ti-skip { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.8125rem; color: var(--text-muted); cursor: pointer; }
.ti-skip input { accent-color: var(--accent); cursor: pointer; }
.training-header .ref3-mode-pill { margin: 10px 0 0; }
@media (max-width: 720px) { .op-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .op-cards { grid-template-columns: 1fr; } }

/* Training intro · glosa de la matriz y nota de arquetipo */
.ti-caption { max-width: 560px; margin: 10px auto 0; font-size: 0.75rem; line-height: 1.55; color: var(--text-muted); text-align: center; }
.ti-note { margin: 14px 0 0; padding: 12px 14px; border-left: 2px solid var(--border-accent); background: var(--accent-subtle); border-radius: 0 8px 8px 0; font-size: 0.8125rem; line-height: 1.6; color: var(--text-secondary); }

/* Training intro · leyenda de zonas de la matriz */
.ti-legend { display: flex; justify-content: center; gap: 20px; margin: 12px 0 0; }
.ti-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--text-muted); }
.ti-legend-sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-light); }
.ti-legend-sw--ext { background: rgba(255,255,255,0.08); }
.ti-legend-sw--int { background: rgba(0,0,0,0.38); }

/* ── Pantalla de confidencialidad del test de interlocutor (pieza 1, v3.38) ──── */
.tc-card { max-width:560px; margin:0 auto; width:100%; box-sizing:border-box; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; display:flex; flex-direction:column; }
.tc-lock { width:48px; height:48px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; background:var(--accent-subtle); border:1px solid var(--border-accent); color:var(--accent); margin-bottom:16px; }
.tc-card .ref3-title { margin-top:0; }
.tc-field { margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.tc-label { font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); }
.tc-input { width:100%; box-sizing:border-box; background:var(--bg-main); border:1px solid var(--border-light); border-radius:var(--radius-sm); color:var(--text-primary); font-family:inherit; font-size:var(--fs-base); padding:11px 13px; transition:border-color var(--transition); }
.tc-input:focus { outline:none; border-color:var(--accent); }
.tc-input::placeholder { color:var(--text-muted); }
.tc-warning { font-size:var(--fs-xs); color:var(--text-muted); line-height:1.6; margin:2px 0 0; }

/* ── Aviso de duración de sesión (pieza 4, v3.38) ───────────────────────────── */
.session-duration-notice { font-size:var(--fs-xs); color:var(--text-muted); margin:0 0 10px; letter-spacing:.01em; }


/* ═══ F6 · Informe de perfil (xkRenderProfileReport, app.js v3.49) ═══════════ */
.xk-report { max-width: 720px; margin: 0 auto 18px; }
.xkr-head { margin-bottom: 14px; }
.xkr-eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted, #9fb0c3); margin: 0 0 6px;
}
.xkr-title { font-size: 26px; margin: 0 0 4px; color: var(--text, #eef4fa); }
.xkr-meta { font-size: 13px; color: var(--text-muted, #9fb0c3); margin: 0; }
.xkr-frame { font-size: 15px; line-height: 1.5; margin: 0 0 16px; color: var(--text, #eef4fa); }
.xkr-profiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;
}
.xkr-card {
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px; padding: 14px 16px;
}
.xkr-card-label {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted, #9fb0c3); margin: 0 0 6px;
}
.xkr-card-name { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.xkr-card-summary { font-size: 13.5px; line-height: 1.55; margin: 0; color: var(--text, #eef4fa); }
.xkr-spider { text-align: center; margin: 4px 0 14px; }
.xkr-spider canvas { max-width: 100%; height: auto; }
.xkr-block-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--text, #eef4fa); }
.xkr-match {
  border-top: 1px solid var(--border, rgba(255,255,255,0.1));
  padding-top: 12px; margin-bottom: 14px;
}
.xkr-match-band { font-size: 14px; margin: 0 0 6px; color: var(--text, #eef4fa); }
.xkr-match-fixed { font-size: 12.5px; line-height: 1.5; margin: 0; color: var(--text-muted, #9fb0c3); }
.xkr-next {
  font-size: 14px; font-style: italic; margin: 0 0 10px; color: var(--text, #eef4fa);
  border-top: 1px solid var(--border, rgba(255,255,255,0.1)); padding-top: 12px;
}
.xkr-foot { font-size: 11px; color: var(--text-muted, #9fb0c3); margin: 0 0 8px; }
@media (max-width: 640px) {
  .xkr-profiles { grid-template-columns: 1fr; }
  .xkr-title { font-size: 22px; }
}

/* F6 · nota previa al CTA de descarga del PDF (v3.24) */
.mp-pdf-note {
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted, #9fb0c3);
  margin: 0 0 8px; max-width: 720px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Onboarding lineal (O2) · familia .onb-* + modo body.xk-onb
   El modo xk-onb cierra la navegación (gating lineal,
   TECH_Nota_Diseno_Onboarding_Operativa §5) y ajusta welcome y resultado.
   ═══════════════════════════════════════════════════════════════════════════ */

body.xk-onb .sidebar,
body.xk-onb .sidebar-fab,
body.xk-onb .sidebar-backdrop { display: none !important; }
body.xk-onb .main-content { margin-left: 0; }
body.xk-onb #btn-welcome-skip,
body.xk-onb #btn-welcome-coach { display: none !important; }
body.xk-onb #mp-btn-to-colleague,
body.xk-onb #mp-btn-redo { display: none !important; }
/* v3.30: #onb-btn-finish ya no se gatea por clase de body. El desmontaje del
   modo onboarding ocurre al pintar el resultado (app.js v3.60), así que la
   clase ya no está puesta cuando el botón debe verse. Lo muestra y lo oculta
   showMpResult sobre el style inline del marcado. */

.onb-col { max-width: 640px; margin: 0 auto; padding: 40px 20px 64px; }
.onb-col-wide { max-width: 760px; }
.onb-screen h1 { font-size: 26px; margin: 0 0 12px; color: var(--text-primary); }
.onb-screen h2 { font-size: 19px; margin: 24px 0 8px; color: var(--text-primary); }
.onb-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px;
  color: var(--accent); margin: 0 0 6px; }
.onb-intro { color: var(--text-secondary); line-height: 1.55; margin: 0 0 18px; }
.onb-know { margin: 14px 0 6px; color: var(--text-primary); font-weight: 600; }
.onb-list { margin: 0 0 18px; padding-left: 20px; color: var(--text-secondary); }
.onb-list li { margin: 6px 0; line-height: 1.5; }
.onb-card { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px; margin: 0 0 14px; }
.onb-hint { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; }
.onb-status { font-size: 14px; color: var(--text-secondary); margin: 10px 0 0; min-height: 1.2em; }
.onb-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; }
.onb-meter { height: 10px; border-radius: 5px; background: var(--bg-elevated);
  border: 1px solid var(--border); margin-top: 14px; overflow: hidden; }
.onb-meter-fill { height: 100%; width: 0; background: var(--accent);
  transition: width 80ms linear; }
.onb-check { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 8px;
  color: var(--text-primary); line-height: 1.45; cursor: pointer; }
.onb-check input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px;
  accent-color: var(--accent); }
.onb-links { font-size: 13px; margin: 6px 0 0; }
.onb-links a { color: var(--accent); text-decoration: underline; }
.onb-demo { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 6px; }
.onb-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-top: 12px; }
.onb-demo-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px;
  color: var(--text-secondary); }
.onb-demo-field select { background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; }
.onb-game-h { font-size: 20px; line-height: 1.45; font-weight: 600; }
.onb-game-instr { font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin: 8px 0 0; }
.onb-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0 6px; }
.onb-desc-card { display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; }
.onb-desc-card.onb-assigned { border-color: var(--border-accent); }
.onb-desc-text { flex: 1; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.onb-desc-pos { display: flex; flex-direction: column; gap: 6px; font-size: 12px;
  color: var(--text-muted); align-items: center; }
.onb-desc-pos select { background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font: inherit; min-width: 84px; }
.onb-why-text { width: 100%; background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; font: inherit;
  resize: vertical; }
.onb-modal { position: fixed; inset: 0; background: rgba(4, 10, 20, .72);
  display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.onb-modal[hidden] { display: none; }
.onb-modal-box { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; max-width: 680px; max-height: 82vh; overflow-y: auto;
  padding: 24px; }
.onb-modal-body h3 { margin-top: 0; color: var(--text-primary); }
.onb-modal-body p { color: var(--text-secondary); line-height: 1.55; }
.onb-modal-box .btn-outline { margin-top: 10px; }
@media (max-width: 640px) {
  .onb-actions { flex-direction: column-reverse; }
}

/* Retoques O2 (v3.26) */
.onb-lang { display: none; position: fixed; top: 14px; right: 16px; z-index: 150; gap: 6px; }
body.xk-onb .onb-lang { display: flex; }
body.xk-onb.xk-onb-locked .onb-lang { display: none; }
.onb-lang .lang-btn { background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 8px; padding: 6px 12px; font: inherit;
  cursor: pointer; }
.onb-lang .lang-btn.active { color: var(--text-primary); border-color: var(--accent); }
.onb-listen-btn { background: none; border: 1px solid var(--border); color: var(--accent);
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  margin-top: 10px; align-self: flex-start; }
.onb-listen-btn:hover { border-color: var(--border-accent); }
.onb-desc-body { flex: 1; display: flex; flex-direction: column; }
a.sidebar-privacy { text-decoration: none; margin-bottom: 4px; }

/* Segundo humo O2 (v3.27) */
.onb-desc-rail { flex: 0 0 96px; display: flex; flex-direction: column; gap: 12px;
  align-items: center; }
.onb-listen-big { display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border-accent);
  color: var(--accent); border-radius: 12px; padding: 12px 10px; width: 100%;
  font: inherit; font-size: 12px; cursor: pointer; }
.onb-listen-big:hover { background: var(--bg-card-hover); }
.onb-listen-big i, .onb-listen-big svg { width: 30px; height: 30px; }
.onb-desc-rail .onb-desc-pos { width: 100%; }
.onb-desc-rail .onb-desc-pos select { width: 100%; min-width: 0; }
/* Circulos de posicion del juego (v3): sustituyen al selector; derivan de
   .ck-sel-btn del test del interlocutor, mas pequenos y centrados bajo el texto. */
.onb-pos-circles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 14px; }
.onb-pos-circle { width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--text-muted); background: transparent;
  color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; cursor: pointer;
  font-family: inherit; flex-shrink: 0;
  transition: border-color .18s, color .18s, background .18s, transform .12s; }
.onb-pos-circle:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.onb-pos-circle:active { transform: scale(.94); }
.onb-pos-circle.onb-pos-on { background: var(--accent); border-color: var(--accent);
  color: #0a1616; font-weight: 600; }
.xkr-match-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 12px 0 4px; }
.xkr-match-colh { font-size: 13px; color: var(--text-muted); margin: 0 0 6px;
  text-transform: uppercase; letter-spacing: .05em; }
.xkr-match-col ol { margin: 0; padding-left: 20px; color: var(--text-secondary); }
.xkr-match-col li { margin: 3px 0; }
@media (max-width: 520px) { .xkr-match-compare { grid-template-columns: 1fr; } }

/* v3.28 (20-jul) · Etiqueta Onboarding en la fila del test fundacional
   (renderPtitRow, app.js v3.55; decisión de Ricardo: identifica el resultado
   del onboarding sin sonar provisional) */
.sess-onb-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  vertical-align: middle; opacity: .85;
}