:root {
  --negro: #111; --naranja: #f7931e; --magenta: #c8338c; --verde: #2e9e4f; --amarillo: #e0b000; --rojo: #d93636;
  --gris: #5f6368; --enlace: #0b57d0; --fondo: #f6f6f7; --tarjeta: #fff; --borde: #dcdce0; --texto: #111; --sobre-negro: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #121214; --tarjeta: #1d1d21; --borde: #33333a; --texto: #f2f2f2; --gris: #a0a0a8; --negro: #f2f2f2; --rojo: #ff6b6b; --enlace: #8ab4f8; --sobre-negro: #111; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--fondo); color: var(--texto); }
header.barra { background: #000; color: #fff; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
header.barra b { color: var(--naranja); }
header.barra a { color: #fff; }
header.barra button:not(.secundario) { background: var(--naranja); color: #111; }
a { color: var(--enlace); }
main { max-width: 720px; margin: 0 auto; padding: 16px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 0 0 8px; }
.enunciado { font-size: 20px; white-space: pre-wrap; margin: 0 0 12px; }
button, input, textarea, select { font: inherit; }
button { border: 0; border-radius: 8px; padding: 10px 14px; background: var(--negro); color: var(--sobre-negro); cursor: pointer; }
button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
button:disabled { opacity: .45; cursor: default; }
.opcion { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 12px; background: var(--tarjeta); color: var(--texto); border: 3px solid var(--borde); border-radius: 8px; }
.opcion.elegida { border-color: var(--naranja); }
.opcion:disabled { opacity: 1; cursor: default; background: var(--fondo); }
.marca { display: block; font-weight: bold; font-size: 14px; }
.opcion .marca:empty { display: none; }
.opcion.correcta { border-color: var(--verde); }
.barra-voto { height: 10px; background: var(--naranja); border-radius: 5px; margin-top: 6px; }
textarea, input[type=text] { width: 100%; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--tarjeta); color: var(--texto); }
.semaforo { display: flex; gap: 8px; }
.semaforo button { flex: 1; background: var(--tarjeta); color: var(--texto); border: 3px solid var(--borde); }
.semaforo button[aria-pressed=true] { font-weight: bold; background: var(--borde); }
.semaforo button.activo[data-color=verde] { border-color: var(--verde); }
.semaforo button.activo[data-color=amarillo] { border-color: var(--amarillo); }
.semaforo button.activo[data-color=rojo] { border-color: var(--rojo); }
.aviso { color: var(--gris); font-size: 14px; }
.error { color: var(--rojo); }
.conexion { color: var(--rojo); font-size: 14px; min-height: 1em; margin: 0 0 8px; }
.reloj { font-size: 64px; font-weight: bold; text-align: center; font-variant-numeric: tabular-nums; }
.respuestas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.respuesta { background: var(--tarjeta); border: 1px solid var(--borde); border-left: 4px solid var(--magenta); border-radius: 8px; padding: 10px; }
.respuesta small { color: var(--gris); display: block; margin-bottom: 4px; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--borde); }
.punto.verde { background: var(--verde); } .punto.amarillo { background: var(--amarillo); } .punto.rojo { background: var(--rojo); }
.actual { outline: 2px solid var(--naranja); border-radius: 8px; padding: 6px; }
.oculta { opacity: .45; text-decoration: line-through; }
body.proyector main { max-width: 1200px; }
body.proyector .enunciado { font-size: 40px; }
body.proyector h1 { font-size: 36px; }
body.proyector .reloj { font-size: 160px; }
body.proyector .opcion { font-size: 28px; }
body.panel main { max-width: 1400px; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { body.panel main { grid-template-columns: 1fr; } }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }