/* ═══════════════════════════════════════════════════════════
   SENTRION — War-room (chrome de la Sala de Control)
   ───────────────────────────────────────────────────────────
   Chrome propio de la Sala (ADR 0017), portado TAL CUAL del portal de
   referencia (SITRAQ-V2 · portal_v2/views/sala-control-v2.php):
   topbar de módulos + mapa a pantalla completa + (en el próximo
   PR) paneles flotantes. Es específico de la Sala; se enlaza
   además del `design-system.css`, y usa SÓLO sus tokens (nada
   de paleta propia). Las patrullas se operan desde acá (panel
   PatrolTool), no desde páginas de admin sueltas.

   Nombres de clase conservados del original (`.topbar`, `.tb-*`,
   `.mod-btn`, `.spill`, `.float-panel`, `.fp-*`) para que el
   port sea fiel y reconocible contra la referencia.
   ═══════════════════════════════════════════════════════════ */

[x-cloak] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--primary); color: #fff; padding: 8px 14px; border-radius: var(--radius);
}
.skip-link:focus { left: 8px; top: 8px; }

/* ── App shell (columna: topbar + cuerpo) ───────────────────── */
.app      { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.app-body { flex: 1; position: relative; overflow: hidden; min-height: 0; }

/* Mapa a pantalla completa bajo los paneles flotantes. */
#map { position: absolute; inset: 0; background: var(--s); }
.leaflet-container { background: var(--s); }

/* ── Topbar (ribbon de la Sala) ─────────────────────────────── */
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  background: var(--s); border-bottom: 1px solid var(--b);
  display: flex; align-items: stretch; user-select: none;
  z-index: 600; position: relative;
}

.tb-brand {
  display: flex; align-items: center; gap: 9px; padding: 0 16px;
  border-right: 1px solid var(--b); text-decoration: none; color: var(--t1);
}
.tb-brand:hover { background: var(--s2); }
.tb-logo {
  width: 26px; height: 26px; border-radius: 7px; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 13px; color: #fff;
}
.tb-name { font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; color: var(--t1); }
.tb-name span { color: var(--cyan); }
.tb-modulelbl { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--t3); text-transform: uppercase; margin-top: 1px; }

/* Botones de módulo (Patrullas, Chat, …) */
.tb-modules { display: flex; align-items: stretch; border-right: 1px solid var(--b); }
.mod-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 64px; padding: 0 10px; background: none; border: none; border-right: 1px solid var(--b2);
  color: var(--t2); position: relative; transition: background .15s, color .15s; font-family: inherit;
}
.mod-btn:hover { background: var(--s2); color: var(--t1); }
.mod-btn.active { color: var(--cyan); background: rgba(0,217,192,.07); box-shadow: inset 0 -2px 0 var(--cyan); }
.mod-btn:disabled { opacity: .4; cursor: default; }
.mod-btn:disabled:hover { background: none; color: var(--t2); }
.mod-btn svg { width: 18px; height: 18px; }
.mod-lbl { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mod-badge {
  position: absolute; top: 7px; right: 9px; min-width: 15px; height: 15px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Indicadores de estado (spills) */
.tb-status { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 14px; overflow-x: auto; }
.tb-status::-webkit-scrollbar { height: 0; }
.spill {
  display: flex; align-items: center; gap: 6px; background: var(--s2); border: 1px solid var(--b);
  border-radius: 100px; padding: 4px 11px; white-space: nowrap; flex-shrink: 0;
}
.sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--t3); flex-shrink: 0; }
.sdot.live { background: var(--lime); box-shadow: var(--glow-lime); animation: pulse-dot 2.2s infinite; }
.sdot.connecting { background: var(--yellow); animation: pulse-dot 1s infinite; }
.sdot.cyan { background: var(--cyan); box-shadow: var(--glow-cyan); }
.sdot.alert { background: var(--red); box-shadow: var(--glow-red); animation: pulse-dot 1.2s infinite; }
.spill-lbl { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--t3); text-transform: uppercase; }
.spill-val { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--t1); }
.spill.danger { cursor: pointer; border-color: rgba(255,111,110,.3); }
.spill.danger .spill-val { color: var(--red); }

