:root{--fondo:#071018;--panel:rgba(9,19,28,.95);--borde:#1d3445;--suave:#122431;--acento:#46c9a7;--texto:#e9f2f7;--tenue:#93a9b7;--aviso:#f2c94c}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--fondo);color:var(--texto);font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}
@media print{body{display:none!important}}

/* Entrada */
.entrada{display:grid;place-items:center;padding:16px}
.tarjeta{width:min(380px,100%);background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:28px}
.marca{font-weight:700;letter-spacing:.28em;font-size:20px}
.lema{color:var(--tenue);margin:4px 0 22px;font-size:13px}
.tarjeta label{display:block;font-size:12px;color:var(--tenue);margin-bottom:14px}
.tarjeta input:not([type=checkbox]){display:block;width:100%;margin-top:5px;padding:10px 11px;background:#0c1b25;border:1px solid var(--borde);border-radius:7px;color:var(--texto);font-size:15px}
.tarjeta input:focus{outline:2px solid var(--acento);outline-offset:1px}
.acepto{display:flex!important;gap:9px;align-items:flex-start;line-height:1.45}
.acepto input{margin-top:2px;accent-color:var(--acento)}
.tarjeta button{width:100%;padding:11px;border:0;border-radius:7px;background:var(--acento);color:#04211b;font-weight:600;font-size:15px;cursor:pointer}
.tarjeta button:disabled{opacity:.6}
.msg{color:var(--aviso);min-height:1.3em;margin:12px 0 0;font-size:13px}

/* Visor */
#map{position:fixed;inset:0}
.barra,.ficha,.aviso,.abrir,.ir{-webkit-user-select:none;user-select:none}
.barra{position:fixed;z-index:3;top:12px;left:12px;bottom:12px;width:300px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--borde);border-radius:12px;overflow:hidden;transition:transform .2s ease}
.barra.oculta{transform:translateX(calc(-100% - 20px))}
.cab{display:flex;align-items:center;gap:10px;padding:13px 14px 11px;border-bottom:1px solid var(--borde)}
.cab .marca{font-size:14px;letter-spacing:.24em}
.cab .zona{font-size:11.5px;color:var(--tenue)}
.cab button{margin-left:auto}
.icono{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;border:1px solid var(--borde);background:#0c1b25;color:var(--texto);cursor:pointer;font-size:14px;line-height:1}
.icono:hover{border-color:var(--acento)}
.cuerpo{flex:1;overflow:auto;padding:6px 8px 10px;scrollbar-width:thin;scrollbar-color:#28465a transparent}
.tema{border-bottom:1px solid #13283a}
.tema:last-of-type{border-bottom:0}
.tema summary{list-style:none;display:flex;align-items:center;gap:8px;padding:10px 6px;cursor:pointer;font-weight:600;font-size:13px}
.tema summary::-webkit-details-marker{display:none}
.tema summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--tenue);border-bottom:1.5px solid var(--tenue);transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.tema[open] summary::before{transform:rotate(45deg)}
.cuenta{margin-left:auto;min-width:20px;padding:1px 7px;border-radius:10px;background:var(--acento);color:#04211b;font-size:11px;text-align:center;font-weight:700}
.cuenta:empty{display:none}
.lista{padding:0 2px 8px}
.capa{display:grid;grid-template-columns:auto 12px 1fr auto;align-items:center;gap:9px;padding:6px 6px;border-radius:7px}
.capa:hover{background:var(--suave)}
.capa .nombre{font-size:13px;cursor:pointer}
.sw{width:12px;height:12px;border-radius:3px}
.info{width:18px;height:18px;border-radius:50%;border:1px solid #33546a;color:var(--tenue);font-size:10.5px;display:grid;place-items:center;cursor:help;position:relative}
.info:hover::after{content:attr(data-t);position:absolute;right:0;top:22px;width:220px;padding:8px 10px;background:#0f2130;border:1px solid var(--borde);border-radius:7px;color:var(--texto);font-size:12px;font-weight:400;line-height:1.4;z-index:5;white-space:normal}
.interruptor{position:relative;width:30px;height:17px;flex:0 0 auto}
.interruptor input{opacity:0;width:0;height:0;position:absolute}
.interruptor span{position:absolute;inset:0;background:#23394a;border-radius:9px;cursor:pointer;transition:background .15s}
.interruptor span::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#c9d6de;transition:transform .15s}
.interruptor input:checked+span{background:var(--acento)}
.interruptor input:checked+span::after{transform:translateX(13px);background:#fff}
.interruptor input:focus-visible+span{outline:2px solid var(--acento);outline-offset:2px}
.control{grid-column:1/-1;display:none;padding:2px 2px 4px 39px}
.control.activo{display:block}
.control .fila{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tenue);margin-bottom:2px}
.control strong{color:var(--texto);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--acento)}
select{width:100%;padding:5px 7px;background:#0c1b25;color:var(--texto);border:1px solid var(--borde);border-radius:6px;font-size:12.5px}
.base{padding:8px 6px 4px}
.base .capa{grid-template-columns:auto 1fr}
.acciones{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--borde)}
.acciones button,.acciones a{flex:1;padding:7px 8px;border-radius:7px;border:1px solid var(--borde);background:#0c1b25;color:var(--texto);font-size:12px;cursor:pointer;text-align:center;text-decoration:none}
.acciones button:hover,.acciones a:hover{border-color:var(--acento)}
.creditos{padding:0 12px 10px;font-size:10.5px;color:#6f8797;line-height:1.35}
.abrir{position:fixed;z-index:3;top:12px;left:12px;display:none;padding:8px 12px;border-radius:9px;background:var(--panel);border:1px solid var(--borde);color:var(--texto);cursor:pointer;font-weight:600;letter-spacing:.18em;font-size:12px}
.abrir.visible{display:block}
.ficha{position:fixed;z-index:3;right:12px;bottom:28px;width:min(340px,calc(100% - 24px));max-height:48vh;overflow:auto;background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:14px 16px;display:none}
.ficha.visible{display:block}
.ficha .cerrar{position:absolute;top:10px;right:10px}
.ficha h3{margin:0 30px 6px 0;font-size:14px}
.ficha .nota{font-size:12px;color:var(--tenue);margin-bottom:9px}
.ficha dl{display:grid;grid-template-columns:1fr auto;gap:5px 14px;margin:0;font-size:12.5px}
.ficha dt{color:var(--tenue)}
.ficha dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ficha ul{margin:6px 0 0;padding-left:18px;font-size:12px}
.ir{position:fixed;z-index:3;top:14px;left:50%;transform:translateX(-50%);display:none;padding:9px 16px;border-radius:20px;background:var(--acento);color:#04211b;border:0;font-weight:600;font-size:13px;cursor:pointer}
.ir.visible{display:block}
.aviso{position:fixed;z-index:4;top:14px;left:50%;transform:translateX(-50%);padding:7px 14px;border-radius:20px;background:var(--panel);border:1px solid var(--borde);font-size:12.5px;display:none}
.aviso.visible{display:block}
.aviso.error{color:var(--aviso)}
@media (max-width:640px){.barra{width:auto;right:12px;bottom:auto;max-height:70vh}.ficha{bottom:12px}}
.control .play{margin-left:6px;width:20px;height:18px;padding:0;border:1px solid var(--borde);border-radius:4px;background:transparent;color:var(--tenue);font-size:10px;line-height:1;cursor:pointer;vertical-align:middle}
.control .play:hover{color:#fff;border-color:#8fa3ae}
.control .tasa{align-items:center;margin-top:6px;cursor:pointer}
.control .tasa input{margin:0}
.ficha .serie{display:block;margin:10px 0 4px}
.vista{margin-top:6px;padding-top:8px;border-top:1px solid var(--borde)}
.vista-t{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin:0 0 4px 2px}
.ir-zonas{position:fixed;z-index:3;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:70vw}
.ir-zonas .ir{position:static;transform:none}

/* Popups de ficha (fichaGenerica en a.js) */
.maplibregl-popup-content{background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:10px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.maplibregl-popup-content b{color:var(--acento);font-size:13px}
.maplibregl-popup-content table{border-collapse:collapse}
.maplibregl-popup-content table td{padding:2px 0;font-size:12px;color:var(--texto);vertical-align:top}
.maplibregl-popup-close-button{color:var(--tenue);font-size:16px}
.maplibregl-popup-close-button:hover{color:var(--texto);background:transparent}
.maplibregl-popup-tip{border-top-color:var(--panel)!important;border-bottom-color:var(--panel)!important}
