/*
SPDX-License-Identifier: MIT
SPDX-FileCopyrightText: 2026 Bitcopper Tech SpA
*/

:root {
  --bg: #0b1220;
  --panel: rgba(11, 18, 32, 0.90);
  --borde: #24334d;
  --borde-suave: #1a2740;
  --texto: #eef2f8;
  --texto-tenue: #8ea1bd;
  --cielo: #4cc4f0;      /* acento de UI */
  --arena: #c9a26b;      /* huella construida */
  --oasis: #3f9e57;      /* NDVI vivo */
  --alerta: #f97316;     /* PDA / restricción */
  --error: #fb7185;
  --sombra: 0 12px 34px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--texto);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#map { position: absolute; inset: 0; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---- panel de control (instrumento) ---- */

.control-panel {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 320px;
  max-width: calc(100vw - 36px);
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow: var(--sombra);
  /* El panel creció con las capas y la hoja de ruta: se desplaza en vez
     de cortarse fuera de pantalla. */
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2a3a56 transparent;
  z-index: 10;
}

.marca-panel{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.marca-panel .marca-icono{width:30px;height:30px;object-fit:contain;border-radius:6px;flex:none}

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cielo);
  margin: 0 0 2px;
}

.panel-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.panel-sub {
  font-size: 11px;
  color: var(--texto-tenue);
  margin: 4px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borde-suave);
}

/* ---- toggles de capa ---- */

.layer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
}

.layer-item .lbl { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.layer-item .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dot.arena { background: var(--arena); }
.dot.oasis { background: var(--oasis); }
.dot.alerta { background: var(--alerta); }
.dot.proyecto { background: #ef4444; }
.dot.calle { background: #6db4ff; }
.dot.vial { background: #ffd400; }
.dot.aporte { background: #4cc4f0; }
.dot.geo { background: #8d7b6a; }
.dot.equip { background: #ffb454; }

/* modelador Three.js */
#canvas-container { position: absolute; inset: 0; display: block; }

.render-nav {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borde-suave);
  font-size: 11px;
  color: var(--texto-tenue);
}
.render-nav a { color: var(--cielo); text-decoration: none; }
.render-nav a:hover { text-decoration: underline; }
.instrucciones {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 10; font-size: 11px; color: var(--texto-tenue);
  background: rgba(11, 18, 32, 0.7); padding: 6px 14px; border-radius: 6px;
}

.layer-item .nota {
  display: block;
  font-size: 10px;
  color: var(--texto-tenue);
  margin-top: 2px;
  max-width: 200px;
}

.layer-item.no-disponible { opacity: 0.5; }

/* switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch input:disabled { cursor: not-allowed; }
.slider {
  position: absolute; inset: 0;
  background: #2a3a56;
  border-radius: 22px;
  transition: background 0.2s;
  pointer-events: none;
}
.slider::before {
  content: "";
  position: absolute;
  height: 16px; width: 16px;
  left: 3px; top: 3px;
  background: #dbe6f5;
  border-radius: 50%;
  transition: transform 0.2s;
}
.switch input:checked + .slider { background: var(--cielo); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--cielo); outline-offset: 2px; }

/* ---- KPIs ---- */

.kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borde-suave);
}
.kpi {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  padding: 9px 10px;
}
.kpi .num { font-size: 20px; font-weight: 600; line-height: 1; }
.kpi.arena .num { color: var(--arena); }
.kpi.oasis .num { color: var(--oasis); }
.kpi .cap { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-tenue); margin-top: 5px; }

/* ---- leyenda NDVI (elemento firma) ---- */

.ndvi-legend {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borde-suave);
}
.ndvi-legend .cap { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-tenue); }
.ndvi-rail {
  height: 8px;
  border-radius: 4px;
  margin: 6px 0 4px;
  background: linear-gradient(90deg,
    #4a3c28 0%, #8a7a52 14%, #cdd77a 28%, #9fe04f 45%, #4fe06a 62%, #22e070 78%, #00ff88 100%);
}
.ndvi-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--texto-tenue); }

/* ---- Time Machine (scrubber temporal) ---- */

