/* Wakah-K'an · Observatorio Global — imagen Geoaxis */
@font-face { font-family: "Skyrox"; src: url("/fonts/Skyrox-MediumCondensed.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gotham"; src: url("/fonts/Gotham%20Book%20Font.otf") format("opentype"); font-display: swap; }

:root {
  --navy: #0B132B; --navy-2: #111c3d; --navy-3: #060b1c; --lima: #D4FF00; --paper: #F5F5F1;
  --linea: rgba(212, 255, 0, 0.16); --tenue: rgba(245, 245, 241, 0.6);
  --verde: #6ee7a0; --naranja: #ffb020; --rojo: #ff4d4d;
  --bar: 58px; --panel: 360px; --tiempo: 92px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--navy-3); color: var(--paper); font-family: "Gotham", system-ui, sans-serif; overflow: hidden; }
a { color: var(--lima); }
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------ barra */
.ob-bar {
  height: var(--bar); display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: var(--navy); border-bottom: 1px solid var(--linea); position: relative; z-index: 5;
}
.ob-brand img { display: block; }
.ob-title { display: flex; flex-direction: column; line-height: 1.05; }
.ob-name { font-family: "Skyrox", sans-serif; font-size: 1.3rem; letter-spacing: 2px; white-space: nowrap; }
.ob-sub { font-family: "Skyrox", sans-serif; font-size: 0.68rem; letter-spacing: 3px; color: var(--lima); white-space: nowrap; }
.ob-pop a:focus { outline: none; }
.ob-pop a:focus-visible { outline: 2px solid var(--lima); outline-offset: 2px; }
.ob-live { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--tenue); }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 0 rgba(212,255,0,.6); animation: ob-pulso 2s infinite; }
@keyframes ob-pulso { 70% { box-shadow: 0 0 0 8px rgba(212,255,0,0); } 100% { box-shadow: 0 0 0 0 rgba(212,255,0,0); } }
.ob-panel-toggle { display: none; }

/* ------------------------------------------------------------ distribución */
.ob-layout { display: flex; height: calc(100% - var(--bar)); }
.ob-panel {
  width: var(--panel); flex: 0 0 var(--panel); overflow-y: auto; background: var(--navy);
  border-right: 1px solid var(--linea); padding: 16px; display: flex; flex-direction: column; gap: 18px;
  scrollbar-width: thin; scrollbar-color: #26325c transparent;
}
.ob-main { flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0; }
.ob-mapa { flex: 1; min-height: 0; background: var(--navy-3); }

/* ------------------------------------------------------------ KPIs */
.ob-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-kpi { padding: 12px; border: 1px solid rgba(245,245,241,.1); border-radius: 12px; background: var(--navy-2); }
.ob-kpi b { display: block; font-family: "Skyrox", sans-serif; font-size: 1.6rem; font-weight: normal; line-height: 1.1; }
.ob-kpi small { color: var(--tenue); font-size: 0.72rem; }
.ob-kpi.is-red b { color: var(--rojo); }
.ob-kpi.is-orange b { color: var(--naranja); }

/* ------------------------------------------------------------ filtros */
.ob-filtros { display: grid; gap: 12px; }
.ob-etq { display: block; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tenue); margin-bottom: 6px; }
.ob-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ob-chips button, .ob-tipos button {
  padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(245,245,241,.2); background: transparent;
  font-size: 0.8rem; cursor: pointer; transition: .15s;
}
.ob-chips button:hover, .ob-tipos button:hover { border-color: var(--lima); }
.ob-chips button.is-on { background: var(--lima); border-color: var(--lima); color: var(--navy); font-weight: 700; }
.ob-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-tipos button { display: inline-flex; align-items: center; gap: 7px; opacity: .45; }
.ob-tipos button.is-on { opacity: 1; border-color: currentColor; }
.ob-tipos button i { color: var(--c); }
.ob-tipos button em { font-style: normal; color: var(--tenue); font-size: .72rem; }

