:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1c232d;
  --border: #262d38;
  --fg: #e6edf3;
  --muted: #8b949e;
  --green: #3fb950;
  --orange: #f0883e;
  --red: #f85149;
  /* Amarillo de la marca Loopsis */
  --accent: #fce300;
  --accent-dim: rgba(252, 227, 0, .16);
  --blue: var(--accent); /* compatibilidad con estilos previos */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  overflow: hidden;
}

.layout { display: flex; height: 100vh; }

/* ------------------------------------------------------------- SIDEBAR */

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
}

.brand-mark { width: 30px; height: 30px; flex-shrink: 0; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -.2px; }
.brand-sub { font-size: 9px; color: var(--muted); letter-spacing: 2.5px; }

.nav-item.active { border-left: 2px solid var(--accent); }

.nav { padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-item {
  background: none; border: none; color: var(--muted);
  text-align: left; padding: 10px 12px; border-radius: 6px;
  cursor: pointer; font-size: 13.5px; font-family: inherit;
  display: flex; align-items: center; gap: 10px;
}
.nav-item:hover { background: var(--panel-2); color: var(--fg); }
.nav-item.active { background: var(--panel-2); color: var(--fg); font-weight: 600; }
.nav-item.active .nav-ico { color: var(--accent); opacity: 1; }
.nav-ico { width: 17px; height: 17px; opacity: .7; flex-shrink: 0; }

.sidebar-foot { padding: 14px 16px; border-top: 1px solid var(--border); }
.health { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------------- MAIN */

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  height: 56px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; background: var(--panel);
}
.page-title { font-size: 16px; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.pill {
  font-size: 11.5px; padding: 5px 11px; border-radius: 20px;
  background: var(--panel-2); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 7px;
}
.pill-muted { color: var(--muted); font-family: Consolas, monospace; }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-bad { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot-idle { background: var(--muted); }

.view { display: none; padding: 20px; overflow-y: auto; flex: 1; }
.view.active { display: block; }

/* ------------------------------------------------------------ EN VIVO */

.live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  margin-bottom: 16px;
}

.video-panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.video-wrap { position: relative; background: #000; }
.video-wrap img { width: 100%; display: block; max-height: 62vh; object-fit: contain; }

.video-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(248, 81, 73, .9); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 9px; border-radius: 4px;
}

.video-foot {
  display: flex; gap: 28px; padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.counter { display: flex; flex-direction: column; gap: 3px; }
.counter-label { font-size: 11px; color: var(--muted); }
.counter-value { font-size: 24px; font-weight: 700; }
.counter-value.small { font-size: 14px; font-weight: 500; padding-top: 6px; }
.green { color: var(--green); }
.orange { color: var(--orange); }

.side-panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; display: flex; flex-direction: column; min-height: 0;
}

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; margin-bottom: 16px;
}

.panel-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-count {
  font-size: 11px; color: var(--muted); background: var(--panel-2);
  padding: 2px 8px; border-radius: 10px;
}

.detection-list { overflow-y: auto; max-height: 52vh; }

.det-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.det-item:hover { background: var(--panel-2); }
.det-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.det-body { flex: 1; min-width: 0; }
.det-title { display: block; }
.det-conf { font-size: 11px; color: var(--muted); }
.det-time { font-size: 11px; color: var(--muted); font-family: Consolas, monospace; }

/* -------------------------------------------------------------- TABLA */

.table-wrap { overflow: auto; max-height: 34vh; }
.table-wrap.tall { max-height: calc(100vh - 190px); }

.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table thead th {
  position: sticky; top: 0; background: var(--panel-2);
  text-align: left; padding: 9px 16px; font-weight: 600;
  color: var(--muted); font-size: 11.5px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 9px 16px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table tbody tr:hover { background: var(--panel-2); }
.mono { font-family: Consolas, monospace; color: var(--muted); }

.tag {
  font-size: 10.5px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid transparent;
}
.tag-veh { background: rgba(63,185,80,.14); color: var(--green); border-color: rgba(63,185,80,.35); }
.tag-per { background: rgba(240,136,62,.14); color: var(--orange); border-color: rgba(240,136,62,.35); }

.thumb {
  width: 68px; height: 40px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--border);
  cursor: pointer; display: block; background: #000;
}

.empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------- DASHBOARD */

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 16px;
}
.stat-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.stat-label { font-size: 11.5px; color: var(--muted); }
.stat-value { font-size: 30px; font-weight: 700; }
.stat-value.small { font-size: 15px; font-weight: 600; }

