html,
body {
  margin: 0;
  padding: 0;
}

/* ===========================================================
   Tema claro tipo papel / beige operativo
   Paleta:
     - Papel base   #f5efe2 (fondo)
     - Superficie   #fbf6e9 (tarjetas)
     - Surface alt  #efe7d2
     - Borde        #d6cdb6
     - Texto primary #3b3a32
     - Texto suave  #6b6859
     - Rojo bomb.   #b3261e
     - Cian comand. #0e6c7d
     - Ámbar taller #a86b00
     - Verde disp.  #3f7d3a
   =========================================================== */

body[data-theme="light"] {
  background: #f5efe2;
  color: #3b3a32;
}

/* Header de navegación */
body[data-theme="light"] header {
  background: #efe7d2 !important;
  border-color: #d6cdb6 !important;
  color: #3b3a32 !important;
}

body[data-theme="light"] header .text-slate-100,
body[data-theme="light"] header .text-slate-200,
body[data-theme="light"] header .text-slate-300,
body[data-theme="light"] header .text-slate-400 {
  color: #3b3a32 !important;
}

body[data-theme="light"] header a {
  color: #4a4738 !important;
}

body[data-theme="light"] header a.text-cyan-300,
body[data-theme="light"] header a:hover {
  color: #0e6c7d !important;
}

body[data-theme="light"] header a[class*="border-cyan-400"] {
  border-color: #0e6c7d !important;
}

/* Superficies y tarjetas */
body[data-theme="light"] .bg-slate-900\/40,
body[data-theme="light"] .bg-slate-900\/60,
body[data-theme="light"] .bg-slate-900\/70,
body[data-theme="light"] .bg-slate-900\/80 {
  background-color: #fbf6e9 !important;
}

body[data-theme="light"] .bg-slate-950,
body[data-theme="light"] .bg-slate-950\/40,
body[data-theme="light"] .bg-slate-950\/60,
body[data-theme="light"] .bg-slate-950\/95 {
  background-color: #f5efe2 !important;
}

body[data-theme="light"] .bg-slate-800,
body[data-theme="light"] .bg-slate-800\/40,
body[data-theme="light"] .bg-slate-800\/60 {
  background-color: #efe7d2 !important;
}

/* Bordes */
body[data-theme="light"] .border-slate-600,
body[data-theme="light"] .border-slate-700,
body[data-theme="light"] .border-slate-800,
body[data-theme="light"] .border-slate-900 {
  border-color: #d6cdb6 !important;
}

/* Texto */
body[data-theme="light"] .text-slate-100,
body[data-theme="light"] .text-slate-200,
body[data-theme="light"] .text-slate-300 {
  color: #3b3a32 !important;
}

body[data-theme="light"] .text-slate-400,
body[data-theme="light"] .text-slate-500 {
  color: #6b6859 !important;
}

body[data-theme="light"] .text-slate-600 {
  color: #7a7766 !important;
}

body[data-theme="light"] .text-white {
  color: #2a2924 !important;
}

/* Inputs y selects */
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #2a2924 !important;
  border-color: #c8bfa6 !important;
}

body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
  color: #8a8676 !important;
}

body[data-theme="light"] input:focus,
body[data-theme="light"] select:focus,
body[data-theme="light"] textarea:focus {
  outline: 2px solid #0e6c7d !important;
  outline-offset: 0;
  border-color: #0e6c7d !important;
}

/* Botón flotante de tema */
body[data-theme="light"] #theme-toggle-btn {
  background: #fbf6e9 !important;
  color: #3b3a32 !important;
  border-color: #c8bfa6 !important;
}

/* Botones con clases Tailwind comunes */
body[data-theme="light"] button.bg-cyan-700,
body[data-theme="light"] .bg-cyan-700 {
  background-color: #0e6c7d !important;
  color: #fbf6e9 !important;
}

body[data-theme="light"] button.bg-cyan-700:hover,
body[data-theme="light"] .bg-cyan-700:hover {
  background-color: #0b5260 !important;
}

body[data-theme="light"] button.bg-sky-700,
body[data-theme="light"] .bg-sky-700 {
  background-color: #1f6f8e !important;
  color: #fbf6e9 !important;
}

body[data-theme="light"] button.bg-sky-700:hover,
body[data-theme="light"] .bg-sky-700:hover {
  background-color: #185872 !important;
}

body[data-theme="light"] button.bg-amber-700,
body[data-theme="light"] .bg-amber-700 {
  background-color: #a86b00 !important;
  color: #fbf6e9 !important;
}

body[data-theme="light"] button.bg-amber-700:hover,
body[data-theme="light"] .bg-amber-700:hover {
  background-color: #875600 !important;
}