/* ------------------------------------------------------------ lista */
.ob-lista-wrap h2 { font-family: "Skyrox", sans-serif; font-weight: normal; font-size: 0.95rem; letter-spacing: 1.5px; margin-bottom: 8px; }
.ob-lista-wrap h2 small { font-family: "Gotham", sans-serif; letter-spacing: 0; color: var(--tenue); font-size: .75rem; }
.ob-lista { list-style: none; display: grid; gap: 6px; }
.ob-item {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 9px 10px;
  border-radius: 10px; border: 1px solid transparent; background: var(--navy-2); cursor: pointer; text-align: left; width: 100%;
}
.ob-item:hover, .ob-item:focus-visible { border-color: var(--linea); outline: none; }
.ob-item .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--c); }
.ob-item b { display: block; font-size: .86rem; font-weight: 600; line-height: 1.3; }
.ob-item small { display: block; color: var(--tenue); font-size: .74rem; margin-top: 2px; }
.ob-item .lv { margin-right: 4px; }
.ob-vacio { color: var(--tenue); font-size: .85rem; padding: 10px; }

.lv { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 0; }
.lv0 { background: #8a94b0; } .lv1 { background: var(--verde); } .lv2 { background: var(--naranja); } .lv3 { background: var(--rojo); }

.ob-creditos { margin-top: auto; font-size: .7rem; color: var(--tenue); display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(245,245,241,.08); }
.ob-creditos a { color: var(--tenue); text-decoration: none; }
.ob-creditos a:hover { color: var(--lima); }

/* ------------------------------------------------------------ leyenda y tiempo */
.ob-leyenda {
  position: absolute; left: 12px; top: 12px; display: flex; gap: 12px; padding: 7px 12px; border-radius: 999px;
  background: rgba(11,19,43,.85); border: 1px solid rgba(245,245,241,.1); font-size: .75rem; z-index: 2;
}
.ob-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ob-tiempo { height: var(--tiempo); flex: 0 0 var(--tiempo); background: var(--navy); border-top: 1px solid var(--linea); padding: 8px 14px 6px; }
.ob-tiempo-head { display: flex; justify-content: space-between; font-size: .68rem; letter-spacing: 1.5px; color: var(--tenue); margin-bottom: 4px; }
.ob-hist { width: 100%; height: calc(100% - 18px); display: block; }
.ob-hist rect.b { fill: rgba(212,255,0,.35); }
.ob-hist rect.b.in { fill: var(--lima); }
.ob-hist rect.r { fill: var(--rojo); }
.ob-hist text { fill: var(--tenue); font-size: 10px; }

/* ------------------------------------------------------------ ventana del evento */
.maplibregl-popup-content { background: var(--navy-2); color: var(--paper); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.maplibregl-popup-tip { border-top-color: var(--navy-2) !important; border-bottom-color: var(--navy-2) !important; }
.maplibregl-popup-close-button { color: var(--tenue); font-size: 18px; right: 6px; top: 4px; }
.ob-pop { max-width: 300px; font-size: .82rem; line-height: 1.45; }
.ob-pop .t { display: flex; gap: 8px; align-items: center; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--tenue); margin-bottom: 4px; }
.ob-pop h3 { font-size: .98rem; margin-bottom: 8px; line-height: 1.3; }
.ob-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-bottom: 8px; }
.ob-pop dt { color: var(--tenue); }
.ob-pop .src { font-size: .74rem; color: var(--tenue); border-top: 1px solid rgba(245,245,241,.1); padding-top: 7px; }
.ob-pop .src a { color: var(--lima); }
.maplibregl-ctrl-attrib { background: rgba(11,19,43,.75) !important; color: var(--tenue); }
.maplibregl-ctrl-attrib a { color: var(--tenue) !important; }
.maplibregl-ctrl-group { background: var(--navy-2) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }

/* ------------------------------------------------------------ celular */
@media (max-width: 860px) {
  :root { --tiempo: 78px; }
  .ob-live #ob-actualizado { display: none; }
  .ob-panel-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--lima); background: transparent; color: var(--lima); font-family: "Skyrox", sans-serif; letter-spacing: 1px; font-size: .75rem;
  }
  .ob-live { margin-left: auto; }
  .ob-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--bar); width: auto; z-index: 4;
    transform: translateY(100%); transition: transform .25s ease; border-right: 0;
  }
  .ob-panel.is-open { transform: none; }
  .ob-bar { gap: 10px; padding: 0 12px; }
  .ob-name { font-size: 1rem; letter-spacing: 1.5px; }
  .ob-sub { font-size: 0.55rem; letter-spacing: 2px; }
  .ob-leyenda { top: 10px; left: 10px; font-size: .7rem; padding: 5px 10px; }
  #ob-tiempo-sel { display: none; }
}