.stat-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px;
}
.stat-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stat-ico svg { width: 19px; height: 19px; }
.green-bg  { background: rgba(63,185,80,.13);  color: var(--green); }
.orange-bg { background: rgba(240,136,62,.13); color: var(--orange); }
.neutro-bg { background: rgba(252,227,0,.11);  color: var(--accent); }

.range-tabs { display: flex; gap: 4px; }
.range-tab {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 11.5px; padding: 4px 12px;
  border-radius: 5px; cursor: pointer; font-family: inherit;
}
.range-tab.active { color: var(--fg); border-color: var(--blue); }

.chart-legend {
  display: flex; gap: 18px; padding: 12px 18px 0;
  font-size: 11.5px; color: var(--muted);
}
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.sw.green { background: var(--green); }
.sw.orange { background: var(--orange); }

.chart-box { padding: 10px 18px 20px; }
.chart-box svg { width: 100%; height: 260px; display: block; }

/* ------------------------------------------------------------ SISTEMA */

.pill-alerta {
  background: rgba(248,81,73,.16); border-color: rgba(248,81,73,.5);
  color: #ffb3ae;
}

.alert-list { max-height: 320px; overflow-y: auto; }
.alert-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.alert-ico {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0;
}
.alert-ico.caida { background: var(--red); }
.alert-ico.recuperada { background: var(--green); }
.alert-body { flex: 1; min-width: 0; }
.alert-msg { display: block; color: var(--fg); line-height: 1.45; }
.alert-time { font-size: 11px; color: var(--muted); font-family: Consolas, monospace; }

.health-card { border-left: 3px solid var(--muted); }
.health-card.ok { border-left-color: var(--green); }
.health-card.bad { border-left-color: var(--red); }

.notes { padding: 16px 18px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }

/* ----------------------------------------------------------- LIGHTBOX */

.lightbox {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.85); align-items: center; justify-content: center;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 6px; }

/* --------------------------------------------------------- RESPONSIVE */

@media (max-width: 1100px) {
  .live-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .sidebar { width: 62px; }
  .brand-text, .nav-item span:not(.nav-ico), .health { display: none; }
  .stat-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ FILTROS */

.filterbar {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.15);
}
.fgroup { display: flex; flex-direction: column; gap: 4px; }
.fgroup.grow { flex: 1; min-width: 160px; }
.fgroup label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

.fgroup input, .fgroup select {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--fg); border-radius: 5px; padding: 6px 9px;
  font-size: 12px; font-family: inherit; outline: none;
}
.fgroup input:focus, .fgroup select:focus { border-color: var(--blue); }
.fgroup input[type="date"] { color-scheme: dark; }

.hour-range { display: flex; align-items: center; gap: 6px; }
.hour-range select { width: 68px; }
.dash { color: var(--muted); font-size: 11px; }

.btn-clear {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); border-radius: 5px; padding: 7px 14px;
  font-size: 12px; font-family: inherit; cursor: pointer;
}
.btn-clear:hover { color: var(--fg); border-color: var(--red); }

.result-count {
  font-size: 11.5px; color: var(--muted); font-weight: 400;
  background: var(--panel-2); padding: 3px 10px; border-radius: 10px;
}

/* ------------------------------------------------------ CONFIGURACION */

.panel-hint { font-size: 11px; color: var(--muted); font-weight: 400; }

.zone-editor { padding: 16px 18px; }

.zone-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px;
}

.btn-zone {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--fg); border-radius: 6px; padding: 9px 16px;
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.btn-zone b { font-weight: 600; }
.btn-zone.veh:hover, .btn-zone.veh.activo { border-color: var(--green); color: var(--green); }
.btn-zone.per:hover, .btn-zone.per.activo { border-color: var(--orange); color: var(--orange); }
.btn-zone.activo { background: rgba(255,255,255,.04); }

