/* ══════════════════════════════════════════════════════════════════════════
   PREVISIO · INTERFAZ SALA DE CONTROL
   Propiedad intelectual y desarrollo por INTELLIGENTIA (intelligentia.dev)

   Se carga DESPUÉS de styles.css y la reescribe. Se ha optado por sobrescribir
   en lugar de reformar app.php porque son cien kilobytes de HTML cuyos
   identificadores consulta medio megabyte de JavaScript: reescribirlo obligaría
   a verificar de nuevo cada enlace. Así el rediseño es reversible quitando dos
   líneas de app.php.

   PRINCIPIO DE DISEÑO — el único que no debe romperse:
   El cromo (paneles, botones, rótulos) va monocromo. El COLOR SE RESERVA AL
   DATO: rojo de zona crítica, verde de zona segura, rampa azul de calados,
   severidad de las alertas. El contraste es relativo, no absoluto: apagando el
   cromo, el color del mapa se lee más, no menos. Cuando todo grita, nada
   destaca, y aquí lo que debe destacar es lo que salva vidas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PASO 1 · TEMAS ─────────────────────────────────────────────────────── */

body.ui {
  --ui-tinta:   #e5e7eb;
  --ui-tinta2:  #9ca3af;
  --ui-tinta3:  #6b7280;
  --ui-fondo:   rgba(17, 20, 24, .94);
  --ui-fondo2:  rgba(9, 11, 14, .9);
  --ui-linea:   #2f3339;
  --ui-acento:  #e5e7eb;
  --ui-acento-tinta: #111418;
  --ui-resalte: rgba(229, 231, 235, .12);
  --ui-sombra:  0 6px 24px rgba(0, 0, 0, .34);

  /* Colores de DATO. No son decoración: cada uno significa algo y por eso
     sobreviven al monocromo del cromo. */
  --ui-grave:  #dc2626;
  --ui-grave-t:#f87171;
  --ui-aviso:  #d97706;
  --ui-aviso-t:#fbbf24;
  --ui-bien:   #4b8b6a;
  --ui-bien-t: #6ee7b7;

  --ui-cab: 38px;
  --ui-rail: 52px;
}

body.ui.ui-claro {
  --ui-tinta:   #1f2328;
  --ui-tinta2:  #57606a;
  --ui-tinta3:  #848d97;
  --ui-fondo:   rgba(252, 252, 252, .96);
  --ui-fondo2:  #ffffff;
  --ui-linea:   #d8dee4;
  --ui-acento:  #1f2328;
  --ui-acento-tinta: #ffffff;
  --ui-resalte: rgba(31, 35, 40, .07);
  --ui-sombra:  0 4px 18px rgba(31, 35, 40, .18);

  --ui-grave:  #cf222e;
  --ui-grave-t:#cf222e;
  --ui-aviso:  #9a6700;
  --ui-aviso-t:#9a6700;
  --ui-bien:   #2da44e;
  --ui-bien-t: #1a7f37;
}

/* ── Tipografía: una familia, una escala, sin negrita salvo en cifras ───── */
body.ui,
body.ui button,
body.ui input,
body.ui select,
body.ui textarea {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal;
}

body.ui .section-title,
body.ui .legend-group-title,
body.ui .metric-title {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ui-tinta3);
  text-shadow: none;
}

body.ui .metric-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-tinta);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

/* Los rótulos de los deslizadores y su valor */
body.ui .slider-label { color: var(--ui-tinta2); font-size: 12px; font-weight: 400; }
body.ui .slider-label strong,
body.ui .slider-val {
  color: var(--ui-tinta) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
body.ui .slider-input { accent-color: var(--ui-tinta2); }

/* ── Superficies ───────────────────────────────────────────────────────── */
body.ui .control-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 4px;
}

body.ui .section-title {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ui-linea);
  margin: 18px 0 12px;
}
body.ui .tab-pane > .section-title:first-child { margin-top: 0; }

