:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b0f14;
  color: #e6edf3;
}
header {
  padding: 10px 18px;
  background: #10161d;
  border-bottom: 1px solid #1f2933;
  display: flex;
  align-items: center;
  gap: 14px;
}
header h1 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: .3px; }
header > span { font-size: 12px; color: #8b98a5; flex: 1; }
#barraEstado { display: flex; gap: 10px; }
#barraEstado span {
  font-size: 11px; color: #c3ccd4; background: #1c2732; border: 1px solid #2a3844;
  border-radius: 20px; padding: 4px 12px; white-space: nowrap;
}
#statAlertas.hay-alertas { background: #3a1414; color: #ff8a8a; border-color: #5a1f1f; }
.btn-admin { text-decoration: none; display: inline-flex; align-items: center; }
.btn-calibrar {
  background: #1c2732;
  border: 1px solid #2a3844;
  color: #e6edf3;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
}
.btn-calibrar.activo { background: #7c3aed; border-color: #a78bfa; }
#map {
  width: 100%;
  height: calc(100vh - 46px);
  background: #05070a;
}

/* --- marcadores --- */
.marker-casa {
  width: 20px; height: 20px; border-radius: 6px;
  background: #3b82f6; border: 3px solid #93c5fd;
  cursor: pointer;
}
.marker-casa.alerta {
  background: #ff3b3b; border-color: #ffb3b3;
  animation: pulso 1.6s infinite;
}
.marker-dispositivo {
  width: 16px; height: 16px; border-radius: 50%;
  background: #22c55e; border: 3px solid #86efac;
  cursor: pointer;
}
.marker-dispositivo.alerta {
  background: #ff3b3b; border-color: #ffb3b3;
  animation: pulso 1.6s infinite;
}
.marker-camara {
  width: 16px; height: 16px; border-radius: 3px;
  background: #f59e0b; border: 2px solid #fde68a;
  cursor: pointer;
}
.marker-dron {
  font-size: 20px;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
  pointer-events: none;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,59,0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(255,59,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); }
}

/* --- overlay de la casa: crece desde el punto de origen, no es un modal --- */
#casaOverlay {
  position: fixed;
  display: none;
  opacity: 0;
  overflow: hidden;
  background: #10161d;
  border: 1px solid #2a3844;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  z-index: 1000;
}
#casaOverlay .contenido {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  min-width: 600px;
}
#casaOverlay .barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #161f28; border-bottom: 1px solid #263340;
}
#casaOverlay .titulo-casa { font-size: 13px; font-weight: 600; }
#casaOverlay button.cerrar {
  background: #1c2732; border: 1px solid #2a3844; color: #e6edf3;
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
#casaOverlay button.cerrar:hover { background: #263340; }
.plano-wrap { position: relative; flex: 1; background: #fff; }
.plano-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }

.punto-sensor {
  position: absolute;
  width: 18px; height: 18px;
  margin-left: -9px; margin-top: -9px;
  border-radius: 50%;
  background: #22c55e; border: 3px solid #86efac;
  cursor: pointer;
}
.punto-sensor.alerta {
  background: #ff3b3b; border-color: #ffb3b3;
  animation: pulso 1.6s infinite;
}

