/* Codificar en QualCoder 4 - game styles */

:root{
  --magenta:#D6006E;
  --papel:#EEF2F5;
  --alto:#FFFFFF;
  --tinta:#132339;
  --tinta-media:#54677E;
  --linea:#D6DFE7;
  --amarillo:#F2C744;
  --turquesa:#2FA8A0;
  --coral:#E4577C;
  --violeta:#7A5CD6;
  --verde:#5FA05A;
  --radio:6px;
  --sans:"Familjen Grotesk","Segoe UI",Roboto,system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:clamp(15px, 0.42vw + 13.8px, 18px)}
img{max-width:100%;height:auto}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:1.02rem;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--violeta);outline-offset:2px}

/* ---------- hud ---------- */

.hud{
  position:sticky;top:0;z-index:30;background:var(--tinta);color:#EAF1F5;
  display:flex;align-items:center;gap:clamp(8px, 1.4vw, 16px);padding:10px clamp(10px, 2vw, 20px);flex-wrap:wrap;
}
.hud-titulo{font-weight:700;font-size:.98rem;letter-spacing:-.01em;margin-right:4px}
.hud-medidor{flex:1 1 160px;min-width:0;max-width:340px}
.hud-linea{display:flex;justify-content:space-between;font-size:.78rem;color:#A9BECD}
.hud-barra{height:5px;background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden;margin-top:4px}
.hud-barra i{display:block;height:100%;width:0;background:var(--amarillo);transition:width .5s ease}
.hud-insignias{font-size:.85rem;color:var(--amarillo)}
.hud-pasos{display:flex;gap:6px}
.hud-pasos button{white-space:nowrap}
.hud-pasos button:disabled{opacity:.4;cursor:not-allowed}
.hud button{background:none;border:1px solid rgba(255,255,255,.2);color:inherit;padding:5px 11px;border-radius:var(--radio);font-size:.83rem}
.hud button:hover{background:rgba(255,255,255,.1)}

#app{max-width:820px;margin:0 auto;padding:clamp(18px, 3vw, 30px) clamp(12px, 2vw, 20px) 90px;min-width:0}
@media (max-width:640px){ #app{padding:22px 14px 70px} .hud{gap:10px;padding:9px 12px} .hud-titulo{width:100%} }

/* ---------- map ---------- */

.mapa-intro h1{font-size:clamp(1.6rem, 3.4vw, 2.2rem);letter-spacing:-.02em;margin:0 0 8px}
.mapa-intro p{color:var(--tinta-media);max-width:60ch;margin:0 0 26px}

.senda{list-style:none;margin:0;padding:0 0 0 26px;position:relative;counter-reset:m}
.senda::before{content:"";position:absolute;left:33px;top:14px;bottom:34px;width:3px;background:repeating-linear-gradient(var(--linea) 0 8px,transparent 8px 16px)}
.nodo{position:relative;margin:0 0 12px}
.nodo-btn{
  width:100%;display:flex;gap:16px;align-items:center;text-align:left;
  background:var(--alto);border:1px solid var(--linea);border-radius:var(--radio);
  padding:14px 16px;position:relative;transition:transform .12s ease,border-color .12s ease;
}
.nodo-btn:hover:not(:disabled){transform:translateX(3px);border-color:var(--turquesa)}
.nodo.en-marcha .disco{border-color:var(--amarillo);color:var(--tinta)}
.nodo-avance{font-size:.76rem;color:var(--turquesa);font-weight:600}
.disco{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;
  background:var(--papel);border:2px solid var(--linea);font-weight:700;font-size:1.05rem;
}
.nodo.listo .disco{background:var(--tinta);color:var(--amarillo);border-color:var(--tinta)}
.nodo:not(.listo) .disco{border-color:var(--turquesa);color:var(--turquesa)}
.nodo-texto{display:grid;gap:2px}
.nodo-texto strong{font-size:1.02rem;font-weight:600}
.nodo-lema{font-size:.86rem;color:var(--tinta-media);font-family:var(--serif);font-style:italic}

.estrellas{display:flex;gap:2px;font-size:.8rem;color:var(--linea)}
.estrellas .viva{color:var(--amarillo)}
.estrellas.grandes{font-size:2rem;justify-content:center;margin:6px 0 14px}

.nodo-final{margin-top:22px;border:1px dashed var(--linea);border-radius:var(--radio);padding:20px;text-align:center;background:var(--alto)}
.nodo-final h2{margin:0 0 6px;font-size:1.15rem}
.nodo-final p{margin:0 0 12px;color:var(--tinta-media);font-size:.92rem}
.nodo-final.listo{border-style:solid;border-color:var(--amarillo)}

/* ---------- briefing ---------- */

.briefing .paso{font-size:.84rem;color:var(--tinta-media);margin:0 0 6px}
.briefing h1{font-size:clamp(1.55rem, 3.2vw, 2.1rem);letter-spacing:-.02em;margin:0 0 4px;line-height:1.1}
.briefing .lema{font-family:var(--serif);font-style:italic;color:var(--tinta-media);margin:0 0 22px}
.lectura{font-family:var(--serif);font-size:clamp(1rem, 1.3vw, 1.08rem);line-height:1.68;max-width:64ch}
.lectura p{margin:0 0 14px}
.lectura code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:#E2E9ED;padding:1px 4px}

.video{margin:24px 0;max-width:64ch}
.video h2{font-size:.98rem;font-weight:600;margin:0 0 10px}
.video-marco{position:relative;padding-top:56.25%;background:#0E1A2B;border-radius:var(--radio);overflow:hidden}
.video-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-vacio{border:1px dashed var(--linea);background:var(--alto);padding:20px;text-align:center;color:var(--tinta-media);font-size:.88rem;border-radius:var(--radio)}

/* ---------- mission bar ---------- */

.barra-mision{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cuenta-mision{font-size:.82rem;color:var(--tinta-media);font-variant-numeric:tabular-nums;min-width:44px}
.puntos-mision{display:flex;gap:6px;flex:1}
.punto{height:6px;flex:1;background:var(--linea);border-radius:99px}
.punto.hecho{background:var(--turquesa)}
.punto.ahora{background:var(--tinta)}
.punto.saltado{background:var(--amarillo)}
.racha{font-size:.84rem;color:var(--amarillo);font-weight:600;min-width:74px;text-align:right}

.mision.golpe{animation:none}
@keyframes sacudir{
  25%{transform:translateX(-6px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)}
}
@media (prefers-reduced-motion:reduce){ .mision.golpe{animation:none} }

/* ---------- exercise card ---------- */

.ejercicio{
  background:var(--alto);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(14px, 2.4vw, 24px);min-width:0;width:100%;box-sizing:border-box;
}
.ejercicio-cabeza{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-bottom:10px}
.ejercicio-tipo{font-size:.8rem;color:var(--tinta-media);display:flex;gap:8px;align-items:baseline}
.ejercicio-num{color:var(--tinta);font-variant-numeric:tabular-nums}
.ejercicio-xp{font-size:.8rem;font-weight:700;color:var(--turquesa)}
.ejercicio-titulo{margin:0 0 6px;font-size:clamp(1.05rem, 1.6vw, 1.2rem);letter-spacing:-.01em;line-height:1.25}
.enunciado{margin:0 0 16px;font-size:1.02rem;line-height:1.45;max-width:70ch}

.opciones{display:grid;gap:8px;max-width:70ch}
.opcion{text-align:left;background:var(--papel);border:1px solid var(--linea);padding:11px 14px;border-radius:var(--radio);line-height:1.35;font-size:.97rem}
.opcion:hover:not(:disabled){border-color:var(--turquesa)}
.opcion.bien{border-color:var(--verde);background:#EDF6EC}
.opcion.tibio{border-color:#C8D3DC;background:#F1F5F7;color:var(--tinta-media)}
.opcion:disabled{cursor:default}

.dice{margin-top:12px;max-width:70ch;font-size:.94rem;line-height:1.45;padding:11px 14px;border-radius:var(--radio);background:#E7F0F1}
.dice.mal{background:#FBF3E4}
.dice.bien{background:#EDF6EC}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:var(--papel);border:1px solid var(--linea);padding:9px 12px;border-radius:var(--radio);
  font-size:.93rem;line-height:1.35;
}
.columna-parejas .chip{
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;width:100%;
}
.chip:hover:not(:disabled){border-color:var(--turquesa)}
.chip.puesto{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.chip.elegido{border-color:var(--violeta);box-shadow:inset 0 0 0 1px var(--violeta)}
.chip.error{border-color:var(--coral);background:#FCEFF3}
.chip:disabled{cursor:default;opacity:.6}

.parejas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
@media (max-width:600px){.parejas{grid-template-columns:1fr}}

.columna-parejas{display:grid;gap:8px;align-content:start;min-width:0}

.secuencia-hechos{list-style:none;padding:0;margin:0 0 14px;counter-reset:p}
.secuencia-hechos li{counter-increment:p;padding:7px 0 7px 30px;position:relative;font-size:.95rem;border-bottom:1px solid var(--linea)}
.secuencia-hechos li::before{content:counter(p);position:absolute;left:0;top:7px;font-size:.8rem;color:var(--tinta-media)}

.transcripcion{font-family:var(--serif);font-size:1.04rem;line-height:1.85;border-left:2px solid var(--linea);padding-left:16px;margin:0 0 16px}
.seg{cursor:pointer;padding:2px 1px;border-bottom:1px dotted #BDCAD5}
.seg:hover{background:#E4EBF0}
.seg.sel{background:#D8E3EA;border-bottom-color:var(--tinta)}
.seg.pintado{border-bottom:0}
.seg.bloqueado{cursor:default}

.paleta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.codigo-btn{border:1px solid var(--linea);background:var(--papel);padding:7px 12px;border-radius:var(--radio);font-size:.92rem;display:flex;align-items:center;gap:8px}
.codigo-btn .punto{width:11px;height:11px;flex:none;border-radius:2px;display:inline-block}
.codigo-btn:hover:not(:disabled){border-color:var(--tinta)}
.codigo-btn:disabled{opacity:.5;cursor:default}

.pista{background:none;border:0;padding:0;font-size:.85rem;color:var(--tinta-media);text-decoration:underline}
.pista-texto{font-size:.9rem;color:var(--tinta-media);margin-top:8px}

.tablero{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:12px;margin-top:14px}

.categoria{border:1px solid var(--linea);background:var(--papel);padding:12px;border-radius:var(--radio);min-height:92px;cursor:pointer}
.categoria h3{font-size:.9rem;margin:0 0 8px;font-weight:600}
.categoria.destino{border-color:var(--violeta);border-style:dashed}
.categoria.mal{border-color:var(--coral);background:#FCEFF3}
.categoria ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.categoria li{font-size:.86rem;background:var(--alto);border:1px solid var(--linea);padding:5px 8px;border-radius:4px}

.abierta textarea{width:100%;max-width:70ch;min-height:130px;font-family:var(--serif);font-size:1rem;line-height:1.55;padding:12px 14px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--papel);color:var(--tinta);resize:vertical}
.guia{margin:0 0 12px;padding-left:18px;font-size:.92rem;color:var(--tinta-media)}
.modelo{margin-top:14px;font-family:var(--serif);font-size:.98rem;line-height:1.6;background:#E7F0F1;padding:14px 16px;border-radius:var(--radio)}
.modelo h4{font-family:var(--sans);font-size:.84rem;margin:0 0 8px;font-weight:600;color:var(--tinta-media)}

/* ---------- simulated QualCoder 4 window ---------- */

.qc{
  border:1px solid #9FB0BE;border-radius:5px;background:#F7F9FA;max-width:960px;
  box-shadow:0 10px 26px rgba(19,35,57,.14);position:relative;margin-bottom:12px;
}
.qc-listo{border-color:var(--verde);box-shadow:0 0 0 2px rgba(95,160,90,.28)}
.qc-titulo{background:#E3E9EE;border-radius:4px 4px 0 0;padding:6px 10px;font-size:.82rem;display:flex;align-items:center;gap:9px;border-bottom:1px solid #C0CCD6}
.qc-logo{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto}
.qc-logo svg{display:block}
.qc-nombre{flex:1}
.qc-controles{color:#8A9AA8;letter-spacing:3px;font-size:.72rem}

.qc-menu{display:flex;background:#F1F5F7;border-bottom:1px solid #D4DDE4;position:relative;flex-wrap:wrap}
.qc-menu-btn{background:none;border:0;padding:6px 12px;font-size:.87rem}
.qc-menu-btn:hover,.qc-menu-btn.abierto{background:#2B6CB0;color:#fff}
.qc-desplegable{
  position:absolute;z-index:14;background:#fff;border:1px solid #9FB0BE;
  box-shadow:0 8px 22px rgba(19,35,57,.22);min-width:min(290px, 88vw);max-width:96%;display:flex;flex-direction:column;
  padding:3px 0;max-height:60vh;overflow-y:auto;
}
.qc-desplegable:empty{display:none}
.qc-item{background:none;border:0;text-align:left;padding:6px 14px;font-size:.85rem;display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.qc-item:hover{background:#DCEAF6}
.qc-tecla{font-size:.72rem;color:var(--tinta-media);white-space:nowrap}
.qc-sub{font-size:.85rem}

.qc-pestanas-principales{display:flex;gap:3px;padding:6px 8px 0;background:#F7F9FA;border-bottom:1px solid #D4DDE4;overflow-x:auto}
.qc-pestana-p{
  background:#E7EDF1;border:1px solid #D4DDE4;border-bottom:0;border-radius:4px 4px 0 0;
  padding:6px 12px;font-size:.8rem;color:var(--tinta-media);white-space:nowrap;
}
.qc-pestana-p:hover{background:#DCEAF6}
.qc-pestana-p.activa{background:#fff;color:var(--tinta);font-weight:600}

.qc-cuerpo{display:grid;grid-template-columns:clamp(160px, 24%, 215px) minmax(0, 1fr);min-height:240px;background:#fff}
@media (max-width:620px){.qc-cuerpo{grid-template-columns:1fr}}
.qc-lateral{border-right:1px solid #DCE4EA;background:#FBFCFD;display:grid;align-content:start;gap:8px;padding:8px}
.qc-subpestanas{display:flex;gap:3px}
.qc-subpestana{font-size:.74rem;padding:4px 8px;border:1px solid #D4DDE4;border-bottom:0;border-radius:4px 4px 0 0;background:#EDF2F5;color:var(--tinta-media)}
.qc-subpestana.activa{background:#fff;color:var(--tinta)}
.qc-lista-docs{list-style:none;margin:0;padding:4px;border:1px solid #D4DDE4;background:#fff;font-size:.79rem;display:grid;gap:1px;max-height:104px;overflow:auto}
.qc-lista-docs li{padding:3px 5px;border-radius:2px}
.qc-lista-docs li.activo{background:#2B6CB0;color:#fff}
.qc-arbol-caja{border:1px solid #D4DDE4;background:#fff}
.qc-cabecera-col{font-size:.74rem;color:var(--tinta-media);padding:4px 7px;border-bottom:1px solid #D4DDE4;background:#EDF2F5}
.qc-arbol{list-style:none;margin:0;padding:4px;display:grid;gap:2px}
.qc-arbol{padding:4px}
.qc-rama{display:block}
.qc-rama-hija{padding-left:16px;margin-top:2px}
.qc-codigo{
  width:100%;display:block;border:1px solid transparent;padding:4px 7px;border-radius:2px;
  font-size:.82rem;text-align:left;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.qc-codigo:hover{filter:brightness(1.08);border-color:#2B6CB0}
.qc-codigo.elegido{box-shadow:0 0 0 2px #2B6CB0;border-color:#2B6CB0}
.qc-codigo.abierto{border-color:#2B6CB0}
.qc-categoria{border-color:#C0CCD6;font-weight:600}
.qc-codigo.recien{box-shadow:0 0 0 2px var(--turquesa)}

.qc-doc{display:grid;align-content:start}
.qc-doc-cabeza{
  font-size:.76rem;color:var(--tinta-media);padding:6px 12px;border-bottom:1px solid #DCE4EA;
  background:#F7F9FA;display:flex;align-items:center;gap:12px;
}
.qc-doc-nombre{font-weight:600;color:var(--tinta)}
.qc-texto{padding:12px 16px;font-family:var(--serif);font-size:.98rem;line-height:1.7}
.qc-texto p{margin:0 0 8px}

.qc-herramientas{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border-bottom:1px solid #DCE4EA;background:#F1F5F7}
.qc-herramientas-pie{border-bottom:0;border-top:1px solid #DCE4EA}
.qc-coder{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--tinta-media);margin-right:4px}
.qc-coder-campo{background:#fff;border:1px solid #C0CCD6;padding:3px 10px;border-radius:3px;color:var(--tinta)}
.qc-herramienta{display:flex;gap:6px;align-items:baseline;background:#fff;border:1px solid #C0CCD6;border-radius:3px;padding:5px 10px;font-size:.81rem}
.qc-herramienta:hover:not(:disabled){border-color:#2B6CB0;background:#DCEAF6}
.qc-herramienta:disabled{opacity:.45;cursor:default}

.qc-lineas{display:grid;grid-template-columns:26px clamp(70px, 18%, 150px) minmax(0, 1fr);gap:6px clamp(6px, 1vw, 10px);padding:clamp(10px, 1.6vw, 16px);align-items:start}
@media (max-width:620px){.qc-lineas{grid-template-columns:20px 10px minmax(0,1fr)}.qc-etiqueta-margen{display:none}}
.qc-num{font-size:.72rem;color:#9DAEBB;text-align:right;font-variant-numeric:tabular-nums;padding-top:5px}
.qc-margen{
  min-height:24px;display:flex;align-items:flex-start;justify-content:flex-end;gap:6px;
  font-size:.7rem;padding-top:2px;
}
.qc-franja{flex:0 0 4px;width:4px;align-self:stretch;min-height:20px;border-radius:2px}
.qc-margen.con-codigo{background:none}
.qc-etiqueta-margen{
  display:inline-block;line-height:1.25;padding:2px 0;font-weight:600;text-align:right;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;
}
.qc-frase{font-family:var(--serif);font-size:clamp(.95rem, 1.2vw, 1.02rem);line-height:1.6;cursor:pointer;padding:3px 5px;border-radius:3px;display:block}
.qc-frase:hover{background:#EDF2F5}
.qc-frase.sel{background:#CFE0EC;outline:1px solid #2B6CB0}
.qc-frase.codificado{cursor:default}
.qc-frase.anotado{font-weight:700;cursor:default}

.qc-bienvenida{padding:18px 20px;font-size:.9rem;color:var(--tinta-media);grid-column:1 / -1}
.qc-bienvenida h4{margin:0 0 6px;font-size:.8rem;color:var(--tinta);font-weight:600}
.qc-bienvenida p{margin:0;max-width:60ch;line-height:1.5}
.qc-estado{background:#E4EBF0;border-radius:0 0 4px 4px;border-top:1px solid #C0CCD6;padding:6px 12px;font-size:.78rem;color:var(--tinta-media)}
.nota-simulador{font-size:.82rem;color:var(--tinta-media);margin:0 0 6px}

.dialogo .qc-formulario{padding:16px 18px;display:grid;gap:13px;background:#fff}
.campo{display:grid;gap:5px;font-size:.88rem}
.campo-etiqueta{color:var(--tinta-media)}
.campo input[type=text],.campo select{
  font-family:inherit;font-size:.93rem;padding:7px 10px;border:1px solid #C0CCD6;border-radius:3px;background:#fff;color:var(--tinta);
}
.campo-casilla{grid-template-columns:1fr auto;align-items:center}
.campo-casilla input{width:18px;height:18px;accent-color:var(--turquesa)}
.qc-botones{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;background:#F1F5F7;border-top:1px solid #C0CCD6}
.qc-boton{background:#fff;border:1px solid #C0CCD6;padding:7px 15px;border-radius:3px;font-size:.88rem}
.qc-boton.primario{background:#2B6CB0;color:#fff;border-color:#2B6CB0;font-weight:600}
.qc-boton:disabled{opacity:.5;cursor:default}

/* ---------- results ---------- */

.pie-ejercicio{margin-top:18px}
.salidas{display:flex;gap:14px;margin-top:16px;padding-top:12px;border-top:1px solid var(--linea)}
.salida{background:none;border:0;padding:0;font-size:.85rem;color:var(--tinta-media);text-decoration:underline}
.salida:hover{color:var(--tinta)}
.resuelto-marca{margin-bottom:14px}
.accion{background:var(--tinta);color:#fff;border:1px solid var(--tinta);padding:11px 20px;border-radius:var(--radio);font-weight:600;font-size:.96rem}
.accion:hover{background:#0B1727}
.accion.fantasma{background:none;color:var(--tinta);border-color:var(--linea);font-weight:500}
.accion.fantasma:hover{background:var(--alto);border-color:var(--tinta)}
.fila-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.resultados{background:var(--alto);border:1px solid var(--linea);border-radius:var(--radio);padding:30px;text-align:center}
.resultados h1{margin:0 0 4px;font-size:clamp(1.45rem, 3vw, 1.9rem);letter-spacing:-.02em}
.resultados p{color:var(--tinta-media);max-width:52ch;margin:8px auto}
.resultados .fila-acciones{justify-content:center}
.resultados.fallo{border-color:var(--coral)}
.marcador{list-style:none;padding:0;margin:0 auto;max-width:min(340px, 100%);text-align:left}
.marcador li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--linea);font-size:.93rem}
.insignia-ganada{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:18px;font-weight:600}
.insignia-ganada .disco{background:var(--tinta);color:var(--amarillo);border-color:var(--tinta)}

/* ---------- notices ---------- */

.aviso{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--tinta);color:#fff;padding:12px 20px;border-radius:var(--radio);
  font-size:.93rem;box-shadow:0 6px 24px rgba(19,35,57,.24);z-index:40;max-width:88vw;text-align:center;
}
.aviso.malo{background:var(--coral)}
.aviso.bueno{background:var(--verde)}
.aviso b{color:var(--amarillo)}


/* ---------- menu explorer ---------- */

.explorador{display:grid;gap:12px}
.ficha{
  border:1px solid var(--linea);background:var(--papel);border-radius:var(--radio);
  padding:14px 16px;font-size:.9rem;min-height:120px;
}
.ficha-tip{display:grid;gap:2px}
.ficha-cuenta{margin:0 0 10px;font-size:.78rem;color:var(--turquesa);font-weight:600}
.ficha-cabeza{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ficha-ruta{font-size:.76rem;color:var(--tinta-media)}
.ficha-tecla{font-size:.72rem;color:var(--tinta-media);background:var(--alto);border:1px solid var(--linea);padding:1px 6px;border-radius:3px}
.ficha h4{margin:4px 0 2px;font-size:1rem;line-height:1.2}
.ficha-en{margin:0 0 8px;font-size:.76rem;color:var(--tinta-media);font-style:italic}
.ficha-que{margin:0;line-height:1.45;font-size:.88rem}
.ficha-tip{margin-top:12px;border-top:1px solid var(--linea);padding-top:10px}
.ficha-tip h5{margin:0 0 5px;font-size:.74rem;color:var(--tinta-media);font-weight:600}
.ficha-tip p{margin:0;font-family:var(--serif);font-size:.9rem;line-height:1.5}
.ficha-vacia{margin:0;color:var(--tinta-media);font-size:.86rem;line-height:1.45}

/* ---------- media gallery ---------- */

.medios{margin:22px 0 26px}
.medios h2{font-size:.98rem;font-weight:600;margin:0 0 12px}
.medios-rejilla{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:14px}

.medio{margin:0;display:grid;gap:6px}
.medio-video{grid-column:1 / -1}
.medio img{
  width:100%;max-width:560px;border:1px solid var(--linea);border-radius:var(--radio);
  display:block;background:var(--alto);
}
.medios-rejilla .medio img{max-width:100%}
.medio figcaption{font-size:.82rem;color:var(--tinta-media);line-height:1.35}
.medio-vacio{
  border:1px dashed var(--linea);background:var(--alto);border-radius:var(--radio);
  padding:18px;display:grid;gap:6px;align-content:center;min-height:118px;text-align:center;
  max-width:560px;
}
.medios-rejilla .medio-vacio{max-width:100%}
.medio-video .medio-vacio{min-height:150px}
.medio-marca{font-size:.72rem;color:var(--turquesa);font-weight:600}
.medio-sugerido{margin:0;font-size:.9rem;line-height:1.35}
.medio-como{margin:0;font-size:.78rem;color:var(--tinta-media);line-height:1.35}

/* ---------- definitions and references ---------- */

.definiciones{margin:24px 0 4px;max-width:64ch}
.definiciones h2{font-size:.98rem;font-weight:600;margin:0 0 10px}
.definiciones-lista{margin:0;border-top:1px solid var(--linea)}
.definiciones-lista dt{
  font-weight:600;font-size:.95rem;padding:12px 0 2px;
}
.definiciones-lista dd{
  margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--linea);
  font-family:var(--serif);font-size:1rem;line-height:1.6;
}
.definicion-texto{display:inline}
.cita{
  background:none;border:0;padding:0 0 0 6px;font-family:var(--sans);font-size:.8rem;
  color:var(--turquesa);text-decoration:underline;white-space:nowrap;
}
.cita:hover{color:var(--tinta)}

.referencias h1{font-size:2rem;letter-spacing:-.02em;margin:0 0 8px}
.referencias > p{color:var(--tinta-media);max-width:60ch}
.referencias h2{font-size:.95rem;font-weight:600;margin:26px 0 10px}
.lista-referencias{list-style:none;margin:0;padding:0;max-width:66ch}
.lista-referencias li{
  font-family:var(--serif);font-size:.98rem;line-height:1.5;
  padding:10px 0 10px 22px;text-indent:-22px;border-bottom:1px solid var(--linea);
}

/* ---------- certificate ---------- */

.constancia{display:grid;gap:16px}
.constancia-marco{
  background:#fff;padding:clamp(24px, 4vw, 46px) clamp(20px, 4.5vw, 52px) clamp(20px, 3vw, 34px);border:1px solid var(--tinta);
  box-shadow:0 0 0 6px #fff, 0 0 0 7px var(--linea);
}
@media (max-width:640px){.constancia-marco{padding:30px 24px 24px}}
.constancia-emblema{
  display:block;width:100%;max-width:min(400px, 100%);margin:0 auto 22px;height:auto;
}
.constancia-cabeza{text-align:center;border-bottom:1px solid var(--linea);padding-bottom:20px;margin-bottom:24px}
.constancia-tipo{
  margin:0 0 12px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-media);
}
.constancia-cabeza h1{font-family:var(--serif);font-size:clamp(1.5rem, 3.6vw, 2.05rem);line-height:1.15;margin:0 0 8px;font-weight:600}
.constancia-sub{margin:0;font-size:.88rem;color:var(--tinta-media)}
.constancia-formula{text-align:center;margin:0;font-family:var(--serif);font-style:italic;color:var(--tinta-media)}
.constancia-nombre{
  display:block;width:100%;margin:6px 0 18px;padding:8px 10px 12px;
  font-family:var(--serif);font-size:clamp(1.25rem, 3.2vw, 1.85rem);text-align:center;color:var(--tinta);
  background:none;border:0;border-bottom:1px solid var(--tinta);
}
.constancia-nombre::placeholder{color:#B4C1CC;font-size:1.1rem}
.constancia-cuerpo{
  margin:0 auto 26px;max-width:56ch;text-align:center;font-family:var(--serif);
  font-size:1.05rem;line-height:1.65;
}
.constancia-datos{
  list-style:none;margin:0 0 28px;padding:18px 0;display:grid;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));gap:14px;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}

.constancia-datos li{display:grid;gap:3px;text-align:center}
.dato-etiqueta{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-media)}
.dato-valor{font-size:1.02rem;font-weight:600}
.constancia-pie{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.constancia-pie div{display:grid;gap:2px}
.pie-etiqueta{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-media)}
.pie-valor{font-size:.92rem}
.pie-folio{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em}
.constancia-nota{
  margin:22px 0 0;font-size:.76rem;line-height:1.45;color:var(--tinta-media);
  border-top:1px solid var(--linea);padding-top:12px;
}

@media print{
  @page{size:letter portrait;margin:12mm}
  .hud,.fila-acciones,.aviso,.salidas{display:none !important}
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #app{padding:0;max-width:none}

  /* la constancia sale al 70 por ciento, así entra completa en una hoja carta */
  .constancia{display:block}
  .constancia-marco{
    zoom:.7;border-width:2px;box-shadow:none;padding:34px 40px;
    break-inside:avoid;page-break-inside:avoid;
  }
  .constancia-emblema{max-width:400px;margin-bottom:18px}
  .constancia-nombre{border-bottom-color:#000}
  .firma-qr{width:110px;height:110px}
}

/* respaldo para navegadores sin zoom, con la misma reducción */
@supports not (zoom: 1){
  @media print{
    .constancia-marco{
      zoom:normal;transform:scale(.7);transform-origin:top center;width:142.8%;margin-left:-21.4%;
    }
  }
}

/* ---------- quiz review ---------- */

.repaso{margin-top:16px;border-top:1px solid var(--linea);padding-top:14px}
.repaso h4{margin:0 0 10px;font-size:.82rem;font-weight:600;color:var(--tinta-media)}
.repaso ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.repaso li{font-size:.9rem;line-height:1.45;padding-left:14px;border-left:2px solid var(--linea);max-width:70ch}
.repaso li.buena{border-left-color:var(--verde)}
.repaso li b{font-weight:600}
.repaso li span{color:var(--tinta-media)}
.repaso-consejo{margin-top:14px;background:#EEF4F5;border-radius:var(--radio);padding:12px 14px;max-width:70ch}
.repaso-consejo h5{margin:0 0 5px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--turquesa)}
.repaso-consejo p{margin:0;font-family:var(--serif);font-size:.95rem;line-height:1.5}

/* ---------- step by step reminder ---------- */

.instructivo{margin:2px 0 8px}
.instructivo-btn{
  background:none;border:0;padding:0;font-size:.85rem;color:var(--turquesa);text-decoration:underline;
}
.instructivo-btn:hover{color:var(--tinta)}
.instructivo-lista{
  margin:10px 0 0;padding:12px 16px 12px 32px;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);display:grid;gap:6px;
}
.instructivo-lista li{font-size:.9rem;line-height:1.4}

.medio-suelto{margin-top:12px;max-width:560px}
.ficha .medio-suelto .medio-vacio{min-height:78px;padding:12px}
.explorador .accion{justify-self:start}
.ficha-cuenta{margin:0 0 10px;font-size:.78rem;color:var(--tinta-media);font-weight:600}

/* ---------- image lightbox ---------- */

.ampliable{cursor:zoom-in}
.ampliable:hover{border-color:var(--turquesa)}
.lupa{
  position:fixed;inset:0;z-index:60;background:rgba(11,23,39,.86);
  display:flex;align-items:center;justify-content:center;padding:34px 24px;
}
.lupa-marco{margin:0;max-width:1100px;width:100%;display:grid;gap:10px;justify-items:center}
.lupa-marco img{
  max-width:100%;max-height:78vh;object-fit:contain;background:#fff;
  border-radius:var(--radio);box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.lupa-marco figcaption{color:#DCE7EE;font-size:.88rem;text-align:center;max-width:70ch;line-height:1.4}
.lupa-cerrar{
  position:absolute;top:16px;right:18px;background:none;border:1px solid rgba(255,255,255,.35);
  color:#fff;width:38px;height:38px;border-radius:50%;font-size:1rem;line-height:1;
}
.lupa-cerrar:hover{background:rgba(255,255,255,.14)}
@media print{ .lupa{display:none} }

/* ---------- reference card ---------- */

.capa-ref{padding:24px}
.tarjeta-ref{
  background:var(--alto);border-radius:var(--radio);padding:26px 28px 20px;
  max-width:560px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.tarjeta-tipo{
  margin:0 0 10px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-media);
}
.tarjeta-ref-texto{
  margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.55;
  padding-left:22px;text-indent:-22px;
}
.tarjeta-cita{margin:12px 0 0;font-size:.86rem;color:var(--tinta-media)}
.tarjeta-pie{
  margin-top:18px;padding-top:12px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between;
}
.tarjeta-enlace{background:none;border:0;padding:0;font-size:.88rem;color:var(--turquesa);text-decoration:underline}
.tarjeta-enlace:hover{color:var(--tinta)}
.tarjeta-nota{font-size:.76rem;color:var(--tinta-media)}

/* ---------- layout with side navigation ---------- */

.lienzo{
  display:grid;grid-template-columns:clamp(210px, 20vw, 268px) minmax(0, 1fr);
  gap:clamp(14px, 2vw, 26px);
  width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(12px, 2vw, 20px);align-items:start;
}
.lienzo #app{padding:clamp(18px, 3vw, 30px) 0 90px;max-width:none;min-width:0}
@media (max-width:1040px){
  .lienzo{grid-template-columns:1fr;gap:0;padding:0 clamp(10px, 3vw, 16px)}
  .lienzo #app{padding:16px 0 70px}
}

.rail-nav{
  position:sticky;top:74px;margin-top:30px;background:var(--alto);border:1px solid var(--linea);
  border-radius:var(--radio);padding:14px 14px 12px;max-height:calc(100vh - 100px);overflow-y:auto;
}
.rail-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.rail-cabeza h2{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-media);margin:0;font-weight:600}
.rail-plegar{display:none;background:none;border:1px solid var(--linea);border-radius:var(--radio);padding:4px 10px;font-size:.8rem}

.rail-misiones{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rail-mision-btn{
  width:100%;display:flex;align-items:center;gap:8px;text-align:left;background:none;border:0;
  padding:6px 6px;border-radius:var(--radio);font-size:.86rem;line-height:1.25;
}
.rail-mision-btn:hover{background:var(--papel)}
.rail-num{
  font-variant-numeric:tabular-nums;font-size:.74rem;color:var(--tinta-media);
  min-width:18px;text-align:right;
}
.rail-titulo{flex:1}
.rail-mision.activa > .rail-mision-btn{background:#E7F2F1;font-weight:600;box-shadow:inset 2px 0 0 var(--turquesa)}
.rail-mision.listo .rail-titulo{color:var(--tinta-media)}

.estrellas.mini{font-size:.6rem;gap:1px}

.rail-actividades{list-style:none;margin:2px 0 8px;padding:0 0 0 12px;display:grid;gap:1px;border-left:1px solid var(--linea)}
.rail-act-btn{
  width:100%;display:flex;align-items:center;gap:7px;text-align:left;background:none;border:0;
  padding:5px 6px;border-radius:var(--radio);font-size:.79rem;color:var(--tinta-media);
}
.rail-act-btn:hover{background:var(--papel);color:var(--tinta)}
.rail-act-num{font-variant-numeric:tabular-nums;min-width:26px}
.rail-act-texto{flex:1;display:grid;gap:1px;line-height:1.2}
.rail-act-titulo{font-size:.8rem;color:var(--tinta)}
.rail-act.aqui .rail-act-titulo{color:#fff}
.rail-act-tipo{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.rail-act.aqui .rail-act-btn{background:var(--tinta);color:#fff}
.rail-act.aqui .estrella{color:rgba(255,255,255,.35)}
.rail-act.aqui .estrella.viva{color:var(--amarillo)}
.rail-act.saltada .rail-act-num{color:var(--amarillo)}

.rail-pie{margin-top:12px;padding-top:10px;border-top:1px solid var(--linea);display:grid;gap:4px}
.rail-enlace{background:none;border:0;padding:0;text-align:left;font-size:.82rem;color:var(--turquesa);text-decoration:underline}
.rail-enlace:hover{color:var(--tinta)}

@media (max-width:1040px){
  .rail-nav{position:static;max-height:none;margin:12px 0 0;order:-1}
  .rail-plegar{display:inline-block}
  .rail-nav .rail-misiones,.rail-nav .rail-pie{display:none}
  .rail-nav.abierto .rail-misiones{display:grid}
  .rail-nav.abierto .rail-pie{display:grid}
}
@media print{ .rail-nav{display:none} .lienzo{display:block} }

/* ---------- guided instructions ---------- */

.guia{display:grid;gap:18px}
.guia-bloque{border-left:2px solid var(--linea);padding-left:16px}
.guia-bloque h4{margin:0 0 6px;font-size:1rem}
.guia-texto{margin:0 0 10px;font-family:var(--serif);font-size:1rem;line-height:1.55;max-width:70ch}
.guia-pasos{margin:0;padding-left:20px;display:grid;gap:5px}
.guia-pasos li{font-size:.92rem;line-height:1.45;max-width:70ch}
.guia .medio{margin-top:12px}
.guia-camino{
  margin:12px 0 0;padding:10px 14px;background:var(--papel);border-radius:var(--radio);
  border:1px solid var(--linea);
}
.guia-camino h5{
  margin:0 0 4px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--turquesa);font-weight:600;
}
.guia-camino-texto{margin:0 0 8px;font-size:.9rem;line-height:1.45;color:var(--tinta-media);max-width:70ch}
.guia-camino .guia-pasos{margin:0}

/* ---------- certificate signature and citation ---------- */

.constancia-firma{margin:26px auto 0;display:grid;gap:2px;justify-items:center;max-width:min(340px, 100%);text-align:center}
.firma-qr{width:96px;height:96px;display:block;margin:0 auto 8px}
.firma-linea{display:block;width:100%;border-top:1px solid var(--tinta);margin-bottom:6px}
.firma-nota{font-size:.72rem;color:var(--tinta-media);margin-top:4px}
.firma-nombre{font-family:var(--serif);font-size:1.05rem}
.firma-cargo{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-media)}
.constancia-cita{margin-top:24px;border-top:1px solid var(--linea);padding-top:12px}
.constancia-cita h4{margin:0 0 5px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-media)}
.constancia-cita p{margin:0;font-family:var(--serif);font-size:.86rem;line-height:1.45;padding-left:20px;text-indent:-20px;text-align:left}

/* ---------- context menu opened as a card ---------- */

.capa-menu{padding:24px}
.menu-flotante{
  background:#fff;border-radius:var(--radio);max-width:min(420px, 92vw);width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden;
}
.menu-flotante-cabeza{padding:16px 20px 12px;border-bottom:1px solid var(--linea);background:var(--papel)}
.menu-flotante-cabeza h4{margin:0 0 4px;font-size:.98rem}
.menu-flotante-cabeza p{margin:0;font-size:.8rem;color:var(--tinta-media);line-height:1.4}
.menu-flotante-lista{display:flex;flex-direction:column;padding:6px 0}
.menu-flotante-lista .qc-item{padding:9px 20px;font-size:.9rem}

.qc-arbol-vacio{
  margin:0;padding:14px 10px;font-size:.8rem;color:var(--tinta-media);text-align:center;
  border:1px dashed #C0CCD6;border-radius:3px;cursor:context-menu;background:#FBFCFD;
}
.qc-arbol-vacio:hover{border-color:#2B6CB0;color:var(--tinta)}
.campo-fijo{opacity:.75}
.campo-fijo .campo-etiqueta::after{content:" (ya configurado)";font-size:.76rem;opacity:.7}

.constancia-aviso{margin:0;font-size:.8rem;color:var(--tinta-media);text-align:center}
@media print{ .constancia-aviso{display:none} }

.menu-atras{color:var(--tinta-media);border-bottom:1px solid var(--linea)}
.qc-frase.sel{background:#CFE0EC;outline:1px solid #2B6CB0;cursor:context-menu}

/* ---------- fluid safety net ---------- */

#app, .mision, .ejercicio, .cuerpo-ejercicio, .qc, .qc-doc, .briefing{min-width:0}
.opcion, .chip, .guia-texto, .dice, .enunciado, .rail-act-titulo{overflow-wrap:anywhere}
.qc-lineas .qc-frase{hyphens:auto}
.transcripcion, .qc-texto{max-width:100%}
.video-marco{max-width:100%}

@media (max-width:520px){
  .hud-titulo{font-size:.9rem}
  .hud-pasos button{padding:5px 9px}
  .ejercicio-cabeza{flex-wrap:wrap;gap:6px}
  .constancia-emblema{max-width:100%}
  .fila-acciones .accion{flex:1 1 auto;text-align:center}
  .qc-menu-btn{padding:6px 9px;font-size:.82rem}
  .qc-pestana-p{padding:5px 9px;font-size:.76rem}
}

/* ---------- survey import wizard ---------- */

.asistente{background:#fff}
.asistente-guia{
  margin:0;padding:12px 18px 0;font-size:.82rem;color:var(--tinta-media);line-height:1.4;
}
.asistente-cuerpo{
  display:grid;grid-template-columns:minmax(160px, 250px) minmax(0, 1fr);
  gap:clamp(12px, 2vw, 20px);padding:12px 18px 4px;background:#fff;align-items:stretch;
}
@media (max-width:640px){.asistente-cuerpo{grid-template-columns:1fr}}

.asistente-columnas{display:grid;grid-template-rows:auto 1fr;gap:6px;min-width:0}
.asistente-cuerpo h4{
  margin:0;font-size:.8rem;font-weight:600;color:var(--tinta);line-height:1.3;
}
.asistente-lista{
  list-style:none;margin:0;padding:3px;border:1px solid #B9C6D1;background:#fff;border-radius:2px;
  display:grid;gap:1px;align-content:start;max-height:250px;overflow:auto;min-height:150px;
}

.asistente-destinos{display:grid;gap:14px;align-content:start;min-width:0}
.asistente-destino{display:grid;gap:6px;min-width:0}
.asistente-fila{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
.asistente-flechas{display:grid;gap:5px}
.asistente-flecha{
  width:32px;height:28px;border:1px solid #B9C6D1;background:#F7F9FA;border-radius:3px;
  font-size:1rem;line-height:1;color:var(--tinta);display:grid;place-items:center;
}
.asistente-flecha:hover{border-color:#2B6CB0;background:#DCEAF6}
.asistente-caja{
  list-style:none;margin:0;padding:5px;border:1px solid #B9C6D1;background:#fff;border-radius:2px;
  min-height:64px;display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;cursor:pointer;
}
.asistente-caja:hover{border-color:#2B6CB0}

.asistente-col{
  text-align:left;background:none;border:1px solid transparent;padding:3px 8px;border-radius:3px;
  font-size:.83rem;color:#1F3F7A;line-height:1.3;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.asistente-lista .asistente-col{width:100%;border-radius:2px}
.asistente-caja .asistente-col{background:#EDF3F8;border-color:#C7D8E6}
.asistente-col:hover{background:#DCEAF6}
.asistente-col.elegido{background:#2B6CB0;color:#fff;border-color:#2B6CB0}
.asistente-vacio{
  font-size:.78rem;color:#9DAEBB;padding:6px 8px;font-style:italic;list-style:none;
}

.asistente-casillas{padding:10px 18px 14px;background:#fff;display:grid;gap:9px}
.asistente-casillas .campo{
  grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;font-size:.84rem;
}
.asistente-casillas .campo-etiqueta{color:var(--tinta);line-height:1.35}
.asistente-casillas input{margin-top:2px}

/* ---------- support and feedback ---------- */

.apoyo-amplio{
  margin-top:26px;padding:18px 20px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--papel);text-align:left;
}
.apoyo-amplio h3{margin:0 0 6px;font-size:.95rem;font-weight:600}
.apoyo-amplio .apoyo-texto{margin:0 0 10px;font-size:.9rem;line-height:1.5;color:var(--tinta-media);max-width:64ch}
.apoyo-enlaces{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.apoyo-enlaces li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font-size:.86rem}
.apoyo-en{color:var(--tinta-media);font-size:.78rem}
.apoyo-cierre{margin:12px 0 0;font-size:.88rem;color:var(--tinta);font-family:var(--serif)}
.apoyo-enlace{font-size:.86rem;color:var(--turquesa)}
.apoyo-enlace:hover{color:var(--tinta)}

.apoyo-breve{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  font-size:.84rem;color:var(--tinta-media);line-height:1.45;
}
.apoyo-breve .apoyo-enlace{white-space:nowrap}

.comentarios{
  margin:12px 0 0;font-size:.86rem;color:var(--tinta-media);line-height:1.5;text-align:left;
}
.comentarios a{color:var(--turquesa)}
.comentarios-vacio{font-style:italic;opacity:.8}

@media print{ .apoyo, .comentarios{display:none} }

/* ---------- manage files module ---------- */

.qc-archivos{grid-column:1 / -1;display:grid;gap:0;background:#fff;min-width:0}
.qc-barra-archivos{
  display:flex;gap:3px;align-items:center;padding:7px 9px;overflow-x:auto;
  border-bottom:1px solid #DCE4EA;background:#F7F9FA;
}
.qc-herramienta-icono{
  width:28px;height:26px;flex:0 0 auto;border:1px solid #C9D5DE;background:#fff;border-radius:3px;
  display:grid;place-items:center;color:#2B6CB0;padding:0;
}
.qc-herramienta-icono:hover{border-color:#2B6CB0;background:#DCEAF6}
.qc-icono{display:grid;place-items:center;line-height:0}
.qc-separador{width:1px;height:20px;flex:0 0 auto;background:#D4DDE4;margin:0 5px}

.qc-busca-archivos{display:flex;gap:16px;align-items:center;padding:9px 10px 6px;font-size:.8rem}
.qc-campo-busca{
  border:1px solid #C0CCD6;border-radius:3px;padding:5px 10px;color:#9DAEBB;
  min-width:170px;background:#fff;flex:0 1 240px;
}
.qc-cuenta-archivos{color:var(--tinta)}

.qc-tabla{margin:0 10px 10px;border:1px solid #C0CCD6;background:#fff;min-height:170px;display:grid;align-content:start}
.qc-tabla-cabecera{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);
  background:#F3F6F8;border-bottom:1px solid #D4DDE4;font-size:.78rem;color:var(--tinta);
}
.qc-tabla-cabecera span{
  padding:5px 8px;border-right:1px solid #D4DDE4;display:flex;justify-content:space-between;gap:6px;
}
.qc-tabla-cabecera span:last-child{border-right:0}
.qc-filtro{color:#9DAEBB;font-size:.7rem;padding:0}
.qc-tabla-vacia{padding:34px 10px;text-align:center;font-size:.8rem;color:#B4C1CC}

/* ---------- guided focus ---------- */

.pista-foco{
  outline:2px solid var(--turquesa);outline-offset:2px;border-radius:3px;
  animation:latido 1.8s ease-in-out infinite;
}
@keyframes latido{
  0%,100%{outline-color:rgba(47,168,160,.9)}
  50%{outline-color:rgba(47,168,160,.25)}
}
@media (prefers-reduced-motion:reduce){ .pista-foco{animation:none} }
.qc-frase.pista-foco{outline-offset:0}
.asistente-caja.pista-foco{outline-offset:0}
.instructivo-abierto .instructivo-lista{background:#EEF4F5;border-color:#CBDDDE}

.categoria li{display:grid;gap:2px}
.item-texto{display:block}
.item-porque{display:block;font-size:.76rem;color:var(--tinta-media);line-height:1.35}

.capa-ventana{padding:24px}
.ventana-flotante{max-width:min(420px, 92vw);width:100%;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ventana-flotante .qc-formulario{padding:18px 20px}

.guia-enlaces{display:flex;flex-wrap:wrap;gap:8px 14px;margin:10px 0 0}
.guia-enlace{
  font-size:.86rem;color:var(--turquesa);text-decoration:underline;overflow-wrap:anywhere;
}
.guia-enlace:hover{color:var(--tinta)}
.guia-enlace-descarga{
  text-decoration:none;border:1px solid var(--linea);border-radius:var(--radio);
  padding:6px 12px;background:var(--alto);
}
.guia-enlace-descarga:hover{border-color:var(--turquesa)}

/* ---------- misiones en construcción ---------- */

.nodo.en-obras .nodo-btn{opacity:.55;cursor:not-allowed}
.nodo.en-obras .disco{border-color:var(--amarillo);color:var(--amarillo);background:var(--papel)}
.nodo.en-obras .nodo-lema{color:var(--amarillo);font-style:normal;font-family:var(--sans);font-weight:600;font-size:.8rem}
.rail-mision.en-obras .rail-mision-btn{opacity:.5;cursor:not-allowed}

/* ---------- start screen ---------- */

.inicio{
  max-width:860px;margin:0 auto;text-align:center;
  padding:clamp(8px, 3vh, 34px) 0 40px;
}
.inicio-emblema{
  display:block;width:100%;max-width:min(420px, 100%);margin:0 auto 26px;height:auto;
}
.inicio h1{font-size:clamp(1.9rem, 4.2vw, 2.7rem);letter-spacing:-.02em;margin:0 0 12px;line-height:1.1}
.inicio-sub{
  margin:0 auto 30px;max-width:54ch;font-family:var(--serif);font-size:1.06rem;line-height:1.55;
  color:var(--tinta-media);
}
.inicio-franja{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.inicio-linea{flex:1;height:1px;background:var(--linea)}
.inicio-instruccion{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--turquesa);font-weight:700;
}

.idiomas{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:14px;text-align:left;
}
.idioma{
  display:grid;gap:10px;align-content:start;background:var(--alto);
  border:1px solid var(--linea);border-radius:var(--radio);padding:18px 18px 16px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.idioma-cabeza{display:flex;align-items:center;gap:12px}
.idioma-codigo{
  width:42px;height:32px;display:grid;place-items:center;border-radius:4px;flex:0 0 auto;
  background:var(--papel);border:1px solid var(--linea);
  font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--tinta-media);
}
.idioma-nombre{font-size:1.15rem;font-weight:600;line-height:1.2}
.idioma-desc{font-size:.88rem;line-height:1.45;color:var(--tinta-media);min-height:2.6em}
.idioma-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.idioma-nota{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--tinta-media)}
.idioma-entrar{
  font-size:.86rem;font-weight:600;color:#fff;background:var(--tinta);
  border-radius:var(--radio);padding:7px 15px;white-space:nowrap;
}

.idioma-listo{border-color:var(--turquesa);box-shadow:0 1px 0 var(--turquesa) inset}
.idioma-listo:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(19,35,57,.12)}
.idioma-listo .idioma-codigo{background:#E7F2F1;border-color:var(--turquesa);color:var(--turquesa)}
.idioma-listo .idioma-nota{color:var(--turquesa)}

.idioma-obras{background:var(--papel);cursor:not-allowed}
.idioma-obras .idioma-nombre,
.idioma-obras .idioma-desc{opacity:.75}
.idioma-obras .idioma-nota{color:var(--amarillo)}
.idioma-obras .idioma-entrar{background:none;color:var(--amarillo);padding:0;font-size:1rem}

.inicio-nota{margin:26px 0 0;font-size:.85rem;color:var(--tinta-media)}
@media (max-width:520px){ .idioma-desc{min-height:0} }

/* ---------- language picker in the top bar ---------- */

.hud-idioma{display:flex;align-items:center;gap:7px}
.hud-idioma-etiqueta{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);
}
.hud-idioma-select{
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radio);padding:5px 9px;font-family:var(--sans);font-size:.85rem;
}
.hud-idioma-select option{color:var(--tinta);background:#fff}
@media (max-width:640px){ .hud-idioma-etiqueta{display:none} }

/* la pantalla de inicio no muestra el índice de misiones */
body.sin-rail .rail-nav,
body.sin-rail .rail-abrir{display:none}
body.sin-rail .lienzo{grid-template-columns:minmax(0,1fr)}