/* =====================================================================
   Simulador PL-300 — estética de marca NamasData
   Paleta tomada de www.namasdata.com: negro #0a0a0a, blanco, crema #fafaf7,
   amarillo de marca #fbdb5b. Tipografía Poppins. Esquinas redondeadas, píldoras.
   Disposición tipo examen OnVUE (Pearson VUE) con la identidad NamasData.
   Cabecera OnVUE, rail de herramientas, área de respuesta, anexos, navegador
   de preguntas, pantalla de revisión, modos práctica/simulacro y temas de color.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --nd-black:    #0a0a0a;   /* negro de marca (barras, texto) */
  --nd-ink:      #1f1f1f;   /* texto fuerte secundario */
  --nd-white:    #ffffff;
  --nd-cream:    #fafaf7;   /* fondo cálido */
  --nd-cream2:   #f6f6f4;   /* fondo de cabeceras de tabla / zonas */
  --nd-border:   #e3e3e3;   /* bordes suaves */
  --nd-muted:    #6b6b6b;   /* texto tenue */
  --nd-yellow:   #fbdb5b;   /* amarillo de marca */
  --nd-yellow-d: #f0c92e;   /* amarillo para hover */
  --nd-yellow-soft: rgba(251,219,91,0.14);
  --nd-blue:     #2f6fd1;   /* azul OnVUE: solo donde aporta realismo funcional */
  --nd-blue-soft: rgba(47,111,209,0.10);
  --ok:   #1a7f4b;
  --ko:   #c0392b;
  --flag: #b8860b;
  --shadow: 0 2px 8px rgba(10,10,10,0.06);
  --page-bg: var(--nd-cream);
  --card-bg: var(--nd-white);
  --text:    var(--nd-black);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--page-bg);
  color: var(--text);
  font-family: 'Poppins', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 15px; line-height: 1.55;
}

/* ===================================================================
   Temas de color (rail → "Esquema de color"). Conmutan variables.
   =================================================================== */