.zone-status { font-size: 12px; color: var(--muted); }
.zone-status.activo { color: var(--accent); }

.canvas-wrap {
  position: relative; background: #000; border-radius: 6px;
  border: 1px solid var(--border); overflow: hidden; line-height: 0;
  display: flex; justify-content: center;
}
/* El lienzo se ajusta al ALTO disponible, no al ancho. Con `width:100%` en un
   monitor de 27 pulgadas una imagen 16:9 se comia el 70% de la pantalla y
   habia que hacer scroll para ver los botones y el dibujo a la vez, que es
   justo lo que se necesita mirar junto. */
#zoneCanvas {
  display: block; cursor: crosshair;
  max-height: 56vh; max-width: 100%; width: auto; margin: 0 auto;
}
#zoneCanvas.bloqueado { cursor: default; }

.canvas-overlay {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); color: var(--muted); font-size: 13px;
  line-height: 1.4; text-align: center; padding: 20px;
}
.canvas-overlay.oculto { display: none; }

/* Al doble: a 11,5 px y con cuadrados de 9 px, la leyenda de colores era mas
   pequena que lo que explica. */
.zone-legend {
  display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap;
  font-size: 15px; color: var(--fg);
}
.zone-legend span { display: flex; align-items: center; gap: 10px; }
.zone-legend .sw { width: 18px; height: 18px; border-radius: 4px; }

/* ------------------------------------------------------ AJUSTE IMAGEN */

.imagen-box { padding: 18px; }

.ayuda {
  font-size: 12.5px; color: var(--muted); line-height: 1.6;
  margin-bottom: 16px; max-width: 780px;
}
.ayuda b { color: var(--fg); font-weight: 600; }
.ayuda-alerta { display: block; margin-top: 6px; color: #f0b78e; }
.ayuda-alerta b { color: #f0b78e; }

.preview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px;
}
.preview-grid figure { margin: 0; }
.preview-grid figcaption {
  font-size: 11px; color: var(--muted); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}
.preview-grid img {
  width: 100%; border-radius: 6px; border: 1px solid var(--border);
  display: block; background: #000; aspect-ratio: 16/9; object-fit: cover;
}

.slider-row {
  display: grid; grid-template-columns: 190px 1fr 56px;
  align-items: center; gap: 14px; margin-bottom: 12px;
}
.slider-row label { font-size: 12.5px; color: var(--muted); }
.slider-row input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 5px;
  border-radius: 3px; background: var(--panel-2); outline: none;
}
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--bg);
}
.slider-row input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--bg);
}
.slider-val {
  font-size: 12.5px; color: var(--fg); text-align: right;
  font-variant-numeric: tabular-nums; font-family: Consolas, monospace;
}

.acciones { display: flex; gap: 10px; align-items: center; margin-top: 16px; }

@media (max-width: 900px) {
  .preview-grid { grid-template-columns: 1fr; }
  .slider-row { grid-template-columns: 130px 1fr 48px; }
}

/* ------------------------------------------ MENU DE MODULOS (CONFIG) */

.modulos-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.modulo-card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px 18px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: inherit; color: var(--fg);
  transition: border-color .15s, transform .15s;
}
.modulo-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
}
.modulo-ico {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 8px;
  background: rgba(252,227,0,.10); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.modulo-ico svg { width: 22px; height: 22px; }
.modulo-titulo { font-size: 14.5px; font-weight: 600; }
.modulo-desc { font-size: 12px; color: var(--muted); line-height: 1.45; }
.modulo-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: 11px; color: var(--muted);
  background: var(--panel-2); padding: 3px 9px; border-radius: 10px;
}

/* Cada modulo se muestra solo cuando se elige su tarjeta */
.modulo { display: none; }
.modulo.abierto { display: block; }
.modulos-grid.oculto { display: none; }

/* `.volver` es el mismo control que `.btn-volver` en los modulos nuevos, pero
   no tenia ninguna regla: salia como boton nativo del navegador, con su caja
   gris y su borde de foco, descuadrado del resto de la pagina. */