/* --- panel lateral de detalle --- */
.panel {
  position: fixed; top: 0; right: 0; height: 100%; width: 340px;
  background: #10161d; border-left: 1px solid #1f2933;
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 1100;
  padding: 18px;
  overflow-y: auto;
}
.panel.abierto { transform: translateX(0); }
.panel-cerrar {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: #8b98a5; font-size: 16px; cursor: pointer;
}
.panel h2 { font-size: 15px; margin: 0 26px 4px 0; }
.panel .subtitulo { font-size: 12px; color: #8b98a5; margin-bottom: 14px; }
.panel .ficha { font-size: 12px; line-height: 1.6; color: #c3ccd4; margin-bottom: 14px; }
.panel .ficha b { color: #e6edf3; }
.panel .estado-actual {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; margin-bottom: 14px;
}
.panel .estado-actual.normal { background: #16321f; color: #4ade80; }
.panel .estado-actual.alerta { background: #3a1414; color: #ff8a8a; }
.protocolo-box {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.6;
  background: #1c1408; border: 1px solid #7c5a12; color: #f5d78e;
}
#protocoloEvento .protocolo-box { margin: 10px 16px 0; }
.panel label { display: block; font-size: 12px; color: #8b98a5; margin: 10px 0 4px; }
.panel input[type=range] { width: 100%; }
.panel .fila-botones { display: flex; gap: 8px; margin-top: 12px; }
.panel button.accion {
  flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #2a3844;
  background: #1c2732; color: #e6edf3; cursor: pointer; font-size: 12px;
}
.panel button.accion.primario { background: #b91c1c; border-color: #ef4444; }
.panel button.accion.secundario { background: #1c3a2a; border-color: #22c55e; }
.panel button.accion:hover { filter: brightness(1.15); }
.panel .camaras-box, .panel .dron-box {
  margin-top: 16px; padding: 10px; border-radius: 8px; font-size: 12px;
  background: #161f28; border: 1px solid #263340;
}
.panel .dron-box { color: #fbbf24; }

/* --- overlay de evento con cámara (dos pantallas: grabación + en vivo) --- */
#eventoOverlay {
  position: fixed;
  display: none;
  opacity: 0;
  overflow: hidden;
  background: #10161d;
  border: 1px solid #2a3844;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 1300;
}
#eventoOverlay .contenido-evento {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  min-width: 640px;
}
#eventoOverlay .barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #161f28; border-bottom: 1px solid #263340;
}
#eventoOverlay button.cerrar {
  background: #1c2732; border: 1px solid #2a3844; color: #e6edf3;
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.videos-evento {
  flex: 1; display: flex; gap: 1px; background: #263340; overflow: hidden;
}
.video-box { flex: 1; display: flex; flex-direction: column; background: #05070a; }
.video-label {
  font-size: 11px; color: #8b98a5; padding: 6px 10px; background: #10161d;
  border-bottom: 1px solid #263340;
}
.video-box video, .video-box img, #enVivoContenido, #grabacionContenido {
  flex: 1; width: 100%; object-fit: contain; background: #000;
}
#enVivoContenido, #grabacionContenido { display: flex; }
#enVivoContenido video, #enVivoContenido img,
#grabacionContenido video, #grabacionContenido img { flex: 1; width: 100%; object-fit: contain; }
.acciones-evento { padding: 12px 16px; background: #161f28; border-top: 1px solid #263340; }
#resumenPoliciaEvento, #resumenPolicia {
  padding: 0 16px 16px;
}
.resumen-policia {
  background: #161f28; border: 1px solid #263340; border-radius: 8px;
  padding: 12px; font-size: 12px; line-height: 1.7; color: #c3ccd4;
}

/* --- indicador chico del dron: siempre visible mientras está desplegado --- */
#dronWidget {
  display: none;
  position: fixed; left: 16px; bottom: 16px; width: 230px;
  background: #10161d; border: 1px solid #f59e0b; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  z-index: 1500; overflow: hidden;
}
.dron-widget-barra {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: #161f28; border-bottom: 1px solid #263340; font-size: 12px;
}
.dron-widget-barra button {
  background: #1c2732; border: 1px solid #2a3844; color: #e6edf3;
  border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer;
}
.dron-widget-barra button:hover { background: #263340; }
.dron-widget-estado { padding: 8px 10px; font-size: 11px; color: #fbbf24; }
.dron-widget-ver {
  display: block; width: calc(100% - 20px); margin: 0 10px 10px;
  background: #f59e0b; border: none; color: #1a1205; font-weight: 600;
  border-radius: 6px; padding: 8px; cursor: pointer; font-size: 12px;
}
.dron-widget-ver:hover { filter: brightness(1.1); }

/* --- pantalla grande de la transmisión del dron: crece desde el dron en el mapa --- */
#dronFeedOverlay {
  position: fixed; display: none; opacity: 0; overflow: hidden;
  background: #10161d; border: 1px solid #f59e0b; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6); z-index: 1600;
}
#dronFeedOverlay .contenido-dron-feed {
  position: absolute; inset: 0; display: flex; flex-direction: column; min-width: 480px;
}
#dronFeedOverlay .barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #161f28; border-bottom: 1px solid #263340;
}
#dronFeedOverlay button.cerrar {
  background: #1c2732; border: 1px solid #2a3844; color: #e6edf3;
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.dron-feed-video-wrap {
  flex: 1; position: relative; background: #000; overflow: hidden;
}
.dron-feed-video-wrap video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .15s linear;
}
.dron-sin-video {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #566573; font-size: 13px; text-align: center; padding: 10px;
}

/* --- joystick: chico, abajo a la izquierda de la pantalla grande --- */
#joystickDron {
  position: absolute; left: 18px; bottom: 18px;
  display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px);
  gap: 3px; z-index: 2;
}
.joy-btn {
  background: rgba(16,22,29,0.85); border: 1px solid #f59e0b; color: #f59e0b;
  border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.joy-btn:hover { background: rgba(245,158,11,0.25); }
.joy-btn:active { background: rgba(245,158,11,0.45); }
.joy-up { grid-column: 2; grid-row: 1; }
.joy-left { grid-column: 1; grid-row: 2; }
.joy-centro { grid-column: 2; grid-row: 2; font-size: 8px; opacity: .6; }
.joy-right { grid-column: 3; grid-row: 2; }
.joy-down { grid-column: 2; grid-row: 3; }
.resumen-policia a.llamar {
  display: inline-block; margin-top: 8px; padding: 8px 14px;
  background: #b91c1c; color: #fff; border-radius: 6px; text-decoration: none; font-size: 13px;
}

/* --- panel de calibración (reusa el mismo panel lateral) --- */
.panel select.selector-calibracion {
  width: 100%; padding: 8px; border-radius: 6px; margin-top: 6px;
  background: #1c2732; color: #e6edf3; border: 1px solid #2a3844; font-size: 12px;
}
.panel .punto-capturado {
  font-family: Consolas, monospace; font-size: 12px; color: #fbbf24;
  background: #161f28; border: 1px solid #263340; border-radius: 6px;
  padding: 8px; margin-bottom: 10px;
}
.panel .confirmacion-calibracion { color: #4ade80; font-size: 12px; margin-top: 8px; }