/* ── HV Academy — el diseño del simulador en toda la app (D143) ──
   Letras: Barlow Condensed en mayúsculas para títulos y botones; la del sistema para el texto.
   Colores: los azules marinos del simulador y el amarillo HV como acento; verde = correcto, rojo = incorrecto.
   Cada curso conserva su color solo como detalle (la línea de arriba de sus tarjetas).
   Sin copos de nieve: en los menús, el logo grande de fondo; en las pantallas de pregunta, fondo liso.
   Se carga después de los estilos de cada página, así que solo cambia lo que dice aquí. */

:root {
  --hv-950: #061224; --hv-900: #0b1f3a; --hv-800: #102a4d; --hv-700: #173863; --hv-600: #22487a;
  --hv-acento: #f5b800; --hv-acento-suave: rgba(245, 184, 0, .15);
  --hv-claro: #f1f5f9; --hv-claro-2: #e2e8f0; --hv-texto-oscuro: #0b1f3a;
  --hv-verde: #22913f; --hv-rojo: #dc2626;
  --fuente-titulo: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --fuente-texto: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Los nombres que ya usan las páginas, con los colores nuevos */
  --navy: var(--hv-950); --navy2: var(--hv-900); --blue: var(--hv-600);
  --cyan: var(--hv-acento); --cyan2: #ffd24d;
  --white: #f8fafc; --silver: #cbd5e1; --muted: #94a3b8;
}

html, body { background: var(--hv-950); font-family: var(--fuente-texto); }

/* Fuera los copos; el logo de fondo, suave y fijo (no en las pantallas de pregunta) */
#canvas-bg { display: none !important; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('https://imagenes.hvacademytraining.com/hv_logo_transparent.webp?v=103ef3456717') center 55% / min(110vw, 110vh) no-repeat;
  opacity: .07;
}
body.hv-sin-marca::before { display: none; }

/* Títulos y botones con la letra del simulador */
h1, h2, h3, .header-title, .sec-title, .sec-label, .mod-title, .hero-course-name, .q-num, .exam-progress, .timer,
.opt-btn, .start-btn, .nav-btn, .res-btn, .result-score, .result-label, .stat-num, .mt-title, .intro-block h2, .mod-badge,
.upgrade-btn, .ath-title, .ath-close-btn, .prog-label {
  font-family: var(--fuente-titulo) !important; letter-spacing: .02em;
}
.header-title, .sec-title, .sec-label, .mod-title, .hero-course-name, .q-num, .opt-btn, .start-btn, .nav-btn, .res-btn,
.mt-title, .intro-block h2, .mod-badge, .upgrade-btn, .result-label { text-transform: uppercase; }

/* Barra de arriba, como la del simulador */
.header { background: var(--hv-900) !important; border-bottom: 1px solid var(--hv-700) !important; backdrop-filter: none !important; }
.header-title { font-size: 1.35rem !important; font-weight: 700 !important; line-height: 1.05; }
.header-sub { color: var(--muted) !important; }
.back-btn { background: var(--hv-800) !important; border: 1px solid var(--hv-600) !important; border-radius: 8px !important; }