.btn-volver, .volver {
  background: none; border: none; color: var(--muted);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  padding: 4px 0; margin-bottom: 14px;
}
.btn-volver:hover, .volver:hover { color: var(--accent); }
.btn-volver:focus-visible, .volver:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

/* -------------------------------------------------- LISTA DE CAMARAS */

.camaras-lista { }
.cam-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.cam-estado { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cam-estado.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.cam-estado.off { background: var(--muted); }
.cam-info { flex: 1; min-width: 0; }
.cam-info-nombre { font-size: 13.5px; font-weight: 600; display: block; }
.cam-info-url {
  font-size: 11px; color: var(--muted); font-family: Consolas, monospace;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cam-tags { display: flex; gap: 6px; margin-top: 5px; }
.cam-tag {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  background: var(--panel-2); color: var(--muted);
}
.cam-tag.ok { background: rgba(63,185,80,.14); color: var(--green); }
.cam-tag.falta { background: rgba(240,136,62,.14); color: var(--orange); }
.cam-acciones { display: flex; gap: 6px; flex-shrink: 0; }

.btn-mini {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); border-radius: 5px; padding: 5px 10px;
  font-size: 11.5px; font-family: inherit; cursor: pointer;
}
.btn-mini:hover { color: var(--fg); border-color: var(--accent); }
.btn-mini.peligro:hover { color: #ffb3ae; border-color: var(--red); }

/* ------------------------------------- CABECERA DE VIDEO (EN VIVO) */

.video-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.cam-nombre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cam-nombre > span { font-size: 14.5px; font-weight: 600; }
.cam-nombre input {
  background: var(--panel-2); border: 1px solid var(--accent);
  color: var(--fg); border-radius: 5px; padding: 5px 9px;
  font-size: 14px; font-family: inherit; outline: none; width: 220px;
}
.btn-editar {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 3px; display: flex; border-radius: 4px;
}
.btn-editar svg { width: 14px; height: 14px; }
.btn-editar:hover { color: var(--accent); }

.video-head select {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--fg); border-radius: 5px; padding: 6px 10px;
  font-size: 12.5px; font-family: inherit; outline: none; max-width: 220px;
}
.video-head select:focus { border-color: var(--accent); }

/* --------------------------------------------- FILA DE MEDIOS PANELES */

.mitad-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start;
}
.mitad-grid .panel { margin-bottom: 0; }

@media (max-width: 1050px) {
  .mitad-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------- ALMACENAMIENTO */

.storage-box { padding: 18px; }

.uso-cifras {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
}
.uso-actual { font-size: 26px; font-weight: 700; color: var(--accent); }
.uso-detalle { font-size: 12px; color: var(--muted); }

.barra-uso {
  height: 9px; background: var(--panel-2); border-radius: 5px;
  overflow: hidden; border: 1px solid var(--border);
}
.barra-relleno {
  height: 100%; width: 0%; border-radius: 5px;
  background: var(--green); transition: width .4s, background .3s;
}
.barra-relleno.medio { background: var(--orange); }
.barra-relleno.lleno { background: var(--red); }

.uso-limite { font-size: 11.5px; color: var(--muted); margin-top: 7px; }

.campo { margin-top: 16px; }
.campo label {
  display: block; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.campo select, .campo input {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--fg); border-radius: 5px; padding: 7px 10px;
  font-size: 12.5px; font-family: inherit; outline: none;
}
.campo select { width: 100%; }
.campo select:focus, .campo input:focus { border-color: var(--accent); }

.equivalencia {
  font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 9px;
  background: rgba(252,227,0,.06); border-left: 2px solid var(--accent);
  padding: 9px 12px; border-radius: 0 5px 5px 0;
}
.equivalencia b { color: var(--fg); }

.separador {
  height: 1px; background: var(--border); margin: 20px 0 4px;
}

.borrado-row { display: flex; gap: 8px; align-items: center; }
.borrado-row select { flex: 1; }
.borrado-row input { width: 84px; }
.unidad { font-size: 12px; color: var(--muted); min-width: 54px; }

.ayuda-borrado {
  font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 8px;
}

.btn-danger {
  margin-top: 12px; background: transparent; border: 1px solid rgba(248,81,73,.5);
  color: #ffb3ae; border-radius: 6px; padding: 8px 18px;
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.btn-danger:hover { background: rgba(248,81,73,.12); border-color: var(--red); }
.btn-danger:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------- PRECISION */

.precision-box { padding: 18px; }
.precision-row { display: flex; align-items: center; gap: 16px; }

#precisionSlider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px; outline: none;
  background: linear-gradient(90deg, var(--red) 0%, var(--orange) 33%, var(--green) 100%);
}
#precisionSlider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  cursor: pointer; box-shadow: 0 0 0 1px var(--accent);
}
#precisionSlider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg); cursor: pointer;
}

