/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  --bg:       #0d1020;
  --surface:  #131828;
  --raised:   #1a2035;
  --border:   #222c44;
  --border2:  #2d3a55;
  --muted:    #7d8fb4;
  --dim:      #a8b6d3;
  --text:     #c5cedd;
  --bright:   #eef1f8;
  --fire:     #c8102e;
  --fire2:    rgba(200,16,46,.12);
  --go:       #30d474;
  --go2:      rgba(48,212,116,.12);
  --hold:     #f5c842;
  --hold2:    rgba(245,200,66,.12);
  --dead:     #374151;
  --H:        'Bebas Neue', sans-serif;
  --B:        'DM Sans', sans-serif;
  --M:        'DM Mono', monospace;
  --nav-h:    50px;
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--B); font-size:14px; }

/* ═══════════════════════════════════════════
   APP SHELL  (nav + content)
═══════════════════════════════════════════ */
#app {
  display: grid;
  grid-template-rows: 50px 1fr;
  height: 100vh;
}

/* ─── NAV ─── */
#nav {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
}
#nav::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--fire);
}

.brand {
  font-family: var(--H);
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--bright);
  padding-right: 20px;
  margin-right: 16px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.brand b { color: var(--fire); font-weight: 400; }

.nav-tabs { display: flex; height: 100%; gap: 2px; }
.nav-tab {
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 16px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color .18s;
}
.nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fire);
  transform: scaleX(0);
  transition: transform .18s;
}
.nav-tab:hover { color: var(--dim); }
.nav-tab.on { color: var(--bright); }
.nav-tab.on::after { transform: scaleX(1); }

.nav-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

#sidebar-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 32px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  background: none;
  color: var(--bright);
  cursor: pointer;
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#sidebar-toggle:hover { border-color: var(--fire); color: var(--fire); }
#sidebar-toggle svg { flex-shrink: 0; }

#mobile-backdrop {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0;
  background: rgba(6, 10, 18, .58);
  backdrop-filter: blur(2px);
  z-index: 1200;
}

/* live pill */
.pill-live {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--go);
  border-radius: 2px;
  background: var(--go2);
}
.dot-live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--go);
  animation: livepulse 2s ease-in-out infinite;
}
@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.pill-live span { font-family:var(--M); font-size:9px; color:var(--go); letter-spacing:1px; }

/* interval badge */
#badge-interval {
  font-family: var(--M);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .5px;
}
#badge-interval b { color: var(--dim); }

