:root{
  /* Marca: verde teal. La IA tiene su propio acento morado. Verde/rojo
     siguen reservados a acierto/fallo, no se tocan. */
  --marca:#1d9e75; --marca-osc:#0f6e56; --marca-suave:#e1f5ee; --marca-linea:#9fe1cb;
  --ia:#7f77dd; --ia-osc:#534ab7; --ia-suave:#eeedfe; --ia-linea:#cecbf6;
  --azul:var(--marca); --azul-osc:var(--marca-osc);
  --verde:#1f9d57; --rojo:#d5413e;
  /* --gris: texto secundario. 7,6:1 sobre blanco (AAA), antes 5,8:1. */
  --tinta:#1b2330; --gris:#495564; --linea:#e6e9ef; --fondo:#f4f6fb; --card:#fff;
  --radio:16px; --sombra:0 2px 14px rgba(20,40,80,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--fondo);color:var(--tinta);-webkit-text-size-adjust:100%}
.app{max-width:560px;margin:0 auto;min-height:100vh;padding:0 16px 130px}

/* ---- login ---- */
.login{padding-top:14vh;text-align:center}
.marca{font-size:2rem;margin:.2em 0;color:var(--tinta);letter-spacing:-.5px}
.marca .marca-ia{color:var(--marca)}
/* Marca blanca: logo de la autoescuela en su pantalla de acceso. */
.logo-tenant{display:block;max-width:190px;max-height:80px;width:auto;margin:0 auto 6px}
.ok-guardado{background:var(--marca-suave);color:var(--marca-osc);padding:12px;border-radius:12px;margin:10px 0}
.fila-check{flex-direction:row;align-items:center;gap:8px;font-weight:600}
.sub{color:var(--gris);margin-top:0}
.card{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:20px;margin:18px auto;text-align:left;display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.92rem}
input{padding:13px;border:1px solid var(--linea);border-radius:12px;font-size:1rem}
.alerta{background:#fde8e8;color:var(--rojo);padding:12px;border-radius:12px;margin:10px 0}
.nota{color:var(--gris);font-size:.85rem}

/* ---- topbar / stats ---- */
.topbar{position:sticky;top:0;background:var(--fondo);padding:14px 0 8px;z-index:5}
/* indicador de preparación (único en la cabecera) */
/* La cabecera entera lleva al progreso: la barra sola mide 5 px y con el dedo
   no se acierta. El padding de abajo es zona de toque, no aire. */
a.prep{display:block;text-decoration:none;color:inherit;padding:6px 2px 12px;
  border-radius:10px;margin:-6px -2px 0}
a.prep:active{background:var(--marca-suave)}
.prep{padding:2px 2px 0}
.prep-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:10px}
/* En móvil el título se oculta (redundante: la barra + % + mensaje ya lo dicen) y
   así la cabecera de práctica ocupa 2 líneas en vez de 4. Vuelve en escritorio. */
