:root {
  --navy: #1F3864; --bg: #EEF2F8; --card: #FFFFFF; --line: #D5DCE8; --txt: #1B2233; --muted: #5F6B80;
  --azul: #1565C0; --azulbg: #DCEBFF; --amar: #F9A825; --amarbg: #FFF1BF;
  --rojo: #C62828; --rojobg: #FDE3E3; --verde: #2E7D32; --verdebg: #E2F4E4;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--txt); font-size: 16px; }
.barra { background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; position: sticky; top: 0; z-index: 5; }
.marca { display: flex; align-items: baseline; gap: 10px; }
.logo { font-weight: 800; letter-spacing: 2px; font-size: 20px; }
.sub { opacity: .8; font-size: 13px; }
.quien { font-size: 13px; display: flex; gap: 10px; align-items: center; }
.quien button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
main { max-width: 980px; margin: 0 auto; padding: 16px; }
.cargando { color: var(--muted); text-align: center; margin-top: 60px; }
h1 { font-size: 22px; margin: 8px 0 14px; color: var(--navy); }
h2 { font-size: 17px; margin: 18px 0 10px; color: var(--navy); }
.tarjeta { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
button, .boton { font: inherit; border: 0; border-radius: 9px; padding: 10px 16px; cursor: pointer; background: var(--azul); color: #fff; font-weight: 600; }
button.sec, .boton.sec { background: var(--azulbg); color: var(--azul); }
.boton { display: inline-block; text-decoration: none; }
.boton.dorado { background: var(--amar); color: #1B2233; }
.boton.chico { padding: 7px 12px; font-size: 13px; }
.tarjeta.cta { border: 2px solid var(--amar); background: #FFFBEA; }
button.peligro { background: var(--rojo); }
button:disabled { opacity: .5; cursor: default; }
input, select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; width: 100%; background: #fff; }
label { display: block; font-size: 14px; color: var(--muted); margin: 10px 0 4px; }
.chip { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--azulbg); color: var(--azul); font-weight: 600; }
.chip.amar { background: var(--amarbg); color: #8a5d00; } .chip.verde { background: var(--verdebg); color: var(--verde); } .chip.rojo { background: var(--rojobg); color: var(--rojo); }
.muted { color: var(--muted); font-size: 14px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.login { max-width: 380px; margin: 40px auto; }
.error { color: var(--rojo); font-size: 14px; margin-top: 8px; min-height: 1em; }
.demo { background: var(--amarbg); border: 1px dashed var(--amar); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-top: 14px; }
.aviso { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--txt); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 20; max-width: 92vw; }

/* --- examen --- */
.examen { user-select: none; -webkit-user-select: none; }
.reloj { position: sticky; top: 50px; z-index: 4; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tiempo { font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 800; color: var(--navy); }
.tiempo.poco { color: var(--rojo); }
.estado-guardado { font-size: 13px; }
.estado-guardado.ok { color: var(--verde); } .estado-guardado.fuera { color: var(--rojo); font-weight: 600; }
.lectura { background: #F7F9FD; border-left: 4px solid var(--azul); padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; white-space: pre-wrap; line-height: 1.5; font-size: 15px; max-height: 40vh; overflow: auto; }
.enunciado { font-size: 18px; line-height: 1.5; white-space: pre-wrap; margin: 6px 0 14px; }
.opcion { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: #fff; color: var(--txt); border: 2px solid var(--line); margin-bottom: 8px; font-weight: 400; padding: 12px 14px; }
.opcion .letra { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-weight: 700; }
.opcion.elegida { border-color: var(--azul); background: var(--azulbg); }
.opcion.elegida .letra { background: var(--azul); color: #fff; }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.mapa button { padding: 7px 0; background: #fff; color: var(--txt); border: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.mapa button.hecha { background: var(--azulbg); border-color: var(--azul); color: var(--azul); }
.mapa button.actual { outline: 3px solid var(--amar); }
.marca-agua { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: .07; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 60px 80px; padding: 40px; transform: rotate(-18deg) scale(1.3); font-size: 15px; font-weight: 700; color: var(--navy); }

/* --- resultado --- */
.grande { font-size: 44px; font-weight: 800; color: var(--navy); }
.barra-prog { height: 10px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.barra-prog > div { height: 100%; background: var(--azul); }
.det { border-top: 1px solid var(--line); padding: 12px 0; }
.det .op { padding: 4px 8px; border-radius: 6px; margin: 2px 0; font-size: 15px; }
.det .op.bien { background: var(--verdebg); } .det .op.mal { background: var(--rojobg); }
.solucion { background: #F7F9FD; padding: 8px 12px; border-radius: 8px; font-size: 14px; margin-top: 6px; white-space: pre-wrap; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
@media (max-width: 600px) { .enunciado { font-size: 16px; } .tiempo { font-size: 20px; } .sub { display: none; } }
@media print { body { display: none; } }