/* ── Botones ───────────────────────────────────────────────────────────── */
body.ui .btn-header,
body.ui .btn-ignition,
body.ui .btn-risk-filter {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ui-linea) !important;
  border-radius: 3px !important;
  color: var(--ui-tinta2) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  padding: 6px 11px !important;
  text-shadow: none !important;
  transition: background .12s ease, color .12s ease;
}
body.ui .btn-ignition { width: 100%; padding: 8px 11px !important; }

body.ui .btn-header:hover,
body.ui .btn-ignition:hover,
body.ui .btn-risk-filter:hover {
  background: var(--ui-resalte) !important;
  color: var(--ui-tinta) !important;
}

body.ui .btn-header.active,
body.ui .btn-risk-filter.active {
  background: var(--ui-acento) !important;
  color: var(--ui-acento-tinta) !important;
  border-color: var(--ui-acento) !important;
}

/* Distintivos de marca: se apagan, no desaparecen */
body.ui .badge-pro,
body.ui .badge-intelligentia {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ui-linea) !important;
  color: var(--ui-tinta3) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 10px !important;
  letter-spacing: .06em;
}

/* ── Pestañas ──────────────────────────────────────────────────────────── */
body.ui .tab-btn {
  color: var(--ui-tinta3);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  padding: 8px 6px;
  border-bottom: 1px solid transparent;
  text-shadow: none;
}
body.ui .tab-btn.active {
  color: var(--ui-tinta);
  background: transparent;
  border-bottom-color: var(--ui-acento);
  box-shadow: none;
}

/* ── Leyenda: el color de las muestras es DATO y no se toca ────────────── */
body.ui .legend-item { color: var(--ui-tinta2); font-size: 11.5px; font-weight: 400; }
body.ui .legend-color { border-radius: 2px; box-shadow: none; }

/* ── Métricas ──────────────────────────────────────────────────────────── */
body.ui .metric-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ui-linea);
  border-radius: 0;
  padding: 5px 0;
  box-shadow: none;
}

/* ── Insignias de estado: conservan color porque comunican severidad ───── */
body.ui .status-badge {
  background: var(--ui-fondo) !important;
  border: 1px solid var(--ui-linea) !important;
  border-radius: 3px !important;
  color: var(--ui-tinta2) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ── Campos de texto ───────────────────────────────────────────────────── */
body.ui input[type="text"],
body.ui input[type="number"],
body.ui select,
body.ui textarea {
  background: var(--ui-fondo2);
  border: 1px solid var(--ui-linea);
  border-radius: 2px;
  color: var(--ui-tinta);
  font-size: 12px;
  padding: 6px 8px;
  box-shadow: none;
}

/* ── Barras de desplazamiento discretas ────────────────────────────────── */
body.ui ::-webkit-scrollbar { width: 9px; height: 9px; }
body.ui ::-webkit-scrollbar-track { background: transparent; }
body.ui ::-webkit-scrollbar-thumb { background: var(--ui-linea); border-radius: 5px; }
body.ui ::-webkit-scrollbar-thumb:hover { background: var(--ui-tinta3); }

/* ── Se retiran resplandores y animaciones decorativas heredadas ───────── */
body.ui .app-header,
body.ui .sidebar-panel,
body.ui .control-card,
body.ui .metric-item,
body.ui .status-badge { animation: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PASO 2 · BARRA DE ÚTILES Y RAÍL DE HERRAMIENTAS
   ══════════════════════════════════════════════════════════════════════════ */

body.ui .ui-utiles {
  position: fixed; top: 8px; right: 12px; z-index: 10050;
  display: flex; gap: 4px;
}
body.ui .ui-utiles button {
  width: 30px; height: 26px; font-size: 13px; line-height: 1; cursor: pointer;
  background: var(--ui-fondo); color: var(--ui-tinta2);
  border: 1px solid var(--ui-linea); border-radius: 3px;
}
body.ui .ui-utiles button:hover { background: var(--ui-resalte); color: var(--ui-tinta); }

body.ui .ui-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--ui-rail); z-index: 9000;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0; background: var(--ui-fondo); border-right: 1px solid var(--ui-linea);
}
body.ui .ui-rail button {
  width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
  color: var(--ui-tinta3); font-size: 17px; line-height: 1; border-radius: 3px;
}
body.ui .ui-rail button:hover { background: var(--ui-resalte); color: var(--ui-tinta); }
body.ui .ui-rail button.on {
  background: var(--ui-resalte); color: var(--ui-tinta);
  box-shadow: inset 2px 0 0 var(--ui-acento);
}
body.ui .ui-rail .ui-sep { width: 26px; height: 1px; background: var(--ui-linea); margin: 6px 0; flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   PASO 3 y 4 · VENTANAS
   ══════════════════════════════════════════════════════════════════════════ */

body.ui .ui-ventana {
  position: fixed !important;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-fondo) !important;
  border: 1px solid var(--ui-linea) !important;
  border-radius: 3px !important;
  box-shadow: var(--ui-sombra) !important;
  color: var(--ui-tinta);
  backdrop-filter: blur(14px);
  min-width: 240px; min-height: 120px;
  z-index: 600;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  resize: none;
}
body.ui .ui-ventana.ui-activa { border-color: var(--ui-tinta3) !important; }
body.ui .ui-ventana.ui-oculta { display: none !important; }

