/* RADUATEST · estilos (identidad del logo, 31/10/2026).
   Todo sale del logo (herramientas/logo/taller.html): el azul petróleo del símbolo (degradado #12707b → #0a4a52),
   el ámbar de la barrera levantada (#f2b441; #b26f0c sobre fondo claro) y Plus Jakarta Sans (800 para el
   nombre, 600 para el lema). «RADUA» va en petróleo y «TEST» en ámbar, como en el logotipo. No hay más colores
   de marca: el verde y el rojo se quedan solo para acierto y fallo. */

:root{
  color-scheme: light;
  --bg:#eff5f5; --bg2:#e2ecee; --card:#ffffff; --line:#d6e4e6; --line2:#bdd1d4;
  --tx:#0d2a2f; --tx2:#5b6670; --tx3:#7b8d93;
  --acc:#0e5a63; --acc2:#0a4a52; --acc-tx:#ffffff; --acc-soft:#dcecee;
  /* el degradado del símbolo (portada) y el de los botones */
  --logo-grad:linear-gradient(135deg,#12707b,#0a4a52);
  --grad:linear-gradient(135deg,#12707b,#0a4a52); --grad-h:linear-gradient(135deg,#0f636d,#083d44);
  /* ámbar: --amb para líneas e iconos, --amb-tx para letra pequeña, --amb-fill para rellenos sobre petróleo */
  --amb:#b26f0c; --amb-tx:#8f5806; --amb-fill:#f2b441; --amb-soft:#fcf0d6;
  --wm:#0e5a63; --tm:#b26f0c; --eia:oklch(44% .11 190);
  --ok:#1d7a4f; --ok-bg:#e2f2e9; --ko:#b3372b; --ko-bg:#f9e4e1; --warn:#8f5806; --warn-bg:#fcf0d6;
  --portada-tx:#ffffff;
  --r:16px; --r-sm:11px;
  --f-ui:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-tx:var(--f-ui);
  --sh:0 1px 2px rgba(10,74,82,.06), 0 2px 8px rgba(10,74,82,.05);
  --sh2:0 2px 4px rgba(10,74,82,.07), 0 12px 28px rgba(10,74,82,.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    color-scheme: dark;
    --bg:#0a1417; --bg2:#101c20; --card:#0f1b1f; --line:#1e3237; --line2:#2d454c;
    --tx:#e8f1f2; --tx2:#9db3b9; --tx3:#6e868d;
    --acc:#4fb6c0; --acc2:#7fd0d8; --acc-tx:#04181b; --acc-soft:#103239;
    --grad:linear-gradient(135deg,#63c6cf,#3b9ea8); --grad-h:linear-gradient(135deg,#76d0d8,#4cb0ba);
    --amb:#f2b441; --amb-tx:#f2b441; --amb-fill:#f2b441; --amb-soft:#2d2410;
    --wm:#ffffff; --tm:#f2b441; --eia:oklch(74% .11 190);
    --ok:#4cc08a; --ok-bg:#11281d; --ko:#ef7b6e; --ko-bg:#321818; --warn:#e2ae52; --warn-bg:#2d2410;
    --sh:0 1px 2px rgba(0,0,0,.35); --sh2:0 2px 4px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35);
  }
}
:root[data-tema="oscuro"]{
  color-scheme: dark;
  --bg:#0a1417; --bg2:#101c20; --card:#0f1b1f; --line:#1e3237; --line2:#2d454c;
  --tx:#e8f1f2; --tx2:#9db3b9; --tx3:#6e868d;
  --acc:#4fb6c0; --acc2:#7fd0d8; --acc-tx:#04181b; --acc-soft:#103239;
  --grad:linear-gradient(135deg,#63c6cf,#3b9ea8); --grad-h:linear-gradient(135deg,#76d0d8,#4cb0ba);
  --amb:#f2b441; --amb-tx:#f2b441; --amb-fill:#f2b441; --amb-soft:#2d2410;
  --wm:#ffffff; --tm:#f2b441; --eia:oklch(74% .11 190);
  --ok:#4cc08a; --ok-bg:#11281d; --ko:#ef7b6e; --ko-bg:#321818; --warn:#e2ae52; --warn-bg:#2d2410;
  --sh:0 1px 2px rgba(0,0,0,.35); --sh2:0 2px 4px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font:15.5px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01" on}
.wrap{max-width:920px;margin:0 auto;padding:0 20px 72px}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
a{color:var(--acc)}
svg{display:block}
[hidden]{display:none!important}
.cargando{color:var(--tx2);text-align:center;padding:64px 0}
.meta{font-size:13px;color:var(--tx2)}
.num{font-variant-numeric:tabular-nums}

/* ---------- CABECERA ---------- */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:12px 0;
  margin-bottom:8px;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer;margin-right:auto;min-width:0}
button.brand{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left}
.logo{width:38px;height:38px;display:block;flex:none;border-radius:22%;box-shadow:var(--sh)}
.brand .h1{display:block;font-size:17px;line-height:1.2}
.brand .sub{display:block;font-size:12px;font-weight:600;color:var(--tx2);margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* el nombre, como en el logotipo: Plus Jakarta Sans 800 en mayúsculas, RADUA en petróleo y TEST en ámbar */
.wm{font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--wm)}
.wm b{font-weight:inherit;color:var(--tm)}
.guardado{font-size:12px;color:var(--ok);font-weight:600}
.icobtn{background:var(--card);border:1px solid var(--line);color:var(--tx2);border-radius:var(--r-sm);
  width:38px;height:38px;cursor:pointer;display:grid;place-items:center;flex:none;transition:.15s}
.icobtn svg{width:19px;height:19px}
.icobtn:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- BOTONES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:var(--acc-tx);
  border:1px solid transparent;border-radius:var(--r-sm);padding:10px 18px;font:700 14.5px/1.2 var(--f-ui);
  cursor:pointer;transition:.15s;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 4px 10px -5px rgba(10,74,82,.55)}
.btn svg{width:17px;height:17px}
.btn:hover{background:var(--grad-h)}
.btn:active{transform:translateY(1px)}
.btn.g{background:var(--card);color:var(--tx);border-color:var(--line2);box-shadow:none}
.btn.g:hover{background:var(--card);border-color:var(--acc);color:var(--acc)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:7px 13px;font-size:13px}
.btn.ancho{width:100%;padding:13px 18px;font-size:15.5px}

/* ---------- AVISOS ---------- */
.aviso{border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);background:var(--warn-bg);color:var(--tx);
  padding:11px 14px;border-radius:var(--r-sm);font-size:14px;line-height:1.55;margin:14px 0}
.aviso b{font-weight:700}
.error{color:var(--ko);background:var(--ko-bg);border:1px solid color-mix(in srgb, var(--ko) 30%, transparent);
  padding:10px 13px;border-radius:var(--r-sm);font-size:14px;margin:0 0 14px}
.exito{color:var(--ok);background:var(--ok-bg);border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  padding:10px 13px;border-radius:var(--r-sm);font-size:14px;margin:0 0 14px}

/* ---------- TÍTULOS DE SECCIÓN ---------- */
h4.sect,h2.sect{display:flex;align-items:center;gap:9px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx2);margin:30px 0 12px;font-weight:700}
/* el trazo ámbar de la barrera del símbolo, de marcador */
h4.sect::before,h2.sect::before{content:"";flex:none;width:18px;height:5px;border-radius:99px;background:var(--amb)}
.bhead{font-size:12px;font-weight:700;color:var(--acc);margin:24px 0 10px;text-transform:uppercase;letter-spacing:.08em}

