/* Yagüe Oposiciones — Test Online: tokens y componentes de la aplicación
   -----------------------------------------------------------------------
   Lo comparten la versión gratuita (/test-auxiliar-administrativo-estado/) y
   la de pago (/mi-test/). Los estilos de artículo (nav, titulares, FAQ, pie)
   siguen viviendo en cada página; aquí SOLO va lo del test.

   Regla: si tocas el aspecto del test, tócalo aquí. Duplicar estas reglas en
   una página concreta es cómo se acaba con dos marcas distintas conviviendo.
   Paleta Arcilla & Pizarra. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:#23394A; --navy-2:#2E4A5C; --brand-500:#4A7086; --brand-100:#F3E7DA;
  --accent:#A6482F; --accent-light:#E9A183; --accent-ink:#7A3220; --cta-ink:#FFFFFF;
  --white:#ffffff; --gray-light:#FAF3EA; --gray:#6B5D53; --text:#241C16;
  --arena:#EADFD1; --ok:#2F6B4F; --ok-bg:#EAF3EE; --ko:#A6482F; --ko-bg:#FBEDE9;
  --radius:12px;
}
body { font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; color:var(--text); background:var(--white); line-height:1.65; }

.btn { display:inline-block; background:var(--accent); color:var(--cta-ink); border:none; text-decoration:none; font-weight:700; font-size:1rem; font-family:inherit; padding:14px 30px; border-radius:9px; cursor:pointer; transition:background .2s; }
.btn:hover { background:var(--accent-ink); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.sec { background:transparent; color:var(--navy-2); border:2px solid var(--arena); padding:12px 24px; }
.btn.sec:hover { background:var(--gray-light); border-color:var(--brand-500); }
.btn.sm { font-size:.9rem; padding:10px 20px; }

.app { border:1px solid var(--arena); border-radius:16px; background:var(--white); box-shadow:0 2px 14px rgba(35,57,74,.07); overflow:hidden; margin:8px 0 34px; }
.app-head { background:var(--navy); color:#fff; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.app-head .titulo { font-weight:700; font-size:0.98rem; }
.app-head .meta { font-size:0.85rem; color:rgba(255,255,255,.78); font-variant-numeric:tabular-nums; display:flex; gap:16px; }
.app-body { padding:24px 22px; }
.barra { height:6px; background:var(--arena); }
.barra > i { display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease; }

.intro-puntos { list-style:none; margin:0 0 20px; }
.intro-puntos li { margin-bottom:9px; padding-left:26px; position:relative; }
.intro-puntos li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:800; }

.pnum { font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.ptema { font-size:.82rem; color:var(--gray); margin-bottom:14px; }
.enun { font-size:1.1rem; font-weight:600; color:var(--navy); line-height:1.5; margin-bottom:18px; }

.ops { list-style:none; margin:0 0 20px; }
.ops li { margin-bottom:10px; }
.ops button { width:100%; text-align:left; display:flex; gap:12px; align-items:flex-start; background:var(--white); border:2px solid var(--arena); border-radius:10px; padding:13px 15px; font:inherit; font-size:.98rem; color:var(--text); cursor:pointer; transition:border-color .15s, background .15s; }
.ops button:hover { border-color:var(--brand-500); background:var(--gray-light); }
.ops button .l { flex:0 0 26px; height:26px; border-radius:50%; background:var(--brand-100); color:var(--navy-2); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.ops button.sel { border-color:var(--accent); background:#FCF4F1; }
.ops button.sel .l { background:var(--accent); color:#fff; }

.navbtns { display:flex; gap:10px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--arena); padding-top:16px; }
.navbtns .sp { flex:1; }
.saltar { background:none; border:none; color:var(--gray); font:inherit; font-size:.88rem; cursor:pointer; text-decoration:underline; }
.saltar:hover { color:var(--accent); }

.rejilla { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.rejilla button { width:30px; height:30px; border-radius:7px; border:1px solid var(--arena); background:var(--white); font:inherit; font-size:.78rem; font-weight:600; color:var(--gray); cursor:pointer; }
.rejilla button.hecha { background:var(--brand-100); color:var(--navy); border-color:var(--brand-100); }
.rejilla button.actual { border-color:var(--accent); color:var(--accent); font-weight:800; }

.marcador { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:12px; margin-bottom:22px; }
.tile { background:var(--gray-light); border-radius:12px; padding:14px 16px; }
.tile .n { font-size:1.7rem; font-weight:800; color:var(--navy); letter-spacing:-.5px; font-variant-numeric:tabular-nums; line-height:1.1; }
.tile .k { font-size:.78rem; color:var(--gray); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.tile.nota { background:var(--navy); }
.tile.nota .n { color:var(--accent-light); }
.tile.nota .k { color:rgba(255,255,255,.7); }
.veredicto { font-size:1.02rem; margin-bottom:20px; padding:14px 18px; border-radius:10px; background:var(--brand-100); border-left:4px solid var(--accent); }

.portema { width:100%; border-collapse:collapse; font-size:.9rem; margin:6px 0 24px; }
.portema th { background:var(--navy-2); color:#fff; text-align:left; padding:8px 11px; font-weight:600; }
.portema td { border-bottom:1px solid var(--arena); padding:8px 11px; }
.portema td.c { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

.rev { border:1px solid var(--arena); border-radius:10px; margin-bottom:10px; overflow:hidden; }
.rev summary { cursor:pointer; padding:12px 15px; font-size:.94rem; font-weight:600; color:var(--navy); list-style:none; display:flex; gap:10px; align-items:flex-start; }
.rev summary::-webkit-details-marker { display:none; }
.rev .ico { flex:0 0 20px; height:20px; border-radius:50%; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.rev.ok { background:var(--ok-bg); border-color:#CFE3D7; } .rev.ok .ico { background:var(--ok); color:#fff; }
.rev.ko { background:var(--ko-bg); border-color:#F0D3CA; } .rev.ko .ico { background:var(--ko); color:#fff; }
.rev.bl { background:var(--gray-light); } .rev.bl .ico { background:var(--gray); color:#fff; }
.rev .cuerpo { padding:0 15px 14px 45px; font-size:.93rem; background:var(--white); }
.rev .linea { margin:8px 0; }
.rev .linea b { color:var(--navy-2); }
.rev .just { background:var(--gray-light); border-radius:8px; padding:11px 13px; margin-top:10px; color:var(--text); }

.captura { background:var(--brand-100); border-radius:14px; padding:22px 24px; margin:26px 0 10px; }
.captura h3 { margin:0 0 6px; color:var(--navy); font-size:1.12rem; }
.captura p { font-size:.95rem; margin-bottom:14px; }
.captura form { display:flex; gap:9px; flex-wrap:wrap; }
.captura input { flex:1 1 190px; min-width:0; padding:12px 14px; border:2px solid var(--arena); border-radius:9px; font:inherit; font-size:.96rem; background:#fff; color:var(--text); }
.captura input:focus { outline:none; border-color:var(--accent); }
.captura .aviso { font-size:.78rem; color:var(--gray); margin:10px 0 0; }
.captura .hecho { display:none; background:#fff; border-radius:10px; padding:14px 16px; font-size:.95rem; }

/* Menú de modos (solo versión de pago) */
.modos { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:8px; }
.modo { text-align:left; background:var(--white); border:2px solid var(--arena); border-radius:12px; padding:16px 18px; font:inherit; cursor:pointer; transition:border-color .15s, background .15s; }
.modo:hover:not(:disabled) { border-color:var(--accent); background:var(--gray-light); }
.modo:disabled { opacity:.5; cursor:not-allowed; }
.modo b { display:block; color:var(--navy); font-size:1rem; margin-bottom:3px; }
.modo span { font-size:.86rem; color:var(--gray); line-height:1.45; }
.selector { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:16px 0 4px; }
.selector select { flex:1 1 240px; padding:12px 14px; border:2px solid var(--arena); border-radius:9px; font:inherit; font-size:.95rem; background:#fff; color:var(--text); }
.selector select:focus { outline:none; border-color:var(--accent); }

@media (max-width:640px){
  .app-body { padding:20px 16px; }
  .enun { font-size:1.04rem; }
  .marcador { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce){ * { transition:none !important; } }