/* Copia visual de support-modern.css (shell Support 7-24) */
:root {
  --support-primary: #153f75;
  --support-primary-dark: #001f3f;
  --support-primary-light: #1f4b7a;
  --support-navy: #002c59;
  --support-green: #bad35c;
  --support-green-light: #c5e06b;
  --support-green-dark: #9bc04a;
  --support-green-border: #7fb83a;
  --support-green-text: #1a2e0a;
  --support-bg: #f4f6f9;
  --support-surface: #ffffff;
  --support-text: #1f2a37;
  --support-text-muted: #5b6572;
  --support-border: #e6eaef;
  --support-success: #28a745;
  --support-danger: #dc3545;
  --support-info: #17a2b8;
  --support-warning: #f0ad4e;
  --support-radius: 10px;
  --support-radius-sm: 6px;
  --support-shadow: 0 4px 24px rgba(21, 63, 117, 0.08);
  --support-shadow-lg: 0 20px 60px rgba(21, 63, 117, 0.15);
  --support-font: "Inter", "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
  --support-gradient: linear-gradient(to bottom right, #153f75, #bad35c);
  --support-menu-gradient: linear-gradient(135deg, #c5e06b 0%, #bad35c 45%, #9bc04a 100%);
  --support-sidebar-width: 285px;
  --support-header-height: 56px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--support-font);
  font-size: 14px;
  color: var(--support-text);
  background: var(--support-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--support-primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 { color: var(--support-primary); font-weight: 600; margin: 0 0 8px; }

/* ── Header ──────────────────────────────────────────── */
.app-shell { min-height: 100vh; padding-top: var(--support-header-height); }

.header.dark-bg {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--support-header-height);
  background: var(--support-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 8px;
  z-index: 1002;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

.toggle-nav {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  opacity: .9;
  border-radius: 6px;
  user-select: none;
  flex-shrink: 0;
}
.toggle-nav:hover { background: rgba(255,255,255,.12); opacity: 1; }

a.logo.logo-brand {
  display: inline-flex;
  align-items: center;
  padding: 8px 0 8px 4px;
}
a.logo.logo-brand .logo-brand-img {
  height: 36px;
  width: auto;
  display: block;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
}
.top-nav > li > a,
.top-nav .nav-link {
  color: rgba(255,255,255,.9);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.top-nav .username { color: rgba(255,255,255,.95); font-weight: 600; letter-spacing: .02em; }
.bell-wrap { position: relative; }
.bell-wrap .badge {
  position: absolute;
  top: 2px; right: 2px;
  background: #e74c3c;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 4px;
}
.bell-wrap .badge[hidden] { display: none !important; }

.notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(360px, 92vw);
  background: #fff;
  color: var(--support-text);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(15, 28, 46, 0.28);
  border: 1px solid var(--support-border);
  z-index: 1200;
  overflow: hidden;
}
.notif-dropdown[hidden] { display: none !important; }
.notif-head {
  background: var(--support-primary);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 10px 12px;
}
.notif-list {
  max-height: 320px;
  overflow: auto;
  background: #f7f9fc;
}
.notif-empty {
  padding: 18px 14px;
  text-align: center;
  color: var(--support-text-muted);
  font-size: 13px;
}
.notif-item {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--support-border);
  background: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.notif-item:hover { background: #eef5ff; }
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--support-danger);
}
.notif-dot.insp { background: #c47a12; }
.notif-dot.mon { background: #dc3545; }
.notif-item strong {
  display: block;
  font-size: 13px;
  color: var(--support-primary);
  margin-bottom: 2px;
}
.notif-item span {
  display: block;
  font-size: 12px;
  color: var(--support-text-muted);
  line-height: 1.35;
}
.notif-item em {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-style: normal;
  color: #8a5400;
  font-weight: 600;
}
.notif-foot {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--support-border);
  background: #fff;
  color: var(--support-primary);
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
  padding: 10px;
  cursor: pointer;
}
.notif-foot:hover { background: #f3f6fa; }
.demo-tools {
  display: flex;
  gap: 6px;
  margin-left: 8px;
}
.btn-header {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  border-radius: var(--support-radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.btn-header:hover { background: rgba(255,255,255,.2); }

/* ── Sidebar (blanco + verde en módulos) ─────────────── */
#sidebar {
  position: fixed;
  top: var(--support-header-height);
  left: 0;
  bottom: 0;
  width: var(--support-sidebar-width);
  background: var(--support-surface);
  border-right: 4px solid var(--support-green-dark);
  box-shadow: 2px 0 16px rgba(21, 63, 117, 0.08);
  overflow-y: auto;
  z-index: 1000;
  transition: transform 0.22s ease;
}

.app-shell.sidebar-closed #sidebar {
  transform: translateX(-100%);
  pointer-events: none;
}
.app-shell.sidebar-closed #main-content {
  margin-left: 0 !important;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: var(--support-header-height) 0 0 0;
  background: rgba(15, 28, 46, 0.35);
  z-index: 999;
}
.app-shell.sidebar-open-mobile .sidebar-backdrop {
  display: block;
}

#sidebar-search-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 10px 8px;
  background: var(--support-surface);
  border-bottom: 1px solid var(--support-border);
}
.sidebar-search-box {
  display: flex;
  width: 100%;
}
.sidebar-search-box .form-control {
  flex: 1;
  height: 34px;
  font-size: 13px;
  border: 1px solid var(--support-border);
  border-right: none;
  border-radius: var(--support-radius-sm) 0 0 var(--support-radius-sm);
  padding: 6px 10px;
}
.sidebar-search-box .btn {
  height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--support-border);
  background: var(--support-bg);
  color: var(--support-primary);
  border-radius: 0 var(--support-radius-sm) var(--support-radius-sm) 0;
  cursor: default;
}

ul.sidebar-menu {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}
ul.sidebar-menu li a {
  color: var(--support-text);
  font-weight: 500;
  border-radius: var(--support-radius-sm);
  margin: 2px 6px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  min-height: 36px;
  text-decoration: none;
  cursor: pointer;
}
ul.sidebar-menu li a i,
ul.sidebar-menu li a .mi {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  opacity: .85;
}
ul.sidebar-menu > li.active > a {
  background: rgba(21, 63, 117, 0.08);
  color: var(--support-primary);
  font-weight: 600;
}
ul.sidebar-menu > li.sub-menu > a {
  background: var(--support-menu-gradient);
  color: var(--support-green-text);
  font-weight: 600;
  font-size: 14px;
  border-left: 4px solid var(--support-green-border);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  min-height: 42px;
}
ul.sidebar-menu > li.sub-menu > a:hover {
  background: linear-gradient(135deg, #bad35c 0%, #9bc04a 55%, #7fb83a 100%);
  color: var(--support-green-text);
  text-decoration: none;
}
ul.sidebar-menu li a .menu-arrow {
  margin-left: auto;
  font-size: 11px;
  opacity: .75;
}
ul.sidebar-menu li ul.sub,
ul.sidebar-menu li ul.sub2 {
  list-style: none;
  background: var(--support-bg);
  border-radius: var(--support-radius-sm);
  margin: 0 6px 6px;
  border: 1px solid var(--support-border);
  padding: 4px 0;
  display: none;
}
ul.sidebar-menu li.open > ul.sub,
ul.sidebar-menu li.open > ul.sub2,
ul.sidebar-menu li ul.sub.open,
ul.sidebar-menu li ul.sub2.open {
  display: block;
}
ul.sidebar-menu li ul.sub > li.sub-menu > a {
  font-size: 13px;
  font-weight: 600;
  color: var(--support-primary);
  background: transparent;
  border-left: none;
  box-shadow: none;
  padding-left: 12px;
}
ul.sidebar-menu li ul.sub li a,
ul.sidebar-menu li ul.sub2 li a {
  font-size: 13px;
  padding: 8px 10px 8px 12px;
  color: var(--support-text-muted);
  margin: 1px 4px;
}
ul.sidebar-menu li ul.sub2 li a { padding-left: 20px; }
ul.sidebar-menu li ul.sub li a:hover,
ul.sidebar-menu li ul.sub2 li a:hover,
ul.sidebar-menu li ul.sub li.active > a,
ul.sidebar-menu li ul.sub2 li.active > a {
  background: rgba(21, 63, 117, 0.1);
  color: var(--support-primary);
  text-decoration: none;
}

/* ── Main ────────────────────────────────────────────── */
#main-content {
  margin-left: var(--support-sidebar-width);
  min-height: calc(100vh - var(--support-header-height));
  background: var(--support-bg);
  transition: margin-left 0.22s ease;
}
.wrapper { padding: 16px; }
.tv-mode #sidebar { display: none; }
.tv-mode #main-content { margin-left: 0; }
.tv-banner {
  display: none;
  background: #fff8e1;
  border-bottom: 1px solid #f0c788;
  color: #8a5400;
  text-align: center;
  padding: 8px;
  font-weight: 600;
  font-size: 13px;
}
.tv-mode .tv-banner { display: block; }

.screen { display: none; }
.screen.active { display: block; }

.page-header {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--support-border);
  font-size: 22px;
  color: var(--support-primary);
}
.page-header .ph-icon {
  color: var(--support-green-dark);
  margin-right: 8px;
}

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: var(--support-text-muted);
  background: transparent;
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: #9aa5b1;
}
.breadcrumb a { color: var(--support-primary-light); }