body.ui .ui-v-cab {
  flex: none; display: flex; align-items: center; gap: 8px; height: 28px;
  padding: 0 6px 0 10px; border-bottom: 1px solid var(--ui-linea);
  cursor: grab; user-select: none;
}
body.ui .ui-v-cab:active { cursor: grabbing; }
body.ui .ui-v-tit {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ui-tinta3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ui .ui-v-btns { margin-left: auto; display: flex; gap: 1px; }
body.ui .ui-v-btns button {
  width: 22px; height: 20px; border: none; background: transparent;
  color: var(--ui-tinta3); font-size: 13px; line-height: 1; cursor: pointer; border-radius: 2px;
}
body.ui .ui-v-btns button:hover { background: var(--ui-resalte); color: var(--ui-tinta); }

body.ui .ui-v-cuerpo {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 12px 14px; font-size: 12px;
  /* El panel de control traía su propia altura y desplazamiento; dentro de la
     ventana los gobierna la ventana. */
  max-height: none !important; height: auto !important;
}

/* Tiradores de redimensión, enteros dentro del panel */
body.ui .ui-tir { position: absolute; z-index: 5; }
body.ui .ui-tir-n  { top: 0; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
body.ui .ui-tir-s  { bottom: 0; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
body.ui .ui-tir-o  { left: 0; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
body.ui .ui-tir-e  { right: 0; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
body.ui .ui-tir-no { left: 0; top: 0; width: 12px; height: 12px; cursor: nwse-resize; }
body.ui .ui-tir-ne { right: 0; top: 0; width: 12px; height: 12px; cursor: nesw-resize; }
body.ui .ui-tir-so { left: 0; bottom: 0; width: 14px; height: 14px; cursor: nesw-resize; }
body.ui .ui-tir-se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
body.ui .ui-tir-se::after {
  content: ''; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px;
  border-right: 1.5px solid var(--ui-tinta3); border-bottom: 1.5px solid var(--ui-tinta3); opacity: .5;
}

/* ── Cabecera de la aplicación: se aplana y se aparta del raíl ─────────── */
body.ui #appHeader {
  top: 0 !important; left: var(--ui-rail) !important;
  width: calc(100vw - var(--ui-rail)) !important;
  background: var(--ui-fondo) !important;
  border-bottom: 1px solid var(--ui-linea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 5px 12px !important;
  backdrop-filter: blur(14px);
}
body.ui #appHeader .brand-title { font-size: 12px; font-weight: 400; letter-spacing: .08em;
                                  text-transform: uppercase; color: var(--ui-tinta); text-shadow: none; }
body.ui #appHeader .brand-subtitle { font-size: 10.5px; color: var(--ui-tinta3); font-weight: 400; }
body.ui #appHeader .brand-logo { filter: grayscale(1) contrast(.9); opacity: .8; }

/* Cinta de avisos y barra de reproducción */
body.ui #liveAlertTickerBar {
  background: var(--ui-fondo) !important;
  border-bottom: 1px solid var(--ui-linea) !important;
  color: var(--ui-tinta2) !important;
  font-size: 11px !important;
  box-shadow: none !important;
}
body.ui #hudPlayback {
  background: var(--ui-fondo) !important;
  border: 1px solid var(--ui-linea) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  left: calc(var(--ui-rail) + 12px) !important;
}

/* Modales: misma retícula, sin degradados */
body.ui #riverInfoModal > div,
body.ui #esAlertModal > div,
body.ui #proEmergencyAlertModal > div {
  background: var(--ui-fondo) !important;
  border: 1px solid var(--ui-linea) !important;
  border-radius: 3px !important;
  box-shadow: var(--ui-sombra) !important;
  color: var(--ui-tinta) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTROLES DEL MAPA · zona reservada
   Estaban en `bottomright`, tapados por la barra de reproducción: medido, el
   zoom quedaba oculto en los dos módulos. Se llevan a la izquierda y POR
   ENCIMA de las ventanas: el mando puede mover un panel a cualquier sitio,
   pero el zoom del mapa no puede quedar nunca inalcanzable.
   ══════════════════════════════════════════════════════════════════════════ */
body.ui .leaflet-control-zoom.ui-zoom-reubicado {
  position: fixed !important;
  left: calc(var(--ui-rail) + 12px) !important;
  bottom: 92px !important;
  right: auto !important; top: auto !important;
  z-index: 9500 !important;
  border: 1px solid var(--ui-linea) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  overflow: hidden;
}
body.ui .leaflet-control-zoom a {
  background: var(--ui-fondo) !important;
  color: var(--ui-tinta2) !important;
  border: none !important;
  border-bottom: 1px solid var(--ui-linea) !important;
  width: 30px !important; height: 30px !important; line-height: 30px !important;
  font-size: 16px !important; font-weight: 400 !important;
}
body.ui .leaflet-control-zoom a:last-child { border-bottom: none !important; }
body.ui .leaflet-control-zoom a:hover { background: var(--ui-resalte) !important; color: var(--ui-tinta) !important; }

body.ui .leaflet-control-attribution {
  background: var(--ui-fondo) !important;
  color: var(--ui-tinta3) !important;
  font-size: 9.5px !important;
  border: 1px solid var(--ui-linea) !important;
  border-right: none; border-bottom: none;
  border-radius: 3px 0 0 0 !important;
}
body.ui .leaflet-control-attribution a { color: var(--ui-tinta2) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PASO 5 · MODO PRESENTACIÓN
   Sólo el terreno y la simulación. La rueda del ratón y el arrastre siguen
   funcionando, así que no se pierde el manejo del mapa.
   ══════════════════════════════════════════════════════════════════════════ */
body.ui.ui-presentacion #appHeader,
body.ui.ui-presentacion #liveAlertTickerBar,
body.ui.ui-presentacion #hudPlayback,
body.ui.ui-presentacion #simStateBanner,
body.ui.ui-presentacion .ui-rail,
body.ui.ui-presentacion .ui-utiles,
body.ui.ui-presentacion .ui-ventana,
body.ui.ui-presentacion .leaflet-control-container,
body.ui.ui-presentacion .leaflet-control-zoom.ui-zoom-reubicado { display: none !important; }

body.ui .ui-pista {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 10060;
  display: none; align-items: center; gap: 9px; padding: 8px 16px;
  background: rgba(17, 20, 24, .82); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px; color: #e5e7eb; font-size: 12px;
  transition: opacity .6s ease; backdrop-filter: blur(6px); pointer-events: none;
}
body.ui.ui-presentacion .ui-pista { display: flex; }
body.ui .ui-pista.ui-desvanecida { opacity: 0; }
body.ui .ui-tecla {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 3px; padding: 2px 7px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CABECERA EN UNA SOLA FILA
   Medida antes del cambio: 138 px de alto con dieciséis botones repartidos en
   tres filas, que es el segundo elemento que más mapa tapaba. Se comprime a
   una sola línea con desplazamiento horizontal: ningún botón desaparece, pero
   la cabecera pasa a ocupar la altura de una barra de herramientas.
   ══════════════════════════════════════════════════════════════════════════ */
body.ui #appHeader {
  top: 30px !important;              /* justo debajo de la cinta de avisos */
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex; align-items: center;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
body.ui #appHeader > div {
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: max-content !important;
  min-width: 100% !important;
  align-items: center !important;
}
/* Los grupos de botones se desplazan en horizontal en vez de saltar de línea */
body.ui #appHeader > div > div {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  gap: 2px !important;
  scrollbar-width: thin;
}
body.ui #appHeader > div > div::-webkit-scrollbar { height: 4px; }
body.ui #appHeader .btn-header {
  padding: 4px 9px !important;
  font-size: 11.5px !important;
  white-space: nowrap;
  flex: none;
}
/* La marca se reduce a una línea: el subtítulo lo repite la cinta de avisos */
body.ui #appHeader .brand-subtitle { display: none !important; }
body.ui #appHeader .brand-logo { height: 22px !important; width: auto !important; }
body.ui #appHeader .drag-grip { display: none !important; }

/* La cinta de avisos, fina y desplazable */
body.ui #liveAlertTickerBar {
  height: 30px !important;
  padding-left: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Las ventanas arrancan por debajo de la cabecera */
body.ui .ui-ventana { margin-top: 0; }

/* ── Tarjetas de aviso heredadas dentro de los paneles ─────────────────────
   El bloque del teléfono de emergencia venía en rojo pleno y ocupaba el tercio
   superior del panel de control. Se convierte en un bloque sobrio con filete:
   el dato sigue destacando, pero deja de competir con el mapa. */
body.ui #sidebarPanel [style*="background:linear-gradient"],
body.ui #sidebarPanel [style*="background: linear-gradient"] {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ui-linea) !important;
  border-left: 3px solid var(--ui-grave) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--ui-tinta2) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CABECERAS PROPIAS DE LOS PANELES, REUTILIZADAS COMO BARRA DE TÍTULO
   Cada panel ya traía la suya. Se les da el aspecto nuevo en lugar de
   superponerles otra: dos barras de título con dos botones de minimizar que
   hacen cosas distintas es peor que no tener ninguna.
   ══════════════════════════════════════════════════════════════════════════ */
