:root{--fondo:#111417;--tarjeta:#1b2026;--texto:#e8ecf0;--texto2:#aab3bd;--acento:#ffb347;--linea:#2c343d;--amarilla:#ffee58;--celeste:#4dd0e1}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.barra{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 4px;max-width:640px;margin:0 auto}
h1{font-size:1rem;margin:0}
h2{font-size:1.05rem;margin:0 0 8px}
main{padding:4px 10px 8px;max-width:640px;margin:0 auto}
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;padding:14px;margin:8px 0}
.oculta{display:none}
.boton{display:inline-block;background:var(--acento);color:#111;font-weight:600;padding:12px 18px;border-radius:8px;border:0;font-size:1rem;cursor:pointer;margin:6px 0}
.boton.otro{background:transparent;color:var(--acento);border:1px solid var(--acento);padding:9px 14px;font-size:.95rem;margin-right:6px}
.tipoEquipo{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--texto2);margin:8px 0 2px}
.tipoEquipo select{flex:1;min-width:0;background:#0d1114;color:var(--texto);border:1px solid var(--linea);border-radius:6px;padding:8px;font-size:.95rem}
.boton.otro{:12px;padding-top:10px;border-top:1px solid var(--linea)}
.otra h3{font-size:.95rem;margin:0 0 4px}
.otra p{font-size:.88rem;color:var(--texto2);margin:0 0 6px}
.boton.chico{padding:0;width:44px;height:44px;font-size:1.1rem;margin:0;flex:none}
.mini{background:transparent;color:var(--texto2);border:1px solid var(--linea);border-radius:6px;padding:6px 10px;font-size:.8rem}
.vermas{background:transparent;color:var(--acento);border:1px solid var(--linea);border-radius:6px;padding:5px 10px;font-size:.8rem;cursor:pointer;margin-top:4px}
.vermas.ancho{width:100%;padding:9px 10px;margin-top:6px}
input[type=file]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.estado{color:var(--texto2);margin:6px 0 0;min-height:1.4em;font-size:.9rem}
.estado.error{color:#ff8a80}
.estado.ok{color:#9be7a0}
.dato{background:#0d1114;border-left:3px solid var(--acento);padding:7px 10px;border-radius:6px;font-size:.85rem;color:var(--texto);margin:8px 0 0}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.72rem;color:var(--texto2);font-weight:400}

/* Las cuatro imagenes en la misma pantalla */
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
figure{margin:0;min-width:0}
figcaption{font-size:.85rem;font-weight:600;color:var(--acento);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
canvas{display:block;width:100%;aspect-ratio:1;background:#000;border-radius:6px;image-rendering:pixelated;touch-action:none;cursor:crosshair}
/* En pantallas bajas la rejilla se achica para que quepan tambien los controles */
@media (max-height:760px){body:not(.comparar) .rejilla{max-width:calc((100vh - 370px));margin:0 auto}}

.controles{margin-top:8px;background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;padding:6px 10px}
.fila{display:flex;gap:10px;align-items:center}
.fila input[type=range]{flex:1}
.etq{font-size:.8rem;font-weight:600;width:38px;flex:none}
.amarilla{color:var(--amarilla)}
.celeste{color:var(--celeste)}
.clave{font-size:.75rem;color:var(--texto2);margin:2px 0 4px}
input[type=range]{width:100%;height:40px;margin:0;-webkit-appearance:none;appearance:none;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--linea);border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--acento);margin-top:-10px;border:2px solid #111}
input[type=range]::-moz-range-track{height:6px;background:var(--linea);border-radius:3px}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--acento);border:2px solid #111}
#frame::-webkit-slider-thumb{background:var(--celeste)}
#fila::-webkit-slider-thumb{background:var(--amarilla)}
#frame::-moz-range-thumb{background:var(--celeste)}
#fila::-moz-range-thumb{background:var(--amarilla)}

/* Explicaciones: se abren con «Ver mas» */
dialog{background:var(--tarjeta);color:var(--texto);border:1px solid var(--linea);border-radius:12px;padding:16px;width:min(92vw,560px);max-height:86vh;overflow-y:auto}
dialog::backdrop{background:rgba(0,0,0,.65)}
.leyenda{margin:6px 0 0;font-size:.95rem}
.leyenda dt{font-weight:600;color:var(--texto);margin-top:10px}
.leyenda dd{margin:2px 0 0;color:var(--texto2)}
.leyenda dd+dd{margin-top:6px}
.leyenda.aviso{background:#0d1114;border-left:3px solid #7fd1ff;border-radius:6px;padding:4px 10px 10px;margin-top:12px}
.leyenda.aviso dt{color:#7fd1ff}
details{margin-top:10px;color:var(--texto2)}
summary{cursor:pointer;color:var(--texto)}
footer{text-align:center;color:var(--texto2);font-size:.75rem;padding:6px}
footer p{margin:0}

/* Boton que cambia entre una columna y la vista corregido */
.cambio{width:100%;background:var(--tarjeta);color:var(--texto);border:1px solid var(--acento);border-radius:8px;padding:9px 10px;font-size:.9rem;font-weight:600;margin:0 0 6px;cursor:pointer}
.cambio[aria-pressed=true]{background:var(--acento);color:#111}
.cambio:disabled{opacity:.45;border-color:var(--linea)}
/* Vista corregido: dos columnas, la pagina se desplaza y los controles quedan siempre a mano */
.columna{font-size:.8rem;font-weight:700;text-align:center;color:var(--texto);background:var(--tarjeta);border:1px solid var(--linea);border-radius:6px;padding:3px 0}
.columna.ancha{grid-column:1/-1}
.vermas.doble{grid-column:1 / -1;margin:0 0 6px;padding:7px 10px}
body.comparar canvas{touch-action:pan-y}
body.comparar .controles{position:sticky;bottom:0;z-index:5;box-shadow:0 -6px 14px rgba(0,0,0,.55)}
body.comparar .clave{display:none}

/* Paso de registro SPECT/CT */
.boton.ancho{display:block;width:100%;margin:10px 0 0}
#reg .columna{margin-bottom:4px}
.fusion canvas{touch-action:none;cursor:grab;image-rendering:auto}
.segmento{display:flex;gap:6px;margin:6px 0 0}
.segmento button{flex:1;background:var(--tarjeta);color:var(--texto);border:1px solid var(--linea);border-radius:8px;padding:8px 0;font-size:.85rem;font-weight:600}
.segmento button[aria-pressed=true]{background:var(--acento);color:#111;border-color:var(--acento)}
#reg select{flex:1;background:#0d1114;color:var(--texto);border:1px solid var(--linea);border-radius:6px;padding:8px;font-size:.9rem}
#reg .fila{min-height:44px}
.flechas{display:flex;gap:8px;margin:6px 0 2px}
.flechas button{flex:1;height:44px;background:#0d1114;color:var(--texto);border:1px solid var(--linea);border-radius:8px;font-size:1.2rem;touch-action:none}
.flechas button:disabled{opacity:.35}
.dato:empty{display:none}
.dato.bien{border-left-color:#9be7a0}
.dato.mal{border-left-color:#ff8a80}
#reg .etq{width:58px}
#reg .clave .mini{margin-left:6px;padding:3px 8px}
#osem .etq{width:58px}
#osem .clave .mini{margin-left:6px;padding:3px 8px}
#osem canvas{image-rendering:pixelated;cursor:crosshair}
[hidden]{display:none!important}
/* OSEM: dos reconstrucciones lado a lado y la tarjeta de nueva reconstruccion */
.rejilla.osem figure select{width:100%;background:#0d1114;color:var(--texto);border:1px solid var(--linea);border-radius:6px;padding:5px;font-size:.8rem;margin-bottom:4px}
#osem canvas{image-rendering:pixelated;cursor:crosshair;touch-action:none}
#osemNueva h2{margin-bottom:6px}
.recetas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;font-size:.9rem}
.opciones label{display:flex;flex-direction:column;gap:3px;color:var(--texto2)}
.opciones label.check{grid-column:1/-1;flex-direction:row;align-items:center;gap:8px;color:var(--texto)}
.opciones input[type=number],.opciones select{background:#0d1114;color:var(--texto);border:1px solid var(--linea);border-radius:6px;padding:8px;font-size:1rem}
.opciones input[type=checkbox]{width:22px;height:22px;accent-color:var(--acento)}
.opciones input:disabled{opacity:.4}
.check.propia{display:flex;align-items:center;gap:8px;font-size:.85rem;margin:4px 0 6px}
.check.propia input{width:20px;height:20px;accent-color:var(--acento)}
/* Ventana de progreso de las reconstrucciones */
dialog.progreso{width:min(88vw,420px)}
dialog.progreso h2{font-size:1rem;margin-bottom:10px}
#progBarra{width:100%;height:14px;-webkit-appearance:none;appearance:none;border:0;border-radius:7px;background:var(--linea);overflow:hidden;accent-color:var(--acento)}
#progBarra::-webkit-progress-bar{background:var(--linea);border-radius:7px}
#progBarra::-webkit-progress-value{background:var(--acento);border-radius:7px;transition:width .2s}
#progBarra::-moz-progress-bar{background:var(--acento);border-radius:7px}
.progFila{display:flex;justify-content:space-between;margin:6px 0 0;font-weight:600;min-height:1.4em}
#progTexto{min-height:2.6em;margin:4px 0}
#progNota{color:var(--texto2)}
#progDetener{margin:6px 0 0}
/* Segunda parte: reorientacion */
.rejilla.reo{margin-top:6px}
.rejilla.reo.tres{grid-template-columns:1fr 1fr 1fr;gap:6px}
.rejilla.reo figcaption{font-size:.75rem}
.columna.eq{margin-top:8px}
#reo .boton.otro{margin:8px 0 0;display:block;text-align:center;width:100%}
#reo .otra.equipo{margin-top:10px}
#reo canvas{image-rendering:pixelated;touch-action:none;cursor:move}
#reo .etq{width:70px}
#reo .fila .paso{flex:none;width:36px;height:36px;border-radius:8px;border:1px solid var(--linea);background:#0d1114;color:var(--texto);font-size:1.1rem;touch-action:none}
#reo .fila .valor{flex:none;width:40px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
#reo .fila{gap:6px}
#reo .recetas{margin-top:6px}
#caja canvas{image-rendering:pixelated;touch-action:none;cursor:move}
/* Candado: cerrado solo desplaza la pagina; abierto solo maneja los controles */
.candado{position:fixed;right:12px;bottom:14px;z-index:30;width:54px;height:54px;border-radius:50%;border:2px solid var(--acento);background:var(--tarjeta);font-size:1.6rem;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.6);cursor:pointer;touch-action:manipulation;pointer-events:auto}
.candado[aria-pressed=true]{background:var(--acento)}
.candadoAviso{position:fixed;right:74px;bottom:24px;z-index:30;max-width:calc(100vw - 96px);background:#0d1114;color:var(--texto);border:1px solid var(--linea);border-radius:8px;padding:7px 10px;font-size:.85rem;opacity:0;transition:opacity .2s;pointer-events:none}
.candadoAviso.visible{opacity:1}
/* Candado: solo actua sobre los deslizadores, sus botones − y +, y las imagenes donde se arrastran
   ejes, centros o cursores. La pagina siempre se desplaza y los demas botones siempre funcionan. */
main input[type=range]{touch-action:pan-y}
html.bloqueado main input[type=range],html.bloqueado main button.paso,html.bloqueado main canvas:not(.libre){pointer-events:none;touch-action:auto}
html.bloqueado main input[type=range],html.bloqueado main button.paso{opacity:.45}
/* Que el boton no tape lo ultimo de la pagina */
footer{padding-bottom:76px}
/* Gatillado */
#gat canvas{image-rendering:pixelated;touch-action:none}
.rango canvas{max-width:360px;margin:0 auto;cursor:ns-resize}
#gat .etq{width:70px}
#gat .fila{gap:6px}
#gat .fila .paso{flex:none;width:44px;height:44px;border-radius:8px;border:1px solid var(--linea);background:#0d1114;color:var(--texto);font-size:1rem}
#gat .fila .valor{flex:none;width:92px;text-align:right;font-size:.8rem;color:var(--texto2)}
.boton.chico.ancho2{flex:1;width:auto;height:44px;font-size:1rem}
#gatCoronal{aspect-ratio:auto}
.gatBarra{display:flex;gap:4px;margin:6px 0 2px}
.gatBarra span{flex:1;height:6px;border-radius:3px;background:var(--linea)}
.gatBarra span.activo{background:var(--acento)}
.refProy{margin-top:8px}
.refProy canvas{image-rendering:pixelated}
.boton.secundario{background:var(--tarjeta);color:var(--texto);border:1px solid var(--acento)}
/* Comparador Siemens / simulador */
#cmp canvas{image-rendering:pixelated;touch-action:none}
#cmp .etq{width:58px}
#cmp .fila .valor{flex:none;width:52px;text-align:right;font-size:.85rem}
#cmp .segmento{margin:6px 0}
#cmp .segmento button:disabled{opacity:.4}
#cmp .fila .valor{width:64px}
.segmento.cuatro button{font-size:.75rem;padding:8px 2px}
.segmento button[hidden]{display:none}
#cmp .valor.ancho3{width:auto;flex:1;text-align:left;padding-left:8px}
#cmp .fila .paso{flex:none}

/* Mapa polar y resultados en vivo */
#qps .controles.fijo{position:sticky;top:0;z-index:6;box-shadow:0 6px 14px rgba(0,0,0,.55)}
#qps .etq{width:70px}
#qps .fila{gap:6px}
#qps .fila .paso{flex:none;width:36px;height:36px;border-radius:8px;border:1px solid var(--linea);background:#0d1114;color:var(--texto);font-size:1.1rem}
#qps .fila .valor{flex:none;width:44px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
#qps details.tarjeta summary{font-weight:600;cursor:pointer;color:var(--acento)}
#qps details.tarjeta .opciones{margin-top:8px}
.qpsT{font-size:.95rem;margin:14px 0 4px;color:var(--acento)}
.qpsTabla{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.qpsTabla th,.qpsTabla td{padding:5px 4px;border-bottom:1px solid var(--linea);text-align:right}
.qpsTabla th:first-child,.qpsTabla td:first-child{text-align:left}
.qpsTabla th{color:var(--texto2);font-weight:600;font-size:.78rem}
.qpsTabla.chica{font-size:.78rem}
.qpsTabla td.cambia{color:#ffd54f;font-weight:700}
canvas.libre{aspect-ratio:auto;height:auto;image-rendering:auto;touch-action:pan-y;cursor:default}
canvas.libre.ancho{width:100%}
canvas.libre.clara{background:var(--fondo);max-width:170px;margin:0 auto}
.ejesVivo{display:grid;grid-template-columns:auto auto 1fr;gap:6px 8px;align-items:center;margin-bottom:4px}
.ejesVivo figure{width:104px}
.ejesVivo figcaption{font-size:.62rem;color:var(--texto2);font-weight:600}
.ejesVivo canvas{width:104px;height:104px;border-radius:6px}
.ejesVivo .clave{font-size:.68rem;line-height:1.5;margin:0}
.mini.activa{border-color:var(--acento);color:var(--acento);font-weight:700}
.ejesVivo2{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:4px}
.ejesVivo2 figcaption{font-size:.62rem;color:var(--texto2);font-weight:600}
.ejesVivo2 canvas{width:100%;aspect-ratio:1;height:auto;border-radius:6px}
#qps .mini.ocultar{display:block;margin:2px 0 4px auto;font-size:.72rem;padding:3px 8px}
#qps .controles.fijo.sinImagenes .ejesVivo,#qps .controles.fijo.sinImagenes .ejesVivo2{display:none}
/* Caso 7: recorrido en pasos */
.pasos7{display:flex;gap:6px;overflow-x:auto;padding:4px 10px 6px;max-width:640px;margin:0 auto;scrollbar-width:none}
.pasos7[hidden]{display:none}
.paso7{flex:none;font-size:.78rem;padding:6px 10px;border-radius:14px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--texto2);white-space:nowrap}
.paso7.hecho{color:var(--texto);border-color:#4a5663}
.paso7.actual{background:var(--acento);color:#111;border-color:var(--acento);font-weight:700}
.paso7:disabled{opacity:.45}
.solo7{display:none}
body.caso7 .solo7:not([hidden]){display:block}
body.caso7 #aQps,body.caso7 #aDirecto,body.caso7 #directoEstado,body.caso7 #equipoBotones,body.caso7 #qc .tipoEquipo,body.caso7 #aOsem,body.caso7 #reo .otra.equipo,body.caso7 #reoEquipo,body.caso7 #reo .refProy{display:none}
#qgs3d{width:100%;max-width:340px;aspect-ratio:1;margin:0 auto;border-radius:8px;touch-action:none;cursor:grab}
html.bloqueado #qgs3d{pointer-events:none;touch-action:auto}
/* Pantallas del equipo en el paso 6 del caso 7 (recortes del savescreen de QGS, sin identidad). */
.equipoQgs{margin:.8rem 0;text-align:center}.equipoQgs figcaption{font-size:.85rem;color:#9ad;margin-bottom:.3rem}.equipoQgs img{max-width:100%;height:auto;border-radius:6px;display:block;margin:0 auto}

/* ===== Tablet apaisada (apaisado.js reparte cada paso en lienzo y panel) ===== */
.columna.apaisada{display:none}
@media (min-width:900px){
 :root{--arriba:96px}
 .barra,.pasos7{max-width:none;padding-left:18px;padding-right:18px}
 main{max-width:none;padding:4px 18px 8px}
 #carga{max-width:720px;margin:8px auto}
 section.dividida:not(.oculta){display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:18px;align-items:start}
 .lienzo{min-width:0}
 .panel{position:sticky;top:8px;max-height:calc(100vh - var(--arriba) - 8px);overflow-y:auto;overscroll-behavior:contain;padding:0 4px 80px 0;scrollbar-width:thin}
 .panel>.cambio:first-child{margin-top:0}
 .panel .controles{margin-top:8px}
 body.comparar .controles{position:static;box-shadow:none}
 body.comparar .clave{display:block}
 #qps .controles.fijo{position:static;box-shadow:none}
 body .lienzo .rejilla{max-width:none;margin:0}
 /* Control de calidad: una rejilla de 2 x 2 que cabe en la altura; comparando, 4 columnas */
 body:not(.comparar) #qc .lienzo .rejilla{max-width:calc(100vh - var(--arriba) - 140px);margin:0 auto}
 body.comparar #qc .lienzo .rejilla{grid-template-columns:repeat(4,1fr)}
 body.comparar #qc .lienzo .columna.apaisada{display:block}
 body.comparar #qc .lienzo .vermas.doble{grid-column:span 2}
 body.comparar #qc .lienzo .vermas.total{grid-column:1/-1}
 /* Registro: la fusion, cuadrada, del alto de la pantalla */
 #reg .lienzo .fusion{max-width:calc(100vh - var(--arriba) - 40px);margin:0 auto}
 /* Reorientacion: dos imagenes arriba y tres abajo, todo a la vista */
 #reo .lienzo{max-width:calc((100vh - var(--arriba) - 90px) / .84);margin:0 auto;width:100%}
 #osem .lienzo,#cmp .lienzo{max-width:calc(2 * (100vh - var(--arriba) - 70px));margin:0 auto;width:100%}
 /* Caja: las dos imagenes y, debajo, las dos proyecciones de referencia, todo a la vista */
 #caja .lienzo{max-width:calc(100vh - var(--arriba) - 110px);margin:0 auto;width:100%}
 #caja .lienzo .refProy{margin-top:4px}
 #caja .lienzo .refProy .clave{margin:0 0 2px}
 #gat .lienzo .rango canvas{max-width:420px}
 /* Mapa polar y QGS: resultados a la izquierda, se recorren con la pagina; controles a la derecha */
 #qps .lienzo>.qpsT:first-child{margin-top:0}
 /* QGS: el ventriculo 3D y la curva lado a lado; debajo, mapas y cortes a todo el ancho */
 #qgs7 .lienzo{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
 #qgs7 .lienzo>*{grid-column:1/-1}
 #qgs7 .lienzo>h3:nth-of-type(1){grid-column:1;grid-row:1;margin-top:0}
 #qgs7 .lienzo>#qgs3d{grid-column:1;grid-row:2;max-width:100%}
 #qgs7 .lienzo>.recetas{grid-column:1;grid-row:3}
 #qgs7 .lienzo>h3:nth-of-type(2){grid-column:2;grid-row:1;margin-top:0}
 #qgs7 .lienzo>#qgsCurvas{grid-column:2;grid-row:2}
 /* comparando con el equipo: las dos curvas, lado a lado, bajan a todo el ancho */
 #qgs7.revelado .lienzo>h3:nth-of-type(2){grid-column:1/-1;grid-row:auto;margin-top:14px}
 #qgs7.revelado .lienzo>#qgsCurvas{grid-column:1/-1;grid-row:auto}
 .ejesVivo figure,.ejesVivo canvas{width:120px}
 .ejesVivo canvas{height:120px}
 dialog{width:min(80vw,680px)}
}
/* Caso 7 en dos fases: rotulos de grupo en la barra, menus de fase y pantallas finales */
.grupo7{flex:none;align-self:center;font-size:.72rem;font-weight:700;color:var(--acento);padding:0 2px 0 8px;white-space:nowrap}
.grupo7:first-child{padding-left:0}
body.caso7 .segmento.solo7:not([hidden]){display:flex}
#qpsFase,#qgsFase{margin:6px 0}
.menuPant{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.menuPant button{flex:1 1 45%;background:var(--tarjeta);color:var(--texto);border:1px solid var(--linea);border-radius:8px;padding:8px 6px;font-size:.82rem;font-weight:600}
.menuPant button[aria-pressed=true]{background:var(--acento);color:#111;border-color:var(--acento)}
.pantalla canvas{background:#b4c3dc;border-radius:4px;image-rendering:auto}
.pantalla figcaption{white-space:normal}
#pantLienzo{cursor:zoom-in}
dialog.grande{width:98vw;max-width:none;max-height:96vh;padding:8px;overflow:auto}
dialog.grande img{display:block;width:100%;height:auto;margin-top:6px;cursor:zoom-out}
dialog.grande .boton{margin:0}
/* Aviso de la falla de mascara del reposo con atenuacion */
.aviso{background:#2a1416;border:1px solid #ff8a80;border-left:4px solid #ff5252;border-radius:8px;padding:8px 10px;margin:8px 0;font-size:.88rem;color:var(--texto)}
.aviso p{margin:0 0 6px}
.aviso b{color:#ffb3ab}
#qpsTipo{margin:0 0 6px}
body.caso7 p.aviso.solo7:not([hidden]){display:block}
/* Comparacion con el equipo par a par: cada figura del estudiante junto a la del equipo */
.pares{display:grid;grid-template-columns:1fr;gap:6px 8px}
.revelado .pares{grid-template-columns:1fr 1fr}
.rejilla.pares{grid-template-columns:1fr 1fr}
.pares figure.equipo figcaption{color:var(--celeste)}
.pares figure.equipo img{display:block;width:100%;height:auto;border-radius:6px;background:#000}
.quien{display:none;color:var(--texto2);font-weight:400}
.revelado .quien{display:inline}
/* Barra: botones a la derecha */
.barraBotones{display:flex;gap:6px;align-items:center}
.tutBoton[aria-pressed=true]{border-color:var(--acento);color:var(--acento)}
/* «Saber más» en cada paso */
.saberMas{display:block;width:100%;background:transparent;color:var(--celeste);border:1px solid var(--celeste);border-radius:8px;padding:8px 10px;font-size:.9rem;font-weight:600;margin:0 0 6px;cursor:pointer}
dialog.saberMasDlg{width:min(92vw,720px)}
dialog.saberMasDlg .leyenda dt{color:var(--celeste)}
/* Tutorial: ventana flotante, flecha y marco */
.tut{position:fixed;left:16px;top:120px;z-index:40;width:min(360px,92vw);background:#1f2630;border:2px solid var(--acento);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.65);padding:0 12px 10px;color:var(--texto);font-size:.95rem}
.tut[hidden]{display:none}
.tutBarra{display:flex;align-items:center;gap:8px;cursor:move;touch-action:none;user-select:none;-webkit-user-select:none;padding:8px 0;border-bottom:1px solid var(--linea);margin-bottom:6px}
.tutAsa{color:var(--texto2);font-size:1.1rem}
#tutTitulo{font-size:.9rem;color:var(--acento)}
#tutCuenta{margin-left:auto;color:var(--texto2);font-size:.8rem}
#tutCerrar{background:none;border:0;color:var(--texto);font-size:1.1rem;cursor:pointer;padding:0 2px}
#tutTexto{margin:4px 0 8px;line-height:1.45}
.tutEspera{color:var(--acento);font-size:.85rem;margin:0 0 8px}
.tutBotones{display:flex;gap:8px;justify-content:space-between}
.tutBotones button{flex:1;background:var(--tarjeta);color:var(--texto);border:1px solid var(--linea);border-radius:8px;padding:8px;font-size:.88rem;font-weight:600;cursor:pointer}
.tutBotones #tutSig{background:var(--acento);color:#111;border-color:var(--acento)}
.tutBotones button:disabled{opacity:.4}
.tutFlecha{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:39;overflow:visible}
.tutMarco{position:fixed;pointer-events:none;z-index:38;border:3px solid var(--acento);border-radius:10px;box-shadow:0 0 0 4px rgba(255,179,71,.25),0 0 18px rgba(255,179,71,.6);animation:tutPulso 1.4s ease-in-out infinite}
.tutMarco[hidden]{display:none}
@keyframes tutPulso{50%{box-shadow:0 0 0 8px rgba(255,179,71,.12),0 0 26px rgba(255,179,71,.85)}}
/* «Saber más» y «Preguntas», lado a lado arriba de cada etapa */
.ayudaPaso{display:flex;gap:6px;margin:0 0 6px}
.ayudaPaso .saberMas{flex:1;margin:0}
.preguntasBtn{flex:1;background:transparent;color:#c5a3ff;border:1px solid #c5a3ff;border-radius:8px;padding:8px 10px;font-size:.9rem;font-weight:600;cursor:pointer}
body.caso7 .preguntasBtn.solo7:not([hidden]){display:block}
.preguntasLista{padding-left:1.3em;margin:8px 0 12px}
.preguntasLista li{margin:0 0 12px}
.preguntasLista p{margin:0 0 3px;line-height:1.45}
/* Antecedentes clinicos del caso, visibles desde el inicio */
.antecedentes7{margin:0 0 8px;border-left-color:var(--celeste)}
.antecedentes7 b{color:var(--celeste)}
body.caso7 .antecedentes7[hidden]{display:none}
/* velocidad del ventriculo que late (mapa QGS) */
.vel3d{display:flex;align-items:center;gap:8px;flex:1 1 220px;font-size:.9em;color:var(--texto2)}
.vel3d input[type=range]{flex:1;min-width:90px;height:32px}
.vel3d .mono{white-space:nowrap;font-size:.95em}