body[data-theme="light"] button.bg-red-700,
body[data-theme="light"] .bg-red-700,
body[data-theme="light"] button.bg-red-800,
body[data-theme="light"] .bg-red-800 {
  background-color: #b3261e !important;
  color: #fbf6e9 !important;
}

body[data-theme="light"] button.bg-red-700:hover,
body[data-theme="light"] .bg-red-700:hover {
  background-color: #921e17 !important;
}

body[data-theme="light"] button.bg-violet-700,
body[data-theme="light"] .bg-violet-700 {
  background-color: #6c4cb4 !important;
  color: #fbf6e9 !important;
}

body[data-theme="light"] button.bg-violet-700:hover,
body[data-theme="light"] .bg-violet-700:hover {
  background-color: #553a91 !important;
}

body[data-theme="light"] button.bg-slate-700,
body[data-theme="light"] .bg-slate-700 {
  background-color: #6e6a59 !important;
  color: #fbf6e9 !important;
}

body[data-theme="light"] button.bg-slate-700:hover,
body[data-theme="light"] .bg-slate-700:hover {
  background-color: #56523f !important;
}

/* Hero "Lanzar incidencia" (gradiente rojo brillante) — papel suave */
body[data-theme="light"] section[aria-label*="Acción"],
body[data-theme="light"] section[aria-label*="incidencias"] {
  background: linear-gradient(135deg, #fbe5e1, #efe7d2 60%, #efe7d2) !important;
  border-color: #d4837e !important;
  box-shadow: 0 2px 18px -8px rgba(179, 38, 30, 0.35) !important;
}

body[data-theme="light"] section[aria-label*="Acción"] h2,
body[data-theme="light"] section[aria-label*="incidencias"] h2,
body[data-theme="light"] section[aria-label*="Acción"] p,
body[data-theme="light"] section[aria-label*="incidencias"] p {
  color: #3b3a32 !important;
}

body[data-theme="light"] section[aria-label*="Acción"] .text-red-400\/90,
body[data-theme="light"] section[aria-label*="incidencias"] .text-red-400\/90,
body[data-theme="light"] section[aria-label*="Acción"] .text-red-300\/70,
body[data-theme="light"] section[aria-label*="incidencias"] .text-red-300\/70 {
  color: #921e17 !important;
}

/* Gradientes del hero rojo dentro del botón principal */
body[data-theme="light"] .from-red-500,
body[data-theme="light"] .from-red-950\/70 {
  --tw-gradient-from: #b3261e !important;
}
body[data-theme="light"] .via-red-600,
body[data-theme="light"] .via-slate-950 {
  --tw-gradient-via: #921e17 !important;
}
body[data-theme="light"] .to-red-800,
body[data-theme="light"] .to-slate-950 {
  --tw-gradient-to: #6e1410 !important;
}

/* Modales (fondo del overlay) */
body[data-theme="light"] .bg-black\/70 {
  background-color: rgba(59, 58, 50, 0.45) !important;
}

/* Banners */
body[data-theme="light"] .bg-red-950\/40 {
  background-color: #f9e1de !important;
  color: #6e1410 !important;
}

body[data-theme="light"] .border-red-800,
body[data-theme="light"] .border-red-700 {
  border-color: #b3261e !important;
}

body[data-theme="light"] .text-red-200,
body[data-theme="light"] .text-red-300,
body[data-theme="light"] .text-red-400 {
  color: #6e1410 !important;
}

body[data-theme="light"] .bg-violet-950\/40 {
  background-color: #efe6f8 !important;
  color: #3e2a76 !important;
}

body[data-theme="light"] .border-violet-700 {
  border-color: #6c4cb4 !important;
}

body[data-theme="light"] .text-violet-200,
body[data-theme="light"] .text-violet-300 {
  color: #3e2a76 !important;
}

body[data-theme="light"] .bg-amber-950\/20 {
  background-color: #fbf2dc !important;
}

body[data-theme="light"] .border-amber-900\/40 {
  border-color: #d8b46d !important;
}

body[data-theme="light"] .text-amber-200,
body[data-theme="light"] .text-amber-300 {
  color: #6b4400 !important;
}

/* Pills de estado de incidente */
body[data-theme="light"] .incident-pill {
  border-color: #c8bfa6 !important;
  background-color: #fbf6e9 !important;
  color: #3b3a32 !important;
}

/* Popups y controles Leaflet */
body[data-theme="light"] .leaflet-popup-content-wrapper,
body[data-theme="light"] .leaflet-popup-tip {
  background: #fbf6e9 !important;
  color: #3b3a32 !important;
}

body[data-theme="light"] .leaflet-control-attribution {
  background: rgba(251, 246, 233, 0.85) !important;
  color: #3b3a32 !important;
}

body[data-theme="light"] .leaflet-control-zoom a {
  background: #fbf6e9 !important;
  color: #3b3a32 !important;
  border-color: #c8bfa6 !important;
}

/* Marcadores y badges definidos por la app */
body[data-theme="light"] .centinela-incident-marker-stack {
  filter: drop-shadow(0 5px 14px rgba(146, 30, 23, 0.45));
}

#map {
  width: 100%;
  min-height: 420px;
}

