:root{
  --oro:#f5c518; --agua:#4a6450; --tinta:#0d1117; --panel:#161b24;
  --borde:#2a3340; --texto:#e9eef5; --suave:#93a0b0; --verde:#36d07a;
  --rojo:#ff5a5a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--texto);background:var(--tinta)}
.oculto{display:none !important}

/* ============================================================== EL MURO */
body.muro{overflow:hidden;cursor:none}
#rio{position:fixed;inset:0;width:100%;height:100%;display:block}
#velo{position:fixed;inset:0;pointer-events:none;transition:background .6s;
  background:linear-gradient(180deg,rgba(6,10,14,.55),rgba(6,10,14,.1) 45%,rgba(6,10,14,.6))}
#velo.en-hito{background:linear-gradient(180deg,rgba(6,10,14,.78),rgba(6,10,14,.45) 45%,rgba(6,10,14,.8))}

#cabecera{position:fixed;top:0;left:0;right:0;padding:2.2vh 3vw;
  display:flex;justify-content:space-between;align-items:flex-start;z-index:5}
.depto{font-size:1.5vh;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);opacity:.95}
#titulo{margin:.4vh 0 0;font-size:5.4vh;font-weight:700;letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.75)}
.muni{font-size:2vh;color:#cfe0d6;text-shadow:0 1px 10px rgba(0,0,0,.8)}

#progreso-ruta{display:flex;align-items:center;gap:.7vh}
.pr{width:1.5vh;height:1.5vh;border-radius:50%;background:rgba(255,255,255,.22)}
.pr.hecho{background:var(--oro);opacity:.65}
.pr.aqui{background:#fff;box-shadow:0 0 0 .5vh rgba(245,197,24,.4)}
.pr-txt{margin-left:1vh;font-size:1.7vh;color:#cfe0d6}

/* zonas */
#zonas{position:fixed;inset:0;z-index:4}
.zona{position:absolute;border:.35vh solid rgba(245,197,24,.55);border-radius:1.2vh;
  background:rgba(13,17,23,.42);backdrop-filter:blur(2px);
  padding:1.4vh;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .18s,border-color .18s,background .18s}
.zona.sobre{border-color:#fff;background:rgba(245,197,24,.2);
  transform:scale(1.035);box-shadow:0 0 5vh rgba(245,197,24,.35)}
.zona-tipo{font-size:1.3vh;letter-spacing:.2em;color:var(--oro)}
.zona-titulo{font-size:2.4vh;font-weight:650;line-height:1.2;
  text-shadow:0 2px 14px rgba(0,0,0,.9)}
.zona-relleno{position:absolute;top:1vh;right:1vh;font-size:1.1vh;
  letter-spacing:.14em;text-transform:uppercase;color:#ffd77a;opacity:.75;
  border:1px dashed rgba(255,215,122,.5);padding:.2vh .7vh;border-radius:.5vh}

/* ficha de contenido */
/* La caja termina ANTES de donde empiezan las pestañas (80 % de la altura,
   fijado en ruta.py). Sin este tope, la pestaña 1 se monta encima del
   reproductor: se ve en la captura 07 del manual antes de corregirlo. */
#ficha{position:fixed;inset:0;z-index:8;display:flex;align-items:flex-start;
  justify-content:center;padding-top:5vh;
  background:rgba(5,8,11,.86);backdrop-filter:blur(7px)}
.ficha-caja{width:74vw;max-height:71vh;overflow:hidden;
  background:linear-gradient(180deg,#121821,#0c1118);
  border:1px solid var(--borde);border-left:.7vh solid var(--oro);
  border-radius:1.4vh;padding:3vh 3.5vh}
.ficha-tipo{font-size:1.5vh;letter-spacing:.24em;color:var(--oro)}
.ficha-caja h2{margin:.6vh 0 1.4vh;font-size:4vh;line-height:1.1}
.ficha-texto{font-size:2vh;color:#c9d6e4;margin:0 0 1.6vh;max-width:62ch}
.ficha-pie{display:flex;justify-content:space-between;align-items:center;
  margin-top:3vh;font-size:1.6vh;color:var(--suave)}
.relleno-marca{color:#ffd77a;border:1px dashed rgba(255,215,122,.5);
  padding:.4vh 1vh;border-radius:.6vh;letter-spacing:.12em;font-size:1.3vh}

.hueco{display:flex;gap:1.6vh}
.hueco.fotos span,.hueco.datos{flex:1;height:24vh;border-radius:1vh;
  border:2px dashed rgba(255,255,255,.17);display:flex;align-items:center;
  justify-content:center;font-size:5vh;color:rgba(255,255,255,.13)}
.hueco.video span{flex:1;height:34vh;border-radius:1vh;
  border:2px dashed rgba(255,255,255,.17);display:flex;align-items:center;
  justify-content:center;font-size:7vh;color:rgba(255,255,255,.18)}
.hueco.cifras div{flex:1;border:2px dashed rgba(255,255,255,.17);
  border-radius:1vh;padding:2.4vh;text-align:center}
.hueco.cifras b{display:block;font-size:5vh;color:var(--oro)}
.hueco.cifras i{font-style:normal;font-size:1.6vh;color:var(--suave);
  letter-spacing:.1em;text-transform:uppercase}

/* mapa */
#mapa{position:fixed;right:2.4vw;top:16vh;width:15vw;min-width:170px;z-index:6;
  background:rgba(10,14,19,.62);border:1px solid var(--borde);
  border-radius:1.2vh;padding:1.6vh;backdrop-filter:blur(5px)}
.mapa-titulo{font-size:1.3vh;letter-spacing:.22em;color:var(--oro);
  text-transform:uppercase;margin-bottom:1vh}
#mapa-svg{width:100%;height:auto}
.mh{fill:#44546a}
.mh.hecho{fill:var(--oro);opacity:.75}
.mh.aqui{fill:#fff;r:7}
.mt{fill:#7c8b9d;font-size:11px}
.mt.hecho{fill:#b6a05a}
.mt.aqui{fill:#fff;font-weight:700}

/* cursor */
#cursor{position:fixed;width:7vh;height:7vh;margin:-3.5vh 0 0 -3.5vh;z-index:9;
  pointer-events:none;transition:left .05s linear,top .05s linear}
#cursor svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo-fondo{fill:rgba(13,17,23,.5);stroke:rgba(255,255,255,.35);stroke-width:5}
.anillo{fill:none;stroke:var(--oro);stroke-width:7;stroke-linecap:round}
.punto{fill:#fff}
#cursor.cargando .punto{fill:var(--oro)}

/* navegando */
#navegando{position:fixed;left:0;right:0;bottom:7vh;z-index:6;display:flex;
  justify-content:center}
.nav-caja{text-align:center;background:rgba(10,14,19,.6);padding:2vh 4vh;
  border-radius:1.4vh;border:1px solid var(--borde);backdrop-filter:blur(5px)}
.nav-icono{font-size:4vh}
.nav-texto{font-size:2.4vh}
.nav-pista{font-size:1.6vh;color:var(--suave);margin-top:.6vh}

/* ============================================================== LA GUÍA */
body.guia{overflow:auto;background:#0b0f15}
.g-top{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;background:var(--panel);border-bottom:1px solid var(--borde)}
.g-sub{color:var(--suave);font-size:13px;margin-left:10px}
.g-estado{display:flex;gap:8px;align-items:center}
.pastilla{background:#1d2430;border:1px solid var(--borde);border-radius:999px;
  padding:3px 12px;font-size:12.5px;color:var(--suave)}
.btn{background:#1d2430;color:var(--texto);border:1px solid var(--borde);
  border-radius:7px;padding:7px 14px;cursor:pointer;font:inherit;font-size:14px}
.btn:hover{border-color:var(--suave)}
.btn.sm{padding:3px 10px;font-size:12.5px}

.g-rejilla{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;padding:16px}
@media(max-width:1000px){.g-rejilla{grid-template-columns:1fr}}
.g-marco{position:relative;background:#000;border-radius:10px;overflow:hidden;
  border:1px solid var(--borde);min-height:300px;display:flex;
  align-items:center;justify-content:center}
/* OJO: aqui NO va `display:none`. Lo llevaba, y el JS lo mostraba con
   `style.display=''`, que no pone `block`: borra el estilo en linea y deja
   que vuelva a ganar esta regla. La camara funcionaba y el recuadro se veia
   negro. Se oculta con la clase .oculto, que es lo que usa el resto. */
#gFeed{width:100%;display:block}
#gSinCam{color:var(--suave);font-size:14px}
.g-aviso{position:absolute;left:0;right:0;top:0;background:rgba(200,40,40,.92);
  padding:10px;text-align:center;font-weight:700;letter-spacing:.06em}
.g-nota{color:var(--suave);font-size:13px;margin:10px 2px 0}

.g-panel{background:var(--panel);border:1px solid var(--borde);
  border-radius:10px;padding:16px}
.g-etq{font-size:11px;letter-spacing:.2em;color:var(--oro);
  text-transform:uppercase;margin:18px 0 8px}
.g-etq:first-child{margin-top:0}
.g-donde{background:#101620;border:1px solid var(--borde);border-radius:9px;
  padding:14px;margin-bottom:4px}
.g-hito{font-size:27px;font-weight:700;line-height:1.1}
.g-muni{color:var(--suave);font-size:13.5px}
.g-modo{margin-top:9px;display:inline-block;font-size:12.5px;padding:3px 11px;
  border-radius:999px;background:#1d2430;border:1px solid var(--borde)}
.g-modo.puntero{background:#3a2f0c;border-color:#7a6520;color:#ffd77a}
.g-modo.contenido{background:#102a3a;border-color:#1f5a7a;color:#9ed8ff}

.g-gesto{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;
  padding:9px 11px;border:1px solid var(--borde);border-radius:8px;
  margin-bottom:7px;background:#101620}
.g-g-n{font-weight:650}
.g-g-q{grid-column:1/-1;color:var(--verde);font-size:13px}
.g-g-c{color:var(--suave);font-size:12.5px;text-align:right}

.g-sig{background:#101620;border:1px solid var(--borde);border-radius:8px;
  padding:11px;font-size:14.5px}
.g-teclas{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:13px;
  color:var(--suave)}
kbd{background:#242c38;border:1px solid var(--borde);border-bottom-width:2px;
  border-radius:5px;padding:1px 7px;font-family:inherit;color:var(--texto)}

.g-zona{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 11px;border:1px solid var(--borde);border-radius:8px;
  margin-bottom:6px;background:#101620;font-size:14px}
.g-zona.sobre{border-color:var(--oro);background:#1d1a0c}
.g-zona.abierta{border-color:var(--verde);background:#0c1f16}

/* ============================================================== INICIO */
body.inicio{padding:26px;max-width:900px;margin:0 auto}
body.inicio h1{margin:0 0 4px}
body.inicio pre{background:var(--panel);border:1px solid var(--borde);
  border-radius:9px;padding:15px;overflow:auto;font-size:13px;color:#c3d0de}
body.inicio a{color:#6cb6ff}
.paso{background:var(--panel);border:1px solid var(--borde);
  border-left:3px solid var(--oro);border-radius:0 9px 9px 0;
  padding:13px 16px;margin:11px 0}

/* pausa de gestos */
.btn.activo{background:#3a1416;border-color:#7a2a2e;color:#ffc9c9}
body.en-pausa .g-marco{outline:3px solid #a33;outline-offset:-3px}
.g-pausa{background:#2a1215;border:1px solid #7a2a2e;border-radius:8px;
  padding:13px;font-size:13.5px;color:#ffc9c9;line-height:1.55}

/* ------------------------------------------------- portada y audio */
#portada{position:fixed;inset:0;z-index:40;background:#070b10;display:flex;
  align-items:center;justify-content:center;cursor:pointer;outline:none}
.portada-caja{text-align:center;max-width:70vw}
.portada-depto{font-size:1.6vh;letter-spacing:.24em;text-transform:uppercase;
  color:var(--oro)}
.portada-caja h1{font-size:9vh;margin:1vh 0 0;letter-spacing:-.02em}
.portada-caja p{font-size:2.6vh;color:var(--suave);margin:.4vh 0 4vh}
.portada-boton{display:inline-block;border:2px solid var(--oro);color:var(--oro);
  border-radius:1vh;padding:1.8vh 4vh;font-size:2.4vh;font-weight:650}
#portada:hover .portada-boton{background:var(--oro);color:#111}
.portada-nota{margin-top:3vh;font-size:1.7vh;color:var(--suave);max-width:46ch;
  margin-left:auto;margin-right:auto;line-height:1.6}

/* ------------------------------------------------------ reproductor */
.video-caja{position:relative;width:100%;max-height:46vh;aspect-ratio:16/9;margin:0 auto;background:#000;
  border-radius:1vh;overflow:hidden;border:1px solid var(--borde)}
.reproductor{position:absolute;inset:0;width:100%;height:100%;border:0}
.reproductor.vertical{left:50%;width:auto;transform:translateX(-50%);
  aspect-ratio:9/16}

/* pestañas de vídeo: son zonas apuntables, y sus medidas salen de
   ruta.py para que coincidan con lo que busca el puntero */
.pestana{position:fixed;z-index:9;display:flex;flex-direction:column;
  justify-content:center;gap:.3vh;padding:0 1.6vh;border-radius:1vh;
  background:rgba(13,17,23,.82);border:.3vh solid rgba(255,255,255,.2)}
.pestana b{color:var(--oro);font-size:2.2vh;line-height:1}
.pestana span{font-size:1.5vh;color:#c9d6e4;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pestana.activa{border-color:var(--oro);background:rgba(245,197,24,.16)}
.pestana.sobre{border-color:#fff;background:rgba(245,197,24,.3);
  box-shadow:0 0 4vh rgba(245,197,24,.4)}

.cerrar-zona{position:fixed;z-index:9;display:flex;flex-direction:column;
  align-items:center;justify-content:center;border-radius:1vh;
  background:rgba(13,17,23,.8);border:.3vh solid rgba(255,255,255,.22)}
.cerrar-zona span{font-size:3vh;line-height:1}
.cerrar-zona small{font-size:1.3vh;color:var(--suave);letter-spacing:.12em}
.cerrar-zona.sobre{border-color:#fff;background:rgba(200,60,60,.35)}
/* `cerrar-zona` vive DENTRO de #ficha, asi que se oculta con el. Su
   posicion la fija muro.js leyendo ruta.py: el puntero busca el boton
   justo ahi, y si el CSS lo moviera, apuntar no serviria de nada. */

/* --------------------------------------------------------- marca GETS */
/* Se usa el logo BLANCO: el original lleva el texto en negro y sobre
   estas interfaces oscuras desaparece. */
.logo-gets{height:26px;width:auto;display:block;opacity:.92}
.logo-gets.grande{height:44px}
.g-marca{display:flex;align-items:center;gap:14px}
.g-marca .g-sub{display:block;margin:0}
.inicio-marca{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.portada-pie{margin-top:7vh;display:flex;flex-direction:column;
  align-items:center;gap:1.2vh;opacity:.75}
.portada-pie .logo-gets{height:4.2vh}
.portada-sistema{font-size:1.5vh;letter-spacing:.18em;text-transform:uppercase;
  color:var(--suave)}

/* El motor en navegador dibuja sobre lienzo; el vídeo crudo queda oculto */
#gVideo{display:none}
#gLienzo{width:100%;display:block}
#gLienzo.oculto,#gFeed.oculto{display:none}

/* ------------------------------------------------------------- acceso */
body.entrar{display:flex;align-items:center;justify-content:center;
  min-height:100vh;background:#070b10;padding:20px}
.entrar-caja{width:100%;max-width:390px;text-align:center}
.entrar-caja .logo-gets{margin:0 auto 18px}
.entrar-caja h1{font-size:30px;margin:0}
.entrar-sub{color:var(--suave);margin:4px 0 26px;font-size:14.5px}
.entrar-caja form{display:flex;flex-direction:column;gap:10px}
.entrar-caja input{background:#0d1016;border:1px solid var(--borde);
  color:var(--texto);border-radius:8px;padding:12px 14px;font:inherit;
  font-size:15px}
.entrar-caja input:focus{outline:none;border-color:var(--oro)}
.entrar-caja .btn{padding:12px;font-size:15px;font-weight:650}
.entrar-error{background:#3a1416;border:1px solid #7a2a2e;color:#ffc9c9;
  border-radius:8px;padding:10px;font-size:13.5px}
.entrar-pie{margin-top:26px;font-size:13px;color:var(--suave);line-height:1.7;
  border-top:1px solid var(--borde);padding-top:18px;text-align:left}
.e-rol{color:var(--oro);font-weight:650}
.g-usuario{font-size:12.5px;color:var(--suave)}
.g-usuario b{color:var(--texto)}

/* ============================================================== MANUAL */
body.manual{background:#0b0f15;color:var(--texto)}
.m-top{display:flex;align-items:center;gap:14px;padding:14px 26px;
  background:var(--panel);border-bottom:1px solid var(--borde);
  position:sticky;top:0;z-index:20}
.m-top .m-sub{display:block;color:var(--suave);font-size:12.5px}
.m-top-der{margin-left:auto;display:flex;gap:8px}
.m-indice{display:flex;flex-wrap:wrap;gap:6px;padding:12px 26px;
  background:#0e131b;border-bottom:1px solid var(--borde);
  position:sticky;top:59px;z-index:19}
.m-indice a{font-size:13px;color:var(--suave);padding:4px 11px;
  border:1px solid var(--borde);border-radius:999px}
.m-indice a:hover{color:var(--oro);border-color:var(--oro);text-decoration:none}
.m-cuerpo{max-width:980px;margin:0 auto;padding:30px 26px 70px}
.m-cuerpo section{margin-bottom:54px;scroll-margin-top:120px}
.m-cuerpo h1{font-size:38px;margin:0 0 10px}
.m-cuerpo h2{font-size:26px;margin:0 0 14px;padding-bottom:9px;
  border-bottom:2px solid var(--oro);display:inline-block}
.m-cuerpo h3{font-size:18px;margin:28px 0 10px;color:var(--oro)}
.m-entrada{font-size:18px;line-height:1.65;color:#c9d6e4;max-width:68ch}
.m-cuerpo p,.m-cuerpo li{line-height:1.7}
.m-cuerpo ul,.m-cuerpo ol{max-width:72ch}

figure{margin:22px 0}
figure img{width:100%;border-radius:10px;border:1px solid var(--borde);
  display:block}
figcaption{color:var(--suave);font-size:13.5px;margin-top:9px;line-height:1.6}
.m-par{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.m-par{grid-template-columns:1fr}}
.m-par figcaption{margin-top:7px}

.m-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin:24px 0}
.m-tarjeta{background:var(--panel);border:1px solid var(--borde);
  border-top:3px solid var(--oro);border-radius:9px;padding:15px}
.m-tarjeta h4{margin:0 0 7px;font-size:15px}
.m-tarjeta p{margin:0;font-size:13.5px;color:var(--suave)}

.m-tabla{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.m-tabla th{text-align:left;background:#121820;padding:10px 13px;
  border-bottom:2px solid var(--borde);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--oro)}
.m-tabla td{padding:10px 13px;border-bottom:1px solid #1e2531;vertical-align:top}
.m-tabla tbody th{text-transform:none;letter-spacing:0;font-size:14px;
  background:transparent;color:var(--texto);border-bottom:1px solid #1e2531;
  width:150px}

.m-pasos{counter-reset:p;list-style:none;padding:0}
.m-pasos li{counter-increment:p;position:relative;padding:11px 0 11px 44px;
  border-bottom:1px solid #1a212c}
.m-pasos li::before{content:counter(p);position:absolute;left:0;top:10px;
  width:28px;height:28px;border-radius:50%;background:var(--oro);color:#111;
  display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:14px}

.m-nota{background:#121820;border-left:3px solid var(--oro);
  border-radius:0 8px 8px 0;padding:13px 17px;margin:18px 0;font-size:14.5px}
.m-nota.m-grave{border-left-color:#ff5a5a;background:#1d1216}
.m-critico{color:#ffb3b3;font-weight:650}
.m-verde{color:var(--verde);font-weight:650}
.m-rojo{color:#ff6a6a;font-weight:650}

.m-gestos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin:22px 0}
.m-gesto{background:var(--panel);border:1px solid var(--borde);
  border-radius:10px;padding:17px}
.m-g-icono{font-size:30px;line-height:1;color:var(--oro);margin-bottom:8px}
.m-gesto h4{margin:0 0 9px;font-size:16px}
.m-g-como{font-size:13.5px;color:#c9d6e4;margin:0 0 8px}
.m-g-hace{font-size:13.5px;color:var(--verde);margin:0 0 8px}
.m-g-ojo{font-size:12.5px;color:var(--suave);margin:0;border-top:1px solid
  var(--borde);padding-top:8px}

.m-diagrama,.m-codigo{background:#0d1016;border:1px solid var(--borde);
  border-radius:9px;padding:16px;overflow:auto;font-size:13px;
  font-family:ui-monospace,Consolas,monospace;color:#c3d0de;line-height:1.7}

.m-pie{display:flex;align-items:center;gap:14px;margin-top:50px;
  padding-top:24px;border-top:1px solid var(--borde);color:var(--suave);
  font-size:13.5px}

@media print{
  .m-top,.m-indice{position:static}
  .m-indice,.m-top-der{display:none}
  body.manual{background:#fff;color:#111}
  .m-cuerpo h2{color:#111}
  figure img{border-color:#ccc}
  .m-cuerpo section{page-break-inside:avoid}
}