/* layer buttons */
.layer-group { display: flex; gap: 2px; }
.layer-btn {
  font-family: var(--M);
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  cursor: pointer;
  border-radius: 2px;
  transition: all .15s;
}
.layer-btn:hover { color: var(--text); border-color: var(--dim); }
.layer-btn.on { background: var(--fire); border-color: var(--fire); color: #fff; }

/* geocercas */
#zonas-panel {
  display: none; position: fixed; right: 0; top: 0; bottom: 0; width: 300px;
  background: linear-gradient(180deg, rgba(19,24,40,.98) 0%, rgba(13,16,32,.98) 100%);
  border-left: 1px solid var(--border2); z-index: 1200;
  flex-direction: column; overflow: hidden;
  box-shadow: -24px 0 60px rgba(3, 8, 20, .35);
}
#zonas-panel.open { display: flex; }
.zonas-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
  gap: 12px;
}
.zonas-title { font-family: var(--H); font-size: 24px; letter-spacing: 1px; color: var(--bright); line-height: 1; }
.zonas-meta { margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.btn-close-zonas { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 0; }
#zonas-list { flex: 1; overflow-y: auto; padding: 12px; }
.zona-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 11px;
  margin-bottom: 8px; background: rgba(8, 12, 24, .82); border: 1px solid var(--border);
  border-radius: 10px;
}
.zona-item-main { flex: 1; min-width: 0; }
.zona-item-name { display: block; font-size: 12px; color: var(--bright); font-weight: 600; }
.zona-item-radio { display: block; font-size: 11px; color: var(--muted); font-family: var(--M); margin-top: 3px; }
.zona-item-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zona-item.is-paused { opacity:.72; }
.zona-item-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; padding:2px 7px; border-radius:999px;
  border:1px solid rgba(96, 116, 162, .24);
  font-family:var(--M); font-size:8px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted);
}
.zona-item-badge.live { color:var(--go); border-color:rgba(48,212,116,.28); background:rgba(16,68,36,.24); }
.zona-item-badge.pause { color:var(--hold); border-color:rgba(245,200,66,.26); background:rgba(73,56,12,.24); }
.zona-item-actions { display: flex; gap: 6px; align-items: center; }
.btn-zone-action {
  background: rgba(13, 20, 38, .96); border: 1px solid rgba(96, 116, 162, .26); color: var(--muted);
  cursor: pointer; font-size: 11px; padding: 5px 8px; border-radius: 7px; font-family: var(--M);
}
.btn-zone-action:hover { color: var(--bright); border-color: rgba(120, 150, 220, .45); }
.btn-zone-action.warn:hover { color: #fde68a; border-color: rgba(245, 200, 66, .35); background: rgba(72, 54, 8, .76); }
.btn-zone-action.danger:hover { color: #fecaca; border-color: rgba(239, 68, 68, .45); background: rgba(68, 16, 22, .82); }
.zona-empty { color: var(--muted); font-size: 12px; padding: 8px 0; }
.zonas-add-form { padding: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; background: rgba(10, 14, 28, .72); }
.zonas-form-title { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }
.zonas-add-form input {
  background: rgba(7, 11, 22, .94); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 10px; font-size: 12px; width: 100%; box-sizing: border-box;
}
.zonas-row { display: flex; gap: 6px; }
.zonas-row input { width: auto; flex: 1; }
.zonas-actions { justify-content: space-between; flex-wrap: wrap; }
.btn-zona-secondary {
  background: rgba(10, 16, 30, .88); color: var(--muted); border: 1px solid rgba(96, 116, 162, .22); border-radius: 8px;
  padding: 8px 10px; font-size: 11px; cursor: pointer; font-family: var(--M);
}
.btn-zona-secondary:hover { color: var(--bright); border-color: rgba(120, 150, 220, .45); }
.btn-add-zona {
  background: var(--fire); color: #fff; border: none; border-radius: 8px;
  padding: 10px; font-size: 12px; cursor: pointer; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
#dp-zonas { display: none; flex-wrap: wrap; gap: 5px; padding: 8px 16px 0; }
.dp-zona-badge { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }

/* servicios y alertas */
#services-panel {
  display: none; position: fixed; right: 0; top: 0; bottom: 0; width: min(392px, 100vw);
  background: linear-gradient(180deg, rgba(18,23,39,.985) 0%, rgba(10,14,28,.985) 100%);
  border-left: 1px solid var(--border2); z-index: 1210; flex-direction: column; overflow: hidden;
  box-shadow: -28px 0 68px rgba(2, 7, 18, .44); height: 100dvh; max-height: 100dvh;
}
#services-panel.open { display: flex; }
#dashboard-panel {
  display: none; position: fixed; right: 0; top: 0; bottom: 0; width: min(392px, 100vw);
  background: linear-gradient(180deg, rgba(18,23,39,.985) 0%, rgba(10,14,28,.985) 100%);
  border-left: 1px solid var(--border2); z-index: 1211; flex-direction: column; overflow: hidden;
  box-shadow: -28px 0 68px rgba(2, 7, 18, .44); height: 100dvh; max-height: 100dvh;
}
#dashboard-panel.open { display: flex; }
#services-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 10px 18px; display: flex; flex-direction: column; gap: 10px;
}
#dashboard-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 10px 18px; display: flex; flex-direction: column; gap: 10px;
}
.services-summary {
  display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 0; z-index: 3;
  padding-bottom: 2px; background: linear-gradient(180deg, rgba(17,22,36,.98), rgba(17,22,36,.84));
}
.services-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.services-kpi {
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(84, 102, 148, .18);
  background:
    linear-gradient(180deg, rgba(16, 22, 37, .98), rgba(10, 14, 28, .92));
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.services-kpi-label {
  color: var(--muted);
  font-family: var(--M);
  font-size: 9px;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.services-kpi-value {
  color: var(--bright);
  font-family: var(--H);
  font-size: 28px;
  letter-spacing: .8px;
  line-height: 1;
}
.services-kpi-copy {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.services-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px;
  border: 1px solid rgba(84, 102, 148, .24); background: rgba(10, 16, 30, .82);
  font-size: 9px; color: var(--dim); font-family: var(--M); letter-spacing: .45px; text-transform: uppercase;
}
.services-card {
  border: 1px solid rgba(84, 102, 148, .18); border-radius: 10px; background: rgba(10, 14, 28, .72);
  overflow: hidden;
}
.services-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px 9px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.services-card-tools {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap;
}
.services-card-title {
  color: var(--bright); font-family: var(--M); font-size: 10px; letter-spacing: .85px; text-transform: uppercase;
}
.services-card-copy { color: var(--muted); font-size: 10px; line-height: 1.45; padding: 10px 12px; }
.services-list { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.services-scroll-area { overflow-y: auto; overscroll-behavior: contain; }
.services-scroll-area::-webkit-scrollbar { width: 8px; }
.services-scroll-area::-webkit-scrollbar-thumb { background: rgba(104, 125, 168, .34); border-radius: 999px; }
.services-card[data-card-role="services-active"] .services-list { max-height: min(35dvh, 320px); }
.services-card[data-card-role="services-events"] .service-event-list { max-height: min(24dvh, 240px); }
.service-item {
  padding: 9px; border-radius: 9px; border: 1px solid rgba(84, 102, 148, .16);
  background: rgba(7, 11, 22, .88); display: flex; flex-direction: column; gap: 8px;
}
.service-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.service-item-main { min-width: 0; flex: 1; }
.service-name { font-size: 12px; color: var(--bright); font-weight: 700; letter-spacing: .25px; }
.service-meta { color: var(--muted); font-size: 10px; margin-top: 3px; line-height: 1.4; }
.service-route {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--dim);
  font-size: 10px;
  line-height: 1.4;
}
.service-route-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(18, 26, 44, .72);
  border: 1px solid rgba(84, 102, 148, .18);
}
.service-route-arrow {
  color: rgba(168, 182, 211, .55);
  font-family: var(--M);
  font-size: 9px;
}
.service-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.service-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 999px;
  font-size: 9px; font-family: var(--M); letter-spacing: .35px; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.08);
}
.service-pill.live { color: #86efac; background: rgba(22, 101, 52, .2); border-color: rgba(34, 197, 94, .24); }
.service-pill.pause { color: #fcd34d; background: rgba(120, 53, 15, .2); border-color: rgba(245, 158, 11, .24); }
.service-pill.done { color: #93c5fd; background: rgba(30, 64, 175, .18); border-color: rgba(59, 130, 246, .24); }
.service-pill.stage { color: var(--dim); background: rgba(21, 31, 52, .65); }
.service-pill.warn { color: #fcd34d; background: rgba(120, 53, 15, .22); border-color: rgba(245, 158, 11, .22); }
.service-pill.alert { color: #fda4af; background: rgba(127, 29, 29, .22); border-color: rgba(244, 63, 94, .24); }
.service-pill.info { color: #93c5fd; background: rgba(30, 64, 175, .18); border-color: rgba(59, 130, 246, .24); }
.service-health {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.service-caption {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .35px;
  text-transform: uppercase;
  font-family: var(--M);
}
.service-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
  gap: 6px;
}
.service-step {
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(84, 102, 148, .16);
  background: rgba(14, 20, 34, .88);
  min-height: 62px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.service-step-label {
  color: var(--muted);
  font-family: var(--M);
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.service-step-copy {
  color: var(--text);
  font-size: 10px;
  line-height: 1.35;
}
.service-step-meta {
  color: var(--muted);
  font-size: 9px;
}
.service-step.done {
  border-color: rgba(34, 197, 94, .22);
  background: rgba(12, 35, 29, .86);
}
.service-step.active {
  border-color: rgba(220, 38, 74, .26);
  background: rgba(42, 15, 22, .58);
}
.service-step.pending {
  opacity: .84;
}
.service-step.skipped {
  opacity: .6;
  border-style: dashed;
}
.service-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.service-empty, .service-event-empty { color: var(--muted); font-size: 12px; padding: 4px 2px; }
.service-event-list { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.service-event-item {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.service-event-item:last-child { border-bottom: none; padding-bottom: 0; }
.service-event-text { color: var(--text); font-size: 10px; line-height: 1.4; }
.service-event-meta { color: var(--muted); font-size: 9px; text-align: right; white-space: nowrap; }
.service-event-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(84, 102, 148, .18);
  background: rgba(12, 18, 32, .84);
  font-family: var(--M);
  font-size: 9px;
  letter-spacing: .35px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.service-event-status.sent { color: #86efac; border-color: rgba(34, 197, 94, .22); background: rgba(12, 35, 29, .72); }
.service-event-status.quiet_hours,
.service-event-status.disabled,
.service-event-status.service_disabled { color: #fcd34d; border-color: rgba(245, 158, 11, .2); background: rgba(80, 43, 16, .2); }
.service-event-status.error,
.service-event-status.config_missing { color: #fda4af; border-color: rgba(244, 63, 94, .2); background: rgba(72, 18, 29, .22); }
.services-form { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.services-grid .full { grid-column: 1 / -1; }
.services-form label {
  display: block; color: var(--muted); font-size: 9px; font-family: var(--M);
  letter-spacing: .75px; text-transform: uppercase; margin-bottom: 4px;
}
.services-form input,
.services-form select,
.services-form textarea {
  width: 100%; box-sizing: border-box; background: rgba(7, 11, 22, .94);
  border: 1px solid rgba(84, 102, 148, .22); border-radius: 8px; color: var(--text);
  padding: 8px 9px; font-size: 11px; font-family: var(--B); outline: none;
}
.services-form textarea { min-height: 72px; resize: vertical; }
.services-form input:focus,
.services-form select:focus,
.services-form textarea:focus { border-color: rgba(220, 38, 74, .52); box-shadow: 0 0 0 1px rgba(220, 38, 74, .22); }
.services-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.services-toggle {
  display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-size: 10px; cursor: pointer;
}
.services-toggle input { width: auto; margin: 0; accent-color: var(--fire); }
.services-note {
  color: var(--muted); font-size: 10px; line-height: 1.45; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(34, 197, 94, .16); background: rgba(10, 39, 31, .26);
}
.services-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.services-status-line { color: var(--muted); font-size: 9px; line-height: 1.45; }
.services-divider { height: 1px; background: rgba(255,255,255,.05); margin: 2px 0; }
.service-form-note {
  border-color: rgba(59, 130, 246, .16);
  background: rgba(18, 33, 58, .3);
}
.service-plan-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(84, 102, 148, .18);
  background: rgba(10, 16, 30, .74);
}
.service-plan-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: 10px;
  line-height: 1.35;
}
.service-plan-index {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--M);
  font-size: 9px;
  background: rgba(26, 36, 58, .9);
  border: 1px solid rgba(84, 102, 148, .18);
  color: var(--bright);
  flex-shrink: 0;
}
.services-section-toggle {
  background: none; border: 1px solid rgba(84, 102, 148, .18); color: var(--muted); cursor: pointer;
  border-radius: 999px; padding: 3px 8px; font-size: 9px; font-family: var(--M); letter-spacing: .5px; text-transform: uppercase;
}
.services-section-toggle:hover { border-color: rgba(220, 38, 74, .32); color: var(--bright); }
.services-card.collapsed .services-list,
.services-card.collapsed .service-event-list,
.services-card.collapsed .services-form {
  display: none;
}
.dashboard-link-meta { color: var(--muted); font-size: 10px; line-height: 1.5; }
.dashboard-link-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dashboard-audit-item { padding: 10px 12px; border-bottom: 1px solid rgba(84, 102, 148, .14); }
.dashboard-audit-item:last-child { border-bottom: none; }
.dashboard-audit-label { color: var(--bright); font-size: 12px; font-weight: 700; }
.dashboard-audit-meta { color: var(--muted); font-size: 10px; margin-top: 4px; line-height: 1.45; }
#hist-load-more-wrap { padding: 10px 14px 14px; border-top: 1px solid var(--border); display: none; }
.services-card.collapsed .services-card-head {
  border-bottom: none;
}

/* refresh */
.btn-refresh {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  background: none;
  border: 1px solid var(--border2);
  color: var(--dim);
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .5px;
  cursor: pointer;
  border-radius: 2px;
  transition: all .15s;
}
.btn-refresh:hover { border-color: var(--fire); color: var(--fire); }
.btn-refresh svg { transition: transform .4s; }
.btn-refresh:hover svg { transform: rotate(180deg); }

/* ─── CONTENT ─── */
#content {
  display: grid;
  grid-template-columns: 270px 1fr;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

/* ═══════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════ */
#sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* stats */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.stat-cell {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.stat-cell:nth-child(2),
.stat-cell:nth-child(4) { border-right: none; }
.stat-cell:nth-child(3),
.stat-cell:nth-child(4) { border-top: 1px solid var(--border); }
.stat-cell::before {
  content: attr(data-label);
  position: absolute;
  top: 7px; right: 8px;
  font-family: var(--M);
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}
.stat-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stat-cell.go   .stat-num { color: var(--go); }
.stat-cell.hold .stat-num { color: var(--hold); }
.stat-cell.dead .stat-num { color: var(--muted); }
.stat-cell.all  .stat-num { color: var(--fire); }
.stat-cell.go::after   { background: var(--go2); }
.stat-cell.hold::after { background: var(--hold2); }
.stat-cell.all::after  { background: var(--fire2); }
.stat-num {
  font-family: var(--H);
  font-size: 36px;
  line-height: 1;
  margin-top: 14px;
}

/* unit list header */
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.list-header-label {
  font-family: var(--M);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.list-header-count {
  font-family: var(--M);
  font-size: 9px;
  color: var(--border2);
}

/* unit list scroll */
.unit-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  min-height: 0;
}
.unit-list::-webkit-scrollbar { width: 3px; }
.unit-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* unit row */
.unit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s;
  animation: rowIn .2s ease both;
}
@keyframes rowIn { from { opacity:0; transform:translateX(-4px); } to { opacity:1; transform:none; } }
.unit-row:hover { background: var(--raised); border-color: var(--border); }
.unit-row.sel { background: var(--raised); border-color: var(--fire); border-left-width: 3px; }

.unit-pip {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.unit-pip.go   { background: var(--go);   box-shadow: 0 0 7px var(--go); }
.unit-pip.hold { background: var(--hold); }
.unit-pip.dead { background: var(--dead); }
.unit-pip.go::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--go);
  opacity: .4;
  animation: ripple 2.2s ease-out infinite;
}
@keyframes ripple { 0%{transform:scale(1);opacity:.4} 100%{transform:scale(2.4);opacity:0} }

.unit-info { flex: 1; min-width: 0; }
.unit-name {
  font-family: var(--H);
  font-size: 17px;
  color: var(--bright);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-sub {
  font-family: var(--M);
  font-size: 9px;
  color: var(--muted);
  margin-top: 1px;
}
.unit-speed {
  font-family: var(--H);
  font-size: 20px;
  text-align: right;
  flex-shrink: 0;
}
.unit-speed.go   { color: var(--go); }
.unit-speed.hold { color: var(--hold); }
.unit-speed.dead { color: var(--muted); }
.unit-speed-label {
  display: block;
  font-family: var(--M);
  font-size: 7px;
  color: var(--muted);
  text-align: right;
  margin-top: -2px;
  text-transform: uppercase;
}

/* ─── DETAIL PANEL (bottom of sidebar) ─── */
#detail {
  flex-shrink: 0;
  background: var(--raised);
  border-top: 2px solid var(--fire);
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s cubic-bezier(.16,1,.3,1);
}
#detail.open { max-height: 400px; }

.dp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.dp-unit { font-family:var(--H); font-size:22px; color:var(--bright); line-height:1; }
.dp-plate { font-family:var(--M); font-size:9px; color:var(--muted); margin-top:2px; }
.dp-x {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size:16px; line-height:1;
  padding: 0 2px; transition: color .15s;
}
.dp-x:hover { color: var(--bright); }

.dp-status {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
}
.dp-sdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dp-slabel { font-family:var(--H); font-size:15px; letter-spacing:.5px; }

.dp-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.dp-metric { background:var(--surface); padding:8px 12px; }
.dp-metric-label { font-family:var(--M); font-size:8px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; margin-bottom:2px; }
.dp-metric-val { font-family:var(--H); font-size:20px; color:var(--bright); line-height:1; }
.dp-metric-val.fire { color:var(--fire); }
.dp-metric-val small { font-family:var(--M); font-size:9px; color:var(--muted); }

.dp-veh { padding:7px 12px; border-bottom:1px solid var(--border); }
.dp-veh-label { font-family:var(--M); font-size:8px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:2px; }
.dp-veh-name { font-family:var(--B); font-weight:500; font-size:13px; color:var(--text); }

.dp-signal {
  padding: 6px 12px;
  font-family: var(--M); font-size:9px; color:var(--muted);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap:6px;
}
.dp-signal::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--go); flex-shrink:0; }

.dp-actions { display:flex; gap:8px; padding:8px 12px; }
.dp-btn {
  padding: 6px 12px;
  background: none;
  border: 1px solid var(--border2);
  color: var(--dim);
  font-family: var(--M); font-size:9px; letter-spacing:.5px;
  cursor: pointer; border-radius:2px; transition:all .15s; text-transform:uppercase;
}
.dp-btn:hover { border-color:var(--dim); color:var(--bright); }
.dp-btn.primary {
  flex:1; background:var(--fire); border-color:var(--fire);
  color:#fff; font-family:var(--H); font-size:13px; letter-spacing:1px;
}
.dp-btn.primary:hover { opacity:.85; }

/* ═══════════════════════════════════════════
   MAP
═══════════════════════════════════════════ */
#mapzone {
  position: relative;
  overflow: hidden;
  background: #e8e4dc;
}
#map { width:100%; height:100%; }

/* vignette */
#mapzone::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  background:
    linear-gradient(to right,  rgba(13,15,18,.4) 0%, transparent 6%),
    linear-gradient(to bottom, rgba(13,15,18,.3) 0%, transparent 5%),
    linear-gradient(to top,    rgba(13,15,18,.4) 0%, transparent 6%);
}

/* map clock */
#map-clock {
  position: absolute; bottom:26px; left:12px; z-index:10;
  background:rgba(255,255,255,.92); border:1px solid #ccc;
  padding:4px 10px; border-radius:2px;
  font-family:var(--M); font-size:10px; color:#555;
}
#map-clock b { color:var(--fire); }

/* map legend */
#map-legend {
  position: absolute; bottom:26px; right:12px; z-index:10;
  display: flex; gap:14px;
  background:rgba(255,255,255,.92); border:1px solid #ddd;
  padding:5px 14px; border-radius:2px;
}
.leg { display:flex; align-items:center; gap:5px; font-family:var(--M); font-size:8px; color:#555; text-transform:uppercase; letter-spacing:.5px; }

/* marker keyframes */
@keyframes markerPulse { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(2.6);opacity:0} }
@keyframes holdBlink   { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ═══════════════════════════════════════════
   HISTORIAL  (pantalla completa, fuera del #app)
═══════════════════════════════════════════ */
#historial {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  flex-direction: column;
  background: var(--bg);
  font-family: var(--B);
  --hist-sheet-size: 34vh;
  overflow: hidden;
}
#historial.open { display: flex; }

/* historial nav */
#hist-nav {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 12px 16px;
  align-items: end;
  padding: 12px 16px;
  min-height: 52px;
  background: var(--surface);
  border-bottom: 2px solid var(--fire);
  flex-shrink: 0;
  position: relative;
}
#hist-nav::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--fire);
}
.hist-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hist-brand {
  font-family: var(--H);
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--bright);
  padding-right: 16px;
  margin-right: 4px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.hist-controls {
  display: grid;
  grid-template-columns: minmax(190px, 1.45fr) repeat(2, minmax(128px, .95fr)) repeat(2, minmax(112px, .82fr)) auto auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.hist-field { display:flex; flex-direction:column; gap:2px; min-width:0; }
.hist-field-unit { min-width: 0; }
.hist-field-label {
  font-family:var(--M); font-size:8px; letter-spacing:1.5px;
  color:var(--muted); text-transform:uppercase;
}
.hist-input {
  background:var(--raised); border:1px solid var(--border2); border-radius:2px;
  padding:5px 9px; color:var(--bright); font-family:var(--B); font-size:13px;
  width:100%;
  min-width:0;
  outline:none; transition:border-color .15s; color-scheme:dark;
}
.hist-input:focus { border-color:var(--fire); }
select.hist-input option { background:var(--raised); }

.btn-consultar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 20px; background:var(--fire); border:none; color:#fff;
  font-family:var(--H); font-size:15px; letter-spacing:1px;
  cursor:pointer; border-radius:2px; text-transform:uppercase;
  transition:opacity .15s; align-self:stretch; margin-top:0; min-height:38px;
}
.btn-consultar:hover { opacity:.85; }

.btn-hist-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 14px;
  background:none;
  border:1px solid var(--border2);
  color:var(--dim);
  font-family:var(--M);
  font-size:10px;
  letter-spacing:.5px;
  cursor:pointer;
  border-radius:2px;
  transition:all .15s;
  text-transform:uppercase;
  align-self:stretch;
  min-height:38px;
}
.btn-hist-secondary:hover { border-color:var(--fire); color:var(--fire); }

.btn-back {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  padding:5px 14px; background:none;
  border:1px solid var(--border2); color:var(--dim);
  font-family:var(--M); font-size:10px; letter-spacing:.5px;
  cursor:pointer; border-radius:2px;
  transition:all .15s; text-transform:uppercase;
  align-self:stretch; margin-top:0; min-height:38px;
}
.btn-back:hover { border-color:var(--fire); color:var(--fire); }

/* historial body */
#hist-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

/* hist map */
#hist-mapwrap { position:relative; overflow:hidden; min-width:0; min-height:0; }
#hist-map { position:absolute; inset:0; }
#hist-map .leaflet-top { top:12px; }
#hist-map .leaflet-left { left:12px; right:auto; }
#hist-map .leaflet-control-zoom { margin:0; }

/* hist list */
#hist-list {
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#hist-list-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: inherit;
}
#hist-list-content::-webkit-scrollbar { width:3px; }
#hist-list-content::-webkit-scrollbar-thumb { background:var(--border2); }