/* ------------------------------------------------------------ curaduría */
.lvc { background: transparent; border: 2px solid var(--lima); width: 10px; height: 10px; }
.ob-curada-wrap .ob-item { border-color: rgba(212,255,0,.22); }
.ob-pop .desc { margin: 2px 0 8px; color: rgba(245,245,241,.85); }
.ob-pop { max-height: min(390px, calc(100vh - 330px)); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #2c3c72 transparent; }
.ob-pop .src ul { list-style: none; margin: 4px 0 6px; display: grid; gap: 3px; }
.ob-pop .src li { line-height: 1.35; }
.ob-pop .src b { color: var(--paper); font-weight: 600; }
.ob-pop .src small { color: var(--lima); font-size: .7rem; letter-spacing: .5px; }

/* ------------------------------------------------------------ incidentes, contexto y análisis */
.ob-nota { font-size: .72rem; color: var(--tenue); margin-top: 6px; line-height: 1.4; }
.ob-filtro-ctx { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  background: rgba(212,255,0,.1); border: 1px solid var(--lima); font-size: .8rem; }
.ob-filtro-ctx[hidden] { display: none; }
.ob-filtro-ctx button { background: none; border: 0; color: var(--lima); cursor: pointer; font-size: 1rem; }
.ob-analisis { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--linea); border-radius: 12px; background: rgba(255,255,255,.02); }
.ob-analisis h2 { font-family: "Skyrox", sans-serif; font-weight: normal; font-size: .95rem; letter-spacing: 1.5px; }
.ob-analisis h2 small { font-family: "Gotham", sans-serif; letter-spacing: 0; color: var(--tenue); font-size: .72rem; }
.ob-analisis h2 i { color: var(--lima); }
.ob-an-opciones .op-hex, .ob-an-opciones .op-clusters, .ob-an-opciones .op-regiones { display: none; }
.ob-an-opciones[data-modo="hex"] .op-hex, .ob-an-opciones[data-modo="clusters"] .op-clusters, .ob-an-opciones[data-modo="regiones"] .op-regiones { display: grid; gap: 6px; margin-bottom: 8px; }
.ob-an-opciones .ob-etq { margin: 4px 0 0; }
.ob-check { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--tenue); cursor: pointer; }
.ob-check input { accent-color: var(--lima); }
.ob-an-leyenda { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--tenue); }
.ob-an-leyenda[hidden] { display: none; }
.ob-an-leyenda i { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #2b4cb3, #8b5cf6 35%, #ff8a3d 60%, #ff3b3b); }
.ob-an-leyenda em { font-style: normal; }
.ob-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--lima);
  background: transparent; color: var(--lima); cursor: pointer; font-size: .8rem; }
.ob-btn:hover, .ob-btn.is-on { background: var(--lima); color: var(--navy); }
.ob-radio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ob-radio select { background: var(--navy-3); color: var(--paper); border: 1px solid rgba(245,245,241,.2); border-radius: 999px; padding: 7px 10px; font: inherit; font-size: .8rem; }
.ob-radio #ob-radio-res, .ob-radio .ob-nota { flex-basis: 100%; }
.ob-radio-tot { font-size: .85rem; }
.ob-radio-tipos { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--tenue); margin: 4px 0 8px; }
.ob-radio-lista { max-height: 260px; overflow-y: auto; }
.ob-radio-lista .ob-item b { font-size: .78rem; }
kbd { background: var(--navy-3); border: 1px solid rgba(245,245,241,.2); border-radius: 4px; padding: 0 4px; font-size: .7rem; }
.ob-pop .ok { color: var(--verde); }
.ob-pop .pend { color: var(--naranja); }
.ob-pop .ob-enlace { font-size: .78rem; margin: 4px 0 6px; }
.ob-pop .ob-enlace a { color: var(--lima); }
.ob-pop .desc small { color: var(--tenue); }
.ob-ctx { margin: 6px 0; }
.ob-ctx:empty { display: none; }
.ob-ctx-num { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--tenue); margin-bottom: 4px; }
.ob-ctx-num b { color: var(--paper); font-size: 1rem; }
.ob-ctx small { display: block; font-size: .7rem; color: var(--tenue); }
.ob-spark { width: 100%; height: 46px; display: block; margin: 4px 0 6px; }
.ob-spark rect { fill: var(--lima); opacity: .75; }
.ob-ctx .ob-btn { margin-top: 8px; }
.ob-lugares { margin-top: 2px; }