body.ui .ui-ventana > .ui-v-cab {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--ui-linea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 28px; height: 28px;
  padding: 0 6px 0 10px !important;
  margin: 0 !important;
  display: flex; align-items: center; gap: 8px;
  color: var(--ui-tinta3) !important;
  font-size: 10.5px !important;
  letter-spacing: .09em; text-transform: uppercase;
  cursor: grab; user-select: none; flex: none;
  overflow: hidden; white-space: nowrap;
}
body.ui .ui-ventana > .ui-v-cab:active { cursor: grabbing; }
body.ui .ui-ventana > .ui-v-cab * {
  background: transparent !important;
  background-image: none !important;
  color: var(--ui-tinta3) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: .09em;
  padding: 0 !important;
  margin: 0 !important;
}
/* Los conmutadores de pestaña del chat sí deben verse como tales */
body.ui #liveChatPanel .ui-v-cab { display: flex; }
body.ui .ui-v-cab .drag-grip,
body.ui .ui-v-cab img { display: none !important; }

body.ui .ui-v-btns { margin-left: auto !important; flex: none; }
body.ui .ui-v-btns button {
  width: 22px !important; height: 20px !important;
  font-size: 13px !important; line-height: 1 !important;
  cursor: pointer; border-radius: 2px !important;
  color: var(--ui-tinta3) !important;
}
body.ui .ui-v-btns button:hover { background: var(--ui-resalte) !important; color: var(--ui-tinta) !important; }