#hist-sheet-handle {
  display: none;
}

body.hist-sheet-dragging {
  user-select: none;
  touch-action: none;
}

.hist-sheet-grip {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--border2);
}

.hist-sheet-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.hist-sheet-copy strong {
  font-family: var(--H);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--bright);
  line-height: 1;
}

.hist-sheet-copy small {
  font-family: var(--M);
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.hist-empty {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:12px; padding:20px; text-align:center;
}
.hist-empty-icon { font-size:32px; color:var(--border2); }
.hist-empty-msg { font-family:var(--M); font-size:10px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; line-height:1.6; }

/* hist stats bar */
.hist-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.hist-stat { background:var(--raised); padding:8px 10px; }
.hist-stat-label { font-family:var(--M); font-size:7px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; margin-bottom:2px; }
.hist-stat-val { font-family:var(--H); font-size:18px; color:var(--bright); }
.hist-stat-copy { font-family:var(--M); font-size:8px; color:var(--muted); margin-top:2px; }

/* hist events */
.hist-event {
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .12s;
}
.hist-event:hover { background:var(--raised); }
.hist-event-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
.hist-event-time { font-family:var(--M); font-size:10px; color:var(--text); }
.hist-event-vel  { font-family:var(--M); font-size:10px; }
.hist-event-pos  { font-family:var(--M); font-size:9px; color:var(--muted); }

/* ═══════════════════════════════════════════
   MODAL CLIENTE
═══════════════════════════════════════════ */
#modal-bg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.75); z-index:600;
  align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}