.prep-tit{display:none;font-weight:600;font-size:.72rem;color:var(--gris);text-transform:uppercase;letter-spacing:.5px}
@media (min-width:900px){ .prep-tit{display:block} }
.prep-msg{font-size:.78rem;font-weight:600;color:var(--gris)}
@media (min-width:900px){ .prep-msg{white-space:nowrap} }
.prep-msg strong{font-weight:800}
.prep-barra{height:7px;background:var(--linea);border-radius:999px;overflow:hidden}
.prep-relleno{height:100%;border-radius:999px;transition:width .45s ease}
/* Diagnóstico inicial: estado NEUTRO (ni rojo ni %), es avance, no nota. */
.prep-calculando .prep-relleno{background:#aebfd8}
.prep-calculando .prep-msg strong{color:var(--azul)}
.prep-num.calculando{color:var(--gris);font-weight:700}
.prep-sub{margin:5px 0 0;font-size:.72rem;color:var(--gris)}
.prep-bajo  .prep-relleno{background:var(--rojo)}    .prep-bajo  .prep-msg strong{color:var(--rojo)}
.prep-medio .prep-relleno{background:#e0992b}        .prep-medio .prep-msg strong{color:#b9791a}
.prep-alto  .prep-relleno{background:#5bbf6a}        .prep-alto  .prep-msg strong{color:var(--verde)}
.prep-listo .prep-relleno{background:var(--verde)}   .prep-listo .prep-msg strong{color:var(--verde)}

/* ---- tarjeta de pregunta ---- */
.tarjeta{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:18px;margin-top:12px}
.tema-chip{display:inline-block;background:var(--marca-suave);color:var(--azul);font-size:.74rem;
  font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.img-pregunta{display:block;max-width:100%;max-height:32vh;width:auto;margin:8px auto 14px;border-radius:12px}
.img-pendiente{background:#f0f2f7;border:1px dashed #c3cbdb;color:var(--gris);
  padding:22px;text-align:center;border-radius:12px;margin:8px 0 14px;font-size:.9rem}
.enunciado{font-size:1.3rem;line-height:1.35;margin:.1em 0 .9em}
/* Aviso «ojo con esta» (Ebbinghaus): recordatorio suave, nunca alarma. */
/* Por qué le sale esta pregunta: nueva, repaso o de las que se le resisten.
   Misma forma para las tres (píldora) y el color hace de código: neutro para lo
   nuevo, azul para el repaso, ámbar para la que cuesta. */
.motivo{display:inline-block;font-size:.82rem;font-weight:600;padding:6px 12px;
  border-radius:999px;margin:0 0 12px;line-height:1.3}
.motivo-repaso{background:#eaf2ff;color:#2c5aa0}
.motivo-resistida{background:#fdf3e0;color:#9a6a12}

/* Racha 🔥 arriba, junto al botón de cuenta: visible donde se practica */
.racha-top{flex:none;white-space:nowrap;background:#fdf3e0;color:#b9791a;
  font-size:.78rem;font-weight:800;padding:5px 10px;border-radius:999px;line-height:1}

/* Pista de atajos de teclado: solo escritorio (en móvil no hay teclado) */
.atajo-pista{display:none}
@media (min-width:900px){
  .atajo-pista{display:block;text-align:center;color:var(--gris);font-size:.75rem;margin:10px 0 0}
  .atajo-pista kbd{background:var(--card);border:1px solid var(--linea);border-bottom-width:2px;
    border-radius:6px;padding:1px 6px;font-family:inherit;font-size:.72rem}
}

/* Bienvenida del alumno nuevo (onboarding) */
/* Bienvenida: los tres pasos como filas con número, para poder escanearla de un
   vistazo en vez de leer un párrafo. */
.intro-card{max-width:560px;margin-left:auto;margin-right:auto;text-align:center}
.intro-saludo{font-size:1.5rem;font-weight:800;margin:4px 0 2px}
.intro-titulo{font-size:1.05rem;font-weight:600;color:var(--gris);margin:0 0 20px}
.intro-pasos{list-style:none;margin:0 0 20px;padding:0;display:flex;
  flex-direction:column;gap:14px;text-align:left}
.intro-pasos li{display:flex;align-items:flex-start;gap:14px}
.intro-num{flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--marca-suave);color:var(--marca-osc);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem}
.intro-texto{display:block;font-size:.94rem;color:var(--gris);line-height:1.45}
.intro-texto strong{display:block;color:var(--tinta);font-size:1.02rem;
  font-weight:700;margin-bottom:2px}
.intro-nota{color:var(--gris);font-size:.94rem;line-height:1.5;margin:0 0 18px;
  padding-top:16px;border-top:1px solid var(--linea)}
.intro-card .btn-principal{max-width:320px;margin:0 auto}

.opciones{display:flex;flex-direction:column;gap:10px}
.opcion{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1.5px solid var(--linea);border-radius:14px;
  padding:14px;font-size:1rem;cursor:pointer;transition:.12s;color:var(--tinta)}
.opcion:hover{border-color:var(--azul);background:#f2fbf7}
.opcion .letra{flex:none;width:30px;height:30px;border-radius:50%;background:var(--marca-suave);
  color:var(--azul);font-weight:800;display:grid;place-items:center}
.opcion .txt{flex:1}
.opcion .marca{font-weight:800;font-size:1.2rem}
.resultado .opcion{cursor:default}
.opcion.correcta{border-color:var(--verde);background:#eafaf0}
.opcion.correcta .letra{background:var(--verde);color:#fff}
.opcion.correcta .marca{color:var(--verde)}
.opcion.fallada{border-color:var(--rojo);background:#fdeceb}
.opcion.fallada .letra{background:var(--rojo);color:#fff}
.opcion.fallada .marca{color:var(--rojo)}

.feedback{margin:14px 0 10px;font-weight:700;font-size:.95rem}
.feedback.ok{color:var(--verde)}
.feedback.ko{color:var(--rojo)}
/* El margen de ARRIBA lo daba antes la frase del veredicto («Incorrecta — era
   la C»). Al dejar de pintarse, la explicacion se quedaba pegada a la ultima
   opcion (medido: 0 px). Mismo hueco que el que ya tenia por debajo. */
.explicacion{background:#f7f9fc;border-left:4px solid var(--azul);border-radius:12px;
  padding:16px 18px;margin:16px 0}
.explicacion h3{margin:0 0 .45em;font-size:.72rem;color:var(--gris);text-transform:uppercase;letter-spacing:.5px}
.explicacion p{margin:0;font-size:1.05rem;line-height:1.55}

.btn-principal{display:block;width:100%;background:var(--azul);color:#fff;border:none;
  border-radius:14px;padding:15px;font-size:1.05rem;font-weight:700;cursor:pointer;
  text-align:center;text-decoration:none}
.btn-principal:hover{background:var(--azul-osc)}

.vacio{text-align:center;padding:20px 0}

/* ---- progreso ---- */
.contenido{padding-top:8px}
.prep-grande{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:22px;text-align:center;margin:10px 0 18px}
.prep-grande .num{display:block;font-size:3rem;font-weight:800;color:var(--azul);line-height:1}
.prep-grande .lbl{color:var(--gris)}
.temas{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.tema-fila{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:4px}
.tema-pct{font-weight:700}
.barra{height:9px;background:var(--linea);border-radius:999px;overflow:hidden}
.relleno{height:100%;background:var(--azul);border-radius:999px}

/* ---- navbar: 3 destinos, área táctil amplia ---- */
.navbar{position:fixed;bottom:0;left:0;right:0;background:var(--card);
  border-top:1px solid var(--linea);display:flex;max-width:560px;margin:0 auto;
  padding-bottom:env(safe-area-inset-bottom)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:56px;padding:8px 4px;color:var(--gris);text-decoration:none;
  font-weight:600;font-size:.78rem}
.nav-ico{font-size:1.15rem;line-height:1}
.nav-item.activo{color:var(--azul)}
.nav-item:focus-visible{outline:3px solid var(--azul);outline-offset:-3px;border-radius:8px}

/* ---- cuenta ---- */
.titulo-pag{font-size:1.35rem;margin:.2em 0 .1em}
.card-cuenta{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:18px;margin:10px 0 18px}
.datos-cuenta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.95rem}
.datos-cuenta dt{color:var(--gris);font-weight:600}
.datos-cuenta dd{margin:0;font-weight:600}
.btn-salir{background:var(--rojo);max-width:340px;margin-inline:auto}
.btn-salir:hover{background:#b8352f}
.enlaces-legales{text-align:center;margin-top:18px;font-size:.85rem}
.enlaces-legales a{color:var(--gris)}
/* Acceso a la cuenta: visible en TODAS las pantallas, arriba a la derecha.
   Va pegado a la barra de preparación sin robarle sitio ni ocupar un destino. */
.topbar-row{display:flex;align-items:center;gap:10px}
.topbar-row #barra-stats{flex:1;min-width:0}
/* Logo de marca en la barra del alumno: va DENTRO de la fila que ya existe, así
   que no cuesta ni un píxel de alto. Discreto: identifica, no compite con la
   pregunta. En móviles muy estrechos se oculta antes que apretar las stats. */
.logo-top{flex:none;width:auto;height:26px;max-width:44px;object-fit:contain;border-radius:5px}
/* Logotipo tipográfico (B2C): el nombre ES el logo, igual que en el acceso.
   Cabe en los 65px que el bloque de stats no usa; en pantallas muy estrechas
   se oculta antes que apretar el mensaje de preparación. */
.logo-top-texto{flex:none;white-space:nowrap;font-size:.8rem;font-weight:800;
  letter-spacing:-.3px;color:var(--tinta)}
.logo-top-texto .marca-ia{color:var(--marca)}
@media (max-width:359px){ .logo-top,.logo-top-texto{display:none} }
.btn-cuenta{margin-left:auto;flex:none;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;
  background:var(--card);border:1px solid var(--linea);text-decoration:none;
  box-shadow:var(--sombra)}
.btn-cuenta:hover{border-color:var(--azul);background:var(--marca-suave)}
.btn-cuenta[aria-expanded="true"]{border-color:var(--azul);background:var(--marca-suave)}

/* Desplegable de la cuenta */
.cuenta-menu{position:relative;margin-left:auto;flex:none}
.cuenta-menu .btn-cuenta{margin-left:0}
.menu-cuenta{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:220px;
  background:var(--card);border:1px solid var(--linea);border-radius:12px;
  box-shadow:0 8px 24px rgba(20,40,80,.16);padding:6px;display:flex;flex-direction:column}
.menu-cuenta[hidden]{display:none}
.menu-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;
  border-radius:9px;color:var(--tinta);text-decoration:none;font-weight:600;font-size:.95rem}
.menu-item:hover{background:var(--marca-suave);color:var(--azul-osc)}
.menu-item.menu-salir{color:var(--rojo);border-top:1px solid var(--linea);
  border-radius:0 0 9px 9px;margin-top:4px;padding-top:12px}
.menu-item.menu-salir:hover{background:#fdeceb;color:var(--rojo)}

/* ====================== PANEL SUPERADMIN ====================== */
body.panel{background:#f0f2f7;max-width:none}
.panel{display:flex;min-height:100vh}
.sidebar{width:230px;flex:none;background:#10233f;color:#cdd7e6;display:flex;flex-direction:column;padding:18px 12px}
.marca-panel{font-weight:800;color:#fff;font-size:1.1rem;padding:6px 10px 16px;line-height:1.1}
.marca-panel span{display:block;font-size:.66rem;color:#7d93b3;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar nav a{color:#cdd7e6;text-decoration:none;padding:11px 12px;border-radius:9px;font-weight:600;font-size:.92rem}
.sidebar nav a:hover{background:#1b335c}
.sidebar nav a.on{background:var(--azul);color:#fff}
.sidebar nav a.sub{font-size:.82rem;padding-left:24px;color:#9fb1cc}
.nav-dis{color:#5d7299;padding:11px 12px;font-size:.9rem}
.nav-dis em{font-size:.7rem}
.sidebar .salir{color:#cdd7e6;text-decoration:none;padding:11px 12px;border-radius:9px;font-weight:600;font-size:.9rem;border-top:1px solid #20375f;margin-top:8px}
.panel-main{flex:1;padding:26px 32px;max-width:1100px}
.panel-main h1{margin:.1em 0 .6em}
.panel-main h1 small{color:var(--gris);font-weight:600;font-size:1rem}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:22px}
.tj{background:#fff;border-radius:14px;box-shadow:var(--sombra);padding:18px;text-align:center}
/* cambio de contraseña plegado dentro de la fila: no ensancha la tabla */
.reset-clave{display:inline-block}
.reset-clave>summary{cursor:pointer;list-style:none}
.reset-clave>summary::-webkit-details-marker{display:none}
.reset-clave form{display:flex;gap:6px;margin-top:6px}
.reset-clave input{font-size:.85rem;padding:4px 6px;width:120px}

/* algunas tarjetas del dashboard son enlaces a su sección */
a.tj{display:block;text-decoration:none;color:inherit}
a.tj:hover{outline:2px solid var(--marca-linea)}
.tj-num{display:block;font-size:2rem;font-weight:800;color:var(--azul)}
.tj-lbl{color:var(--gris);font-size:.82rem}

.btn{display:inline-block;background:var(--azul);color:#fff;border:none;border-radius:10px;padding:10px 16px;
  font-weight:700;cursor:pointer;text-decoration:none;font-size:.92rem}
.btn:hover{background:var(--azul-osc)}
.btn.sec{background:#e7ecf5;color:var(--tinta)}
.btn.peligro{background:var(--rojo)}
.mini{font-size:.85rem;color:var(--azul);text-decoration:none}

.cab-seccion{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cab-seccion>div{display:flex;gap:8px}

.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
.filtros input[type=text]{flex:1;min-width:180px;padding:9px 12px;border:1px solid var(--linea);border-radius:9px}
.filtros select{padding:9px 12px;border:1px solid var(--linea);border-radius:9px;background:#fff}

.tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--sombra)}
.tabla th,.tabla td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);font-size:.9rem;vertical-align:top}
.tabla th{background:#f7f9fc;color:var(--gris);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.tabla a{color:var(--azul);text-decoration:none}
.td-tema{color:var(--gris);font-size:.8rem;white-space:nowrap}
.td-c{font-weight:800;text-align:center}
.vacio-td{text-align:center;color:var(--gris);padding:24px}
.badge{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px}
.badge.ok{background:#eafaf0;color:var(--verde)}
.badge.no{background:#fdeceb;color:var(--rojo)}
.badge-riesgo{background:#fdeceb;color:var(--rojo);margin-left:8px}
.badge-nuevo{background:#eef1f7;color:var(--gris);margin-left:8px}

/* Resumen del admin: tarjetas KPI + bloque de seguimiento */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:16px 0 24px}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:16px}
.kpi-alerta{border-color:#f3b4ae;background:#fef6f5}
.kpi-num{display:block;font-size:2rem;font-weight:800;color:var(--azul);line-height:1}
.kpi-num small{font-size:1.1rem;color:var(--gris);font-weight:700}
.kpi-alerta .kpi-num{color:var(--rojo)}
.kpi-lbl{display:block;font-weight:700;color:var(--tinta);margin-top:6px;font-size:.9rem}
.kpi-sub{display:block;color:var(--gris);font-size:.76rem;margin-top:2px}
.bloque-riesgo{margin-top:8px}

/* Consultas al tutor: hilos plegables con el diálogo alumno/tutor */
.hilo-tutor{background:#fff;border:1px solid var(--linea);border-radius:12px;
  padding:10px 14px;margin-bottom:8px}
.hilo-tutor summary{cursor:pointer;font-size:.9rem;color:var(--tinta)}
.hilo-meta{display:block;color:var(--gris);font-size:.76rem;margin-top:2px}
.hilo-cuerpo{margin-top:10px;border-top:1px solid var(--linea);padding-top:10px}
.msg{margin:0 0 8px;font-size:.88rem;line-height:1.5;white-space:pre-wrap}
.msg-quien{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--gris);margin-bottom:2px}
.msg-user{background:#f6f8fc;border-radius:10px;padding:8px 12px}
.msg-assistant{background:var(--ia-suave);border-radius:10px;padding:8px 12px}
.msg-assistant .msg-quien{color:var(--ia-osc)}
.hilo-pie{margin:4px 0 0;font-size:.82rem}
.hilo-pie a{color:var(--azul);font-weight:700}
.sub-seccion{color:var(--gris);font-size:.86rem;margin:2px 0 12px}
.vacio-suave-panel{background:#eafaf0;color:var(--verde);padding:14px 16px;border-radius:12px;font-weight:600}

.paginacion{display:flex;gap:14px;align-items:center;justify-content:center;margin:16px 0;color:var(--gris)}
.paginacion a{color:var(--azul);text-decoration:none;font-weight:700}

.form-pregunta,.form-import{background:#fff;border-radius:14px;box-shadow:var(--sombra);padding:20px;
  display:flex;flex-direction:column;gap:14px;max-width:760px}
.form-pregunta label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.86rem}
.form-pregunta input,.form-pregunta textarea,.form-pregunta select{padding:10px;border:1px solid var(--linea);
  border-radius:9px;font-size:.95rem;font-family:inherit}
.fila2{display:flex;gap:12px;flex-wrap:wrap}
.fila2>label{flex:1;min-width:150px}
.opciones-edit{display:flex;flex-direction:column;gap:8px}
.opciones-edit .op{flex-direction:row;align-items:center;gap:8px}
.opciones-edit .op input{flex:1}
.op-c{flex-direction:row!important;align-items:center;gap:8px;max-width:160px}
.check{flex-direction:row!important;align-items:center;gap:8px}
.form-acciones{display:flex;gap:10px}
.ok-msg{background:#eafaf0;color:var(--verde);padding:10px 14px;border-radius:10px;margin-bottom:14px;font-weight:600;max-width:760px}
/* Aviso de «esta pregunta vive en el repositorio y aqui no se edita». */
.info-msg{background:#fff9ee;border:1px solid #f0d9a8;color:var(--tinta);padding:12px 16px;border-radius:10px;margin-bottom:16px;max-width:760px;font-size:.92rem}
/* Solo el titular va en su propia linea; un <strong> dentro del texto no debe
   partir la frase en tres. */
.info-msg>strong:first-child{display:block;margin-bottom:4px}
.info-msg code{background:#fff;padding:1px 6px;border-radius:5px}
/* «TT-0001» partido en dos lineas no se lee ni se copia bien. */
.td-codigo{white-space:nowrap;font-variant-numeric:tabular-nums}
/* La pregunta en modo lectura: mismo aire que el formulario, sin cajas. */
.solo-lectura{max-width:760px}
.solo-lectura .campo{margin-bottom:14px}
.solo-lectura .campo>span{display:block;color:var(--gris);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.solo-lectura .campo>p{margin:0;line-height:1.45}
.solo-lectura ol{margin:0;padding-left:22px}
.solo-lectura ol li{margin-bottom:3px}
.solo-lectura ol li.correcta{font-weight:700;color:var(--verde)}

.dropzone{display:block;border:2px dashed #b9c4d8;border-radius:12px;padding:24px;text-align:center;cursor:pointer}
.resultado-import{background:#fff;border-radius:12px;box-shadow:var(--sombra);padding:16px;margin-bottom:16px;max-width:760px}
.resultado-import ul{font-size:.85rem;color:var(--rojo)}
.ayuda-import{margin-top:18px;color:var(--gris);font-size:.9rem;max-width:760px}
.ayuda-import code{display:block;background:#fff;padding:12px;border-radius:9px;margin:8px 0;font-size:.82rem;color:var(--tinta)}

@media(max-width:720px){
  .panel{flex-direction:column}
  .sidebar{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .sidebar nav{flex-direction:row;flex-wrap:wrap}
  .panel-main{padding:18px}
}

/* ---- cola de revisión / medios (Incremento A generador) ---- */
.btn.aviso{background:#e0992b}
.btn.ok-btn{background:var(--verde)}
.badge.pend{background:#fdf3e0;color:#b9791a}
.rev-card{background:#fff;border-radius:14px;box-shadow:var(--sombra);padding:22px;max-width:680px}
.rev-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.rev-nivel{color:var(--gris);font-size:.8rem}
.rev-interno{background:#f7f9fc;border-left:3px solid #c3cbdb;border-radius:8px;
  padding:10px 14px;margin:14px 0;font-size:.85rem;color:var(--gris)}
.rev-acciones{display:flex;gap:10px;margin-top:16px}
.rev-acciones form{margin:0}

.medio-fila{background:#fff;border-radius:12px;box-shadow:var(--sombra);padding:14px 16px;
  margin-bottom:12px;display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.medio-info{flex:1;min-width:280px}
.medio-nombre{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.medio-nombre code{background:var(--marca-suave);color:var(--azul);padding:2px 8px;border-radius:6px;font-size:.82rem}
.medio-enunciado{color:var(--gris);font-size:.85rem;margin-bottom:6px}
.medio-brief summary{cursor:pointer;font-size:.82rem;color:var(--azul);font-weight:600}
.medio-brief p{font-size:.84rem;background:#f7f9fc;padding:10px;border-radius:8px;margin:6px 0 0}
.medio-form{display:flex;gap:8px;align-items:center}
.medio-form input[type=file]{font-size:.8rem;max-width:220px}

.bloque-medio{border:1px solid var(--linea);border-radius:10px;padding:12px 14px;
  display:flex;flex-direction:column;gap:10px}
.bloque-medio legend{font-weight:700;font-size:.85rem;padding:0 6px}
.medio-actual{display:flex;gap:12px;align-items:center}
.medio-actual code{background:var(--marca-suave);color:var(--azul);padding:2px 8px;border-radius:6px;font-size:.82rem}
.mini-img{max-height:70px;border-radius:8px;border:1px solid var(--linea)}

/* ---- toolbar secundaria + cobertura (Incremento C) ---- */
.toolbar-sub{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 4px;font-size:.9rem}
.toolbar-sub a{color:var(--gris);text-decoration:none;font-weight:600}
.toolbar-sub a:hover{color:var(--azul)}
.toolbar-sub a.aviso-link{color:#b9791a}

.cob-lista{display:flex;flex-direction:column;gap:10px;max-width:760px}
.cob-fila{background:#fff;border-radius:12px;box-shadow:var(--sombra);padding:12px 16px;
  display:flex;gap:16px;align-items:center;justify-content:space-between}
.cob-info{flex:1;min-width:0}
.cob-cab{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:6px}
.cob-nombre{font-weight:600}
.cob-nums{color:var(--gris);font-weight:700}
.relleno.poco{background:var(--rojo)}
.relleno.medio{background:#e0992b}
.relleno.bien{background:var(--verde)}

/* ---- panel autoescuela ---- */
.prep-mini{display:flex;align-items:center;gap:8px;min-width:140px}
.prep-mini .prep-barra{flex:1;height:8px}
.prep-num-mini{font-weight:700;font-size:.82rem;min-width:38px;text-align:right}
.prep-num-mini.calculando{color:var(--gris);font-weight:600;font-size:.76rem;min-width:46px}
.prep-mini.prep-bajo .prep-relleno{background:var(--rojo)}
.prep-mini.prep-medio .prep-relleno{background:#e0992b}
.prep-mini.prep-alto .prep-relleno,.prep-mini.prep-listo .prep-relleno{background:var(--verde)}

/* ---- simulacro ---- */
.sim-reglas{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:8px;font-size:.95rem}
.sim-historial{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.sim-historial li{background:var(--card);border-radius:12px;box-shadow:var(--sombra);
  font-size:.9rem}
/* El <li> ya no maqueta: ahora el enlace ocupa toda la fila, para que se pueda
   tocar entera con el dedo y no solo el texto «Ver fallos». */
.sim-hist-enlace{display:flex;align-items:center;gap:12px;padding:12px 14px;
  color:inherit;text-decoration:none;border-radius:12px}
.sim-hist-enlace:hover{background:#f2f6ff}
.sim-hist-ver{color:var(--azul);font-weight:600;white-space:nowrap}
.sim-fecha{margin-left:auto;color:var(--gris);font-size:.8rem}
.sim-barra{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* El progreso ocupa el hueco y puede encogerse; la marca y el reloj, nunca. */
.sim-prog{flex:1;min-width:0;font-size:.95rem;color:var(--gris)}
.sim-barra .sim-timer{flex:none}
/* Texto que solo cabe en pantalla grande (mismo criterio que el título de la
   barra de preparación, que también se oculta en móvil). */
.solo-escritorio{display:none}
@media (min-width:900px){ .solo-escritorio{display:inline} }
.sim-timer{font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums;
  background:var(--card);padding:4px 12px;border-radius:10px;box-shadow:var(--sombra)}
.sim-timer.avisando{color:#b9791a;background:#fdf3e0}
.sim-timer.agotando{color:var(--rojo);animation:parpadeo 1s infinite}
@keyframes parpadeo{50%{opacity:.45}}
.sim-aviso-tiempo{margin:8px 0 0;text-align:center;font-weight:700;font-size:.86rem;
  padding:6px 10px;border-radius:8px}
.sim-aviso-tiempo.medio{background:#fdf3e0;color:#9a6a12}
.sim-aviso-tiempo.urgente{background:#fdecec;color:var(--rojo)}
/* Solo existe con las 30 contestadas: entonces es LA acción y va en verde de
   aprobado. Con preguntas sin responder ni se pinta aquí (ver .sim-rendirse). */
.sim-terminar{display:block;width:100%;max-width:420px;margin:18px auto 0;padding:15px;
  border:none;border-radius:14px;cursor:pointer;font-size:1.05rem;font-weight:800;
  color:#fff;text-align:center;background:var(--verde)}
.sim-terminar:hover{filter:brightness(.94)}

/* Dejarlo a medias: existe, pero abajo del todo y con voz de enlace, no de
   botón. Entregar con preguntas en blanco es rendirse, no terminar. */
.sim-rendirse{text-align:center;margin:18px 0 4px}
.sim-rendirse button{background:none;border:none;padding:8px;cursor:pointer;
  font-family:inherit;font-size:.85rem;color:var(--gris);text-decoration:underline}
.sim-rendirse button:hover{color:#b9791a}

/* ---- Simulacro: navegación y revisión ---- */
.sim-cont{color:var(--azul);font-weight:600}
.sim-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.btn-marcar{background:none;border:1px solid var(--linea);border-radius:999px;
  padding:4px 12px;font-size:.78rem;cursor:pointer;color:var(--gris);font-family:inherit;white-space:nowrap}
.btn-marcar:hover{border-color:#e0992b;color:#b9791a}
.btn-marcar.on{background:#fdf3e0;border-color:#e0992b;color:#b9791a;font-weight:700}
.opcion.elegida{border-color:var(--azul);background:var(--marca-suave)}
.opcion.elegida .letra{background:var(--azul);color:#fff}

.sim-rejilla{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:16px 0 8px}
.rej-celda{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linea);border-radius:8px;text-decoration:none;color:var(--gris);
  font-size:.82rem;font-weight:700;background:#fff}
.rej-celda:hover{border-color:var(--azul)}
/* «Contestada» va en gris pizarra y NO en verde. En el resto de la app el verde
   significa acierto —y en la pantalla de correccion, dos casillas mas abajo en
   este mismo fichero, .correcta es exactamente ese verde—, asi que verlas
   ponerse verdes mientras haces el examen parecia que las ibas acertando.
   Aqui nadie sabe todavia si estan bien: solo dice «esta hecha». */
.rej-celda.contestada{background:#dbe1ea;color:var(--tinta);border-color:#c3ccda;font-weight:800}
.rej-celda.marcada{border-color:#e0992b;box-shadow:inset 0 -3px 0 #e0992b}
.rej-celda.actual{outline:2px solid var(--azul);outline-offset:1px;color:var(--tinta)}
.sim-leyenda{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-size:.76rem;color:var(--gris);margin:4px 0 0}
.sim-leyenda span{display:flex;align-items:center;gap:5px}
.sim-leyenda .lg{width:14px;height:14px;border:1px solid var(--linea);border-radius:4px;display:inline-block}
.sim-leyenda .lg.contestada{background:#dbe1ea;border-color:#c3ccda}
.sim-leyenda .lg.marcada{border-color:#e0992b;box-shadow:inset 0 -3px 0 #e0992b}

/* ---- Simulacro: rejilla de corrección (resultado) ---- */
button.rej-celda{cursor:pointer;font-family:inherit}
.rej-celda.correcta{background:#eafaf0;color:var(--verde);border-color:#bfe8cf}
.rej-celda.fallada{background:#fdeceb;color:var(--rojo);border-color:#f4c9c7}
.rej-celda.sin{background:#f2f4f7;color:var(--gris)}
.sim-leyenda .lg.correcta{background:#eafaf0;border-color:#bfe8cf}
.sim-leyenda .lg.fallada{background:#fdeceb;border-color:#f4c9c7}
.sim-leyenda .lg.sin{background:#f2f4f7}
.rev-titulo{margin:22px 0 8px}
.rev-cab{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rev-n{font-weight:800}
.rev-estado{font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px}
.rev-estado.ok{background:#eafaf0;color:var(--verde)}
.rev-estado.ko{background:#fdeceb;color:var(--rojo)}
.rev-estado.sin{background:#f2f4f7;color:var(--gris)}

/* ---- Vigilancia BOE (panel) ---- */
.td-vig{white-space:nowrap;font-size:.82rem}
.td-vig .inline{display:inline;margin:0 0 0 6px}
.badge.warn{background:#fdf3e0;color:#b9791a}
.sim-resultado{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:26px;text-align:center;display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.sim-veredicto{font-size:2.2rem;font-weight:800}
.sim-resultado.apto .sim-veredicto{color:var(--verde)}
.sim-resultado.noapto .sim-veredicto{color:var(--rojo)}
.sim-detalle{color:var(--gris)}
.sim-animo{font-size:.9rem;color:var(--gris)}
.sim-acciones{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.sec-btn{background:#e7ecf5;color:var(--tinta);flex:1}

/* ---- legal ---- */
.legal h1{margin-top:14px}
.legal h2{font-size:1.02rem;margin:1.2em 0 .3em}
.legal p,.legal li{font-size:.92rem;line-height:1.55;color:var(--tinta)}
.legal ul{padding-left:20px}
.legal-links a{color:var(--gris)}

/* ---- Trazabilidad normativa (v1) ---- */
.badge{background:#eef1f6;color:var(--gris)}
.badge.warn{background:#fdf3e0;color:#b9791a}
.err-msg{background:#fdeceb;color:var(--rojo);padding:10px 14px;border-radius:10px;margin-bottom:14px;font-weight:600;max-width:760px}
.form-normativa{background:#fff;border-radius:14px;box-shadow:var(--sombra);padding:20px;max-width:820px;margin-bottom:22px;display:flex;flex-direction:column;gap:14px}
.form-normativa .campo{display:flex;flex-direction:column;gap:6px}
.form-normativa label{font-weight:600;font-size:.9rem}
.form-normativa input,.form-normativa textarea{padding:10px;border:1px solid var(--linea);border-radius:10px;font-size:.95rem;font-family:inherit}
.fila-2{display:flex;gap:14px;flex-wrap:wrap}
.fila-2>.campo{flex:1;min-width:200px}
.alerta-box{border:1px solid #f0d9a8;background:#fff9ee}
.btn.peq{padding:6px 10px;font-size:.8rem}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media(max-width:900px){.dos-col{grid-template-columns:1fr}}
.avisos-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.aviso-tj{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:12px 16px;text-decoration:none;color:var(--tinta);font-weight:600;font-size:.9rem;box-shadow:var(--sombra)}
.aviso-tj .aviso-num{font-size:1.3rem;font-weight:800;margin-right:6px;color:var(--azul)}
.aviso-tj.warn{background:#fff9ee;border-color:#f0d9a8;color:var(--tinta)}
.aviso-tj.warn .aviso-num{color:#b9791a}
.cab-acciones{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.grupo-pend{background:#fff;border-radius:14px;box-shadow:var(--sombra);padding:16px 18px;margin-bottom:16px;border-left:4px solid #e0992b}
.grupo-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.grupo-cab h2{margin:0;font-size:1.05rem}
.lista-pregs,.lista-versiones{list-style:none;padding:0;margin:8px 0 0}
.lista-pregs li{padding:7px 0;border-top:1px solid var(--linea);font-size:.9rem;line-height:1.4}
.lista-pregs li a{font-weight:700;color:var(--azul);margin-right:6px;text-decoration:none}
.lista-pregs .rev{color:var(--gris);margin-left:6px;font-size:.78rem}
.lista-versiones li{padding:9px 0;border-top:1px solid var(--linea);font-size:.88rem}
.lista-versiones .ver-res{color:var(--gris);margin-top:4px}
.vacio-ok{background:#eafaf0;border-radius:14px;padding:22px;color:var(--verde);font-weight:600}
.vacio-ok .nota{color:var(--gris);font-weight:400;margin-top:6px}
.filtro-activo{background:var(--marca-suave);color:var(--azul);padding:9px 14px;border-radius:10px;font-size:.9rem;margin:6px 0}
.filtro-activo a{color:var(--azul)}

/* ---- Tutor IA (alumno) ---- */
.btn-tutor{display:inline-block;background:none;border:none;color:var(--ia-osc);
  font-size:.9rem;font-weight:600;cursor:pointer;padding:2px 0;margin:16px 0 4px}
.btn-tutor:hover{text-decoration:underline}
.tutor{background:var(--ia-suave);border:1px solid var(--ia-linea);border-radius:14px;padding:14px;margin:14px 0 4px}
.tutor-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tutor-titulo{font-weight:800;color:var(--ia-osc)}
.tutor-cupo{font-size:.78rem;color:var(--gris)}
.tutor-demo{font-size:.78rem;color:#b9791a;background:#fdf3e0;padding:6px 10px;border-radius:8px;margin:0 0 8px}
.tutor-hilo{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 0}
.tutor-hilo .msg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:.92rem;line-height:1.45;white-space:pre-wrap}
.tutor-hilo .msg.mio{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:4px}
.tutor-hilo .msg.suyo{align-self:flex-start;background:#fff;border:1px solid var(--linea);border-bottom-left-radius:4px}
.tutor-hola{color:var(--gris);font-size:.9rem;margin:4px 0}
.tutor-error{background:#fdeceb;color:var(--rojo);padding:8px 12px;border-radius:10px;font-size:.85rem;margin:8px 0 0}
.tutor-sugerencias{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chip-sug{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:7px 12px;font-size:.82rem;
  color:var(--tinta);cursor:pointer}
.chip-sug:hover{border-color:var(--ia);color:var(--ia-osc)}
.tutor-form{display:flex;gap:8px;margin-top:10px}
.tutor-form input{flex:1;padding:10px 12px;border:1px solid var(--linea);border-radius:10px;font-size:.95rem}
.tutor-fin{color:var(--gris);font-size:.88rem;background:#fff;border-radius:10px;padding:10px 12px;margin:8px 0 0}

/* ---- B2C: cupo diario y planes ---- */
.campo-ayuda{font-weight:400;font-size:.78rem;color:var(--gris)}
.registro-cta{font-size:.95rem}
.registro-cta a{color:var(--azul)}
/* Cupo agotado: celebra lo hecho, no castiga */
.cupo-fin{text-align:center;padding:8px 4px}
.cupo-fin h2{font-size:1.35rem;margin:.2em 0 .4em}
.cupo-fin p{color:var(--gris);margin:0 0 10px;line-height:1.5}
.cupo-nota{font-size:.88rem}
.cupo-resumen{color:var(--tinta)!important;font-size:1.02rem}
.cupo-resumen strong{color:var(--marca-osc)}
.cupo-flojos{font-size:.9rem}
.aviso-email{position:relative;background:#fdf3e3;border:1px solid #f0d5a8;color:#8a5a10;
  border-radius:12px;padding:11px 34px 11px 14px;margin:0 0 12px;font-size:.9rem;line-height:1.45}
/* «×» para posponerlo: sin esto salía en cada pantalla y se hacía pesado */
.aviso-cerrar{position:absolute;top:4px;right:6px;background:none;border:none;
  color:#8a5a10;opacity:.55;font-size:1.2rem;line-height:1;cursor:pointer;padding:4px 7px}
.aviso-cerrar:hover{opacity:1}
.aviso-email p{margin:0}
.enlace-baja{text-align:center;margin:18px 0 0;font-size:.86rem}
.enlace-baja a{color:var(--gris)}
.lista-baja{margin:8px 0 14px;padding-left:20px;color:var(--gris);font-size:.94rem;line-height:1.6}
.form-baja{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.form-baja input{width:100%;padding:12px;border:1px solid var(--linea);border-radius:10px;
  font-size:1rem;letter-spacing:.08em}
.btn-peligro{background:var(--rojo);color:#fff;border:0;border-radius:12px;padding:14px;
  font-size:1rem;font-weight:700;cursor:pointer}
.btn-peligro:hover{filter:brightness(.94)}

/* ---- Retención (panel) ---- */
.filtros-retencion{display:flex;gap:8px;margin:14px 0 20px;flex-wrap:wrap}
.filtros-retencion a{padding:7px 14px;border:1px solid var(--linea);border-radius:999px;
  background:#fff;color:var(--gris);font-size:.86rem;text-decoration:none}
.filtros-retencion a.on{background:var(--marca-suave);border-color:var(--marca-linea);
  color:var(--marca-osc);font-weight:700}
.resumen-retencion{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin:0 0 22px;max-width:900px}
.dato-ret{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:14px 16px;
  display:flex;flex-direction:column;gap:2px}
.dato-num{font-size:1.9rem;font-weight:800;color:var(--marca-osc);line-height:1.1;
  font-variant-numeric:tabular-nums}
.dato-tit{font-size:.86rem;font-weight:700}
.dato-sub{font-size:.76rem;color:var(--gris)}
.tabla-scroll{overflow-x:auto;max-width:900px}
.tabla-retencion{border-collapse:collapse;width:100%;font-size:.9rem;background:#fff;
  border:1px solid var(--linea);border-radius:12px}
.tabla-retencion th,.tabla-retencion td{padding:10px 14px;text-align:left;
  border-bottom:1px solid #f0f2f7}
.tabla-retencion th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gris);font-weight:700;white-space:nowrap}
.tabla-retencion td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.tabla-retencion .crudo{color:var(--gris);font-weight:400;font-size:.82em}
.tabla-retencion .pronto{color:var(--gris);font-weight:400;font-style:italic}
.card-leyenda{background:#fff;border:1px solid var(--linea);border-radius:14px;
  padding:16px 20px;margin:22px 0 0;max-width:900px}
.card-leyenda h2{font-size:1rem;margin:0 0 10px}
.card-leyenda dt{font-weight:700;font-size:.88rem;margin-top:8px}
.card-leyenda dd{margin:2px 0 0;color:var(--gris);font-size:.86rem;line-height:1.5}
.medio-etiqueta{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris);margin-bottom:4px}
.medio-destino{display:inline-block;background:var(--marca-suave);color:var(--marca-osc);
  padding:6px 10px;border-radius:8px;font-size:.85rem;word-break:break-all}
.filtros-retencion a strong{margin-left:6px;color:var(--marca-osc)}
.titulo-grupo{font-size:1.1rem;margin:22px 0 12px}
.titulo-grupo small{color:var(--gris);font-weight:400}
.medio-form .btn{display:inline-block;text-align:center}
.btn-enlace{background:none;border:0;padding:4px 0 0;color:var(--gris);
  font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.btn-enlace:hover{color:var(--tinta)}
.aviso-email .btn-enlace{color:#8a5a10}
.cupo-fin .btn-principal{max-width:320px;margin:14px auto 0}
.cupo-sec{margin-top:12px!important;font-size:.9rem}
.cupo-sec a{color:var(--gris)}
.cupo-restante{text-align:center;font-size:.82rem;color:var(--gris);margin:10px 0 0}
.cupo-restante a{color:var(--azul);font-weight:700}
.aviso-plan{background:var(--marca-suave);border:1px solid var(--marca-linea);
  color:var(--marca-osc);border-radius:12px;padding:12px 14px;margin:0 0 16px;font-size:.92rem}
/* Comparativa de planes */
.planes{display:grid;gap:14px;margin:0 0 18px}
@media (min-width:760px){ .planes{grid-template-columns:repeat(3,1fr);align-items:start} }
.plan{background:var(--card);border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px;box-shadow:var(--sombra);position:relative}
.plan-destacado{border-color:var(--marca);border-width:2px}
.plan-etiqueta{position:absolute;top:-11px;left:18px;background:var(--marca);color:#fff;
  font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:999px}
.plan-nombre{font-size:1rem;margin:0;color:var(--gris);text-transform:uppercase;
  letter-spacing:.5px;font-weight:700}
.plan-precio{font-size:2rem;font-weight:800;color:var(--tinta);margin:.1em 0 .5em}
.plan-precio small{font-size:.9rem;color:var(--gris);font-weight:600}
.plan-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.plan-lista li{font-size:.92rem;line-height:1.4}
.plan-lista li.no{color:var(--gris)}
.planes-pronto{background:#fdf3e0;border:1px solid #f0d9a8;border-radius:12px;
  padding:14px 16px;text-align:center}
.planes-pronto p{margin:0 0 12px;color:#8a6410;font-size:.92rem}
.planes-pronto .btn-principal{max-width:320px;margin:0 auto}

/* ---- Práctica temática ---- */
.modo-tema{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--marca-suave);border:1px solid var(--marca-linea);color:var(--azul);border-radius:12px;
  padding:10px 14px;margin:0 0 12px;font-size:.9rem}
.modo-tema-salir{color:var(--azul);font-weight:700;text-decoration:none;white-space:nowrap}
.modo-tema-salir:hover{text-decoration:underline}

/* ---- Escritorio: práctica a dos columnas (responder y ver la explicación sin scroll) ---- */
.c-izq,.c-der{display:contents}   /* en móvil no cambian nada: los hijos fluyen igual */
@media (min-width: 900px){
  .app{max-width:1060px}
  .topbar{padding:10px 0 6px}
  /* En escritorio sobra sitio: la marca puede respirar (en móvil va apretada
     para no robarle ancho al mensaje de preparación). */
  .logo-top{height:38px;max-width:140px}
  .logo-top-texto{font-size:1.25rem}
  #tarjeta{display:grid;grid-template-columns:1.05fr .95fr;column-gap:36px;
    align-items:start;padding:24px 28px}
  #tarjeta .c-izq,#tarjeta .c-der{display:block;min-width:0}
  #tarjeta .vacio{grid-column:1 / -1}
  /* pie (nº de pregunta + reportar): a lo ancho de las 2 columnas, no las ensancha */
  #tarjeta .pie-pregunta{grid-column:1 / -1;border-top:1px solid var(--linea);padding-top:10px}
  #tarjeta .feedback{margin-top:0}
  #tarjeta .img-pregunta{max-height:min(220px,28vh);width:auto;max-width:100%}
  #tarjeta .tutor-hilo{max-height:200px}
  /* el resto de tarjetas del alumno (simulacro, etc.) quedan centradas y compactas */
  .tarjeta:not(#tarjeta){max-width:640px;margin-left:auto;margin-right:auto}
  .modo-tema{max-width:1060px}
}

/* ---- Pantallas poco altas (portátiles con escalado): compactar para que quepa todo ---- */
@media (min-width: 900px) and (max-height: 780px){
  .topbar{padding:8px 0 4px}
  #tarjeta{padding:16px 22px;margin-top:8px}
  .enunciado{font-size:1.15rem;margin:.1em 0 .6em}
  .opciones{gap:8px}
  .opcion{padding:11px 13px;font-size:.95rem}
  .opcion .letra{width:26px;height:26px}
  .explicacion{padding:12px 14px;margin-bottom:12px}
  .explicacion p{font-size:.98rem}
  .feedback{margin:0 0 8px}
  .btn-principal{padding:12px}
  #tarjeta .img-pregunta{max-height:24vh;margin:4px auto 10px}
}

/* ---- Aviso de «hay más abajo» ----
   Con imagen y opciones de texto largo el contenido no cabe en pantalla, y
   comprimir no lo arregla (haría las señales ilegibles). El riesgo real no es
   tener que bajar: es que la pantalla PAREZCA completa y el alumno no vea que
   existe una tercera opción. Este degradado aparece solo si queda contenido por
   debajo, y se apaga al llegar al final. */
.aviso-scroll{position:fixed;left:0;right:0;bottom:57px;height:44px;z-index:4;
  pointer-events:none;opacity:0;transition:opacity .2s ease;
  background:linear-gradient(to bottom,rgba(244,246,251,0),var(--fondo))}
body.hay-mas .aviso-scroll{opacity:1}
.aviso-scroll::after{content:"▾";position:absolute;left:50%;bottom:2px;
  transform:translateX(-50%);font-size:1rem;color:var(--gris);opacity:.75}
@media (prefers-reduced-motion:reduce){ .aviso-scroll{transition:none} }

/* ---- Móviles poco altos (iPhone SE y similares) ----
   Con una pregunta CON imagen no cabían las tres opciones: la C quedaba entera
   por debajo de la barra de navegación y el alumno no veía que existía. El
   espacio se recupera repartido (imagen, enunciado y opciones) para no
   sacrificar solo la imagen, que en las señales es la pregunta misma. */
@media (max-width: 899px) and (max-height: 720px){
  .img-pregunta{max-height:21vh;margin:4px auto 8px}
  .enunciado{font-size:1.15rem;margin:.1em 0 .6em}
  .opciones{gap:8px}
  .opcion{padding:12px;font-size:.96rem}   /* sigue por encima de los 44px táctiles */
  .tarjeta{padding:14px}
  .app{padding-bottom:118px}
}

/* ---- Ajustes del superadmin ---- */
.form-ajustes{max-width:760px}
.ajustes-seccion{background:#fff;border:1px solid var(--linea);border-radius:14px;
  padding:18px 20px;margin:0 0 18px}
.ajustes-seccion legend{font-weight:800;padding:0 8px}
.ajuste-fila{display:grid;grid-template-columns:280px 1fr;gap:4px 18px;align-items:center;
  padding:10px 0;border-bottom:1px solid #f0f2f7}
.ajuste-fila:last-child{border-bottom:none}
.ajuste-nombre{display:block;font-weight:700;font-size:.92rem}
.ajuste-ayuda{display:block;color:var(--gris);font-size:.78rem;margin-top:2px}
.ajuste-fila input[type=text],.ajuste-fila input[type=number],.ajuste-fila textarea{
  width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:9px;font-size:.92rem}
.ajuste-defecto{grid-column:2;font-size:.74rem;color:#9aa3b2}
.ajuste-defecto code{background:#f0f3f9;padding:1px 6px;border-radius:5px}
.ajuste-check{font-size:.92rem}
.form-ajustes .nota{color:var(--gris);font-size:.83rem}
.estado-clave{font-size:.85rem;line-height:1.45;padding:10px 12px;border-radius:10px;
  margin:0 0 12px;border:1px solid}
.estado-clave code{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:5px}
.estado-ok{background:var(--marca-suave);border-color:var(--marca-linea);color:var(--marca-osc)}
.estado-falta{background:#fdf3e3;border-color:#f0d5a8;color:#8a5a10}
@media(max-width:720px){.ajuste-fila{grid-template-columns:1fr}.ajuste-defecto{grid-column:1}}

/* ---- Imágenes pendientes: pregunta completa + preview ---- */
.medio-opciones{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.medio-opciones li{font-size:.86rem;color:var(--tinta);padding:5px 9px;border:1px solid var(--linea);
  border-radius:8px;background:#fbfcfe}
.medio-opciones li.ok{border-color:var(--verde);background:#f0faf3}
.medio-opciones li b{color:var(--azul);margin-right:4px}
.medio-ok{color:var(--verde);font-weight:700;font-size:.76rem;margin-left:6px}
.medio-preview{display:inline-block;margin-top:8px;font-size:.86rem;font-weight:600;color:var(--azul);text-decoration:none}
.medio-preview:hover{text-decoration:underline}

/* ---- Página de vista previa (como la ve el alumno) ---- */
.preview-body{background:#eef1f6;padding:18px;max-width:none}
.preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  max-width:960px;margin:0 auto 6px;flex-wrap:wrap}
.preview-meta{font-size:.85rem;color:var(--gris);font-weight:600}
.preview-nota{max-width:960px;margin:0 auto 16px;font-size:.85rem;color:var(--gris)}
.preview-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;
  max-width:960px;margin:0 auto;align-items:start}
.preview-marco{background:transparent}
.preview-etiqueta{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--gris);margin:0 0 6px 2px}
.preview-marco .tarjeta{margin-top:0}

/* ---- Listados de paneles: referencia, acciones, barra clicable ---- */
.td-ref{font-size:.76rem;color:var(--gris);max-width:180px}
.td-acciones{white-space:nowrap;display:flex;gap:10px;align-items:center}
.td-acciones .inline{display:inline;margin:0}
.mini.peligro{color:var(--rojo);background:none;border:none;cursor:pointer;padding:0;font-family:inherit}
.mini.peligro:hover{text-decoration:underline}
.prep-link{text-decoration:none;color:inherit;display:block}
.prep-link:hover .prep-barra{outline:2px solid var(--marca-linea)}

/* ---- Banco: cobertura plegable, acciones en lote, toggle de estado ---- */
.cobertura-panel{background:#fff;border-radius:12px;box-shadow:var(--sombra);
  padding:8px 16px;margin:12px 0 4px}
.cobertura-panel>summary{cursor:pointer;font-size:.9rem;color:var(--gris);
  list-style:none;padding:4px 0}
.cobertura-panel>summary::-webkit-details-marker{display:none}
.cobertura-panel>summary strong{color:var(--tinta)}
.cobertura-panel[open]>summary{margin-bottom:6px}
.cob-nombre{text-decoration:none;color:var(--tinta)}
.cob-nombre:hover{color:var(--azul)}
.cob-delta{font-size:.82rem;font-weight:700;white-space:nowrap;min-width:56px;text-align:right}
.cob-delta.pos{color:var(--verde)}
.cob-delta.neg{color:var(--rojo)}

.barra-lote{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 8px}
.barra-lote select{padding:8px 10px;border:1px solid var(--linea);border-radius:9px;background:#fff}
.lote-cuenta{color:var(--gris);font-size:.85rem;min-width:120px}
/* «Las N del filtro»: la casilla y su texto, juntos y en una sola linea. Suelto,
   el texto se caia debajo de la casilla y parecia otra cosa. */
.lote-todas{display:inline-flex;flex-direction:row;align-items:center;gap:6px;
  white-space:nowrap;font-size:.85rem;color:var(--gris);cursor:pointer;font-weight:400}
.lote-todas input{margin:0}

.tabla-scroll{overflow-x:auto}
.th-check,.td-check{width:34px;text-align:center}
.td-ojo{text-align:center}
.td-ojo a{text-decoration:none;font-size:1.05rem}
.chip-ref{display:inline-block;background:var(--marca-suave);color:var(--azul);border-radius:7px;
  padding:1px 6px;margin:0 4px 3px 0;font-size:.72rem;text-decoration:none;white-space:nowrap}
.chip-ref:hover{background:#dde8ff}

.toggle-estado{border:none;border-radius:999px;padding:3px 10px;font-size:.72rem;
  font-weight:700;cursor:pointer;font-family:inherit}
.toggle-estado.on{background:#eafaf0;color:var(--verde)}
.toggle-estado.off{background:#fdeceb;color:var(--rojo)}
.toggle-estado:hover{filter:brightness(.96)}

/* ---- Reportar pregunta (alumno, discreto) ---- */
/* Pie de la corrección: nº de pregunta a la izquierda, reportar a la derecha */
.pie-pregunta{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:16px}
.pregunta-ref{flex:none;font-size:.72rem;color:var(--gris);opacity:.55;
  font-variant-numeric:tabular-nums}
#reporte-zona{flex:1;min-width:0;text-align:right}
.btn-reportar{background:none;border:none;color:var(--gris);font-size:.72rem;
  cursor:pointer;padding:2px 0;font-family:inherit;opacity:.5}
.btn-reportar:hover{opacity:1;text-decoration:underline;color:var(--rojo)}
.reporte-form{display:flex;flex-direction:column;gap:8px;background:#fbfbfd;
  border:1px solid var(--linea);border-radius:12px;padding:12px;margin-top:6px}
.reporte-lbl{font-size:.82rem;font-weight:600;color:var(--tinta)}
.reporte-lbl span{color:var(--gris);font-weight:400}
.reporte-form textarea{border:1px solid var(--linea);border-radius:9px;padding:8px;
  font-family:inherit;font-size:.9rem;resize:vertical}
.reporte-acciones{display:flex;justify-content:flex-end}
.reporte-ok{color:var(--verde);font-size:.85rem;font-weight:600;margin-top:8px}

/* ---- Reportes (panel superadmin) ---- */
.reporte-card{background:#fff;border-radius:12px;box-shadow:var(--sombra);
  padding:14px 16px;margin:12px 0;border-left:4px solid #e0992b}
.reporte-card-cab{display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;color:var(--gris)}
.reporte-cuenta{font-weight:700;color:#b9791a}
.reporte-enun{margin:6px 0 10px}
.reporte-enun a{color:var(--tinta);text-decoration:none;font-weight:600}
.reporte-enun a:hover{color:var(--azul)}
.reporte-motivos{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.reporte-motivos li{background:#f7f9fc;border-radius:9px;padding:8px 10px;font-size:.88rem}
.reporte-fecha{display:block;font-size:.72rem;color:var(--gris);margin-bottom:2px}
.reporte-texto.sin{color:var(--gris);font-style:italic}
.reporte-card-pie{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.reporte-card-pie .inline{display:inline;margin:0}

/* ====== Accesibilidad transversal ====== */
/* Foco visible y consistente en todo lo interactivo (teclado). */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--azul);outline-offset:2px;border-radius:8px}
/* El resultado recibe el foco al corregir: que no dibuje un recuadro feo. */
#feedback-resultado:focus{outline:none}
#feedback-resultado:focus-visible{outline:3px solid var(--azul);outline-offset:4px}

/* Estado de carga: mientras htmx trabaja, se ve y no se puede responder dos veces. */
.opcion[disabled],button[disabled]{opacity:.55;cursor:progress}
.opciones.htmx-request{position:relative}
.opcion.htmx-request{border-color:var(--azul);background:#f2fbf7}
.opcion.htmx-request .letra{background:var(--azul);color:#fff}

/* Áreas táctiles mínimas de 44 px en dispositivos de dedo (WCAG 2.5.5). */
@media (pointer:coarse){
  .btn-reportar,.modo-tema-salir,.btn-tutor,.chip-sug,.enlaces-legales a{
    min-height:44px;display:inline-flex;align-items:center}
  .rej-celda{min-width:44px;min-height:44px}
  .btn-marcar{min-height:44px}
  .sim-rendirse button{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
}

/* Respeta «reducir movimiento» del sistema: sin transiciones ni parpadeos. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .sim-timer.agotando{animation:none!important}
}
.sec-titulo{font-size:1.05rem;margin:22px 0 8px}

/* ---- Mi progreso: cifras accionables, no un muro de porcentajes ---- */
.stat{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);padding:16px;text-align:center}

.vacio-suave{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:18px;text-align:center}
.vacio-suave p{margin:0 0 12px;color:var(--gris)}

/* ================= Mi progreso (visual) ================= */
/* --- Medidor circular de preparación --- */
.gauge-card{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:18px;text-align:center;margin:12px 0 14px}
.gauge{position:relative;width:180px;height:180px;margin:2px auto 0}
.gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge-track{fill:none;stroke:var(--linea);stroke-width:11}
.gauge-arc{fill:none;stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.gauge-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-num{font-size:2.7rem;font-weight:800;color:var(--tinta);line-height:1}
.gauge-num small{font-size:1.2rem;font-weight:700;color:var(--gris)}
.gauge-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);margin-top:2px}
.gauge-msg{margin:12px 0 0;font-weight:600;color:var(--gris)}
/* color del anillo y de la etiqueta por estado */
.gauge-calculando .gauge-arc{stroke:#aebfd8}   .gauge-calculando .gauge-lbl{color:var(--azul)}
.gauge-bajo  .gauge-arc{stroke:var(--rojo)}    .gauge-bajo  .gauge-lbl{color:var(--rojo)}
.gauge-medio .gauge-arc{stroke:#e0992b}        .gauge-medio .gauge-lbl{color:#b9791a}
.gauge-alto  .gauge-arc{stroke:#5bbf6a}        .gauge-alto  .gauge-lbl{color:var(--verde)}
.gauge-listo .gauge-arc{stroke:var(--verde)}   .gauge-listo .gauge-lbl{color:var(--verde)}

/* --- Cifras rápidas --- */
/* --- Constancia: racha + semana (estilo apps de aprendizaje) --- */
/* Constancia: una TIRA, no una tarjeta. Va arriba (es lo primero que mira
   quien lleva racha) pero en una linea y pequena: el protagonista de la pagina
   es el medidor, y una tarjeta con un numero gigante se lo comia. */
.constancia-tira{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:0 2px 10px}
.constancia-izq{display:flex;flex-direction:column;gap:2px;min-width:0}
.semana-n{font-size:.68rem;color:var(--gris);line-height:1.2}
.racha{display:flex;align-items:baseline;gap:4px;opacity:.5;filter:grayscale(1)}
.racha-viva{opacity:1;filter:none}
.racha-fuego{font-size:1rem;line-height:1}
.racha-num{font-size:1.15rem;font-weight:800;color:var(--tinta);line-height:1}
.racha-lbl{color:var(--gris);font-size:.74rem;font-weight:700}
.semana{display:flex;gap:5px}
.dia{display:flex;flex-direction:column;align-items:center;gap:2px}
.dia-letra{font-size:.6rem;font-weight:700;color:var(--gris);line-height:1}
/* Puntos, sin el ✓ de dentro: a 12 px no se leia y solo ensuciaba la forma */
.dia-punto{width:12px;height:12px;border-radius:50%;background:var(--fondo);
  border:1.5px solid var(--linea);display:block}
.dia-hecho .dia-punto{background:var(--marca);border-color:var(--marca)}
.dia-hoy .dia-letra{color:var(--tinta)}
.dia-hoy .dia-punto{border-color:var(--marca)}

/* Requisitos que faltan para el visto bueno (bajo el medidor).
   Eran dos frases en una lista. En horizontal y no en aros: encima ya hay un
   circulo grande y tres circulos apilados compiten entre si; asi ademas las
   dos barras empiezan en la misma linea y se comparan solas. */
.req-listo{margin:12px auto 0;max-width:340px;background:#f6f8fc;
  border:1px solid var(--linea);border-radius:12px;padding:10px 14px 12px}
.req-tit{margin:0 0 8px;font-size:.8rem;font-weight:700;color:var(--tinta);text-align:center}
.req-fila + .req-fila{margin-top:11px}
.req-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.req-que{font-size:.78rem;font-weight:700;color:var(--tinta)}
.req-val{font-size:.82rem;font-weight:800;color:var(--azul);white-space:nowrap}
.req-val small{font-size:.72rem;font-weight:700;color:var(--gris)}
.req-barra{position:relative;height:10px;background:#dfe5ee;border-radius:999px;overflow:hidden}
.req-relleno{height:100%;background:var(--azul);border-radius:999px;transition:width .6s ease}
/* La meta: una linea sobre la barra, para ver cuanto falta sin leer el numero.
   Va por encima del relleno (overflow recorta, asi que al 100% no asoma). */
.req-meta{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--tinta);
  opacity:.45;border-radius:2px}
/* Un bloque por simulacro: se cuentan, no se miden */
.req-bloques{display:flex;gap:4px}
.req-bloque{flex:1;height:10px;background:#dfe5ee;border-radius:3px}
.req-bloque.hecho{background:var(--azul)}
.req-bloques .req-barra{flex:1}
/* Cumplido: no desaparece (media foto no dice si vas bien), se pone en verde */
.req-ok .req-relleno, .req-ok .req-bloque.hecho{background:var(--verde)}
.req-ok .req-val{color:var(--verde)}
.req-cta{display:block;text-align:center;margin-top:11px;font-size:.82rem;
  color:var(--azul);font-weight:700}

/* --- Gráfica de barras de simulacros --- */
.sim-card{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);padding:16px 14px 10px}
.chart-plot{position:relative;height:150px;display:flex;align-items:flex-end;gap:8px;
  padding:0 2px;border-bottom:2px solid var(--linea)}
.chart-col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
.chart-bar{width:100%;max-width:38px;border-radius:8px 8px 0 0;position:relative;
  min-height:4px;display:flex;justify-content:center;transition:height .5s ease}
.chart-bar.apto{background:linear-gradient(var(--verde),#57bd77)}
.chart-bar.noapto{background:linear-gradient(#e8615e,var(--rojo))}
.chart-val{position:absolute;top:-18px;font-size:.72rem;font-weight:800;color:var(--tinta)}
.chart-umbral{position:absolute;left:0;right:0;border-top:2px dashed #9aa6b6;z-index:1}
.chart-umbral-lbl{position:absolute;right:0;top:-9px;background:var(--card);padding:0 4px;
  font-size:.66rem;font-weight:700;color:var(--gris)}
.chart-x{display:flex;gap:8px;padding:4px 2px 0}
.chart-x span{flex:1;text-align:center;font-size:.66rem;color:var(--gris)}
.sim-resumen{margin:10px 2px 2px;font-size:.9rem;color:var(--gris)}
.sim-resumen strong{color:var(--tinta)}
.sim-resumen a{color:var(--azul);font-weight:700;text-decoration:none;white-space:nowrap}

.repaso-nota{background:var(--marca-suave);border:1px solid var(--marca-linea);border-radius:12px;
  padding:12px 14px;margin-top:14px;font-size:.9rem;color:var(--marca-osc)}
.repaso-nota strong{font-weight:800}

/* Invitación a instalar la app: discreta y al final de la pantalla, para que no
   compita con la pregunta. Arranca oculta; la enseña el script solo si de
   verdad se puede instalar. */
.instalar{position:relative;background:#fff;border:1px solid var(--linea);
  border-radius:14px;padding:14px 40px 14px 14px;margin:14px 0 4px}
.instalar-tit{font-weight:800;margin:0 0 4px;font-size:.95rem}
.instalar-txt{color:var(--gris);font-size:.86rem;line-height:1.45;margin:0}
.instalar-btn{margin-top:10px}
.instalar-cerrar{position:absolute;top:6px;right:8px;background:none;border:none;
  color:var(--gris);font-size:1.3rem;line-height:1;cursor:pointer;padding:4px 8px}
.instalar-cerrar:hover{color:var(--tinta)}
.ios-icono{display:inline-flex;vertical-align:-2px;color:var(--azul)}

/* Pestañas de los avisos: pendientes / ya resueltos */
.tabs-reportes{display:flex;gap:6px;margin:10px 0 4px}
.tabs-reportes a{padding:7px 13px;border-radius:9px;font-size:.88rem;color:var(--gris);
  text-decoration:none;border:1px solid var(--linea);background:#fff}
.tabs-reportes a.on{color:var(--tinta);font-weight:700;border-color:var(--marca-linea);
  background:var(--marca-suave)}
/* «Marcar resuelto» se pulsaba sin querer por estar pegado a «Ver» */
.reporte-card-pie .separado{margin-left:auto}

/* --- Hoja de imágenes: revisar todas de un vistazo, agrupadas por imagen --- */
.hoja-imagenes{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.hoja-tarjeta{background:var(--card);border:1px solid var(--linea);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
/* fondo oscuro: muchos medios son pictogramas o testigos sobre negro y sin esto
   se pierden contra la tarjeta blanca */
.hoja-tarjeta img{width:100%;height:190px;object-fit:contain;background:#11161f;display:block}
.hoja-cuerpo{padding:10px 12px 14px}
.hoja-nombre code{font-size:.76rem;color:var(--gris);word-break:break-all}
.hoja-preg{border-top:1px solid var(--linea);margin-top:9px;padding-top:9px;font-size:.92rem}
.hoja-preg:first-of-type{border-top:0;margin-top:6px}
.hoja-id{font-size:.78rem;color:var(--marca-osc);text-decoration:none;font-weight:600}
.hoja-tema{font-size:.72rem;color:var(--gris);margin-left:6px}
.hoja-correcta{color:var(--marca-osc);margin-top:3px}

/* «Hoy llevas N», bajo la corrección: discreto, que no compita con el botón */
.cuenta-hoy{color:var(--gris);font-size:.85rem;margin:12px 0 0;text-align:center}
.cuenta-hoy strong{color:var(--tinta)}

/* Se oye pero no se ve: para lo que un lector de pantalla necesita y en pantalla
   sobra. No vale display:none ni visibility:hidden, que lo esconden tambien de
   los lectores; hay que sacarlo del flujo dejandolo en el arbol. */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Revision del simulacro: todo el examen en una sola pagina. Los fallos vienen
   abiertos y los aciertos plegados, asi la vista se va sola a lo que importa
   sin esconder el resto. */
.rev-lista{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.rev-bloque{background:var(--card);border-radius:14px;box-shadow:var(--sombra);
  padding:14px 16px;scroll-margin-top:70px}
.rev-bloque.ko{border-left:4px solid var(--rojo)}
.rev-bloque.ok{border-left:4px solid var(--verde)}
.rev-bloque>summary{cursor:pointer;display:flex;align-items:center;gap:10px;
  list-style:none;font-size:.9rem}
.rev-bloque>summary::-webkit-details-marker{display:none}
.rev-bloque>summary::after{content:"▾";margin-left:auto;color:var(--gris)}
.rev-bloque[open]>summary::after{content:"▴"}
.rev-bloque[open]>summary{margin-bottom:10px}
/* Las acciones del final, ya revisado el examen */
.sim-acciones-fin{margin-top:22px}