/* ---------- PORTADA (HERO) ---------- */
.hero{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:6px 0 18px;box-shadow:var(--sh)}
.hero h2{margin:0 0 6px;font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1.2}
.hero p{margin:0;color:var(--tx2);font-size:14.5px}
.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--amb-tx);margin:0 0 6px}

/* Portada del inicio: saludo + anillo de acierto. Es el símbolo del logo en grande: el mismo degradado
   petróleo, el visto y la barrera ámbar de marca de agua, y el acierto en ámbar como la barrera levantada. */
.portada{display:flex;gap:20px;align-items:center;background:var(--logo-grad);color:var(--portada-tx);border-radius:var(--r);
  padding:24px 26px;margin:6px 0 14px;box-shadow:var(--sh2);position:relative;overflow:hidden}
.portada::after{content:"";position:absolute;right:146px;top:50%;transform:translateY(-50%);width:150px;height:128px;pointer-events:none;opacity:.2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='108 126 300 256' fill='none'%3E%3Cpath d='M140 270L214 344' stroke='%23fff' stroke-width='56' stroke-linecap='round'/%3E%3Cpath d='M214 344L376 158' stroke='%23f2b441' stroke-width='56' stroke-linecap='round'/%3E%3Cpath d='M264.22 286.34L291.76 254.72M319.3 223.1L346.84 191.48' stroke='%23fff' stroke-width='56'/%3E%3Ccircle cx='214' cy='344' r='34' fill='%23fff'/%3E%3Ccircle cx='214' cy='344' r='12.5' fill='%230a4a52'/%3E%3C/svg%3E") no-repeat center/contain}
.portada .txt{flex:1;min-width:0;position:relative;z-index:1}
.portada .eyebrow{color:var(--amb-fill)}
.portada h2{margin:0 0 6px;font-size:27px;font-weight:800;letter-spacing:-.6px;line-height:1.15}
.portada p{margin:0;font-size:14.5px;opacity:.9;max-width:52ch}
.anillo{position:relative;width:104px;height:104px;flex:none;z-index:1}
.anillo svg{width:104px;height:104px;transform:rotate(-90deg)}
.anillo .fondo{stroke:rgba(255,255,255,.22)}
.anillo .valor{stroke:var(--amb-fill)}
.anillo .cifra-anillo{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.anillo .cifra-anillo b{display:block;font-size:24px;font-weight:800;letter-spacing:-.5px}
.anillo .cifra-anillo span{font-size:11px;opacity:.85}

/* Cifras clave (inicio y progreso) */
.kpis,.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:6px}
.kpi,.cifra{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--sh);
  display:flex;flex-direction:column;gap:2px}