#modal-bg.open { display:flex; }

.modal {
  background:var(--surface); border:1px solid var(--border2);
  border-top:2px solid var(--fire); width:380px; max-width:90vw;
  border-radius:2px; overflow:hidden; position:relative;
  animation:modalIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn { from{transform:translateY(16px);opacity:0} to{transform:none;opacity:1} }

.modal-head { padding:16px 18px 12px; border-bottom:1px solid var(--border); }
.modal-title { font-family:var(--H); font-size:20px; letter-spacing:1px; color:var(--bright); }
.modal-sub   { font-size:12px; color:var(--muted); margin-top:3px; }
.modal-body  { padding:14px 18px; }

.field { margin-bottom:12px; }
.field label { display:block; font-family:var(--M); font-size:8px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-bottom:5px; }
.field input { width:100%; background:var(--bg); border:1px solid var(--border2); border-radius:2px; padding:8px 10px; color:var(--bright); font-family:var(--B); font-size:13px; outline:none; transition:border-color .15s; }
.field input:focus { border-color:var(--fire); }

.modal-foot { display:flex; gap:8px; padding:0 18px 16px; }
.btn-modal-cancel { padding:8px 16px; background:none; border:1px solid var(--border2); color:var(--muted); font-family:var(--M); font-size:10px; cursor:pointer; border-radius:2px; transition:all .15s; text-transform:uppercase; }
.btn-modal-cancel:hover { border-color:var(--dim); color:var(--text); }
.btn-modal-send { flex:1; padding:8px; background:var(--fire); border:none; color:#fff; font-family:var(--H); font-size:15px; letter-spacing:1px; cursor:pointer; border-radius:2px; text-transform:uppercase; transition:opacity .15s; }
.btn-modal-send:hover { opacity:.85; }

.modal-ok { display:none; padding:28px 18px; text-align:center; }
.ok-ring { width:44px; height:44px; border-radius:50%; border:2px solid var(--go); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:20px; color:var(--go); }
.ok-title { font-family:var(--H); font-size:20px; letter-spacing:1px; color:var(--bright); margin-bottom:4px; }
.ok-sub   { font-size:12px; color:var(--muted); }
.btn-preview { margin-top:14px; width:100%; padding:8px; background:none; border:1px solid var(--fire); color:var(--fire); font-family:var(--H); font-size:14px; letter-spacing:1px; cursor:pointer; border-radius:2px; text-transform:uppercase; transition:all .15s; }
.btn-preview:hover { background:var(--fire2); }
.modal-ok .btn-modal-cancel { width:100%; margin-top:8px; }

/* ═══════════════════════════════════════════
   VISTA CLIENTE
═══════════════════════════════════════════ */
#vista-cliente {
  display:none; position:fixed; inset:0; z-index:550;
  flex-direction:column; background:var(--bg);
}
#vista-cliente.open { display:flex; }

.vc-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; height:52px;
  background:var(--surface); border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.vc-brand { font-family:var(--H); font-size:18px; letter-spacing:3px; color:var(--bright); }
.vc-brand b { color:var(--fire); font-weight:400; }
.vc-tag { font-family:var(--M); font-size:8px; letter-spacing:2px; color:var(--muted); border:1px solid var(--border2); padding:4px 10px; border-radius:2px; text-transform:uppercase; }
.btn-vc-back { font-family:var(--M); font-size:10px; padding:5px 12px; background:none; border:1px solid var(--border2); color:var(--muted); cursor:pointer; border-radius:2px; transition:all .15s; text-transform:uppercase; }
.btn-vc-back:hover { border-color:var(--fire); color:var(--fire); }

.vc-body { flex:1; display:grid; grid-template-columns:300px 1fr; overflow:hidden; }

.vc-panel { background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:20px 16px; }
.vc-panel::-webkit-scrollbar { width:3px; }
.vc-panel::-webkit-scrollbar-thumb { background:var(--border2); }

.vc-eyebrow { font-family:var(--M); font-size:8px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
.vc-unit-name { font-family:var(--H); font-size:42px; color:var(--bright); line-height:1; margin-bottom:3px; letter-spacing:1px; }
.vc-for { font-size:12px; color:var(--muted); margin-bottom:18px; }

.vc-status {
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-radius:2px;
  background:var(--raised); border:1px solid var(--border);
  border-left:3px solid var(--sc, var(--muted));
  margin-bottom:12px;
}
.vc-sdot { width:11px; height:11px; border-radius:50%; background:var(--sc,var(--muted)); flex-shrink:0; }
.vc-sdot.go { box-shadow:0 0 10px var(--go); animation:livepulse 2s infinite; }
.vc-stext { font-family:var(--H); font-size:17px; color:var(--bright); letter-spacing:.5px; }

.vc-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:16px; }
.vc-cell { background:var(--raised); border:1px solid var(--border); padding:10px 12px; border-radius:2px; }
.vc-cell-label { font-family:var(--M); font-size:8px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; margin-bottom:3px; }
.vc-cell-val { font-family:var(--H); font-size:19px; color:var(--bright); }

.vc-tl-head { font-family:var(--M); font-size:8px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.vc-tl-item { display:flex; gap:10px; padding-bottom:12px; position:relative; }
.vc-tl-item::before { content:''; position:absolute; left:5px; top:13px; width:1px; height:calc(100% - 8px); background:var(--border); }
.vc-tl-item:last-child::before { display:none; }
.vc-tl-dot { width:11px; height:11px; border-radius:50%; border:2px solid var(--border2); background:var(--bg); flex-shrink:0; margin-top:1px; position:relative; z-index:1; }
.vc-tl-dot.on { border-color:var(--fire); background:var(--fire); box-shadow:0 0 6px var(--fire); }
.vc-tl-ev { font-size:12px; color:var(--text); }
.vc-tl-t  { font-family:var(--M); font-size:9px; color:var(--muted); margin-top:1px; }

.vc-mapwrap { position:relative; }
#vc-map { width:100%; height:100%; }

/* ═══════════════════════════════════════════
   LOADING
═══════════════════════════════════════════ */
#loading {
  position:fixed; inset:0; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; z-index:1000; transition:opacity .4s;
}
#loading.out { opacity:0; pointer-events:none; }
.load-brand { font-family:var(--H); font-size:32px; letter-spacing:5px; color:var(--bright); }
.load-brand b { color:var(--fire); font-weight:400; }
.load-bar-wrap { width:180px; height:2px; background:var(--border); border-radius:1px; overflow:hidden; }
.load-bar { height:100%; background:var(--fire); animation:loadbar 1.4s ease-in-out forwards; }
@keyframes loadbar { 0%{width:0} 40%{width:55%} 80%{width:85%} 100%{width:100%} }
.load-label { font-family:var(--M); font-size:10px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }

/* toast */
#toast {
  position:fixed; bottom:20px; left:50%;
  transform:translateX(-50%) translateY(60px);
  background:var(--raised); border:1px solid var(--fire); border-radius:2px;
  padding:7px 16px; font-family:var(--M); font-size:10px; color:var(--fire);
  letter-spacing:.5px; z-index:2000;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
#toast.show { transform:translateX(-50%) translateY(0); }

#share-status {
  display:none; position:fixed; inset:0; z-index:560;
  align-items:center; justify-content:center;
  background:rgba(11,14,18,.76);
  padding:20px;
}
#share-status.open { display:flex; }
.share-status-card {
  width:min(420px, 100%);
  background:var(--raised);
  border:1px solid var(--border2);
  border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  padding:22px 20px;
}
.share-status-kicker {
  font-family:var(--M); font-size:10px; letter-spacing:2px;
  color:var(--muted); text-transform:uppercase; margin-bottom:10px;
}
.share-status-title {
  font-family:var(--H); font-size:28px; letter-spacing:1px;
  color:var(--bright); margin-bottom:8px;
}
.share-status-copy {
  font-size:13px; line-height:1.65; color:var(--muted);
  margin-bottom:18px;
}

