/* ============================================================
   Identidad CompLook Sistemas — tokens de marca
   Origen: design_handoff_complook_brand/TOKENS.md
   OJO: este archivo esta duplicado en SSC.Portal/wwwroot/complook-tokens.css.
   Son dos proyectos Blazor independientes; si cambias un valor aca,
   cambialo tambien alla.
   ============================================================ */

:root {
  /* Colores de marca */
  --cl-navy:       #152348;
  --cl-emerald:    #2EC98A;
  --cl-deep:       #0B1528;
  --cl-muted:      #5D6B8A;
  --cl-mint:       #C8F0E1;
  --cl-bg:         #F2F4FA;
  --cl-surface:    #FFFFFF;
  --cl-border:     #E2E6F0;
  --cl-border-alt: #DDE2EE;

  /* Tipografia */
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radios */
  --radius-sm:   7px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 99px;

  /* ── Mapeo sobre Bootstrap 5.3 ──────────────────────────
     Esta capa es la que hace barato el cambio: los btn-primary,
     card, table y demas que ya existen heredan la marca sin
     tocar el markup. */
  --bs-primary:           var(--cl-navy);
  --bs-primary-rgb:       21, 35, 72;
  --bs-body-bg:           var(--cl-bg);
  --bs-body-color:        var(--cl-deep);
  --bs-body-font-family:  var(--font-sans);
  --bs-border-color:      var(--cl-border);
  --bs-secondary-color:   var(--cl-muted);
}

body {
  font-family: var(--font-sans);
  background-color: var(--cl-bg);
  color: var(--cl-deep);
}

/* Boton primario de marca: fondo esmeralda, texto marino profundo (~8:1, AA) */
.btn-primary {
  background-color: var(--cl-emerald);
  border-color: var(--cl-emerald);
  color: var(--cl-deep);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: filter 150ms ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cl-emerald);
  border-color: var(--cl-emerald);
  color: var(--cl-deep);
  filter: brightness(1.06);
}

/* Boton secundario: marino con texto blanco */
.btn-secondary {
  background-color: var(--cl-navy);
  border-color: var(--cl-navy);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  transition: filter 150ms ease;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--cl-navy);
  border-color: var(--cl-navy);
  filter: brightness(1.06);
}

/* Cards */
.card {
  background-color: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-lg);
}

/* Badge de marca — SOLO para etiquetas neutras (chips informativos,
   contadores). Los badges de estado operativo conservan su color
   semantico y no usan esta clase. */
.badge-marca {
  background-color: var(--cl-mint);
  color: var(--cl-emerald);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
}

/* ── Navbar de marca ─────────────────────────────────────── */
.navbar, .top-row.navbar, .sidebar .top-row {
  background-color: var(--cl-navy);
}

.cl-wordmark {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.navbar .nav-link,
.nav-scrollable .nav-link {
  color: rgba(255, 255, 255, 0.50);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  transition: color 150ms ease, background-color 150ms ease;
}

.navbar .nav-link:hover,
.nav-scrollable .nav-link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.navbar .nav-link.active,
.nav-scrollable .nav-link.active {
  background-color: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  font-weight: 600;
}

/* ── Centro de seguimiento de flota ──────────────────────── */
.fleet-live-page {
  padding: 22px;
  min-height: 100%;
}

.fleet-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  margin-bottom: 16px;
  color: #fff;
  background: var(--cl-navy);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 40px rgba(11, 21, 40, 0.14);
}

.fleet-hero h1 {
  margin: 5px 0 4px;
  font-size: clamp(1.7rem, 2.2vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.fleet-hero p { margin: 0; color: rgba(255, 255, 255, 0.66); }
.fleet-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--cl-mint); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.fleet-live-pulse { width: 9px; height: 9px; background: var(--cl-emerald); border-radius: 50%; box-shadow: 0 0 0 5px rgba(46, 201, 138, 0.15); animation: fleet-pulse 2s ease-out infinite; }

@keyframes fleet-pulse {
  50% { box-shadow: 0 0 0 10px rgba(46, 201, 138, 0); }
}

.fleet-kpis { display: flex; gap: 9px; }
.fleet-kpis div { min-width: 98px; padding: 12px 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); }
.fleet-kpis strong, .fleet-kpis span { display: block; }
.fleet-kpis strong { font: 700 1.35rem var(--font-mono); }
.fleet-kpis span { margin-top: 2px; color: rgba(255, 255, 255, 0.58); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }

