:root {
  /* TuTestDGT: los colores de las señales. «--rojo» es el nombre heredado (BomberOpo) del color de MARCA
     (botones, pestaña activa…): aquí el azul de las señales de indicación. El rojo de las señales de prohibición va en
     --error (fallos, «no apto»); el amarillo de las marcas viales, en --ambar. */
  --fondo: #f3f6fb;
  --fondo-2: #e7edf6;
  --panel: #ffffff;
  --borde: #d6deea;
  --texto: #111827;
  --suave: #4b5563;
  --rojo: #0a4ea3;
  --rojo-oscuro: #083d80;
  --ambar: #ffc400;
  --verde: #15803d;
  --verde-suave: #dcfce7;
  --rojo-suave: #e3edfb;
  --error: #d7191c;
  --error-suave: #fde7e7;
  --agua: #0ea5e9;
  --sombra: 0 1px 2px rgba(10, 30, 60, .06), 0 6px 20px rgba(10, 30, 60, .07);
  --radio: 16px;
  --titulo: "Bebas Neue", "Bebas Neue respaldo", Impact, "Arial Narrow", sans-serif;
  color-scheme: light;
}
/* Velocidad (CLS, 15/10/2026): mientras llega Bebas Neue (font-display: swap), los titulares salen en Arial encogida a
   la anchura de Bebas (medido con sus métricas: 74 %) y con su misma altura de línea, así que al cambiar de fuente
   no se mueve nada. Liberation Sans = Arial en Linux; Roboto, en Android. */
@font-face {
  font-family: "Bebas Neue respaldo";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 74%;
  ascent-override: 121.6%;
  descent-override: 40.5%;
  line-gap-override: 0%;
}
/* El modo oscuro está al final del fichero («Modo oscuro»): solo con el botón de la cabecera */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--rojo); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; letter-spacing: .02em; line-height: 1.05; margin: 0 0 .4em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.45rem; }
main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; outline: none; min-height: 70vh; }
/* Velocidad (CLS): hasta que la app pinta la primera pantalla (en #app solo está el <noscript> o el esqueleto de carga),
   el pie y la tarjeta de la app quedan por debajo de la pantalla y no saltan cuando llega el contenido */