/* leaflet overrides */
.leaflet-container { background:#e8e4dc !important; }
.leaflet-control-zoom { border:1px solid #ccc !important; border-radius:2px !important; }
.leaflet-control-zoom a { background:#fff !important; color:#444 !important; border-color:#ddd !important; font-family:var(--M) !important; }
.leaflet-control-zoom a:hover { color:var(--fire) !important; }
.leaflet-control-attribution { background:rgba(255,255,255,.8) !important; color:#999 !important; font-size:9px !important; }
.leaflet-control-attribution a { color:#999 !important; }

#sidebar-head {
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px 10px;
  border-bottom:1px solid var(--border);
  background:rgba(9,11,15,.98);
}
.sidebar-head-label {
  font-family:var(--M);
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted);
}
.sidebar-close {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  background:none;
  border:1px solid var(--border2);
  color:var(--dim);
  font-family:var(--M);
  font-size:10px;
  letter-spacing:.7px;
  text-transform:uppercase;
  border-radius:2px;
  cursor:pointer;
  transition:all .16s ease;
}
.sidebar-close:hover {
  color:var(--fire);
  border-color:var(--fire);
}

@media (max-width: 980px) {
  html, body { overflow: hidden; }

  #app {
    grid-template-rows: auto 1fr;
    height: 100dvh;
  }

  #historial {
    height: 100dvh;
    min-height: 100dvh;
  }

  #nav {
    gap: 8px;
    padding: 8px 10px 10px;
    min-height: 50px;
    height: auto;
    flex-wrap: wrap;
    align-content: flex-start;
    z-index: 1300;
  }

  #sidebar-toggle {
    display: inline-flex;
    order: 0;
    flex: 0 0 auto;
  }

  #nav > img {
    height: 30px !important;
    width: auto;
    flex: 0 0 auto;
    padding: 2px 5px !important;
    margin-right: 0 !important;
  }

  .brand {
    padding-right: 12px;
    margin-right: 8px;
    font-size: 18px;
    letter-spacing: 1.2px;
  }

  .nav-tabs {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    height: 32px;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }

  .nav-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0 12px;
  }

  .nav-end {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .nav-end::-webkit-scrollbar { display: none; }

  .pill-live,
  #badge-interval,
  .layer-group,
  .btn-refresh {
    flex: 0 0 auto;
  }

  .layer-group {
    order: 0;
    width: max-content;
    overflow: visible;
    padding-bottom: 0;
  }

  #content {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #sidebar {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    max-width: 320px;
    z-index: 1250;
    transform: translateX(-104%);
    transition: transform .24s ease;
    box-shadow: 16px 0 34px rgba(0, 0, 0, .34);
    overflow-y: auto;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open #mobile-backdrop { display: block; }

  #sidebar-head {
    display:flex;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  #detail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 18;
    max-height: 0;
    overflow:auto;
  }
  #detail.open { max-height: min(46vh, 340px); }

  #map-clock {
    left: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    font-size: 9px;
    padding: 4px 8px;
  }

  #map-legend {
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    gap: 8px;
    padding: 5px 8px;
    max-width: calc(100% - 20px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  #map-legend::-webkit-scrollbar { display: none; }

  .leg {
    font-size: 7px;
    white-space: nowrap;
  }

  #hist-nav {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px 12px 12px;
  }

  .hist-topline {
    gap: 8px;
  }

  .hist-brand {
    font-size: 17px;
    letter-spacing: 1.6px;
    padding-left: 12px;
    margin-left: 0;
  }

  .hist-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hist-field-unit {
    grid-column: 1 / -1;
  }

  .hist-input {
    min-height: 42px;
    font-size: 14px;
  }

  .btn-consultar,
  .btn-hist-secondary,
  .btn-back {
    min-height: 42px;
    width: 100%;
  }

  #hist-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) var(--hist-sheet-size);
  }

  #hist-mapwrap {
    min-height: 0;
  }

  #hist-list {
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 32px rgba(0, 0, 0, .34);
    background: linear-gradient(180deg, rgba(26,32,53,.98), rgba(13,16,32,.98));
  }

  #hist-sheet-handle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px 12px;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(20,26,42,.96), rgba(14,19,31,.96));
    color: inherit;
    cursor: ns-resize;
    touch-action: none;
  }

  #hist-list-content {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .hist-stats {
    grid-template-columns: 1fr 1fr;
  }

  .hist-empty {
    min-height: 160px;
  }

  #services-panel,
  #dashboard-panel {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
    box-shadow: none;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .services-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-actions-row {
    flex-wrap: wrap;
  }

  #services-body {
    padding: 8px 8px 16px;
    gap: 8px;
  }

  .services-summary {
    top: 0;
    padding-bottom: 0;
  }

  .services-card-head {
    align-items: flex-start;
  }

  .services-card-tools {
    gap: 6px;
  }

  .services-card[data-card-role="services-active"] .services-list {
    max-height: 30dvh;
  }

  .services-card[data-card-role="services-events"] .service-event-list {
    max-height: 22dvh;
  }

  .service-item-top,
  .service-event-item {
    display: flex;
    flex-direction: column;
  }

  .service-timeline {
    grid-template-columns: 1fr;
  }

  .service-event-meta {
    text-align: left;
    white-space: normal;
  }

  .btn-add-zona,
  .btn-zona-secondary,
  .btn-zone-action,
  .services-section-toggle {
    min-height: 38px;
  }

  .vc-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }

  .vc-panel {
    display: none;
  }

  .vc-mapwrap {
    min-height: 0;
  }
}