.kpi b,.cifra b{font-size:24px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi span,.cifra span{font-size:12.5px;color:var(--tx2)}
.kpi .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-bottom:6px;background:var(--acc-soft);color:var(--acc)}
.kpi .ico svg{width:17px;height:17px}

/* Los modos de estudio: tarjetas con icono de color */
.modes{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.modes{grid-template-columns:repeat(2,1fr)}}
.mode{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 16px 16px;cursor:pointer;transition:.16s;text-align:left;box-shadow:var(--sh);color:var(--tx);font:inherit;width:100%}
.mode:hover{border-color:var(--line2);box-shadow:var(--sh2);transform:translateY(-1px)}
.mode .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--acc-soft);color:var(--acc)}
.mode .ic svg{width:22px;height:22px}
.mode .txt{flex:1;min-width:0}
.mode h3{margin:1px 0 4px;font-size:15.5px;font-weight:700;letter-spacing:-.2px;line-height:1.3}
.mode p{margin:0;color:var(--tx2);font-size:13.5px;line-height:1.5}
.mode .tag{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--acc);background:var(--acc-soft);
  padding:3px 10px;border-radius:999px}
.mode .chev{color:var(--tx3);align-self:center;flex:none}
.mode .chev svg{width:18px;height:18px}
/* dos colores, los del logo: petróleo para casi todo y ámbar para lo que pide atención (c4 fallos, c5 exámenes oficiales, racha) */
.mode.c4 .ic,.mode.c4 .tag,.mode.c5 .ic,.mode.c5 .tag,.kpi.c4 .ico,.kpi.c5 .ico{background:var(--amb-soft);color:var(--amb-tx)}
.mode.destacado{border-color:color-mix(in srgb, var(--amb) 55%, var(--line))}

.interruptor{display:flex;gap:10px;align-items:center;margin-top:14px;cursor:pointer;width:fit-content;font-size:13.5px;
  color:var(--tx2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 13px}
.interruptor input{width:17px;height:17px;accent-color:var(--acc);flex:none}

/* ---------- BARRAS DE RENDIMIENTO ---------- */
.bars{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh)}
.row{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:13.5px}
.row + .row{border-top:1px solid var(--line)}
.row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{width:130px;height:8px;background:var(--bg2);border-radius:99px;overflow:hidden;flex:none}
.bar i{display:block;height:100%;background:var(--ok);border-radius:99px}
.pct{min-width:58px;text-align:right;color:var(--tx2);font-variant-numeric:tabular-nums;flex:none;font-size:13px;font-weight:600}