/* ── Welcome (igual a plataforma) ────────────────────── */
.support-welcome-page {
  min-height: calc(100vh - var(--support-header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 40px;
}
.support-welcome-card {
  width: 100%;
  max-width: 760px;
  background: var(--support-surface);
  border-radius: 16px;
  box-shadow: var(--support-shadow-lg);
  overflow: hidden;
}
.support-welcome-hero {
  background: var(--support-gradient);
  padding: 36px 32px 32px;
  text-align: center;
  color: #fff;
}
.support-welcome-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
  color: #fff;
}
.support-welcome-title {
  margin: 0 0 10px !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.support-welcome-user {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,.95);
}
.support-welcome-body { padding: 28px 36px 32px; text-align: left; }
.support-welcome-description p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--support-text);
}
.support-welcome-hint {
  margin: 0 0 28px;
  padding-top: 16px;
  border-top: 1px solid var(--support-border);
  text-align: center;
  color: var(--support-text-muted);
  font-size: 13px;
}
.support-welcome-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.support-welcome-logo-support { max-height: 44px; width: auto; }
.support-welcome-logo-sos { max-height: 88px; width: auto; }
.welcome-demo-start {
  margin-top: 20px;
  text-align: center;
}

/* ── Forms / panels / tables ─────────────────────────── */
.panel {
  background: var(--support-surface);
  border: 1px solid var(--support-border);
  border-radius: var(--support-radius);
  box-shadow: var(--support-shadow);
  margin-bottom: 14px;
  overflow: hidden;
}
.panel-heading {
  background: var(--support-surface);
  border-bottom: 1px solid var(--support-border);
  color: var(--support-primary);
  font-weight: 600;
  padding: 12px 16px;
}
.panel-body { padding: 16px; }

.form-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 14px;
  margin-bottom: 4px;
}
.form-group { margin-bottom: 10px; }
.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--support-text);
}
.form-control {
  width: 100%;
  border: 1px solid var(--support-border);
  border-radius: var(--support-radius-sm);
  padding: 7px 10px;
  background: #fff;
  color: var(--support-text);
  height: 34px;
}
textarea.form-control { height: auto; min-height: 80px; }
.form-control:focus {
  outline: none;
  border-color: var(--support-primary);
  box-shadow: 0 0 0 3px rgba(21, 63, 117, 0.12);
}
.form-control[readonly] { background: #f7f9fc; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--support-radius-sm);
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--support-primary);
  border-color: var(--support-primary);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--support-primary-light); }