body.auth-locked #app,
body.auth-locked #historial {
  visibility: hidden;
}

body.mirror-mode .nav-tab-history,
body.mirror-mode .dp-btn.primary,
body.mirror-mode #btn-logout,
body.mirror-mode #btn-zonas-toggle,
body.mirror-mode .layer-btn[onclick="openZonasPanel()"],
body.mirror-mode .layer-btn[onclick="openServicesPanel()"],
body.mirror-mode #zonas-panel,
body.mirror-mode #services-panel,
body.mirror-mode #dp-zonas {
  display: none !important;
}

body.employee-mode #btn-logout {
  display: inline-flex;
}

#auth-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1600;
  padding: 24px;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(48,212,116,.12), transparent 38%), rgba(6,9,16,.72);
  backdrop-filter: blur(10px);
}

#auth-gate.open {
  display: flex;
}

.auth-card {
  width: min(460px, 100%);
  padding: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(19,24,40,.96), rgba(10,14,24,.98));
  box-shadow: 0 22px 90px rgba(0,0,0,.45);
}

.auth-kicker {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--go);
  margin-bottom: 10px;
}

.auth-title {
  font-family: var(--H);
  font-size: 42px;
  letter-spacing: 1.2px;
  color: var(--bright);
  margin-bottom: 8px;
}