.timemachine {
  margin-top: 12px;
  padding: 11px 12px;
  background: rgba(76, 196, 240, 0.08);
  border: 1px solid rgba(76, 196, 240, 0.3);
  border-radius: 9px;
}
.timemachine.no-disponible { opacity: 0.5; }
.tm-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.tm-head .cap { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cielo); }
.tm-head #tm-periodo { font-size: 13px; font-weight: 600; }
input[type="range"] {
  width: 100%;
  accent-color: var(--cielo);
  cursor: pointer;
}
input[type="range"]:disabled { cursor: not-allowed; }

/* ---- controles del efecto de polvo -------------------------------------- */
.polvo-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--borde-suave);
  border-radius: 9px;
  background: rgba(11, 18, 32, 0.64);
}
.polvo-panel h2 {
  margin: 0;
  color: var(--cielo);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Cabecera desplegable: clic para abrir/cerrar los controles. */
.polvo-panel > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
}
.polvo-panel > summary::-webkit-details-marker { display: none; }
.polvo-panel > summary::after {
  content: "▸";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--texto-tenue);
  font-size: 12px;
  transition: transform 0.15s ease;
}
.polvo-panel[open] > summary::after { transform: rotate(90deg); }
.polvo-panel > summary p {
  margin: 3px 0 0;
  font-size: 10px;
  color: var(--texto-tenue);
}
.polvo-panel[open] > summary p { margin-bottom: 10px; }
.polvo-control { display: block; margin-top: 8px; }
.polvo-control > span {
  display: flex;
  justify-content: space-between;
  color: var(--texto-tenue);
  font-size: 11px;
}
.polvo-control output { color: var(--texto); font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.polvo-control input { margin-top: 3px; }
.polvo-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--borde-suave);
  color: var(--texto-tenue);
  font-size: 11px;
}
.polvo-pie input[type="color"] {
  width: 26px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
.polvo-pie label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.polvo-pie input[type="checkbox"] { accent-color: var(--cielo); }

/* ---- status / errores (voz de la interfaz) ---- */

.status {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  max-width: min(560px, 90vw);
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 13px;
  z-index: 20;
  box-shadow: var(--sombra);
  background: rgba(11, 18, 32, 0.95);
  border: 1px solid var(--borde);
}
.status[data-tipo="error"] { border-color: var(--error); color: var(--error); }
.status.oculto { display: none; }

/* ---- responsive ---- */

@media (max-width: 520px) {
  .control-panel { top: 12px; left: 12px; right: 12px; width: auto; }
  .kpi .num { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .slider, .slider::before { transition: none; }
}

/* ---- leyenda de categorías del equipamiento ---- */
.leyenda-cat {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borde-suave);
}
.leyenda-cat.oculto { display: none; }
.leyenda-cat .cap {
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-tenue); margin-bottom: 8px;
}
.leyenda-cat .chips { display: flex; flex-wrap: wrap; gap: 5px 9px; }
.leyenda-cat .chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--texto-tenue); line-height: 1.6;
}
.leyenda-cat .chip i {
  width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block;
}
.leyenda-cat .chip b { color: var(--texto); font-weight: 600; }

/* ---- subtítulo secundario del panel ---- */
.panel-sub .sub2 { color: var(--texto-tenue); font-size: 10.5px; }

/* ---- capas estratégicas (hoja de ruta, NO operativas) ----
   Se muestran deliberadamente apagadas y sin interruptor: comunican visión
   sin insinuar que ya existen. */
.estrategicas {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--borde-suave);
}
.estrategicas .cap {
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-tenue); margin-bottom: 10px;
}
.estr {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0; opacity: 0.62;
}
.estr .marca-estr {
  width: 9px; height: 9px; margin-top: 4px; flex: none;
  border: 1px solid var(--texto-tenue); border-radius: 2px;
}
.estr .txt {
  flex: 1; font-size: 12px; line-height: 1.35; color: var(--texto);
}
.estr .txt em {
  display: block; font-style: normal; font-size: 10px;
  color: var(--texto-tenue); margin-top: 1px;
}
.estr .tag {
  flex: none; font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texto-tenue); border: 1px solid var(--borde-suave);
  border-radius: 20px; padding: 2px 7px; margin-top: 2px; white-space: nowrap;
}

