:root{ --bg:#0a0c12; --panel:#12151f; --panel2:#191d2a; --panel3:#1f2432; --line:#262c3d; --line2:#333b50; --txt:#eef0f6; --dim:#8f98ae; --dim2:#6b7488; --red:#ff4d5a; --amber:#ffb02e; --green:#2ed573; --blue:#4d9fff; --accent:#ffc93c; --accent2:#ff9f1c; --r:12px; --rs:9px; --sh:0 4px 20px rgba(0,0,0,.45); } *{box-sizing:border-box} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#2b3245;border-radius:9px;border:2px solid var(--panel)} ::-webkit-scrollbar-thumb:hover{background:#3a4358} html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased} /* Altura: 100% del contenedor como base (funciona dentro de un iframe o de una vista previa, donde dvh puede resolverse a 0 o a un valor absurdo), y dvh solo si el navegador lo soporta. */ #app{display:flex;flex-direction:column;height:100%;min-height:520px} @supports (height:100dvh){ #app{height:100dvh} } #map{min-height:240px} /* ---------- cabecera ---------- */ header{display:flex;align-items:center;gap:13px;padding:11px 16px;flex:0 0 auto;position:relative; background:linear-gradient(105deg,#0d1018 0%,#171c2b 55%,#1d2333 100%); border-bottom:1px solid var(--line);z-index:20} header:after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(420px 90px at 34px 50%,rgba(255,201,60,.13),transparent 70%)} .logo{width:30px;height:30px;flex:0 0 auto;position:relative;border-radius:50%; background:radial-gradient(circle at 50% 50%,#fff 0 26%,var(--accent) 27% 52%,rgba(255,159,28,.55) 53% 72%,transparent 74%); box-shadow:0 0 22px rgba(255,201,60,.45)} .logo:after{content:"";position:absolute;left:2px;top:1px;width:24px;height:24px;border-radius:50%; background:#0a0c12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} header h1{font-size:14.5px;margin:0;font-weight:680;letter-spacing:-.15px;line-height:1.25} header h1 small{display:block;font-size:11.5px;font-weight:500;color:var(--dim);letter-spacing:0;margin-top:2px} .hbadges{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0} .hb{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:10px; padding:6px 11px;text-align:center;line-height:1.25;white-space:nowrap} .hb .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim2)} .hb .v{font-size:13px;font-weight:750;font-variant-numeric:tabular-nums} .hb.gold{background:rgba(255,201,60,.09);border-color:rgba(255,201,60,.3)} .hb.gold .v{color:var(--accent)} /* ---------- estructura ---------- */ #main{flex:1;display:flex;min-height:0;position:relative} #side{width:400px;flex:0 0 400px;background:var(--panel);border-right:1px solid var(--line); display:flex;flex-direction:column;min-height:0;z-index:10} #map{flex:1;min-width:0;background:#171b26;position:relative} /* ---------- pestañas ---------- */ .tabs{display:flex;gap:3px;padding:9px 10px 0;flex:0 0 auto} .tabs button{flex:1;background:none;border:0;color:var(--dim);cursor:pointer;font-weight:640; padding:9px 4px 10px;font-size:11.5px;border-radius:9px 9px 0 0;position:relative; display:flex;flex-direction:column;align-items:center;gap:4px;transition:color .15s,background .15s} .tabs button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;opacity:.9} .tabs button:hover{color:var(--txt);background:rgba(255,255,255,.03)} .tabs button.on{color:var(--accent);background:var(--panel2)} .tabs button.on:after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2.5px; background:var(--accent);border-radius:3px 3px 0 0} .tabsline{height:1px;background:var(--line);flex:0 0 auto} .pane{display:none;overflow-y:auto;overflow-x:hidden;padding:15px;flex:1;min-height:0} .pane.on{display:block;animation:fade .22s ease} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* .rot son rótulos de interfaz; los h2 son títulos de contenido real. Se ven igual, pero solo los segundos cuentan para el buscador. */ h2,.rot{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--dim2); margin:20px 0 9px;font-weight:750;display:flex;align-items:center;gap:8px} h2:first-child,.rot:first-child{margin-top:0} h2:after,.rot:after{content:"";flex:1;height:1px;background:var(--line)} .row{display:flex;gap:8px;flex-wrap:wrap} /* ---------- controles ---------- */ .search{position:relative} .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px; stroke:var(--dim2);fill:none;stroke-width:2;pointer-events:none} input[type=text]{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt); border-radius:10px;padding:10px 12px;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s} .search input[type=text]{padding-left:33px} input[type=text]::placeholder{color:var(--dim2)} input[type=text]:focus{border-color:rgba(255,201,60,.55);box-shadow:0 0 0 3px rgba(255,201,60,.1)} button.btn{background:linear-gradient(180deg,var(--accent),var(--accent2));color:#2a1d00;border:0; border-radius:10px;padding:10px 15px;font-size:12.5px;font-weight:750;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:7px; box-shadow:0 2px 10px rgba(255,159,28,.22);transition:transform .1s,filter .15s} button.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} button.btn:hover{filter:brightness(1.07)} button.btn:active{transform:translateY(1px)} button.btn.ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line); font-weight:640;box-shadow:none} button.btn.ghost:hover{background:var(--panel3);border-color:var(--line2)} /* ---------- bloque de filtros plegable ---------- */ .filtros{margin-top:16px} .fhead{display:none;width:100%;align-items:center;gap:9px;background:var(--panel2); border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:12px 13px; font-size:13px;font-weight:650;cursor:pointer;font-family:inherit} .fhead svg{width:16px;height:16px;stroke:var(--dim);fill:none;stroke-width:2; stroke-linecap:round;flex:0 0 auto} .fhead .fchevron{margin-left:auto;transition:transform .22s ease} .filtros.abierto .fhead .fchevron{transform:rotate(180deg)} .fbadge{background:rgba(255,201,60,.16);color:var(--accent);border-radius:999px; padding:2px 9px;font-size:11px;font-weight:750} .fbadge:empty{display:none} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{font-size:11.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--line); background:var(--panel2);color:var(--dim);cursor:pointer;user-select:none;font-weight:600; transition:all .14s} .chip:hover{border-color:var(--line2);color:var(--txt)} .chip.on{background:rgba(255,201,60,.14);color:var(--accent);border-color:rgba(255,201,60,.45)} /* ---------- resumen ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0 0} .stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 8px;text-align:center} .stat .v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1} .stat .k{font-size:9.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.5px;margin-top:3px} .stat.r .v{color:var(--red)} .stat.a .v{color:var(--accent)} .stat.g .v{color:var(--green)} /* ---------- tarjetas ---------- */ .card{background:var(--panel2);border:1px solid var(--line);border-radius:11px; padding:11px 12px 10px;margin-bottom:8px;cursor:pointer;position:relative;overflow:hidden; transition:background .14s,border-color .14s,transform .1s} .card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)} .card:hover{background:var(--panel3);border-color:var(--line2)} .card:active{transform:scale(.995)} .card.zoo:before{background:var(--green)} .card.av:before{background:#c084fc} .via.av{background:rgba(192,132,252,.16);color:#d8b4fe} .pin-av{border-color:#f3e8ff} .card .hd{display:flex;align-items:flex-start;gap:8px} .card .t{font-size:13px;font-weight:680;line-height:1.32;flex:1} .via{flex:0 0 auto;font-size:10px;font-weight:750;letter-spacing:.3px;padding:3px 7px;border-radius:6px; background:#2c3348;color:#b9c3da;white-space:nowrap} .card .s{font-size:11.5px;color:var(--dim);line-height:1.5;margin-top:5px} .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .tag{font-size:10px;padding:3px 8px;border-radius:999px;background:#252b3b;color:var(--dim);font-weight:600} .tag.h{background:rgba(255,201,60,.12);color:var(--accent)} .tag.km{background:rgba(255,77,90,.13);color:#ff8f99} .empty{text-align:center;color:var(--dim2);font-size:12.5px;padding:34px 10px;line-height:1.6} .iravisos{width:100%;margin-bottom:9px;background:rgba(192,132,252,.1);color:#d8b4fe; border:1px solid rgba(192,132,252,.28);border-radius:9px;padding:9px;font-size:12px; font-weight:650;cursor:pointer;font-family:inherit} .iravisos:hover{background:rgba(192,132,252,.18)} /* publicidad · discreta, al final del contenido y nunca sobre el mapa */ .adbox{margin:22px 0 4px;padding:9px;border:1px dashed var(--line);border-radius:10px; background:rgba(255,255,255,.015);min-height:60px;transition:opacity .2s} .adbox .adlbl{font-size:9px;text-transform:uppercase;letter-spacing:1.1px;color:var(--dim2); margin-bottom:7px;text-align:center} .adbox ins{display:block} /* sin anuncio servido: se repliega y no deja un hueco muerto */ .adbox.vacio{display:none} .adbox.lleno{border-style:solid;border-color:var(--line)} /* ---------- avisos ---------- */ .status{margin-top:8px;font-size:11.5px;padding:9px 11px;border-radius:10px;background:var(--panel2); border:1px solid var(--line);line-height:1.5} .warn{background:rgba(255,77,90,.1);border-color:rgba(255,77,90,.32);color:#ffb8be} .ok{background:rgba(46,213,115,.09);border-color:rgba(46,213,115,.3);color:#8fefb9} .note{font-size:11.5px;color:var(--dim);line-height:1.65;background:var(--panel2); border:1px solid var(--line);border-radius:10px;padding:11px 12px} .note b{color:#c9d0e0} a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(255,201,60,.3)} a:hover{border-bottom-color:var(--accent)} /* ---------- barra de tiempo ---------- */ #timewrap{padding:12px 15px 13px;border-top:1px solid var(--line);flex:0 0 auto; background:linear-gradient(180deg,var(--panel2),#151926)} .thead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px} .thead .lb{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--dim2);font-weight:700} .thead .now{color:var(--accent);font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.5px} .track{position:relative;height:22px;margin-bottom:2px} .track .bar{position:absolute;left:0;right:0;top:8px;height:6px;border-radius:6px;overflow:hidden; background:linear-gradient(90deg, #2ed573 0%, #2ed573 13%, #ffb02e 13%, #ffb02e 40%, #ff4d5a 40%, #ff4d5a 80%, #7a4bd6 80%, #7a4bd6 87%, #3a4358 87%, #3a4358 100%)} .track .mk{position:absolute;top:3px;width:2px;height:16px;background:rgba(255,255,255,.28);border-radius:2px} input[type=range]{position:absolute;left:0;right:0;top:0;width:100%;height:22px;margin:0; -webkit-appearance:none;appearance:none;background:none;cursor:pointer} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%; background:#fff;border:3px solid var(--accent);box-shadow:0 2px 7px rgba(0,0,0,.6);margin-top:0;cursor:grab} input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:#fff; border:3px solid var(--accent);box-shadow:0 2px 7px rgba(0,0,0,.6);cursor:grab} .ticks{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim2); font-variant-numeric:tabular-nums;margin-top:1px} /* ---------- cronología ---------- */ .timeline{border-left:2px solid var(--line);margin-left:7px;padding-left:16px} .tl{position:relative;margin-bottom:15px} .tl:before{content:"";position:absolute;left:-23px;top:4px;width:10px;height:10px;border-radius:50%; background:var(--accent);border:2.5px solid var(--panel);box-shadow:0 0 0 2px rgba(255,201,60,.16)} .tl .h{font-size:12.5px;font-weight:780;color:var(--accent);letter-spacing:-.1px} .tl .d{font-size:11.5px;color:var(--dim);line-height:1.6;margin-top:3px} .legend{font-size:11.5px;color:var(--dim);line-height:1.95} .dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px;vertical-align:middle} /* ---------- mapa ---------- */ .leaflet-container{font-family:inherit} .leaflet-popup-content-wrapper{background:#171c28;color:var(--txt);border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.6);border:1px solid var(--line2)} .leaflet-popup-tip{background:#171c28;border:1px solid var(--line2)} .leaflet-popup-content{margin:13px 15px;font-size:12.5px;line-height:1.55} .leaflet-popup-content b{font-size:13.5px} .leaflet-container a.leaflet-popup-close-button{color:var(--dim2);padding:8px 8px 0 0} .leaflet-container a.leaflet-popup-close-button:hover{color:var(--txt)} /* cita de la fuente oficial dentro del popup */ .src{margin:11px 0;padding:9px 10px;border-radius:8px;background:rgba(255,255,255,.04); border-left:2px solid var(--accent);font-size:11.5px;color:#c3cade;font-style:italic;line-height:1.5} .srch{font-style:normal;font-weight:750;font-size:9px;text-transform:uppercase;letter-spacing:1px; color:var(--accent);margin-bottom:5px} .srcf{font-style:normal;font-size:10.5px;color:var(--dim2);margin-top:6px;line-height:1.45} .srcf a{color:var(--dim);border-bottom-color:rgba(255,255,255,.18)} /* aforo oficial de una zona de observación */ .aforo{margin-top:8px;padding:6px 9px;border-radius:7px;display:inline-block; background:rgba(37,194,90,.13);color:#8fefb9;font-size:12px} .aforo b{color:#b6f7cf;font-size:14px} .pkw{margin-top:7px;padding:7px 8px;border-radius:6px;background:rgba(255,176,46,.1); border:1px solid rgba(255,176,46,.25);color:#ffd08a;font-size:10.5px;line-height:1.5} .leaflet-bar a{background:#171c28;color:var(--txt);border-color:var(--line)} .leaflet-bar a:hover{background:var(--panel3)} .leaflet-control-attribution{background:rgba(10,12,18,.78)!important;color:var(--dim2)!important; font-size:10px!important;border-radius:7px 0 0 0} .leaflet-control-attribution a{color:var(--dim)!important} .pin{border-radius:50%;border:2px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.65); transition:transform .13s} .pin:hover{transform:scale(1.25)} .pin-cut{background:var(--red)} .pin-cut:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:60%;height:2px;background:#fff;border-radius:2px} .tramoLbl{position:absolute;transform:translate(-50%,-250%);white-space:nowrap; background:linear-gradient(180deg,#ff3b47,#e01420);color:#fff;font-size:11px;font-weight:780; padding:5px 11px;border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.22);letter-spacing:.1px} .flow{stroke-dasharray:1 14;animation:flow 1.1s linear infinite} @keyframes flow{to{stroke-dashoffset:-15}} /* leyenda flotante sobre el mapa */ #legend{position:absolute;right:12px;bottom:26px;z-index:800;background:rgba(18,21,31,.93); backdrop-filter:blur(9px);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh); font-size:11px;color:var(--dim);overflow:hidden;max-width:230px} #legend .lgh{display:flex;align-items:center;gap:7px;padding:8px 11px;cursor:pointer; font-weight:700;color:var(--txt);font-size:11px;user-select:none} #legend .lgh svg{width:13px;height:13px;stroke:var(--dim);fill:none;stroke-width:2.2; margin-left:auto;transition:transform .2s} #legend.min .lgh svg{transform:rotate(180deg)} #legend .lgb{padding:0 11px 10px;line-height:1.85} #legend.min .lgb{display:none} /* ---------- móvil ---------- */ .grab{display:none} @media(max-width:880px){ #main{flex-direction:column-reverse} /* flex:0 0 auto es obligatorio: con flex-grow el panel ignora la altura y el plegado deja de funcionar. */ /* En móvil el bloque de filtros arranca plegado: si no, ocupaba casi toda la altura útil del panel y la lista quedaba fuera de la vista. */ .fhead{display:flex} .filtros .fbody{display:none;padding-top:4px} .filtros.abierto .fbody{display:block} .filtros .rot{margin-top:14px} /* margen inferior para que el último elemento no quede bajo la barra horaria */ .pane{padding-bottom:26px} /* barra de scroll fina y superpuesta: la de 9 px se comía ancho útil y tapaba el borde derecho de los chips y las tarjetas */ ::-webkit-scrollbar{width:0;height:0} .pane{scrollbar-width:none;-ms-overflow-style:none} /* Tres alturas: plegada, normal y a pantalla completa. */ #side{width:100%;flex:0 0 auto;height:64%;max-height:none;border-right:0; border-top:1px solid var(--line2);border-radius:18px 18px 0 0;margin-top:-18px; box-shadow:0 -10px 34px rgba(0,0,0,.55);transition:height .26s ease} #side.collapsed{height:96px} #side.collapsed .pane,#side.collapsed #timewrap{display:none} #side.full{height:100%;border-radius:0;margin-top:0} #map{flex:1 1 auto;min-height:200px;transition:min-height .26s ease} /* a pantalla completa el mapa se repliega del todo */ #app.panel-full #map{min-height:0;flex:0 0 0;overflow:hidden} /* tirador: barra táctil ancha con botón explícito a la derecha */ .grab{display:flex;align-items:center;gap:10px;padding:10px 14px 8px; cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent; touch-action:none;user-select:none;position:relative} .grab i{width:42px;height:5px;border-radius:5px;background:#454e6b;display:block; position:absolute;left:50%;top:7px;transform:translateX(-50%)} .grab b{font-size:10px;font-weight:700;color:var(--dim2);letter-spacing:.5px;margin-top:8px} /* la etiqueta dice qué hará el siguiente toque */ #side.collapsed .grab b:after{content:"VER LA LISTA"} #side:not(.collapsed):not(.full) .grab b:after{content:"AMPLIAR"} #side.full .grab b:after{content:"OCULTAR"} .grab .cerrar{margin-left:auto;margin-top:8px;width:34px;height:34px;border-radius:50%; background:var(--panel3);border:1px solid var(--line2);display:flex;align-items:center; justify-content:center;flex:0 0 auto} .grab .cerrar svg{width:16px;height:16px;stroke:var(--txt);fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;transition:transform .26s ease} #side.collapsed .grab .cerrar svg{transform:rotate(180deg)} #side.full .grab .cerrar{background:rgba(255,201,60,.16);border-color:rgba(255,201,60,.4)} #side.full .grab .cerrar svg{stroke:var(--accent);transform:rotate(180deg)} .tabs{padding:0 8px} .tabs button{font-size:10.5px;padding:8px 2px 9px;gap:3px;min-height:46px} .tabs button svg{width:19px;height:19px} header{padding:9px 12px;gap:10px} header h1{font-size:12.5px} header h1 small{display:none} .hb{padding:5px 9px} .hb .v{font-size:11.5px} .hb .k{font-size:8.5px} .pane{padding:13px} /* objetivos táctiles: mínimo 44 px de alto */ .chip{padding:9px 13px;font-size:12px} button.btn{padding:13px 16px;font-size:13px} input[type=text]{padding:13px 12px;font-size:16px} /* 16px evita el zoom de iOS */ .search input[type=text]{padding-left:36px} .card{padding:13px 13px 12px} .card .t{font-size:13.5px} .card .s{font-size:12px} #legend{right:8px;bottom:8px;max-width:auto;font-size:10.5px} #legend .lgh{padding:9px 12px} /* popups: anchos, con scroll propio y botón de cierre grande. Sin altura máxima se salían de la pantalla y no había forma de leerlos. */ .leaflet-popup-content{margin:14px 15px;font-size:13px; max-height:46dvh;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch} .leaflet-popup-content-wrapper{max-width:86vw} .leaflet-container a.leaflet-popup-close-button{padding:14px 14px 0 0;font-size:22px; width:44px;height:44px} .leaflet-popup{margin-bottom:24px} .pin{border-width:2.5px} /* Barra de situación compacta: ocupaba 150 px del panel y dejaba la lista casi sin sitio. Ahora es una franja fina y el texto explicativo se despliega solo si se toca. */ #timewrap{padding:7px 13px 9px} .thead{margin-bottom:4px} .thead .lb{font-size:9px} .thead .now{font-size:16px} input[type=range]::-webkit-slider-thumb{width:20px;height:20px} input[type=range]::-moz-range-thumb{width:20px;height:20px} .track{height:20px} .track .bar{top:7px;height:5px} .track .mk{top:3px;height:13px} .ticks{font-size:8px;margin-top:0} /* el estado, plegado a una línea con degradado */ .status{margin-top:6px;padding:7px 9px;font-size:11px;position:relative; max-height:2.9em;overflow:hidden;cursor:pointer} .status:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5em; background:linear-gradient(transparent,rgba(20,24,36,.96))} .status.abierto{max-height:none} .status.abierto:after{display:none} .adbox{margin:18px 0 2px} } @media(max-width:430px){ .hbadges .hb:nth-child(2){display:none} .stats{gap:5px} .stat{padding:8px 5px} .stat .v{font-size:15px} .stat .k{font-size:8.5px;letter-spacing:.2px} .tabs button{font-size:9.5px} .ticks{font-size:8.5px} #legend{max-width:170px;font-size:9.5px} .leaflet-popup-content-wrapper{max-width:86vw} } @media(max-width:360px){ .hbadges .hb:nth-child(1){display:none} header h1{font-size:11.5px} } /* móvil apaisado: el panel roba demasiado alto */ @media(max-width:880px) and (orientation:landscape){ #side{height:70dvh;max-height:70dvh} #side.collapsed{height:88px} } /* ---------- respaldo sin JavaScript ---------- Solo se ve dentro de