.btn-navy {
  background: var(--support-navy);
  border-color: var(--support-navy);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
}
.btn-default {
  background: #fff;
  border-color: var(--support-border);
  color: var(--support-text);
}
.btn-danger {
  background: var(--support-danger);
  border-color: var(--support-danger);
  color: #fff;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.table { width: 100%; border-collapse: collapse; margin: 0; }
.table th, .table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--support-border);
  text-align: left;
  vertical-align: middle;
}
.table thead th {
  background: #f3f6fa;
  color: var(--support-primary);
  font-weight: 600;
  font-size: 13px;
}
.table-striped tbody tr:nth-child(even) { background: #fafbfc; }
.table tbody tr:hover { background: #eef5ff; }

.accordion-toggle {
  color: var(--support-primary);
  font-weight: 600;
  cursor: pointer;
}
.panel-collapse { display: none; }
.panel-collapse.open { display: block; }
.sec-meta { color: var(--support-text-muted); font-size: 12px; }
.cumple-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cumple-wrap input { width: 18px; height: 18px; cursor: pointer; }
.cumple-toggle {
  display: inline-flex;
  border: 1px solid var(--support-border);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.cumple-opt {
  border: 0;
  background: transparent;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--support-text-muted);
  cursor: pointer;
  line-height: 1.2;
}
.cumple-opt + .cumple-opt { border-left: 1px solid var(--support-border); }
.cumple-opt:hover { background: #f7f9fc; color: var(--support-primary); }
.cumple-opt.is-on.is-ok {
  background: #d4edda;
  color: #155724;
}
.cumple-opt.is-on.is-bad {
  background: #f8d7da;
  color: #721c24;
}
.cumple-pending { font-size: 10px; }
.row-fail { background: #fdecea !important; }
.row-fail td:first-child { box-shadow: inset 3px 0 0 var(--support-danger); }

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.badge-ok { background: #d4edda; color: #155724; }
.badge-warn { background: #fff3cd; color: #856404; }
.badge-crit { background: #f8d7da; color: #721c24; }
.badge-info { background: #d1ecf1; color: #0c5460; }

/* Dashboard */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.kpi {
  background: #fff;
  border: 1px solid var(--support-border);
  border-radius: var(--support-radius);
  box-shadow: var(--support-shadow);
  padding: 14px;
}
.kpi .label {
  color: var(--support-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.kpi .value {
  font-size: 28px;
  font-weight: 700;
  color: var(--support-primary);
  margin-top: 4px;
}
.kpi.alert { border-color: #f5c2c7; background: linear-gradient(180deg, #fff5f5, #fff); }
.kpi.alert .value { color: var(--support-danger); }

.dash-grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 14px;
}
.dash-grid-maps {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.dash-grid-maps > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-grid-maps > .panel > .panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.feed-modern-wide {
  max-height: 280px;
}

/* ── Central de monitoreo · Command Center ───────────── */
.monitor-modern {
  max-width: none;
  width: 100%;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 0 0 rgba(61,220,151,.5);
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(61,220,151,.45); }
  70% { box-shadow: 0 0 0 8px rgba(61,220,151,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
}

/* Shell Command Center */
.cc-shell {
  --cc-navy: #0b1f33;
  --cc-navy-2: #123047;
  --cc-blue: #1d4ed8;
  --cc-green: #16a34a;
  --cc-orange: #ea580c;
  --cc-surface: #f4f7fb;
  --cc-card: #ffffff;
  --cc-radius: 12px;
  --cc-shadow: 0 8px 24px rgba(11, 31, 51, 0.08);
  background: linear-gradient(180deg, #e8eef5 0%, var(--cc-surface) 120px, var(--cc-surface) 100%);
  padding: 10px 12px 16px !important;
  min-height: calc(100vh - var(--support-header-height));
}
.tv-mode .cc-shell {
  min-height: calc(100vh - var(--support-header-height) - 36px);
}

.cc-statusbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-radius: var(--cc-radius);
  background: linear-gradient(90deg, var(--cc-navy), var(--cc-navy-2) 55%, #1a3d2f);
  color: #e8f0f8;
  box-shadow: var(--cc-shadow);
  margin-bottom: 10px;
  font-size: 12px;
}
.cc-status-op {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.cc-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.cc-statusbar.is-alert .cc-status-dot {
  background: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.28);
  animation: livePulse 1.2s infinite;
}
.cc-statusbar.is-crit .cc-status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}
.cc-status-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  opacity: .92;
}
.cc-status-meta b { color: #fff; font-weight: 700; }
.cc-status-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 650;
}

.cc-top {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) minmax(0, 10fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 10px;
}
.cc-titleblock {
  background: linear-gradient(135deg, var(--cc-navy), #1e4a78 70%, #3d6b2e);
  color: #fff;
  border-radius: var(--cc-radius);
  padding: 10px 14px;
  box-shadow: var(--cc-shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
}
.cc-kicker {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}
.cc-title {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.2;
  border: 0;
  padding: 0;
  color: #fff;
}

.cc-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.cc-kpi {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
  background: var(--cc-card);
  border-radius: var(--cc-radius);
  padding: 10px 12px 8px;
  box-shadow: var(--cc-shadow);
  overflow: hidden;
  min-height: 72px;
}
.cc-kpi.alert {
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.16);
  outline: 1px solid rgba(234, 88, 12, 0.25);
}
.cc-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.cc-kpi-blue { background: #dbeafe; color: #1d4ed8; }
.cc-kpi-orange { background: #ffedd5; color: #c2410c; }
.cc-kpi-green { background: #dcfce7; color: #15803d; }
.cc-kpi-teal { background: #ccfbf1; color: #0f766e; }
.cc-kpi-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}
.cc-kpi-value {
  display: block;
  font-size: 22px;
  line-height: 1.1;
  color: var(--cc-navy);
  font-weight: 800;
}
.cc-kpi-value-sm { font-size: 20px; }
.cc-kpi-value-sm span {
  font-size: 11px;
  margin-left: 3px;
  font-weight: 600;
  color: #64748b;
}
.cc-kpi-trend {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: #64748b;
  margin-top: 1px;
}
.cc-kpi-trend.up { color: #16a34a; }
.cc-kpi-trend.down { color: #0f766e; }
.cc-spark {
  grid-column: 1 / -1;
  width: 100%;
  height: 18px;
  opacity: .9;
}

/* Main 12-col: mapas 9 + eventos 3 */
.cc-main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.cc-maps {
  grid-column: span 9;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); /* 60/40 */
  gap: 12px;
  min-height: 550px;
}
.cc-maps.is-swapped {
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}
.cc-maps.is-swapped .cc-map-slot.is-primary { order: 2; }
.cc-maps.is-swapped .cc-map-slot.is-secondary { order: 1; }

.cc-map-slot {
  display: flex;
  flex-direction: column;
  background: var(--cc-card);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  overflow: hidden;
  min-height: 550px;
  position: relative;
}
.cc-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #0f2740, #14314f);
  color: #fff;
  flex-shrink: 0;
}
.cc-map-toolbar strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
.cc-map-sub {
  display: block;
  font-size: 10px;
  opacity: .75;
  margin-top: 1px;
}
.cc-map-actions { display: flex; gap: 6px; }
.cc-toolbtn {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  line-height: 1;
}
.cc-toolbtn:hover { background: rgba(255,255,255,.18); }

.cc-map-canvas,
.cc-ops-wrap {
  flex: 1;
  min-height: 0;
}
.cc-shell .map-panel {
  position: relative;
  min-height: 0;
  height: 100%;
  flex: 1;
  background: #0b1c2c;
  overflow: hidden;
}
.cc-shell #gpsMap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  min-height: 0;
  z-index: 1;
}
.cc-shell .map-legend {
  z-index: 450;
}
.cc-gps-log {
  max-height: 120px;
  flex-shrink: 0;
}
.cc-ops-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.cc-shell .mapa-ops-body-stack {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr;
  height: 100%;
  position: relative;
}
.cc-shell .mapa-ops-mapwrap {
  height: 100%;
  min-height: 320px;
}

/* Drawer capas */
.mapa-ops-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 92%);
  z-index: 500;
  border-left: 1px solid rgba(15, 39, 64, 0.12);
  box-shadow: -12px 0 32px rgba(11, 31, 51, 0.18);
  transform: translateX(105%);
  transition: transform .22s ease;
  background: #fff;
}
.mapa-ops-drawer.is-open {
  transform: translateX(0);
}
.mapa-ops-drawer .mapa-ops-panel-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cc-drawer-close {
  border: 0;
  background: #f1f5f9;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #334155;
}
.cc-fab-capas {
  position: absolute;
  right: 12px;
  bottom: 14px;
  z-index: 460;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(11, 31, 51, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(11, 31, 51, 0.35);
  backdrop-filter: blur(6px);
}
.cc-fab-capas:hover { background: #0b1f33; }

/* Eventos columna derecha */
.cc-events {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 550px;
  max-height: calc(100vh - var(--support-header-height) - 160px);
}
.cc-events-head {
  background: var(--cc-card);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: 10px 12px;
  flex-shrink: 0;
}
.cc-events-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cc-events-head strong {
  font-size: 13px;
  color: var(--cc-navy);
}
.cc-feed {
  flex: 1;
  min-height: 180px;
  max-height: none;
  background: var(--cc-card) !important;
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: 10px !important;
}
.cc-alert-panel {
  background: var(--cc-card);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: 12px;
  flex-shrink: 0;
}
.cc-alert-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cc-alert-panel > header strong {
  font-size: 13px;
  color: var(--cc-navy);
}
.cc-cov {
  font-size: 10px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  padding: 3px 8px;
  border-radius: 999px;
}
.cc-alert-panel h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--cc-navy);
  line-height: 1.3;
}
.cc-alert-panel #alertBody {
  margin: 0 0 10px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
.cc-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.cc-meta-grid label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 3px;
}
.cc-meta-grid .form-control {
  font-size: 12px;
  padding: 6px 8px;
  background: #f8fafc;
}
.cc-alert-panel .actions-modern {
  margin-top: 8px;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-alert-panel .actions-modern .btn {
  padding: 7px 10px;
  font-size: 12px;
  flex: 1 1 auto;
}

/* Gestión / seguimiento (Torre de control) */
.cc-gestion-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.cc-gestion-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  margin-bottom: 10px;
}
.cc-gestion-next-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9a3412;
}
.cc-gestion-next strong {
  font-size: 12px;
  color: #9a3412;
}
.cc-gestion-timeline {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 140px;
  overflow: auto;
  display: grid;
  gap: 8px;
}
.cc-gestion-timeline li {
  position: relative;
  padding: 8px 10px 8px 18px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  color: #334155;
}
.cc-gestion-timeline li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
}
.cc-gestion-timeline li.is-cierre::before { background: #22c55e; }
.cc-gestion-timeline li.is-seg::before { background: #f59e0b; }
.cc-gestion-timeline .gt-meta {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  margin-bottom: 2px;
}
.cc-cov.is-warn { background: #ffedd5; color: #c2410c; }
.cc-cov.is-ok { background: #dcfce7; color: #15803d; }
.cc-cov.is-crit { background: #fee2e2; color: #b91c1c; }

.gestion-modal-header {
  background: linear-gradient(90deg, #0b1f33, #1e3a5f);
  color: #fff;
  border-bottom: 0;
}
.gestion-modal-header h4 { color: #fff; margin: 0; }
.gestion-modal-sub {
  margin: 2px 0 0;
  font-size: 12px;
  opacity: .8;
}
.gestion-modal-header .modal-close { color: #fff; }
.gestion-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.gestion-kpi {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.gestion-kpi strong {
  display: block;
  font-size: 18px;
  color: #0b1f33;
  line-height: 1.1;
}
.gestion-kpi span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  font-weight: 700;
}
.gestion-hallazgos {
  margin-bottom: 12px;
  display: grid;
  gap: 6px;
}
.gestion-hallazgo {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7f7;
  border-left: 3px solid #ef4444;
  font-size: 12px;
}
.gestion-hallazgo em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: #94a3b8;
}
.gestion-plantillas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gestion-hist-modal {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.gestion-hist-modal strong {
  display: block;
  font-size: 12px;
  color: #0b1f33;
  margin-bottom: 8px;
}
.modal-gestion .cc-gestion-timeline { max-height: 120px; }

/* Analytics inferiores */
.cc-analytics {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.cc-analytics > .cc-card {
  grid-column: span 2;
  background: var(--cc-card, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(11, 31, 51, 0.08);
  padding: 12px 14px 14px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
}
.cc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.cc-card-head strong {
  font-size: 13px;
  color: #0b1f33;
}
.cc-card-tag {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 999px;
}
.cc-card-tag.ok {
  color: #15803d;
  background: #dcfce7;
}
.cc-card-foot {
  margin: 6px 0 0;
  padding-top: 2px;
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
}

.cc-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex: 1;
  min-height: 90px;
  padding: 6px 0 18px; /* espacio para etiquetas de hora */
  margin-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}
.cc-bar {
  flex: 1;
  height: var(--h, 40%);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #60a5fa, #1d4ed8);
  position: relative;
  opacity: .88;
}
.cc-bar.is-peak {
  background: linear-gradient(180deg, #34d399, #059669);
  opacity: 1;
}
.cc-bar span {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  font-size: 9px;
  color: #94a3b8;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.cc-donut-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.cc-donut {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  transform: rotate(-90deg);
}
.cc-donut-center {
  fill: #0b1f33;
  font-size: 8px;
  font-weight: 800;
  transform: rotate(90deg);
  transform-origin: 21px 21px;
}
.cc-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: #475569;
  width: 100%;
}
.cc-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cc-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cc-legend b { margin-left: auto; color: #0b1f33; }

.cc-meters {
  display: grid;
  gap: 10px;
  flex: 1;
  align-content: center;
}
.cc-meter-top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}
.cc-meter-top b { color: #0b1f33; }
.cc-meter-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.cc-meter-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.cc-route-progress { margin: 8px 0 12px; }
.cc-route-rail {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 10px 4px 14px;
}
.cc-route-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #22c55e);
  transition: width .4s ease;
}
.cc-route-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #94a3b8;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px #fff;
}
.cc-route-dot.done { border-color: #22c55e; background: #22c55e; }
.cc-route-dot.warn { border-color: #f59e0b; }
.cc-route-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #94a3b8;
  font-weight: 600;
}
.cc-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
}
.cc-mini-stats em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: #94a3b8;
}
.cc-mini-stats strong {
  font-size: 15px;
  color: #0b1f33;
}

.cc-fleet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
}
.cc-fleet-list li {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.cc-placa {
  font-weight: 800;
  color: #0b1f33;
  font-size: 11px;
}
.cc-fleet-bar {
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.cc-fleet-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #1d4ed8);
  border-radius: 999px;
}
.cc-fleet-list em {
  font-style: normal;
  color: #94a3b8;
  font-size: 10px;
  white-space: nowrap;
}

.cc-sla {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
}
.cc-sla-ring {
  --pct: 80;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff 68%, transparent 69% 100%),
    conic-gradient(#22c55e calc(var(--pct) * 1%), #e2e8f0 0);
  display: grid;
  place-content: center;
  text-align: center;
  flex-shrink: 0;
}
.cc-sla-ring strong {
  display: block;
  font-size: 16px;
  color: #0b1f33;
  line-height: 1;
}
.cc-sla-ring span {
  font-size: 9px;
  color: #64748b;
}
.cc-sla-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  width: 100%;
  font-size: 11px;
  color: #64748b;
}
.cc-sla-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.cc-sla-list b { color: #0b1f33; }

@media (max-width: 1600px) {
  .cc-analytics > .cc-card { grid-column: span 4; }
}
@media (max-width: 1100px) {
  .cc-analytics > .cc-card { grid-column: span 6; }
}
@media (max-width: 820px) {
  .cc-analytics > .cc-card { grid-column: span 12; min-height: 0; }
}

/* Fullscreen mapa */
.cc-map-slot.is-fullscreen {
  position: fixed;
  inset: 8px;
  z-index: 2500;
  min-height: 0;
  height: auto;
  border-radius: 14px;
}
body.cc-fs-active {
  overflow: hidden;
}
body.cc-fs-active .cc-map-slot:not(.is-fullscreen) {
  visibility: hidden;
}

/* Legacy kpi-card kept for compatibility */
.kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(21, 63, 117, 0.07);
  position: relative;
  overflow: hidden;
}
.kpi-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--support-primary);
  opacity: .85;
}
.kpi-card.alert::after { background: var(--support-danger); }
.kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.kpi-icon-blue { background: #e8f1fb; color: #153f75; }
.kpi-icon-red { background: #fdecea; color: #c62828; }
.kpi-icon-green { background: #eef6d8; color: #5a7a20; }
.kpi-icon-amber { background: #fff4e5; color: #a05a00; }
.kpi-value-sm { font-size: 22px !important; }

.panel-modern {
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 32px rgba(21, 63, 117, 0.08) !important;
  overflow: hidden;
}
.panel-heading-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px !important;
  background: linear-gradient(180deg, #fff, #f7f9fc) !important;
  border-bottom: 1px solid var(--support-border) !important;
  font-size: 14px;
}
.chip-soft {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef5ff;
  color: var(--support-primary);
  font-size: 11px;
  font-weight: 700;
}
.chip-live {
  background: #e8f8ef;
  color: #1b7a45;
}
.chip-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1b7a45;
  margin-right: 6px;
}

.gps-log-head {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--support-text-muted);
  background: #f7f9fc;
  border-bottom: 1px solid var(--support-border);
}
.gps-log-wrap {
  max-height: 180px;
  overflow: auto;
  border-top: 1px solid var(--support-border);
  background: #fff;
}

.feed-modern {
  max-height: 520px;
  overflow: auto;
  padding: 12px !important;
  background: linear-gradient(180deg, #f7f9fc, #fff);
}
.feed-modern .feed-item {
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(21, 63, 117, 0.06);
  border-left: 3px solid #c5d0dc;
  transition: transform .12s ease, box-shadow .12s ease;
}
.feed-modern .feed-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(21, 63, 117, 0.1);
}
.feed-modern .feed-item.highlight {
  background: #fff7f7;
  border-left-color: #dc3545;
  box-shadow: 0 6px 18px rgba(220, 53, 69, 0.1);
}
.feed-modern .feed-item .badge {
  border-radius: 8px;
  font-weight: 700;
}
.feed-modern .feed-item strong {
  font-size: 13px;
  color: var(--support-primary);
}

.alert-detail-card {
  padding: 4px 2px;
}
.alert-detail-card h4 {
  font-size: 18px;
  line-height: 1.3;
}
.meta-grid .form-control {
  background: #f7f9fc;
}

.puntos-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.puntos-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #f7f9fc;
  border: 1px solid var(--support-border);
}
.puntos-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.puntos-status-off .puntos-status-dot { background: #9aa3af; }
.puntos-status-on .puntos-status-dot {
  background: #28a745;
  box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.18);
}
.puntos-status-on {
  background: linear-gradient(180deg, #f3fbf5, #fff);
  border-color: #c8e6d0;
}
.puntos-status-card em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--support-text-muted);
}
.puntos-status-card strong {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  color: var(--support-primary);
  margin-top: 2px;
}
.puntos-status-pct {
  margin-left: auto;
  font-size: 18px;
  font-weight: 700;
  color: var(--support-text-muted);
}
.puntos-status-on .puntos-status-pct { color: #1b7a45; }
.puntos-status-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--support-text-muted);
}
.actions-modern {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--support-border);
}
.actions-modern .btn {
  padding: 10px 16px;
  border-radius: 10px !important;
}

.monitor-modern .alert-banner {
  border-radius: 14px;
  margin-top: 16px;
}
.map-panel {
  position: relative;
  min-height: 440px;
  background: #e5e3df;
  overflow: hidden;
}
.monitor-modern .map-panel {
  border-radius: 0;
}
#gpsMap {
  width: 100%;
  height: 440px;
  z-index: 1;
}
.map-panel .leaflet-container {
  font-family: var(--support-font);
  background: #e5e3df;
}
.vehicle-pin[hidden] { display: none !important; }
/* Etiqueta del vehículo (tooltip Leaflet) */
.leaflet-tooltip.gps-veh-tooltip {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.leaflet-tooltip.gps-veh-tooltip::before { display: none; }
.gps-veh-label {
  background: rgba(11, 31, 51, 0.92);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 4px 8px;
  max-width: 140px;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.gps-veh-label.crit {
  background: rgba(127, 29, 29, 0.94);
  border-color: rgba(248, 113, 113, 0.45);
}
.gps-veh-label strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.gps-veh-label span {
  display: block;
  font-size: 9px;
  opacity: .85;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.4); }
  50% { box-shadow: 0 0 0 10px rgba(220,53,69,0); }
}
.map-legend {
  position: absolute;
  left: 12px; right: 12px; bottom: 28px;
  display: flex; gap: 8px; flex-wrap: wrap;
  z-index: 500;
  pointer-events: none;
}
.map-legend span {
  background: rgba(21,63,117,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
}
.map-attrib {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 500;
  background: rgba(255,255,255,.9);
  color: #5b6572;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

/* Selector tipo de mapa (Leaflet layers) */
.map-panel .leaflet-control-layers {
  border: 1px solid var(--support-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(21, 63, 117, 0.18) !important;
  font-family: var(--support-font);
  font-size: 12px;
}
.map-panel .leaflet-control-layers-expanded {
  padding: 8px 10px;
  background: #fff;
  min-width: 120px;
}
.map-panel .leaflet-control-layers-base label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  font-weight: 500;
  color: var(--support-text);
  cursor: pointer;
}
.map-panel .leaflet-control-layers-base label:hover {
  color: var(--support-primary);
}
.map-panel .leaflet-control-layers-separator {
  display: none;
}
.leaflet-div-icon.gps-truck {
  background: transparent;
  border: none;
}
.gps-truck-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ea4335;
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.gps-truck-dot.crit {
  background: #c5221f;
  box-shadow: 0 0 0 6px rgba(197,34,31,.25);
}
.gps-log { font-size: 12px; margin: 0; }
.gps-log th, .gps-log td { padding: 7px 12px; }
.gps-log thead th {
  background: #f7f9fc;
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--support-text-muted);
}
.gps-log tr.gps-new td { background: #eef5ff; }
.gps-log tr.gps-crit td { background: #fdecea; font-weight: 600; }
.feed { max-height: 340px; overflow: auto; }
.feed-item {
  padding: 10px 12px;
  border: 1px solid var(--support-border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fafbfc;
}
.feed-item.highlight { background: #fdecea; border-color: #f5c2c7; }
.feed-item .row-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.feed-item p { margin: 0; color: var(--support-text-muted); font-size: 13px; }

.decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.decision {
  text-align: left;
  background: #fff;
  border: 1px solid var(--support-border);
  border-radius: var(--support-radius-sm);
  padding: 12px;
  cursor: pointer;
}
.decision:hover { border-color: var(--support-primary); }
.decision.selected {
  border-color: var(--support-primary);
  background: #eef5ff;
  box-shadow: inset 0 0 0 1px var(--support-primary);
}
.decision strong { display: block; color: var(--support-primary); margin-bottom: 4px; }
.decision span { color: var(--support-text-muted); font-size: 12px; }
.decision:disabled { opacity: .55; cursor: not-allowed; }

.alert-banner {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--support-radius);
  background: linear-gradient(90deg, #8b1515, #dc3545);
  color: #fff;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.alert-banner.show { display: flex; }
.alert-banner h4 { margin: 0 0 4px; color: #fff; }
.alert-banner p { margin: 0; color: rgba(255,255,255,.92); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 46, .45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--support-radius);
  width: min(520px, 100%);
  box-shadow: 0 20px 60px rgba(21,63,117,.25);
  overflow: hidden;
}
.modal.modal-wide {
  width: min(780px, 100%);
}
.modal-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--support-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h4 { margin: 0; font-weight: 700; color: var(--support-primary); }
.modal-body { padding: 16px; }
.modal-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--support-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--support-text-muted);
}
.radio-row {
  display: flex;
  gap: 28px;
  margin-top: 12px;
}
.radio-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  cursor: pointer;
}
.success-box {
  display: none;
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--support-radius);
  background: #d4edda;
  border: 1px solid #c3e6cb;
}
.success-box.show { display: block; }
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: var(--support-navy);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  z-index: 3000;
}
.toast.show { opacity: 1; }

/* ── Mapa operacional SOS (embebido en Central) ─────── */
.mapa-ops-embed .panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mapa-ops.mapa-ops-inline {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  height: 100%;
  margin: 0;
  background: #f7f9fc;
  overflow: hidden;
}
.mapa-ops-body-stack {
  display: grid !important;
  /* Mapa + panel de capas al lado (más legible en stand/TV) */
  grid-template-columns: 1fr minmax(260px, 300px) !important;
  grid-template-rows: 1fr;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.mapa-ops-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mapa-ops-kpis-overlay {
  position: absolute;
  left: 8px;
  right: 72px;
  top: 8px;
  z-index: 450;
  pointer-events: none;
  gap: 4px;
}
.cc-shell .mapa-ops-kpi {
  border-radius: 8px;
  padding: 5px 9px;
  background: rgba(11, 31, 51, 0.82);
}
.mapa-ops-kpi {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 28, 46, 0.72);
  border: 1px solid rgba(255,255,255,.12);
  min-width: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mapa-ops-kpi.off { opacity: .4; }
.mapa-ops-kpi strong {
  display: inline;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  margin-right: 2px;
}
.mapa-ops-kpi span {
  display: inline;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: rgba(255,255,255,.78);
}
.mapa-ops-kpi-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mapa-ops-body {
  flex: 1;
  display: grid;
  min-height: 0;
  overflow: hidden;
}
.mapa-ops-panel {
  display: flex;
  flex-direction: column;
  background: #fff;
  min-height: 0;
  min-width: 0;
  z-index: 2;
}
.mapa-ops-panel-bottom {
  border-top: 0;
  border-left: 1px solid var(--support-border);
  border-right: 0;
  box-shadow: none;
  min-height: 0;
}
.mapa-ops-panel-intro {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--support-border);
  flex-shrink: 0;
}
.mapa-ops-panel-intro strong {
  display: block;
  color: var(--support-primary);
  font-size: 15px;
  font-weight: 700;
}
.mapa-ops-panel-intro p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--support-text-muted);
}
.mapa-ops-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--support-border);
  flex-shrink: 0;
}
.mapa-ops-search .form-control {
  font-size: 13px;
  height: 36px;
  border-radius: 10px;
}
.mapa-ops-list {
  flex: 1;
  overflow: auto;
  padding: 10px;
}
.mapa-ops-folder {
  border: 1px solid var(--support-border);
  border-radius: 12px;
  margin-bottom: 8px;
  background: #fff;
  overflow: hidden;
}
.mapa-ops-folder.muted { opacity: .55; }
.mapa-ops-folder-head {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.mapa-ops-check {
  display: grid;
  place-items: center;
  padding: 0 4px 0 10px;
  margin: 0;
}
.mapa-ops-folder-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 10px 10px 4px;
  cursor: pointer;
}
.mapa-ops-folder-btn:hover { background: #f7f9fc; }
.mapa-ops-folder-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(21, 63, 117, 0.2);
}
.mapa-ops-folder-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}
.mapa-ops-folder-btn strong {
  display: block;
  font-size: 13px;
  color: var(--support-primary);
}
.mapa-ops-folder-btn em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--support-text-muted);
  margin-top: 1px;
}
.mapa-ops-chevron {
  margin-left: auto;
  color: var(--support-text-muted);
  font-size: 12px;
}
.mapa-ops-places {
  border-top: 1px solid var(--support-border);
  padding: 4px 6px 8px;
  background: #fafbfc;
}
.mapa-ops-place {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 7px 10px 7px 42px;
  font-size: 12px;
  color: var(--support-text);
  border-radius: 8px;
  cursor: pointer;
}
.mapa-ops-place:hover {
  background: #eef5ff;
  color: var(--support-primary);
}
.mapa-ops-empty {
  padding: 12px;
  color: var(--support-text-muted);
  font-size: 12px;
  text-align: center;
}
.mapa-ops-pin {
  background: transparent !important;
  border: 0 !important;
}
.mapa-ops-pinwrap {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  transition: transform .12s ease;
}
.mapa-ops-pinwrap:hover {
  transform: scale(1.18);
  z-index: 5;
}
.mapa-ops-pinhead {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pin, #153f75);
  border: 2px solid rgba(255, 255, 255, 0.95);
  color: #fff;
  line-height: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.mapa-ops-pinhead svg {
  display: block;
  width: 14px;
  height: 14px;
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgba(21, 63, 117, 0.22) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: #153f75 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.marker-cluster-small div { width: 36px !important; height: 36px !important; margin-left: 2px !important; margin-top: 2px !important; line-height: 36px !important; }
.marker-cluster-medium div { width: 42px !important; height: 42px !important; line-height: 42px !important; font-size: 14px !important; }
.marker-cluster-large div { width: 48px !important; height: 48px !important; line-height: 48px !important; font-size: 15px !important; }
.mapa-ops-mapwrap {
  position: relative;
  min-height: 0;
  height: 100%;
  /* Fondo tipo océano: si Leaflet aún no llena, no se ve “hueco” blanco */
  background: #0b1c2c;
  overflow: hidden;
}
#mapaOpsMap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #0b1c2c;
}
#mapaOpsMap.leaflet-container {
  background: #0b1c2c;
}
.mapa-ops-inline #mapaOpsMap {
  min-height: 0;
}
/* Command Center: mapas ya definen altura propia */
.mapa-ops-panel-bottom .mapa-ops-list {
  max-height: none;
}
.mapa-ops-panel-bottom .mapa-ops-folder {
  margin-bottom: 8px;
}
.mapa-ops-panel-bottom .mapa-ops-folder:last-child {
  margin-bottom: 0;
}
.mapa-ops-panel-bottom .mapa-ops-folder-btn {
  padding: 12px 10px 12px 4px;
}
.mapa-ops-panel-bottom .mapa-ops-folder-btn strong {
  font-size: 13px;
  line-height: 1.25;
}
.mapa-ops-panel-bottom .mapa-ops-folder-btn em {
  font-size: 12px;
}
.mapa-ops-panel-bottom .mapa-ops-places {
  max-height: 140px;
  overflow: auto;
}
.mapa-ops-popup h4 {
  margin: 6px 0 6px;
  font-size: 15px;
  color: var(--support-primary);
}
.mapa-ops-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.mapa-ops-desc {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--support-text-muted);
  line-height: 1.4;
}
.mapa-ops-coords {
  margin: 0 0 10px;
  font-size: 11px;
  color: #8a93a0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mapa-ops-dir {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--support-primary);
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none !important;
}
.mapa-ops-dir:hover { background: var(--support-primary-dark); }

/* CC responsive: 1920 / 1366 / laptop */
@media (max-width: 1600px) {
  .cc-maps { grid-column: span 8; }
  .cc-events { grid-column: span 4; }
}
@media (max-width: 1366px) {
  .cc-top { grid-template-columns: 1fr; }
  .cc-titleblock { min-height: 0; padding: 8px 12px; }
  .cc-title { font-size: 16px; }
  .cc-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cc-kpi-value { font-size: 18px; }
  .cc-main { grid-template-columns: 1fr; }
  .cc-maps {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
  }
  .cc-map-slot { min-height: 480px; }
  .cc-events {
    grid-column: auto;
    max-height: none;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: stretch;
  }
  .cc-events-head { grid-column: 1 / -1; }
  .cc-feed { max-height: 280px; }
}
@media (max-width: 1100px) {
  .form-row, .kpi-row, .dash-grid, .decision-grid { grid-template-columns: 1fr 1fr; }
  .cc-kpi-row { grid-template-columns: 1fr 1fr; }
  .cc-maps {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cc-map-slot { min-height: 420px; }
  .cc-events { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  #sidebar {
    transform: translateX(-100%);
    pointer-events: none;
    box-shadow: 8px 0 24px rgba(0,0,0,.18);
  }
  .app-shell.sidebar-open-mobile #sidebar {
    transform: translateX(0);
    pointer-events: auto;
  }
  .app-shell.sidebar-closed #sidebar {
    transform: translateX(-100%);
  }
  #main-content { margin-left: 0; }
  .form-row, .kpi-row, .dash-grid, .decision-grid { grid-template-columns: 1fr; }
  .cc-kpi-row { grid-template-columns: 1fr; }
  #gpsMap, .map-panel { height: 340px; min-height: 340px; }
  .cc-shell #gpsMap { min-height: 280px; }
}

/* ── Viajes (módulo demo tipo Support) ───────────────── */
.viajes-filters {
  background: #fff;
  border: 1px solid var(--support-border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: var(--support-shadow);
}
.viajes-filters-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.viajes-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--support-text-muted);
  font-weight: 600;
}
.viajes-table {
  font-size: 12px;
  min-width: 1100px;
}
.viajes-table th,
.viajes-table td {
  padding: 8px 10px;
  white-space: nowrap;
}
.viajes-row-demo {
  background: #f4f9ff !important;
}
.viajes-empty {
  text-align: center;
  color: var(--support-text-muted);
  padding: 28px !important;
}
.viajes-actions-cell {
  width: 44px;
  position: relative;
}
.btn-xs {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
}
.btn-info {
  background: #17a2b8;
  color: #fff;
  border: 0;
}
.btn-info:hover { background: #138496; color: #fff; }
.viajes-dd { position: relative; display: inline-block; }
.viajes-dd-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 40;
  min-width: 200px;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--support-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(21, 63, 117, 0.18);
}
.viajes-dd.open .viajes-dd-menu { display: block; }
.viajes-dd-menu button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--support-text);
  cursor: pointer;
}
.viajes-dd-menu button:hover {
  background: #eef5ff;
  color: var(--support-primary);
}
.viajes-det-head {
  margin-bottom: 12px;
}
.viajes-det-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.viajes-det-kpis > div {
  background: #fff;
  border: 1px solid var(--support-border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--support-shadow);
}
.viajes-det-kpis span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--support-text-muted);
  margin-bottom: 4px;
}
.viajes-det-kpis strong {
  font-size: 14px;
  color: var(--support-primary);
}
.viajes-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.viajes-tab {
  border: 1px solid var(--support-border);
  background: #fff;
  color: var(--support-text-muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.viajes-tab:hover { color: var(--support-primary); border-color: #c5d4e8; }
.viajes-tab.active {
  background: var(--support-primary);
  border-color: var(--support-primary);
  color: #fff;
}
.viajes-readonly {
  background: #f7f9fc;
  border: 1px solid var(--support-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  min-height: 36px;
}
.viajes-subh {
  margin: 16px 0 8px;
  font-size: 14px;
  color: var(--support-primary);
}
.viajes-notes {
  margin: 0;
  padding-left: 18px;
  color: var(--support-text);
  font-size: 13px;
}
.viajes-fotos {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.viajes-fotos li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--support-border);
  border-radius: 10px;
  background: #fafbfc;
}
.viajes-foto-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #d9e6f5, #f0f4f8 55%, #c8d9ec);
  flex-shrink: 0;
}
.viajes-fotos em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--support-text-muted);
}
.hint {
  font-size: 13px;
  color: var(--support-text-muted);
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .viajes-det-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .viajes-det-kpis { grid-template-columns: 1fr; }
  .viajes-count { margin-left: 0; width: 100%; }
}