/* ── El bloque del teléfono de emergencia ──────────────────────────────────
   Venía en rojo pleno ocupando el tercio superior del panel. El dato importa,
   el fondo saturado no: filete rojo y tipografía sobria. */
body.ui #sidebarPanel .emergency-phone-card,
body.ui #sidebarPanel [class*="emergency"],
body.ui #sidebarPanel [class*="phone"] {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ui-linea) !important;
  border-left: 3px solid var(--ui-grave) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CABECERA DE LA APLICACIÓN · una fila con desplazamiento
   Dieciséis botones no caben en una línea ni a 1920 px. En lugar de apilarlos
   en tres filas —138 px de mapa tapado— la fila se desplaza en horizontal:
   ningún botón desaparece y la altura queda en la de una barra de herramientas.
   ══════════════════════════════════════════════════════════════════════════ */
body.ui #appHeader > div {
  display: flex !important;
  justify-content: flex-start !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
body.ui #appHeader > div > * { flex: none !important; }
body.ui #appHeader .brand { max-width: 190px; overflow: hidden; }
body.ui #appHeader .brand-title { font-size: 11px !important; white-space: nowrap; }

/* ── Bloques con degradado en el atributo `style` ──────────────────────────
   Los degradados de app.php son siempre decoración, y no se pueden alcanzar
   cómodamente desde una hoja de estilo. La capa de interfaz los marca con
   .ui-plano y aquí se apagan, conservando la tinta dominante como filete: el
   bloque sigue leyéndose como grave o urgente, pero deja de competir con el
   mapa. Los fondos de color PLANO no se tocan: ahí suele haber dato. */