.auth-copy {
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: 18px;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-field {
  display: grid;
  gap: 6px;
}

.auth-field label {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-field input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.04);
  color: var(--bright);
  font-family: var(--B);
  outline: none;
}

.auth-field input:focus {
  border-color: var(--go);
  box-shadow: 0 0 0 1px rgba(48,212,116,.22);
}

.auth-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.auth-badge {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .8px;
  color: var(--muted);
}

.auth-status {
  min-height: 20px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}

.auth-status.error {
  color: #ff8b96;
}

.auth-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 12px 16px;
  border: 1px solid var(--go);
  background: linear-gradient(180deg, rgba(48,212,116,.25), rgba(48,212,116,.16));
  color: var(--bright);
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.auth-btn:disabled {
  opacity: .65;
  cursor: wait;
}

.share-note {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(48,212,116,.18);
  background: rgba(48,212,116,.08);
  color: var(--dim);
  font-size: 12px;
  line-height: 1.55;
}

.share-units {
  display: grid;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding-right: 4px;
}

.share-unit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}

.share-unit input {
  accent-color: #30d474;
}

.share-unit-main {
  display: grid;
  gap: 2px;
}

.share-unit-name {
  color: var(--bright);
  font-weight: 500;
}

.share-unit-sub {
  color: var(--muted);
  font-size: 11px;
}