:root{
  --fondo:#0b1117; --panel:rgba(13,20,27,.93); --panel2:#131d27; --borde:rgba(150,175,195,.18);
  --texto:#e6edf3; --tenue:#8fa1b3; --acento:#14d5cf; --acento2:#0fa8a3; --rojo:#f87171;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fondo);color:var(--texto);font-family:'Outfit',system-ui,sans-serif;overflow:hidden}
#cesium{position:fixed;inset:0}
.cesium-viewer-bottom{display:none!important}
button,select,input{font-family:inherit}

/* carga */
#carga{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#13202b,#070b0f)}
#carga[hidden]{display:none}
.carga-caja{text-align:center;max-width:420px;padding:20px}
.carga-caja p{color:var(--tenue);font-size:15px;margin:14px 0}
.barra{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.barra i{display:block;height:100%;width:35%;background:var(--acento);animation:barra 1.4s ease-in-out infinite}
@keyframes barra{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

.marca{font-weight:700;letter-spacing:.14em;font-size:20px;color:#fff}
.marca span{color:var(--acento)}

/* panel */
#panel{position:fixed;top:12px;left:12px;bottom:158px;width:350px;z-index:10;background:var(--panel);border:1px solid var(--borde);border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(6px)}
#panel.cerrado{display:none}
.cab{padding:14px 16px 12px;border-bottom:1px solid var(--borde);background:linear-gradient(180deg,rgba(20,213,207,.08),transparent)}
.cab .marca{font-size:15px}
.cab h1{font-size:19px;font-weight:600;margin:6px 0 2px;line-height:1.2}
.cab .sub{font-size:12px;color:var(--tenue);margin:0;line-height:1.4}
.cuerpo{padding:4px 14px 14px;overflow:auto;flex:1}
.cuerpo::-webkit-scrollbar{width:7px}.cuerpo::-webkit-scrollbar-thumb{background:#2a3a48;border-radius:4px}
section{margin-top:12px}
h2{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acento);margin:0 0 6px}
.tenue{color:var(--tenue);font-weight:400;letter-spacing:0;text-transform:none}
.op{margin-top:10px;font-size:13px;font-weight:600;padding:8px 10px;border-radius:9px;text-align:center}
.op-serv{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.4)}
.op-obra{background:rgba(245,158,11,.12);color:#fcd34d;border:1px solid rgba(245,158,11,.4)}
.op-fin{background:rgba(20,213,207,.12);color:#99f6e4;border:1px solid rgba(20,213,207,.45)}
#activos{font-size:12px;line-height:1.35;max-height:240px;overflow:auto}
.act{display:flex;gap:8px;padding:6px 8px;margin:4px 0;border-radius:8px;background:rgba(255,255,255,.04);border-left:3px solid #888}
.act .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:4px}
.act small{color:var(--tenue)}
.badge{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:5px;margin:3px 4px 0 0}
.badge.crit{background:rgba(248,113,113,.18);color:#fecaca}
.badge.sing{background:rgba(234,179,8,.16);color:#fde68a}
.vacio{color:var(--tenue);padding:6px 2px}
.botones{display:flex;flex-wrap:wrap;gap:6px}
.botones button,.botones select,.fila-corte select,#tl select{background:var(--panel2);color:var(--texto);border:1px solid #29404f;border-radius:8px;padding:6px 9px;font-size:12px;cursor:pointer}
.botones button:hover,#tl select:hover{border-color:var(--acento)}
.botones button.on,.botones button[aria-pressed="true"]{background:var(--acento);color:#05211f;border-color:var(--acento);font-weight:600}
.fila-corte{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--tenue)}
.fila-corte input{flex:1;accent-color:var(--acento)}
.capas{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12px}
.capas label{display:flex;align-items:center;gap:6px;cursor:pointer}
.capas input{accent-color:var(--acento)}
.leyenda-estados{font-size:12px;display:grid;gap:3px;margin-bottom:8px}
.leyenda-estados div,.leyenda div{display:flex;align-items:center;gap:7px}
.leyenda{font-size:11.5px;display:grid;gap:3px;color:#cdd8e3}
.leyenda .crit{color:#fca5a5;font-size:10px}
.chip{width:16px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
.chip-borde{background:transparent;border:2px solid}
.facts{margin:0;padding-left:16px;font-size:12px;color:#c3cfdb;line-height:1.5}
.pie{font-size:11px;color:var(--tenue);line-height:1.45;border-top:1px solid var(--borde);padding-top:9px;margin-top:14px}
#selInfo{font-size:12px;line-height:1.45;background:rgba(20,213,207,.06);border:1px solid rgba(20,213,207,.25);border-radius:8px;padding:8px 10px}
#selInfo b{font-weight:600}

.btn-panel{display:none;position:fixed;top:10px;left:10px;z-index:11;background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:9px;padding:7px 12px;font-size:13px}

/* línea temporal */
#tl{position:fixed;left:12px;right:12px;bottom:12px;z-index:10;background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:10px 14px 9px;
  box-shadow:0 -6px 24px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.tl-fila{display:flex;align-items:center;gap:12px}
#play{width:42px;height:42px;border-radius:50%;border:none;background:var(--acento);color:#05211f;font-size:16px;cursor:pointer;flex:0 0 auto}
#play:hover{background:#3ee6e0}
.tl-fecha{min-width:210px}
#fecha{font-size:17px;font-weight:600}
#fase{font-size:12px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
#scrub{flex:1;accent-color:var(--acento);min-width:80px}
.hitos{position:relative;height:36px;margin:6px 0 0 54px;border-top:1px solid var(--borde)}
.hitos .t{position:absolute;top:2px;width:2px;height:10px;background:#5b6b7b;cursor:pointer}
.hitos .t.pasado{background:var(--acento)}
.hitos .t.prox{background:#f59e0b;height:13px;width:3px}
.hitos .l{position:absolute;top:13px;font-size:9.5px;color:var(--tenue);transform:translateX(-50%);white-space:nowrap}
.tl-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:11.5px;color:var(--tenue);margin-left:54px}
.tl-meta b{color:var(--texto);font-weight:600}
.tl-meta .prox{color:#fbbf24}

/* atribuciones: siempre visibles */
#atrib{position:fixed;right:12px;bottom:158px;z-index:9;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:auto}
#credits{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 8px;background:rgba(5,10,14,.72);border-radius:6px;padding:3px 7px;font-size:10px;line-height:1.3;color:#e6edf3;max-width:60vw}
#credits>*{position:static!important}
#credits img{vertical-align:middle;max-height:24px}
#credits:empty{display:none}
#credits .cesium-credit-lightbox-overlay{position:fixed}
#credits a{color:#9fe9e6}
.atrib-txt{font-size:10.5px;color:#e6edf3;background:rgba(5,10,14,.7);padding:2px 7px;border-radius:5px}
#aviso{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:20;background:rgba(40,28,6,.92);color:#fde68a;border:1px solid #b45309;border-radius:9px;padding:7px 12px;font-size:12.5px;max-width:min(560px,90vw);text-align:center}

@media (max-width:820px){
  .btn-panel{display:block}
  #panel{top:52px;left:8px;right:8px;bottom:auto;width:auto;max-height:42vh}
  #tl{left:8px;right:8px;bottom:8px;padding:8px 10px}
  .tl-fila{flex-wrap:wrap;gap:8px}
  .tl-fecha{min-width:0;flex:1}
  #fase{max-width:60vw}
  #scrub{order:5;flex-basis:100%}
  .hitos,.tl-meta{margin-left:0}
  .hitos .l{display:none}
  #atrib{top:10px;bottom:auto;right:8px;left:auto;max-width:calc(100vw - 110px)}
  #credits{max-width:100%}
  #aviso{top:auto;bottom:50%}
  .atrib-txt{font-size:9.5px}
}