/* Leaflet usa z-index altos en paneles; el mapa principal queda por debajo de modales (z-[10050]+). */
#map.leaflet-container {
  position: relative;
  z-index: 1;
}

/* Marcador de incidente en el dashboard (pin grande y visible). */
.centinela-incident-divicon {
  background: transparent !important;
  border: none !important;
}

.centinela-incident-marker-stack {
  display: block;
  width: 56px;
  height: 64px;
  filter: drop-shadow(0 5px 14px rgba(220, 38, 38, 0.65));
}

.centinela-incident-marker-stack svg {
  display: block;
}

.incident-pill {
  display: inline-block;
  border-radius: 9999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.72rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Etiqueta de temperatura sobre el heatmap (Open-Meteo).
   Sin fondo: número con halo blanco para que se lea sobre cualquier color. */
.centinela-temp-label {
  background: transparent;
  border: 0;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centinela-temp-label span {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  text-shadow:
    0 0 2px #ffffffe6,
    0 0 4px #ffffffcc,
    0 0 6px #ffffff99;
  white-space: nowrap;
}
body[data-theme="light"] .centinela-temp-label span {
  color: #111;
}

/* Flecha estática de viento (apunta hacia donde sopla el viento). */
.centinela-wind-arrow-wrapper {
  background: transparent;
  border: 0;
}
.centinela-wind-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
body[data-theme="light"] .centinela-wind-arrow svg path {
  fill: #1e293b;
  stroke: #ffffff;
}

/* Rosa de los vientos: control fijo en topright. */
.centinela-compass-control {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}
.centinela-compass-control svg {
  display: block;
  width: 100%;
  height: 100%;
}
.centinela-compass-control .centinela-compass-label {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  color: #f8fafc;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  line-height: 1;
}
.centinela-compass-control .centinela-compass-n {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  color: #fecaca;
}
.centinela-compass-control .centinela-compass-s {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}
.centinela-compass-control .centinela-compass-e {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.centinela-compass-control .centinela-compass-w {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}
body[data-theme="light"] .centinela-compass-control {
  background: rgba(255, 255, 255, 0.9);
}
body[data-theme="light"] .centinela-compass-control .centinela-compass-label {
  color: #0f172a;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}
body[data-theme="light"] .centinela-compass-control .centinela-compass-n {
  color: #b91c1c;
}

#incident-list li {
  cursor: pointer;
}

/* ===========================================================
   Helpers de estado para badges (flota, dispositivos, inventario)
   Funcionan en ambos temas.
   =========================================================== */
.centinela-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid currentColor;
  line-height: 1.1;
}

.centinela-badge.is-disponible {
  color: #16803c;
  background: rgba(63, 125, 58, 0.12);
}

.centinela-badge.is-taller {
  color: #92560a;
  background: rgba(168, 107, 0, 0.12);
}

.centinela-badge.is-incidente {
  color: #b3261e;
  background: rgba(179, 38, 30, 0.12);
}

.centinela-badge.is-neutral {
  color: #555;
  background: rgba(120, 120, 120, 0.12);
}

body[data-theme="light"] .centinela-badge.is-disponible {
  color: #2f6b2c;
  background: rgba(63, 125, 58, 0.18);
}

body[data-theme="light"] .centinela-badge.is-taller {
  color: #7a4f00;
  background: rgba(168, 107, 0, 0.2);
}

body[data-theme="light"] .centinela-badge.is-incidente {
  color: #921e17;
  background: rgba(179, 38, 30, 0.18);
}

/* Modal de incidente (Paso 5). Compartido por dashboard y comandancia. */
.centinela-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 1rem;
}

.centinela-modal-backdrop.is-open {
  display: flex;
}

.centinela-modal-card {
  position: relative;
  z-index: 10051;
  width: 100%;
  max-width: 56rem;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 0.75rem;
  border: 1px solid #1f2937;
  background: #0b1220;
  color: #e2e8f0;
  padding: 1rem;
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.6);
}

body[data-theme="light"] .centinela-modal-card {
  background: #fbf6e9;
  color: #3b3a32;
  border-color: #d6cdb6;
}

body[data-theme="light"] .centinela-modal-backdrop {
  background: rgba(59, 58, 50, 0.45);
}