/* ═══════════════════════════════════════════════════════════════════════════
   TESTS DEL PERMISO B · la app del alumno (calcada de la del CAP: captest/app.css)
   Piel CAP (violeta, cristal, Product Sans en títulos, monoespaciada en cifras)
   y los dibujos de los asistentes de tramitación. Pensada para el móvil;
   desde 900 px el menú pasa a una columna a la izquierda.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --tinta: #1e1b2e; --tinta2: #4c4670; --gris: #8b86a8; --gris2: #a5a1c2;
    --violeta: #7c3aed; --violeta2: #6d28d9; --violeta-cl: #f5f3ff; --linea: #efecfa; --linea2: #e4e0f4;
    --ok: #16a34a; --ok-cl: #dcfce7; --mal: #dc2626; --mal-cl: #fee2e2; --ambar: #d97706; --ambar-cl: #fef3c7;
    --comun: #7c3aed; --mercancias: #ea580c; --viajeros: #0d9488;
    --fondo: #f6f4fd;
    --f: var(--vega-font, 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
    --fd: var(--vega-font-display, 'Product Sans', 'Google Sans', system-ui, sans-serif);
    --fm: var(--vega-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    --r: 1.25rem; --sombra: 0 14px 34px -20px rgba(76,29,149,.45);
    --nav-h: 4.4rem; --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--f); color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input { font: inherit; color: inherit; }
a { color: var(--violeta); }
.mono { font-family: var(--fm); font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid rgba(124,58,237,.45); outline-offset: 2px; border-radius: .6rem; }

/* Luces del fondo */
.luces { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.luces i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .32; }
.luces i:nth-child(1) { width: 60vw; height: 60vw; background: #c4b5fd; top: -20vw; left: -15vw; }
.luces i:nth-child(2) { width: 45vw; height: 45vw; background: #a5f3fc; bottom: -10vw; right: -12vw; opacity: .25; }
.luces i:nth-child(3) { width: 30vw; height: 30vw; background: #fbcfe8; top: 45%; left: 55%; opacity: .2; }

/* Ruedas de los dibujos (asistente_dibujos.php): giran con --gira: running */
.cvw-rueda { transform-box: fill-box; transform-origin: center; animation: ct-gira .45s linear infinite; animation-play-state: var(--gira, paused); }
@keyframes ct-gira { to { transform: rotate(360deg); } }

/* ══ Estructura ══ */
#app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }
.marco { min-height: 100vh; min-height: 100dvh; }
.cab { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; padding-top: calc(.7rem + env(safe-area-inset-top, 0px));
       background: rgba(246,244,253,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(124,58,237,.08); }
.cab-marca { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cab-logo { width: 2.3rem; height: 2.3rem; border-radius: .8rem; flex: none; display: grid; place-items: center; color: #fff;
            background: linear-gradient(135deg,#4c1d95,#7c3aed); box-shadow: 0 6px 14px -6px rgba(124,58,237,.7); }
.cab-logo svg { width: 1.7rem; }
.cab-t { font-family: var(--fd); font-weight: 900; font-size: 1.05rem; line-height: 1.1; }
.cab-s { font-size: .7rem; color: var(--gris); font-weight: 600; }
.cab-av { margin-left: auto; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem;
          color: var(--violeta2); background: linear-gradient(135deg,#ede9fe,#e0e7ff); }
.contenido { padding: 1rem 1rem calc(var(--nav-h) + var(--safe-b) + 1.5rem); max-width: 1120px; margin: 0 auto; }

/* Barra de abajo (móvil) */
.nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
       display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
       border-top: 1px solid var(--linea); box-shadow: 0 -10px 30px -20px rgba(76,29,149,.4); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-decoration: none; color: var(--gris);
         font-size: .68rem; font-weight: 700; position: relative; }
.nav a i { font-size: 1.15rem; transition: transform .2s; }
.nav a.on { color: var(--violeta); }
.nav a.on i { transform: translateY(-2px); }
.nav a.on::before { content: ''; position: absolute; top: 0; width: 2.2rem; height: 3px; border-radius: 0 0 4px 4px; background: var(--violeta); }
.nav .nav-marca { display: none; }
.nav a.vega { display: none; }

@media (min-width: 900px) {
    .marco { display: grid; grid-template-columns: 250px minmax(0,1fr); }
    .nav { position: sticky; top: 0; height: 100vh; grid-template-columns: none; grid-auto-rows: min-content; align-content: start; gap: .3rem;
           padding: 1.4rem .9rem; border-top: 0; border-right: 1px solid var(--linea); box-shadow: none; background: rgba(255,255,255,.7); }
    .nav .nav-marca { display: flex; align-items: center; gap: .65rem; padding: 0 .4rem 1.3rem; margin-bottom: .6rem; border-bottom: 1px solid var(--linea); }
    .nav a { flex-direction: row; justify-content: flex-start; gap: .8rem; font-size: .92rem; padding: .75rem .9rem; border-radius: .9rem; }
    .nav a i { width: 1.3rem; text-align: center; }
    .nav a:hover { background: var(--violeta-cl); color: var(--violeta2); }
    .nav a.on { background: var(--violeta); color: #fff; box-shadow: 0 10px 22px -12px rgba(124,58,237,.8); }
    .nav a.on::before { display: none; }
    .nav a.on i { transform: none; }
    .cab .cab-marca { display: none; }
    .cab { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 1.2rem 2rem .2rem; }
    .contenido { padding: 1rem 2rem 3rem; }
}

/* ══ Piezas ══ */
.tarjeta { background: rgba(255,255,255,.88); border: 1px solid rgba(124,58,237,.12); border-radius: var(--r); box-shadow: var(--sombra);
           backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.eyebrow { font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--violeta); }
.h1 { font-family: var(--fd); font-weight: 900; font-size: 1.7rem; line-height: 1.15; margin: .2rem 0 0; letter-spacing: -.01em; }
.h2 { font-family: var(--fd); font-weight: 900; font-size: 1.2rem; margin: 1.6rem 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.sub { color: #6b6690; font-size: .9rem; margin: .3rem 0 0; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: 1rem; font-weight: 800;
         font-size: .95rem; background: var(--violeta); color: #fff; box-shadow: 0 12px 24px -14px rgba(124,58,237,.9); transition: transform .15s, background .15s; }
.boton:hover { background: var(--violeta2); }
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton.claro { background: #fff; color: var(--tinta2); border: 1.5px solid var(--linea2); box-shadow: none; }
.boton.claro:hover { background: var(--violeta-cl); color: var(--violeta2); }
.boton.verde { background: #059669; box-shadow: 0 12px 24px -14px rgba(5,150,105,.9); }
.boton.ancho { width: 100%; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 700;
        background: var(--violeta-cl); color: var(--violeta2); white-space: nowrap; }
.barra { height: .5rem; border-radius: 999px; background: #ece9f8; overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c, #7c3aed), color-mix(in srgb, var(--c, #7c3aed) 60%, #fff)); transition: width .8s cubic-bezier(.3,.8,.3,1); }
.vacio { text-align: center; color: var(--gris); padding: 2rem 1rem; }
.entra { animation: ct-entra .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes ct-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.carga { display: grid; place-items: center; min-height: 50vh; color: var(--gris); }
.giro { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 3px solid #e4e0f4; border-top-color: var(--violeta); animation: ct-gira .8s linear infinite; }

/* Carretera con vehículo (portada, entrar, progreso del test) */
.ruta { position: relative; height: 4.6rem; }
.ruta .asfalto { position: absolute; left: 0; right: 0; bottom: .4rem; height: 1rem; border-radius: 999px; background: #2a2645; }
.ruta .asfalto::after { content: ''; position: absolute; left: 2%; right: 2%; top: 50%; height: 2px; transform: translateY(-50%);
                        background: repeating-linear-gradient(90deg, #fbbf24 0 14px, transparent 14px 26px); opacity: .8; }
.ruta .hecho { position: absolute; left: 0; bottom: .4rem; height: 1rem; border-radius: 999px; background: linear-gradient(90deg,#7c3aed,#a78bfa); opacity: .55;
               transition: width .5s cubic-bezier(.4,.1,.2,1); }
.ruta .veh { position: absolute; bottom: .95rem; width: 4.4rem; transform: translateX(-50%); transition: left .5s cubic-bezier(.4,.1,.2,1);
             filter: drop-shadow(0 5px 5px rgba(0,0,0,.3)); }
.ruta .veh svg { display: block; width: 100%; height: auto; }
.ruta .veh.mueve { --gira: running; animation: ct-bache .25s ease-in-out 2; }
@keyframes ct-bache { 50% { transform: translateX(-50%) translateY(-2px) rotate(-2deg); } }
.ruta .meta { position: absolute; right: -.2rem; bottom: 1rem; width: 1.6rem; }

/* ══ Entrar ══ */
.entrar { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.entrar-cab { position: relative; overflow: hidden; color: #fff; padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.4rem 0;
              background: linear-gradient(140deg,#1e1b2e 0%,#312e51 50%,#4c1d95 100%); }
.entrar-cab::after { content: ''; position: absolute; right: -6rem; top: -6rem; width: 20rem; height: 20rem; border-radius: 50%;
                     background: radial-gradient(circle, rgba(167,139,250,.35), transparent 70%); }
.entrar-cab .eyebrow { color: #c4b5fd; }
.entrar-cab .h1 { font-size: 2.1rem; color: #fff; }
.entrar-cab p { color: #ddd6fe; margin: .4rem 0 0; max-width: 26rem; }
.desfile { position: relative; height: 6.2rem; margin: 1.4rem -1.4rem 0; overflow: hidden; }
.desfile .asfalto { position: absolute; left: 0; right: 0; bottom: 0; height: 1.6rem; background: #2a2645; }
.desfile .asfalto::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg,#fbbf24 0 18px,transparent 18px 34px); opacity: .8;
                           animation: ct-lineas 1.2s linear infinite; }
@keyframes ct-lineas { to { background-position: -34px 0; } }
.desfile .v { position: absolute; bottom: .75rem; --gira: running; filter: drop-shadow(0 6px 5px rgba(0,0,0,.4)); animation: ct-cruza var(--t, 9s) linear infinite; animation-delay: var(--d, 0s); left: -30%; }
.desfile .v svg { display: block; width: 100%; height: auto; }
@keyframes ct-cruza { from { left: -30%; } to { left: 115%; } }
.entrar-cuerpo { padding: 1.4rem; display: flex; justify-content: center; align-items: flex-start; }   /* sin estirar la tarjeta hasta abajo */
.entrar-caja { width: 100%; max-width: 26rem; margin-top: -2.4rem; padding: 1.5rem; position: relative; z-index: 2; }
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: .78rem; font-weight: 800; color: var(--tinta2); margin-bottom: .4rem; }
.campo input[type=text], .campo input[type=password], .campo input[type=tel], .campo input[type=date] { width: 100%; padding: .95rem 1rem; border: 2px solid var(--linea2); border-radius: 1rem;
            font-size: 1.15rem; font-weight: 700; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.campo input:focus { border-color: var(--violeta); box-shadow: 0 0 0 4px rgba(124,58,237,.12); }
.campo .con-ojo { position: relative; }
.campo .ojo { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border-radius: .7rem; color: var(--gris); }
.recordar { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--tinta2); margin: .2rem 0 1.2rem; cursor: pointer; }
.recordar input { width: 1.2rem; height: 1.2rem; accent-color: var(--violeta); }
.error { background: var(--mal-cl); color: #991b1b; border-radius: .9rem; padding: .7rem .9rem; font-size: .88rem; margin-bottom: 1rem; display: flex; gap: .5rem; }
.ayuda { text-align: center; font-size: .82rem; color: var(--gris); margin-top: 1.2rem; }

/* ══ Inicio ══ */
.saludo { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.3rem; overflow: hidden; position: relative; }
.saludo .h1 { font-size: 1.6rem; }
.anillos { display: flex; gap: 1rem; flex-wrap: wrap; }
.anillo { display: flex; align-items: center; gap: .7rem; }
.anillo svg { width: 4.4rem; height: 4.4rem; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 9; }
.anillo .fondo { stroke: #ece9f8; }
.anillo .valor { stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1); }
.anillo b { font-family: var(--fm); font-size: 1.3rem; display: block; }
.anillo span { font-size: .75rem; color: var(--gris); font-weight: 700; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (min-width: 700px) { .saludo { grid-template-columns: 1fr auto; align-items: center; } }

.aviso-curso { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; margin-top: 1rem; border-left: 4px solid var(--ambar); }
.aviso-curso .ic { width: 2.6rem; height: 2.6rem; border-radius: .9rem; display: grid; place-items: center; background: var(--ambar-cl); color: var(--ambar); flex: none; }
.aviso-curso .t { font-weight: 800; }
.aviso-curso .s { font-size: .8rem; color: var(--gris); }
.aviso-curso .boton { margin-left: auto; padding: .65rem 1rem; }
.instalar { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; margin-top: 1rem; background: linear-gradient(120deg,#1e1b2e,#4c1d95); color: #fff; border: 0; }
.instalar .ic { width: 2.6rem; height: 2.6rem; border-radius: .9rem; display: grid; place-items: center; background: rgba(255,255,255,.14); flex: none; }
.instalar .s { font-size: .8rem; color: #ddd6fe; }
.instalar .boton { margin-left: auto; background: #fbbf24; color: #1e1b2e; padding: .6rem 1rem; box-shadow: none; }
.instalar .x { color: #c4b5fd; width: 2rem; height: 2rem; border-radius: .6rem; flex: none; }

.bloques { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 640px) { .bloques { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bloques { grid-template-columns: repeat(3, 1fr); } }
.bloque { display: block; text-align: left; overflow: hidden; transition: transform .18s, box-shadow .18s; text-decoration: none; color: inherit; }
.bloque:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(76,29,149,.55); }
.bloque-dib { position: relative; height: 6.6rem; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
              background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, #fff) 0%, color-mix(in srgb, var(--c) 20%, #fff) 100%); }
.bloque-dib .asf { position: absolute; left: 0; right: 0; bottom: 0; height: 1rem; background: #2a2645; }
.bloque-dib .asf::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: repeating-linear-gradient(90deg,#fbbf24 0 10px,transparent 10px 19px); opacity: .8; }
.bloque-dib svg { position: relative; z-index: 1; height: 5rem; width: auto; margin-bottom: .45rem; filter: drop-shadow(0 5px 4px rgba(0,0,0,.2)); transition: transform .3s; }
.bloque:hover .bloque-dib svg { --gira: running; transform: translateX(10px); }
.bloque-txt { padding: 1rem 1.1rem 1.1rem; }
.bloque-txt .t { font-family: var(--fd); font-weight: 900; font-size: 1.25rem; }
.bloque-txt .s { font-size: .78rem; color: var(--gris); font-weight: 700; }
.bloque-txt .barra { margin: .8rem 0 .45rem; }
.bloque-txt .n { display: flex; justify-content: space-between; font-size: .78rem; color: var(--tinta2); font-weight: 600; }

.para-ti { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 900px) { .para-ti { grid-template-columns: repeat(4, 1fr); } }
.pt { position: relative; text-align: left; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; transition: transform .18s; min-height: 9.5rem; }
.pt:hover { transform: translateY(-3px); }
.pt .ic { width: 2.8rem; height: 2.8rem; border-radius: 1rem; display: grid; place-items: center; font-size: 1.15rem; color: #fff; background: var(--c); box-shadow: 0 10px 18px -10px var(--c); }
.pt .t { font-weight: 800; font-size: .95rem; line-height: 1.2; }
.pt .s { font-size: .74rem; color: var(--gris); line-height: 1.35; }
.pt .num { position: absolute; top: .8rem; right: .8rem; font-family: var(--fm); font-weight: 800; font-size: .8rem; background: var(--mal-cl); color: var(--mal); padding: .1rem .5rem; border-radius: 999px; }

/* ══ Temas ══ */
.bloque-cab { overflow: hidden; }
.bloque-cab .bloque-dib { height: 7.5rem; }
.bloque-cab .cuerpo { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.temas { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 760px) { .temas { grid-template-columns: repeat(2, 1fr); } }
.tema { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; text-align: left; padding: .95rem 1rem; transition: transform .15s, border-color .15s; }
.tema:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.tema .ic { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; font-size: 1.2rem; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.tema .cod { font-family: var(--fm); font-size: .72rem; font-weight: 800; color: var(--c); }
.tema .t { font-weight: 800; line-height: 1.2; margin: .1rem 0 .45rem; }
.tema .n { display: flex; justify-content: space-between; gap: .5rem; font-size: .74rem; color: var(--gris); font-weight: 600; margin-top: .35rem; }
.atras { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .88rem; color: var(--tinta2); margin-bottom: .8rem; text-decoration: none; }

/* ══ Hoja de abajo (configurar test, etc.) ══ */
.velo { position: fixed; inset: 0; z-index: 90; background: rgba(30,27,46,.5); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center;
        animation: ct-velo .2s ease both; }
@keyframes ct-velo { from { opacity: 0; } to { opacity: 1; } }
.hoja { width: 100%; max-width: 34rem; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 1.6rem 1.6rem 0 0; padding: 1.3rem 1.3rem calc(1.3rem + var(--safe-b));
        animation: ct-sube .32s cubic-bezier(.2,.8,.3,1) both; }
@keyframes ct-sube { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) { .velo { align-items: center; } .hoja { border-radius: 1.6rem; } }
.hoja .asa { width: 3rem; height: .3rem; border-radius: 999px; background: #e4e0f4; margin: -.4rem auto 1rem; }
.hoja h3 { font-family: var(--fd); font-weight: 900; font-size: 1.35rem; margin: 0; }
.hoja .lbl { font-size: .78rem; font-weight: 800; color: var(--tinta2); margin: 1.2rem 0 .55rem; }
.opc-n { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.opc-n button { padding: .85rem 0; border-radius: 1rem; border: 2px solid var(--linea2); font-family: var(--fm); font-weight: 800; font-size: 1.1rem; background: #fff; }
.opc-n button.on { border-color: var(--violeta); background: var(--violeta-cl); color: var(--violeta2); }
.opc-c { display: grid; gap: .55rem; }
.opc-c button { display: flex; align-items: center; gap: .8rem; text-align: left; padding: .85rem .9rem; border-radius: 1rem; border: 2px solid var(--linea2); background: #fff; }
.opc-c button.on { border-color: var(--violeta); background: var(--violeta-cl); }
.opc-c .ic { width: 2.5rem; height: 2.5rem; border-radius: .85rem; display: grid; place-items: center; flex: none; background: #f4f2fb; color: var(--tinta2); }
.opc-c button.on .ic { background: var(--violeta); color: #fff; }
.opc-c button b { display: block; font-size: .95rem; }
.opc-c button small { color: var(--gris); font-size: .78rem; line-height: 1.3; }
.hoja .pie { display: flex; gap: .6rem; margin-top: 1.4rem; }
.hoja .pie .boton { flex: 1; }

/* ══ El test ══ */
.test { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.test-cab { position: sticky; top: 0; z-index: 20; padding: .6rem 1rem .2rem; padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
            background: linear-gradient(120deg,#1e1b2e,#312e51 55%,#4c1d95); color: #fff; }
.test-fila { display: flex; align-items: center; gap: .7rem; max-width: 52rem; margin: 0 auto; }
.test-fila .x { width: 2.4rem; height: 2.4rem; border-radius: .8rem; background: rgba(255,255,255,.12); color: #ddd6fe; flex: none; }
.test-fila .tit { min-width: 0; flex: 1; }
.test-fila .tit b { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.test-fila .tit span { font-size: .72rem; color: #c4b5fd; }
.test-fila .reloj { font-family: var(--fm); font-size: .85rem; color: #ddd6fe; background: rgba(255,255,255,.1); padding: .3rem .6rem; border-radius: .6rem; }
.test-cab .ruta { max-width: 52rem; margin: 0 auto; height: 3.6rem; }
.test-cab .ruta .veh { width: 3.6rem; bottom: .9rem; }
.test-cuerpo { flex: 1; width: 100%; max-width: 52rem; margin: 0 auto; padding: 1.1rem 1rem 8rem; }
.preg-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.preg-num { font-family: var(--fm); font-weight: 800; color: var(--violeta); font-size: .85rem; }
.enunciado { font-family: var(--fd); font-weight: 700; font-size: 1.25rem; line-height: 1.4; margin: 0 0 1.1rem; }
@media (min-width: 900px) { .enunciado { font-size: 1.4rem; } }
.opciones { display: grid; gap: .65rem; }
.op { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; text-align: left; padding: .95rem 1rem; border-radius: 1.1rem;
      background: #fff; border: 2px solid var(--linea2); font-size: 1rem; line-height: 1.4; transition: border-color .15s, background .15s, transform .1s; }
.op:hover:not(:disabled) { border-color: #c4b5fd; }
.op:active:not(:disabled) { transform: scale(.99); }
.op .l { width: 2.2rem; height: 2.2rem; border-radius: .75rem; display: grid; place-items: center; font-family: var(--fm); font-weight: 800; background: #f4f2fb; color: var(--tinta2); }
.op .marca { width: 1.6rem; text-align: center; font-size: 1.1rem; }
.op.elegida { border-color: var(--violeta); background: var(--violeta-cl); }
.op.elegida .l { background: var(--violeta); color: #fff; }
.op.bien { border-color: var(--ok); background: #f0fdf4; }
.op.bien .l { background: var(--ok); color: #fff; }
.op.bien .marca { color: var(--ok); }
.op.mal { border-color: var(--mal); background: #fef2f2; }
.op.mal .l { background: var(--mal); color: #fff; }
.op.mal .marca { color: var(--mal); }
.op:disabled { cursor: default; }
.op.atenua { opacity: .55; }
.op.bien.salta { animation: ct-pop .45s cubic-bezier(.3,1.6,.5,1); }
.op.mal.salta { animation: ct-tiembla .4s ease; }
@keyframes ct-pop { 40% { transform: scale(1.03); } }
@keyframes ct-tiembla { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.veredicto { margin-top: 1rem; border-radius: 1.1rem; padding: .95rem 1rem; display: flex; gap: .8rem; align-items: flex-start; animation: ct-entra .3s ease both; }
.veredicto.bien { background: #f0fdf4; color: #14532d; }
.veredicto.mal { background: #fef2f2; color: #7f1d1d; }
.veredicto .ic { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.veredicto.bien .ic { background: var(--ok); }
.veredicto.mal .ic { background: var(--mal); }
.veredicto b { display: block; }
.veredicto small { display: block; font-size: .8rem; opacity: .8; margin-top: .2rem; }
.test-pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: .75rem 1rem calc(.75rem + var(--safe-b)); background: rgba(255,255,255,.95);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linea); }
.test-pie .fila { max-width: 52rem; margin: 0 auto; display: flex; align-items: center; gap: .6rem; }
.test-pie .boton { padding: .85rem 1.1rem; }
.test-pie .sig { margin-left: auto; min-width: 9rem; }
.btn-mapa { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem .9rem; border-radius: 1rem; background: var(--violeta-cl); color: var(--violeta2); font-weight: 800; font-family: var(--fm); }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: .45rem; margin-top: 1rem; }
.mapa button { height: 2.6rem; border-radius: .8rem; font-family: var(--fm); font-weight: 800; font-size: .85rem; background: #f4f2fb; color: var(--tinta2); border: 2px solid transparent; }
.mapa button.r { background: var(--violeta); color: #fff; }
.mapa button.bien { background: var(--ok); color: #fff; }
.mapa button.mal { background: var(--mal); color: #fff; }
.mapa button.aqui { border-color: #fbbf24; }
.leyenda { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .75rem; color: var(--gris); margin-top: .8rem; }
.leyenda i { display: inline-block; width: .7rem; height: .7rem; border-radius: .25rem; margin-right: .3rem; vertical-align: -1px; }

/* ══ Resultado ══ */
.res-meta { position: relative; height: 9rem; border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg,#ede9fe 0%,#f5f3ff 62%,#2a2645 62%,#2a2645 100%); }
.res-meta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1.5rem; height: 2px; background: repeating-linear-gradient(90deg,#fbbf24 0 16px,transparent 16px 30px); opacity: .7; }
.res-meta .bandera { position: absolute; right: 12%; bottom: 3.3rem; width: 3.6rem; }
.res-meta .veh { position: absolute; bottom: 2.05rem; width: 8rem; left: -30%; --gira: running; filter: drop-shadow(0 8px 6px rgba(0,0,0,.3)); animation: ct-llega 1.6s cubic-bezier(.25,.8,.3,1) .1s forwards; }
.res-meta .veh.parada { --gira: paused; }
.res-meta .veh svg { display: block; width: 100%; height: auto; }
@keyframes ct-llega { to { left: calc(88% - 3.6rem - 8.6rem); } }
.confeti { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: ct-cae 1.7s ease-in 1.3s forwards; }
@keyframes ct-cae { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(130px) rotate(320deg); } }
.res-nota { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; padding: 1.3rem; margin-top: -2.2rem; position: relative; z-index: 2; margin-left: .8rem; margin-right: .8rem; }
.res-nota .anillo svg { width: 6.5rem; height: 6.5rem; }
.res-nota .grande { font-family: var(--fd); font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
.res-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; }
.res-cifras div { background: #faf9ff; border-radius: .9rem; padding: .55rem .6rem; text-align: center; }
.res-cifras b { display: block; font-family: var(--fm); font-size: 1.25rem; }
.res-cifras span { font-size: .7rem; font-weight: 700; color: var(--gris); }
.sello { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; font-weight: 900; letter-spacing: .06em; font-size: .9rem; }
.sello.apto { background: var(--ok); color: #fff; }
.sello.noapto { background: var(--mal); color: #fff; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.pestanas { display: flex; gap: .4rem; margin: 1.2rem 0 .8rem; overflow-x: auto; }
.pestanas button { padding: .55rem .9rem; border-radius: 999px; font-weight: 800; font-size: .82rem; background: #fff; border: 1.5px solid var(--linea2); color: var(--tinta2); white-space: nowrap; }
.pestanas button.on { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.revision { display: grid; gap: .6rem; }
.rev { padding: .9rem 1rem; border-left: 4px solid var(--linea2); }
.rev.bien { border-left-color: var(--ok); }
.rev.mal { border-left-color: var(--mal); }
.rev.blanco { border-left-color: var(--gris2); }
.rev .q { font-weight: 700; line-height: 1.35; }
.rev .r { margin-top: .5rem; font-size: .88rem; display: grid; gap: .3rem; }
.rev .r div { display: flex; gap: .45rem; align-items: flex-start; }
.rev .r .tu { color: var(--mal); }
.rev .r .ok { color: #15803d; }
.rev .norma { font-size: .74rem; color: var(--gris); margin-top: .45rem; }

/* ══ Estadísticas ══ */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(5, 1fr); } }
.kpi { padding: .95rem 1rem; }
.kpi b { display: block; font-family: var(--fm); font-size: 1.6rem; line-height: 1.1; color: var(--c, var(--tinta)); }
.kpi span { font-size: .74rem; font-weight: 700; color: var(--gris); }
.graf { padding: 1rem 1.1rem 1.1rem; }
.graf svg { width: 100%; height: auto; display: block; overflow: visible; }
.graf .eje { font-size: 9px; fill: var(--gris); font-family: var(--fm); }
.dos-col { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1000px) { .dos-col { grid-template-columns: 1fr 1fr; } }
.fila-tema { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .7rem .2rem; border-bottom: 1px solid var(--linea); }
.fila-tema:last-child { border-bottom: 0; }
.fila-tema .ic { width: 2.3rem; height: 2.3rem; border-radius: .8rem; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.fila-tema .t { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.fila-tema .t small { display: block; color: var(--gris); font-weight: 600; font-size: .72rem; margin-top: .15rem; }
.fila-tema .pct { font-family: var(--fm); font-weight: 800; font-size: .95rem; text-align: right; }
.fila-tema .pct small { display: block; font-size: .68rem; color: var(--gris); }
.peor { padding: .9rem 1rem; cursor: pointer; }
.peor .cab-p { display: flex; gap: .7rem; align-items: flex-start; }
.peor .veces { flex: none; font-family: var(--fm); font-weight: 800; font-size: .8rem; color: var(--mal); background: var(--mal-cl); border-radius: .6rem; padding: .2rem .5rem; }
.peor .q { font-weight: 700; font-size: .92rem; line-height: 1.35; }
.peor .det { margin-top: .7rem; display: none; }
.peor.abierta .det { display: block; animation: ct-entra .25s ease both; }
.peor .det div { font-size: .86rem; padding: .35rem .5rem; border-radius: .6rem; margin-bottom: .25rem; }
.peor .det .ok { background: #f0fdf4; color: #14532d; font-weight: 700; }
.hist { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .8rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--linea); }
.hist:last-child { border-bottom: 0; }
.hist .pc { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; font-family: var(--fm); font-weight: 800; font-size: .9rem; }
.hist .t { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.hist .t small { display: block; color: var(--gris); font-weight: 600; font-size: .72rem; margin-top: .2rem; }

/* ══ Perfil ══ */
.perfil-cab { display: flex; align-items: center; gap: 1rem; padding: 1.2rem; }
.perfil-cab .av { width: 4rem; height: 4rem; border-radius: 1.3rem; display: grid; place-items: center; font-weight: 900; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg,#4c1d95,#7c3aed); }
.ajuste { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--linea); text-align: left; width: 100%; }
.ajuste:last-child { border-bottom: 0; }
.ajuste .ic { width: 2.4rem; height: 2.4rem; border-radius: .85rem; display: grid; place-items: center; background: var(--violeta-cl); color: var(--violeta2); flex: none; }
.ajuste b { display: block; font-size: .95rem; }
.ajuste small { color: var(--gris); font-size: .78rem; }
.ajuste .flecha { margin-left: auto; color: var(--gris2); }
.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 1rem); transform: translateX(-50%); background: var(--tinta); color: #fff;
         padding: .75rem 1.1rem; border-radius: 1rem; font-weight: 700; font-size: .88rem; box-shadow: 0 16px 30px -14px rgba(0,0,0,.5); animation: ct-entra .25s ease both; max-width: 90vw; }
@media (min-width: 900px) { .toast { bottom: 2rem; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .desfile .v { display: none; }
    .res-meta .veh { left: calc(88% - 3.6rem - 8.6rem); }
}

/* En pantallas anchas, el título de «Entrar» centrado sobre la tarjeta */
@media (min-width: 700px) {
    .entrar-cab > .eyebrow, .entrar-cab > .h1, .entrar-cab > p { text-align: center; margin-left: auto; margin-right: auto; }
}

/* ══ Panel de profesores (profesores.php: la misma app en modo «profesor») ══ */
@media (min-width: 900px) {
    .nav a.vega { display: flex; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea); border-radius: 0; }
}
@media (max-width: 420px) { .nav a { font-size: .6rem; } }
button.chip { cursor: pointer; border: 1.5px solid transparent; }
button.chip.on { background: var(--tinta); color: #fff; }
.al-filtros { display: flex; gap: .6rem; flex-wrap: wrap; }
.al-filtros input, .al-filtros select { font: inherit; padding: .75rem .95rem; border: 2px solid var(--linea2); border-radius: 1rem; background: #fff; outline: none; }
.al-filtros input { flex: 1; min-width: 12rem; font-weight: 600; }
.al-filtros select { font-weight: 700; color: var(--tinta2); }
.al-filtros input:focus, .al-filtros select:focus { border-color: var(--violeta); box-shadow: 0 0 0 4px rgba(124,58,237,.12); }
.al-av { width: 2.6rem; height: 2.6rem; border-radius: .95rem; flex: none; display: grid; place-items: center; font-weight: 900; font-size: .85rem;
         color: var(--violeta2); background: linear-gradient(135deg,#ede9fe,#e0e7ff); }
.al-fila { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .85rem; align-items: center; padding: .85rem 1rem; text-decoration: none; color: inherit;
           transition: transform .15s, border-color .15s; }
.al-fila:hover { transform: translateY(-2px); border-color: rgba(124,58,237,.35); }
.al-t > b { display: block; font-size: .95rem; line-height: 1.2; }
.al-t small { display: block; color: var(--gris); font-size: .74rem; font-weight: 600; margin-top: .2rem; line-height: 1.4; }
.al-pc { font-family: var(--fm); font-weight: 800; font-size: 1.05rem; text-align: right; }
.al-pc small { display: block; font-size: .66rem; color: var(--gris); font-family: var(--f); }
.bl-sec { padding: .5rem 1rem .4rem; margin-bottom: .8rem; border-top: 4px solid var(--c); }
.bl-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem .8rem; align-items: baseline; padding: .5rem .2rem .55rem; border-bottom: 1px solid var(--linea); }
.bl-cab b { font-family: var(--fd); font-weight: 900; font-size: 1.05rem; color: var(--c); }
.bl-cab small { color: var(--gris); font-weight: 700; font-size: .74rem; }
.bl-cab .mono { font-size: .76rem; color: var(--tinta2); font-weight: 700; }
.peor .det .trampa { background: #fef2f2; color: #991b1b; }
.pr-titulo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; }
.pr-titulo .sub { max-width: 40rem; }
.profes { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: 1.2rem; }
@media (min-width: 760px) { .profes { grid-template-columns: repeat(2, 1fr); } }
.pr-card { padding: 1rem 1.1rem; }
.pr-cab { display: flex; gap: .8rem; align-items: center; }
.pr-cab b { display: block; line-height: 1.2; }
.pr-cab small { display: block; color: var(--gris); font-size: .74rem; font-weight: 600; margin-top: .15rem; }
.pr-n { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .78rem; color: var(--tinta2); font-weight: 600; margin-top: .45rem; }
.pr-pie { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--linea); }
.pr-pie small { color: var(--gris); font-size: .74rem; font-weight: 600; }
.pr-bot { display: flex; gap: .45rem; flex-wrap: wrap; }
.pr-bot .boton { padding: .55rem .85rem; font-size: .82rem; }
.u-lista { display: grid; gap: .4rem; max-height: 46vh; overflow-y: auto; margin-top: .2rem; }
.u-fila { display: flex; gap: .75rem; align-items: center; text-align: left; padding: .65rem .75rem; border-radius: 1rem; border: 2px solid var(--linea2); background: #fff; width: 100%; }
.u-fila:hover { border-color: var(--violeta); background: var(--violeta-cl); }
.u-fila b { display: block; font-size: .92rem; line-height: 1.2; }
.u-fila small { display: block; color: var(--gris); font-size: .74rem; }
.u-fila > i { color: var(--violeta); }

/* ══════════════════ Lo propio de los tests del B ══════════════════ */
/* Imagen de la pregunta (señales, fotos de situaciones) */
.preg-img { margin: 0 0 1rem; border-radius: 1.1rem; overflow: hidden; background: #fff; border: 1px solid var(--linea2); display: grid; place-items: center;
            box-shadow: 0 12px 26px -20px rgba(76,29,149,.5); cursor: zoom-in; }
.preg-img img { display: block; max-width: 100%; max-height: 42vh; width: auto; height: auto; }
@media (min-width: 900px) { .test-cuerpo.con-img .preg-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
                            .test-cuerpo.con-img .preg-img img { max-height: 60vh; } .test-cuerpo.con-img { max-width: 72rem; } }
.zoom { position: fixed; inset: 0; z-index: 130; background: rgba(15,13,26,.92); display: grid; place-items: center; padding: 1rem; cursor: zoom-out; animation: ct-velo .2s ease both; }
.zoom img { max-width: 100%; max-height: 100%; border-radius: 1rem; }
.rev .mini, .peor .mini { float: right; width: 5.2rem; height: 4rem; object-fit: cover; border-radius: .7rem; margin: 0 0 .4rem .7rem; border: 1px solid var(--linea2); cursor: zoom-in; }

/* La explicación del libro, tras contestar */
.explica { margin-top: .8rem; border-radius: 1.1rem; background: #fffbeb; border: 1px solid #fde68a; overflow: hidden; }
.explica > button { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; font-weight: 800; color: #92400e; text-align: left; }
.explica > button .fa-chevron-down { margin-left: auto; transition: transform .2s; }
.explica.abierta > button .fa-chevron-down { transform: rotate(180deg); }
.explica .txt { display: none; padding: 0 1rem 1rem; font-size: .9rem; line-height: 1.55; color: #451a03; }
.explica.abierta .txt { display: block; animation: ct-entra .25s ease both; }
.explica .txt p { margin: .5rem 0; }
.explica .txt ul, .explica .txt ol { margin: .4rem 0; padding-left: 1.2rem; }
.explica .ref { display: block; font-family: var(--fm); font-size: .72rem; color: #b45309; margin-top: .6rem; }

/* Guardar la pregunta (estrella) */
.estrella { margin-left: auto; width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: grid; place-items: center; color: var(--gris2); background: #fff; border: 1.5px solid var(--linea2); }
.estrella.on { color: #f59e0b; border-color: #fcd34d; background: #fffbeb; }
.estrella.on i { animation: ct-pop .45s cubic-bezier(.3,1.6,.5,1); }

/* Cuenta atrás del examen */
.test-fila .reloj.atras { background: rgba(251,191,36,.18); color: #fde68a; }
.test-fila .reloj.apurado { background: #dc2626; color: #fff; animation: tb-late 1s ease-in-out infinite; }
@keyframes tb-late { 50% { opacity: .65; } }
.fallos-cont { font-family: var(--fm); font-size: .78rem; font-weight: 800; padding: .3rem .6rem; border-radius: .6rem; background: rgba(255,255,255,.1); color: #ddd6fe; }

/* ¿Estás listo para el examen? */
.listo { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; margin-top: 1rem; overflow: hidden; position: relative; }
.listo .semaforo { width: 3.2rem; padding: .45rem .4rem; border-radius: 1rem; background: #1e1b2e; display: grid; gap: .3rem; }
.listo .semaforo i { display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #3b3656; transition: background .3s, box-shadow .3s; }
.listo .semaforo i.r.on { background: #ef4444; box-shadow: 0 0 16px #ef4444; }
.listo .semaforo i.a.on { background: #f59e0b; box-shadow: 0 0 16px #f59e0b; }
.listo .semaforo i.v.on { background: #22c55e; box-shadow: 0 0 16px #22c55e; }
.listo .t { font-family: var(--fd); font-weight: 900; font-size: 1.15rem; line-height: 1.2; }
.listo .s { font-size: .82rem; color: #6b6690; margin-top: .25rem; }
.listo .barra { margin-top: .7rem; }

/* Colecciones de tests fijos */
.colecciones { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .colecciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .colecciones { grid-template-columns: repeat(3, 1fr); } }
.colec { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; padding: 1rem 1.05rem; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.colec:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.colec .ic { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: var(--c); box-shadow: 0 10px 18px -10px var(--c); }
.colec .t { font-weight: 800; line-height: 1.2; }
.colec .s { font-size: .74rem; color: var(--gris); line-height: 1.3; margin-top: .15rem; }
.colec .n { display: flex; justify-content: space-between; font-size: .72rem; color: var(--tinta2); font-weight: 700; margin-top: .45rem; }
.colec .barra { margin-top: .45rem; height: .4rem; }

/* Rejilla de tests numerados (como en la autoescuela: verde aprobado, rojo suspenso) */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .55rem; }
.casilla { position: relative; aspect-ratio: 1 / 1; border-radius: 1.05rem; background: #fff; border: 2px solid var(--linea2); display: grid; place-items: center; align-content: center;
           gap: .1rem; font-family: var(--fm); transition: transform .12s, border-color .12s; }
.casilla:hover { transform: translateY(-2px); border-color: #c4b5fd; }
.casilla b { font-size: 1.25rem; line-height: 1; }
.casilla small { font-size: .62rem; font-weight: 800; color: var(--gris); font-family: var(--f); }
.casilla.apto { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.casilla.noapto { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.casilla.hecho { background: var(--violeta-cl); border-color: #c4b5fd; color: var(--violeta2); }
.casilla .v { position: absolute; top: .25rem; right: .35rem; font-size: .6rem; font-weight: 800; color: var(--gris); }
.sub-grupo { margin-bottom: 1.1rem; }
.sub-grupo > .cab-g { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .55rem; font-weight: 800; font-size: .92rem; }
.sub-grupo > .cab-g .mono { color: var(--c, var(--violeta)); font-size: .8rem; }
.sub-grupo > .cab-g small { margin-left: auto; color: var(--gris); font-weight: 700; font-size: .72rem; }

/* Apartados dentro de un tema */
.apartados { display: grid; gap: .55rem; }
.apartado { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .8rem 1rem; text-align: left; transition: transform .15s; }
.apartado:hover { transform: translateX(3px); }
.apartado .cod { font-family: var(--fm); font-weight: 800; font-size: .8rem; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border-radius: .7rem; padding: .35rem .5rem; }
.apartado .t { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.apartado .t small { display: block; font-size: .72rem; color: var(--gris); font-weight: 600; margin-top: .2rem; }
.apartado .pc { font-family: var(--fm); font-weight: 800; font-size: .9rem; }

/* El turismo: un poco más grande en los huecos pensados para camión */
.bloque-dib svg.coche, .ruta .veh.coche { }

/* Panel del personal */
.ficha-acc { display: grid; gap: .5rem; padding: 1rem 1.1rem; }
.ficha-acc .fila { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.ficha-acc .pin { font-family: var(--fm); font-weight: 800; font-size: 1.3rem; letter-spacing: .2em; background: var(--violeta-cl); color: var(--violeta2); padding: .25rem .7rem; border-radius: .7rem; }
.nivel { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px; }
.nivel.listo { background: #dcfce7; color: #15803d; } .nivel.casi { background: #fef3c7; color: #b45309; }
.nivel.lejos { background: #fee2e2; color: #b91c1c; } .nivel.pocos { background: #f1f5f9; color: #64748b; }
a.boton, a.cab-av, a.chip { text-decoration: none; }
@media (min-width: 900px) { .test-fila, .test-cab .ruta, .test-pie .fila { max-width: 72rem; } .test-cuerpo:not(.con-img) { max-width: 52rem; } }

/* ── Tiempo de plataforma: renovar con tarjeta ── */
.renovar { padding: 1.6rem 1.3rem; max-width: 40rem; margin: 0 auto; text-align: center; }
.renovar .sub { max-width: 32rem; margin-left: auto; margin-right: auto; }
.renovar .aviso-curso { text-align: left; }
.renovar-ic { width: 3.6rem; height: 3.6rem; border-radius: 1.2rem; display: grid; place-items: center; margin: 0 auto .9rem;
              background: var(--violeta-cl); color: var(--violeta); font-size: 1.5rem; }
.renovar-ic.fin { background: var(--ambar-cl); color: var(--ambar); }
.planes { display: grid; gap: .65rem; margin-top: 1.3rem; }
@media (min-width: 560px) { .planes { grid-template-columns: repeat(3, 1fr); } }
.plan { display: grid; gap: .2rem; padding: 1rem .8rem; border-radius: 1.1rem; background: #fff; border: 2px solid var(--linea2);
        font: inherit; color: var(--tinta); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.plan:hover { border-color: #c4b5fd; }
.plan:active { transform: scale(.98); }
.plan.on { border-color: var(--violeta); background: var(--violeta-cl); box-shadow: 0 10px 22px -16px rgba(124,58,237,.8); }
.plan-m { font-weight: 800; font-size: .95rem; }
.plan-p { font-family: var(--fd); font-weight: 800; font-size: 1.55rem; color: var(--violeta2); font-variant-numeric: tabular-nums; }
.plan-h { font-size: .76rem; color: var(--gris); }
.plan:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }

/* En el móvil la pregunta con imagen tiene que caber sin desplazar (con
   ajustarImagen() de app.js): la carretera, los márgenes y las respuestas se
   compactan para dejarle sitio a la imagen. */
@media (max-width: 899px) {
    .test-cuerpo.con-img { padding-top: .7rem; }
    .test-cuerpo.con-img .preg-meta { margin-bottom: .45rem; }
    .test-cuerpo.con-img .preg-img { margin-bottom: .65rem; border-radius: .9rem; }
    .test-cuerpo.con-img .enunciado { font-size: 1.08rem; line-height: 1.32; margin-bottom: .7rem; }
    .test-cuerpo.con-img .opciones { gap: .45rem; }
    .test-cuerpo.con-img .op { padding: .55rem .7rem; gap: .55rem; font-size: .94rem; line-height: 1.28; border-radius: .95rem; }
    .test-cuerpo.con-img .op .l { width: 1.7rem; height: 1.7rem; border-radius: .6rem; font-size: .85rem; }
    .test-cuerpo.con-img .op .marca:empty { display: none; }   /* sin contestar no hay marca: ese hueco es para el texto */
    .test-cuerpo.con-img .estrella { width: 2.1rem; height: 2.1rem; }
    .test-cuerpo.con-img .veredicto { margin-top: .7rem; }
    .test-cab .ruta { height: 2.7rem; }
    .test-cab .ruta .veh { width: 2.9rem; bottom: .75rem; }
    .test-cab .ruta .meta { width: 1.3rem; bottom: .85rem; }
    .test-pie { padding-top: .55rem; padding-bottom: calc(.55rem + var(--safe-b)); }
}
/* Imagen a la izquierda y enunciado a su lado cuando no cabe de otra manera */
@media (max-width: 899px) {
    .test-cuerpo.apretada .preg-grid { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: .3rem .7rem; align-items: center; }
    .test-cuerpo.apretada .preg-grid > div { display: contents; }
    .test-cuerpo.apretada .preg-img { margin: 0; align-self: center; }
    .test-cuerpo.apretada .preg-img img { max-height: 9rem; }
    .test-cuerpo.apretada .enunciado { font-size: .98rem; line-height: 1.28; margin: 0; }
    .test-cuerpo.apretada .opciones { grid-column: 1 / -1; margin-top: .55rem; }
    .test-cuerpo.apretada #t-veredicto { grid-column: 1 / -1; }
}
@media (max-width: 899px) and (max-height: 760px) {
    .test:has(.con-img) .test-fila .tit span { display: none; }
    .test:has(.con-img) .test-fila .x { width: 2.1rem; height: 2.1rem; }
}