/* ===================== sistema de diseño ===================== */
:root{
  --bg:#f5f7fb; --bg-deg:linear-gradient(180deg,#f7f9fd 0%,#eef2f9 100%);
  --sup:#ffffff; --sup2:#f2f5fa; --txt:#111725; --txt2:#5c667a; --txt3:#8a94a6;
  --linea:#e4e9f2; --linea2:#d6dde9;
  --acc:#2563eb; --acc-sup:#e8efff; --acc2:#1d4ed8;
  --ok:#0e9f6e; --ok-sup:#e7f7f0; --mal:#dc2626; --mal-sup:#fdecec;
  --warn:#b45309; --warn-sup:#fdf3e3;
  --s1:0 1px 2px rgba(17,23,37,.05);
  --s2:0 2px 4px rgba(17,23,37,.05), 0 10px 24px -12px rgba(17,23,37,.18);
  --s3:0 8px 20px -8px rgba(17,23,37,.22), 0 24px 48px -24px rgba(17,23,37,.28);
  --r:16px; --r2:12px;
}
[data-tema="oscuro"]{
  --bg:#080b12; --bg-deg:linear-gradient(180deg,#0c1119 0%,#080b12 100%);
  --sup:#121826; --sup2:#182032; --txt:#e9edf6; --txt2:#9aa5ba; --txt3:#6c778c;
  --linea:#212a3d; --linea2:#2c374d;
  --acc:#5b9bff; --acc-sup:#132443; --acc2:#83b4ff;
  --ok:#34d399; --ok-sup:#0d2b22; --mal:#f87171; --mal-sup:#2e1417;
  --warn:#fbbf24; --warn-sup:#2c2110;
  --s1:0 1px 2px rgba(0,0,0,.5);
  --s2:0 2px 6px rgba(0,0,0,.45), 0 12px 28px -14px rgba(0,0,0,.7);
  --s3:0 10px 30px -10px rgba(0,0,0,.7), 0 30px 60px -30px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--bg); background-image:var(--bg-deg);
  background-attachment:fixed; color:var(--txt);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
a{color:var(--acc)}
::selection{background:var(--acc-sup); color:var(--txt)}