/* Reloj + usuario */
.tb-right { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-left: 1px solid var(--b); }
.tb-clock { font-family: var(--font-mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cyan); letter-spacing: .04em; }
.tb-user { display: flex; align-items: center; gap: 8px; }
.tb-av {
  width: 28px; height: 28px; border-radius: 50%; background: var(--primary);
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(26,92,240,.5); color: #fff;
}
.tb-uinfo { line-height: 1.2; }
.tb-uname { font-size: 11.5px; font-weight: 600; color: var(--t1); }
.tb-urole { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; color: var(--t3); text-transform: uppercase; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* Responsive: en pantallas chicas, el ribbon se compacta. */
@media (max-width: 720px) {
  .tb-modulelbl, .tb-uinfo { display: none; }
  .mod-btn { min-width: 52px; }
  .tb-right { padding: 0 10px; gap: 8px; }
}

/* ═══ PANEL FLOTANTE (PatrolTool) — portado de sala-control-v2 ═══════════════ */
/* Panel de vidrio arrastrable sobre el mapa donde se operan las patrullas. */
.float-panel {
  /* Se ancla a uno de 4 bordes del mapa (docks). La posición y el tamaño los da
     la clase de dock; el borde va del lado INTERNO (hacia el mapa). El
     drag/resize fijan medidas inline que se limpian al re-anclar. */
  position: absolute; z-index: 500;
  display: flex; flex-direction: column;
  background: rgba(14,14,18,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: none; border-radius: 0;
  box-shadow: 0 0 32px rgba(0,0,0,.5);
}
/* Los 4 docks fijos. El borde de 1px queda del lado del mapa (interno). */
.float-panel.dock-left   { top: 0; bottom: 0; left: 0;  width: 360px;  border-right: 1px solid var(--b); }
.float-panel.dock-right  { top: 0; bottom: 0; right: 0; width: 360px;  border-left: 1px solid var(--b); }
.float-panel.dock-top    { left: 0; right: 0; top: 0;   height: 320px; border-bottom: 1px solid var(--b); }
.float-panel.dock-bottom { left: 0; right: 0; bottom: 0; height: 320px; border-top: 1px solid var(--b); }
/* Fantasma mientras se arrastra: caja compacta y flotante hasta soltar (snap). */
.float-panel.fp-dragging { width: 340px !important; height: 300px !important; border: 1px solid var(--b);
  border-radius: 10px; opacity: .9; box-shadow: 0 16px 48px rgba(0,0,0,.6); cursor: grabbing; }
/* Minimizado: colapsa a la barra de título en su borde. */
.float-panel.fp-minimized { height: auto !important; }
.float-panel.dock-left.fp-minimized, .float-panel.dock-right.fp-minimized { bottom: auto; }
.float-panel.fp-minimized .fp-body,
.float-panel.fp-minimized .fp-action-footer { display: none; }

/* ═══════════════════════════════════════════════════════════
   FORMATO CANÓNICO DE PANEL (para toda herramienta futura de la
   Sala): `.float-panel` pegado al borde, full-height, y sus áreas
   scrolleables con BARRA + FLECHAS en ambos extremos para cuando
   hay muchos datos. Toda herramienta nueva monta `.float-panel`
   con su cuerpo scrolleable en `.fp-list` / `.fp-detail-body`.
   (Webkit/Chromium/Edge; en Firefox degrada a barra fina sin flechas.)
   ═══════════════════════════════════════════════════════════ */
/* scrollbar-color (Firefox): thumb visible sobre el panel oscuro. */
.float-panel .fp-list,
.float-panel .fp-detail-body { overflow-y: scroll; scrollbar-width: auto; scrollbar-color: rgba(240,242,245,.34) rgba(255,255,255,.05); }
.float-panel .fp-list::-webkit-scrollbar,
.float-panel .fp-detail-body::-webkit-scrollbar { width: 14px; }
.float-panel .fp-list::-webkit-scrollbar-track,
.float-panel .fp-detail-body::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
/* Thumb con contraste real (antes era casi del color del fondo → invisible). El
   borde transparente + background-clip deja aire alrededor sin ocultarlo. */
.float-panel .fp-list::-webkit-scrollbar-thumb,
.float-panel .fp-detail-body::-webkit-scrollbar-thumb { background: rgba(240,242,245,.32); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; min-height: 34px; }
.float-panel .fp-list::-webkit-scrollbar-thumb:hover,
.float-panel .fp-detail-body::-webkit-scrollbar-thumb:hover { background: var(--cyan); background-clip: padding-box; }
/* Flechas: un botón en cada extremo (arriba ▲ / abajo ▼). */
.float-panel .fp-list::-webkit-scrollbar-button:single-button,
.float-panel .fp-detail-body::-webkit-scrollbar-button:single-button {
  display: block; width: 14px; height: 14px; background-color: rgba(255,255,255,.05);
  background-repeat: no-repeat; background-position: center; background-size: 9px 9px;
}
.float-panel .fp-list::-webkit-scrollbar-button:single-button:hover,
.float-panel .fp-detail-body::-webkit-scrollbar-button:single-button:hover { background-color: rgba(255,255,255,.12); }
.float-panel .fp-list::-webkit-scrollbar-button:single-button:vertical:decrement,
.float-panel .fp-detail-body::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cdd3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 15 12 7 20 15'/%3E%3C/svg%3E");
}
.float-panel .fp-list::-webkit-scrollbar-button:single-button:vertical:increment,
.float-panel .fp-detail-body::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cdd3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 9 12 17 20 9'/%3E%3C/svg%3E");
}
/* Oculta los dobles-botones que Chromium a veces agrega en el mismo extremo. */
.float-panel .fp-list::-webkit-scrollbar-button:double-button,
.float-panel .fp-detail-body::-webkit-scrollbar-button:double-button { display: none; }

.fp-titlebar {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--b); cursor: grab; flex-shrink: 0;
  font-family: var(--font-display);
}
.fp-titlebar:active { cursor: grabbing; }
.fp-drag-dots { color: var(--t3); display: flex; }
.fp-title { flex: 1; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t1); }
.fp-title span { color: var(--cyan); }
.fp-controls { display: flex; gap: 2px; }
.fp-controls button {
  width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent;
  color: var(--t3); cursor: pointer; transition: background .12s, color .12s;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.fp-controls button:hover { background: var(--s3); color: var(--t1); }
.fp-btn-close:hover { background: rgba(255,111,110,.2); color: var(--red); }

.fp-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }

.fp-tabs { display: flex; gap: 4px; padding: 10px 10px 4px; flex-shrink: 0; }
.fp-tab {
  flex: 1; padding: 7px 0; border: none; background: transparent; color: var(--t3);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 8px; cursor: pointer; transition: background .15s, color .15s;
}
.fp-tab.on { background: var(--primary); color: #fff; box-shadow: 0 2px 10px rgba(26,92,240,.35); }
.fp-tab:not(.on):hover { background: var(--s2); color: var(--t1); }

.fp-search {
  margin: 4px 10px 8px; display: flex; align-items: center; gap: 7px;
  background: var(--s2); border: 1px solid var(--b); border-radius: 9px; padding: 7px 10px; flex-shrink: 0;
}
.fp-search svg { color: var(--t3); flex-shrink: 0; width: 14px; height: 14px; }
.fp-search input { flex: 1; background: none; border: none; outline: none; color: var(--t1); font-size: 11.5px; font-family: inherit; }
.fp-search input::placeholder { color: var(--t3); }

.fp-list { flex: 1; overflow-y: auto; padding-bottom: 8px; }
.list-section-header { padding: 10px 12px 4px; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }

/* Tarjeta de patrulla/dispositivo con barra de acento por estado. */
.pcard {
  position: relative; overflow: hidden;
  background: var(--s2); border: 1px solid var(--b); border-radius: 10px;
  padding: 10px 11px; margin: 6px 10px 0; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.pcard:hover { background: var(--s3); border-color: rgba(255,255,255,.13); }
.pcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lime); opacity: .9; }
.pcard.offline { opacity: .7; }
.pcard.offline::before { background: var(--t3); }
.pc-top { display: flex; align-items: center; gap: 8px; }
.pc-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--t3); }
.pc-status.ok { background: var(--lime); box-shadow: var(--glow-lime); }
.pc-status.off { background: var(--t3); }
.pc-name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-meta { display: flex; gap: 12px; margin-top: 7px; font-size: 10px; color: var(--t3); flex-wrap: wrap; }
.pc-meta b { color: var(--t2); font-weight: 600; }
.pc-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.06); margin-top: 8px; overflow: hidden; }
.pc-fill { height: 100%; border-radius: 2px; background: var(--cyan); transition: width .4s; }

/* Placeholder honesto de las pestañas cuyo backend (Rondas) aún no existe. */
.fp-empty { padding: 26px 18px; text-align: center; color: var(--t3); font-size: 12px; line-height: 1.6; }
.fp-empty svg { width: 30px; height: 30px; color: var(--t4); margin-bottom: 8px; }
.fp-empty b { color: var(--t2); font-weight: 600; }

.fp-action-footer { border-top: 1px solid var(--b); padding: 10px; flex-shrink: 0; }
.fp-action-btn {
  width: 100%; background: var(--s2); border: 1px solid var(--b); border-radius: 8px;
  color: var(--t2); font-weight: 600; padding: 8px 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, border-color .15s, color .15s;
}
.fp-action-btn:hover:not([disabled]) { background: var(--s3); border-color: var(--cyan); color: var(--cyan); }
.fp-action-btn[disabled] { opacity: .5; cursor: default; }
.fp-action-btn svg { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════
   Cinta táctica (ribbon) — paridad con la Sala de SITRAQ V2
   (portal_v2/views/sala-control-v2.php + sentrion-v2.css).
   Fila 1: marca + pestañas de función + estado. Fila 2: toolstrip
   con las herramientas de la función activa. El footer de
   indicadores y la leyenda cierran el war-room.
   ═══════════════════════════════════════════════════════════ */
.control-ribbon { position: relative; z-index: 600; flex: 0 0 auto; background: var(--s); border-bottom: 1px solid var(--b); user-select: none; }
.control-ribbon-top { display: flex; align-items: stretch; min-height: 34px; border-bottom: 1px solid var(--b2); }
.control-ribbon-brand { display: flex; align-items: center; gap: 8px; min-width: 166px; padding: 0 16px; color: var(--t1); text-decoration: none; border-right: 1px solid var(--b); }
.control-ribbon-brand:hover { background: var(--s2); }
.control-ribbon-logo { display: grid; place-items: center; width: 24px; height: 24px; color: var(--cyan); background: var(--primary-g); border: 1px solid var(--primary); border-radius: 7px; font-size: 12px; font-weight: 900; }
.control-ribbon-brand strong { font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; }
.control-ribbon-brand small { display: block; margin-top: 1px; color: var(--t3); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.control-ribbon-tabs { display: flex; min-width: 0; overflow-x: auto; }
.control-ribbon-tab { min-height: 34px; padding: 0 15px; color: var(--t3); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: 700 12px/1 var(--font-display); white-space: nowrap; }
.control-ribbon-tab:hover { color: var(--t1); background: var(--s2); }
.control-ribbon-tab.is-active { color: var(--t1); background: var(--s3); border-bottom-color: var(--primary); }
.control-ribbon-state { display: flex; align-items: center; gap: 12px; margin-left: auto; padding: 0 14px; color: var(--t3); font-size: 11px; white-space: nowrap; }
.control-ribbon-live { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px rgba(169,235,100,.32); }
.control-ribbon-live.is-connecting { background: var(--yellow); animation: pulse-dot 1s infinite; box-shadow: none; }
.control-ribbon-live.is-down { background: var(--red); box-shadow: var(--glow-red); }
.ribbon-bell { position: relative; display: flex; align-items: center; color: var(--t2); background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); text-decoration: none; }
.ribbon-bell:hover { color: var(--t1); background: var(--s2); }
.ribbon-bell svg { width: 17px; height: 17px; }
.ribbon-bell-badge { position: absolute; top: -2px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-red); }