#app:has(> noscript:only-child), #app:has(> .esqueleto:only-child) { min-height: 100vh; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 16px; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 3px solid var(--rojo); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.marca-luz { width: 14px; height: 14px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0 var(--rojo); animation: rotativo 1.1s infinite; }
@keyframes rotativo { 0%,49% { background: var(--rojo); box-shadow: 0 0 14px 4px color-mix(in srgb, var(--rojo) 60%, transparent); } 50%,100% { background: #2563eb; box-shadow: 0 0 14px 4px rgba(37,99,235,.5); } }
.marca-texto { font-family: var(--titulo); font-size: 2rem; color: var(--rojo); line-height: 1; }
.marca-sub { font-size: .72rem; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; max-width: 9em; line-height: 1.15; }
.menu { display: flex; gap: 4px; flex-wrap: wrap; }
.menu a { text-decoration: none; color: var(--texto); font-weight: 600; font-size: .92rem; padding: 7px 11px; border-radius: 999px; }
.menu a:hover { background: var(--fondo-2); }
.menu a.activo { background: var(--rojo); color: #fff; }
.herramientas { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 1 1 260px; justify-content: flex-end; }
.buscador { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1.5px solid var(--borde); border-radius: 999px; padding: 6px 12px; flex: 1; max-width: 380px; }
.buscador:focus-within { border-color: var(--rojo); }
.buscador input { border: 0; background: none; outline: none; width: 100%; min-width: 0; }
.buscador kbd { font-size: .72rem; color: var(--suave); border: 1px solid var(--borde); border-radius: 5px; padding: 0 5px; }
.icono { background: var(--panel); border: 1.5px solid var(--borde); border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 1.05rem; flex: none; }

/* ---------- Piezas comunes ---------- */
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .08s, filter .15s; }
.boton:active { transform: translateY(1px) scale(.99); }
.boton:disabled { opacity: .5; cursor: default; }
.boton.rojo { background: var(--rojo); color: #fff; box-shadow: 0 4px 0 var(--rojo-oscuro); }
.boton.rojo:hover { filter: brightness(1.07); }
.boton.claro { background: var(--fondo-2); color: var(--texto); border: 1px solid var(--borde); }
.boton.grande { font-size: 1.15rem; padding: 16px 24px; }
.chip { display: inline-block; font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--fondo-2); color: var(--suave); border: 1px solid var(--borde); }
.chip.rojo { background: var(--rojo-suave); color: var(--rojo); border-color: transparent; }
.chip.verde { background: var(--verde-suave); color: var(--verde); border-color: transparent; }
.suave { color: var(--suave); }
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.migas { font-size: .9rem; margin-bottom: 10px; }
.migas a { text-decoration: none; }
mark { background: color-mix(in srgb, var(--ambar) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.vacio { text-align: center; padding: 40px 16px; color: var(--suave); }
.vacio .grande-emoji { font-size: 3.5rem; display: block; margin-bottom: 8px; }

/* ---------- Parque (inicio) ---------- */
.hero { position: relative; overflow: hidden; border-radius: 24px; padding: 28px 24px; color: #fff; background: radial-gradient(circle at 85% 20%, #ffc40040 0, transparent 45%), linear-gradient(135deg, #0a4ea3, #062a5c 72%); box-shadow: var(--sombra); display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: .15em; }
.hero p { margin: 0 0 14px; color: #dbe7fb; max-width: 46ch; }
.hero .boton.rojo { background: #fff; color: var(--rojo-oscuro); box-shadow: 0 4px 0 #b9cdee; }
.hero .boton.claro { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.camion { width: 100%; max-width: 380px; justify-self: center; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.camion .baliza-a { animation: baliza 0.8s infinite; }
.camion .baliza-b { animation: baliza 0.8s infinite .4s; }
@keyframes baliza { 0%,49% { opacity: 1; } 50%,100% { opacity: .15; } }
.camion .rueda { transform-box: fill-box; transform-origin: center; animation: girar 1s linear infinite; }
.hero.en-marcha .camion { animation: arrancar .6s ease-in-out infinite alternate; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes arrancar { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
.rango { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.22); border-radius: 14px; padding: 10px 14px; margin: 14px 0; max-width: 460px; }
.rango-emoji { font-size: 2rem; }
.rango-nombre { font-family: var(--titulo); font-size: 1.5rem; line-height: 1; }
.barra-xp { height: 8px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.barra-xp > i { display: block; height: 100%; background: linear-gradient(90deg, #ffd166, #ff9f1c); border-radius: 99px; transition: width .6s; }
.rango small { color: #cfe0fb; }

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.cifra { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); }
.cifra b { display: block; font-family: var(--titulo); font-size: 2.2rem; line-height: 1; color: var(--rojo); }
.cifra span { font-size: .85rem; color: var(--suave); font-weight: 600; }

.mapa-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.mapa { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.foco { position: relative; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel); display: grid; place-items: center; text-decoration: none; color: var(--texto); font-size: 1.5rem; transition: transform .12s; }
.foco:hover { transform: translateY(-2px) scale(1.05); z-index: 1; box-shadow: var(--sombra); }
.foco .num { position: absolute; top: 3px; left: 6px; font-size: .68rem; font-weight: 800; color: var(--suave); }
.foco.ardiendo .llama { display: inline-block; animation: llama 1.3s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.foco.ardiendo:nth-child(3n) .llama { animation-duration: 1.05s; }
.foco.ardiendo:nth-child(4n) .llama { animation-duration: 1.6s; }
@keyframes llama { from { transform: scale(.9) rotate(-5deg); filter: saturate(1); } to { transform: scale(1.12) rotate(5deg); filter: saturate(1.5); } }
.foco.controlado { background: color-mix(in srgb, var(--ambar) 16%, var(--panel)); }
.foco.apagado { background: var(--verde-suave); border-color: transparent; }
.foco.sin-datos { opacity: .45; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--suave); }

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.oposicion-datos li { margin: 4px 0; }

/* ---------- Temario ---------- */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.filtros button { border: 1.5px solid var(--borde); background: var(--panel); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.filtros button.activo { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.tarjeta-tema { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); transition: transform .12s, border-color .12s; }
.tarjeta-tema:hover { transform: translateY(-2px); border-color: var(--rojo); }
.tarjeta-tema .emoji { font-size: 2rem; line-height: 1; }
.tarjeta-tema h3 { font-family: Inter, sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0; margin: 2px 0 6px; line-height: 1.3; }
.tarjeta-tema .meta { display: flex; gap: 6px; flex-wrap: wrap; }
.anillo { --p: 0; flex: none; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--verde) calc(var(--p) * 1%), var(--fondo-2) 0); display: grid; place-items: center; margin-left: auto; }
.anillo span { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-size: .72rem; font-weight: 800; }

/* ---------- Tema ---------- */
.tema-cab { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.tema-cab .emoji-grande { font-size: 4rem; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
.tema-cab .acciones { margin-left: auto; }
.indice { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 6px; }
.indice a { text-decoration: none; font-weight: 600; font-size: .88rem; padding: 6px 12px; border-radius: 999px; background: var(--fondo-2); color: var(--texto); border: 1px solid var(--borde); }
.seccion { margin-top: 26px; scroll-margin-top: 90px; }
.resumen p { margin: 0 0 1em; max-width: 72ch; }
.claves { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.claves li { background: var(--panel); border: 1px solid var(--borde); border-left: 5px solid var(--rojo); border-radius: 10px; padding: 10px 12px; font-weight: 500; }
/* ⓘ junto a «Lo que cae en el examen»: caja que explica de dónde salen las claves (app.js: origenClaves) */
.info-claves { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-left: 4px; padding: 0; vertical-align: middle; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: var(--suave); font: italic 700 .95rem/1 Georgia, "Times New Roman", serif; cursor: pointer; }
.info-claves:hover, .info-claves[aria-expanded="true"] { color: var(--texto); background: var(--fondo-2); }
.origen-claves { margin: 0 0 12px; padding: 14px 16px; font-size: .92rem; max-width: 80ch; }
.origen-claves p { margin: 0 0 8px; }
.origen-claves p:last-child { margin: 0; }
.origen-claves ul { margin: 0 0 8px; padding-left: 1.2em; }
.origen-claves li { margin-bottom: 6px; }
.nota-caja { border-radius: var(--radio); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; }
.nota-caja .emoji { font-size: 1.8rem; line-height: 1; }
.nota-caja.truco { background: color-mix(in srgb, var(--ambar) 18%, var(--panel)); border: 1px dashed var(--ambar); }
.nota-caja.curiosidad { background: color-mix(in srgb, var(--agua) 14%, var(--panel)); border: 1px dashed var(--agua); }
.nota-caja p { margin: 2px 0 0; }
/* Explicación completa del tema (Premium, app.js pintarExplicacion): texto largo legible en móvil y en oscuro */
.expl-chip { vertical-align: middle; background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #3a2200; border-color: transparent; }
.expl-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.expl-pestana { cursor: pointer; font-weight: 700; font-size: .9rem; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto); text-align: left; }
.expl-pestana[aria-selected="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.expl-prueba { font-size: .88rem; margin: 0 0 12px; }
.expl-cuerpo > summary { cursor: pointer; font-weight: 700; padding: 12px 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--panel); list-style-position: inside; }
.expl-cuerpo[open] > summary { margin-bottom: 12px; }
.expl-indice { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.expl-indice a { font-size: .82rem; font-weight: 600; text-decoration: none; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto); }
.expl-texto { max-width: 78ch; overflow-wrap: anywhere; }
.expl-texto h3 { margin: 1.6em 0 .4em; color: var(--rojo-texto); scroll-margin-top: 90px; }
.expl-texto h4 { font: 700 1.05rem/1.3 Inter, system-ui, sans-serif; margin: 1.3em 0 .4em; }
.expl-texto p { margin: 0 0 .8em; }
.expl-texto ul { padding-left: 1.25em; margin: 0 0 1em; }
.expl-texto li { margin: .35em 0; }
.expl-examen { background: color-mix(in srgb, var(--ambar) 14%, var(--panel)); border-left: 4px solid var(--ambar); border-radius: 8px; padding: 8px 12px; }
.expl-tabla { overflow-x: auto; margin: .4em 0 1em; overflow-wrap: normal; }
.expl-tabla td:first-child { min-width: 6.5em; }
.expl-tabla table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.expl-tabla th, .expl-tabla td { border: 1px solid var(--borde); padding: 6px 8px; text-align: left; vertical-align: top; }
.expl-tabla th { background: var(--fondo-2); }
.expl-caja { border-radius: 12px; padding: 12px 16px 4px; margin: 1em 0 1.2em; }
.expl-caja.repaso { background: color-mix(in srgb, var(--agua) 10%, var(--panel)); border: 1px dashed var(--agua); }
.expl-caja.trampas { background: color-mix(in srgb, var(--rojo) 8%, var(--panel)); border: 1px dashed var(--rojo); }
.expl-caja.ojo { background: color-mix(in srgb, var(--ambar) 12%, var(--panel)); border: 1px solid var(--ambar); }
.expl-caja.resumen { background: color-mix(in srgb, var(--verde) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--verde) 45%, var(--borde)); }
.expl-caja.truco { background: color-mix(in srgb, var(--ambar) 18%, var(--panel)); border: 1px dashed var(--ambar); }
.expl-caja.flujo { background: var(--panel); border: 1px solid var(--borde); }
.expl-flujo { list-style: none; padding: 0 !important; margin: 0 0 10px; counter-reset: paso; }
.expl-flujo li { position: relative; margin: 0 0 18px; padding: 8px 12px 8px 40px; border-radius: 10px; background: var(--fondo-2); border: 1px solid var(--borde); counter-increment: paso; }
.expl-flujo li::before { content: counter(paso); position: absolute; left: 10px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--rojo); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.expl-flujo li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); color: var(--suave); font-size: .9rem; line-height: 18px; }
.expl-caja-titulo { display: block; margin-bottom: 8px; }
.expl-caso, .expl-pregunta { border: 1px solid var(--borde); border-radius: 12px; padding: 4px 14px 6px; margin: 0 0 14px; background: var(--panel); }
.expl-pasos, .expl-opciones { list-style: none; padding-left: 0 !important; }
.expl-opciones li.bien { color: var(--verde); }
.expl-enunciado { font-weight: 600; margin-top: .8em !important; }
.expl-candado { display: flex; gap: 14px; align-items: flex-start; }
.expl-candado-icono { font-size: 2.2rem; line-height: 1; }
.expl-candado ul { padding-left: 1.1em; }
@media (max-width: 560px) { .expl-candado { flex-direction: column; } .expl-tabla table { font-size: .84rem; } }
details.oficial { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px; }
details.oficial summary { cursor: pointer; font-weight: 700; }
details.oficial p { font-size: .92rem; color: var(--suave); margin: 10px 0 0; }
.fuentes { padding-left: 1.1em; }

/* ---------- Videos ---------- */
.videos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.video { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.video-marco { position: relative; aspect-ratio: 16/9; background: #000; }
.video-marco button { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: #000; }
.video-marco img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .15s, transform .3s; }
.video-marco button:hover img { opacity: 1; transform: scale(1.03); }
.video-marco .play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 68px; height: 48px; border-radius: 14px; background: var(--rojo); display: grid; place-items: center; color: #fff; font-size: 1.4rem; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-info { padding: 12px 14px 14px; }
.video-info b { display: block; line-height: 1.3; }
.video-info .canal { font-size: .82rem; color: var(--suave); font-weight: 600; margin: 3px 0 6px; }
.video-info p { margin: 0; font-size: .9rem; }
.video.visto .video-info b::after { content: " ✓"; color: var(--verde); }

/* ---------- Test ---------- */
.test { max-width: 820px; margin: 0 auto; }
.test-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.progreso { flex: 1 1 200px; height: 10px; background: var(--fondo-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--borde); }
.progreso > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ambar), var(--rojo)); transition: width .35s; }
.combo { font-weight: 800; color: var(--rojo); min-width: 5.5em; text-align: right; }
.combo.caliente { animation: latir .5s ease-in-out infinite alternate; }
@keyframes latir { to { transform: scale(1.12); } }
.reloj { font-family: var(--titulo); font-size: 1.6rem; padding: 0 10px; border-radius: 8px; background: var(--fondo-2); }
.reloj.poco { background: var(--rojo); color: #fff; animation: latir .5s infinite alternate; }
.pregunta { position: relative; }
.pregunta .origen { font-size: .8rem; font-weight: 700; color: var(--suave); text-decoration: none; }
.pregunta h2 { font-family: Inter, sans-serif; font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.35rem); letter-spacing: 0; line-height: 1.4; margin: 8px 0 16px; }
.opciones { display: grid; gap: 10px; }
.opcion { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; background: var(--panel); border: 2px solid var(--borde); border-radius: 14px; padding: 14px 16px; cursor: pointer; font-weight: 500; transition: border-color .12s, background .12s, transform .08s; }
.opcion:hover:not(:disabled) { border-color: var(--rojo); }
.opcion .letra { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--fondo-2); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.opcion.bien { border-color: var(--verde); background: var(--verde-suave); }
.opcion.bien .letra { background: var(--verde); color: #fff; }
.opcion.mal { border-color: var(--error); background: var(--error-suave); }
.opcion.mal .letra { background: var(--error); color: #fff; }
.opcion.elegida { border-color: var(--texto); }
.opcion.elegida .letra { background: var(--texto); color: var(--fondo); }
.opcion:disabled { cursor: default; }
.temblor { animation: temblor .35s; }
@keyframes temblor { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }
.explicacion { margin-top: 14px; border-radius: 12px; padding: 12px 14px; background: var(--fondo-2); border: 1px solid var(--borde); }
.explicacion b { display: block; margin-bottom: 3px; }
.test-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.navegador { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 18px; }
.navegador button { width: 34px; height: 30px; border-radius: 7px; border: 1px solid var(--borde); background: var(--panel); font-size: .78rem; font-weight: 700; cursor: pointer; }
.navegador button.hecha { background: var(--texto); color: var(--fondo); }
.navegador button.actual { outline: 2px solid var(--rojo); outline-offset: 1px; }
.navegador.practica button.ok { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.navegador.practica button.ko { background: #d64545; border-color: #d64545; color: #fff; }
.nav-plegable { margin-top: 14px; }
.nav-plegable summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--suave); padding: 8px 0; }
.nav-plegable .navegador { margin-top: 6px; }

.resultado { text-align: center; }
.resultado .nota { font-family: var(--titulo); font-size: clamp(4rem, 12vw, 7rem); line-height: 1; color: var(--rojo); }
.resultado .nota.apto { color: var(--verde); }
.repaso { text-align: left; margin-top: 24px; display: grid; gap: 10px; }
.repaso .item { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; }
.repaso .item.mal { border-left: 5px solid var(--error); }
.repaso .item.blanco { border-left: 5px solid var(--suave); }
.repaso .item p { margin: 4px 0; }
/* Exámenes oficiales viejos: preguntas cuya norma ha cambiado (examenes-app.js) */
.repaso .item.desfasada { border-left: 5px solid var(--ambar); }
.repaso .item.ley-antigua { border-left: 5px solid var(--agua); }
.aviso-norma { margin: 8px 0 4px; padding: 8px 12px; border-radius: 10px; font-size: .92rem; border: 2px solid var(--ambar); background: color-mix(in srgb, var(--ambar) 14%, var(--panel)); }
.aviso-norma.ley_antigua { border-color: var(--agua); background: color-mix(in srgb, var(--agua) 10%, var(--panel)); }

/* ---------- Fisicas ---------- */
.fisicas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.prueba { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); }
.prueba h3 { display: flex; align-items: center; gap: 8px; }
.prueba label { display: block; font-size: .85rem; font-weight: 600; color: var(--suave); margin-bottom: 4px; }
.prueba input[type="text"] { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--borde); background: var(--fondo); font-size: 1.1rem; font-weight: 700; }
.prueba input:focus { outline: none; border-color: var(--rojo); }
.prueba .limite { font-size: .8rem; color: var(--suave); margin: 6px 0 0; }
.medidor { height: 12px; border-radius: 99px; background: var(--fondo-2); margin-top: 12px; overflow: hidden; position: relative; }
.medidor > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--rojo), var(--ambar) 50%, var(--verde)); transition: width .4s; }
.veredicto { margin-top: 8px; font-weight: 800; font-size: 1.05rem; }
.veredicto.apto { color: var(--verde); }
.veredicto.no-apto { color: var(--error); }
.sexo { display: inline-flex; border: 1.5px solid var(--borde); border-radius: 999px; overflow: hidden; }
.sexo button { border: 0; background: var(--panel); padding: 8px 16px; cursor: pointer; font-weight: 700; }
.sexo button.activo { background: var(--rojo); color: #fff; }
.total-fisicas { position: sticky; bottom: 10px; margin-top: 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.total-fisicas b { font-family: var(--titulo); font-size: 2.6rem; line-height: 1; }

/* ---------- Buscador ---------- */
.resultados h3 { margin-top: 24px; }
.res { display: block; text-decoration: none; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.res:hover { border-color: var(--rojo); }
.res small { color: var(--suave); font-weight: 700; }
.res p { margin: 4px 0 0; font-size: .93rem; }
.res details summary { cursor: pointer; font-weight: 600; }

/* ---------- Avisos y efectos ---------- */
.aviso { position: fixed; left: 50%; bottom: 22px; translate: -50% 20px; background: var(--texto); color: var(--fondo); padding: 12px 18px; border-radius: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; z-index: 50; max-width: calc(100vw - 32px); text-align: center; box-shadow: var(--sombra); }
.aviso.visible { opacity: 1; translate: -50% 0; }
.lluvia { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.lluvia span { position: absolute; top: -40px; font-size: 1.6rem; animation: caer linear forwards; }
@keyframes caer { to { transform: translateY(110vh) rotate(var(--giro, 180deg)); } }
.salpicadura { position: absolute; pointer-events: none; font-size: 1.3rem; animation: salpicar .7s ease-out forwards; }
@keyframes salpicar { to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }

.pie { border-top: 1px solid var(--borde); padding: 20px 16px 30px; text-align: center; font-size: .82rem; color: var(--suave); }
.pie p { max-width: 780px; margin: 0 auto; }
.pie p + p { margin-top: 6px; }

[hidden] { display: none !important; }

/* ---------- Premium, candados y cuenta ---------- */
.boton-premium { text-decoration: none; font-weight: 800; font-size: .88rem; padding: 7px 12px; border-radius: 999px; background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #3a2200; white-space: nowrap; box-shadow: 0 2px 0 #c77a00; }
.boton-premium:hover { filter: brightness(1.05); }
.icono.con-texto { width: auto; border-radius: 999px; padding: 0 12px; font-weight: 700; font-size: .88rem; text-decoration: none; display: inline-grid; place-items: center; color: var(--texto); }
a.icono { display: inline-grid; place-items: center; text-decoration: none; color: var(--texto); }
.candado { max-width: 640px; margin: 20px auto; text-align: center; }
.candado-icono { font-size: 3.6rem; display: block; animation: latir .9s ease-in-out infinite alternate; }
.ventajas { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; text-align: left; }
.ventajas li { display: flex; gap: 12px; align-items: flex-start; }
.ventajas li > span { font-size: 1.5rem; line-height: 1.2; }
.ventajas b { display: block; }
.ventajas small { color: var(--suave); }
.hero-premium { background: radial-gradient(circle at 85% 20%, #ffd16655 0, transparent 45%), linear-gradient(135deg, #3a2200, #1d1208 75%); }
.hero-premium p { color: #f5e6c8; }
.planes { display: grid; gap: 12px; }
.plan { background: #fff; color: #1d1a17; border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.plan h3 { font-family: Inter, sans-serif; font-weight: 800; letter-spacing: 0; font-size: 1.1rem; margin: 4px 0 0; }
.plan .precio { font-family: var(--titulo); font-size: 2.8rem; line-height: 1; color: #0a4ea3; }
.plan .suave { color: #6f665c; margin: 0 0 6px; }
.plan.destacado { outline: 3px solid #ffd166; order: -1; }
.plan .chip { background: #fff4d6; color: #7a4a00; border-color: transparent; justify-self: start; }
.hero .plan .boton.rojo { background: var(--rojo); color: #fff; box-shadow: 0 4px 0 #062a5c; }
.hero .plan .boton.claro { background: #f3efe9; color: #1d1a17; border-color: #d9d2c8; }
.hero .plan .boton[disabled] { opacity: .6; }
.acceso { max-width: 520px; margin: 20px auto; }
.acceso form { display: grid; gap: 8px; margin: 14px 0; }
.acceso label { font-weight: 700; font-size: .9rem; }
.acceso input { font-size: 1.1rem; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--borde); background: var(--fondo); }
.acceso input:focus { outline: none; border-color: var(--rojo); }
#codigo { letter-spacing: .4em; font-weight: 800; text-align: center; font-size: 1.5rem; }
.estado-premium { background: linear-gradient(135deg, #fff4d6, #ffe7b0); color: #3a2200; border-radius: 12px; padding: 10px 14px; }
details summary { cursor: pointer; }
section details { margin: 8px 0; }

/* ---------- Mi Premium (#/cuenta con Premium, app.js «panelMiPremium») ---------- */
/* Colores de la tarjeta de socio: los del hero de Premium y el botón dorado de la cabecera (fijos en los dos modos) */
.mi-premium { --mp-oro: #ffd166; --mp-oro-2: #ff9f1c; --mp-tinta: #3a2200; --mp-crema: #f5e6c8;
  --mp-fondo: radial-gradient(circle at 92% 8%, #ffd16650 0, transparent 42%), linear-gradient(135deg, #3a2200, #1d1208 78%);
  max-width: 920px; margin: 8px auto 0; display: grid; gap: 16px; }
.mi-premium h2 { margin-bottom: 10px; }
/* Carnet de socio */
.mp-carnet { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 18px; padding: 24px; border-radius: 22px; color: #fff; background: var(--mp-fondo); box-shadow: 0 14px 34px rgba(58, 34, 0, .28); border: 1px solid rgba(255, 209, 102, .35); animation: mp-entra .45s cubic-bezier(.2, .8, .3, 1) both; }
.mp-carnet::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); }
.mp-carnet::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 226, 154, .22) 50%, transparent 65%); transform: translateX(-120%); animation: mp-brillo 1.3s .35s ease-out both; }
.mp-carnet h1 { margin: 10px 0 6px; color: #fff; }
.mp-carnet a { color: var(--mp-oro); }
.mp-sello { display: inline-block; font-weight: 800; font-size: .78rem; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--mp-oro), var(--mp-oro-2)); color: var(--mp-tinta); }
.mp-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.mp-insignia { font-family: var(--titulo); font-size: 1.35rem; letter-spacing: .06em; line-height: 1; padding: 5px 12px 3px; border-radius: 8px; color: var(--mp-oro); border: 1.5px solid var(--mp-oro); text-transform: uppercase; }
.mp-chip { font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; }
.mp-impagada .mp-chip { background: #d4212f; }
.mp-opo { margin: 0; font-weight: 700; color: #fff; }
.mp-desde { margin: 2px 0 0; color: var(--mp-crema); font-size: .92rem; }
.mp-desde b { color: #fff; }
.mp-desde[hidden], .mp-lista small[hidden] { display: none; }
.mp-frase { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.08); color: var(--mp-crema); }
.mp-frase b { color: #fff; }
.mp-email { grid-column: 1 / -1; margin: -4px 0 0; font-size: .8rem; color: rgba(245, 230, 200, .7); letter-spacing: .03em; overflow-wrap: anywhere; }
.mp-alerta { grid-column: 1 / -1; display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border-radius: 12px; background: #fee2e2; color: #7f1d1d; border: 2px solid #d4212f; }
/* Anillo de días que quedan */
.mp-anillo { position: relative; width: 132px; height: 132px; flex: none; }
.mp-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mp-anillo circle { fill: none; stroke-width: 10; }
.mp-anillo-fondo { stroke: rgba(255,255,255,.14); }
.mp-anillo-arco { stroke: url(#mp-oro); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .7, .3, 1); animation: mp-anillo 1.1s .15s cubic-bezier(.2, .7, .3, 1) both; }
.mp-anillo.sin-periodo .mp-anillo-arco { stroke-dasharray: none; animation: none; }
.mp-anillo-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.mp-anillo-txt b { font-family: var(--titulo); font-weight: 400; font-size: 2.9rem; line-height: .9; color: var(--mp-oro); }
.mp-anillo-txt span { font-size: .8rem; font-weight: 700; color: var(--mp-crema); text-transform: uppercase; letter-spacing: .08em; }
@keyframes mp-anillo { from { stroke-dashoffset: 326.73; } }
@keyframes mp-entra { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes mp-brillo { to { transform: translateX(120%); } }
@keyframes mp-sube { from { opacity: 0; transform: translateY(8px); } }
/* Tu oposición: próxima fecha clave */
.mp-fecha { display: flex; gap: 16px; align-items: center; animation: mp-sube .4s .1s ease-out both; }
.mp-fecha h2 { margin-bottom: 4px; }
.mp-fecha p { margin: 0 0 4px; }
.mp-fecha-num { flex: none; display: grid; place-content: center; text-align: center; width: 92px; height: 92px; border-radius: 18px; background: var(--rojo); color: #fff; box-shadow: 0 4px 0 var(--rojo-oscuro); }
.mp-fecha-num[hidden] { display: none; }
.mp-fecha-num b { font-family: var(--titulo); font-weight: 400; font-size: 2.4rem; line-height: .95; }
.mp-fecha-num b.mp-palabra { font-size: 1.35rem; line-height: 1.05; padding: 0 4px; }
.mp-fecha-num span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* Progreso */
.mp-progreso { animation: mp-sube .4s .15s ease-out both; }
.mp-avance { display: grid; gap: 6px; margin-bottom: 14px; }
.mp-avance span { font-size: .9rem; color: var(--suave); font-weight: 600; }
.mp-barra { height: 10px; border-radius: 99px; overflow: hidden; background: var(--fondo-2); border: 1px solid var(--borde); }
.mp-barra > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd166, #ff9f1c); transform-origin: left center; animation: llenar .9s cubic-bezier(.2, .7, .3, 1) both; }
.mp-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mp-resumen-gratis { margin-top: 20px; }
.mp-resumen-gratis .mp-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-cifras > div { padding: 12px 14px; border-radius: 14px; background: var(--fondo-2); border: 1px solid var(--borde); }
.mp-cifras b { display: block; font-family: var(--titulo); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--rojo-texto, var(--rojo)); }
.mp-cifras b small { font-size: 1.1rem; color: var(--suave); }
.mp-cifras span { font-size: .84rem; font-weight: 600; color: var(--suave); }
/* Lo que tienes desbloqueado */
.mp-desbloqueado ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mp-desbloqueado li { animation: mp-sube .35s calc(.2s + var(--i, 0) * 45ms) ease-out both; }
.mp-desbloqueado a { position: relative; display: grid; align-content: start; gap: 2px; height: 100%; padding: 16px; border-radius: 16px; text-decoration: none; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra); transition: transform .12s, border-color .12s; }
.mp-desbloqueado a:hover { transform: translateY(-2px); border-color: #ff9f1c; }
.mp-desbloqueado a::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; display: grid; place-content: center; border-radius: 50%; font-size: .75rem; font-weight: 800; background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #3a2200; }
.mp-tile-emoji { font-size: 1.9rem; line-height: 1.1; margin-bottom: 4px; }
.mp-desbloqueado b { font-size: 1.02rem; padding-right: 22px; }
.mp-desbloqueado small { color: var(--suave); font-size: .85rem; line-height: 1.35; }
/* Gestión */
.mp-lista { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.mp-lista li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--fondo-2); border: 1px solid var(--borde); }
.mp-lista li > span { font-size: 1.4rem; line-height: 1.2; flex: none; }
.mp-lista li > div { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.mp-lista small { color: var(--suave); font-size: .9rem; }
.mp-lista small b { color: var(--texto); }
.mp-lista .boton { margin-top: 6px; }
.mp-info { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--borde); color: var(--suave); font-size: .92rem; }
.mp-cuenta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.mp-cuenta span { overflow-wrap: anywhere; }
/* Facturas (como Amazon): datos de facturación y solicitudes */
.mp-fact { animation: mp-sube .4s .25s ease-out both; }
.mp-fact-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.mp-fact-cab h2 { margin: 0; }
.mp-fact-info { margin: 8px 0 14px; color: var(--suave); font-size: .92rem; }
.mp-fact-bloque { margin-top: 16px; }
.mp-fact-bloque h3, .mp-form h3 { font-family: Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: 0; font-size: 1.02rem; margin: 0 0 8px; }
.mp-perfiles, .mp-solicitudes { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.mp-perfiles li, .mp-solicitudes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 14px; border-radius: 12px; background: var(--fondo-2); border: 1px solid var(--borde); }
.mp-perfiles li > div:first-child, .mp-solicitudes li > div:first-child { min-width: 0; flex: 1 1 220px; display: grid; gap: 2px; }
.mp-perfiles small, .mp-solicitudes small { color: var(--suave); font-size: .85rem; overflow-wrap: anywhere; }
.mp-tipo { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.mp-perfil-acc { display: flex; gap: 6px; }
.mp-perfil-acc .boton { padding: 7px 12px; font-size: .88rem; }
.mp-estado { flex: none; font-size: .8rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #fff4d6; color: #7a4a00; border: 1px solid #f5d38a; }
.mp-estado.enviada { background: var(--verde-suave); color: var(--verde); border-color: transparent; }
.mp-estado.otro { background: var(--fondo); color: var(--suave); }
.mp-aviso-nif { color: #9a5b00; font-weight: 600; }
.mp-ok { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--verde-suave); color: var(--texto); border: 1px solid color-mix(in srgb, var(--verde) 35%, transparent); animation: mp-sube .3s ease-out both; }
.mp-error { margin: 4px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--rojo-suave); color: var(--rojo-texto, var(--rojo)); font-weight: 600; }
.mp-form { display: grid; gap: 6px; margin: 0 0 14px; padding: 16px; border-radius: 14px; border: 2px solid #ffd166; background: var(--panel); animation: mp-sube .3s ease-out both; }
.mp-form label, .mp-form legend { font-weight: 700; font-size: .9rem; }
.mp-form input:not([type=radio]), .mp-form select, .mp-form textarea { width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--borde); background: var(--fondo); color: var(--texto); }
.mp-form input:focus, .mp-form select:focus, .mp-form textarea:focus { outline: none; border-color: #ff9f1c; }
.mp-form fieldset { border: 0; padding: 0; margin: 8px 0 4px; display: grid; gap: 6px; }
.mp-form .fila { margin-top: 8px; }
.mp-form-sub { margin: 10px 0 0; font-weight: 800; font-size: .9rem; }
.mp-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-form-2 > div { display: grid; gap: 6px; }
.mp-opcion { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--borde); background: var(--fondo-2); cursor: pointer; font-weight: 400 !important; }
.mp-opcion:has(input:checked) { border-color: #ff9f1c; background: color-mix(in srgb, #ffd166 14%, var(--panel)); }
.mp-opcion input { margin-top: 3px; flex: none; }
.mp-opcion.pedida { opacity: .6; cursor: default; }
.mp-opcion em { font-style: normal; font-weight: 700; }
.mp-pagos { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.mp-opcion span { display: grid; min-width: 0; }
.mp-opcion small { color: var(--suave); overflow-wrap: anywhere; }
.mp-segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--fondo-2); border: 1px solid var(--borde); margin-bottom: 4px; }
.mp-segmento label { position: relative; cursor: pointer; }
.mp-segmento input { position: absolute; opacity: 0; inset: 0; }
.mp-segmento span { display: block; text-align: center; padding: 8px; border-radius: 9px; font-weight: 700; font-size: .9rem; }
.mp-segmento input:checked + span { background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #3a2200; }
.mp-segmento input:focus-visible + span { outline: 2px solid #ff9f1c; outline-offset: 2px; }
.boton.enlace, button.enlace { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--rojo-texto, var(--rojo)); font-weight: 700; cursor: pointer; text-decoration: underline; }
.mp-fact-gratis { max-width: 520px; margin: 0 auto 20px; }
:root[data-theme="dark"] .mp-estado { background: #3a2a08; color: #ffd166; border-color: #5c4310; }
:root[data-theme="dark"] .mp-aviso-nif { color: #fbbf24; }
.boton.mp-dorado { background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #3a2200; box-shadow: 0 4px 0 #c77a00; }
.boton.mp-dorado:hover { filter: brightness(1.05); }
.plan.plan-tuyo { outline: 3px solid #15803d; }
.plan .chip.chip-tuyo { background: #15803d; color: #fff; }
:root[data-theme="dark"] .mp-alerta { background: #3b1417; color: #fecaca; }
:root[data-theme="dark"] .mp-carnet { box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
@media (max-width: 600px) {
  .mp-carnet { padding: 18px 16px; gap: 12px; border-radius: 18px; }
  .mp-anillo { width: 96px; height: 96px; }
  .mp-anillo-txt b { font-size: 2.1rem; }
  .mp-anillo-txt span { font-size: .66rem; }
  .mp-insignia { font-size: 1.1rem; }
  .mp-fecha { align-items: flex-start; }
  .mp-fecha-num { width: 72px; height: 72px; border-radius: 14px; }
  .mp-fecha-num b { font-size: 1.9rem; }
  .mp-fecha-num b.mp-palabra { font-size: 1.1rem; }
  .mp-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-desbloqueado ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mp-desbloqueado a { padding: 14px 12px; }
  .mp-desbloqueado li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mp-lista li > div { flex: 1; justify-items: stretch; }
  .mp-lista .boton { width: 100%; }
  .mp-fact-cab .boton { width: 100%; }
  .mp-form { padding: 14px 12px; }
  .mp-perfil-acc { width: 100%; }
  .mp-perfil-acc .boton { flex: 1; }
}

/* ---------- Portada y catálogo ---------- */
.hero-marca h1 { font-size: clamp(3.2rem, 9vw, 6rem); line-height: .9; }
.hero-marca .lema { font-family: var(--titulo); font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: #ffd166; margin: 0 0 10px; letter-spacing: .03em; }
.chips-hero { gap: 6px; margin-bottom: 6px; }
.chip-opo { background: #fff !important; color: var(--rojo-oscuro) !important; border-color: transparent !important; text-decoration: none; }
.chip-opo:hover { filter: brightness(.95); }
.aviso-prep { background: rgba(0,0,0,.2); border-radius: 10px; padding: 6px 10px; font-size: .88rem; }
.opos { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.tarjeta-opo { background: var(--panel); border: 2px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; transition: transform .12s, border-color .12s; }
.tarjeta-opo:hover { transform: translateY(-3px); border-color: var(--rojo); }
.tarjeta-opo.elegida { border-color: var(--verde); }
.tarjeta-opo h3 { font-family: Inter, sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: 0; margin: 0; }
.tarjeta-opo p { margin: 0; }
.tarjeta-opo .meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.tarjeta-opo .aviso-prep { background: color-mix(in srgb, var(--ambar) 16%, var(--panel)); }
.tarjeta-opo .boton { margin-top: auto; }
.emoji-opo { font-size: 2.4rem; line-height: 1; }
.plazas-opo b { font-family: var(--titulo); font-size: 2.2rem; color: var(--rojo); line-height: 1; margin-right: 4px; }
.plazo { font-size: .92rem; }
.plazo.urgente { color: var(--rojo); font-weight: 700; }
.lista-conv { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.convocatoria { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 14px; box-shadow: var(--sombra); }
.conv-plazas { flex: none; width: 74px; text-align: center; background: var(--fondo-2); border-radius: 12px; padding: 8px 4px; align-self: flex-start; }
.conv-plazas b { display: block; font-family: var(--titulo); font-size: 1.9rem; line-height: 1; color: var(--rojo); }
.conv-plazas span { font-size: .72rem; font-weight: 700; color: var(--suave); text-transform: uppercase; }
.conv-cuerpo { min-width: 0; }
.conv-cuerpo h3 { font-family: Inter, sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: 0; margin: 6px 0 2px; line-height: 1.3; }
.conv-cuerpo p { margin: 3px 0; font-size: .9rem; }
.conv-cuerpo a { font-size: .88rem; font-weight: 600; }
.nota-conv { font-size: .82rem !important; }
.chip.estado.verde { background: var(--verde-suave); color: var(--verde); border-color: transparent; }
.chip.estado.ambar { background: color-mix(in srgb, var(--ambar) 22%, var(--panel)); color: color-mix(in srgb, var(--ambar) 60%, var(--texto)); border-color: transparent; }
.chip.estado.azul { background: color-mix(in srgb, var(--agua) 18%, var(--panel)); color: color-mix(in srgb, var(--agua) 60%, var(--texto)); border-color: transparent; }
a.filtro { text-decoration: none; color: var(--texto); border: 1.5px solid var(--borde); background: var(--panel); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .9rem; }
a.filtro.activo { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
a.filtro small { opacity: .6; margin-left: 2px; }
.selector { border: 1.5px solid var(--borde); background: var(--panel); border-radius: 999px; padding: 8px 14px; font-weight: 600; }

/* ---------- Cuenta atrás y avisos ---------- */
.cuenta { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.cuenta span { background: rgba(0,0,0,.22); border-radius: 12px; padding: 6px 12px; font-size: .85rem; color: #dbe7fb; }
.cuenta b { font-family: var(--titulo); font-size: 1.5rem; color: #fff; margin-right: 4px; letter-spacing: .03em; }
.reportar { background: none; border: 0; color: var(--suave); text-decoration: underline; cursor: pointer; font-size: .82rem; padding: 0; }
.reportar:hover { color: var(--rojo); }
.dialogo { border: 0; border-radius: var(--radio); padding: 0; max-width: min(520px, calc(100vw - 32px)); width: 100%; background: var(--panel); color: var(--texto); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.dialogo::backdrop { background: rgba(20,10,5,.55); backdrop-filter: blur(2px); }
.dialogo form { padding: 20px; display: grid; gap: 10px; }
.dialogo textarea { width: 100%; min-height: 110px; border-radius: 10px; border: 1.5px solid var(--borde); background: var(--fondo); padding: 10px 12px; font: inherit; resize: vertical; }
.dialogo textarea:focus { outline: none; border-color: var(--rojo); }
.legal h2 { margin-top: 26px; }
.legal p, .legal li { max-width: 75ch; }
.falta { background: color-mix(in srgb, var(--ambar) 30%, transparent); border-radius: 4px; padding: 0 4px; font-weight: 700; }

/* ---------- Callejero ---------- */
.carga-camion { display: inline-block; animation: arrancar .35s ease-in-out infinite alternate; }
.hero-callejero { background: radial-gradient(circle at 85% 15%, #22d3ee55 0, transparent 45%), linear-gradient(135deg, #0f3d5e, #0b1f33 72%); }
.hero-callejero .boton.rojo { background: #fff; color: #0b1f33; box-shadow: 0 4px 0 #9cc9e6; }
.hero-callejero p { color: #d7ecfa; }
.cifras-mini { margin: 4px 0 16px; gap: 8px 18px; }
.cifras-mini span { color: #cfe7f7; font-size: .9rem; }
.cifras-mini b { font-family: var(--titulo); font-size: 1.7rem; color: #fff; margin-right: 3px; }
.mapa-portada { aspect-ratio: 1; max-height: 380px; width: 100%; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.06); }
.filtro-callejero button { display: inline-flex; align-items: center; gap: 6px; }
.punto-color { width: 10px; height: 10px; border-radius: 50%; background: var(--g, var(--suave)); display: inline-block; }
.chip .punto-color { width: 8px; height: 8px; margin-right: 4px; vertical-align: 0; }
.juegos { margin-bottom: 8px; }
.tarjeta-juego { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); transition: transform .12s, border-color .12s; }
.tarjeta-juego:hover { transform: translateY(-3px) rotate(-.4deg); border-color: var(--agua); }
.tarjeta-juego .emoji { font-size: 2.3rem; line-height: 1; transition: transform .2s; }
.tarjeta-juego:hover .emoji { transform: scale(1.18) rotate(-8deg); }
.tarjeta-juego h3 { font-family: Inter, sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: 0; margin: 2px 0 4px; }
.tarjeta-juego p { margin: 0 0 8px; font-size: .9rem; color: var(--suave); }

.juego-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.juego-cab h1 { margin: 0; }
.marcador { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.marcador .chip { font-size: .85rem; padding: 5px 11px; }
.juego-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; margin-top: 12px; align-items: start; }
.mapa-juego { position: relative; height: min(70vh, 620px); border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); box-shadow: var(--sombra); position: sticky; top: 90px; }
.mapa-juego.grande { height: max(420px, calc(100vh - 270px)); position: relative; top: 0; margin-top: 12px; }
.aviso-datos { font-size: .78rem; margin-top: 10px; }

.mapa-madrid { position: relative; width: 100%; background: color-mix(in srgb, var(--agua) 7%, var(--fondo-2)); touch-action: none; user-select: none; -webkit-user-select: none; }
.mapa-madrid svg { width: 100%; height: 100%; display: block; cursor: grab; --k: 4; }
.mapa-madrid.arrastrando svg { cursor: grabbing; }
.capa-distritos path { fill: color-mix(in srgb, var(--g) 16%, var(--panel)); stroke: color-mix(in srgb, var(--g) 70%, var(--texto)); stroke-width: 1.4px; vector-effect: non-scaling-stroke; transition: fill .2s; cursor: pointer; }
.capa-distritos path:hover { fill: color-mix(in srgb, var(--g) 30%, var(--panel)); }
.capa-distritos path.acierto-d { fill: color-mix(in srgb, #22c55e 70%, var(--panel)); animation: latido-d .5s; }
.capa-distritos path.fallo-d { fill: color-mix(in srgb, #ef4444 65%, var(--panel)); }
.capa-distritos path.era-d { fill: color-mix(in srgb, #22c55e 50%, var(--panel)); stroke: #16a34a; stroke-width: 3px; }
.capa-distritos path.pista-d, .capa-distritos path.sel-d { fill: color-mix(in srgb, var(--g) 42%, var(--panel)); stroke-width: 3px; }
@keyframes latido-d { 50% { fill: color-mix(in srgb, #22c55e 90%, var(--panel)); } }
.capa-fondo path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.capa-fondo .via-t { display: none; stroke: color-mix(in srgb, var(--texto) 13%, transparent); stroke-width: .7px; }
.cerca .capa-fondo .via-t { display: inline; }
.capa-fondo .via-s { stroke: color-mix(in srgb, var(--texto) 18%, transparent); stroke-width: .8px; }
.capa-fondo .via-p { stroke: color-mix(in srgb, var(--ambar) 55%, transparent); stroke-width: 1.4px; }
.capa-fondo .via-a { stroke: color-mix(in srgb, var(--rojo) 55%, transparent); stroke-width: 2.2px; }
.compacto .capa-fondo .via-s { display: none; }
.hero-callejero .mapa-madrid { background: transparent; }
.hero-callejero .capa-distritos path { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.35); }
.hero-callejero .capa-distritos path:hover { fill: rgba(255,255,255,.14); }
.hero-callejero .capa-fondo .via-s { stroke: rgba(255,255,255,.12); }
.hero-callejero .capa-fondo .via-p { stroke: rgba(255,209,102,.55); }
.hero-callejero .capa-fondo .via-a { stroke: rgba(255,120,120,.7); }
.capa-etiquetas text { font-family: Inter, sans-serif; font-weight: 700; text-anchor: middle; font-size: calc(var(--k) * 12.5px); fill: color-mix(in srgb, var(--texto) 72%, transparent); paint-order: stroke; stroke: var(--panel); stroke-width: calc(var(--k) * 3px); stroke-linejoin: round; pointer-events: none; }
.capa-etiquetas .num { font-family: var(--titulo); font-size: calc(var(--k) * 20px); fill: var(--texto); }
.sin-etiquetas .capa-etiquetas { display: none; }
.trazo { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.trazo.ok { stroke: #16a34a; stroke-width: 6px; filter: drop-shadow(0 0 3px rgba(22,163,74,.6)); }
.trazo.op { stroke-width: 4px; stroke-dasharray: 6 5; opacity: .9; }
.trazo.op-0 { stroke: #16a34a; } .trazo.op-1 { stroke: #dc2626; } .trazo.op-2 { stroke: #f59e0b; }
.trazo.fantasma { stroke: #a855f7; stroke-width: 7px; animation: fantasma 1.6s ease-in-out infinite alternate; }
@keyframes fantasma { from { filter: drop-shadow(0 0 2px #a855f7); opacity: .75; } to { filter: drop-shadow(0 0 9px #c084fc); opacity: 1; } }
.trazo.otra-calle { stroke: #94a3b8; stroke-width: 3px; stroke-dasharray: 4 4; }
.trazo.recta { stroke-width: 3px; stroke-dasharray: 8 6; }
.trazo.recta.cerca { stroke: #16a34a; } .trazo.recta.lejos { stroke: #ef4444; }
.marca .marca-halo { fill: var(--panel); stroke: var(--texto); stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.marca .marca-emoji, .camion-ruta .marca-emoji { font-size: 15px; text-anchor: middle; dominant-baseline: central; }
.marca.salida .marca-halo { stroke: #0ea5e9; stroke-width: 3; }
.marca.destino .marca-halo { stroke: #ef4444; stroke-width: 3; }
.marca.real .marca-halo { stroke: #16a34a; stroke-width: 3; }
.marca.tuya .marca-halo { stroke: #6366f1; stroke-width: 3; }
.marca.sel .marca-halo { stroke: var(--rojo); stroke-width: 3; }
.marca.parque-op .marca-halo { stroke: #f59e0b; stroke-width: 2.5; }
.marca.parque-op.ganador .marca-halo { stroke: #16a34a; stroke-width: 4; }
.marca.latido .marca-halo { animation: latir-halo 0.7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes latir-halo { to { transform: scale(1.25); } }
.marca.rebote > * { animation: rebote .6s cubic-bezier(.3,1.8,.5,1); transform-box: fill-box; transform-origin: center bottom; }
@keyframes rebote { from { transform: translateY(-30px) scale(.3); opacity: 0; } }
.camion-ruta .marca-halo { stroke: var(--rojo); stroke-width: 3; }
.punto circle { stroke: #fff; stroke-width: 1.2; cursor: pointer; transition: r .15s; }
.punto:hover circle { r: 8; }
.cat-bomberos circle { fill: #dc2626; } .cat-salud circle { fill: #0ea5e9; } .cat-seguridad circle { fill: #1e3a8a; }
.cat-gobierno circle { fill: #7c3aed; } .cat-monumento circle { fill: #b45309; } .cat-cultura circle { fill: #db2777; }
.cat-transporte circle { fill: #0f766e; } .cat-deporte circle { fill: #65a30d; } .cat-verde circle { fill: #16a34a; }
.cat-compras circle { fill: #ea580c; } .cat-hotel circle { fill: #64748b; } .cat-otros circle { fill: #334155; }
.cat-junta circle { fill: #7c3aed; } .cat-poligono circle { fill: #78716c; }
/* Zaragoza: término municipal de fondo, nombres de barrios rurales más pequeños y contorno de los polígonos */
.capa-termino { fill: color-mix(in srgb, var(--texto) 4%, transparent); stroke: color-mix(in srgb, var(--texto) 30%, transparent); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.hero-callejero .capa-termino { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.25); }
.capa-etiquetas text.rural { font-size: calc(var(--k) * 10.5px); font-weight: 600; }
.trazo.poligono-sel { stroke: #78716c; stroke-width: 3px; fill: color-mix(in srgb, #78716c 22%, transparent); }
.mapa-botones { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; z-index: 2; }
.mapa-botones button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel); font-size: 1.2rem; font-weight: 800; cursor: pointer; box-shadow: var(--sombra); }
.compacto .mapa-botones { display: none; }

.recorrido .trayecto { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; background: var(--fondo-2); border-radius: 12px; padding: 12px; }
.trayecto > div { display: grid; gap: 2px; min-width: 0; }
.trayecto small { font-size: .7rem; font-weight: 800; color: var(--suave); letter-spacing: .06em; }
.trayecto b { line-height: 1.25; }
.trayecto .flecha { font-size: 1.6rem; color: var(--rojo); animation: arrancar .6s ease-in-out infinite alternate; }
.ruta-op .letra { background: color-mix(in srgb, var(--c) 18%, var(--fondo-2)); color: var(--c); }
.ruta-op .calles { line-height: 1.5; }
.ruta-op .calles i { color: var(--suave); font-style: normal; font-weight: 800; margin: 0 2px; }
.ruta-op .por { display: block; margin-top: 6px; font-weight: 600; color: var(--texto); }
.opcion.bien .por, .opcion.mal .por { color: inherit; }

.reto-mapa { margin-top: 12px; padding: 14px 18px; }
.reto { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.reto > div:nth-child(2) { flex: 1; min-width: 200px; display: grid; }
.reto small { font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.reto b { font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1.25; }
.reto-emoji { font-size: 2.4rem; }
.pista { color: var(--ambar); font-weight: 700; font-size: .9rem; }
.resultado-toque { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fondo-2); animation: entrar .35s; }
.resultado-toque.visible { display: block; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
.entra { animation: entrar-nombre .3s cubic-bezier(.3,1.5,.5,1); display: inline-block; }
@keyframes entrar-nombre { from { opacity: 0; transform: translateY(10px) scale(.96); } }

.carta-lista { max-width: 640px; margin: 20px auto; text-align: center; padding: 28px 20px; }
.nombre-carta { font-family: var(--titulo); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; margin: 18px 0 22px; min-height: 2.2em; display: grid; place-items: center; }
.botones-lista { justify-content: center; }
.botones-lista .boton { min-width: 170px; }
.botones-lista .si { background: var(--verde); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--verde) 60%, #000); }
.botones-lista .no { background: var(--rojo); color: #fff; box-shadow: 0 4px 0 var(--rojo-oscuro); }
.botones-lista kbd { font-size: .7rem; opacity: .8; border: 1px solid rgba(255,255,255,.5); border-radius: 5px; padding: 0 5px; }

.explorador { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.explorador .mapa-juego.grande { margin-top: 0; height: min(76vh, 720px); }
.lateral { display: grid; gap: 12px; align-content: start; max-height: min(76vh, 720px); overflow: auto; }
.buscador-mapa { max-width: none; }
.cats { display: flex; flex-wrap: wrap; gap: 5px; }
.cats button { border: 1px solid var(--borde); background: var(--panel); border-radius: 999px; padding: 3px 9px; font-size: .75rem; font-weight: 700; cursor: pointer; opacity: .45; }
.cats button.activo { opacity: 1; background: var(--fondo-2); }
.ficha h3 { font-family: Inter, sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: 0; }
.ficha p { margin: 6px 0; font-size: .92rem; }
.resultados-mapa { display: grid; gap: 4px; }
.resultados-mapa button { text-align: left; border: 1px solid var(--borde); background: var(--panel); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: .9rem; }
.resultados-mapa button:hover { border-color: var(--rojo); }
.resultados-mapa small { display: block; color: var(--suave); font-size: .75rem; }
.panel-callejero { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--agua) 14%, var(--panel)), var(--panel)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .camion { max-width: 260px; order: -1; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .mapa { grid-template-columns: repeat(5, 1fr); }
  .dos-col { grid-template-columns: 1fr; }
  .marca-sub { display: none; }
  /* Móvil: el menú en dos filas de 4, icono con su nombre debajo */
  .menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; flex-basis: 100%; order: 3; }
  .menu[data-n="9"] { grid-template-columns: repeat(3, 1fr); } /* callejero y psicotécnico a la vez: 3 filas de 3, sin hueco */
  .menu a { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 1.15rem; padding: 6px 2px; border-radius: 12px; text-align: center; }
  .menu a span { display: block; font-size: .66rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .menu a[hidden] { display: none !important; }
  /* Móvil: la cabecera no ocupa media pantalla al bajar, y el buscador va en su propia fila */
  .cabecera { position: relative; padding: 8px 12px; gap: 8px; }
  .herramientas { flex: 1 1 auto; flex-wrap: wrap; gap: 6px; }
  .buscador { order: 5; flex: 1 1 100%; max-width: none; padding: 7px 12px; }
  .buscador kbd { display: none; }
  .juego-rejilla, .explorador { grid-template-columns: 1fr; }
  .mapa-juego { position: relative; top: 0; height: 58vh; order: -1; }
  .juego-rejilla .mapa-juego { order: 0; height: 52vh; scroll-margin-top: 12px; }
  .explorador .mapa-juego.grande { height: 60vh; }
  .lateral { max-height: none; }
  .mapa-portada { max-height: 260px; order: -1; }
}
@media (max-width: 480px) {
  .herramientas { flex-basis: 100%; }
  .buscador { max-width: none; }
  .buscador kbd { display: none; }
  .videos { grid-template-columns: 1fr; }
}

/* Aviso de cookies de analítica (analitica.js) */
.aviso-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 620px; z-index: 60; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); padding: 12px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.aviso-cookies p { margin: 0; flex: 1 1 260px; }
.aviso-cookies-botones { display: flex; gap: 8px; margin-left: auto; }
.aviso-cookies .boton { padding: 8px 14px; }

/* Botón de idioma de las preguntas (oposiciones con examen en catalán) */
.boton-idioma { float: right; margin: 0 0 6px 10px; border: 1px solid var(--borde); background: var(--fondo-2, transparent); color: var(--texto); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }

/* Buscador de oposiciones (#/elegir) */
.buscador-opos { margin: 0 0 16px; }
.buscador-opos input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; padding: 12px 14px; border: 2px solid var(--borde); border-radius: 12px; background: var(--panel); color: var(--texto); }
.buscador-opos input:focus { outline: none; border-color: var(--rojo); }
.buscador-opos .filtros { margin-top: 10px; }
.tarjeta-opo[hidden] { display: none; }
.enlace-opo { font-size: .82rem; }

/* Cifras reales en la elección de oposición y botón de opinión del pie */
.cifras-reales { margin: -4px 0 14px; color: var(--suave); }
.cifras-reales b { color: var(--texto); }
.boton-opinar { border: 1px solid var(--borde); background: var(--panel); color: var(--texto); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; margin-left: 4px; }

/* Detalles de movimiento: cada pantalla entra con un fundido corto, los botones responden al pulsar */
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#app.pantalla-nueva > * { animation: aparecer .22s ease-out both; } /* solo al cambiar de pantalla, no en cada respuesta */
.boton, .opcion, .tarjeta-tema, .tarjeta-opo, .menu a { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
.boton:active, .opcion:active, .menu a:active { transform: translateY(1px) scale(.985); }
.tarjeta-tema:hover, .tarjeta-opo:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
@media (prefers-reduced-motion: reduce) { #app.pantalla-nueva > *, .boton, .opcion, .tarjeta-tema, .tarjeta-opo { animation: none !important; transition: none !important; } }

/* Botón de idioma de la cabecera (oposiciones en catalán) */
.boton-idioma-web { font-weight: 800; font-size: .85rem; letter-spacing: .02em; }

/* Animaciones: tarjetas que aparecen al bajar, barras que se llenan, anillo que se dibuja y brillo en los botones */
.revelar { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1); }
.revelar.visto { opacity: 1; transform: none; }
.barra-xp i, .bloque-barra i, .medidor i, .ranking-barra i, .tema-barra { transform-origin: left center; animation: llenar .9s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes llenar { from { transform: scaleX(0); } }
.insignia-arco { animation: dibujar 1.1s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes dibujar { from { stroke-dasharray: 0 999; } }
.boton.rojo { position: relative; overflow: hidden; isolation: isolate; }
.boton.rojo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); }
.boton.rojo:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.resultado .nota { animation: aparecer-nota .6s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes aparecer-nota { from { opacity: 0; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .barra-xp i, .bloque-barra i, .medidor i, .ranking-barra i, .tema-barra, .insignia-arco, .resultado .nota { animation: none; }
  .boton.rojo::after { display: none; }
}

/* Cabecera móvil en una fila: marca a la izquierda y Premium, cuenta y sonido a la derecha; debajo, buscador y luego menú */
@media (max-width: 860px) {
  .herramientas { display: contents; }
  .marca { margin-right: auto; }
  .herramientas > :not(.buscador) { order: 1; }
  .cabecera .buscador { order: 2; flex: 1 1 100%; }
}

/* Físicas: vídeos de cómo se hace cada prueba */
.como-se-hace { margin-top: 10px; }
.como-se-hace summary { cursor: pointer; font-weight: 700; color: var(--acento, inherit); list-style: none; padding: 6px 0; }
.como-se-hace summary::-webkit-details-marker { display: none; }
.videos-prueba { display: grid; gap: 10px; margin-top: 6px; }
.videos-prueba .video-info p { display: none; }

/* Móvil: sin el recuadro gris (de esquinas cuadradas) que pinta el navegador al tocar, y sin el
   «hover» que se queda pegado al tocar: si no, la pestaña del menú se ve gris y luego roja */
a, button, summary, label, .opcion { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .menu a:not(.activo):hover { background: transparent; }
  .menu a:not(.activo):active { background: var(--fondo-2); }
  .menu a { transition: transform .12s ease; }
  /* Con el dedo: los desplegables, «¿Ves un error?», la ✕ de la tarjeta de la app y las migas medían 16-25 px de alto */
  details > summary { padding: 9px 0; }
  .reportar { padding: 8px 2px; min-height: 36px; }
  .tarjeta-app-cerrar { min-width: 40px; min-height: 40px; }
  .migas a { display: inline-block; padding: 8px 0; }
  .pie a { display: inline-block; padding: 6px 0; }
}

/* Recuadro «Guarda tu progreso» (resultado de un test y portada con racha) */
.guardar-caja { max-width: 560px; margin: 16px auto 0; text-align: left; border: 2px solid color-mix(in srgb, var(--rojo) 35%, transparent); }
.guardar-caja h3 { margin: 0 0 6px; }
.guardar-caja p { margin: 0 0 8px; }
.guardar-ventajas { list-style: none; padding: 0; margin: 4px 0 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; font-weight: 600; }
.guardar-email, .guardar-codigo { display: grid; gap: 8px; }
.guardar-email input[type=email], .guardar-codigo input { width: 100%; box-sizing: border-box; }
.guardar-avisos { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; line-height: 1.35; cursor: pointer; }
.guardar-avisos input { margin-top: 3px; flex: none; }
.guardar-legal { font-size: .78rem; margin-top: 6px !important; }
.guardar-no { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.guardar-caja input[type=email], .guardar-codigo input { padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; font-size: 1rem; background: var(--panel, #fff); color: inherit; }
.guardar-ventajas li::before { content: '✓ '; color: var(--verde, #1f7a3a); font-weight: 800; }
.guardar-no { display: inline-block; min-height: 32px; padding: 4px 6px; } /* «Ahora no»: que se pueda tocar con el dedo */

/* Resultado de un test gratis: qué desbloquea Premium en esta oposición (cajaPremium en app.js) */
.premium-caja { max-width: 560px; margin: 16px auto 0; text-align: left; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--ambar) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--ambar) 55%, transparent); }
.premium-caja p { margin: 0 0 10px; }
.premium-caja .boton { width: 100%; }

/* Portada: «Hoy toca», lo que conviene hacer hoy con lo que ya guarda la app (planHoy en app.js) */
.plan-hoy { margin: 18px 0; }
.plan-hoy h2 { margin: 0 0 8px; }
.plan-hoy ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.plan-hoy a { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: 12px; background: var(--fondo-2); border: 1px solid var(--borde); color: var(--texto); text-decoration: none; font-weight: 600; }
.plan-hoy a:hover { border-color: var(--rojo); }
.plan-hoy a > span:first-child { font-size: 1.4rem; flex: none; }
.plan-hoy a small { display: block; font-weight: 500; color: var(--suave); }
.plan-hoy a::after { content: '→'; margin-left: auto; color: var(--rojo); font-weight: 800; }
.plan-hoy .hecho { color: var(--verde); font-weight: 700; margin: 0; }

/* Portada: aviso de examen cercano con enlace a los exámenes oficiales */
.aviso-examen { display: flex; flex-direction: column; gap: 3px; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radio, 14px); background: color-mix(in srgb, var(--rojo) 10%, var(--panel, #fff)); border: 2px solid var(--rojo); color: inherit; text-decoration: none; }
.aviso-examen b { color: var(--rojo); font-size: 1.05rem; }
.aviso-examen span { font-size: .92rem; font-weight: 600; }
.aviso-examen:hover { background: color-mix(in srgb, var(--rojo) 16%, var(--panel, #fff)); }

/* Psicotécnicos de figuras */
svg.figura { display: block; margin: 10px auto 0; max-width: 100%; height: auto; }
.opcion svg.figura { margin: 0; }

/* Resultado animado */
.nota-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.resultado .nota-anillo { position: relative; width: min(230px, 64vw); aspect-ratio: 1; margin: 8px auto 12px; display: grid; place-items: center; }
.nota-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.nota-anillo circle { fill: none; stroke-width: 11; }
.nota-anillo .anillo-pista { stroke: var(--fondo-2); stroke-dasharray: 2 2.5; }
.nota-anillo .anillo-arco { stroke: var(--rojo); stroke-linecap: round; animation: llenar-anillo .9s cubic-bezier(.2, .7, .3, 1) both; }
.nota-anillo.apto .anillo-arco { stroke: var(--verde); }
.nota-anillo.apto svg { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--verde) 45%, transparent)); }
.nota-anillo.no-apto svg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ambar) 40%, transparent)); }
.nota-anillo.apto { animation: latido-anillo .45s ease-out .9s both; }
@keyframes llenar-anillo { from { stroke-dasharray: 0 100; } }
@keyframes latido-anillo { 50% { transform: scale(1.06); } }
.resultado .nota-anillo .nota { position: relative; max-width: 80%; font-size: clamp(2.8rem, 13vw, 4.4rem); overflow-wrap: anywhere; }
.nota-anillo .nota-resto { display: inline-block; font-size: .42em; color: var(--suave); margin-left: .08em; letter-spacing: .02em; }
.nota-anillo.quieto, .nota-anillo.quieto .anillo-arco, .nota-anillo.quieto .nota { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nota-anillo, .nota-anillo .anillo-arco { animation: none; }
}

/* Reacción al contestar */
/* Acierto: la correcta hace «pop» con destello verde y le sale un ✓ con rebote. Fallo: la elegida tiembla en rojo
   y la correcta se enciende en verde poco a poco (una capa neutra encima del fondo que se desvanece).
   app.js pone r-acierto / r-correcta / temblor solo en el repintado justo después de contestar. Solo transform y opacity. */
.opcion.bien, .opcion.mal { position: relative; isolation: isolate; }
.opcion.bien::after { content: '✓'; flex: none; margin-left: auto; align-self: center; padding-left: 4px; font-weight: 900; font-size: 1.3rem; line-height: 1; color: var(--verde); }
.opcion.r-acierto::before, .opcion.r-correcta::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; pointer-events: none; }
.opcion.r-acierto { animation: r-pop .25s ease-out; }
.opcion.r-acierto::before { background: var(--verde); opacity: 0; animation: r-destello .55s ease-out; }
.opcion.r-acierto::after { animation: r-check .42s cubic-bezier(.3, 1.8, .5, 1) .05s both; }
.opcion.r-correcta::before { background: var(--panel); border: 2px solid var(--borde); animation: r-descubrir .45s ease-out .2s both; }
.opcion.r-correcta .letra { animation: r-letra .35s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
.opcion.r-correcta::after { animation: r-check .42s cubic-bezier(.3, 1.8, .5, 1) .35s both; }
.opcion.mal.temblor { animation: r-sacudir .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes r-pop { 50% { transform: scale(1.04); } }
@keyframes r-destello { 25% { opacity: .4; } 100% { opacity: 0; } }
@keyframes r-check { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
@keyframes r-letra { from { opacity: .3; transform: scale(.6); } }
@keyframes r-descubrir { to { opacity: 0; } }
@keyframes r-sacudir { 15% { transform: translateX(-9px) rotate(-.6deg); } 35% { transform: translateX(8px) rotate(.5deg); } 55% { transform: translateX(-6px); } 75% { transform: translateX(3px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .opcion.r-acierto::before, .opcion.r-correcta::before { display: none; }
  .opcion.bien::after, .opcion.r-correcta .letra { animation: none !important; }
}

/* Esqueletos de carga */
/* esqueleto(tipo) en app.js: bloques con la forma de la pantalla que viene y un brillo que pasa de izquierda a
   derecha. Aparece con un pequeño retraso para no parpadear si los datos llegan al momento. Solo colores del tema. */
:root { --esq-brillo: rgba(255, 255, 255, .7); }
:root[data-theme="dark"] { --esq-brillo: rgba(255, 255, 255, .07); }
.esqueleto { --esq-hueso: var(--borde); padding: 4px 0 24px; animation: esq-aparece .2s ease-out .12s both; }
.esq-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.esq-dibujo { display: flex; flex-direction: column; gap: 12px; }
.esq-b { display: block; position: relative; overflow: hidden; height: 14px; border-radius: 8px; background: var(--esq-hueso); }
.esq-b::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--esq-brillo), transparent); transform: translateX(-100%); animation: esq-brillo 1.4s ease-in-out infinite; }
.esq-titulo { height: 30px; width: min(60%, 340px); border-radius: 10px; margin-bottom: 4px; }
.esq-subtitulo { height: 18px; width: 45%; }
.esq-corta { width: 62%; }
.esq-barra { height: 8px; border-radius: 99px; }
.esq-caja { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.esq-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 4px; }
.esq-tarjeta { height: 92px; border-radius: var(--radio); }
.esq-opcion { height: 50px; border-radius: 12px; }
@keyframes esq-brillo { to { transform: translateX(100%); } }
@keyframes esq-aparece { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
  .esq-b::after { animation: none; display: none; }
}

/* Modo oscuro */
/* Solo si se pide con el botón 🌙 de la cabecera: app.js pone data-theme="dark" en <html> y lo guarda en localStorage,
   y un script de 1 línea en el <head> lo aplica antes de pintar. Nunca por el ajuste del sistema: por defecto, claro
   (hay clientes de pago: nadie ve su web de otro color sin haberlo pedido).
   Dos colores nuevos para que la marca funcione en los dos modos: --rojo es el de RELLENO (botones, pestaña activa,
   con texto blanco encima) y --rojo-texto el de TEXTO sobre fondo o panel; en claro son el mismo. Igual con el verde. */
:root { --rojo-texto: var(--rojo); --verde-relleno: var(--verde); }
:root[data-theme="dark"] {
  --fondo: #0d131c; --fondo-2: #141c28; --panel: #19222f; --borde: #2c3a4e;
  --texto: #eef2f7; --suave: #a7b3c4;
  --rojo: #2f6fc4; --rojo-oscuro: #1b4a87; --rojo-texto: #8dbbf5; --rojo-suave: #15263d; --error: #f26b6b; --error-suave: #3b1617;
  --verde: #4ade80; --verde-relleno: #15803d; --verde-suave: #12321f;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
/* El color de marca como texto normal: en oscuro, el tono claro (contraste AA sobre fondo y panel) */
a { color: var(--rojo-texto); }
.combo, .plazo.urgente, .veredicto.no-apto, .reportar:hover, .chip.rojo, .aviso-examen b { color: var(--rojo-texto); }
/* Verde de relleno con letra blanca */
.opcion.bien .letra, .botones-lista .si { background: var(--verde-relleno); }
/* Tarjetas de precios y aviso de Premium: eran blancas y amarillas fijas */
:root[data-theme="dark"] .plan { background: var(--panel); color: var(--texto); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
:root[data-theme="dark"] .plan .suave { color: var(--suave); }
:root[data-theme="dark"] .plan .precio { color: var(--rojo-texto); }
:root[data-theme="dark"] .hero .plan .boton.claro { background: var(--fondo-2); color: var(--texto); border-color: var(--borde); }
:root[data-theme="dark"] .estado-premium { background: color-mix(in srgb, var(--ambar) 16%, var(--panel)); color: var(--texto); }
/* Psicotécnicos de figuras (svg.figura): piezas de color claro con la raya oscura entre cuadrados; en oscuro se ven
   igual de bien sobre el panel, así que no cambian */

/* Cabecera en el móvil con el botón de modo oscuro en la misma fila que Premium y sonido. Premium no se toca: se
   recortan los márgenes laterales y los huecos, y los botones redondos (cuenta, idioma, sonido y tema, iguales entre
   sí) pasan de 38 a 32 px. Por debajo de 380 px, además, el nombre de la web un poco más pequeño. */
@media (max-width: 420px) {
  .cabecera { padding-left: 8px; padding-right: 8px; column-gap: 4px; }
  .marca { gap: 6px; }
  .cabecera .icono:not(.con-texto) { width: 32px; height: 32px; font-size: .95rem; }
}
@media (max-width: 380px) { .marca-texto { font-size: 1.7rem; } }
/* Catalunya con la sesión abierta: cinco cosas en la fila (Premium, cuenta, idioma, sonido y tema). Para que no se
   parta, fuera la luz del logo y el nombre algo más pequeño; Premium sigue igual */
@media (max-width: 420px) {
  .cabecera:has(#boton-cuenta:not([hidden])):has(#idioma-web:not([hidden])) .marca-luz { display: none; }
  .cabecera:has(#boton-cuenta:not([hidden])):has(#idioma-web:not([hidden])) .marca-texto { font-size: 1.4rem; }
}

/* La web como app: tarjeta de la portada (solo en el móvil) y pasos para instalarla */
.tarjeta-app { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 12px 14px; align-items: center; padding: 16px; margin: 0 0 16px; border-radius: var(--radio); background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--rojo) 9%, var(--panel))); border: 2px solid color-mix(in srgb, var(--rojo) 35%, var(--borde)); box-shadow: var(--sombra); animation: app-entra .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.tarjeta-app-icono { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); flex: none; }
.dialogo .tarjeta-app-icono { width: 52px; height: 52px; border-radius: 13px; }
.tarjeta-app-texto { padding-right: 18px; min-width: 0; }
.tarjeta-app-texto > b { display: block; font-size: 1.05rem; line-height: 1.2; }
.tarjeta-app-texto > span { display: block; font-size: .88rem; color: var(--suave); margin-top: 3px; line-height: 1.35; }
.tarjeta-app-sellos { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; font-size: .78rem; font-weight: 700; color: var(--verde-texto, var(--verde, #1f9d55)); }
.tarjeta-app-sellos em { font-style: normal; }
.tarjeta-app-cerrar { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--suave); font-size: 1rem; padding: 8px; cursor: pointer; line-height: 1; }
.insignia-app { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 10px; background: #111; color: #fff; border: 1px solid #3a3a3a; border-radius: 12px; padding: 7px 20px 7px 14px; font: inherit; cursor: pointer; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.insignia-app-ico { font-size: 1.6rem; line-height: 1; }
.insignia-app-txt { display: grid; text-align: left; }
.insignia-app small { font-size: .68rem; opacity: .85; letter-spacing: .02em; }
.insignia-app b { font-size: 1.1rem; line-height: 1.1; }
.insignia-app:active { transform: scale(.97); }
:root[data-theme="dark"] .insignia-app { background: #fff; color: #111; border-color: #fff; }
.pasos-app { margin: 4px 0; padding-left: 1.3em; display: grid; gap: 8px; }
.ico-compartir { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border: 1.5px solid currentColor; border-radius: 4px; font-size: .8em; }
@keyframes app-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .tarjeta-app, .tarjeta-app-icono { animation: none !important; } }
.tarjeta-app-icono { animation: app-saluda 1.6s ease-in-out .8s 2; }
@keyframes app-saluda { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg) scale(1.06); } 40% { transform: rotate(6deg) scale(1.06); } 60% { transform: rotate(-3deg); } }
#hueco-app { max-width: 560px; margin: 8px auto 0; padding: 0 16px; }
#hueco-app .tarjeta-app { margin-bottom: 20px; }
.pie-app { text-align: center; margin: 0 0 14px; }
/* Logros (insignias con XP) */
.logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.logro { background: var(--panel); border: 1px dashed var(--borde); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; opacity: .6; }
.logro span { font-size: 1.6rem; line-height: 1; }
.logro b { font-size: .92rem; }
.logro small { font-size: .76rem; color: var(--suave); line-height: 1.3; }
.logro.si { opacity: 1; border-style: solid; border-color: var(--ambar); background: color-mix(in srgb, var(--ambar) 12%, var(--panel)); }

/* Móvil: los filtros (comunidades, estados, bloques) van en una sola fila que se desliza de lado, en vez de apilarse en varias */
@media (max-width: 640px) {
  .filtros { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 10px 0 14px; padding: 2px 24px 4px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros > button, .filtros > a.filtro { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; padding: 5px 12px; font-size: .85rem; }
}

/* ---------------- Tema en PDF (Premium): vista previa en pantalla y hoja A4 al imprimir (app.js, vistaPdfTema) ---------------- */
.pdf-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.hoja-pdf { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 14px; padding: clamp(16px, 4vw, 40px); max-width: 210mm; margin: 0 auto; line-height: 1.55; overflow-wrap: anywhere; }
.hoja-pdf h2 { font-size: 1.15rem; margin: 1.4em 0 .5em; }
.pdf-portada { text-align: center; padding: 24px 0 30px; border-bottom: 1px solid var(--borde); }
.pdf-portada h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); margin: .3em 0 .6em; }
.pdf-marca { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.pdf-opo { font-size: 1.05rem; } .pdf-num { font-weight: 700; margin-top: 2em; }
.pdf-oficial { text-align: left; font-size: .9rem; color: var(--suave); border-left: 3px solid var(--borde); padding-left: 10px; }
.pdf-pie { font-size: .8rem; color: var(--suave); margin-top: 2em; }
.pdf-caja { border: 1px solid var(--borde); border-radius: 10px; padding: 2px 14px; margin: 14px 0; }
.pdf-fuentes small, .pdf-atrib { color: var(--suave); font-size: .8rem; }
.pdf-art { border-top: 1px solid var(--borde); padding-top: 6px; margin-top: 10px; font-size: .92rem; }
.pdf-art h3 { font-size: 1rem; margin: .3em 0; } .pdf-ley { font-size: .8rem; color: var(--suave); margin: 0; }
@media print {
  @page { size: A4; margin: 16mm 15mm 18mm; }
  html, body { background: #fff !important; color: #111 !important; }
  .cabecera, .menu, .pie, footer, nav, .no-imprimir, .aviso, .lluvia, #hueco-app, .boton, button, .reportar, .caja-guardar { display: none !important; }
  #app, main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .hoja-pdf { border: 0; border-radius: 0; padding: 0; max-width: none; font-size: 11pt; line-height: 1.45; }
  .hoja-pdf, .hoja-pdf * { color: #111 !important; background: transparent !important; box-shadow: none !important; }
  .hoja-pdf .pdf-marca, .hoja-pdf small, .pdf-pie, .pdf-ley, .pdf-atrib { color: #555 !important; }
  .pdf-portada { min-height: 245mm; display: flex; flex-direction: column; justify-content: center; border: 0; break-after: page; }
  .hoja-pdf h2, .pdf-art h3 { break-after: avoid; }
  .hoja-pdf p, .hoja-pdf li { orphans: 3; widows: 3; }
  .pdf-caja, .pdf-fuentes li { break-inside: avoid; }
  .pdf-articulos, .pdf-explicacion { break-before: page; }
  .pdf-explicacion .expl-texto { max-width: none; }
  .pdf-explicacion .expl-tabla { overflow: visible; }
  .pdf-explicacion h3, .pdf-explicacion h4 { break-after: avoid; }
  .pdf-explicacion .expl-caja, .pdf-explicacion .expl-pregunta, .pdf-explicacion tr { break-inside: avoid; }
}

/* Tarjetas de acceso (psicotécnicos, exámenes oficiales): faltaban en esta web y salían como enlaces sueltos */
.accesos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); margin: 18px 0 6px; }
.acceso-tarjeta { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); transition: transform .12s ease, border-color .12s ease; }
.acceso-tarjeta:hover { transform: translateY(-2px); border-color: var(--rojo); }
.acceso-tarjeta b { display: block; font-size: 1rem; letter-spacing: -.01em; }
.acceso-tarjeta small { color: var(--suave); font-size: .84rem; line-height: 1.35; display: block; margin-top: 2px; }
.acceso-icono { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.3rem; background: color-mix(in srgb, var(--rojo) 10%, var(--panel)); }
@media (max-width: 420px) {
  .accesos { grid-template-columns: 1fr 1fr; }
  .acceso-tarjeta { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
}

/* Enlace de cada pregunta a la página de su artículo (app.js, huecoArticulo) */
.art-preg { margin: 8px 0 0; font-size: .92rem; }
.art-preg:empty { display: none; }

/* Números que cuentan al entrar: cifras de ancho fijo para que la línea no baile mientras cuentan */
.resultado .nota, .cifra b, .cifras-reales b, .insignia text { font-variant-numeric: tabular-nums; }

/* Página de Premium: entrar quien ya paga y cambia de dispositivo (arriba del todo, bien visible) */
.ya-premium { display: block; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: #fff; color: #1d1d1f; text-decoration: none; font-size: .98rem; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.ya-premium b { color: #c8102e; }
.ya-premium:hover { transform: translateY(-1px); }

/* Premium: exámenes oficiales con candado (no son enlaces de verdad: al pulsar suben a los planes) */
.examenes-candado { margin-top: 18px; }
.examenes-candado ul { list-style: none; padding-left: 0; }
.examenes-candado li a { text-decoration: none; color: inherit; display: block; padding: 4px 0; }
.examenes-candado li a:hover { color: var(--rojo); }
/* Repaso rápido (tests con 2 respuestas): casilla discreta bajo los botones de test del tema y aviso dentro del test */
.rapido-casilla { display: flex; align-items: center; gap: 6px; font-size: .85rem; cursor: pointer; margin-top: 4px; }
.rapido-aviso { font-size: .82rem; margin: 2px 0 0; max-width: 60ch; }
.aviso-rapido { font-size: .8rem; margin: -4px 0 8px; }
/* Lista de oposiciones en dos grupos (en marcha / próxima convocatoria) */
.grupo-opos { margin-top: 22px; }
.grupo-opos h2 { margin-bottom: 2px; }
.grupo-opos h2 small { font: 600 .85rem Inter, system-ui, sans-serif; }

/* ================= TuTestDGT: piezas propias (tráfico) ================= */
/* Cabecera: el logo (señal con «aprobado») y, debajo, un bordillo rojo y blanco */
.cabecera { border-bottom: 0; }
.cabecera::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: repeating-linear-gradient(90deg, var(--error) 0 22px, #fff 22px 44px); }
.marca-icono { width: 34px; height: 34px; flex: none; border-radius: 9px; }
.marca-texto { color: var(--rojo-texto, var(--rojo)); letter-spacing: .02em; }
.marca-texto b { font-weight: 400; color: var(--error); }
.menu a.menu-oficiales { background: color-mix(in srgb, var(--ambar) 30%, transparent); }
.menu a.menu-oficiales.activo { background: var(--rojo); }
/* Portada: carretera con semáforo */
.carretera { width: 100%; max-width: 360px; justify-self: center; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.carretera .luz { opacity: .22; }
.carretera .luz-roja { animation: semaforo 6s infinite; }
.carretera .luz-ambar { animation: semaforo 6s infinite 2s; }
.carretera .luz-verde { animation: semaforo 6s infinite 4s; }
@keyframes semaforo { 0%, 30% { opacity: 1; } 33%, 100% { opacity: .22; } }
.hero.en-marcha .carretera .luz-verde { animation: none; opacity: 1; }
.hero.en-marcha .carretera .luz-roja, .hero.en-marcha .carretera .luz-ambar { animation: none; opacity: .22; }
.hero.en-marcha .carretera .coche { animation: avanzar .6s ease-in forwards; }
@keyframes avanzar { to { transform: translateY(-50px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .carretera .luz { animation: none !important; } .carretera .luz-verde { opacity: 1; } }
.chip-gratis { background: #1f9d55; color: #fff; border-color: transparent; }
.chips-hero .chip-opo { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; text-decoration: none; }
.aviso-muestra { background: color-mix(in srgb, var(--ambar) 22%, var(--panel)); border: 1px dashed var(--ambar); border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; }
.aviso-dgt { color: var(--texto); }
.aviso-dgt-legal { background: var(--rojo-suave); border-left: 4px solid var(--rojo); border-radius: 8px; padding: 10px 14px; }
/* Exámenes oficiales DGT: el bloque destacado de la portada */
.destacado-oficiales { margin: 18px 0; border-radius: 22px; padding: 22px 22px 20px; color: var(--texto); background: linear-gradient(135deg, color-mix(in srgb, var(--ambar) 26%, var(--panel)), var(--panel) 70%); border: 2px solid var(--ambar); box-shadow: var(--sombra); }
.destacado-oficiales h2 { margin: 8px 0 6px; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.destacado-oficiales p { margin: 0 0 10px; max-width: 70ch; }
.chip-oficial { background: #111827; color: #ffc400; border-color: transparent; }
.sello-oficial { background: var(--rojo-suave); border-radius: 10px; padding: 8px 12px; }
.ex-fuente { position: relative; z-index: 1; }
/* Tarjetas de secciones de la portada */
.secciones-inicio { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); margin: 18px 0; }
.tarjeta-seccion { display: grid; gap: 4px; text-decoration: none; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-top: 4px solid var(--rojo); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); transition: transform .12s, border-color .12s; }
.tarjeta-seccion:hover { transform: translateY(-2px); border-color: var(--rojo); }
.tarjeta-seccion .ts-emoji { font-size: 1.8rem; line-height: 1; }
.tarjeta-seccion b { font-size: 1.05rem; }
.tarjeta-seccion small { color: var(--suave); line-height: 1.4; }
.mapa-temas { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
/* Permisos: tarjetas con aire (como las de elegir oposición de BomberOpo). El permiso disponible, grande y con su botón;
   los que vienen, más discretos. Misma altura en cada fila; el pie (etiqueta y botón) siempre abajo. */
.permisos-rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); margin-top: 12px; }
.permiso-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra); transition: transform .12s, border-color .12s, box-shadow .12s; min-height: 100%; }
.permiso-card:hover { transform: translateY(-3px); border-color: var(--rojo); box-shadow: 0 2px 4px rgba(10,30,60,.08), 0 12px 28px rgba(10,30,60,.12); }
.permiso-card h3 { font-family: Inter, sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
.pc-texto { flex: 1; display: grid; gap: 4px; align-content: start; }
.pc-sub { margin: 0; color: var(--suave); font-size: .92rem; line-height: 1.45; }
.pc-datos { margin: 4px 0 0; font-size: .85rem; font-weight: 600; color: var(--texto); }
.pc-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--borde); }
.pc-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pc); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--pc) 35%, transparent); flex: none; }
.pc-icono svg { width: 30px; height: 30px; }
.permiso-card.principal { grid-column: span 2; border: 2px solid var(--rojo); background: linear-gradient(135deg, var(--rojo-suave), var(--panel) 60%); padding: 24px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 18px; }
.permiso-card.principal .pc-icono { width: 72px; height: 72px; grid-row: 1; }
.permiso-card.principal .pc-icono svg { width: 40px; height: 40px; }
.permiso-card.principal h3 { font-family: var(--titulo); font-weight: 400; font-size: 2.2rem; letter-spacing: .02em; }
.permiso-card.principal .pc-pie { grid-column: 1 / -1; }
.permiso-card.principal .boton { padding: 12px 22px; }
.permiso-card.pronto { background: var(--fondo); border-style: dashed; box-shadow: none; }
.permiso-card.pronto:hover { transform: none; border-color: var(--borde); box-shadow: none; }
.permiso-card.pronto .pc-icono { filter: grayscale(.55); opacity: .75; box-shadow: none; width: 48px; height: 48px; }
.permiso-card.pronto .pc-icono svg { width: 26px; height: 26px; }
.permiso-card.pronto h3 { color: var(--suave); }
@media (max-width: 560px) {
  .permiso-card.principal { grid-column: auto; grid-template-columns: 1fr; padding: 20px; }
  .permiso-card.principal .pc-pie .boton { flex: 1; }
  .permisos-rejilla { gap: 12px; }
}
/* Pregunta con imagen (señal o situación): sobre blanco también en modo oscuro, como en la vida real */
.preg-img { margin: 6px 0 12px; display: flex; justify-content: center; }
.preg-img img { max-width: min(100%, 320px); max-height: 200px; background: #fff; border-radius: 12px; padding: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.repaso .preg-img, .res .preg-img { justify-content: flex-start; }
.repaso .preg-img img, .res .preg-img img { max-height: 120px; }
.expl-premium { display: block; margin-top: 6px; font-size: .92rem; }
.fuente-preg { display: block; margin-top: 6px; color: var(--suave); }
/* Simulacro */
.examen-tarjeta h3 { margin-bottom: .2em; }
.listo-cifra { margin: 0; } .listo-cifra b { font-family: var(--titulo); font-size: 3rem; color: var(--verde); line-height: 1; }
.historial-examenes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hist { padding: 12px 14px; display: grid; gap: 2px; border-left: 5px solid var(--verde); }
.hist.no-apto { border-left-color: var(--error); }
.hist b { font-family: var(--titulo); font-size: 1.5rem; letter-spacing: .03em; }
.hist.apto b { color: var(--verde); } .hist.no-apto b { color: var(--error); }
.test-examen .reloj { font-variant-numeric: tabular-nums; }
.cifras-fallos { grid-template-columns: repeat(3, 1fr); }
.hecho { color: var(--verde); font-weight: 700; margin: 0; }
/* Estadísticas */
.grafico-examenes { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 24px 10px 0; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.barra-examen { flex: 1; max-width: 34px; height: calc(var(--h) * 1.3px + 4px); border-radius: 6px 6px 0 0; background: var(--verde); position: relative; }
.barra-examen.no-apto { background: var(--error); }
.barra-examen span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: .72rem; font-weight: 700; color: var(--suave); }
.linea-corte { position: absolute; left: 0; right: 0; bottom: calc(var(--h) * 1.3px + 4px); border-top: 2px dashed var(--suave); pointer-events: none; }
.linea-corte span { position: absolute; right: 6px; top: -18px; font-size: .72rem; color: var(--suave); background: var(--panel); padding: 0 4px; }
.tabla-estad { display: grid; gap: 4px; }
.fila-estad { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(90px, 1.4fr) .7fr .7fr .6fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--borde); text-decoration: none; color: var(--texto); font-size: .92rem; }
.fila-estad.cab { background: none; border: 0; font-weight: 700; color: var(--suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.te-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-barra { position: relative; height: 18px; border-radius: 99px; background: var(--fondo-2); overflow: hidden; }
.te-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.te-barra em { position: relative; font-style: normal; font-size: .75rem; font-weight: 700; padding-left: 8px; line-height: 18px; }
@media (max-width: 640px) {
  .fila-estad { grid-template-columns: minmax(0, 1fr) 90px; }
  .fila-estad > span:nth-child(n+3) { display: none; }
  .cifras-fallos { grid-template-columns: 1fr; }
}
/* Señales */
/* Móvil: menú en una fila deslizable */
@media (max-width: 760px) {
  .menu { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; }
  .destacado-oficiales { padding: 18px 16px; }
}

/* ---------- Respiro (22/10/2026, Pol: «muy junto»): espaciado y jerarquía de toda la web ----------
   Al final del fichero para mandar sobre lo heredado: texto a 1,6, titulares a 1,25, 1100 px de ancho, secciones
   separadas 56 px (36 en el móvil), botones y opciones más holgados (opciones de al menos 52 px). */
body { line-height: 1.6; }
h1, h2, h3 { line-height: 1.25; }
h1 { margin: 0 0 .35em; }
h2 { margin: 0 0 .6em; }
h3 { margin: 0 0 .5em; }
p { margin: 0 0 1em; }
main { max-width: 1100px; padding: 32px 24px 64px; }
h1 + p.suave, h1 + .suave { font-size: 1.05rem; margin-top: 0; margin-bottom: 1.5em; max-width: 72ch; }
.seccion, .permisos-inicio { margin-top: 56px; }
.cifras, .secciones-inicio, .destacado-oficiales, .plan-hoy { margin: 40px 0; }
.dos-col { margin-top: 56px; gap: 20px; }
.mapa-titulo { margin-top: 56px; }
.rejilla, .secciones-inicio, .permisos-rejilla { gap: 20px; }
.panel { padding: 24px; }
.panel h2 { margin-bottom: .5em; }
.fila { gap: 14px; }
.boton { padding: 13px 22px; }
.boton.grande { padding: 17px 28px; }
.hero { padding: 36px 32px; gap: 28px; border-radius: 26px; }
.hero h1 { margin-bottom: .3em; }
.hero p { margin-bottom: 18px; line-height: 1.6; }
.hero .fila { margin-top: 6px; }
.rango { margin: 18px 0 20px; }
.chips-hero { margin-bottom: 16px; }
.cifra { padding: 18px 20px; }
.tarjeta-seccion { padding: 20px; gap: 6px; }
.tarjeta-tema { padding: 18px; }
.opciones { gap: 12px; }
.opcion { min-height: 52px; padding: 14px 18px; align-items: center; line-height: 1.45; }
.pregunta h2 { margin: 10px 0 20px; line-height: 1.45; }
.explicacion { margin-top: 18px; line-height: 1.6; }
.test-cab { margin-bottom: 18px; }
.test-pie { margin-top: 20px; gap: 14px; }
.claves { gap: 12px; }
.claves li { padding: 12px 16px; line-height: 1.5; }
.oposicion-datos li, .ventajas li, .fuentes li, .legal li { margin: 8px 0; line-height: 1.6; }
.legal h2 { margin-top: 2em; }
.plan-hoy ul { gap: 10px; }
.plan-hoy a { padding: 12px 16px; }
.res, .repaso .item { margin-bottom: 14px; }
.resumen p { line-height: 1.7; margin-bottom: 1.1em; }
.pie { padding: 32px 20px 40px; line-height: 1.6; }
.pie p + p { margin-top: 10px; }
.vacio { padding: 56px 16px; }
@media (max-width: 760px) {
  main { padding: 22px 16px 44px; }
  .seccion, .permisos-inicio, .mapa-titulo, .dos-col { margin-top: 36px; }
  .cifras, .secciones-inicio, .destacado-oficiales, .plan-hoy { margin: 28px 0; }
  .hero { padding: 26px 20px; }
  .panel { padding: 20px; }
  .rejilla, .secciones-inicio, .permisos-rejilla { gap: 14px; }
}
/* Avisos dentro del contenido: ámbar suave (el gris oscuro translúcido es solo para encima del azul del hero) */
.aviso-prep { background: color-mix(in srgb, var(--ambar) 16%, var(--panel)); color: var(--texto); border: 1px solid color-mix(in srgb, var(--ambar) 45%, var(--borde)); border-radius: 12px; padding: 10px 14px; line-height: 1.55; }
.hero .aviso-prep { background: rgba(0,0,0,.22); color: #fff; border-color: transparent; }
.te-barra em { position: absolute; right: 8px; top: 0; padding: 0; color: var(--texto); }

/* ---------- Señales: catálogo de miniaturas, ficha (ventana / hoja inferior) y modo repaso ---------- */
/* align-items: start: una tarjeta nunca se estira para igualar a otra; todas con la misma forma: miniatura cuadrada sobre
   blanco (o la placa con el código), código y nombre en dos líneas como mucho */
.senales-barra { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 8px 0 18px; }
.buscador-senales { flex: 1 1 320px; max-width: 520px; padding: 10px 16px; }
.senales-acciones { gap: 10px; }
.chips-familias { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.chips-familias button { border: 1.5px solid var(--borde); background: var(--panel); color: var(--texto); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: .9rem; cursor: pointer; min-height: 40px; }
.chips-familias button small { color: var(--suave); font-weight: 700; margin-left: 2px; }
.chips-familias button[aria-selected="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.chips-familias button[aria-selected="true"] small { color: #dbe7fb; }
.cuenta-senales { margin: 0 0 12px; font-size: .9rem; }
.senales-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; }
.senal-card { display: grid; grid-template-rows: auto auto auto; gap: 6px; padding: 12px; text-align: center; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); cursor: pointer; font: inherit; transition: transform .12s, border-color .12s, box-shadow .12s; }
.senal-card:hover, .senal-card:focus-visible { transform: translateY(-3px); border-color: var(--rojo); box-shadow: 0 2px 4px rgba(10,30,60,.08), 0 12px 26px rgba(10,30,60,.12); outline: none; }
.sc-min { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 10px; overflow: hidden; }
.sc-min img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sc-cod { font-size: .95rem; font-weight: 800; letter-spacing: .01em; }
.sc-nom { font-size: .82rem; line-height: 1.3; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
/* Placa con el código (señal aún sin imagen): un cartel azul de verdad, no una caja vacía */
.placa-senal { display: grid; place-items: center; width: 82%; aspect-ratio: 1; border-radius: 14%; background: #0a4ea3; color: #fff; font: 800 clamp(.9rem, 3.2vw, 1.25rem)/1.1 Inter, Arial, sans-serif; text-align: center; padding: 8px; box-shadow: inset 0 0 0 4px #0a4ea3, inset 0 0 0 7px #fff; word-break: break-word; }
/* Ficha de la señal */
.dialogo-senal { width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 820px); padding: 0; border: 0; border-radius: 22px; background: var(--panel); color: var(--texto); box-shadow: 0 30px 70px rgba(0,0,0,.35); overflow: hidden; }
.dialogo-senal[open] { display: flex; flex-direction: column; animation: ds-entra .18s ease-out; }
.dialogo-senal::backdrop { background: rgba(8, 15, 28, .55); backdrop-filter: blur(2px); }
@keyframes ds-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.ds-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.ds-cab .chip { font-size: .9rem; padding: 4px 12px; background: var(--rojo-suave); color: var(--rojo-texto, var(--rojo)); border-color: transparent; }
.ds-pos { margin-left: auto; font-size: .85rem; }
.ds-cerrar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fondo-2); color: var(--texto); font-size: 1.1rem; cursor: pointer; }
.ds-cuerpo { display: grid; grid-template-columns: 220px 1fr; gap: 26px; padding: 22px 24px; overflow-y: auto; align-items: start; }
.ds-imagen { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 16px; }
.ds-imagen img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ds-imagen .placa-senal { font-size: 1.6rem; }
.ds-texto h2 { font-family: Inter, sans-serif; font-weight: 800; letter-spacing: -.01em; font-size: 1.35rem; margin: 0 0 4px; }
.ds-grupo { margin: 0 0 12px; font-size: .88rem; }
.ds-significado { font-size: 1.05rem; line-height: 1.65; margin: 0 0 12px; }
.ds-fuente { font-size: .85rem; margin: 0 0 18px; }
.ds-acciones { gap: 10px; }
.ds-nav { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--borde); background: var(--fondo); }
@media (max-width: 640px) {
  /* En el móvil, hoja que sube desde abajo */
  .dialogo-senal { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 90vh; border-radius: 22px 22px 0 0; }
  .dialogo-senal[open] { animation: ds-sube .22s ease-out; }
  @keyframes ds-sube { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
  .ds-cuerpo { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .ds-imagen { width: min(200px, 60vw); justify-self: center; }
  .ds-acciones .boton { flex: 1; }
  .senales-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .senales-barra { flex-direction: column; align-items: stretch; }
  .buscador-senales { max-width: none; }
  .chips-familias { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 4px; scrollbar-width: none; }
  .chips-familias button { flex: none; }
}
/* Modo repaso: tarjeta que se da la vuelta */
.repaso-senales { max-width: 560px; margin: 0 auto; }
.flashcard { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 62vh; margin: 8px 0 18px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1200px; font: inherit; color: var(--texto); }
.fc-cara { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; border-radius: 24px; background: var(--panel); border: 1px solid var(--borde); box-shadow: 0 10px 30px rgba(10,30,60,.14); backface-visibility: hidden; transition: transform .45s ease; text-align: center; }
.fc-frente { background: #fff; }
.fc-img { display: grid; place-items: center; width: 74%; aspect-ratio: 1; }
.fc-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fc-pista { color: #4b5563; font-size: .92rem; }
.fc-dorso { transform: rotateY(180deg); }
.fc-dorso b { font-size: 1.3rem; line-height: 1.3; }
.fc-sig { line-height: 1.6; }
.flashcard.girada .fc-frente { transform: rotateY(-180deg); }
.flashcard.girada .fc-dorso { transform: rotateY(0); }
.fc-botones { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .fc-cara { transition: none; } }
.dialogo-senal { max-width: min(760px, calc(100vw - 32px)); }
@media (max-width: 640px) {
  .dialogo-senal { max-width: 100vw; }
  .senales-barra .buscador-senales { flex: none; order: 0; width: 100%; padding: 10px 14px; }
}
/* Placa por familia (SVG de app.js y seo_senales.py) con la forma de su señal: triángulo de peligro, círculo de
   prohibición u obligación, cuadrado azul de indicación, rótulo de marca vial, vehículo o agente */
svg.placa-senal { width: 86%; height: auto; aspect-ratio: 1; padding: 0; background: none; box-shadow: none; border-radius: 0; display: block; }
@media (max-width: 640px) { .senales-acciones { width: 100%; flex-wrap: nowrap; } .senales-acciones .boton { flex: 1 1 auto; padding: 12px 10px; font-size: .95rem; white-space: nowrap; } }
@media (max-width: 400px) { .senales-acciones .boton { padding: 12px 8px; font-size: .9rem; gap: 6px; } .senales-acciones .ts-n { display: none; } }
/* Vídeos oficiales (DGT, RTVE): fachada con miniatura y play; el iframe de youtube-nocookie solo al pulsar */
.video-meta { display: block; margin-top: 4px; color: var(--suave); font-size: .82rem; }
.video-info p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
.video-aviso { color: var(--suave); background: color-mix(in srgb, var(--ambar) 14%, var(--panel)); border-radius: 8px; padding: 6px 10px; font-size: .84rem !important; }
.videos { align-items: start; gap: 20px; }
.videos-tira { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; }
.videos-tira .video { scroll-snap-align: start; }
@media (max-width: 640px) { .videos-tira { grid-auto-columns: 82%; margin: 0 -16px; padding: 4px 16px 14px; } .videos { grid-template-columns: 1fr; } .videos-tira { grid-template-columns: none; } }

/* Guías: banner de novedades, lista de la portada y de cada tema */
.banner-novedades { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 18px; border-radius: 16px; text-decoration: none; color: #111827; background: linear-gradient(90deg, #ffc400, #ffe27a); box-shadow: var(--sombra); transition: transform .12s; }
.banner-novedades:hover { transform: translateY(-2px); }
.bn-chip { flex: none; background: #111827; color: #ffc400; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: .85rem; }
.bn-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bn-texto b { font-size: 1.05rem; line-height: 1.3; }
.bn-texto small { color: #374151; line-height: 1.35; }
.bn-flecha { font-size: 1.4rem; font-weight: 800; }
.lista-guias-app { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); align-items: start; }
.lista-guias-app a { display: flex; gap: 12px; align-items: center; padding: 14px 16px; min-height: 64px; text-decoration: none; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--rojo); border-radius: 14px; box-shadow: var(--sombra); transition: transform .12s, border-color .12s; }
.lista-guias-app a:hover { transform: translateY(-2px); border-color: var(--rojo); }
.lista-guias-app span { font-size: 1.4rem; flex: none; }
.lista-guias-app b { font-size: .95rem; line-height: 1.35; }
@media (max-width: 640px) { .banner-novedades { padding: 12px 14px; gap: 10px; } .bn-texto small { display: none; } }

/* Prueba social: una línea discreta con la cifra real (solo si son 10 o más) */
.cifra-opo { margin: 0 0 12px; font-size: .9rem; font-weight: 600; }
.cifra-opo.en-hero { color: #dbe7fb; }

/* Compartir con tu grupo: una línea discreta bajo el resultado */
.compartir { margin: 14px 0 0; font-size: .9rem; text-align: center; }
/* Tu evolución: barras de los últimos 14 días */
.evolucion { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; padding: 24px 12px 8px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.ev-dia { display: grid; grid-template-rows: auto 1fr auto; height: 100%; align-items: end; justify-items: center; gap: 4px; }
.ev-dia i { display: block; width: 100%; max-width: 26px; height: calc(var(--h) * 1%); min-height: 0; border-radius: 6px 6px 2px 2px; background: var(--c); align-self: end; }
.ev-dia small { font-size: .7rem; color: var(--suave); }
.ev-pct { font-size: .62rem; font-weight: 700; color: var(--suave); }
@media (max-width: 640px) { .ev-pct { display: none; } .evolucion { gap: 3px; padding: 14px 8px 6px; } }
/* Menú del móvil: siempre filas completas de 4 (como BomberOpo); «Permisos» se queda en el chip del hero y en el pie */
@media (max-width: 860px) {
  .menu { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; flex-wrap: wrap; }
  .menu a.solo-escritorio { display: none; }
}
/* Imprimir el tema (o guardarlo en PDF): solo el contenido, sin cabecera, menú, botones ni pie */
@media print {
  .cabecera, .pie, #hueco-app, .acciones, .indice, .imprimir-tema, .test-pie, .reportar, .migas, #videos, #guias, .aviso-cookies, .aviso, .lluvia, .aviso-muestra { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .seccion { margin-top: 18px; break-inside: avoid-page; }
  .claves li, .nota-caja { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  h1 { font-size: 22pt; } h2 { font-size: 15pt; }
}

/* Páginas estáticas (generar_seo.py): menú corto en la cabecera */
.menu-seo { display: flex; gap: 4px; flex-wrap: wrap; }
.menu-seo a { text-decoration: none; color: var(--texto); font-weight: 600; font-size: .9rem; padding: 7px 11px; border-radius: 999px; }
.menu-seo a:hover { background: var(--fondo-2); }
@media (max-width: 860px) { .menu-seo { order: 3; width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; } .menu-seo a { display: flex; flex-direction: column; align-items: center; font-size: 1.1rem; padding: 6px 2px; text-align: center; } .menu-seo a span { font-size: .64rem; line-height: 1.15; } }

/* Explicación completa del tema (Premium, app.js pintarExplicacion; como en BomberOpo y PoliciaOpo): texto largo legible en móvil y en oscuro */
.expl-chip { vertical-align: middle; background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #3a2200; border-color: transparent; }
.expl-cuerpo > summary { cursor: pointer; font-weight: 700; padding: 12px 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--panel); list-style-position: inside; }
.expl-cuerpo[open] > summary { margin-bottom: 12px; }
.expl-indice { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.expl-indice a { font-size: .82rem; font-weight: 600; text-decoration: none; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto); }
.expl-texto { max-width: 78ch; overflow-wrap: anywhere; }
.expl-texto h3 { margin: 1.6em 0 .4em; color: var(--rojo); scroll-margin-top: 90px; }
.expl-texto h4 { font: 700 1.05rem/1.3 Inter, system-ui, sans-serif; margin: 1.3em 0 .4em; }
.expl-texto p { margin: 0 0 .8em; }
.expl-texto ul { padding-left: 1.25em; margin: 0 0 1em; }
.expl-texto li { margin: .35em 0; }
.expl-examen { background: color-mix(in srgb, var(--ambar) 14%, var(--panel)); border-left: 4px solid var(--ambar); border-radius: 8px; padding: 8px 12px; }
.expl-tabla { overflow-x: auto; margin: .4em 0 1em; overflow-wrap: normal; }
.expl-tabla td:first-child { min-width: 6.5em; }
.expl-tabla table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.expl-tabla th, .expl-tabla td { border: 1px solid var(--borde); padding: 6px 8px; text-align: left; vertical-align: top; }
.expl-tabla th { background: var(--fondo-2); }
.expl-caja { border-radius: 12px; padding: 12px 16px 4px; margin: 1em 0 1.2em; }
.expl-caja.repaso { background: color-mix(in srgb, var(--agua) 10%, var(--panel)); border: 1px dashed var(--agua); }
.expl-caja.trampas { background: color-mix(in srgb, var(--rojo) 8%, var(--panel)); border: 1px dashed var(--rojo); }
.expl-caja.ojo { background: color-mix(in srgb, var(--ambar) 12%, var(--panel)); border: 1px solid var(--ambar); }
.expl-caja.resumen { background: color-mix(in srgb, var(--verde) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--verde) 45%, var(--borde)); }
.expl-caja.truco { background: color-mix(in srgb, var(--ambar) 18%, var(--panel)); border: 1px dashed var(--ambar); }
.expl-caja.flujo { background: var(--panel); border: 1px solid var(--borde); }
.expl-flujo { list-style: none; padding: 0 !important; margin: 0 0 10px; counter-reset: paso; }
.expl-flujo li { position: relative; margin: 0 0 18px; padding: 8px 12px 8px 40px; border-radius: 10px; background: var(--fondo-2); border: 1px solid var(--borde); counter-increment: paso; }
.expl-flujo li::before { content: counter(paso); position: absolute; left: 10px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--rojo); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.expl-flujo li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); color: var(--suave); font-size: .9rem; line-height: 18px; }
.expl-caja-titulo { display: block; margin-bottom: 8px; }
.expl-caso, .expl-pregunta { border: 1px solid var(--borde); border-radius: 12px; padding: 4px 14px 6px; margin: 0 0 14px; background: var(--panel); }
.expl-pasos, .expl-opciones { list-style: none; padding-left: 0 !important; }
.expl-opciones li.bien { color: var(--verde); }
.expl-enunciado { font-weight: 600; margin-top: .8em !important; }
.expl-candado { display: flex; gap: 14px; align-items: flex-start; }
.expl-candado-icono { font-size: 2.2rem; line-height: 1; }
.expl-candado ul { padding-left: 1.1em; }
@media (max-width: 560px) { .expl-candado { flex-direction: column; } .expl-tabla table { font-size: .84rem; } }
.expl-muestra { margin: 0 0 12px; }
@media print { .expl-seccion { display: none !important; } }
.expl-senal { width: auto; height: 2.2em; vertical-align: middle; margin: 0 6px 0 0; }

/* Propuesta de valor (portada, Premium, tras un test) */
.valor { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .92rem; }
.valor li { margin: 0; }
.hero .valor { color: #eaf2ff; }
.hero .valor b { color: #fff; }
.premium-caja .valor { font-size: .86rem; margin: 2px 0 12px; }
.premium-caja .premium-letra { font-size: .8rem; margin: 8px 0 0; }

/* ---------- 🎯 Plan para aprobar (plan.js) ---------- */
.menu a.menu-plan { font-weight: 800; }
.plan-inicio { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; padding: 16px 20px; border-radius: 18px; text-decoration: none; color: var(--texto); background: linear-gradient(135deg, var(--rojo-suave), var(--panel) 65%); border: 2px solid var(--rojo); box-shadow: var(--sombra); transition: transform .12s; }
.plan-inicio:hover { transform: translateY(-2px); }
.plan-inicio-gratis { border-style: dashed; }
.pi-emoji { font-size: 2rem; }
.pi-cuenta { display: grid; place-items: center; min-width: 64px; padding: 6px 8px; border-radius: 14px; background: var(--rojo); color: #fff; line-height: 1; }
.pi-cuenta b { font-family: var(--titulo); font-size: 2rem; font-weight: 400; }
.pi-cuenta small { font-size: .72rem; }
.pi-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pi-texto small { color: var(--suave); line-height: 1.4; }
.pi-ir { font-size: 1.4rem; font-weight: 800; color: var(--rojo-texto, var(--rojo)); }
.plan-cabecera { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 0 0 22px; }
.plan-cuenta { display: grid; place-items: center; min-width: 120px; padding: 12px 16px; border-radius: 18px; background: var(--rojo); color: #fff; text-align: center; line-height: 1.1; }
.plan-cuenta b { font-family: var(--titulo); font-size: 3.2rem; font-weight: 400; }
.plan-cuenta span { font-size: .85rem; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--rojo-texto, var(--rojo)); text-decoration: underline; cursor: pointer; font: inherit; }
.plan-fecha .fila { margin-top: 8px; }
.plan-fecha input[type=date] { padding: 11px 14px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--panel); color: var(--texto); font: inherit; }
.plan-bloques { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plan-bloques a { display: flex; gap: 14px; align-items: center; min-height: 60px; padding: 12px 16px; border-radius: 14px; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto); text-decoration: none; }
.plan-bloques a:hover { border-color: var(--rojo); }
.plan-bloques li.hecho a { background: var(--verde-suave); border-color: transparent; }
.plan-bloques li.hecho b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--verde) 60%, transparent); }
.pb-check { font-size: 1.4rem; flex: none; }
.pb-texto { flex: 1; display: grid; gap: 2px; }
.pb-texto small { color: var(--suave); }
.pb-ir { font-weight: 800; color: var(--rojo-texto, var(--rojo)); }
.plan-prob { margin-top: 22px; }
.plan-prob-cab { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.plan-prob-cab h2 { margin: 0 0 6px; }
.medidor-prob { width: 190px; flex: none; color: var(--texto); }
.plan-consejos { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.plan-consejos a { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--fondo); border: 1px solid var(--borde); text-decoration: none; color: var(--texto); }
.plan-metodo { margin-top: 12px; font-size: .88rem; color: var(--suave); }
.plan-metodo summary { cursor: pointer; }
.plan-semana { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.plan-semana li { display: grid; gap: 2px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; font-size: .9rem; }
.plan-semana b { text-transform: capitalize; }
.plan-listo { margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: var(--verde-suave); border: 2px solid var(--verde); }
.plan-bloqueado { position: relative; overflow: hidden; margin-top: 22px; }
.plan-bloques.borroso { filter: blur(3px); opacity: .6; pointer-events: none; user-select: none; }
.plan-candado { position: absolute; inset: 56px 16px 16px; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; background: color-mix(in srgb, var(--panel) 82%, transparent); border-radius: 14px; padding: 16px; }
.plan-candado > span { font-size: 2rem; }
.plan-candado p { margin: 0 0 6px; max-width: 46ch; }
.plan-gancho { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; text-align: left; }
.plan-gancho .medidor-prob { width: 150px; }
.plan-gancho > div { flex: 1 1 260px; }
.plan-tras { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--rojo-suave); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.plan-tras p { margin: 0; }
@media (max-width: 640px) { .plan-candado { inset: 50px 8px 8px; } .medidor-prob { width: 160px; } .plan-inicio { padding: 14px; gap: 12px; } }
.candado .candado-valor { justify-content: center; font-size: .9rem; }
.medidor-prob { height: auto; aspect-ratio: 200 / 118; display: block; }
.panel .mapa-titulo { margin-top: 0; }

/* ---------- Menú: 6 principales + «Más ▾» en el ordenador; 4+4 en el móvil (como BomberOpo) ---------- */
.menu, .menu-seo { align-items: center; }
.menu .solo-movil { display: none; }
.menu-mas { position: relative; }
.menu-mas > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: .92rem; padding: 7px 12px; border-radius: 999px; color: var(--texto); user-select: none; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas > summary:hover, .menu-mas[open] > summary { background: var(--fondo-2); }
.menu-mas-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; display: grid; gap: 2px; padding: 8px; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.menu .menu-mas-lista a, .menu-seo .menu-mas-lista a { display: block; padding: 9px 12px; border-radius: 10px; font-size: .92rem; white-space: nowrap; text-align: left; }
.menu .menu-mas-lista a.activo { background: var(--rojo); color: #fff; }
.menu-mas-lista a[hidden] { display: none !important; }
@media (max-width: 860px) {
  .menu .solo-movil { display: flex; }
  .menu .menu-mas.solo-escritorio { display: none; }
  .menu-seo { grid-template-columns: repeat(6, 1fr) !important; }
  .menu-seo .menu-mas > summary { display: flex; flex-direction: column; align-items: center; font-size: .64rem; padding: 6px 2px; text-align: center; }
  .menu-seo .menu-mas > summary span { font-size: 1.1rem; line-height: 1; order: -1; }
  .menu-seo .menu-mas-lista { right: 0; }
}

/* «Tus fallos» en la barra (Pol, 22/10): Inicio, Exámenes DGT, Tests por tema, Simulacro, Señales, Mi plan, Tus fallos y
   Más = 8, dos filas de 4 en el móvil; en el ordenador, todo en una línea a 1280 px */
.menu-mas > summary .mas-ico { display: none; }
@media (min-width: 861px) { .menu a { padding: 7px 10px; } .menu-mas > summary { padding: 7px 10px; } }
@media (max-width: 860px) {
  .menu .menu-mas { display: block; }
  .menu .menu-mas > summary { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; text-align: center; }
  .menu .menu-mas > summary .mas-ico { display: block; font-size: 1.15rem; line-height: 1.2; }
  .menu .menu-mas > summary .mas-txt { font-size: .66rem; line-height: 1.1; }
  .menu .menu-mas-lista { right: 0; }
}

/* Ordenador: la marca y las herramientas (buscador, Premium) en la primera fila; el menú entero en la segunda, en una línea */
@media (min-width: 861px) {
  .cabecera .marca { order: 1; }
  .cabecera .herramientas { order: 2; }
  .cabecera .menu, .cabecera .menu-seo { order: 3; flex-basis: 100%; }
}
@media (max-width: 860px) {
  .menu-seo .menu-mas > summary .mas-ico { display: block; font-size: 1.1rem; line-height: 1.2; }
  .menu-seo .menu-mas > summary .mas-txt { font-size: .64rem; }
}
/* Ordenador: el menú ocupa todo el ancho, con los botones repartidos por igual y el texto centrado (Pol, 22/10) */
@media (min-width: 861px) {
  .cabecera .menu, .cabecera .menu-seo { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: space-between; }
  .cabecera .menu > a, .cabecera .menu > details, .cabecera .menu-seo > a, .cabecera .menu-seo > details { flex: 1 1 0; min-width: 0; }
  .cabecera .menu > a, .cabecera .menu-seo > a { justify-content: center; text-align: center; white-space: nowrap; }
  .cabecera .menu > details > summary, .cabecera .menu-seo > details > summary { display: flex; justify-content: center; gap: 4px; padding: 7px 10px; }
  .cabecera .menu-seo > a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; }
}
.sc-cod-largo { font-size: .85rem; line-height: 1.25; }
/* Pie en tres columnas (app y páginas estáticas, generar_seo.pie_html): Estudiar · Recursos DGT · La web */
.pie { text-align: left; }
.pie .pie-cols { max-width: 1000px; margin: 0 auto 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pie .pie-col h2 { font-family: inherit; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto); margin: 0 0 8px; }
.pie .pie-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie .pie-col a { color: var(--suave); text-decoration: none; display: inline-block; padding: 4px 0; }
.pie .pie-col a:hover { color: var(--rojo); text-decoration: underline; }
.pie .pie-marca, .pie .aviso-dgt { max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; }
.pie .pie-marca { padding-top: 18px; border-top: 1px solid var(--borde); }
@media (max-width: 640px) {
  .pie .pie-cols { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .pie .pie-col:last-child { grid-column: 1 / -1; }
  .pie .pie-col:last-child ul { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .pie .pie-col a { padding: 6px 0; }
}
.pie .pie-instalar { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--suave); cursor: pointer; }
.pie .pie-instalar:hover { color: var(--rojo); text-decoration: underline; }
@media (max-width: 640px) { .pie .pie-instalar { padding: 6px 0; } }
/* Tablas de datos de las páginas estáticas (aprobados, datos-dgt, guías): en el ordenador caben sin barra (la tabla sale
   del ancho del texto hasta ~1100 px); la barra de desplazamiento solo en pantallas pequeñas */
main.seo .tabla-scroll { overflow-x: auto; box-sizing: border-box; max-width: 100%; }
main.seo .tabla-scroll table { width: 100%; border-collapse: collapse; }
main.seo .tabla-scroll th { white-space: normal; }
@media (min-width: 900px) {
  main.seo .tabla-scroll { width: min(1100px, calc(100vw - 64px)); max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
  main.seo .tabla-scroll table { min-width: 0; font-size: .88rem; }
  main.seo .tabla-scroll th, main.seo .tabla-scroll td { padding: 7px 9px; }
}
/* «Abrir la explicación completa» del tema: botón grande con el color de la marca (Pol, 23/10); cerrado al entrar */
.expl-boton, .expl-cuerpo > summary.expl-boton { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; width: 100%; box-sizing: border-box;
  background: var(--rojo); color: #fff; border: 0; border-radius: 14px; padding: 16px 20px; font-size: 1.08rem; font-weight: 800; text-align: center;
  text-decoration: none; cursor: pointer; list-style: none; box-shadow: 0 4px 0 var(--rojo-oscuro); transition: filter .15s, transform .08s; margin: 6px 0 14px; }
.expl-cuerpo > summary.expl-boton::-webkit-details-marker { display: none; }
.expl-boton small { font-weight: 600; font-size: .9rem; opacity: .92; }
.expl-boton:hover { filter: brightness(1.08); }
.expl-boton:active { transform: translateY(1px); }
.expl-boton:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.expl-cuerpo[open] > summary.expl-boton { background: var(--fondo-2); color: var(--texto); box-shadow: none; border: 1px solid var(--borde); font-size: .98rem; padding: 12px 16px; }
.expl-cuerpo[open] .eb-abrir, .expl-cuerpo:not([open]) .eb-cerrar { display: none; }
.expl-boton-candado .eb-premium { flex-basis: 100%; }
@media (max-width: 560px) { .expl-boton, .expl-cuerpo > summary.expl-boton { font-size: 1rem; padding: 14px 14px; } .expl-boton small { font-size: .82rem; } }