body.ui .ui-plano {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ui-linea) !important;
  border-left: 3px solid var(--ui-filete, var(--ui-tinta3)) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  animation: none !important;
  color: var(--ui-tinta2) !important;
  text-shadow: none !important;
}
body.ui .ui-plano * { text-shadow: none !important; }
body.ui .ui-plano a { color: var(--ui-tinta) !important; }

/* Pestañas del chat: son controles, no dato */
body.ui #btnTabChatVecinal,
body.ui #btnTabChatAI {
  background: transparent !important;
  color: var(--ui-tinta3) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  box-shadow: none !important;
}
body.ui #btnTabChatVecinal.active,
body.ui #btnTabChatAI.active {
  color: var(--ui-tinta) !important;
  border-bottom-color: var(--ui-acento) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA CLARO · legibilidad del texto heredado
   El HTML trae centenares de `color:#fff` y `color:#e2e8f0` escritos en el
   atributo `style`. Sobre el fondo oscuro no se notaban; al pasar a fondo
   claro dejaban texto blanco sobre blanco, ilegible. Se fuerza la tinta en
   los contenedores de cromo. La severidad no se pierde: la llevan los filetes
   laterales de .ui-plano y los colores de las muestras de la leyenda, que son
   fondos y no texto.
   ══════════════════════════════════════════════════════════════════════════ */
body.ui.ui-claro .ui-ventana,
body.ui.ui-claro .ui-ventana *,
body.ui.ui-claro #appHeader,
body.ui.ui-claro #appHeader *,
body.ui.ui-claro #hudPlayback,
body.ui.ui-claro #hudPlayback *,
body.ui.ui-claro #liveAlertTickerBar,
body.ui.ui-claro #liveAlertTickerBar * {
  color: var(--ui-tinta2) !important;
  text-shadow: none !important;
}

/* Las cifras y los rótulos principales, en tinta plena */
body.ui.ui-claro .ui-ventana strong,
body.ui.ui-claro .ui-ventana b,
body.ui.ui-claro .metric-value,
body.ui.ui-claro .slider-val,
body.ui.ui-claro #hudPlayback strong,
body.ui.ui-claro #hudPlayback b { color: var(--ui-tinta) !important; }

/* Los enlaces siguen leyéndose como enlaces */
body.ui.ui-claro .ui-ventana a,
body.ui.ui-claro #liveAlertTickerBar a { color: var(--ui-tinta) !important; text-decoration: underline; }