/* ------------------------------------------------------------ buscar un lugar */
.ob-lugar { position: relative; display: flex; flex-direction: column; gap: 10px; }
.ob-buscar { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 999px; background: var(--navy-3);
  border: 1px solid rgba(245,245,241,.2); }
.ob-buscar:focus-within { border-color: #00E5FF; box-shadow: 0 0 0 3px rgba(0,229,255,.15); }
.ob-buscar i { color: #00E5FF; }
.ob-buscar input { flex: 1; min-width: 0; background: none; border: 0; color: var(--paper); font: inherit; font-size: .88rem; padding: 11px 0; outline: none; }
.ob-buscar input::placeholder { color: var(--tenue); }
.ob-sugerencias { position: absolute; top: 46px; left: 0; right: 0; z-index: 20; list-style: none; margin: 0; padding: 6px;
  background: var(--navy-2); border: 1px solid rgba(0,229,255,.35); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
  max-height: 360px; overflow-y: auto; }
.ob-sugerencias[hidden] { display: none; }
.ob-sugerencias li[role="option"] { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ob-sugerencias li[role="option"] i { color: #00E5FF; margin-top: 3px; width: 16px; text-align: center; }
.ob-sugerencias li.is-sel, .ob-sugerencias li[role="option"]:hover { background: rgba(0,229,255,.12); }
.ob-sugerencias b { display: block; font-size: .86rem; }
.ob-sugerencias small { display: block; color: var(--tenue); font-size: .72rem; }
.ob-lugar-card { border: 1px solid rgba(0,229,255,.45); border-radius: 12px; padding: 12px; background: rgba(0,229,255,.05);
  display: flex; flex-direction: column; gap: 8px; }
.ob-lugar-card[hidden] { display: none; }
.ob-lugar-head { display: flex; gap: 10px; align-items: flex-start; }
.ob-lugar-head > i { color: #00E5FF; font-size: 1.1rem; margin-top: 3px; }
.ob-lugar-head > div { flex: 1; min-width: 0; }
.ob-lugar-head b { display: block; font-size: 1rem; }
.ob-lugar-head small { color: var(--tenue); font-size: .74rem; }
.ob-x { background: none; border: 0; color: #00E5FF; cursor: pointer; font-size: 1rem; padding: 2px 4px; }
.ob-margen button { font-size: .72rem; padding: 5px 9px; }
.ob-margen button.is-on { background: #00E5FF; border-color: #00E5FF; }
.ob-lugar-card .ob-radio-tot, .ob-lugar-card .ob-radio-tipos, .ob-lugar-card .ob-nota { margin: 0; }
.ob-compartir { align-self: flex-start; border-color: #00E5FF; color: #00E5FF; font-size: .78rem; max-width: 100%; overflow-wrap: anywhere; }
.ob-compartir:hover { background: #00E5FF; }

/* ------------------------------------------------------------ ficha de riesgo del lugar */
.ob-riesgo { border-top: 1px solid rgba(0,229,255,.25); padding-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.ob-riesgo:empty { display: none; }
.ob-riesgo h3 { font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: #00E5FF; margin: 0; }
.ob-rg h4 { font-size: .86rem; margin: 0 0 4px; }
.ob-rg h4 i { color: #00E5FF; width: 18px; }
.ob-rg h4 small { color: var(--tenue); font-weight: 400; font-size: .7rem; }
.ob-rg p { margin: 2px 0; font-size: .8rem; }
.ob-rg small { color: var(--tenue); font-size: .72rem; }
.ob-rg .ob-ctx-num { margin: 2px 0; }
.ob-rg-dato small { display: block; }
.ob-rg-lista { list-style: none; margin: 4px 0 0; padding: 0; font-size: .78rem; display: flex; flex-direction: column; gap: 3px; }
.ob-nv { padding: 1px 8px; border-radius: 999px; font-size: .74rem; }
.ob-nv.n0 { background: rgba(110,231,160,.18); color: var(--verde); }
.ob-nv.n1 { background: rgba(212,255,0,.15); color: var(--lima); }
.ob-nv.n2 { background: rgba(255,176,32,.18); color: var(--naranja); }
.ob-nv.n3 { background: rgba(255,77,77,.2); color: var(--rojo); }
.ob-spark-anios { height: 40px; }
.ob-spark-anios rect { fill: #00E5FF; }
.ob-spark-eje { display: flex; justify-content: space-between; font-size: .66rem; color: var(--tenue); margin-top: -4px; }

/* ------------------------------------------------------------ guía de bienvenida y consulta global */
.ob-guia-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(245,245,241,.25);
  background: transparent; color: var(--paper); cursor: pointer; font-size: .78rem; }
.ob-guia-btn i { color: var(--lima); }
.ob-guia-btn:hover, .ob-guia-btn:focus-visible { border-color: var(--lima); outline: none; }
.ob-guia { margin: auto; width: min(580px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); padding: 0;
  border: 1px solid var(--linea); border-radius: 16px; background: var(--navy); color: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; }
.ob-guia[open] { display: flex; flex-direction: column; }
.ob-guia::backdrop { background: rgba(3,6,16,.72); backdrop-filter: blur(3px); }
.ob-guia-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.ob-guia-head .ic-paso { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(212,255,0,.12); color: var(--lima); font-size: 1.1rem; }
.ob-guia-head small { display: block; color: var(--tenue); font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; }
.ob-guia-head h2 { font-family: "Skyrox", sans-serif; font-weight: normal; font-size: 1.15rem; letter-spacing: 1.5px; line-height: 1.2; }
.ob-guia-head .ob-x { margin-left: auto; color: var(--tenue); font-size: 1.1rem; }
.ob-guia-head .ob-x:hover { color: var(--lima); }
.ob-guia-cuerpo { padding: 16px 18px; overflow-y: auto; display: grid; gap: 14px; font-size: .86rem; line-height: 1.5;
  scrollbar-width: thin; scrollbar-color: #26325c transparent; }
.ob-guia-cuerpo p b { color: var(--lima); font-weight: 600; }
.ob-guia-lista { list-style: none; display: grid; gap: 11px; }
.ob-guia-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.ob-guia-lista li > i { color: var(--lima); margin-top: 3px; text-align: center; }
.ob-guia-lista .lv { vertical-align: -1px; }
.ob-guia-global { display: grid; gap: 12px; }
.ob-guia-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ob-guia-kpis .ob-kpi { padding: 10px; }
.ob-guia-kpis .ob-kpi b { font-size: 1.4rem; }
.ob-guia-sub { font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tenue); margin-bottom: -6px; }
.ob-guia-accion { justify-self: start; }
.ob-guia-pie { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--linea); }
.ob-guia-puntos { display: flex; gap: 6px; margin-right: auto; }
.ob-guia-puntos button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 5px; background: rgba(245,245,241,.25); cursor: pointer; transition: width .2s; }
.ob-guia-puntos button.is-on { width: 22px; background: var(--lima); }
.ob-guia-pie .ob-btn.sec { border-color: rgba(245,245,241,.25); color: var(--paper); }
.ob-guia-pie .ob-btn.sec:hover { background: transparent; border-color: var(--lima); color: var(--lima); }
.ob-guia-pie .ob-btn.prim { background: var(--lima); color: var(--navy); font-weight: 700; }
@media (max-width: 860px) { .ob-guia-btn span { display: none; } .ob-guia-btn { padding: 7px 10px; } }
@media (max-width: 520px) {
  .ob-guia-kpis { grid-template-columns: 1fr 1fr; }
  .ob-guia-pie { flex-wrap: wrap; }
  .ob-guia-puntos { flex-basis: 100%; justify-content: center; margin: 0 0 4px; }
  .ob-guia-pie .ob-btn { flex: 1; justify-content: center; }
}