/* ---------- TEST ---------- */
.qbar{display:flex;align-items:center;gap:12px;margin:6px 0 12px;flex-wrap:wrap}
.qbar .meta{font-weight:600}
.prog{flex:1;min-width:140px;height:8px;background:var(--bg2);border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .3s}
.timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;background:var(--card);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px}
.timer.low{color:var(--ko);border-color:var(--ko);background:var(--ko-bg)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:12px;font-weight:600;color:var(--tx2);background:var(--bg2);padding:4px 10px;border-radius:999px;line-height:1.35}
.chip.ofi{color:var(--ok);background:var(--ok-bg)}
.chip.ela{color:var(--warn);background:var(--warn-bg)}
.chip.vig{color:var(--ko);background:var(--ko-bg)}
.chip.cit{color:var(--acc);background:var(--acc-soft)}
.chip.cad{color:var(--warn);background:var(--warn-bg)}
.q{font-family:var(--f-tx);font-size:19px;line-height:1.5;margin:0 0 20px;font-weight:600;letter-spacing:-.2px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:13px;align-items:flex-start;text-align:left;background:var(--card);border:1.5px solid var(--line);
  border-radius:12px;padding:14px 16px;cursor:pointer;color:var(--tx);font:15px/1.5 var(--f-ui);transition:.13s;width:100%;min-height:54px}
.opt:hover:not(:disabled){border-color:var(--acc);background:color-mix(in srgb, var(--acc-soft) 45%, var(--card))}
.opt .k{width:28px;height:28px;border-radius:999px;background:var(--bg2);display:grid;place-items:center;
  font-size:13px;font-weight:800;flex:none;margin-top:-1px;text-transform:uppercase;color:var(--tx2)}
.opt.sel{border-color:var(--acc);background:var(--acc-soft)}
.opt.sel .k{background:var(--grad);color:var(--acc-tx)}
.opt.ok{border-color:var(--ok);background:var(--ok-bg)}
.opt.ok .k{background:var(--ok);color:#fff}
.opt.ko{border-color:var(--ko);background:var(--ko-bg)}
.opt.ko .k{background:var(--ko);color:#fff}
.opt:disabled{cursor:default}
.exp{margin-top:18px;border-radius:12px;background:var(--bg2);padding:15px 18px;font-size:15px;line-height:1.65;border:1px solid var(--line)}
.exp.good{background:var(--ok-bg);border-color:color-mix(in srgb, var(--ok) 25%, transparent)}
.exp.bad{background:var(--ko-bg);border-color:color-mix(in srgb, var(--ko) 25%, transparent)}
.exp .hd{font-weight:800;margin-bottom:6px;font-size:14px}
.exp.good .hd{color:var(--ok)} .exp.bad .hd{color:var(--ko)}
.exp .ref{margin-top:10px;font-size:12.5px;color:var(--tx2);line-height:1.5;font-weight:600}
.nav{display:flex;gap:10px;justify-content:space-between;margin-top:20px;align-items:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;margin-top:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.gsq{aspect-ratio:1;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--tx2);
  font:600 12.5px var(--f-ui);cursor:pointer;transition:.12s;font-variant-numeric:tabular-nums}
.gsq:hover{border-color:var(--acc)}
.gsq.done{background:var(--grad);color:var(--acc-tx);border-color:transparent}
.gsq.now{outline:2.5px solid var(--amb);outline-offset:1px}
.gsq.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.gsq.ko{background:var(--ko);color:#fff;border-color:var(--ko)}

/* ---------- RESULTADO ---------- */
.res{text-align:center;padding:34px 22px}
.verdict{display:inline-block;font-size:15px;font-weight:800;letter-spacing:.12em;margin:14px 0 6px;padding:6px 16px;border-radius:999px}
.verdict.apto{color:var(--ok);background:var(--ok-bg)} .verdict.no{color:var(--ko);background:var(--ko-bg)}
.score{font-size:15px;color:var(--tx2)}
.ring{width:136px;height:136px;margin:0 auto 4px}

/* ---------- TEMAS Y LISTAS ---------- */
.tlist{display:flex;flex-direction:column;gap:8px}
.titem{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px 16px;cursor:pointer;transition:.13s;text-align:left;color:var(--tx);
  font:inherit;width:100%;box-shadow:var(--sh)}
.titem:hover{border-color:var(--acc);box-shadow:var(--sh2)}
.titem .n{font-size:11.5px;font-weight:800;color:var(--acc);background:var(--acc-soft);border-radius:999px;padding:4px 9px;flex:none;letter-spacing:.02em}
.titem .t{flex:1;font-size:14.5px;font-weight:600}
.titem .c{font-size:12.5px;color:var(--tx2);flex:none;font-variant-numeric:tabular-nums}
.titem.todo{border-color:color-mix(in srgb, var(--acc) 40%, var(--line));background:var(--acc-soft)}

/* ---------- SUPUESTOS ---------- */
details.ctx,details.sol{border:1px solid var(--line);border-radius:12px;background:var(--bg);margin-bottom:14px}
details.ctx summary,details.sol summary{cursor:pointer;padding:12px 16px;font-size:14px;color:var(--acc);
  font-weight:700;list-style:none;user-select:none}
details.sol summary{color:var(--ok)}
details.ctx summary::-webkit-details-marker,details.sol summary::-webkit-details-marker{display:none}
details.ctx summary::before,details.sol summary::before{content:'▸ ';display:inline-block;transition:.15s}
details.ctx[open] summary::before,details.sol[open] summary::before{transform:rotate(90deg)}
details.ctx>div,details.sol>div{padding:0 16px 14px;border-top:1px solid var(--line);margin-top:2px;padding-top:12px}
details.sol{margin-bottom:0;border-color:color-mix(in srgb, var(--ok) 35%, var(--line));background:var(--ok-bg)}
.texto p{margin:0 0 11px;font-family:var(--f-tx);font-size:16px;line-height:1.7;color:var(--tx)}
.texto p:last-child{margin-bottom:0}

/* ---------- ENTRADA Y FORMULARIOS ---------- */
.acceso{max-width:430px;margin:7vh auto 0}
.acceso .card{padding:28px 28px 24px;box-shadow:var(--sh2)}
.acceso .marca{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.acceso .marca .logo{width:50px;height:50px}
.acceso h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.4px}
.acceso .marca h2.wm{font-size:24px;letter-spacing:.02em;line-height:1.15}
.acceso .marca p.sub{font-weight:600;margin-top:2px}
.acceso p.sub{font-size:13.5px;color:var(--tx2);margin:0}
.acceso h3{font-weight:800;letter-spacing:-.3px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.campo label{font-size:13px;font-weight:700;color:var(--tx)}
.campo input,.campo textarea,.campo select{font:16px/1.4 var(--f-ui);color:var(--tx);background:var(--bg);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 13px;width:100%;transition:.15s}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--acc);background:var(--card);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 15%, transparent)}
.campo .ayuda{font-size:12.5px;color:var(--tx2)}
.ver-clave{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tx2);margin:-4px 0 16px;cursor:pointer;width:fit-content}
.ver-clave input{accent-color:var(--acc)}
.nota-pie{font-size:13px;color:var(--tx2);margin-top:16px;text-align:center}