/* Las muestras de color de la leyenda son DATO: fondo intacto */
body.ui.ui-claro .legend-color,
body.ui.ui-claro .punto { color: transparent !important; }

/* Los avisos graves conservan su tinta en el título */
body.ui.ui-claro .ui-plano > *:first-child { color: var(--ui-filete, var(--ui-tinta)) !important; }

/* Casillas y controles de formulario visibles sobre claro */
body.ui.ui-claro input[type="checkbox"],
body.ui.ui-claro input[type="radio"] { accent-color: var(--ui-tinta2); }

/* Fondos oscuros escritos en el atributo `style` que sobreviven al tema claro.
   Se vacían dentro de las ventanas; las muestras de color de la leyenda y los
   puntos de dato quedan excluidos porque ahí el fondo ES el dato. */
body.ui.ui-claro .ui-ventana [style*="background:rgba(0"],
body.ui.ui-claro .ui-ventana [style*="background: rgba(0"],
body.ui.ui-claro .ui-ventana [style*="background:rgba(15"],
body.ui.ui-claro .ui-ventana [style*="background:rgba(255,255,255,0.0"],
body.ui.ui-claro .ui-ventana [style*="background:#0"],
body.ui.ui-claro .ui-ventana [style*="background:#1"] {
  background: transparent !important;
  background-image: none !important;
}
body.ui.ui-claro .ui-ventana .legend-color,
body.ui.ui-claro .ui-ventana .punto { background-image: none; }

/* Los mensajes del chat recuperan su filete de canal sobre fondo claro */
body.ui.ui-claro #liveChatBody > div {
  border: 1px solid var(--ui-linea) !important;
  border-left-width: 3px !important;
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CORRECCIÓN DE SOLAPES
   Medido a 1512×949: la cinta de avisos ocupa todo el ancho a z-index 10005 y
   tapaba los 30 px superiores del raíl —un botón entero inaccesible— y los
   útiles de la esquina. El raíl arranca ahora bajo la cinta, y los útiles se
   han llevado a su pie, que es donde corresponde a una herramienta.
   ══════════════════════════════════════════════════════════════════════════ */
body.ui .ui-rail { top: 30px !important; }
body.ui .ui-rail .ui-hueco { flex: 1 1 auto; min-height: 8px; }
body.ui .ui-utiles { display: none !important; }

/* El panel de capas venía con z-index 99999 y flotaba siempre sobre las demás
   ventanas, incluso al traer otra al frente. Se le da la misma franja. */
body.ui #leafletLayersControlPanel.ui-ventana { z-index: 600; }

/* La cinta de avisos deja libre el raíl */
body.ui #liveAlertTickerBar { z-index: 10005; }

/* ══════════════════════════════════════════════════════════════════════════
   ÚTILES DE VISTA · tema y pantalla completa
   Van arriba a la derecha, bajo la cinta de avisos, en un hueco que la
   cabecera reserva. Con rótulo: en la primera versión eran dos iconos de
   cuarenta píxeles al pie del raíl y no los encontraba nadie.
   ══════════════════════════════════════════════════════════════════════════ */
body.ui .ui-utiles {
  display: flex !important;
  position: fixed; top: 35px; right: 10px; z-index: 10050;
  gap: 4px;
}
body.ui .ui-utiles button {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; width: auto;
  font-size: 11.5px; line-height: 1; cursor: pointer; white-space: nowrap;
  background: var(--ui-fondo); color: var(--ui-tinta2);
  border: 1px solid var(--ui-linea); border-radius: 3px;
}
body.ui .ui-utiles button:hover {
  background: var(--ui-resalte); color: var(--ui-tinta); border-color: var(--ui-tinta3);
}
body.ui .ui-utiles .ui-ico { font-size: 14px; }

/* La cabecera reserva el hueco para que no quede ningún botón debajo */
body.ui #appHeader { padding-right: 240px !important; }

/* Y el raíl recupera su pie limpio */
body.ui .ui-rail .ui-hueco { display: none; }