/* Página del curso */
.course-hero { border-radius: 12px !important; border: 1px solid var(--hv-600); }
.hero-course-name { font-size: 1.6rem !important; font-weight: 700 !important; }
.prog-bar { background: var(--hv-800) !important; }
.prog-fill { background: var(--hv-acento) !important; box-shadow: none !important; }
.sec-title { color: var(--muted) !important; font-size: .95rem !important; font-weight: 700 !important; }
.module-card { background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important; border-radius: 12px !important; box-shadow: none !important; }
.module-card:hover { background: var(--hv-800) !important; }
.module-card::before { height: 3px !important; }
.mod-title { font-size: 1.15rem !important; font-weight: 700 !important; color: #fff !important; line-height: 1.05 !important; }
.mod-sub { color: var(--silver) !important; }
.mod-badge { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; border: none !important; }
@media (min-width: 900px) { .course-hero { height: 220px !important; } }

/* Configurar el examen */
.intro-block h2 { font-size: 2rem !important; font-weight: 700 !important; }
.intro-block h2 em { color: var(--hv-acento) !important; font-style: normal; }
.sec-label { color: var(--muted) !important; font-size: .95rem !important; }
.opt-btn { background: var(--hv-800) !important; border: 1px solid var(--hv-600) !important; color: #fff !important; border-radius: 8px !important; font-size: 1.05rem !important; font-weight: 700 !important; }
.opt-btn.active { background: var(--hv-acento-suave) !important; border-color: var(--hv-acento) !important; color: var(--hv-acento) !important; box-shadow: 0 0 0 1px var(--hv-acento) inset !important; }
.start-btn, .res-btn.primary { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; border-radius: 10px !important; box-shadow: 0 6px 18px rgba(0,0,0,.35) !important; font-size: 1.25rem !important; font-weight: 700 !important; }

/* La pregunta: cabe en una pantalla, con los botones siempre abajo */
body.hv-en-pregunta { height: 100dvh; overflow: hidden; }
body.hv-en-pregunta .page { height: 100dvh; display: flex; flex-direction: column; padding-bottom: 0 !important; }
body.hv-en-pregunta #exam-screen { display: flex !important; flex-direction: column; flex: 1; min-height: 0; }
body.hv-en-pregunta #exam-screen > .options { flex: 1; min-height: 0; overflow-y: auto; }
body.hv-en-pregunta .exam-nav { flex: none; padding-bottom: max(env(safe-area-inset-bottom), 12px) !important; background: var(--hv-950); }
.exam-topbar { background: var(--hv-900) !important; border-bottom: 1px solid var(--hv-700); }
.timer { color: var(--hv-acento) !important; font-size: 1.3rem !important; font-weight: 700 !important; }
.exam-progress { color: #fff !important; font-size: 1.2rem !important; font-weight: 700 !important; }
.exam-prog-bar { background: var(--hv-800) !important; }
.exam-prog-fill { background: var(--hv-acento) !important; box-shadow: none !important; }
.map-toggle { background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important; border-radius: 10px !important; }
.q-card { background: var(--hv-claro) !important; border: none !important; border-radius: 12px !important; box-shadow: none !important; color: var(--hv-texto-oscuro) !important; }
.q-card::before { display: none !important; }
.q-num { color: #475569 !important; font-size: 1rem !important; font-weight: 700 !important; }
.q-num::before { display: none !important; }
.q-text { color: var(--hv-texto-oscuro) !important; font-family: var(--fuente-texto) !important; font-weight: 700 !important; }
.opt { background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important; border-radius: 10px !important; box-shadow: none !important; }
.opt-letter { background: var(--hv-800) !important; border: 1px solid var(--hv-600) !important; color: var(--hv-acento) !important; font-family: var(--fuente-titulo) !important; font-weight: 700 !important; font-size: 1.1rem !important; }
.opt-text { color: #fff !important; font-family: var(--fuente-texto) !important; }
.opt.selected { background: var(--hv-acento-suave) !important; border-color: var(--hv-acento) !important; box-shadow: 0 0 0 1px var(--hv-acento) inset !important; }
.opt.selected .opt-letter { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; border-color: var(--hv-acento) !important; }
.nav-btn { border-radius: 10px !important; font-size: 1.2rem !important; font-weight: 700 !important; }
.btn-prev, .btn-flag { background: var(--hv-800) !important; border: 1px solid var(--hv-600) !important; color: #fff !important; }
.btn-flag.active { border-color: var(--hv-acento) !important; color: var(--hv-acento) !important; }
.btn-next { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; box-shadow: none !important; }

/* El mapa cerrado no deja espacio; preguntas y opciones más juntas en el teléfono */
.map-panel:not(.open) { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; border-width: 0 !important; }
body.hv-en-pregunta .q-card { margin-top: 12px !important; padding: 16px 18px !important; }
body.hv-en-pregunta .options { gap: 8px !important; padding-top: 10px !important; padding-bottom: 6px !important; }
body.hv-en-pregunta .opt { padding: 12px 14px !important; }
body.hv-en-pregunta .exam-nav { padding-top: 10px !important; }

/* Computadora: la pregunta a la izquierda y las opciones a la derecha, todo a la vista */
@media (min-width: 900px) {
  body.hv-en-pregunta .page { max-width: 1120px !important; }
  body.hv-en-pregunta #exam-screen { display: grid !important; grid-template-columns: 1fr 1.15fr; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; column-gap: 18px; }
  body.hv-en-pregunta #exam-screen > * { grid-column: 1 / -1; }
  body.hv-en-pregunta #exam-screen > .q-card { grid-column: 1; grid-row: 5; align-self: start; margin-right: 0 !important; margin-top: 16px !important; padding: 22px 24px !important; }
  body.hv-en-pregunta #exam-screen > .options { grid-column: 2; grid-row: 5; padding-left: 0 !important; padding-top: 16px !important; overflow-y: auto; }
  body.hv-en-pregunta #exam-screen > .exam-nav { grid-row: 6; }
  body.hv-en-pregunta .q-text { font-size: 1.35rem !important; line-height: 1.35 !important; }
}

/* Pantallas bajas: todo un poco más junto para que quepa */
@media (max-height: 760px) {
  body.hv-en-pregunta .header { padding-top: max(env(safe-area-inset-top), 10px) !important; padding-bottom: 8px !important; }
  body.hv-en-pregunta .map-toggle { margin-top: 8px !important; margin-bottom: 8px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  body.hv-en-pregunta .q-card { margin-top: 8px !important; padding: 14px 16px !important; }
  body.hv-en-pregunta .q-text { font-size: 1.05rem !important; line-height: 1.35 !important; }
  body.hv-en-pregunta .opt { padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* Resultado */
.result-card { background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important; border-radius: 14px !important; }
.result-score { color: var(--hv-acento) !important; }
.res-btn.secondary, .res-btn.review { background: var(--hv-800) !important; border: 1px solid var(--hv-600) !important; color: #fff !important; }

/* ════════════ Las demás páginas (D143) ════════════ */

/* Más títulos con la letra del simulador */
.topbar-title, .greeting-name, .ccard-title, .ccard-badge, .profile-name, .curso-name, .mstat-val, .menu-title, .stat-val,
.streak-num, .hist-course, .hist-score, .empty-title, .epa-name, .epa-btn, .epa-num, .question, .topic-name, .change-topic,
.reveal-btn, .answer-label, .exp-label, .complete-title, .complete-btn, .stat-num, .revalida-title, .rule-text strong,
.rev-num, .sum-title, .ss-num, .act-btn, .mp-btn, .mp-name, .name-label, .img-name, .section-title, .edu-badge, .topic-pill,
.prog-pct, .prog-pct-big, .logout-btn, .nav-item, .auth-title, .auth-logo-title, .btn-primary, .btn-ghost, .course-title,
.course-badge, .hero-h1, .section-tag, .sol-title, .step-title, .faq-q, .sim-card span, .hstat-n {
  font-family: var(--fuente-titulo) !important; letter-spacing: .02em;
}
.topbar-title, .ccard-title, .ccard-badge, .curso-name, .menu-title, .hist-course, .empty-title, .epa-name, .epa-btn,
.topic-name, .change-topic, .reveal-btn, .answer-label, .exp-label, .complete-title, .complete-btn, .revalida-title,
.rev-num, .sum-title, .act-btn, .mp-btn, .name-label, .section-title, .edu-badge, .logout-btn, .nav-item, .auth-title,
.auth-logo-title, .btn-primary, .btn-ghost, .course-title, .course-badge, .section-tag, .sol-title, .step-title {
  text-transform: uppercase;
}
.greeting-name em, .intro-block h2 em, .auth-title em, h2 em, .hero-h1 em { color: var(--hv-acento) !important; font-style: normal; }

/* Tarjetas y listas: el azul marino del simulador con borde fino */
.ccard, .curso-card, .mstat, .menu-item, .stat-card, .streak-card, .chart-section, .hist-item, .epa-card, .topic-card,
.rev-card, .summary, .complete-card, .rule, .revalida-hero, .admin-banner, .upgrade-card, .sol-card, .faq-item, .step {
  border-radius: 12px !important; box-shadow: none !important;
}
.curso-card, .mstat, .menu-item, .stat-card, .streak-card, .chart-section, .hist-item, .topic-card, .rev-card, .summary,
.complete-card, .rule, .revalida-hero, .sol-card, .faq-item {
  background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important;
}
.topic-card:hover, .menu-item:hover { background: var(--hv-800) !important; }
.topic-icon, .stat-icon, .menu-icon, .curso-icon, .rule-icon, .mod-icon { border-radius: 8px !important; }
.topic-count, .menu-sub, .hist-meta, .stat-lbl, .mstat-lbl, .ccard-sub, .curso-label { color: var(--silver) !important; }

/* Barra de arriba de inicio, perfil y progreso */
.topbar { background: var(--hv-900) !important; border-bottom: 1px solid var(--hv-700) !important; backdrop-filter: none !important; }
.topbar-title { font-size: 1.35rem !important; font-weight: 700 !important; }
.greeting-name { font-size: 1.9rem !important; font-weight: 700 !important; }
.sec-title { font-family: var(--fuente-titulo) !important; text-transform: uppercase; }

/* Inicio: tarjetas de cursos; en la computadora, las cinco en una fila */
.ccard { border: 1px solid var(--hv-600) !important; }
.ccard-title { font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.05 !important; }
.ccard-badge.active-badge, .badge-available { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; }
.cpfill { background: var(--hv-acento) !important; }
@media (min-width: 900px) { .courses-grid { grid-template-columns: repeat(5, 1fr) !important; } }

/* Barra de abajo (Inicio · Progreso · Perfil): como la del simulador y sin tapar el contenido */
.bottom-nav { background: var(--hv-900) !important; border-top: 1px solid var(--hv-700) !important; backdrop-filter: none !important; }
.nav-item { color: var(--muted) !important; font-size: .8rem !important; font-weight: 700 !important; }
.nav-item.active { color: var(--hv-acento) !important; }
.nav-item.active svg { stroke: var(--hv-acento) !important; }
body:has(.bottom-nav) .page { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

/* Perfil y progreso */
.avatar, .avatar-ring { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; }
.profile-name { font-size: 1.8rem !important; font-weight: 700 !important; }
.mstat-val, .stat-val { color: var(--hv-acento) !important; font-weight: 700 !important; }
.bar-track { background: var(--hv-800) !important; }
.logout-btn { border-radius: 10px !important; }
@media (min-width: 900px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* EPA 608/609: tarjetas sin espacio vacío */
.epa-card { border: 1px solid var(--hv-600) !important; background: var(--hv-900) !important; }
.epa-img { aspect-ratio: 4 / 3 !important; height: auto !important; object-fit: cover !important; }
.epa-btn { border-radius: 8px !important; font-size: 1.05rem !important; }

/* Estudio guiado e identificar imágenes: lista de temas */
.intro-block h2, .section-title { font-weight: 700 !important; }
.topic-name { font-size: 1.1rem !important; font-weight: 700 !important; color: #fff !important; line-height: 1.05 !important; }
.topic-card.mixed { background: var(--hv-800) !important; border-color: var(--hv-acento) !important; }

/* «En orden / Aleatorio»: una ventanita encima, con el fondo oscurecido, en vez de un panel al final */
#mode-picker[style*="block"] {
  position: fixed !important; z-index: 200 !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 32px)) !important; margin: 0 !important; background: var(--hv-900) !important;
  border: 1px solid var(--hv-600) !important; border-radius: 14px !important; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .65), 0 20px 50px rgba(0,0,0,.5) !important;
}
#mode-picker button { border-radius: 10px !important; }
#mode-picker #mp-order, #mode-picker .mp-btn.order { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; border-color: var(--hv-acento) !important; }
#mode-picker #mp-random, #mode-picker .mp-btn.random { background: var(--hv-800) !important; color: #fff !important; border: 1px solid var(--hv-600) !important; }
#mode-picker #mp-order *, #mode-picker #mp-random * { color: inherit !important; }

/* Estudio guiado: la pregunta cabe en una pantalla; la respuesta y la explicación se leen en el medio */
body.hv-en-pregunta #question-screen { display: flex !important; flex-direction: column; flex: 1; min-height: 0; }
body.hv-en-pregunta #q-wrap:not([style*="none"]) { display: flex !important; flex-direction: column; flex: 1; min-height: 0; }
body.hv-en-pregunta #q-wrap > .answer-wrap { flex: 1; min-height: 0; overflow-y: auto; }
body.hv-en-pregunta #q-wrap > .nav-btns { flex: none; padding-top: 10px !important; padding-bottom: max(env(safe-area-inset-bottom), 12px) !important; }
body.hv-en-pregunta .topic-pill-bar { padding-top: 10px !important; }
body.hv-en-pregunta .prog-wrap { padding-top: 8px !important; }
.reveal-btn { background: var(--hv-800) !important; border: 1px solid var(--hv-acento) !important; color: var(--hv-acento) !important; border-radius: 10px !important; font-size: 1.15rem !important; font-weight: 700 !important; }
.answer-card { background: rgba(34, 145, 63, .15) !important; border: 1px solid var(--hv-verde) !important; border-radius: 12px !important; }
.answer-label { color: #4ade80 !important; }
.answer-text { color: #fff !important; font-weight: 700 !important; }
.explanation-card { background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important; border-radius: 12px !important; }
.exp-label { color: var(--hv-acento) !important; }
.change-topic, .topic-pill { border-radius: 8px !important; }
.topic-pill { background: var(--hv-800) !important; border: 1px solid var(--hv-600) !important; color: #fff !important; }
.complete-btn.primary { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; border: none !important; }
.complete-btn.secondary { background: var(--hv-800) !important; color: #fff !important; border: 1px solid var(--hv-600) !important; }
@media (min-width: 900px) {
  body.hv-en-pregunta .page { max-width: 1120px !important; }
  body.hv-en-pregunta #q-wrap:not([style*="none"]) { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; column-gap: 18px; }
  body.hv-en-pregunta #q-wrap > .q-card { grid-column: 1; grid-row: 1; align-self: start; }
  body.hv-en-pregunta #q-wrap > .answer-wrap { grid-column: 2; grid-row: 1; padding-top: 22px; }
  body.hv-en-pregunta #q-wrap > .nav-btns { grid-column: 1 / -1; grid-row: 2; }
}

/* Identificar imágenes con los colores del simulador */
.img-card { background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important; border-radius: 12px !important; box-shadow: none !important; }
.img-area { background: var(--hv-800) !important; }
.img-area::before { display: none !important; }
.name-card { background: var(--hv-claro) !important; border: none !important; border-radius: 12px !important; }
.name-label { color: #475569 !important; }
.img-name { color: var(--hv-texto-oscuro) !important; font-size: 1.35rem !important; font-weight: 700 !important; }
.img-desc { color: #1e293b !important; }
.img-ref { color: #475569 !important; border-top-color: #cbd5e1 !important; }
.edu-badge { background: var(--hv-acento-suave) !important; color: var(--hv-acento) !important; border-color: var(--hv-acento) !important; border-radius: 8px !important; }
.prog-pct { color: var(--hv-acento) !important; }

/* Examen de reválida (las mismas piezas que el de práctica) */
.revalida-hero { border-color: var(--hv-acento) !important; }
.revalida-title { font-size: 1.8rem !important; font-weight: 700 !important; }

/* Revisión de respuestas */
.rev-card { overflow: hidden; }
.rev-q { color: #fff !important; font-weight: 700 !important; }
.act-btn { border-radius: 10px !important; font-size: 1.1rem !important; }

/* Login, registro y contraseña */
.auth-card { background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important; border-radius: 14px !important; backdrop-filter: none !important; box-shadow: 0 20px 50px rgba(0,0,0,.5) !important; }
.auth-title { font-size: 2rem !important; font-weight: 700 !important; }
.auth-logo-title { color: var(--hv-acento) !important; font-size: 1rem !important; }
.btn-primary { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; border-radius: 10px !important; font-size: 1.2rem !important; font-weight: 700 !important; box-shadow: none !important; }
.btn-primary::after { display: none !important; }
.btn-ghost { border-radius: 10px !important; }
.field input, .field select { background: var(--hv-950) !important; border: 1px solid var(--hv-600) !important; border-radius: 8px !important; }
.field input:focus, .field select:focus { border-color: var(--hv-acento) !important; box-shadow: 0 0 0 3px var(--hv-acento-suave) !important; }
.field label { font-family: var(--fuente-titulo) !important; font-size: .95rem !important; letter-spacing: .04em !important; }
.auth-link-row a { color: var(--hv-acento) !important; }

/* Landing */
.hero-h1 { font-weight: 700 !important; text-transform: uppercase; line-height: .95 !important; }
.section-tag { background: var(--hv-acento-suave) !important; color: var(--hv-acento) !important; border: 1px solid rgba(245,184,0,.4) !important; border-radius: 8px !important; }
.course-card { border-radius: 12px !important; border: 1px solid var(--hv-600) !important; }
.course-title, .sol-title, .step-title { font-weight: 700 !important; }
.course-title { font-size: 1.15rem !important; }
.btn-secondary { border-radius: 10px !important; font-family: var(--fuente-titulo) !important; text-transform: uppercase; }
.step-num { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; font-family: var(--fuente-titulo) !important; }
.hstat-n { color: var(--hv-acento) !important; font-weight: 700 !important; }

/* Botones que quedaban con el degradado azul */
.act-btn.primary, .empty-btn, .nav-cta { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; box-shadow: none !important; border-radius: 10px !important; font-family: var(--fuente-titulo) !important; text-transform: uppercase; font-weight: 700 !important; }
.act-btn.secondary { background: var(--hv-800) !important; border: 1px solid var(--hv-600) !important; color: #fff !important; }
.empty-state { background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important; border-radius: 12px !important; }

/* ── Avisos y confirmaciones (D144): un solo modelo para toda la app ── */
.hv-dialogo-fondo, #abandon-overlay[style*="flex"] { position: fixed; inset: 0; z-index: 300; background: rgba(6, 18, 36, .8) !important; backdrop-filter: none !important;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.hv-dialogo, #abandon-overlay > div { width: min(400px, 100%) !important; background: var(--hv-900) !important; border: 1px solid var(--hv-600) !important;
  border-radius: 14px !important; padding: 22px 20px !important; box-shadow: 0 20px 50px rgba(0,0,0,.55) !important; text-align: center; animation: none !important; }
.hv-dialogo-titulo, #abandon-overlay > div > div:nth-child(2) { font-family: var(--fuente-titulo) !important; font-weight: 700 !important; font-size: 1.6rem !important;
  text-transform: uppercase; color: #fff !important; line-height: 1.05; margin-bottom: 8px; }
.hv-dialogo-texto, #abandon-msg { font-family: var(--fuente-texto); color: var(--silver) !important; font-size: .95rem; line-height: 1.5; margin-bottom: 20px !important; }
.hv-dialogo-botones, #abandon-overlay > div > div:last-child { display: flex; flex-direction: column; gap: 10px; }
.hv-dialogo-btn, #abandon-overlay button { padding: 14px !important; border-radius: 10px !important; font-family: var(--fuente-titulo) !important; font-weight: 700 !important;
  font-size: 1.15rem !important; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; }
.hv-dialogo-btn.principal, #abandon-overlay button:last-child { background: var(--hv-acento) !important; color: var(--hv-texto-oscuro) !important; border: none !important; }
.hv-dialogo-btn.peligro, #abandon-overlay button:first-child { background: var(--hv-rojo) !important; color: #fff !important; border: none !important; }
.hv-dialogo-btn.secundario { background: var(--hv-800) !important; color: #fff !important; border: 1px solid var(--hv-600) !important; }
/* El botón ‹ de la barra de arriba igual en todas las páginas, también durante el examen */
.back-btn svg, .back-btn svg * { stroke: #fff !important; }