/* ---------- CUENTA ---------- */
.cuenta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.cuenta .meta{margin-right:auto}

/* ---------- AVISAR DE UNA PREGUNTA ---------- */
.reportar{margin-top:14px;font-size:13.5px}
.reportar summary{cursor:pointer;color:var(--tx2);list-style:none;user-select:none;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.reportar summary::-webkit-details-marker{display:none}
.reportar summary svg{width:15px;height:15px}
.reportar[open] summary{color:var(--acc)}
.reportar form{margin-top:10px}
.reportar textarea{min-height:80px;resize:vertical}

/* ---------- PROGRESO ---------- */
.leyenda{font-size:12.5px;color:var(--tx2);margin:10px 0 0}
.lista{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.lista .it{display:flex;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);font-size:14px}
.lista .it:first-child{border-top:0}
.lista .it .nm{flex:1;min-width:0;font-weight:600}
.lista .it .dt{font-size:12.5px;color:var(--tx2);font-weight:400}
.lista .vacio{padding:18px;color:var(--tx2);font-size:14px;margin:0}
.etq{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
.etq.apto{color:var(--ok);background:var(--ok-bg)} .etq.no{color:var(--ko);background:var(--ko-bg)}
.etq.abierto{color:var(--warn);background:var(--warn-bg)} .etq.resuelto{color:var(--ok);background:var(--ok-bg)}

/* ---------- SEGUIMIENTO ---------- */
.persona{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh);margin-bottom:12px}
.persona h3{margin:0 0 4px;font-size:17px;font-weight:800;letter-spacing:-.3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.persona .dt{font-size:13px;color:var(--tx2)}
.persona .datos{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.persona .acciones{display:flex;gap:8px;flex-wrap:wrap}
.fact{background:var(--bg2);border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--tx2)}
.fact b{color:var(--tx);font-weight:800;font-variant-numeric:tabular-nums}
.caja-clave{background:var(--acc-soft);border:1px dashed var(--acc);border-radius:12px;padding:13px 15px;margin:12px 0;font-size:14px}
.caja-clave code{font:700 17px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;user-select:all;word-break:break-all}
.aviso-rep{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);margin-bottom:12px}
.aviso-rep .q{font-size:16px;margin:6px 0 8px}
.aviso-rep .texto-rep{background:var(--warn-bg);border-radius:var(--r-sm);padding:10px 13px;font-size:14px;white-space:pre-wrap;margin:10px 0}
.aviso-rep ol{margin:6px 0 8px;padding-left:22px;font-size:14px}
.aviso-rep li.ok{color:var(--ok);font-weight:700}

/* ---------- LEGAL ---------- */
.legal h2{font-weight:800;letter-spacing:-.4px}
.legal h3{font-size:15.5px;margin:20px 0 6px;font-weight:800}
.legal p,.legal li{font-size:14.5px;line-height:1.7;color:var(--tx)}

/* ---------- PIE ---------- */
footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--tx2);line-height:1.75}
footer a{color:var(--acc)}

