:root{
    --blue:#0078D4;
    --blue-dark:#106EBE;
    --blue-darker:#005A9E;
    --blue-tint:#EFF6FC;
    --ink:#201F1E;
    --ink-soft:#484644;
    --muted:#605E5C;
    --border:#E1DFDD;
    --bg:#FAF9F8;
    --card:#FFFFFF;
    --success:#107C10;
    --success-bg:#DFF6DD;
    --success-ink:#0B590B;
    --warn:#886400;
    --warn-bg:#FFF4CE;
    --warn-ink:#5C4200;
    --danger:#A80000;
    --danger-bg:#FDE7E9;
    --danger-ink:#750B1C;
    --accent:#CA5010;
    --r-md:8px;
    --r-sm:4px;
    --shadow:0 1.6px 3.6px rgba(0,0,0,.13),0 .3px .9px rgba(0,0,0,.11);
    --shadow-lg:0 6.4px 14.4px rgba(0,0,0,.13),0 1.2px 3.6px rgba(0,0,0,.10);
    --ancho:960px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;color:var(--ink);line-height:1.5;background:var(--bg);-webkit-font-smoothing:antialiased;
    font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;}
a{color:var(--blue-darker);}
img{max-width:100%;height:auto;}

.teo-topbar{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;}
.teo-topbar-inner{max-width:var(--ancho);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;}
/* Marca idéntica a la de datomworx.com: logotipo + nombre en tres colores.
   Los tonos son los de la web principal (--blue #0091FF, --orange #f97316,
   --muted-l #94a3b8), no los del sistema visual de este portal, para que el
   alumno vea exactamente la misma marca que en el resto de la plataforma. */
.teo-logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;}
.teo-logo img{height:38px;width:auto;display:block;flex:0 0 auto;}
.teo-logo-text{font-family:'Outfit',"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
    font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap;}
.teo-logo-datom{color:#0091FF;}
.teo-logo-worx{color:#f97316;}
.teo-logo-com{color:#94a3b8;font-size:.85rem;font-weight:500;}
.teo-logo-sec{color:var(--ink-soft);font-weight:600;font-size:13px;border-left:1px solid var(--border);
    padding-left:10px;margin-left:2px;white-space:nowrap;}
.teo-topbar-sp{flex:1;}
.teo-topbar-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.teo-chip-user{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--blue-tint);color:var(--blue-darker);border:1px solid #cfe4f7;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;text-decoration:none;max-width:100%;margin-left:10px;cursor:pointer;}
.teo-chip-user:hover,.teo-chip-user:focus,.teo-chip-user:focus-within{background:#dcebfa;}
.teo-chip-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,30,80,.14);min-width:200px;padding:6px;z-index:60;}
.teo-chip-user:hover .teo-chip-menu,.teo-chip-user:focus .teo-chip-menu,.teo-chip-user:focus-within .teo-chip-menu{display:block;}
.teo-chip-menu a{display:block;padding:9px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;}
.teo-chip-menu a:hover{background:var(--bg);}

/* Los enlaces de la barra funcionan como pestañas: subrayado de 2 px que se
   insinúa al pasar por encima y se enciende en azul en la página actual. Así
   el alumno sabe dónde está sin tener que leer el título. El borde inferior
   se reserva desde el principio (transparent) para que al activarse no salte
   el texto. */
.teo-link{position:relative;display:inline-block;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;
    padding:8px 10px 7px;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;}
.teo-link:hover{color:var(--ink);border-bottom-color:var(--border);}
.teo-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px;}
.teo-link.is-active{color:var(--blue-darker);border-bottom-color:var(--blue);}
.teo-link.is-context{color:var(--ink);}
.teo-link.is-context::before{content:"";display:inline-block;width:1px;height:13px;background:var(--border);
    vertical-align:-2px;margin-right:11px;}
.teo-home-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
    border-radius:9px;color:var(--muted);text-decoration:none;flex:0 0 auto;transition:background .15s ease,color .15s ease;}
.teo-home-btn:hover{background:var(--border);color:var(--ink);}
.teo-home-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.teo-home-btn svg{width:19px;height:19px;}