.control-toolstrip { display: flex; min-height: 80px; overflow-x: auto; background: #050505; border-bottom: 1px solid rgba(255,255,255,.48); }
.control-toolstrip::-webkit-scrollbar { height: 5px; }
.control-toolstrip::-webkit-scrollbar-thumb { background: var(--t4); border-radius: 4px; }
.control-toolgroup { display: flex; min-width: max-content; }
.control-tool { display: grid; grid-template-rows: 38px auto auto; place-items: center; align-content: center; gap: 2px; width: 94px; min-height: 80px; padding: 6px 8px; color: var(--t1); background: #050505; border: 0; border-right: 1px solid rgba(255,255,255,.48); cursor: pointer; font-family: var(--font-display); text-align: center; text-decoration: none; transition: background .15s ease, color .15s ease; }
.control-tool:first-child { border-left: 1px solid rgba(255,255,255,.48); }
.control-tool:hover { color: var(--t1); background: #111218; }
.control-tool.is-active { color: var(--blue); background: rgba(26,92,240,.13); box-shadow: inset 0 0 0 1px rgba(91,155,248,.88), inset 0 1px 0 rgba(255,255,255,.1); }
.control-tool.is-active .control-tool-meta { color: rgba(139,185,255,.92); }
.control-tool.is-disabled { cursor: not-allowed; opacity: .38; }
.control-tool.is-disabled:hover { background: #050505; }
.control-tool-icon { display: grid; place-items: center; min-height: 36px; }
.control-tool-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.control-tool-label { font-size: 11px; font-weight: 750; line-height: 1.1; }
.control-tool-meta { min-height: 11px; color: var(--t3); font-size: 9px; font-weight: 700; }
.control-tool.is-dashboard .control-tool-icon, .control-tool.is-dashboard .control-tool-meta { color: var(--blue); }
.control-tool-empty { flex: 1; min-width: 16px; background: #050505; border-bottom: 1px solid rgba(255,255,255,.48); }

/* Footer de indicadores operativos. */
.control-indicators { display: flex; align-items: stretch; min-height: 44px; flex: 0 0 auto; overflow-x: auto; background: var(--s); border-top: 1px solid var(--b); z-index: 600; }
.control-indicator { display: grid; align-content: center; min-width: 140px; padding: 5px 14px; border-right: 1px solid var(--b); white-space: nowrap; }
.control-indicator-label { color: var(--t3); font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.control-indicator-value { margin-top: 2px; color: var(--t1); font-size: 12px; font-weight: 800; }
.control-indicator-value.is-ok { color: var(--lime); }
.control-indicator-value.is-warning { color: var(--yellow); }
.control-indicator-value.is-danger { color: var(--red); }

/* Leyenda del mapa. Se ancla a una de 4 esquinas (legendCorner), siempre en el
   lado libre (opuesto a los controles y al panel). */
.map-legend { position: absolute; z-index: 450; padding: 9px 13px; background: rgba(14,14,18,.9); border: 1px solid var(--b); border-radius: 12px; backdrop-filter: blur(8px); }
.map-legend.tr { top: 14px; right: 14px; }
.map-legend.tl { top: 14px; left: 14px; }
.map-legend.br { bottom: 14px; right: 14px; }
.map-legend.bl { bottom: 14px; left: 14px; }
.legend-title { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--t2); line-height: 1.9; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Controles del mapa: un solo stack contiguo (sin huecos), anclado a una esquina
   del lado libre (toolsCorner). Los grupos son items del flex, no absolutos. */
.map-tools { position: absolute; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.map-tools.tr { top: 12px; right: 10px; }
.map-tools.tl { top: 12px; left: 10px; }
.map-tools.br { bottom: 12px; right: 10px; }
.map-tools.bl { bottom: 12px; left: 10px; }

/* Switcher de capas (menú colapsable). Propio, no el de Leaflet. */
.map-layers { position: relative; }
.map-layers-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--t1); background: var(--s); border: 1px solid var(--b); border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.map-layers-btn:hover, .map-layers-btn.on { background: var(--s2); color: var(--cyan); border-color: var(--cyan); }
.map-layers-btn svg { width: 18px; height: 18px; }
.map-layers-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 182px; padding: 5px; z-index: 5; background: rgba(14,14,18,.98); border: 1px solid var(--b); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.map-layers-menu.menu-left { left: 0; right: auto; }
.map-layers-menu.menu-up { top: auto; bottom: calc(100% + 6px); }
.map-layers-opt { display: block; width: 100%; padding: 8px 10px; color: var(--t2); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.map-layers-opt:hover { color: var(--t1); background: var(--s2); }
.map-layers-opt.on { color: var(--cyan); background: rgba(0,217,192,.1); }

/* Toggle 2D/3D. */
.map-mode { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--b);
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.map-mode-btn { width: 38px; height: 30px; color: var(--t2); background: var(--s); border: none; cursor: pointer;
  font: 700 12px/1 Urbanist, Inter, system-ui, sans-serif; }
.map-mode-btn + .map-mode-btn { border-top: 1px solid var(--b); }
.map-mode-btn:hover { color: var(--t1); background: var(--s2); }
.map-mode-btn.on { color: var(--cyan); background: rgba(0,217,192,.14); }

/* Zoom compartido (2D y 3D). */
.map-zoom { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--b);
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.map-zoom button { width: 38px; height: 38px; color: var(--t1); background: var(--s); border: none; cursor: pointer;
  font: 700 20px/1 Urbanist, Inter, system-ui, sans-serif; }
.map-zoom button + button { border-top: 1px solid var(--b); }
.map-zoom button:hover { color: var(--cyan); background: var(--s2); }

/* Control de imagen 3D (vertical / perímetro / rotar). Solo aparece en 3D. */
.map-cam { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--b);
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.map-cam button { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  color: var(--t1); background: var(--s); border: none; cursor: pointer; }
.map-cam button + button { border-top: 1px solid var(--b); }
.map-cam button:hover { color: var(--cyan); background: var(--s2); }
.map-cam svg { width: 18px; height: 18px; }

/* Creación de geocerca: usa el .float-panel canónico (chrome estándar). El
   formulario vive dentro de .fp-body; acá van sólo los campos. */
.gf-form { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.gf-hint { font-size: 11px; color: var(--t3); margin: 0 0 2px; }
.gf-count { font-size: 12px; color: var(--t2); display: flex; align-items: center; gap: 8px; }
.gf-count b { color: var(--cyan); }
.gf-mini { font-size: 10px; padding: 3px 7px; border: 1px solid var(--b); border-radius: 12px; background: var(--s2); color: var(--t2); cursor: pointer; }
.gf-form label { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin-top: 4px; }
.gf-form select, .gf-form input { padding: 7px 9px; background: var(--s); border: 1px solid var(--b); border-radius: var(--radius-sm); color: var(--t1); font-size: 13px; }
.gf-rules { display: flex; gap: 4px; }
.gf-rules button { flex: 1; padding: 6px 4px; font-size: 10.5px; font-weight: 700; border: 1px solid var(--b); border-radius: var(--radius-sm); background: var(--s2); color: var(--t3); cursor: pointer; }
.gf-rules button.on { color: var(--cyan); border-color: var(--cyan); background: rgba(0,217,192,.12); }
.gf-inc-type { width: 100%; margin-top: 2px; }
.gf-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.gf-sw { width: 24px; height: 24px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.gf-sw.on { border-color: #fff; }
.gf-err { color: var(--red); font-size: 12px; }
.gf-actions { display: flex; gap: 8px; margin-top: 6px; }
.gf-save { flex: 1; padding: 8px; font-weight: 700; font-size: 13px; border: none; border-radius: var(--radius-sm); background: var(--cyan); color: #04121a; cursor: pointer; }
.gf-save:disabled { opacity: .6; }
.gf-cancel { padding: 8px 12px; font-weight: 700; font-size: 13px; border: 1px solid var(--b); border-radius: var(--radius-sm); background: var(--s2); color: var(--t2); cursor: pointer; }
/* Vértice arrastrable de la geocerca en construcción. El contenedor de 30px es
   transparente pero agarra el arrastre (área amplia); el punto de 12px es lo visible. */
/* Los puntos del borrador son SÓLO visuales: pointer-events:none deja que el
   mousedown llegue al mapa, que es quien maneja el arrastre del vértice (robusto
   ante capas que roben el gesto). El cursor "manito" lo pone el mapa al pasar cerca. */
.gf-vtx-icon { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gf-vtx { display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #4D8DFF; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }

/* Lista de geocercas creadas (vista 'list' del panel). */
.gf-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.gf-empty { font-size: 12px; color: var(--t3); margin: 4px 0 2px; }
.gf-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--s); border: 1px solid var(--b); border-radius: var(--radius-sm); }
.gf-item-sw { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.gf-item-main { flex: 1; min-width: 0; }
.gf-item-name { font-size: 13px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-item-sub { font-size: 10.5px; color: var(--t3); margin-top: 1px; }
.gf-item-edit { flex-shrink: 0; padding: 5px 10px; font-size: 11px; font-weight: 700; border: 1px solid var(--b); border-radius: var(--radius-sm); background: var(--s2); color: var(--t2); cursor: pointer; }
.gf-item-edit:hover { color: var(--cyan); border-color: var(--cyan); }
.gf-new { margin-top: 4px; padding: 9px; font-weight: 700; font-size: 13px; border: 1px dashed var(--cyan); border-radius: var(--radius-sm); background: rgba(0,217,192,.1); color: var(--cyan); cursor: pointer; }
.gf-new:hover { background: rgba(0,217,192,.18); }
/* Formulario: volver a la lista + sitio de sólo lectura al editar. */
.gf-back { align-self: flex-start; padding: 4px 8px; font-size: 11px; font-weight: 700; border: none; background: none; color: var(--t3); cursor: pointer; }
.gf-back:hover { color: var(--cyan); }
.gf-static { padding: 7px 9px; background: var(--s2); border: 1px solid var(--b); border-radius: var(--radius-sm); color: var(--t2); font-size: 13px; }

/* Gestor de capas (Overlay Manager). */
.lyr-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.lyr-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: var(--s); border: 1px solid var(--b); border-radius: var(--radius-sm); }
.lyr-eye { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--b); border-radius: var(--radius-sm); background: var(--s2); color: var(--t3); cursor: pointer; }
.lyr-eye svg { width: 15px; height: 15px; }
.lyr-eye.on { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.lyr-eye:not(.on) { opacity: .5; }
.lyr-eye.sm { width: 22px; height: 22px; }
.lyr-eye.sm svg { width: 13px; height: 13px; }
.lyr-ico { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--t2); }
.lyr-ico svg { width: 17px; height: 17px; }
.lyr-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyr-count { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--t2); background: var(--s2); border: 1px solid var(--b); border-radius: 10px; padding: 1px 8px; min-width: 22px; text-align: center; }
.lyr-act { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--t3); cursor: pointer; font-size: 12px; }
.lyr-act svg { width: 15px; height: 15px; }
.lyr-act:hover { color: var(--cyan); }
.lyr-act-empty { width: 26px; flex-shrink: 0; }
/* Sublista de geocercas. */
.lyr-sub { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 2px 14px; padding-left: 8px; border-left: 1px solid var(--b); }
.lyr-subrow { display: flex; align-items: center; gap: 7px; padding: 5px 6px; background: var(--s2); border: 1px solid var(--b); border-radius: var(--radius-sm); }
.lyr-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.lyr-subname { flex: 1; min-width: 0; font-size: 12px; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyr-crossings-all { margin-top: 2px; padding: 6px; font-size: 11px; font-weight: 700; border: 1px dashed var(--b); border-radius: var(--radius-sm); background: var(--s); color: var(--t2); cursor: pointer; }
.lyr-crossings-all:hover { color: var(--cyan); border-color: var(--cyan); }
.lyr-empty { font-size: 11.5px; color: var(--t3); padding: 4px 2px; }
/* Historial de cruces. */
.lyr-crossings { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.lyr-cx-title { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--t2); margin: 2px 0 4px; }
.lyr-cx { display: flex; align-items: center; gap: 10px; padding: 7px 9px; background: var(--s); border: 1px solid var(--b); border-left-width: 3px; border-radius: var(--radius-sm); }
.lyr-cx.enter { border-left-color: var(--lime); }
.lyr-cx.exit { border-left-color: var(--red); }
.lyr-cx-badge { flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; }
.lyr-cx.enter .lyr-cx-badge { color: var(--lime); background: color-mix(in srgb, var(--lime) 15%, transparent); }
.lyr-cx.exit .lyr-cx-badge { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }
.lyr-cx-main { flex: 1; min-width: 0; }
.lyr-cx-name { font-size: 12.5px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyr-cx-sub { font-size: 10.5px; color: var(--t3); margin-top: 1px; }
.lyr-cx-alert { color: var(--amber, #F5B301); font-weight: 700; }

/* Mis capas (capas de usuario). */
.lyr-usection { margin-top: 6px; border-top: 1px solid var(--b); padding-top: 6px; }
.lyr-uhead .lyr-name { color: var(--t1); }
.lyr-count.sm { min-width: 18px; font-size: 10px; padding: 1px 6px; }
.lyr-addhint { font-size: 11.5px; color: var(--cyan); background: rgba(0,217,192,.08); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); border-radius: var(--radius-sm); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.lyr-addtop { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.lyr-symgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lyr-sym { display: flex; align-items: center; justify-content: center; padding: 3px; border: 1px solid var(--b); border-radius: var(--radius-sm); background: var(--s); cursor: pointer; }
.lyr-sym svg { width: 22px; height: 22px; display: block; }
.lyr-sym:hover { border-color: var(--cyan); }
.lyr-sym.on { border-color: #fff; background: var(--s2); box-shadow: 0 0 0 1px #fff inset; }
/* Símbolo de un marcador de usuario en el mapa (divIcon). */
.ul-sym-icon { display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.ul-sym-icon svg { width: 30px; height: 30px; }
.lyr-mini { font-size: 10px; font-weight: 700; padding: 3px 9px; border: 1px solid var(--cyan); border-radius: 12px; background: var(--s2); color: var(--cyan); cursor: pointer; }
.lyr-newform { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--s2); border: 1px dashed var(--b); border-radius: var(--radius-sm); }
.lyr-newform input, .lyr-newform select { padding: 7px 9px; background: var(--s); border: 1px solid var(--b); border-radius: var(--radius-sm); color: var(--t1); font-size: 13px; }
.lyr-err { color: var(--red); font-size: 12px; }
.lyr-act.on { color: var(--cyan); }
/* Marcador de una capa de usuario en el mapa (divIcon). */
.ul-marker-icon { display: flex; align-items: center; justify-content: center; }
.ul-marker { display: block; width: 14px; height: 14px; border-radius: 50%; background: #4D8DFF; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }

/* Barra de paneles abiertos (abajo-centro): se ve uno a la vez, acá se cambia. */
.panel-bar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 480; display: flex; gap: 6px; max-width: calc(100% - 20px); flex-wrap: wrap; justify-content: center; }
.panel-tab { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font: 700 12px Urbanist, Inter, system-ui, sans-serif; color: var(--t2);
  background: rgba(14,14,18,.92); border: 1px solid var(--b); border-radius: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); backdrop-filter: blur(8px); }
.panel-tab:hover { color: var(--t1); border-color: var(--cyan); }
.panel-tab.on { color: var(--cyan); border-color: var(--cyan); background: rgba(0,217,192,.14); }
.panel-tab-x { color: var(--t3); font-size: 15px; line-height: 1; }
.panel-tab-x:hover { color: var(--red); }

@media (max-width: 760px) {
  .control-ribbon-brand { min-width: 52px; padding: 0 14px; }
  .control-ribbon-brand strong, .control-ribbon-brand small { display: none; }
  .control-toolstrip { min-height: 70px; }
  .control-tool { width: 82px; min-height: 70px; }
  .control-tool-label { font-size: 10px; }
  .control-indicator { min-width: 128px; }
}

/* ═══════════════════════════════════════════════════════════
   Marcadores WinTAK (Etapa 2) — paridad con la Sala de SITRAQ V2.
   Círculo con iniciales + punto de estado + etiqueta. `op` = ámbar
   (dispositivo en patrulla), `dev` = cyan (dispositivo en campo).
   ═══════════════════════════════════════════════════════════ */
.tak-marker-wrap { position: relative; overflow: visible; display: flex; flex-direction: column; align-items: center; }
.tak-circle { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-family: var(--font-mono); letter-spacing: -.5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); border: 3px solid rgba(255,255,255,.95); position: relative; flex-shrink: 0; transition: box-shadow .2s; }
.tak-circle.op { background: radial-gradient(circle at 38% 35%, #facc15, #b45309); box-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 20px rgba(250,204,21,.6), 0 0 1px #000; }
.tak-circle.op.offline { background: radial-gradient(circle at 38% 35%, #6b7280, #374151); box-shadow: 0 2px 8px rgba(0,0,0,.9); opacity: .75; }
.tak-circle.op.alert { background: radial-gradient(circle at 38% 35%, #f87171, #991b1b); box-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 22px rgba(239,68,68,.8); animation: alert-pulse 1.2s infinite; }
.tak-circle.dev { background: radial-gradient(circle at 38% 35%, #22d3ee, #0e7490); box-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 18px rgba(34,211,238,.6); }
.tak-circle.dev.offline { background: radial-gradient(circle at 38% 35%, #6b7280, #374151); box-shadow: 0 2px 8px rgba(0,0,0,.9); opacity: .7; }
@keyframes alert-pulse { 0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 22px rgba(239,68,68,.6); } 50% { box-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 36px rgba(239,68,68,1); } }
.tak-dot { position: absolute; top: -3px; right: -3px; border-radius: 50%; border: 2.5px solid #060d17; }
.tak-dot.online  { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.tak-dot.offline { background: #6b7280; }
.tak-dot.alert   { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.tak-label { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: rgba(0,0,0,.88); color: #f1f5f9; font-family: var(--font-sans); font-weight: 600; font-size: 11px; padding: 2px 7px; border-radius: 4px; border: 1px solid #444; box-shadow: 0 2px 8px rgba(0,0,0,.8); pointer-events: none; line-height: 1.5; letter-spacing: .02em; }
.tak-label.op-lbl  { border-color: rgba(251,191,36,.4); color: #fde68a; }
.tak-label.dev-lbl { border-color: rgba(45,212,191,.4); color: #99f6e4; }

/* Controles de Leaflet en tema oscuro (zoom + selector de capas + popups). */
.leaflet-container { background: #0a0c10; font-family: var(--font-display); }
.leaflet-control-zoom a { background: var(--s) !important; color: var(--t1) !important; border: 1px solid var(--b) !important; }
.leaflet-control-zoom a:hover { background: var(--s2) !important; }
.leaflet-control-layers { background: rgba(14,14,18,.94) !important; color: var(--t1) !important; border: 1px solid var(--b) !important; border-radius: 10px !important; backdrop-filter: blur(8px); }
/* El toggle de capas trae un PNG que no vendorizamos → ícono en blanco. Lo pintamos
   con un SVG inline (ícono de capas) para que no quede el cuadro roto. */
.leaflet-control-layers-toggle { width: 34px !important; height: 34px !important; background-color: var(--s) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0F2F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") !important; background-size: 18px 18px !important; background-position: center !important; background-repeat: no-repeat !important; }
.leaflet-control-layers-expanded { padding: 8px 10px !important; min-width: 150px; }
.leaflet-control-layers-list { margin: 0; }
.leaflet-control-layers label { color: var(--t1); font-size: 12px; display: flex; align-items: center; gap: 7px; margin: 1px 0; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.leaflet-control-layers label:hover { background: var(--s2); }
.leaflet-control-layers label span { display: flex; align-items: center; gap: 7px; }
.leaflet-control-layers label > span > span { white-space: nowrap; }
.leaflet-control-layers-selector { accent-color: var(--cyan); width: 14px; height: 14px; margin: 0; }
.leaflet-control-layers-separator { border-top: 1px solid var(--b); margin: 6px 0; }
.leaflet-control-attribution { background: rgba(8,8,8,.7) !important; color: var(--t3) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--t2) !important; }
.leaflet-popup-content-wrapper { background: var(--s) !important; color: var(--t1) !important; border: 1px solid var(--b); border-radius: 10px !important; }
.leaflet-popup-tip { background: var(--s) !important; }
.leaflet-popup-content { margin: 10px 14px !important; font-size: 12px; }
.leaflet-popup-close-button { color: var(--t3) !important; }
.popup-name { font-weight: 700; color: var(--cyan); margin-bottom: 5px; font-size: 13px; }
.popup-row  { color: var(--t1); font-size: 11px; margin-top: 3px; }
.popup-mono { font-family: var(--font-mono); color: var(--cyan); }
/* Tooltip de hover del marcador (info rápida; el detalle completo va al panel). */
.leaflet-tooltip.tak-tip { background: var(--s); color: var(--t1); border: 1px solid var(--b);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.5); padding: 8px 11px; }
.leaflet-tooltip.tak-tip::before { border-top-color: var(--b); }

/* Menú único de pantallas (<ds-topbar-nav>) en la cinta de la Sala. */
.tb-menu { position: relative; display: flex; }
.tb-menu-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--t2); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.tb-menu-btn:hover, .tb-menu-btn[aria-expanded="true"] { color: var(--t1); background: var(--s2); border-color: var(--b); }
.tb-menu-btn svg { width: 17px; height: 17px; }
.tb-menu-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 208px; padding: 6px; background: rgba(14,14,18,.98); border: 1px solid var(--b); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.55); backdrop-filter: blur(12px); z-index: 1200; }
.tb-menu-pop[hidden] { display: none; }
.tb-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; color: var(--t2); text-decoration: none; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; text-align: left; }
.tb-menu-item:hover { color: var(--t1); background: var(--s2); }
.tb-menu-ic { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--cyan); flex-shrink: 0; }
.tb-menu-ic svg { width: 18px; height: 18px; }
.tb-menu-sep { height: 1px; background: var(--b); margin: 5px 4px; }
.tb-menu-logout { color: var(--red); }
.tb-menu-logout .tb-menu-ic { color: var(--red); }
.tb-menu-logout:hover { background: rgba(255,111,110,.12); }

/* ═══════════════════════════════════════════════════════════
   Etapa 3 — comportamiento de paneles como SITRAQ V2:
   redimensionar (handles) + lista↔detalle en el mismo panel
   (detalle de patrulla con Info/Novedades/Chat + telemetría de
   dispositivo). Datos reales del snapshot de patrulla y del feed.
   ═══════════════════════════════════════════════════════════ */
.float-panel { min-width: 260px; min-height: 180px; }
/* Handle de resize en el borde INTERNO (hacia el mapa) según el dock:
   E para dock-left, W para dock-right, S para dock-top, N para dock-bottom. */
.fp-resize-e { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: ew-resize; }
.fp-resize-w { position: absolute; top: 0; left: 0;  width: 7px; height: 100%; cursor: ew-resize; }
.fp-resize-s { position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; cursor: ns-resize; }
.fp-resize-n { position: absolute; left: 0; top: 0;    width: 100%; height: 7px; cursor: ns-resize; }

/* Scrollbar del lado interno: por defecto va a la derecha (dock-left, correcto);
   en dock-right se invierte a la izquierda (opuesto al margen de pantalla). */
.float-panel.dock-right .fp-list, .float-panel.dock-right .fp-detail-body { direction: rtl; }
.float-panel.dock-right .fp-list > *, .float-panel.dock-right .fp-detail-body > * { direction: ltr; }
.float-panel.fp-resizing { transition: none !important; user-select: none; }

/* Vista de detalle (reemplaza la lista dentro del mismo panel). */
.fp-detail { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fp-detail-head { display: flex; align-items: center; gap: 9px; padding: 12px; border-bottom: 1px solid var(--b); flex-shrink: 0; }
.detail-back-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; color: var(--t2); background: transparent; border: 1px solid var(--b); border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: 600; }
.detail-back-btn:hover { color: var(--t1); background: var(--s3); }
.detail-back-btn svg { width: 12px; height: 12px; }
.detail-badge { margin-left: auto; padding: 2px 9px; border-radius: 100px; font-size: 9px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; border: 1px solid transparent; }
.detail-badge.online  { color: var(--lime); background: var(--success-g, rgba(169,235,100,.12)); border-color: rgba(169,235,100,.28); }
.detail-badge.offline { color: var(--t3); background: rgba(255,255,255,.05); border-color: var(--b); }
.detail-badge.act     { color: var(--cyan); background: rgba(0,217,192,.12); border-color: rgba(0,217,192,.25); }
.detail-badge.inc     { color: var(--red); background: rgba(255,111,110,.12); border-color: rgba(255,111,110,.25); }
.detail-tabs { display: flex; gap: 2px; padding: 8px 10px 0; flex-shrink: 0; border-bottom: 1px solid var(--b); }
.detail-tab { flex: 1; padding: 8px 0; position: relative; color: var(--t3); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.detail-tab.on { color: var(--cyan); border-bottom-color: var(--cyan); }
.detail-tab:not(.on):hover { color: var(--t2); }
.detail-tab .tab-badge { position: absolute; top: 2px; right: 8px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--red); color: #fff; font-size: 8.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.fp-detail-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.detail-title { font-size: 14px; font-weight: 800; color: var(--t1); }
.detail-sub { font-size: 10.5px; color: var(--t3); margin-top: 2px; }
.detail-section { margin-bottom: 14px; }
.detail-label { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-bottom: 7px; }
.detail-grid { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; align-items: baseline; }
.detail-key { font-size: 11px; color: var(--t3); white-space: nowrap; }
.detail-val { font-size: 12px; color: var(--t1); text-align: right; word-break: break-word; }
.detail-val.mono { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); }
.detail-empty { font-size: 11px; color: var(--t3); font-style: italic; }

/* Timeline de checkpoints. */
.cp-row { display: flex; gap: 10px; position: relative; padding-bottom: 13px; }
.cp-row::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--b); }
.cp-row:last-child::before { display: none; }
.cp-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--b); background: var(--s2); flex-shrink: 0; margin-top: 1px; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; color: var(--t3); }
.cp-dot.done { background: var(--lime); border-color: rgba(169,235,100,.4); color: #04210a; }
.cp-dot.incident { background: var(--red); border-color: rgba(255,111,110,.5); color: #fff; }
.cp-dot.skipped { background: var(--yellow); border-color: rgba(245,200,66,.5); color: #2a2202; }
.cp-info { flex: 1; min-width: 0; }
.cp-name { font-size: 11.5px; font-weight: 600; color: var(--t1); }
.cp-status-badge { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 100px; font-size: 9px; font-weight: 700; }
.cp-status-badge.ok  { color: var(--lime); background: rgba(169,235,100,.1); }
.cp-status-badge.nok { color: var(--red);  background: rgba(255,111,110,.12); }
.cp-status-badge.skip{ color: var(--yellow); background: rgba(245,200,66,.12); }
.cp-time { font-size: 9.5px; color: var(--t3); margin-top: 3px; }
.cp-note { margin-top: 4px; font-size: 10.5px; color: var(--t2); }

/* Tarjeta de novedad. */
.novedad-card { background: var(--s2); border: 1px solid var(--b); border-left: 3px solid var(--red); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.nov-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nov-cat { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--red); text-transform: uppercase; }
.nov-time { font-size: 9px; color: var(--t3); }
.nov-desc { font-size: 11px; color: var(--t2); margin-top: 5px; line-height: 1.45; }

/* Telemetría de dispositivo. */
.dd-hero { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; }
.dd-avatar { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,217,192,.1); color: var(--cyan); border: 1px solid rgba(0,217,192,.25); }
.dd-avatar svg { width: 20px; height: 20px; }
.dd-name { font-size: 15px; font-weight: 700; color: var(--t1); }
.dd-callsign { font-size: 11px; color: var(--t3); margin-top: 2px; }
.dd-card { background: var(--s2); border: 1px solid var(--b); border-radius: 9px; padding: 11px 13px; margin-bottom: 9px; }
.dd-card-lbl { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-bottom: 9px; }
.dd-bat-row { display: flex; align-items: center; gap: 11px; }
.dd-bat-track { flex: 1; height: 10px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.dd-bat-fill { height: 100%; border-radius: 6px; transition: width .4s ease; }
.dd-bat-pct { font-family: var(--font-mono); font-size: 16px; font-weight: 700; min-width: 50px; text-align: right; }
.detail-action { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 11px; padding: 8px; color: var(--cyan); background: rgba(0,217,192,.08); border: 1px solid rgba(0,217,192,.25); border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: 600; }
.detail-action:hover { background: rgba(0,217,192,.16); }
.detail-action svg { width: 13px; height: 13px; }
.detail-note { padding: 10px 12px; background: var(--s2); border: 1px dashed var(--b); border-radius: 8px; font-size: 10.5px; color: var(--t3); text-align: center; }