/* ---------- AVISO FLOTANTE ---------- */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:11px 18px;
  border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--sh2);z-index:50;max-width:calc(100% - 32px)}

/* ---------- MÓVIL ---------- */
@media(max-width:640px){
  body{font-size:15px}
  .wrap{padding:0 14px 56px}
  header{padding:10px 0}
  .brand .sub{max-width:52vw}
  .portada{padding:20px;gap:14px;align-items:flex-start}
  .portada h2{font-size:23px}
  .portada p{font-size:13.5px}
  .portada::after{display:none}
  .anillo,.anillo svg{width:84px;height:84px}
  .anillo .cifra-anillo b{font-size:20px}
  .kpis,.cifras{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:11px 12px}
  .kpi .ico{grid-row:span 2;margin:0}
  .kpi b{font-size:21px}
  .kpi span:last-child{font-size:12px;line-height:1.3}
  .cifra{padding:12px}
  .cifra b{font-size:21px}
  .modes{grid-template-columns:1fr}
  .card{padding:18px 16px}
  .q{font-size:17px}
  .opt{padding:13px 14px;min-height:56px}
  .hero{padding:18px}
  .hero h2{font-size:21px}
  .bar{width:84px}
  .persona,.aviso-rep{padding:15px}
  .acceso{margin-top:3vh}
  .acceso .card{padding:22px 18px 18px}
  /* En el test, Anterior / Siguiente siempre a mano */
  .card .nav{position:sticky;bottom:0;background:var(--card);margin:16px -16px -18px;padding:12px 16px 14px;
    border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r);z-index:5;flex-wrap:nowrap;gap:8px}
  .card .nav > div{gap:8px!important}
  .card .nav .btn{padding:10px 12px;font-size:14px;white-space:nowrap}
}

/* ---------- SELLO DE AUTORÍA (entrada y pie) ---------- */
.sello{display:flex;flex-direction:column;align-items:center;gap:7px;margin:22px auto 4px;text-align:center}
.sello-estrategia{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 14px;border:1px solid var(--line2);
  border-radius:999px;background:var(--card);color:var(--tx);text-decoration:none;box-shadow:var(--sh);transition:border-color .15s}
.sello-estrategia:hover{border-color:var(--acc)}
.sello-de{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx2)}
.wm-estrategia{height:15px;width:auto;display:block}
.wm-estrategia .ia{fill:var(--eia)}
.sello-aduai{font-size:12px;color:var(--tx2);letter-spacing:.01em}
.sello-aduai b{color:var(--tx);font-weight:700}
footer .sello{margin-top:18px}