/* ===================== encabezado ===================== */
header.top{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--sup) 86%, transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea); padding:.55rem 1rem;
  display:flex; align-items:center; gap:.6rem;
}
.marca{display:flex; align-items:center; gap:.55rem; font-weight:750; letter-spacing:-.025em; font-size:1.02rem; color:inherit; text-decoration:none}
.marca .logo{
  width:2rem; height:2rem; display:grid; place-items:center; border-radius:9px;
  background:linear-gradient(140deg,var(--acc),#7c3aed); font-size:1.05rem; box-shadow:var(--s1);
}
.top .sep{flex:1}
.chip-perfil{
  display:flex; align-items:center; gap:.45rem; background:var(--sup2);
  border:1px solid var(--linea); border-radius:999px; padding:.32rem .75rem .32rem .5rem;
  font-size:.88rem; font-weight:600; transition:border-color .15s, transform .15s;
}
.chip-perfil:hover{border-color:var(--acc); transform:translateY(-1px)}
.icono-btn{
  background:var(--sup2); border:1px solid var(--linea); border-radius:10px;
  padding:.35rem .55rem; line-height:1; transition:border-color .15s, background .15s;
}
.icono-btn:hover{border-color:var(--acc)}

main{max-width:920px; margin:0 auto; padding:1.5rem 1rem 5rem; animation:entra .28s ease both}
@keyframes entra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ===================== tipografía ===================== */
h1{font-size:clamp(1.5rem,4vw,2rem); margin:.1rem 0 .4rem; letter-spacing:-.03em; font-weight:750; line-height:1.15}
h2{font-size:1.1rem; margin:2rem 0 .7rem; letter-spacing:-.02em; font-weight:700}
p.sub{color:var(--txt2); margin:.2rem 0 1.3rem; max-width:60ch}

/* ===================== superficies ===================== */
.tarjeta{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--s2)}
.grid{display:grid; gap:.8rem}
.grid.dos{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grid.tres{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* ===================== botones ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  background:var(--acc); color:#fff; border:1px solid transparent; border-radius:11px;
  padding:.68rem 1.15rem; font-weight:650; font-size:.95rem; text-decoration:none;
  box-shadow:0 1px 2px rgba(37,99,235,.25); transition:transform .12s, box-shadow .15s, background .15s;
}
.btn:hover{background:var(--acc2); transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(37,99,235,.6)}
.btn:active{transform:translateY(0)}
.btn.sec{background:var(--sup); color:var(--txt); border-color:var(--linea); box-shadow:var(--s1)}
.btn.sec:hover{border-color:var(--acc); color:var(--acc); background:var(--sup)}
.btn.peligro{background:transparent; color:var(--mal); border-color:var(--linea); box-shadow:none}
.btn.peligro:hover{border-color:var(--mal); background:var(--mal-sup)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.btn.ancho{width:100%}
.fila{display:flex; gap:.55rem; flex-wrap:wrap; align-items:center}
.volver{
  display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; padding:.2rem 0;
  color:var(--txt2); font-size:.9rem; font-weight:600; margin-bottom:.5rem;
}
.volver:hover{color:var(--acc)}

/* ===================== tarjetas de opción ===================== */
.opcion{
  position:relative; display:flex; gap:.85rem; align-items:flex-start; text-align:left; width:100%;
  background:var(--sup); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.05rem 1.1rem; box-shadow:var(--s2); overflow:hidden;
  transition:transform .15s, box-shadow .18s, border-color .15s;
}
.opcion::after{
  content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--c,var(--acc));
  opacity:0; transition:opacity .18s;
}
.opcion:hover{transform:translateY(-2px); box-shadow:var(--s3); border-color:var(--linea2)}
.opcion:hover::after{opacity:1}
.opcion .em{
  flex:none; width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:12px;
  font-size:1.35rem; background:color-mix(in srgb, var(--c,var(--acc)) 12%, transparent);
}
.opcion b{display:block; font-size:1.02rem; letter-spacing:-.01em; margin-bottom:.1rem}
.opcion span{color:var(--txt2); font-size:.88rem; display:block}
.opcion .pill{display:inline-block; width:auto; color:var(--txt2)}
.opcion .pill.acc{color:var(--acc)}
.pill{
  display:inline-block; font-size:.74rem; padding:.2rem .6rem; border-radius:999px; font-weight:600;
  background:var(--sup2); border:1px solid var(--linea); color:var(--txt2);
}
.pill.acc{background:var(--acc-sup); border-color:transparent; color:var(--acc)}

/* ===================== preguntas ===================== */
.pregunta{padding:1.15rem 1.2rem; animation:entra .22s ease both}
.pregunta .cab{display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.55rem}
.pregunta .enunciado{font-size:1.1rem; font-weight:650; letter-spacing:-.015em; margin:.35rem 0 1rem; line-height:1.4}
.figura{
  display:flex; justify-content:center; margin:.2rem 0 1rem; padding:.7rem;
  background:var(--sup2); border:1px solid var(--linea); border-radius:var(--r2);
}
.figura svg{max-width:100%; height:auto; border-radius:8px}
/* fotografías de apoyo de la pregunta */
.figura.foto{padding:.45rem}
.figura.foto img{
  max-width:100%; max-height:min(46vh,340px); width:auto; height:auto;
  display:block; border-radius:10px; box-shadow:var(--s2);
}

/* insignias de cada licencia */
.opcion .em.clase{width:3.5rem; height:3rem; padding:.28rem; border-radius:14px}
.em.clase .ico-clase{width:100%; height:100%; object-fit:contain; display:block}
.titulo-clase{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap}
.titulo-clase .ico-clase{
  width:3.6rem; height:3rem; object-fit:contain; flex:none;
  background:var(--sup2); border:1px solid var(--linea); border-radius:14px; padding:.3rem;
}
.alts{display:grid; gap:.5rem}
.alt{
  display:flex; gap:.7rem; align-items:flex-start; text-align:left; width:100%;
  background:var(--sup); border:1.5px solid var(--linea); border-radius:var(--r2); padding:.75rem .85rem;
  transition:border-color .14s, background .14s, transform .1s;
}
.alt:not([disabled]):hover{border-color:var(--acc); background:var(--acc-sup); transform:translateX(2px)}
.alt .letra{
  flex:none; width:1.65rem; height:1.65rem; border-radius:50%; background:var(--sup2);
  border:1px solid var(--linea); display:grid; place-items:center;
  font-size:.8rem; font-weight:700; color:var(--txt2);
}
.alt.sel{border-color:var(--acc); background:var(--acc-sup)}
.alt.sel .letra{background:var(--acc); color:#fff; border-color:transparent}
.alt.ok{border-color:var(--ok); background:var(--ok-sup)}
.alt.ok .letra{background:var(--ok); color:#fff; border-color:transparent}
.alt.mal{border-color:var(--mal); background:var(--mal-sup)}
.alt.mal .letra{background:var(--mal); color:#fff; border-color:transparent}
.alt[disabled]{cursor:default}
.explica{margin-top:.95rem; border-radius:var(--r2); padding:.85rem .95rem; font-size:.94rem; animation:entra .2s ease both}
.explica.ok{background:var(--ok-sup); border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.explica.mal{background:var(--mal-sup); border:1px solid color-mix(in srgb,var(--mal) 30%,transparent)}
.explica .tit{font-weight:700; margin-bottom:.3rem; letter-spacing:-.01em}
.explica .ref{display:block; margin-top:.55rem; color:var(--txt3); font-size:.79rem}

/* ===================== barra de examen ===================== */
.barra-examen{
  position:sticky; top:58px; z-index:20;
  background:color-mix(in srgb,var(--sup) 92%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--linea); border-radius:var(--r); padding:.55rem .75rem; margin-bottom:.9rem;
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; box-shadow:var(--s2);
}
.crono{font-variant-numeric:tabular-nums; font-weight:750; font-size:1.05rem; letter-spacing:-.02em}
.crono.alerta{color:var(--mal); animation:late 1s ease-in-out infinite}
@keyframes late{50%{opacity:.45}}
.progreso{flex:1; min-width:90px; height:7px; background:var(--sup2); border-radius:99px; overflow:hidden}
.progreso i{display:block; height:100%; background:linear-gradient(90deg,var(--acc),#7c3aed); border-radius:99px; transition:width .3s ease}
.navegador{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:1rem}
.navegador button{
  width:2.15rem; height:2.15rem; border-radius:9px; border:1px solid var(--linea);
  background:var(--sup); font-size:.8rem; font-weight:650; color:var(--txt2); transition:all .12s;
}
.navegador button:hover{border-color:var(--acc); color:var(--acc)}
.navegador button.resp{background:var(--acc); color:#fff; border-color:transparent}
.navegador button.marc{border-color:var(--warn); color:var(--warn)}
.navegador button.actual{outline:2px solid var(--txt); outline-offset:1px}

/* ===================== resultados ===================== */
.resultado{padding:1.6rem 1.2rem; text-align:center}
.resultado .anillo{display:block; margin:0 auto .4rem}
.resultado .anillo .fondo{stroke:var(--sup2)}
.resultado .anillo .valor{stroke:var(--ok); stroke-linecap:round; transition:stroke-dashoffset .9s ease}
.resultado.reprob .anillo .valor{stroke:var(--mal)}
.resultado .puntaje{font-size:2.1rem; font-weight:800; letter-spacing:-.04em; line-height:1}
.resultado .de{font-size:.85rem; color:var(--txt2); font-weight:600}
.resultado.aprob{border-color:color-mix(in srgb,var(--ok) 45%,var(--linea))}
.resultado.reprob{border-color:color-mix(in srgb,var(--mal) 40%,var(--linea))}
.badge{display:inline-block; padding:.3rem .85rem; border-radius:999px; font-weight:700; font-size:.82rem; letter-spacing:.02em}
.badge.ok{background:var(--ok-sup); color:var(--ok)}
.badge.mal{background:var(--mal-sup); color:var(--mal)}
.stat{padding:.95rem 1.05rem}
.stat b{display:block; font-size:1.55rem; letter-spacing:-.03em; font-weight:750; line-height:1.2}
.stat span{color:var(--txt2); font-size:.83rem}
.linea-cat{display:flex; align-items:center; gap:.7rem; padding:.42rem 0}
.linea-cat .nom{flex:none; width:min(40vw,180px); font-size:.88rem; font-weight:550}
.linea-cat .bar{flex:1; height:8px; background:var(--sup2); border-radius:99px; overflow:hidden}
.linea-cat .bar i{display:block; height:100%; background:var(--ok); border-radius:99px; transition:width .6s ease}
.linea-cat .bar i.bajo{background:var(--mal)}
.linea-cat .bar i.medio{background:var(--warn)}
.linea-cat .val{flex:none; width:5.5rem; text-align:right; font-size:.82rem; color:var(--txt2); font-variant-numeric:tabular-nums}
table.hist{width:100%; border-collapse:collapse; font-size:.89rem}
table.hist th,table.hist td{padding:.6rem .5rem; border-bottom:1px solid var(--linea); text-align:left}
table.hist tr:last-child td{border-bottom:0}
table.hist th{color:var(--txt3); font-weight:650; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em}

/* ===================== formularios ===================== */
label.campo{display:block; margin:.9rem 0 .35rem; font-weight:650; font-size:.86rem; color:var(--txt2)}
input[type=text],select{
  width:100%; padding:.7rem .85rem; border-radius:11px; border:1px solid var(--linea);
  background:var(--sup2); color:var(--txt); font:inherit; transition:border-color .15s, box-shadow .15s;
}
input[type=text]:focus,select:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent);
}
.emojis{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem}
.emojis button{
  font-size:1.25rem; padding:.35rem .5rem; border-radius:11px; border:1.5px solid var(--linea);
  background:var(--sup2); transition:all .12s;
}
.emojis button:hover{transform:translateY(-2px)}
.emojis button.sel{border-color:var(--acc); background:var(--acc-sup)}
.chks{display:grid; gap:.4rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.chks label{
  display:flex; gap:.5rem; align-items:center; background:var(--sup2); border:1px solid var(--linea);
  border-radius:10px; padding:.5rem .7rem; font-size:.88rem; cursor:pointer;
}
.chks label:hover{border-color:var(--acc)}
.aviso{
  background:var(--warn-sup); border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  border-radius:var(--r2); padding:.75rem .9rem; font-size:.88rem;
}
.pie{margin-top:2.5rem; color:var(--txt3); font-size:.79rem; text-align:center; line-height:1.7}
.vacio{color:var(--txt2); padding:1.4rem; text-align:center; font-size:.92rem}
details summary{cursor:pointer; color:var(--txt2); font-size:.9rem; font-weight:600}
details summary:hover{color:var(--acc)}

/* ===================== responsivo ===================== */
@media (max-width:560px){
  main{padding:1.1rem .85rem 4rem}
  .barra-examen{top:54px; gap:.5rem; padding:.5rem .6rem}
  .barra-examen .progreso{display:none}
  .barra-examen .btn{padding:.5rem .8rem}
  .barra-examen .pill{margin-left:auto}
  .navegador button{width:1.95rem; height:1.95rem}
  .pregunta{padding:1rem .9rem}
  .pregunta .enunciado{font-size:1.04rem}
  .marca span:last-child{display:none}
  .figura.foto img{max-height:38vh}
  .opcion .em.clase{width:3rem; height:2.6rem}
  .titulo-clase .ico-clase{width:3rem; height:2.6rem}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }
@media print{ header.top,.barra-examen,.btn,.navegador{display:none} }