.precision-value {
  font-size: 26px; font-weight: 700; color: var(--accent);
  min-width: 74px; text-align: right; font-variant-numeric: tabular-nums;
}

.precision-scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-top: 8px;
}

.warning {
  margin-top: 14px; padding: 11px 14px; border-radius: 6px;
  font-size: 12.5px; line-height: 1.5; display: none;
}
.warning.visible { display: block; }
.warning.riesgo {
  background: rgba(240,136,62,.10); border: 1px solid rgba(240,136,62,.4);
  color: #f0b78e;
}
.warning.ok {
  background: rgba(63,185,80,.08); border: 1px solid rgba(63,185,80,.3);
  color: #86d492;
}

.btn-save {
  margin-top: 14px; background: var(--accent); border: none;
  color: #1a1a00; font-weight: 600; border-radius: 6px;
  padding: 9px 20px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.btn-save:hover { filter: brightness(1.08); }
.btn-save:disabled { opacity: .5; cursor: default; }

/* -------------------------------------------------------------- LOGIN */

.login-body {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; background: radial-gradient(circle at 50% 40%, #161d27 0%, var(--bg) 70%);
}

.login-card {
  width: 340px; padding: 38px 34px; text-align: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.login-logo { width: 62px; height: 62px; margin-bottom: 14px; }
.login-title { font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.login-sub { font-size: 12px; color: var(--muted); margin-top: 4px; margin-bottom: 26px; }

.login-card input {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--fg); border-radius: 7px; padding: 11px 14px;
  font-size: 14px; font-family: inherit; outline: none; margin-bottom: 12px;
}
.login-card input:focus { border-color: var(--accent); }

.login-card button {
  width: 100%; background: var(--accent); border: none; color: #1a1a00;
  font-weight: 600; border-radius: 7px; padding: 11px;
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.login-card button:hover { filter: brightness(1.08); }
.login-card button:disabled { opacity: .6; cursor: default; }

.login-error { margin-top: 14px; font-size: 12.5px; color: var(--red); min-height: 18px; }

/* Aviso cuando la plataforma corre sin contrasena */
.banner-inseguro {
  background: rgba(248,81,73,.14); border-bottom: 1px solid rgba(248,81,73,.45);
  color: #ffb3ae; font-size: 12px; padding: 8px 22px; text-align: center;
}

.btn-logout {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 5px; padding: 5px 12px; font-size: 11.5px;
  font-family: inherit; cursor: pointer;
}
.btn-logout:hover { color: var(--fg); border-color: var(--red); }

/* -------------------------------------------------------------- TOAST */

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--fg); padding: 12px 22px; border-radius: 8px;
  font-size: 13px; z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(-6px); }
.toast.ok { border-color: rgba(63,185,80,.5); }
.toast.error { border-color: rgba(248,81,73,.6); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3d444d; }


/* Zonas de exclusion: rojo, porque es lo que el sistema NO va a mirar. */
.btn-zone.exc {
  border-color: #d9534f;
  color: #d9534f;
}
.btn-zone.exc.activo {
  background: #d9534f;
  color: #fff;
}
.zone-legend .sw.red {
  background: #d9534f;
}
.nota-exclusion {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
  max-width: 62ch;
}


/* ---- Panel de aforo y actividad (reemplaza la lista duplicada) ---- */
.aforo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
}
.aforo-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border: 1px solid var(--linea, #22262e);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.aforo-label { font-size: 11px; opacity: 0.65; }
.aforo-value { font-size: 30px; font-weight: 700; line-height: 1.1; }
.aforo-value.green { color: #3fb950; }
.aforo-value.orange { color: #f0883e; }
.aforo-detalle { font-size: 11px; opacity: 0.55; font-variant-numeric: tabular-nums; }

.panel-head.sub {
  border-top: 1px solid var(--linea, #22262e);
  font-size: 12px;
  opacity: 0.8;
}

/* Grafico de barras hecho con divs: sin libreria ni descargas en el cliente. */
.actividad {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 132px;
  padding: 14px 14px 4px;
}
.actividad .hora {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  height: 100%;
  position: relative;
}
.actividad .barra { width: 100%; border-radius: 2px 2px 0 0; min-height: 0; }
.actividad .barra.veh { background: #3fb950; }
.actividad .barra.per { background: #f0883e; }
.actividad .hora:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #0d1117;
  border: 1px solid var(--linea, #22262e);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  z-index: 5;
}
.actividad .etiqueta {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  opacity: 0.45;
}
.actividad-leyenda {
  display: flex;
  gap: 16px;
  padding: 20px 14px 14px;
  font-size: 11px;
  opacity: 0.7;
}
.counter-sub { font-size: 11px; opacity: 0.55; font-variant-numeric: tabular-nums; }


/* ---- Consulta por rango en el dashboard ---- */
.rango-panel { margin-bottom: 16px; }
.resumen-rango {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 4px 14px 16px;
}
.resumen-vacio { opacity: 0.5; font-size: 13px; padding: 6px 0; }
.resumen-card {
  flex: 1 1 180px;
  padding: 14px 16px;
  border: 1px solid var(--linea, #22262e);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.resumen-card .r-label { font-size: 11px; opacity: 0.65; display: block; }
.resumen-card .r-valor { font-size: 30px; font-weight: 700; line-height: 1.2; }
.resumen-card .r-valor.green { color: #3fb950; }
.resumen-card .r-valor.orange { color: #f0883e; }
.resumen-card .r-detalle {
  font-size: 11px;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.resumen-card.total .r-valor { color: var(--accent, #fce300); }


/* Los filtros del rango se apilaban a lo alto dentro del panel. En horizontal
   se leen como una sola frase: "de tal fecha a tal fecha, de tal hora a tal
   hora", que es como el usuario formula la pregunta. */
.rango-panel .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px;
}
.rango-panel .fgroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  flex: 0 1 auto;
}
.rango-panel .fgroup label {
  font-size: 11px;
  opacity: 0.6;
  text-transform: none;
}
.rango-panel .fgroup input,
.rango-panel .fgroup select {
  width: auto;
  min-width: 140px;
}
.rango-panel .hour-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rango-panel .hour-range select { min-width: 88px; }
.rango-panel #btnConsultarRango {
  white-space: nowrap;
  padding: 8px 22px;
}

/* Exportar se separa del resto de filtros con un borde: son acciones que
   producen un fichero, no que cambian la pantalla, y conviene que no se
   pulsen por inercia al ir a "Consultar". */
.rango-panel .fgroup-export {
  min-width: auto;
  margin-left: auto;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.rango-panel .export-botones {
  display: flex;
  gap: 8px;
}
.btn-export {
  white-space: nowrap;
  padding: 8px 18px;
}
.btn-export:hover:not(:disabled) {
  border-color: var(--accent, #fce300);
  color: var(--accent, #fce300);
}
.btn-export:disabled {
  opacity: 0.55;
  cursor: progress;
}
.nota-export {
  padding: 0 14px;
  margin-top: 0;
}

/* Estrecho: los filtros ya se apilan, asi que el borde izquierdo separa
   mal y se convierte en una linea superior. */
@media (max-width: 900px) {
  .rango-panel .fgroup-export {
    margin-left: 0;
    padding-left: 0;
    padding-top: 12px;
    border-left: none;
    border-top: 1px solid var(--border);
    width: 100%;
  }
}


/* ---- Modulos de video y Telegram ---- */
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
  font-size: 14px;
}
.switch-row input { width: 16px; height: 16px; accent-color: var(--accent, #fce300); }
.nota-modulo {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.7;
  max-width: 66ch;
  margin: 6px 0 14px;
}
.aviso-coste {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #3a3320;
  border-left: 3px solid var(--accent, #fce300);
  border-radius: 8px;
  background: rgba(252, 227, 0, 0.04);
  font-size: 13px;
  line-height: 1.6;
  max-width: 72ch;
}
.tg-estado {
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 20px;
  border: 1px solid var(--linea, #22262e);
}
.tg-estado.ok { border-color: #2ea04326; background: rgba(63, 185, 80, 0.08); }
.tg-estado.mal { border-color: #f8514926; background: rgba(248, 81, 73, 0.08); }
.sub-titulo {
  margin: 22px 0 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}
.tg-camaras { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }


/* Dentro de un modulo, los campos se apilaban a lo alto y los botones ocupaban
   todo el ancho. En horizontal se leen como una frase y el boton deja de
   parecer una barra de separacion. */
.modulo .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 0 4px;
}
.modulo .fgroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  flex: 0 0 auto;
}
.modulo .fgroup label {
  font-size: 11px;
  opacity: 0.6;
  text-transform: none;
}
.modulo .fgroup input,
.modulo .fgroup select { width: 150px; }
.modulo .filters button {
  width: auto;
  white-space: nowrap;
  padding: 8px 24px;
}


/* ---- Panel de disco ---- */
.disco-panel { margin: 4px 0 22px; }
.disco-cargando { opacity: 0.5; font-size: 13px; }
.disco-barra {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--linea, #22262e);
  margin-bottom: 10px;
}
.disco-barra i { display: block; height: 100%; }
.disco-barra .fotos { background: #3fb950; }
.disco-barra .videos { background: #58a6ff; }
.disco-barra .otros { background: #484f58; }
.disco-barra .reserva { background: #6e4a1f; }
.disco-barra .libre { background: transparent; }
.disco-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  opacity: 0.8;
}
.disco-leyenda span { display: flex; align-items: center; gap: 6px; }
.disco-leyenda i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.disco-nota {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: 0.7;
  max-width: 70ch;
}
.disco-nota b { opacity: 1; }


/* ------------------------------------------- CUERPO DE LOS MODULOS

   `.panel-body` no tenia ninguna regla. Con el reset `* { padding: 0 }` de
   arriba, el texto y los controles de los modulos de Video y Telegram quedaban
   pegados al borde izquierdo del panel, mientras que los modulos antiguos
   respiraban porque usaban `.zone-editor` o `.filterbar`, que si tienen
   relleno. Es el mismo relleno de esos dos, para que todos los modulos se vean
   iguales.
*/
.panel-body { padding: 18px 22px 22px; }

/* Un formulario de 2.000 px de ancho no se lee: la vista salta del titulo, a la
   izquierda del todo, al boton de guardar, a la derecha del todo. Se limita
   solo en los modulos de texto y formulario; los que llevan lienzo de zonas o
   tablas necesitan el ancho completo. */
#modulo-video, #modulo-telegram { max-width: 940px; }

/* ------------------------------------------- SENTIDO EN EL HISTORIAL */

.tag-entrada {
  background: rgba(63,185,80,.14); color: var(--green);
  border-color: rgba(63,185,80,.35);
}
.tag-salida {
  background: rgba(139,148,158,.14); color: var(--muted);
  border-color: rgba(139,148,158,.32);
}
/* Las filas de salida son contexto, no el foco: se atenuan para que el ojo
   caiga primero en las entradas, que son las que llevan prueba grafica. */
.fila-salida { opacity: .72; }
.fila-salida:hover { opacity: 1; }

/* Antes se ocultaba la celda (`visibility:hidden`) y quedaba un hueco mudo que
   parecia un fallo de carga. Decir que no hay foto, y por que, es mas corto de
   entender que un vacio. */
.sin-dato {
  display: inline-block; font-size: 11px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 8px; white-space: nowrap;
}


/* ------------------------------------------------- CONSUMO DEL EQUIPO */

.recursos { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 9px; }

.rec-fila {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
}
.rec-nombre { color: var(--muted); white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.rec-barra {
  height: 6px; border-radius: 3px; background: var(--panel-2);
  overflow: hidden; display: block;
}
.rec-barra i { display: block; height: 100%; border-radius: 3px; transition: width .4s; }
/* Tabular para que las cifras no bailen de ancho en cada refresco. */
.rec-cifra { font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; }
.rec-aviso { font-size: 11px; color: var(--orange); padding-top: 2px; }

@media (max-width: 1100px) {
  .rec-fila { grid-template-columns: 104px 1fr auto; }
}


/* ------------------------------------------- LINEA DE CONTEO Y FLUJO */

.btn-zone.linea:hover, .btn-zone.linea.activo {
  border-color: var(--accent); color: var(--accent);
}
.sw.amarillo { background: var(--accent); }

/* El aviso de que falta la linea NO es decorativo: sin ella los eventos salen
   sin direccion, y el cliente no puede demostrar nada. Tiene que verse. */
.flujo-aviso {
  margin: 0 16px 12px; padding: 9px 12px;
  border: 1px solid rgba(240,136,62,.35);
  border-left: 3px solid var(--orange);
  border-radius: 6px; background: rgba(240,136,62,.08);
  font-size: 11.5px; line-height: 1.5; color: var(--fg);
}

.flujo-par { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; }
.flujo-dato { font-size: 12px; color: var(--muted); }
/* Tabular para que los numeros no cambien de ancho en cada refresco. */
.flujo-dato b { font-size: 21px; font-weight: 700; color: var(--fg);
                font-variant-numeric: tabular-nums; margin-right: 3px; }
.flujo-dato b.green { color: var(--green); }
.flujo-dato b.orange { color: var(--orange); }

.nota-linea { border-left: 3px solid var(--accent); padding-left: 11px; }


/* ------------------------------------ EDITOR DE AREAS: GRUPOS

   Un grupo abierto se marca con la barra inferior en color, para que se vea de
   donde salieron los botones de abajo. Sin esa pista, la fila que aparece
   parece caida del cielo.
*/
.zone-controls.grupos { margin-bottom: 0; }
.btn-zone.grupo.abierto {
  border-color: var(--accent);
  border-bottom-color: transparent;
  background: rgba(255,255,255,.04);
}

/* `.zone-controls` es `display:flex`, y eso GANA al `display:none` que el
   navegador aplica por el atributo `hidden`: sin esta regla los tres grupos se
   ven siempre y el desplegable no despliega nada. */
.zone-controls.sub[hidden] { display: none; }

/* Las cabeceras de grupo NO llevan el color de su herramienta. Con el rojo de
   `.exc` puesto siempre, "Marcar area a ignorar" parecia ya seleccionado nada
   mas entrar. El color se reserva para el estado abierto, que es informacion
   de verdad. */
.btn-zone.grupo { border-color: var(--border); color: var(--fg); }
.btn-zone.grupo:hover { border-color: var(--muted); }

/* Flujo de bloque, no flex. Con flex la nota no bajaba a su propia linea: su
   `max-width` de lectura hacia que el motor la considerara lo bastante estrecha
   como para caber al lado de los botones, por mucho `flex-basis: 100%` que
   llevara. En bloque, un parrafo va debajo y punto. */
.zone-controls.sub {
  display: block;
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}
.zone-controls.sub > button { margin: 0 10px 0 0; vertical-align: middle; }
.zone-controls.estado { margin-top: 6px; }

/* Deshabilitado tiene que LEERSE como deshabilitado, no como roto. */
.zone-controls button:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.zone-controls button:disabled:hover {
  border-color: var(--border);
  color: var(--muted);
}


/* Al abrir un grupo se le quitaba el borde de abajo para "unirlo" con la fila
   de opciones. Queda como un boton mordido. Mejor el borde entero. */
.btn-zone.grupo.abierto { border-bottom-color: var(--accent); }

/* La explicacion de cada tarea vive DENTRO de su grupo: se lee cuando hace
   falta y no antes. Suelta debajo del lienzo, o se leen las tres siempre o no
   se lee ninguna. */
.nota-grupo {
  display: block;
  margin: 12px 2px 2px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 78ch;
}