body[data-theme="contraste"] {
  --page-bg: #ffffff; --card-bg: #ffffff; --text: #000000;
  --nd-cream: #ffffff; --nd-cream2: #efefef; --nd-border: #9a9a9a; --nd-muted: #333333;
}
body[data-theme="contraste"] .panel,
body[data-theme="contraste"] .case-panel { box-shadow: none; border-width: 2px; }
body[data-theme="noche"] {
  --page-bg: #15171a; --card-bg: #1f2329; --text: #f1f1ee;
  --nd-cream: #232830; --nd-cream2: #2a3038; --nd-border: #3a414b; --nd-muted: #aab2bd;
  --nd-ink: #e8e8e4; --shadow: 0 2px 10px rgba(0,0,0,.4);
}
body[data-theme="noche"] table.data th,
body[data-theme="noche"] table.yesno th { color: var(--text); }
body[data-theme="noche"] .demo-banner { color: #f4e6a8; }

/* ===================================================================
   1) Barra superior (negra, marca + modo práctica/simulacro)
   =================================================================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--nd-black); color: var(--nd-white);
  padding: 0 18px; height: 50px;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.topbar .brand b { font-weight: 800; }
.topbar .brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--nd-yellow); }
.topbar .topbar-mid { font-size: 13.5px; color: #cfcfcf; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.topbar .topbar-right { display: flex; align-items: center; gap: 10px; }

/* Conmutador Práctica / Simulacro */
.mode-switch { display: inline-flex; background: #1c1c1c; border: 1px solid #333; border-radius: 999px; padding: 3px; }
.mode-switch button {
  border: none; background: none; color: #cfcfcf; font-family: inherit; font-weight: 700; font-size: 12.5px;
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
}
.mode-switch button.active { background: var(--nd-yellow); color: var(--nd-black); }
.mode-hint { font-size: 11px; color: #8f8f8f; }

/* ===================================================================
   2) Cabecera del examen estilo OnVUE (negra, filo amarillo): 3 zonas
   =================================================================== */
.examheader {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: #141414; color: var(--nd-white);
  padding: 8px 18px; border-bottom: 3px solid var(--nd-yellow);
}
.eh-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eh-collapse {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid #3a3a3a; background: #161616;
  color: var(--nd-yellow); cursor: pointer; font-size: 15px; line-height: 1; font-family: inherit;
}
.eh-collapse:hover { background: #222; }
.eh-collapse.hidden-soft { visibility: hidden; }
.eh-qtitle { font-weight: 700; font-style: normal; font-size: 16px; white-space: nowrap; }

.eh-mid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.case-progress { display: none; align-items: center; gap: 9px; background: #161616; border: 1px solid #2c2c2c; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: #e7e7e7; }
.case-progress.on { display: inline-flex; }
.case-progress .seg { display: inline-flex; gap: 3px; }
.case-progress .seg i { width: 16px; height: 6px; border-radius: 3px; background: #444; display: inline-block; }
.case-progress .seg i.done { background: var(--nd-yellow); }
.case-progress .seg i.here { background: var(--nd-white); }

.eh-tab {
  border: 1px solid #3a3a3a; background: #161616; color: #eaeaea; font-family: inherit; font-weight: 600; font-size: 12.5px;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.eh-tab:hover { border-color: var(--nd-yellow); color: var(--nd-yellow); }

.eh-right { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.eh-time-label { font-size: 10.5px; letter-spacing: .08em; color: #b8b8b8; font-weight: 700; }
.eh-clock {
  background: #161616; border: 1px solid #333; border-radius: 999px; padding: 5px 14px;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--nd-yellow); font-size: 15px; letter-spacing: .02em;
}
.eh-clock.low { color: #ff8a7a; border-color: #5e2a23; animation: pulseLow 1s steps(2) infinite; }
.eh-clock.unlimited { color: #cfcfcf; border-color: #333; }   /* práctica: "Sin límite" en gris, no amarillo */
@keyframes pulseLow { 50% { opacity: .55; } }

@media (max-width: 820px){
  .examheader { grid-template-columns: 1fr; row-gap: 8px; }
  .eh-right { justify-content: flex-start; }
}

/* ===================================================================
   3) Cuerpo del examen: rail de herramientas + escenario
   =================================================================== */
.exam-body { display: flex; align-items: stretch; }
.toolrail {
  flex: 0 0 56px; background: #111; border-right: 1px solid #2a2a2a;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0;
  position: sticky; top: 0; align-self: flex-start; min-height: calc(100vh - 50px);
}
.toolrail .tool {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid #2c2c2c; background: #1a1a1a;
  color: #e7e7e7; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
  font-family: inherit; position: relative;
}
.toolrail .tool:hover { background: #262626; border-color: var(--nd-yellow); color: var(--nd-yellow); }
.toolrail .tool.active { background: var(--nd-yellow); color: var(--nd-black); border-color: var(--nd-yellow); }
.toolrail .tool .lbl { display: none; }
.toolrail .sep { width: 26px; height: 1px; background: #2c2c2c; margin: 4px 0; }
@media (max-width: 640px){
  .exam-body { flex-direction: column; }
  .toolrail { flex-direction: row; flex-wrap: wrap; min-height: 0; width: 100%; border-right: none; border-bottom: 1px solid #2a2a2a; position: static; justify-content: center; }
}

.stage { flex: 1 1 auto; max-width: 1080px; margin: 0 auto; padding: 18px; width: 100%; }

/* Modo resaltar activo: cursor de texto sobre las zonas resaltables */
body.highlight-mode .prompt, body.highlight-mode .case-body, body.highlight-mode .annex-pane { cursor: text; }
mark.nd-hl { background: var(--nd-yellow); color: var(--nd-black); padding: 0 1px; border-radius: 2px; }

/* ===================================================================
   Tarjetas / layout de la pregunta
   =================================================================== */
.panel {
  background: var(--card-bg); border: 1px solid #eaeaea;
  border-radius: 8px; padding: 22px 26px; box-shadow: none;
}
.split { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.split.with-case { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
.split.case-collapsed { grid-template-columns: minmax(0,1fr); }
.split.case-collapsed .case-panel { display: none; }
@media (max-width: 900px){ .split.with-case { grid-template-columns: minmax(0,1fr); } }

/* Pestañas de anexos dentro de la pregunta (Pregunta / Ejemplo / …) */
.annex-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 14px; border-bottom: 1px solid var(--nd-border); padding-bottom: 0; }
.annex-tab {
  border: 1px solid var(--nd-border); border-bottom: none; background: var(--nd-cream2); color: var(--nd-muted);
  font-family: inherit; font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 10px 10px 0 0; cursor: pointer;
  position: relative; top: 1px;
}
.annex-tab.active { background: var(--card-bg); color: var(--nd-black); border-color: var(--nd-border); box-shadow: inset 0 3px 0 var(--nd-yellow); }
.annex-pane.hidden { display: none; }
.annex-img { max-width: 100%; border: 1px solid var(--nd-border); border-radius: 10px; }
.annex-placeholder {
  border: 2px dashed var(--nd-border); border-radius: 12px; background: var(--nd-cream);
  padding: 22px; color: var(--nd-muted); font-size: 14px; text-align: center;
}
.annex-placeholder .ph-icon { font-size: 30px; display: block; margin-bottom: 8px; }
.annex-placeholder .ph-cap { margin-top: 10px; font-size: 13px; color: var(--nd-ink); text-align: left; background: var(--nd-white); border: 1px solid var(--nd-border); border-radius: 8px; padding: 10px 12px; }
body[data-theme] .annex-placeholder .ph-cap { background: var(--card-bg); }

/* ===================================================================
   Texto de la pregunta
   =================================================================== */
.prompt { margin: 0 0 14px; }
.prompt p { margin: 0 0 10px; }
.instructions {
  background: var(--nd-yellow-soft); border-left: 4px solid var(--nd-yellow);
  padding: 9px 13px; margin: 12px 0; font-size: 14px; color: var(--nd-ink); border-radius: 0 8px 8px 0;
}
.note-required { font-weight: 700; color: var(--nd-black); }

table.data { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13.5px; }
table.data th, table.data td { border: 1px solid var(--nd-border); padding: 6px 10px; text-align: left; }
table.data th { background: var(--nd-cream2); }

pre.code, code.inline { font-family: 'Cascadia Code', Consolas, 'Courier New', monospace; }
pre.code {
  background: #141414; color: #f2f2f2; padding: 13px 15px; border-radius: 10px;
  overflow-x: auto; font-size: 13.5px; line-height: 1.6;
}

/* Etiqueta "Área de respuesta" (estructura OnVUE para desplegables / orden / sí-no) */
.answer-area { margin-top: 14px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; background: var(--card-bg); }
.answer-area > .aa-head { background: var(--nd-cream2); border-bottom: 1px solid var(--nd-border); padding: 7px 13px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--nd-muted); }
.answer-area > .aa-body { padding: 14px 15px; }

/* ===================================================================
   Opciones (radio / checkbox) + tachado (eliminar opción)
   =================================================================== */
.options { list-style: none; margin: 6px 0 0; padding: 0; }
.options li { border: 1px solid #eaeaea; border-radius: 8px; margin: 9px 0; display: flex; align-items: stretch; }
.options li > label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 15px; cursor: pointer; flex: 1 1 auto; }
.options li > label:hover { background: var(--nd-cream); }
.options input { margin-top: 3px; transform: scale(1.15); accent-color: var(--nd-black); }
.options .opt-label { font-weight: 700; color: var(--nd-muted); min-width: 18px; }
.options li.sel { border-color: var(--nd-yellow); background: var(--nd-yellow-soft); box-shadow: 0 0 0 1px var(--nd-yellow); }
.options li.correct { border-color: var(--ok); background: #ecf7f0; }
.options li.wrong   { border-color: var(--ko); background: #fbeeec; }
.verdict-tag { margin-left: auto; font-size: 12px; font-weight: 700; white-space: nowrap; }
.verdict-tag.ok { color: var(--ok); }
.verdict-tag.ko { color: var(--ko); }
/* botón de tachar por opción */
.opt-strike { flex: 0 0 auto; align-self: center; width: 30px; margin-right: 8px; border: 1px solid var(--nd-border); background: var(--card-bg); color: var(--nd-muted); border-radius: 7px; height: 28px; cursor: pointer; font-size: 13px; font-family: inherit; }
.opt-strike:hover { border-color: var(--ko); color: var(--ko); }
.options li.struck { opacity: .5; }
.options li.struck > label .opt-text, .options li.struck > label .opt-label { text-decoration: line-through; }
.options li.struck .opt-strike { color: var(--ko); border-color: var(--ko); background: #fbeeec; }

/* ===================================================================
   Desplegables en plantilla (DAX/M)
   =================================================================== */
select.dd {
  font-family: 'Cascadia Code', Consolas, monospace; font-size: 13.5px;
  padding: 3px 7px; border: 2px solid var(--nd-yellow); border-radius: 7px;
  background: #fffdf2; color: var(--nd-black); margin: 2px 0;
}
select.dd.correct { border-color: var(--ok); background: #ecf7f0; }
select.dd.wrong   { border-color: var(--ko); background: #fbeeec; }
.dd-legend { font-size: 13px; color: var(--nd-muted); margin-top: 10px; }

/* ===================================================================
   Sí / No
   =================================================================== */
table.yesno { border-collapse: collapse; width: 100%; }
table.yesno th, table.yesno td { border: 1px solid var(--nd-border); padding: 11px 13px; }
table.yesno th { background: var(--nd-cream2); }
table.yesno td.choice { text-align: center; width: 70px; }
table.yesno td.choice input { accent-color: var(--nd-black); }
table.yesno tr.correct-row { background: #ecf7f0; }
table.yesno tr.wrong-row   { background: #fbeeec; }

/* ===================================================================
   Arrastrar y ordenar
   =================================================================== */
.order-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px){ .order-wrap { grid-template-columns: 1fr; } }
.order-col h4 { margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; color: var(--nd-muted); letter-spacing: .04em; }
.order-list { min-height: 60px; border: 1px dashed var(--nd-border); border-radius: 12px; padding: 7px; background: var(--nd-cream); }
.order-list.answer { border-style: solid; background: var(--nd-yellow-soft); }
.order-item {
  display: flex; align-items: center; gap: 8px; background: var(--card-bg);
  border: 1px solid var(--nd-border); border-radius: 10px; padding: 10px 12px; margin: 6px 0; cursor: grab;
}
.order-item .grip { color: var(--nd-muted); cursor: grab; }
.order-item .pos  { font-weight: 800; color: var(--nd-black); min-width: 18px; }
.order-item.dragging { opacity: .5; }
.order-item .movebtns { margin-left: auto; display: flex; gap: 4px; }
.order-item .movebtns button { border: 1px solid var(--nd-border); background: var(--card-bg); border-radius: 6px; width: 27px; height: 25px; cursor: pointer; font-family: inherit; }
.order-item .movebtns button:hover { background: var(--nd-yellow-soft); border-color: var(--nd-yellow); }
.order-item.correct { border-color: var(--ok); background: #ecf7f0; }
.order-item.wrong   { border-color: var(--ko); background: #fbeeec; }

/* ===================================================================
   Caso práctico (panel con pestañas)
   =================================================================== */
.case-panel { border: 1px solid #eaeaea; border-radius: 8px; background: var(--card-bg); box-shadow: none; overflow: hidden; align-self: start; }
.case-panel .case-title { background: var(--nd-black); color: var(--nd-white); font-weight: 700; font-size: 13px; padding: 9px 14px; display: flex; align-items: center; gap: 8px; }
.case-panel .case-title .ic { color: var(--nd-yellow); }
.case-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; background: var(--nd-cream2); padding: 8px 8px 0; border-bottom: 1px solid var(--nd-border); }
.case-tab { border: 1px solid var(--nd-border); border-bottom: none; background: var(--nd-cream); padding: 7px 11px; border-radius: 6px 6px 0 0; font-size: 12.5px; cursor: pointer; color: var(--nd-muted); font-family: inherit; white-space: nowrap; }
.case-tab.active { background: var(--card-bg); color: var(--nd-black); font-weight: 700; box-shadow: inset 0 3px 0 var(--nd-yellow); }
.case-body { padding: 18px 22px; max-height: 540px; overflow-y: auto; font-size: 14px; }
.case-body h3 { margin-top: 0; }

/* ===================================================================
   Herramientas de pregunta (restablecer / marcar para revisar)
   =================================================================== */
.qtools { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--nd-border); flex-wrap: wrap; }
.flag-toggle { display: flex; align-items: center; gap: 7px; color: var(--flag); cursor: pointer; user-select: none; font-size: 14px; }
.flag-toggle input { accent-color: var(--flag); }
.btn-reset {
  display: inline-flex; align-items: center; gap: 7px; background: #2b2b2b; border: 1px solid #2b2b2b; color: #fff;
  cursor: pointer; font-size: 13px; font-family: inherit; padding: 7px 14px; border-radius: 999px;
}
.btn-reset:hover { background: #3a3a3a; }
.btn-reset .ic { display: inline-block; }
body[data-theme="noche"] .btn-reset { background: #3a414b; border-color: #3a414b; }

/* ===================================================================
   Barra inferior de navegación
   =================================================================== */
.navbar {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--card-bg); border-top: 1px solid var(--nd-border); padding: 11px 18px; margin-top: 0;
}
.nav-left { display: flex; gap: 8px; }
.nav-mid { font-size: 13px; color: var(--nd-muted); text-align: center; flex: 1 1 auto; }
.nav-right { display: flex; gap: 8px; justify-content: flex-end; }
.btn {
  border: 1.5px solid var(--nd-black); background: var(--nd-black); color: var(--nd-white);
  padding: 9px 20px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700;
  font-family: inherit; transition: filter .15s, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { filter: brightness(1.25); }
.btn.secondary { background: var(--card-bg); color: var(--text); border-color: #d0d0d0; border-width: 1px; }
.btn.secondary:hover { background: var(--nd-cream); filter: none; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
/* CTA principal (amarillo de marca con texto negro) */
.btn.review, .btn.cta { background: var(--nd-yellow); border-color: var(--nd-yellow); color: var(--nd-black); }
.btn.review:hover, .btn.cta:hover { background: var(--nd-yellow-d); border-color: var(--nd-yellow-d); filter: none; }
.toolrail .tool, .options li, .options li > label, .eh-tab, .case-tab, .annex-tab, .mode-switch button { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

/* ===================================================================
   Píldoras / banner demo / solución
   =================================================================== */
.demo-banner { background: var(--nd-yellow-soft); border-bottom: 1px solid var(--nd-yellow); color: #5a4a00; padding: 8px 18px; font-size: 13px; text-align: center; }
.taught-pill { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 11px; margin-left: 0; vertical-align: middle; }
.taught-pill.no_explicada { background: #fdeaea; color: var(--ko); }
.taught-pill.parcial      { background: #fff3df; color: var(--flag); }
.taught-pill.explicada    { background: #e9f6ee; color: var(--ok); }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 0 0 12px; }
.meta-pill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--nd-cream2); color: var(--nd-muted); border: 1px solid var(--nd-border); }

.solution { margin-top: 16px; border: 1px solid var(--ok); border-radius: 12px; background: #f3faf5; padding: 15px 17px; }
.solution h4 { margin: 0 0 8px; color: var(--ok); }
.solution .sources { font-size: 13px; margin-top: 10px; }
.solution a { color: var(--nd-ink); }
body[data-theme="noche"] .solution { background: #1c2b22; }
body[data-theme="noche"] .options li.correct { background: #1c2b22; }
body[data-theme="noche"] .options li.wrong { background: #2c1d1c; }
.hidden { display: none !important; }

/* ===================================================================
   Overlays (Preguntas / Revisar / Calculadora / Ayuda / Resultados)
   =================================================================== */
.overlay { position: fixed; inset: 0; background: rgba(10,10,10,.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow-y: auto; }
.overlay.hidden { display: none; }
.overlay-card { background: var(--card-bg); color: var(--text); border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.35); width: 100%; max-width: 720px; overflow: hidden; }
.overlay-head { display: flex; align-items: center; justify-content: space-between; background: var(--nd-black); color: #fff; padding: 13px 18px; }
.overlay-head h3 { margin: 0; font-size: 16px; }
.overlay-head .ov-close { background: none; border: 1px solid #444; color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; font-family: inherit; }
.overlay-head .ov-close:hover { border-color: var(--nd-yellow); color: var(--nd-yellow); }
.overlay-body { padding: 18px; }
.overlay-foot { padding: 12px 18px; border-top: 1px solid var(--nd-border); display: flex; justify-content: flex-end; gap: 8px; }

/* Navegador de preguntas (rejilla) */
.qgrid { display: flex; flex-wrap: wrap; gap: 7px; }
.qgrid button {
  width: 40px; height: 40px; border: 1px solid var(--nd-border); background: var(--card-bg); color: var(--text);
  border-radius: 9px; cursor: pointer; font-size: 13.5px; position: relative; font-family: inherit; font-weight: 600;
}
.qgrid button.current { outline: 2px solid var(--nd-black); font-weight: 800; }
.qgrid button.answered { background: var(--nd-yellow-soft); border-color: var(--nd-yellow); }
.qgrid button.flagged::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; background: var(--flag); border-radius: 50%; }
body[data-theme="noche"] .qgrid button.current { outline-color: var(--nd-yellow); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 12.5px; color: var(--nd-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--nd-border); display: inline-block; }
.legend i.answered { background: var(--nd-yellow-soft); border-color: var(--nd-yellow); }
.legend i.flag { background: var(--flag); border-color: var(--flag); }
.legend i.cur { outline: 2px solid var(--nd-black); }

/* Pantalla de revisión (lista) */
.review-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.review-summary .rs { flex: 1 1 120px; border: 1px solid var(--nd-border); border-radius: 12px; padding: 11px 13px; text-align: center; background: var(--nd-cream); }
.review-summary .rs b { display: block; font-size: 22px; }
.review-list { border: 1px solid var(--nd-border); border-radius: 12px; overflow: hidden; }
.review-row { display: flex; align-items: center; gap: 12px; padding: 9px 13px; border-bottom: 1px solid var(--nd-border); cursor: pointer; }
.review-row:last-child { border-bottom: none; }
.review-row:hover { background: var(--nd-cream); }
.review-row .rr-n { font-weight: 800; min-width: 34px; }
.review-row .rr-txt { flex: 1 1 auto; font-size: 13px; color: var(--nd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-row .rr-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.rr-badge.answered { background: #e9f6ee; color: var(--ok); }
.rr-badge.empty { background: #fdeaea; color: var(--ko); }
.rr-badge.flag { background: #fff3df; color: var(--flag); }

/* Resultados */
.result-score { text-align: center; padding: 8px 0 14px; }
.result-score .big { font-size: 46px; font-weight: 800; line-height: 1; }
.result-score .big.pass { color: var(--ok); }
.result-score .big.fail { color: var(--ko); }
.result-score .sub { color: var(--nd-muted); font-size: 13px; margin-top: 6px; }
.result-domains { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13.5px; }
.result-domains th, .result-domains td { border: 1px solid var(--nd-border); padding: 7px 10px; text-align: left; }
.result-domains th { background: var(--nd-cream2); }
.result-bar { height: 8px; border-radius: 999px; background: var(--nd-cream2); overflow: hidden; min-width: 80px; }
.result-bar > i { display: block; height: 100%; background: var(--nd-yellow); }
.result-note { font-size: 12px; color: var(--nd-muted); margin-top: 12px; }

/* Calculadora */
.calc { width: 240px; margin: 0 auto; }
.calc .disp { background: #141414; color: #fff; border-radius: 10px; padding: 12px 14px; font-family: 'Cascadia Code', Consolas, monospace; font-size: 22px; text-align: right; min-height: 48px; overflow-x: auto; }
.calc .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 10px; }
.calc .keys button { border: 1px solid var(--nd-border); background: var(--nd-cream); border-radius: 9px; padding: 12px 0; font-size: 16px; cursor: pointer; font-family: inherit; }
.calc .keys button:hover { background: var(--nd-yellow-soft); border-color: var(--nd-yellow); }
.calc .keys button.op { background: var(--nd-black); color: #fff; border-color: var(--nd-black); }
.calc .keys button.eq { background: var(--nd-yellow); color: var(--nd-black); border-color: var(--nd-yellow); grid-column: span 2; }
.calc .keys button.wide { grid-column: span 2; }

.help-list { margin: 0 0 6px; padding-left: 0; list-style: none; }
.help-list li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--nd-border); font-size: 13.5px; }
.help-list li:last-child { border-bottom: none; }
.help-list .hk { flex: 0 0 64px; text-align: center; font-size: 14px; font-weight: 700; color: var(--nd-ink); }
.help-sec { font-weight: 700; margin: 14px 0 4px; font-size: 13px; color: var(--nd-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ===================================================================
   Añadidos de la ronda de revisión (fidelidad / marca / a11y)
   =================================================================== */

/* Desplegables en PROSA: filas etiquetadas claras (Poppins), no bloque de código oscuro */
.tmpl-fill { background: var(--nd-cream2); border: 1px solid var(--nd-border); border-radius: 10px; padding: 12px 14px; }
.fill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 5px 0; line-height: 1.7; }
.fill-row + .fill-row { border-top: 1px dashed var(--nd-border); }
.fill-txt { color: var(--text); }
.fill-txt strong { font-weight: 700; }

/* Estados acierto/fallo tematizables (arreglan el modo noche) */
:root { --ok-bg: #ecf7f0; --ko-bg: #fbeeec; --flag-bg: #fff3df; --ok-bg2: #f3faf5; }
body[data-theme="noche"] { --ok-bg: #1c2b22; --ko-bg: #2c1d1c; --flag-bg: #33291a; --ok-bg2: #1c2b22; }
.options li.correct { border-color: var(--ok); background: var(--ok-bg); }
.options li.wrong   { border-color: var(--ko); background: var(--ko-bg); }
table.yesno tr.correct-row { background: var(--ok-bg); }
table.yesno tr.wrong-row   { background: var(--ko-bg); }
.order-item.correct { border-color: var(--ok); background: var(--ok-bg); }
.order-item.wrong   { border-color: var(--ko); background: var(--ko-bg); }
.solution { background: var(--ok-bg2); }
/* en noche, las leyendas dentro de filas correctas/incorrectas no deben quedar tenues e ilegibles */
body[data-theme="noche"] table.yesno tr.correct-row .dd-legend,
body[data-theme="noche"] table.yesno tr.wrong-row .dd-legend { color: var(--text); }

/* Saltos bloqueados (sección sin retroceso) */
.qgrid button:disabled { opacity: .35; cursor: not-allowed; }
.review-row.locked { opacity: .5; cursor: not-allowed; }
.review-row.locked:hover { background: transparent; }

/* Reducción de movimiento: parar parpadeos (reloj crítico y «Grabando») */
@media (prefers-reduced-motion: reduce) { .eh-clock.low, .eh-clock.warn, .eh-clock.crit, .proctor .rec i { animation: none; } }

/* ===================================================================
   Realismo v2: gate de pantallas previas, proctoring, reloj con presión,
   ficha de caso persistente, badge de modo, pie legal
   =================================================================== */
:root { --nd-coral: #ff7043; }

/* Badge de modo (solo lectura) en la barra superior */
.mode-badge { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; border-radius: 999px; padding: 4px 12px; background: #161616; border: 1px solid #333; color: var(--nd-yellow); }
.mode-badge.practica { color: #cfcfcf; }
.identity-watermark {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 8px; border-radius: 999px; border: 1px solid #3a3a3a;
  color: #cfcfcf; background: #171717;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
}

/* Pie legal discreto, fuera del lienzo de la pregunta */
.legal-foot { font-size: 12px; color: var(--nd-muted); text-align: center; padding: 7px 18px 10px; background: var(--page-bg); }

/* Reloj con presión: estados por umbral (amarillo → coral) */
.eh-clock.warn { color: var(--nd-yellow); border-color: var(--nd-yellow-d); }
.eh-clock.crit { color: var(--nd-coral); border-color: #5e2a23; animation: pulseLow 1s steps(2) infinite; }

/* Ficha "Caso práctico" persistente (atenuada cuando ya pasaste el caso) */
.case-progress.done { opacity: .6; cursor: pointer; }
.case-progress.done:hover { opacity: .85; border-color: var(--nd-yellow); }
.case-progress .chk { color: var(--nd-yellow); font-weight: 800; }

/* Franja de proctoring SIMULADO (flotante, centrada bajo la cabecera) */
.proctor {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; justify-content: center;
  background: #0c0c0c; border-bottom: 1px solid #2a2a2a; padding: 6px 14px; color: #ddd; font-size: 12px;
}
.proctor[hidden] { display: none; }
.proctor .pv { width: 22px; height: 22px; border-radius: 6px; background: var(--nd-yellow); color: #000; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.proctor .cam { display: inline-flex; align-items: center; gap: 8px; }
.proctor .cam-box { width: 38px; height: 26px; border-radius: 4px; background: #1c1c1c; border: 1px solid #333; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.proctor .cam-box .silhouette { font-size: 15px; filter: grayscale(1) opacity(.7); }
.proctor .cam-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.proctor .rec { display: inline-flex; align-items: center; gap: 6px; color: #ff6a5a; font-weight: 700; }
.proctor .rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; display: inline-block; animation: recBlink 1.4s steps(2) infinite; }
@keyframes recBlink { 50% { opacity: .25; } }
.proctor .pbtn { background: #1a1a1a; border: 1px solid #333; color: #cfcfcf; border-radius: 7px; padding: 4px 11px; font-family: inherit; font-size: 12px; cursor: not-allowed; opacity: .8; }
.proctor .acode { color: #bdbdbd; font-variant-numeric: tabular-nums; }
.proctor .acode b { color: #fff; letter-spacing: .04em; }
.proctor .proctor-note { margin-left: 4px; font-size: 10px; color: #777; border: 1px dashed #3a3a3a; border-radius: 999px; padding: 1px 7px; cursor: help; }
@media (max-width: 720px){ .proctor { flex-wrap: wrap; gap: 8px; } .proctor .acode { width: 100%; text-align: center; } }

/* Gate: pantallas previas/cierre a pantalla completa con marca NamasData */
.gate { position: fixed; inset: 0; z-index: 60; background: var(--nd-black); color: var(--nd-white); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.gate[hidden] { display: none; }
.gate-card { width: 100%; max-width: 760px; background: #121212; border: 1px solid #2a2a2a; border-top: 4px solid var(--nd-yellow); border-radius: 16px; padding: 36px 42px; box-shadow: 0 20px 70px rgba(0,0,0,.5); }
.gate-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #cfcfcf; font-size: 13px; margin-bottom: 18px; }
.gate-brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--nd-yellow); }
.brand-logo { height: 44px; width: auto; display: block; }
.topbar .brand-logo { height: 26px; }
.gate-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nd-yellow); margin-bottom: 6px; }
.gate-title { font-size: 26px; font-weight: 800; margin: 0 0 14px; line-height: 1.2; }
.gate-title.exam-title { margin-bottom: 22px; }
.exam-code-title { display: block; color: var(--nd-yellow); font-size: 58px; font-weight: 800; line-height: 1; }
.exam-name-title { display: block; color: #fff; font-size: 28px; font-weight: 800; line-height: 1.15; margin-top: 8px; }
/* Titular del gate (multi-examen): "Simulador <code>" sale del dato del examen; el logo = marca */
.gate-brand .brand-logo { height: 34px; }
.sim-title { font-size: clamp(34px, 6.2vw, 48px); font-weight: 800; line-height: 1.04; margin: 0 0 8px; }
.sim-title .sim { color: #fff; }
.sim-title .code { color: var(--nd-yellow); }
.sim-sub { font-size: 21px; font-weight: 600; color: #eaeaea; line-height: 1.2; margin: 0 0 18px; }
.gate-access-title { color: #fff; font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.gate-body { color: #d6d6d6; font-size: 14.5px; line-height: 1.6; }
.gate-body p { margin: 0 0 12px; }
.gate-body ul { margin: 6px 0 14px; padding-left: 18px; }
.gate-body li { margin: 4px 0; }
.gate-body strong { color: #fff; }
.gate-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.gate-facts .gf { flex: 1 1 120px; background: #1a1a1a; border: 1px solid #2c2c2c; border-radius: 12px; padding: 12px 14px; }
.gate-facts .gf b { display: block; font-size: 19px; color: var(--nd-yellow); }
.gate-facts .gf span { font-size: 12px; color: #aaa; }
.gate-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
@media (max-width: 560px){ .gate-modes { grid-template-columns: 1fr; } }
.gate-mode { text-align: left; background: #1a1a1a; border: 1px solid #2c2c2c; border-radius: 12px; padding: 15px 16px; cursor: pointer; font-family: inherit; color: #ddd; }
.gate-mode:hover { border-color: #444; }
.gate-mode.sel { border: 2px solid var(--nd-yellow); background: rgba(251,219,91,.10); }
.gate-mode b { display: block; font-size: 15px; color: #fff; margin-bottom: 4px; }
.gate-mode small { font-size: 12px; color: #aaa; }
.gate-form { display: grid; gap: 12px; margin-top: 16px; }
.gate-field { display: grid; gap: 6px; }
.gate-field span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #aaa; }
.gate-field input {
  width: 100%; min-height: 44px; border-radius: 8px; border: 1px solid #4a4a4a;
  background: #232323; color: #fff; padding: 10px 12px; font-family: inherit; font-size: 15px;
}
.gate-field input:focus { outline: 2px solid var(--nd-yellow); outline-offset: 1px; border-color: var(--nd-yellow); }
.gate-msg { min-height: 18px; font-size: 13px; color: #b8e0b8; }
.gate-msg.error { color: #ffb4a8; }
.gate-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.gate-actions .btn.secondary { background: transparent; color: #ddd; border-color: #444; }
.gate-actions .btn.secondary:hover { background: #1c1c1c; }
.gate-seal { text-align: center; margin: 6px 0 14px; }
.gate-seal .seal { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--nd-yellow); color: #000; font-size: 30px; font-weight: 800; box-shadow: 0 0 0 6px rgba(251,219,91,.12); }
.gate-legal { font-size: 12px; color: #9a9a9a; margin-top: 18px; border-top: 1px solid #2a2a2a; padding-top: 12px; }
.gate-resend a { color: #cfcfcf; text-decoration: underline; }
.gate-resend a:hover { color: var(--nd-yellow); }
#backendCode { max-width: 320px; text-align: center; letter-spacing: .3em; font-size: 22px; font-variant-numeric: tabular-nums; }
.global-logout { position: fixed; top: 12px; right: 14px; z-index: 2147483000; font: 600 12.5px 'Poppins', system-ui, 'Segoe UI', Arial, sans-serif; color: #cfcfcf; background: transparent; border: none; text-decoration: underline; cursor: pointer; padding: 6px 8px; }
.global-logout:hover { color: #fff; }

/* ===================================================================
   Pausa / descanso: vela el examen, pero el tiempo sigue corriendo
   =================================================================== */
.eh-pause { color: var(--nd-yellow); }
.pause-screen {
  position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,.94); color: var(--nd-white); padding: 24px; text-align: center;
}
.pause-screen.hidden { display: none; }
.pause-card { width: min(520px, 100%); }
.pause-kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nd-yellow); margin-bottom: 10px; }
.pause-card h2 { margin: 0 0 12px; font-size: 30px; line-height: 1.2; }
.pause-clock { font-variant-numeric: tabular-nums; font-size: clamp(48px, 12vw, 92px); font-weight: 800; line-height: 1; color: var(--nd-yellow); margin: 18px 0; }
.pause-card p { margin: 0 0 24px; color: #d6d6d6; }
.pause-card p.pause-warn { max-width: 460px; margin: 0 auto 24px; font-size: 13px; line-height: 1.5; color: #f4e6a8; border: 1px solid #5e5320; background: rgba(251,219,91,.07); border-radius: 10px; padding: 10px 14px; }
.pause-card .btn { min-width: 160px; }
@media (max-width: 520px){ .pause-card h2 { font-size: 24px; } .pause-clock { font-size: 52px; } }
/* ===================================================================
   Responsive: pantallas estrechas (móvil / tablet vertical)
   =================================================================== */
@media (max-width: 700px){
  html, body { overflow-x: hidden; }
  /* rail horizontal ya a ≤700 (evita el rail vertical raro entre 641-700) */
  .exam-body { display: block; }
  .toolrail { flex-direction: row; flex-wrap: wrap; width: 100%; border-right: none; border-bottom: 1px solid #2a2a2a; position: static; min-height: 0; justify-content: center; gap: 5px; padding: 8px 6px; }
  .toolrail .sep { width: 1px; height: 22px; margin: 0 2px; }
  /* apilar caso y pregunta como bloques (el grid con min-content desbordaba) */
  .stage { max-width: 100%; padding: 14px; }
  .split, .split.with-case, .split.case-collapsed { display: block; }
  .split > * { max-width: 100%; min-width: 0; }
  /* cap duro en toda la cadena: ningún contenedor supera la pantalla */
  .stage, #app, .split, .case-panel, .panel { max-width: 100% !important; min-width: 0; box-sizing: border-box; }
  .case-panel { margin-bottom: 16px; }
  .panel { padding: 18px 16px; }
  /* el caso fluye sin caja de scroll interna en móvil; quiebre por palabra (no a media palabra) */
  .case-body { max-height: none; overflow-y: visible; padding: 14px 15px; }
  .case-body, .prompt, .gate-body, .instructions { overflow-wrap: break-word; word-break: break-word; }
  .order-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  /* rail horizontal: el separador debe ser una línea vertical, no horizontal */
  .toolrail .sep { width: 1px; height: 22px; margin: 0 2px; }
  .toolrail { gap: 5px; padding: 8px 6px; }
}
@media (max-width: 600px){
  body { font-size: 14px; }
  .topbar { padding: 0 12px; }
  .topbar .topbar-mid { display: none; }                 /* el nombre del examen ya se ve en la bienvenida */
  .examheader { padding: 8px 12px; gap: 8px; }
  .eh-mid { width: 100%; justify-content: flex-start; gap: 6px; }
  .case-progress { max-width: 100%; }
  .case-progress .seg { display: none; }                  /* en móvil basta el contador (n/m) */
  .eh-tab { padding: 5px 11px; }
  /* proctoring compacto: fuera los botones inertes para que quepa lo importante */
  .proctor { gap: 8px; padding: 6px 10px; font-size: 11px; }
  .proctor .pbtn, .proctor .proctor-note { display: none; }
  .stage { padding: 12px; }
  /* barra inferior: que envuelva y el estado caiga debajo, sin cortar «Finalizar» */
  .navbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .nav-mid { order: 3; width: 100%; text-align: center; }
  .nav-left, .nav-right { flex: 1 1 auto; }
  .nav-right { justify-content: flex-end; }
  .btn { padding: 8px 14px; font-size: 13px; }
  .gate-card { padding: 28px 22px; }
  .gate-title { font-size: 22px; }
  .exam-code-title { font-size: 40px; }
  .exam-name-title { font-size: 22px; }
  .gate-access-title { font-size: 18px; }
}
@media (max-width: 480px){
  /* nav en 2 filas: Anterior|Siguiente arriba, Finalizar a lo ancho debajo */
  .nav-left { width: 100%; justify-content: space-between; }
  .nav-left .btn { flex: 1 1 0; }
  .nav-right { width: 100%; }
  .nav-right .btn { width: 100%; }
  .gate-modes { grid-template-columns: 1fr; }
  /* acciones del gate apiladas para no apretar/desbordar */
  .gate-actions { flex-direction: column-reverse; }
  .gate-actions .btn { width: 100%; }
}

/* Aviso de móvil (Opción A): el examen real es de PC; en móvil, mensaje de marca.
   Cero impacto en PC (display:none por defecto; solo aparece ≤700px). */
.mobile-notice { display: none; }
@media (max-width: 700px){
  .mobile-notice { display: flex; position: fixed; inset: 0; z-index: 2147483600; background: #0a0a0a; color: #fafaf7; align-items: center; justify-content: center; padding: 28px; text-align: center; }
  .mobile-notice .mn-card { max-width: 360px; }
  .mobile-notice .mn-brand .brand-logo { height: 44px; margin: 0 auto 18px; }
  .mobile-notice h2 { font-size: 22px; margin: 0 0 12px; color: var(--nd-yellow); }
  .mobile-notice p { font-size: 15px; line-height: 1.6; color: #d6d6d6; margin: 0 0 22px; }
  .mobile-notice .btn { width: 100%; }
}

/* ===================================================================
   Ronda de revisión externa (2 IAs): foco teclado, áreas táctiles,
   tablet, modo noche, longitud de línea, tablas
   =================================================================== */

/* Foco visible de marca (navegación por teclado) — antes no existía */
:focus-visible { outline: 3px solid var(--nd-yellow); outline-offset: 2px; }
body[data-theme="contraste"] :focus-visible { outline-color: var(--text); }
/* sobre superficies amarillas, el foco amarillo no se vería: usar negro */
.btn.cta:focus-visible, .btn.review:focus-visible, .toolrail .tool.active:focus-visible,
.gate-mode.sel:focus-visible { outline-color: var(--nd-black); }

/* Áreas táctiles ≥44×44 px solo en dispositivos táctiles (no infla el escritorio con ratón) */
@media (pointer: coarse){
  .toolrail .tool, .qgrid button, .overlay-head .ov-close, .eh-collapse,
  .opt-strike, .order-item .movebtns button { min-width: 44px; min-height: 44px; }
  .eh-tab, .case-tab, .annex-tab, .btn, .gate-mode { min-height: 44px; }
}

/* Tablet/escritorio pequeño: proteger tablas y textos largos ya desde 900 px (no solo 700) */
@media (max-width: 900px){
  .prompt table.data, .case-body table.data, .panel table.data {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: normal; max-width: 100%;
  }
  .options li, .options li > label, .opt-text, .fill-row, .order-item { min-width: 0; }
  .opt-text { overflow-wrap: break-word; }
  select.dd { max-width: 100%; }
}

/* Longitud de línea cómoda en escritorio (preguntas sin caso a la izquierda) */
@media (min-width: 901px){
  .split:not(.with-case) .panel { max-width: 920px; margin: 0 auto; }
  .prompt, .instructions { max-width: 80ch; }
}

/* Modo noche: pestañas activas y botón secundario legibles */
.annex-tab.active, .case-tab.active { color: var(--text); }
body[data-theme="noche"] .btn.secondary { border-color: var(--nd-border); }