.fleet-alert { display: flex; align-items: center; gap: 12px; padding: 12px 15px; margin-bottom: 16px; border-radius: var(--radius-md); border: 1px solid; }
.fleet-alert > i { font-size: 1.25rem; }
.fleet-alert div { flex: 1; }
.fleet-alert strong, .fleet-alert span { display: block; }
.fleet-alert span { margin-top: 2px; font-size: 0.82rem; }
.fleet-alert-warning { color: #70420a; background: #fff7e6; border-color: #f6d28d; }
.fleet-alert-danger { color: #7f1d1d; background: #fff1f2; border-color: #fecdd3; }

.fleet-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 16px; min-height: 665px; }
.fleet-map-shell, .fleet-side-panel { background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(11, 21, 40, 0.06); overflow: hidden; }
.fleet-map-shell { display: flex; flex-direction: column; min-width: 0; }
.fleet-panel-heading, .fleet-side-header { min-height: 72px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--cl-border); }
.fleet-panel-heading strong, .fleet-side-header strong { display: block; margin-top: 3px; color: var(--cl-deep); }
.fleet-section-label { color: var(--cl-muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.fleet-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: var(--cl-muted); font-size: 0.72rem; }
.fleet-legend span { display: flex; align-items: center; gap: 5px; }
.fleet-legend i { width: 8px; height: 8px; border-radius: 50%; }
.fleet-legend .current { background: #2EC98A; }
.fleet-legend .delayed { background: #F59E0B; }
.fleet-legend .offline { background: #64748B; }
.fleet-map-stage { position: relative; flex: 1; min-height: 590px; background: #e8edf4; }
.fleet-map-canvas { position: absolute; inset: 0; }
.fleet-map-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; color: var(--cl-muted); background: rgba(242, 244, 250, 0.94); }
.fleet-map-overlay > i { font-size: 2.8rem; color: var(--cl-navy); }
.fleet-map-overlay strong { color: var(--cl-deep); }
.fleet-map-overlay span { max-width: 380px; font-size: 0.86rem; }

.fleet-side-panel { display: flex; flex-direction: column; max-height: 665px; }
.fleet-refresh-button { width: 34px; height: 34px; border: 1px solid var(--cl-border); border-radius: 50%; color: var(--cl-navy); background: #fff; transition: transform 150ms ease, background 150ms ease; }
.fleet-refresh-button:hover { transform: rotate(24deg); background: var(--cl-bg); }
.fleet-search { display: flex; align-items: center; gap: 9px; margin: 14px; padding: 10px 12px; color: var(--cl-muted); background: var(--cl-bg); border: 1px solid transparent; border-radius: var(--radius-md); }
.fleet-search:focus-within { border-color: var(--cl-navy); background: #fff; }
.fleet-search input { width: 100%; border: 0; outline: 0; color: var(--cl-deep); background: transparent; font-size: 0.84rem; }
.fleet-vehicle-list { flex: 1; min-height: 0; padding: 0 10px 12px; overflow-y: auto; }
.fleet-vehicle-card { position: relative; display: flex; width: 100%; padding: 13px 12px 13px 17px; margin-bottom: 8px; text-align: left; color: var(--cl-deep); background: #fff; border: 1px solid var(--cl-border); border-radius: var(--radius-md); overflow: hidden; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.fleet-vehicle-card:hover { transform: translateY(-1px); border-color: #b9c2d4; box-shadow: 0 8px 18px rgba(11, 21, 40, 0.07); }
.fleet-vehicle-card.selected { border-color: var(--cl-navy); box-shadow: 0 0 0 2px rgba(21, 35, 72, 0.09); }
.fleet-status-rail { position: absolute; inset: 0 auto 0 0; width: 5px; }
.fleet-status-rail.current { background: #2EC98A; }
.fleet-status-rail.delayed { background: #F59E0B; }
.fleet-status-rail.offline { background: #64748B; }
.fleet-status-rail.waiting { background: #3B82F6; }
.fleet-card-main, .fleet-card-topline { display: flex; width: 100%; }
.fleet-card-main { flex-direction: column; gap: 4px; }
.fleet-card-topline { align-items: center; justify-content: space-between; gap: 8px; }
.fleet-card-topline strong { font: 700 0.98rem var(--font-mono); letter-spacing: 0.02em; }
.fleet-status-chip { padding: 4px 7px; border-radius: var(--radius-pill); font-size: 0.62rem; font-weight: 800; }
.fleet-status-chip.current { color: #126545; background: #dff8ee; }
.fleet-status-chip.delayed { color: #7a4700; background: #fff1cf; }
.fleet-status-chip.offline { color: #475569; background: #e9edf2; }
.fleet-status-chip.waiting { color: #1e4c98; background: #e5efff; }
.fleet-trip { color: var(--cl-muted); font-size: 0.76rem; font-weight: 700; }
.fleet-driver, .fleet-last-seen { color: var(--cl-muted); font-size: 0.71rem; }
.fleet-last-seen { font-family: var(--font-mono); }
.fleet-list-state { flex: 1; min-height: 230px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--cl-muted); }
.fleet-list-state > i { font-size: 2.3rem; color: #aab3c4; }
.fleet-list-state strong { color: var(--cl-deep); }
.fleet-list-state span { font-size: 0.78rem; }
.fleet-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--cl-border); background: #f8fafc; }
.fleet-selection-bar span, .fleet-selection-bar strong { display: block; }
.fleet-selection-bar span { color: var(--cl-muted); font-size: 0.65rem; }
.fleet-selection-bar strong { font-size: 0.82rem; }
.fleet-selection-bar .btn { white-space: nowrap; font-size: 0.75rem; }

.fleet-access-state { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--cl-muted); }
.fleet-access-denied > i { font-size: 3rem; color: var(--cl-navy); }
.fleet-access-denied h2, .fleet-access-denied p { margin: 0; }

@media (max-width: 1100px) {
  .fleet-workspace { grid-template-columns: 1fr; }
  .fleet-side-panel { max-height: 560px; }
  .fleet-map-stage { min-height: 52vh; }
}

@media (max-width: 720px) {
  .fleet-live-page { padding: 12px; }
  .fleet-hero { align-items: flex-start; flex-direction: column; padding: 20px; }
  .fleet-kpis { width: 100%; overflow-x: auto; }
  .fleet-kpis div { min-width: 92px; }
  .fleet-panel-heading { align-items: flex-start; flex-direction: column; }
  .fleet-legend { justify-content: flex-start; }
  .fleet-map-stage { min-height: 420px; }
  .fleet-alert { align-items: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .fleet-live-pulse { animation: none; }
  .fleet-vehicle-card, .fleet-refresh-button { transition: none; }
}