/* ---------- GRÁFICO DE PROGRESO (test hacia arriba en petróleo, supuestos hacia abajo en ámbar) ---------- */
.graf{padding:14px 16px 16px}
.pestanas{display:inline-flex;gap:4px;background:var(--bg2);border-radius:999px;padding:4px;margin-bottom:12px;max-width:100%}
.pestana{border:0;background:none;color:var(--tx2);font:700 13px var(--f-ui);padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pestana.on{background:var(--card);color:var(--acc);box-shadow:var(--sh)}
.graf-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin}
.espejo{display:grid;grid-template-columns:repeat(var(--n),minmax(38px,1fr));gap:4px;min-width:calc(var(--n) * 42px)}
.gcol{display:grid;grid-template-rows:118px auto 70px;align-items:stretch;background:none;border:1px solid transparent;border-radius:10px;
  padding:4px 2px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.gcol:hover{background:var(--bg2)}
.gcol.sel{background:var(--acc-soft);border-color:color-mix(in srgb, var(--acc) 35%, transparent)}
.gcol .arriba,.gcol .abajo{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:0}
.gcol .arriba{justify-content:flex-end}
.gcol .abajo{justify-content:flex-start}
.gcol .b{width:70%;max-width:30px;min-height:2px;position:relative;overflow:hidden;flex:none}
.gcol .arriba .b{background:color-mix(in srgb, var(--acc) 28%, var(--bg2));border-radius:6px 6px 2px 2px}
.gcol .arriba .b i{position:absolute;left:0;right:0;bottom:0;background:var(--acc)}
.gcol .abajo .b{background:var(--amb-fill);border-radius:2px 2px 6px 6px}
.gcol .n{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;min-height:13px}
.gcol .f{font-size:10.5px;color:var(--tx2);text-align:center;border-top:1.5px solid var(--line2);border-bottom:1.5px solid var(--line2);padding:3px 0;white-space:nowrap}
.gcol.hoy .f{color:var(--acc);font-weight:800}
.mapa{display:grid;grid-template-columns:44px repeat(var(--n),minmax(34px,1fr));gap:3px;min-width:calc(44px + var(--n) * 37px)}
.mapa .rot{font-size:11.5px;font-weight:800;color:var(--acc);display:flex;align-items:center;position:sticky;left:0;background:var(--card);z-index:1}
.mapa .rot.p{color:var(--amb-tx)}
.cab-sem{font:600 10.5px var(--f-ui);color:var(--tx2);background:none;border:0;padding:2px 0 4px;cursor:pointer;white-space:nowrap}
.cab-sem.sel{color:var(--acc);font-weight:800}
.celda{height:28px;border-radius:6px;border:0;font:700 11px var(--f-ui);font-variant-numeric:tabular-nums;cursor:pointer;padding:0;
  background:color-mix(in srgb, var(--acc) var(--nivel), var(--bg2));color:var(--tx)}
.celda.t.fuerte{color:var(--acc-tx)}
.celda.p{background:color-mix(in srgb, var(--amb-fill) var(--nivel), var(--bg2));color:var(--tx)}
.celda.sel{outline:2px solid var(--amb);outline-offset:-1px}
svg.avance{display:block;max-width:none}
svg.avance .rej{stroke:var(--line);stroke-width:1}
svg.avance .eje{font:600 10.5px var(--f-ui);fill:var(--tx2)}
svg.avance .eje.hoy{fill:var(--acc);font-weight:800}
svg.avance .zona{fill:transparent;cursor:pointer}
svg.avance .zona:hover{fill:var(--bg2)}
svg.avance .zona.sel{fill:var(--acc-soft)}
svg.avance .l{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
svg.avance .l.t{stroke:var(--acc)} svg.avance .l.p{stroke:var(--amb-fill)}
svg.avance .pt{stroke:var(--card);stroke-width:1.5;pointer-events:none}
svg.avance .pt.t{fill:var(--acc)} svg.avance .pt.p{fill:var(--amb-fill)}
.punto{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 5px 0 0;vertical-align:-1px}
.punto.t{background:var(--acc)} .punto.p{background:var(--amb-fill);margin-left:8px}
.graf-detalle{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.graf-detalle h5{margin:0 0 10px;font-size:14px;font-weight:800}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.lado{border-radius:var(--r-sm);padding:9px 12px;display:flex;flex-direction:column;background:var(--acc-soft)}
.lado.p{background:var(--amb-soft)}
.cifra-sem{font-size:22px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.15}
.lado.t .cifra-sem{color:var(--acc)} .lado.p .cifra-sem{color:var(--amb-tx)}
.lado .que{font-size:12.5px;color:var(--tx2)}
.bloque-sem + .bloque-sem{border-top:1px solid var(--line)}
.bloque-sem .row{padding-bottom:2px}
.temas-sem{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 8px}
.pill{display:inline-flex;align-items:center;gap:4px;font:600 12px/1.3 var(--f-ui);color:var(--acc);background:var(--acc-soft);
  border:1px solid transparent;border-radius:999px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.pill:hover{border-color:var(--acc)}
.pill.p{color:var(--amb-tx);background:var(--amb-soft)}
.pill.p:hover{border-color:var(--amb)}
.pill svg{width:13px;height:13px}
.pill.hecha{color:var(--ok);background:var(--ok-bg)}
.vacio-sem,.del-plan{font-size:13px;color:var(--tx2);margin:6px 0 0}
.del-plan b{color:var(--tx)}

/* ---------- PLAN DE ESTUDIO ---------- */
.aviso.convocatoria{display:flex;gap:10px;align-items:flex-start;background:var(--acc-soft);border-color:color-mix(in srgb, var(--acc) 25%, transparent)}
.aviso.convocatoria svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--acc)}
.plan-resumen{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--amb);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);margin:14px 0 0}
.plan-resumen .cab{display:flex;gap:12px;align-items:flex-start}
.plan-resumen .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--amb-soft);color:var(--amb-tx)}
.plan-resumen .ic svg{width:20px;height:20px}
.plan-resumen h3{margin:0 0 6px;font-size:16px;font-weight:800;letter-spacing:-.2px}
.plan-resumen .eyebrow{margin:0 0 2px}
.plan-resumen p{margin:0;font-size:13.5px;color:var(--tx2)}
.plan-resumen .esta{margin:10px 0 0;color:var(--tx)}
.plan-resumen .aviso{margin:12px 0}
.estado{display:inline-block;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;color:var(--ok);background:var(--ok-bg)}
.estado.atras{color:var(--warn);background:var(--warn-bg)}
.hero .estado{margin-top:10px}
.plan-barra{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.plan-barra .prog{min-width:160px}
.tarea{display:flex;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.tarea:first-child{border-top:0}
.tarea .marca{width:24px;height:24px;border-radius:999px;border:2px solid var(--line2);flex:none;display:grid;place-items:center}
.tarea.hecha .marca{background:var(--ok);border-color:var(--ok);color:#fff}
.tarea .marca svg{width:14px;height:14px}
.tarea .nm{flex:1;min-width:0;font-weight:600;font-size:14px;display:flex;flex-direction:column}
.tarea .tipo{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--amb-tx)}
.tarea .dt{font-size:12.5px;color:var(--tx2);font-weight:400}
.tarea.hecha .nm{color:var(--tx2)}
.lista.tareas .vacio{border-top:1px solid var(--line)}
.calendario{display:flex;flex-direction:column;gap:8px}
details.mes{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
details.mes summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;font-weight:800;font-size:14.5px;list-style:none}
details.mes summary::-webkit-details-marker{display:none}
details.mes summary::before{content:"\25B8";color:var(--acc);transition:.15s}
details.mes[open] summary::before{transform:rotate(90deg)}
details.mes summary .nm{flex:1}
.sem-plan{padding:10px 16px 12px;border-top:1px solid var(--line)}
.sem-plan.actual{background:color-mix(in srgb, var(--acc-soft) 60%, var(--card));box-shadow:inset 4px 0 0 var(--acc)}
.sem-plan.pasada .sp-cab b{color:var(--tx2)}
.sp-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:13.5px}
.sp-cab .dt{font-size:12.5px;color:var(--tx2);margin-right:auto}
.sp-cab .chip{font-size:11px;padding:2px 8px}
.chip.fase-t{color:var(--acc);background:var(--acc-soft)} .chip.fase-p{color:var(--amb-tx);background:var(--amb-soft)}
.sp-items{display:flex;flex-wrap:wrap;gap:6px}
.plan-op .fases{display:block;margin-top:8px;font-size:12.5px;color:var(--tx2);line-height:1.55}
.plan-op .fases b{color:var(--tx)}
.acciones-plan{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.btn.trabajada{margin-top:12px}
.btn.trabajada.hecha{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb, var(--ok) 35%, transparent);box-shadow:none}
@media(max-width:640px){
  .tarea{padding:11px 12px;gap:10px}
  .tarea .btn{padding:7px 10px}
  .plan-resumen{padding:14px}
  .dos{gap:6px}
}

/* ---------- ALTA Y CUENTA ---------- */
.alta-cta{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--tx2)}
.acepto{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--tx2);margin:0 0 16px;cursor:pointer;line-height:1.45}
.acepto input{width:17px;height:17px;accent-color:var(--acc);flex:none;margin-top:1px}
.btn.peligro{background:var(--ko);box-shadow:none}
.btn.peligro:hover{background:color-mix(in srgb, var(--ko) 85%, #000)}