.teo-hero{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-darker) 100%);color:#fff;padding:38px 20px 76px;position:relative;overflow:hidden;}
.teo-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(560px 280px at 88% -15%,rgba(255,255,255,.18),transparent 70%);pointer-events:none;}
.teo-hero.fam-adr{background:linear-gradient(135deg,#E07A28 0%,#A03D08 100%);}
.teo-hero.fam-cap{background:linear-gradient(135deg,#12922C 0%,#0A5411 100%);}
.teo-hero.fam-puntos{background:linear-gradient(135deg,#9A78C9 0%,#5C3E8F 100%);}
.teo-hero-inner{max-width:var(--ancho);margin:0 auto;position:relative;}
.teo-hero-badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:12px;font-weight:700;padding:4px 13px;border-radius:999px;margin-bottom:14px;}
.teo-hero h1{font-size:2rem;font-weight:800;letter-spacing:-.5px;margin:0 0 8px;text-wrap:balance;}
.teo-hero p{font-size:14.5px;opacity:.95;margin:0;}
.teo-hero-accion{margin-top:14px;text-align:right;}
.teo-hero-accion .teo-btn{opacity:.88;}
.teo-hero-accion .teo-btn:hover{opacity:1;}
.teo-hero-back{display:inline-flex;align-items:center;gap:6px;color:#fff;opacity:.9;text-decoration:none;font-size:13px;font-weight:600;margin-bottom:12px;}
.teo-hero-back:hover{opacity:1;text-decoration:underline;}

.teo-stats{max-width:var(--ancho);margin:-52px auto 0;padding:0 20px;position:relative;z-index:2;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;}
.teo-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:14px 16px;}
.teo-stat .lbl{display:block;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;}
.teo-stat .val{display:block;font-size:22px;font-weight:800;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums;}
.teo-stat .val small{font-size:13px;font-weight:600;color:var(--muted);}
.teo-stat.ok .val{color:var(--success);}
.teo-stat.warn .val{color:var(--warn);}

.teo-wrap{max-width:var(--ancho);margin:24px auto 56px;padding:0 20px;}
.teo-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow);padding:22px 24px;margin-bottom:18px;}
.teo-card h2{font-size:15px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px;}
.teo-card h2 .cnt{font-weight:600;color:var(--muted);font-size:12.5px;}

.teo-seccion-tit{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:26px 0 12px;}

.teo-cursos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
.teo-curso{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--blue);
    border-radius:var(--r-md);box-shadow:var(--shadow);padding:16px 18px;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .12s;}
.teo-curso:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.teo-curso.fam-adr{border-left-color:var(--accent);}
.teo-curso.fam-cap{border-left-color:var(--success);}
.teo-curso.fam-puntos{border-left-color:#8764B8;}
.teo-curso .ico{font-size:26px;line-height:1;}
.teo-curso .nom{font-size:15px;font-weight:700;line-height:1.3;}
.teo-curso .des{font-size:12.5px;color:var(--muted);line-height:1.45;flex:1;}
.teo-curso .pie{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--muted);}
.teo-barra{height:6px;border-radius:99px;background:#eceaea;overflow:hidden;}
.teo-barra i{display:block;height:100%;background:var(--success);border-radius:99px;}

.teo-tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px;}
.teo-test{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--border);
    border-radius:var(--r-md);padding:12px 13px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;}
.teo-test:hover{border-color:var(--blue);box-shadow:var(--shadow);}
.teo-test .num{font-size:14px;font-weight:800;}
.teo-test .meta{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.teo-test.hecho{border-left:3px solid var(--muted);}
.teo-test.apto{border-left:3px solid var(--success);background:linear-gradient(180deg,#f6fdf5,#fff);}
.teo-test.noapto{border-left:3px solid var(--danger);background:linear-gradient(180deg,#fff7f7,#fff);}
.teo-test .estado{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;}
.teo-test.apto .estado{color:var(--success);}
.teo-test.noapto .estado{color:var(--danger);}
.teo-test .veces{position:absolute;top:8px;right:9px;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--bg);border-radius:999px;padding:1px 7px;}

.teo-repaso{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:linear-gradient(135deg,#FFF4CE,#FFEFD3);
    border:1px solid #f0dfa0;border-radius:var(--r-md);padding:18px 20px;margin-bottom:18px;}
.teo-repaso .ic{font-size:30px;line-height:1;}
.teo-repaso .tx{flex:1;min-width:190px;}
.teo-repaso .tx b{display:block;font-size:15px;color:var(--warn-ink);}
.teo-repaso .tx span{font-size:12.5px;color:#6b5200;}
.teo-repaso.vacio{background:var(--success-bg);border-color:#bfe5bd;}
.teo-repaso.vacio .tx b{color:var(--success-ink);}
.teo-repaso.vacio .tx span{color:#2c6b2c;}

.teo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border:1px solid var(--blue);
    border-radius:var(--r-sm);padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;transition:background .12s;}
.teo-btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);}
.teo-btn:disabled{opacity:.5;cursor:default;}
.teo-btn.sec{background:var(--card);color:var(--ink);border-color:var(--border);}
.teo-btn.sec:hover{background:var(--bg);border-color:var(--muted);}
.teo-btn.ok{background:var(--success);border-color:var(--success);}
.teo-btn.ok:hover{background:#0b5f0b;border-color:#0b5f0b;}
.teo-btn.peq{padding:7px 14px;font-size:12.5px;}
.teo-btn.ancho{width:100%;}

.teo-msg{display:flex;gap:10px;align-items:flex-start;border-left:4px solid var(--blue);background:var(--blue-tint);color:#004578;
    border-radius:2px;padding:11px 14px;font-size:13.5px;line-height:1.55;margin-bottom:16px;}
.teo-msg.ok{border-left-color:var(--success);background:var(--success-bg);color:var(--success-ink);}
.teo-msg.warn{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn-ink);}
.teo-msg.err{border-left-color:var(--danger);background:var(--danger-bg);color:var(--danger-ink);}

.teo-vacio{font-size:13.5px;color:var(--muted);margin:0;}

.teo-opt-modo{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:6px 0 18px;}
.teo-opt-modo label{display:block;border:2px solid var(--border);border-radius:var(--r-md);padding:15px 17px;cursor:pointer;transition:border-color .12s,background .12s;}
.teo-opt-modo label:hover{border-color:#b9d7f2;}
.teo-opt-modo input{width:auto;margin:0 0 9px;accent-color:var(--blue);transform:scale(1.15);transform-origin:left center;}
.teo-opt-modo input:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.teo-opt-modo label:has(input:checked){border-color:var(--blue);background:var(--blue-tint);}
.teo-opt-modo .tit{display:block;font-size:14px;font-weight:700;margin-bottom:4px;}
.teo-opt-modo .des{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;}

.teo-examen{max-width:800px;margin:0 auto;padding:0 20px 60px;}
.teo-examen-bar{position:sticky;top:0;z-index:40;background:var(--card);border-bottom:1px solid var(--border);margin-bottom:20px;}
.teo-examen-bar-in{max-width:800px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
/* En el test la marca va más discreta: el protagonista es la pregunta. */
.teo-examen-bar .teo-logo img{height:26px;}
.teo-examen-bar .teo-logo-text{font-size:1.05rem;}
.teo-examen-bar .teo-logo-com{display:none;}
.teo-examen-bar .tit{font-weight:700;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    border-left:1px solid var(--border);padding-left:12px;}
.teo-examen-bar .sp{flex:1;}
.teo-contador{font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;color:var(--ink);}
.teo-marcador{display:flex;gap:9px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.teo-marcador .ok{color:var(--success);}
.teo-marcador .ko{color:var(--danger);}
.teo-modo-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.teo-modo-badge.inmediato{background:rgba(0,120,212,.12);color:#0078D4;}
.teo-modo-badge.examen{background:rgba(0,0,0,.06);color:var(--ink-soft);}
.teo-progreso{height:4px;background:#eceaea;}
.teo-progreso i{display:block;height:100%;background:var(--blue);transition:width .25s ease;}

.teo-preg{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow);padding:24px 26px;}
.teo-preg .tema{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:9px;}
.teo-preg .enun{font-size:17px;font-weight:600;line-height:1.45;margin:0 0 18px;text-wrap:pretty;}
/* La imagen de la pregunta.
   Altura FIJA e idéntica para todas: es lo que de verdad las iguala, porque
   el catálogo mezcla vectores (las señales, que se estirarían hasta ocupar la
   pantalla entera sin un tope) con fotos de proporciones muy distintas, desde
   panorámicas hasta verticales. Con 'contain' la imagen entra completa dentro
   de ese alto y solo varía el ancho: nunca se recorta una señal, que es lo
   que la pregunta está preguntando. Fondo blanco porque las señales llevan
   transparencia. */
.teo-preg .foto{display:block;margin:0 auto 18px;height:180px;width:auto;max-width:100%;
    object-fit:contain;border-radius:var(--r-sm);background:#fff;padding:6px;border:1px solid var(--border);}
.teo-rev-foto{display:block;height:100px;width:auto;max-width:100%;margin:0 0 10px;object-fit:contain;
    border-radius:var(--r-sm);background:#fff;padding:4px;border:1px solid var(--border);}

.teo-ops{display:flex;flex-direction:column;gap:9px;}
.teo-op{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--border);
    border-radius:var(--r-md);padding:13px 15px;font-size:14.5px;font-family:inherit;color:var(--ink);cursor:pointer;line-height:1.45;transition:border-color .12s,background .12s;}
.teo-op:hover:not(:disabled){border-color:var(--blue);background:var(--blue-tint);}
.teo-op:disabled{cursor:default;}
.teo-op .letra{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--border);
    display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--muted);}
.teo-op .txt{flex:1;min-width:0;}
.teo-op.sel{border-color:var(--blue);background:var(--blue-tint);}
.teo-op.sel .letra{background:var(--blue);border-color:var(--blue);color:#fff;}
.teo-op.buena{border-color:var(--success);background:var(--success-bg);}
.teo-op.buena .letra{background:var(--success);border-color:var(--success);color:#fff;}
.teo-op.mala{border-color:var(--danger);background:var(--danger-bg);}
.teo-op.mala .letra{background:var(--danger);border-color:var(--danger);color:#fff;}

.teo-feedback{margin-top:16px;border-radius:var(--r-md);padding:13px 16px;font-size:13.5px;line-height:1.6;display:none;}
.teo-feedback.on{display:block;}
.teo-feedback.ok{background:var(--success-bg);color:var(--success-ink);border-left:4px solid var(--success);}
.teo-feedback.ko{background:var(--danger-bg);color:var(--danger-ink);border-left:4px solid var(--danger);}
.teo-feedback b{display:block;margin-bottom:3px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;}

.teo-nav{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap;}
.teo-nav .sp{flex:1;}

.teo-res-hero{text-align:center;padding:34px 20px 26px;}
.teo-res-sello{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border-radius:50%;
    border:6px solid var(--success);color:var(--success);margin-bottom:16px;}
.teo-res-sello.ko{border-color:var(--danger);color:var(--danger);}
.teo-res-sello .pct{font-size:38px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.teo-res-sello .et{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-top:6px;}
.teo-res-tit{font-size:1.5rem;font-weight:800;margin:0 0 6px;}
.teo-res-sub{font-size:14px;color:var(--muted);margin:0;}
.teo-res-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin:24px 0;}
.teo-res-cifra{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:13px;text-align:center;}
.teo-res-cifra .v{display:block;font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;}
.teo-res-cifra .l{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:3px;}
.teo-res-cifra.ok .v{color:var(--success);}
.teo-res-cifra.ko .v{color:var(--danger);}

.teo-rev{border:1px solid var(--border);border-radius:var(--r-md);padding:15px 17px;margin-bottom:11px;border-left:4px solid var(--success);}
.teo-rev.ko{border-left-color:var(--danger);}
.teo-rev.blanco{border-left-color:var(--muted);}
.teo-rev .n{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
.teo-rev .e{font-size:14.5px;font-weight:600;margin-bottom:9px;line-height:1.45;}
.teo-rev .l{font-size:13px;margin:3px 0;padding-left:16px;position:relative;line-height:1.5;}
.teo-rev .l.tuya::before{content:"✗";position:absolute;left:0;color:var(--danger);font-weight:800;}
.teo-rev .l.buena::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:800;}
.teo-rev .exp{font-size:12.5px;color:var(--ink-soft);background:var(--bg);border-radius:var(--r-sm);padding:9px 11px;margin-top:9px;line-height:1.6;}

.teo-tabla{width:100%;border-collapse:collapse;font-size:13.5px;}
.teo-tabla th{text-align:left;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
    padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.teo-tabla td{padding:10px;border-bottom:1px solid #f3f2f1;vertical-align:top;}
.teo-tabla tr:last-child td{border-bottom:none;}
.teo-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.teo-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

.teo-pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;white-space:nowrap;}
.teo-pill.ok{background:var(--success-bg);color:var(--success-ink);}
.teo-pill.ko{background:var(--danger-bg);color:var(--danger-ink);}
.teo-pill.neu{background:var(--bg);color:var(--muted);border:1px solid var(--border);}

.teo-form label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin:0 0 5px;}
.teo-form input[type=text],.teo-form input[type=number],.teo-form select,.teo-form textarea{
    width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;font-family:inherit;background:#fff;color:var(--ink);}
.teo-form textarea{min-height:80px;resize:vertical;line-height:1.5;}
.teo-form input:focus,.teo-form select:focus,.teo-form textarea:focus{outline:none;border-color:var(--blue);}
.teo-campo{margin-bottom:14px;}
.teo-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}

/* Pie calcado del común de la plataforma (auth/includes/page_footer.php):
   mismas medidas, mismos colores y mismo orden de líneas, para que el alumno
   no note que está en otra web. */
.teo-footer{margin:40px auto 20px;padding:18px 16px;max-width:760px;border-top:1px solid #e1e8f5;color:#6b7a93;
    font:12.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:center;}
.teo-footer .teo-pf-aviso{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #eef2f8;color:var(--muted);}
.teo-footer .teo-pf-line{margin:4px 0;}
.teo-footer .teo-pf-logo{height:20px;width:auto;vertical-align:middle;margin-right:7px;background:transparent;display:inline-block;}
.teo-footer .teo-pf-brand{font-weight:700;color:#2c3e50;vertical-align:middle;}
.teo-footer .teo-pf-sep{color:#c7d2e0;margin:0 8px;}
.teo-footer a{color:#0066ff;text-decoration:none;transition:color .15s;}
.teo-footer a:hover{color:#0047b3;text-decoration:underline;}

@media (max-width:640px){
    .teo-hero{padding:28px 18px 66px;}
    .teo-hero h1{font-size:1.55rem;}
    .teo-card{padding:18px 16px;}
    .teo-preg{padding:19px 17px;}
    .teo-preg .enun{font-size:16px;}
    .teo-preg .foto{height:140px;}
    .teo-op{font-size:14px;padding:12px 13px;}
    .teo-res-sello{width:126px;height:126px;border-width:5px;}
    .teo-res-sello .pct{font-size:31px;}
    .teo-nav .teo-btn{flex:1;}
    .teo-topbar-inner{padding:10px 16px;gap:8px 12px;}
    .teo-logo-sec{display:none;}
    .teo-logo img{height:30px;}
    .teo-logo-text{font-size:1.2rem;}
    .teo-examen-bar .teo-logo-text{display:none;}
    .teo-examen-bar .tit{border-left:0;padding-left:0;}
    .teo-footer{margin-top:28px;}
}

@media print{
    .teo-topbar,.teo-nav,.teo-btn,.teo-footer{display:none !important;}
    body{background:#fff;}
    .teo-card,.teo-rev{box-shadow:none;break-inside:avoid;}
}

/* Catálogo visual de imágenes del panel. La altura de la miniatura es la
   misma que la del test, para que lo que se ve aquí sea lo que verá el
   alumno y no haya sorpresas al asignarla. */
.teo-img-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:22px;}
.teo-img-ficha{margin:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
    box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:8px;}
.teo-img-ficha img{height:120px;width:auto;max-width:100%;object-fit:contain;margin:0 auto;background:#fff;}
.teo-img-ficha figcaption{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);}
.teo-img-ficha code{font-size:12px;font-weight:700;color:var(--ink);word-break:break-all;}
.teo-img-ficha .d{color:var(--ink-soft);line-height:1.4;}
.teo-img-ficha .m{font-size:10.5px;}
.teo-img-ficha .teo-pill{align-self:flex-start;}