/* ---- botón del muro ciudadano ---- */
.btn-muro {
  display: block; margin-top: 16px; padding: 13px 15px; text-decoration: none;
  border: 1px solid rgba(76, 196, 240, 0.42); border-radius: 10px;
  background: rgba(76, 196, 240, 0.10); transition: 0.18s;
}
.btn-muro:hover { background: rgba(76, 196, 240, 0.19); border-color: var(--cielo); }
.btn-muro .bm-eti {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--cielo); margin-bottom: 3px;
}
.btn-muro .bm-sub { display: block; font-size: 10.5px; color: var(--texto-tenue); line-height: 1.4; }

/* barra de desplazamiento del panel de control */
.control-panel::-webkit-scrollbar { width: 9px; }
.control-panel::-webkit-scrollbar-track { background: transparent; }
.control-panel::-webkit-scrollbar-thumb {
  background: #2a3a56; border-radius: 5px; border: 2px solid transparent;
  background-clip: padding-box;
}
.control-panel::-webkit-scrollbar-thumb:hover { background: #3c5170; background-clip: padding-box; }

/* nota al pie de la leyenda geológica: límite de uso, siempre visible */
.leyenda-cat .geo-nota {
  margin-top: 9px; font-size: 9.5px; line-height: 1.45;
  color: var(--texto-tenue); border-left: 2px solid var(--borde-suave); padding-left: 8px;
}
.leyenda-cat .chip[title] { cursor: help; }

/* ---- viñeta de ocultar/mostrar el panel ---- */
.control-panel { transition: transform .28s ease; }
.control-panel.oculto { transform: translateX(calc(-100% - 24px)); }

.panel-toggle {
  position: fixed; top: 18px; left: 356px; z-index: 60;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--acento, #7dd3fc);
  border: 1px solid rgba(125, 211, 252, .22); border-radius: 9px;
  font-size: 16px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: left .28s ease, background .15s ease;
}
.panel-toggle:hover { background: rgba(24, 36, 59, .95); }
.panel-toggle.replegado { left: 14px; }

@media (max-width: 760px) {
  .panel-toggle { left: auto; right: 14px; top: 14px; }
  .panel-toggle.replegado { left: auto; right: 14px; }
}

/* ---- ficha de detalle por elemento ---- */
.ficha-detalle {
  position: fixed; top: 18px; right: 18px; z-index: 70;
  width: 330px; max-height: calc(100vh - 36px);
  overflow-y: auto; padding: 18px 18px 16px;
  background: var(--panel); color: var(--texto, #e2e8f0);
  border: 1px solid rgba(125, 211, 252, .18); border-radius: 14px;
  backdrop-filter: blur(10px);
  opacity: 0; transform: translateX(10px);
  transition: opacity .18s ease, transform .18s ease;
}
.ficha-detalle.abierta { opacity: 1; transform: none; }
.ficha-detalle[hidden] { display: none; }

.fd-cerrar {
  position: absolute; top: 12px; right: 12px;
  width: 24px; height: 24px; padding: 0; line-height: 1;
  background: none; border: none; cursor: pointer;
  color: var(--texto-tenue, #64748b); font-size: 19px;
}
.fd-cerrar:hover { color: #e2e8f0; }

.fd-capa {
  margin: 0 0 2px; font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--acento, #7dd3fc);
}
.fd-titulo {
  margin: 0 0 13px; font-size: 15px; font-weight: 600;
  line-height: 1.3; padding-right: 22px;
}

.ficha-detalle dl { margin: 0; font-size: 11.5px; }
.ficha-detalle dt {
  color: var(--texto-tenue, #64748b); font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase; margin-top: 11px;
}
.ficha-detalle dd { margin: 2px 0 0; line-height: 1.45; word-break: break-word; }

.fd-num { font-variant-numeric: tabular-nums; }
.fd-vacio { color: var(--texto-tenue, #64748b); font-style: italic; }
.fd-doc { color: var(--acento, #7dd3fc); text-decoration: none; border-bottom: 1px dotted; }
.fd-doc:hover { border-bottom-style: solid; }

.fd-sin-atributos {
  margin: 0; font-size: 11.5px; line-height: 1.5;
  color: var(--texto-tenue, #64748b);
  border-left: 2px solid rgba(125, 211, 252, .25); padding-left: 10px;
}
.fd-fuente {
  margin: 15px 0 0; padding-top: 10px; font-size: 10px; line-height: 1.45;
  color: var(--texto-tenue, #64748b);
  border-top: 1px solid rgba(148, 163, 184, .14);
}

@media (max-width: 760px) {
  .ficha-detalle {
    top: auto; bottom: 12px; right: 12px; left: 12px;
    width: auto; max-height: 46vh;
  }
}

/* punto de color del toggle de uso de suelo */
.dot.uso { background: linear-gradient(135deg, #b4703a 0 50%, #4d9e5a 50% 100%); }

/* punto de color del toggle de poblaciones y tomas */
.dot.toma { background: linear-gradient(135deg, #e8a13c 0 50%, #8fa8c4 50% 100%); }

/* ---- sección de integración institucional ---- */
.inst{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:start;
  padding:26px 28px;border:1px solid var(--linea,#1e2b45);border-radius:14px;
  background:rgba(125,211,252,.03)}
.inst-txt h2{font-size:21px;margin:0 0 12px;font-weight:600;letter-spacing:-.01em}
.inst-txt p{font-size:14px;line-height:1.65;color:var(--tenue,#7c8ba3);margin:0 0 13px}
.inst-ir{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:500;
  color:var(--acento,#7dd3fc);text-decoration:none}
.inst-ir:hover{text-decoration:underline}
.inst-lista{list-style:none;margin:0;padding:0}
.inst-lista li{padding:11px 0;border-bottom:1px solid var(--linea,#1e2b45)}
.inst-lista li:last-child{border-bottom:none}
.inst-lista b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.inst-lista span{font-size:12px;color:var(--tenue,#7c8ba3)}
@media (max-width:820px){ .inst{grid-template-columns:1fr} }

/* pie del panel: cambio entre vistas */
.pie-render{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--linea,#1e2b45);
  font-size:11.5px;color:var(--texto-tenue,#7c8ba3)}
.pie-render a{color:var(--acento,#7dd3fc);text-decoration:none}
.pie-render a:hover{text-decoration:underline}

/* PRAI_PDA_CAPAS — puntos de leyenda de las capas del expediente PDA */
.dot.equidad { background: #a855f7; }

/* PRAI_RESILIENCIA — puntos de leyenda */
.dot.cauce { background: #38bdf8; }
.dot.acogida { background: #fbbf24; }
.dot.designado { background: #22c55e; }

/* PRAI_INTERCENSAL */
.dot.intercensal { background: #f59e0b; }

/* PRAI_DISPERSION — modelación, no medición */
.dot.disp-anual { background: #ef4444; }
.dot.disp-p98 { background: #f97316; }
.dot.disp-2033 { background: #a78bfa; }

/* PRAI_PRIORIZACION */
.dot.prioridad { background: #10b981; }

/* PRAI_VIENTO */
.dot.viento { background: #38bdf8; }

/* PRAI_BRUJULA — rosa de vientos en el panel */
.brujula-tabs { display: flex; gap: 4px; margin: 10px 0 12px; }
.brujula-tabs button {
  flex: 1; padding: 5px 2px; font-size: 8.5pt; font-family: inherit;
  color: #94a3b8; background: rgba(148,163,184,.10);
  border: 1px solid rgba(148,163,184,.18); border-radius: 5px;
  cursor: pointer; transition: .15s;
}
.brujula-tabs button:hover { color: #cbd5e1; background: rgba(148,163,184,.18); }
.brujula-tabs button[aria-pressed="true"] {
  color: #0f172a; background: #38bdf8; border-color: #38bdf8; font-weight: 600;
}
.brujula-caja { display: flex; align-items: center; gap: 14px; }
.brujula-datos { flex: 1; min-width: 0; }
.brujula-dir { font-size: 15pt; font-weight: 700; color: #38bdf8; line-height: 1.1; }
.brujula-pct { font-size: 9pt; color: #cbd5e1; margin-top: 2px; }
.brujula-vel { font-size: 9pt; color: #94a3b8; margin-top: 4px; }
.brujula-umb { font-size: 8pt; color: #64748b; margin-top: 2px; }
.brujula-nota { font-size: 7.5pt; color: #64748b; line-height: 1.45; margin: 10px 0 0; }

/* PRAI_INDUSTRIA */
.dot.faena { background: #a16207; }
.dot.retc { background: #7c3aed; }