:root {
    --navy-950: #060d24;
    --navy-900: #0a1430;
    --navy-850: #0f1d3f;
    --navy-800: #142850;
    --navy-700: #1d3a6e;
    --navy-600: #2a4d8a;
    --navy-500: #3d6ab0;
    /* Tema ROJO de Control de Flota (#cc2129) — Eduardo Luna · 2026.
       --accent deriva de --mustard y --accent-2 de --cyan; recolorar estas
       bases vuelve toda la UI roja sin tocar cada regla. */
    --mustard: #cc2129;        /* acento primario (rojo CdF) */
    --mustard-soft: #e0444b;
    --cyan: #cc2129;           /* acento secundario (mismo rojo) */
    --cyan-bright: #e0444b;
    --white: #ffffff;
    --ink: #0a1430;
    --gray-50: #f7f8fb;
    --gray-100: #eceff5;
    --gray-200: #dde2ec;
    --gray-300: #c4ccdb;
    --gray-400: #8a93a6;
    --gray-500: #5b6478;
    --green: #34d399;
    --red: #f87171;
    --amber: #fb923c;
    /* Estado inferido por GPS (en_ruta_gps): cian, pariente frío del verde sin
       poder confundirse con él. Un solo hex en toda la app (mapa, Monitoreo y
       PDF) — ver diseño §1. — Eduardo Luna · 2026 */
    --gps: #0891B2;
  }
  /* ===== DARK (default) ===== */
  [data-theme="dark"] {
    --bg: var(--navy-950);
    --surface: var(--navy-900);
    --surface-2: var(--navy-850);
    --surface-3: var(--navy-800);
    --border: rgba(255,255,255,0.07);
    --border-strong: rgba(255,255,255,0.14);
    --text: #ffffff;
    --text-dim: #b8c1d6;
    --text-faint: #6b7693;
    --accent: var(--mustard);
    --accent-2: var(--cyan);
    --grid: rgba(99, 124, 175, 0.10);
    --grid-strong: rgba(99, 124, 175, 0.20);
    --road: rgba(255,255,255,0.04);
    --road-line: rgba(255, 77, 77, 0.15);
    --park: rgba(255, 77, 77, 0.04);
    --water: rgba(255, 77, 77, 0.07);
    --logo-filter: brightness(0) invert(1);
  }
  /* ===== LIGHT (= tema "rojo" de Control de Flota) ===== */
  [data-theme="light"] {
    --bg: #eef1f5;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #f4f6fa;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #0f172a;
    --text-dim: #475569;
    --text-faint: #64748b;
    --accent: #cc2129;
    --accent-2: #cc2129;
    --grid: rgba(15, 23, 42, 0.05);
    --grid-strong: rgba(15, 23, 42, 0.10);
    --road: #ffffff;
    --road-line: rgba(204, 33, 41, 0.18);
    --park: rgba(204, 33, 41, 0.06);
    --water: rgba(204, 33, 41, 0.08);
    --logo-filter: none;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  /* Fondo de página con radiales rosados (tema rojo de Control de Flota) */
  [data-theme="light"] body {
    background:
      radial-gradient(1100px 600px at 85% -10%, #ffe6e6 0%, transparent 55%),
      radial-gradient(900px 600px at -10% 110%, #fde7ea 0%, transparent 50%),
      var(--bg);
  }
  .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: "ss01", "cv11"; }
  .app {
    display: grid;
    grid-template-columns: 320px 1fr 360px;
    grid-template-rows: 64px 1fr;
    height: 100vh;
    width: 100vw;
  }
  /* ===== HEADER ===== */
  header.top {
    grid-column: 1 / -1;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 24px;
    z-index: 30;
    position: relative;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 280px;
  }
  .brand .logo-img {
    height: 26px;
    filter: var(--logo-filter);
  }
  .brand .pipe { width: 1px; height: 22px; background: var(--border-strong); }
  .brand .product {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 15px;
  }
  .brand .product .accent { color: var(--accent); }
  .brand .product .bang { color: var(--accent-2); }
  .brand .tag {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-left: 6px;
    padding: 3px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
  }
  .search {
    flex: 1;
    max-width: 480px;
    position: relative;
  }
  .search input {
    width: 100%;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px 10px 38px;
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color 0.15s;
  }
  .search input::placeholder { color: var(--text-faint); }
  .search input:focus { border-color: var(--accent-2); }
  .search svg.s-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
  .search .kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--text-faint);
    border: 1px solid var(--border-strong);
    padding: 2px 6px;
    border-radius: 4px;
  }
  .top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .live-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-dim);
  }
  .live-pill .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 currentColor;
    animation: livepulse 1.6s ease-out infinite;
    color: var(--green);
  }
  @keyframes livepulse {
    0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
    100% { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  }
  .live-pill strong { color: var(--text); font-weight: 600; }
  .icon-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
  }
  .icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
  .theme-toggle {
    width: 64px; height: 36px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    padding: 3px;
  }
  .theme-toggle .knob {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff; /* ícono blanco sobre rojo — Eduardo Luna · 2026 */
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s cubic-bezier(.5,1.4,.5,1);
  }
  [data-theme="dark"] .theme-toggle .knob { transform: translateX(28px); background: var(--cyan); color: var(--navy-950); }
  .theme-toggle .icons {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
    color: var(--text-faint); pointer-events: none;
  }
  .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan) 0%, var(--navy-700) 100%);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px; color: white;
    border: 1px solid var(--border);
  }

  /* ===== SIDEBAR LEFT ===== */
  aside.left {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    z-index: 20;
  }
  .sec {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
  }
  .sec h3 {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    margin: 0 0 12px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .sec h3 .count {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    background: var(--surface-3);
    color: var(--text-dim);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0;
  }
  /* stat row */
  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .stat {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .stat .label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .stat .val {
    font-family: "JetBrains Mono", monospace;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin-top: 2px;
    line-height: 1;
    display: flex; align-items: baseline; gap: 6px;
  }
  .stat .val .of { font-size: 12px; color: var(--text-faint); font-weight: 400; }
  .stat.accent { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, var(--surface-3)), var(--surface-3)); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
  .stat.accent .val { color: var(--text); }
  .stat.cyan { background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2) 14%, var(--surface-3)), var(--surface-3)); border-color: color-mix(in oklab, var(--accent-2) 30%, var(--border)); }
  /* Tarjetas del estado inferido (en_ruta_gps) y del aviso agregado (salida
     fantasma): borde DASHED — la firma de "lo dijo el GPS", no una persona.
     — Eduardo Luna · 2026 */
  .stat.gps {
    background: linear-gradient(180deg, color-mix(in oklab, var(--gps) 12%, var(--surface-3)), var(--surface-3));
    border: 1px dashed color-mix(in oklab, var(--gps) 45%, var(--border));
  }
  .stat.gps .val { color: var(--text); }
  .stat.fantasma {
    background: linear-gradient(180deg, color-mix(in oklab, var(--amber) 10%, var(--surface-3)), var(--surface-3));
    border: 1px dashed color-mix(in oklab, var(--amber) 50%, var(--border));
  }
  .stat.fantasma .val { color: var(--amber); }
  .stat.fantasma.active { box-shadow: 0 0 0 2px color-mix(in oklab, var(--amber) 45%, transparent); }
  .stat.gps.active      { box-shadow: 0 0 0 2px color-mix(in oklab, var(--gps) 45%, transparent); }
  /* Sublínea de desglose de la tarjeta "En ruta": cuántas las capturó una
     persona en Control de Flota y cuántas las dedujo la geocerca. El número
     del GPS va en cian, la MISMA tinta que marca esas unidades en la lista y
     en el mapa, para que se lean como la misma cosa. — Eduardo Luna · 2026 */
  .stat .sub {
    margin-top: 4px;
    font-size: 9.5px;
    line-height: 1.2;
    color: var(--text-faint);
    letter-spacing: 0.01em;
  }
  .stat .sub .gpsn { color: var(--gps); }
  /* groups */
  .groups { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; padding: 4px 12px 12px; }
  .group {
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.15s;
  }
  .group.open { border-color: var(--border); background: var(--surface-3); }
  .group-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
  }
  .group-head:hover { background: var(--surface-3); border-radius: 8px; }
  .group.open .group-head:hover { background: transparent; }
  .checkbox {
    width: 16px; height: 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    background: var(--surface);
  }
  .checkbox.checked {
    background: var(--accent-2);
    border-color: var(--accent-2);
    color: #fff; /* check blanco sobre rojo — Eduardo Luna · 2026 */
  }
  .checkbox.partial {
    background: var(--surface);
    border-color: var(--accent-2);
    position: relative;
  }
  .checkbox.partial::after {
    content: ""; width: 8px; height: 2px; background: var(--accent-2); border-radius: 1px;
  }
  .group-color {
    width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
  }
  .group-name {
    font-size: 13px; font-weight: 500; flex: 1;
    color: var(--text);
  }
  .group-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-faint);
  }
  .group-chev { color: var(--text-faint); transition: transform 0.2s; }
  .group.open .group-chev { transform: rotate(90deg); }
  .vehicles { display: flex; flex-direction: column; padding: 0 8px 8px 36px; gap: 2px; }
  .veh-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
  }
  .veh-row:hover { background: var(--surface); }
  .veh-row.selected { background: color-mix(in oklab, var(--accent-2) 14%, transparent); }
  .veh-row.selected::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
    background: var(--accent-2);
  }
  .veh-id { font-family: "JetBrains Mono", monospace; font-size: 12px; flex: 1; color: var(--text); }
  .veh-status {
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .veh-status.moving { background: color-mix(in oklab, var(--green) 18%, transparent); color: var(--green); }
  .veh-status.idle { background: color-mix(in oklab, var(--amber) 20%, transparent); color: var(--amber); }
  .veh-status.offline { background: color-mix(in oklab, var(--red) 20%, transparent); color: var(--red); }
  .veh-status.loading { background: color-mix(in oklab, var(--cyan) 20%, transparent); color: var(--accent-2); }
  /* Marca silenciosa entre el nombre y el estado: satélite cian = en_ruta_gps,
     fantasma ámbar = salida abierta con la unidad ya en planta. Sin fondo ni
     borde — con 40 filas es textura, no ruido. — Eduardo Luna · 2026 */
  .veh-flag { display: inline-flex; flex: none; line-height: 0; }
  .veh-flag.gps      { color: var(--gps); }
  .veh-flag.fantasma { color: var(--amber); }
  /* Llave ámbar = en taller con salida abierta. — Eduardo Luna · 2026 */
  .veh-flag.taller-ruta { color: var(--amber); }
  .comm-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 currentColor;
    animation: commpulse 1.4s ease-out infinite;
    color: var(--green);
  }
  .comm-dot.offline { background: var(--red); animation: none; }
  .comm-dot.idle { background: var(--amber); animation: none; }
  @keyframes commpulse {
    0% { box-shadow: 0 0 0 0 currentColor; }
    100% { box-shadow: 0 0 0 5px transparent; }
  }
  /* refresh */
  .refresh-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 6px;
  }
  .seg {
    text-align: center;
    padding: 8px 4px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
  }
  .seg:hover { color: var(--text); }
  .seg.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff; /* texto blanco sobre rojo — Eduardo Luna · 2026 */
    font-weight: 600;
  }
  /* Chips de filtro (Estado / Zona / Paja) */
  .filter-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-faint); margin: 10px 0 4px;
  }
  .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .seg.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px; font-size: 11px;
    width: auto; flex: 0 0 auto;
  }
  .seg.chip .chip-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  }
  .seg.chip.paja.active {
    background: color-mix(in oklab, var(--red) 22%, var(--surface-3));
    border-color: var(--red); color: var(--text);
  }
  /* Chip "Ruta GPS": borde dashed también inactivo (la firma de inferido viaja
     con el chip) y NO hereda el .seg.active rojo sólido al marcarse — sólido es
     capturado, este filtro es el inferido. — Eduardo Luna · 2026 */
  .seg.chip.gps { border-style: dashed; }
  .seg.chip.gps.active {
    background: color-mix(in oklab, var(--gps) 16%, var(--surface-3));
    border: 1px dashed var(--gps);
    color: var(--text);
    font-weight: 600;
  }
  .last-update {
    margin-top: 12px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px;
    color: var(--text-faint);
  }
  .last-update .ts { font-family: "JetBrains Mono", monospace; color: var(--text-dim); }
  .progress-track {
    margin-top: 8px;
    height: 3px;
    background: var(--surface-3);
    border-radius: 2px;
    overflow: hidden;
  }
  .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    width: 0%;
    transition: width 0.5s linear;
  }
  .refresh-btn {
    margin-top: 10px;
    width: 100%;
    padding: 9px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-dim);
    font: inherit; font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.15s;
  }
  .refresh-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
  .refresh-btn svg { transition: transform 0.4s; }
  .refresh-btn.spin svg { transform: rotate(360deg); }

  /* ===== MAP ===== */
  main.map {
    position: relative;
    /* Stacking context propio: confina los z-index internos de Leaflet
       (panes 400-700) para que el mapa no tape los desplegables del header
       (popover de la campanita de apoyos). — Eduardo Luna · 2026 */
    z-index: 1;
    overflow: hidden;
    background: var(--bg);
  }
  .map-svg { width: 100%; height: 100%; display: block; }
  .map-overlay { position: absolute; inset: 0; pointer-events: none; }
  .map-overlay > * { pointer-events: auto; }

  /* map controls */
  .map-tools {
    position: absolute; top: 16px; right: 16px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .map-tools .tool-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    backdrop-filter: blur(8px);
  }
  [data-theme="light"] .map-tools .tool-group { box-shadow: 0 2px 10px rgba(10,20,48,0.06); }
  .tool-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-dim); transition: all 0.15s;
    border-bottom: 1px solid var(--border);
  }
  .tool-btn:last-child { border-bottom: none; }
  .tool-btn:hover { color: var(--text); background: var(--surface-3); }
  .tool-btn.active { color: var(--accent-2); background: color-mix(in oklab, var(--accent-2) 12%, transparent); }
  .zoom-level {
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    padding: 5px 0;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border);
  }

  /* legend */
  .legend {
    position: absolute; bottom: 16px; left: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    min-width: 180px;
  }
  [data-theme="light"] .legend { box-shadow: 0 2px 10px rgba(10,20,48,0.06); }
  .legend h4 {
    margin: 0 0 8px;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 600;
  }
  .legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--text-dim); }
  .legend-pin {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--surface);
    flex-shrink: 0;
  }
  /* Separador + 2 filas de "pin" hueco con borde dashed: mismo lenguaje del
     principio rector (sólido=capturado, discontinuo=inferido). — Eduardo Luna · 2026 */
  .legend-sep { height: 1px; background: var(--border); margin: 6px 0; }
  .legend-pin.inferido { background: transparent !important; border: 1.5px dashed currentColor; }

  /* scale + coords */
  .map-foot {
    position: absolute; bottom: 16px; right: 16px;
    display: flex; gap: 10px; align-items: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--text-faint);
  }
  .scale-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    display: flex; align-items: center; gap: 8px;
  }
  .scale-bar .bar { width: 60px; height: 2px; background: var(--text-dim); position: relative; }
  .scale-bar .bar::before, .scale-bar .bar::after {
    content: ""; position: absolute; top: -3px; width: 1px; height: 8px; background: var(--text-dim);
  }
  .scale-bar .bar::before { left: 0; }
  .scale-bar .bar::after { right: 0; }

  /* vehicle pin */
  .pin {
    cursor: pointer;
    transition: transform 0.15s;
  }
  .pin:hover { transform: scale(1.15); transform-origin: center; }
  .pin-halo {
    transform-origin: center;
    animation: halo 2s ease-out infinite;
  }
  @keyframes halo {
    0% { r: 14; opacity: 0.6; }
    100% { r: 32; opacity: 0; }
  }

  /* selected route preview line */
  .route-line {
    fill: none;
    stroke: var(--accent-2);
    stroke-width: 2.5;
    stroke-dasharray: 6 4;
    animation: dash 1s linear infinite;
    filter: drop-shadow(0 0 6px var(--accent-2));
  }
  @keyframes dash {
    to { stroke-dashoffset: -10; }
  }

  /* tooltip */
  .map-tooltip {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 8px 10px;
    pointer-events: none;
    font-size: 11px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transform: translate(-50%, calc(-100% - 12px));
    white-space: nowrap;
    z-index: 5;
  }
  .map-tooltip .t-head { display: flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-weight: 600; color: var(--text); }
  .map-tooltip .t-row { color: var(--text-dim); margin-top: 3px; font-family: "JetBrains Mono", monospace; }
  .map-tooltip .t-row strong { color: var(--text); font-weight: 500; }

  /* ===== RIGHT PANEL ===== */
  aside.right {
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .v-detail { padding: 0; overflow-y: auto; flex: 1; }
  .v-hero {
    padding: 20px;
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2) 8%, var(--surface)) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .v-hero .row1 { display: flex; align-items: center; gap: 10px; }
  .v-hero .uid {
    font-family: "JetBrains Mono", monospace;
    font-size: 22px; font-weight: 600; color: var(--text);
    letter-spacing: -0.02em;
  }
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .pill.live {
    background: color-mix(in oklab, var(--green) 18%, transparent);
    color: var(--green);
  }
  .pill.live .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: livepulse 1.6s ease-out infinite; }

  .v-hero .plate {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-dim);
  }
  .v-hero .driver-row {
    margin-top: 16px;
    display: flex; align-items: center; gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .driver-pic {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mustard), var(--amber));
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; color: var(--ink);
  }
  .driver-name { font-weight: 600; font-size: 13px; color: var(--text); }
  .driver-meta { font-size: 11px; color: var(--text-faint); margin-top: 1px; font-family: "JetBrains Mono", monospace; }
  .call-btn {
    margin-left: auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent-2); color: #fff; /* ícono blanco sobre rojo — Eduardo Luna · 2026 */
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer;
    transition: transform 0.15s;
  }
  .call-btn:hover { transform: scale(1.08); }

  .metric-grid {
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .metric {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .metric .lbl { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
  .metric .num { font-family: "JetBrains Mono", monospace; font-size: 20px; font-weight: 600; margin-top: 4px; color: var(--text); line-height: 1; }
  .metric .num small { font-size: 11px; color: var(--text-faint); font-weight: 400; margin-left: 2px; }
  .metric .sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
  .gauge {
    margin-top: 6px;
    height: 4px;
    background: var(--surface);
    border-radius: 2px;
    overflow: hidden;
  }
  .gauge .fill { height: 100%; background: var(--accent); border-radius: 2px; }
  .gauge .fill.cyan { background: var(--accent-2); }
  .gauge .fill.warn { background: var(--amber); }

  .section-h {
    padding: 14px 20px 8px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    display: flex; align-items: center; justify-content: space-between;
  }
  .telemetry { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 0; }
  .tel-row {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 12px;
  }
  .tel-row:last-child { border-bottom: none; }
  .tel-row .k { color: var(--text-faint); }
  .tel-row .v { color: var(--text); font-family: "JetBrains Mono", monospace; }

  .timeline { padding: 0 20px 20px; }
  .tl {
    position: relative;
    padding-left: 20px;
  }
  .tl::before {
    content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 1px; background: var(--border-strong);
  }
  .tl-item { position: relative; padding: 6px 0 14px; }
  .tl-item::before {
    content: ""; position: absolute; left: -20px; top: 9px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--surface-3); border: 2px solid var(--border-strong);
  }
  .tl-item.now::before { background: var(--accent-2); border-color: var(--accent-2); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-2) 18%, transparent); }
  .tl-item.done::before { background: var(--green); border-color: var(--green); }
  .tl-item .lbl { font-size: 12px; color: var(--text); font-weight: 500; }
  .tl-item .when { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-faint); margin-top: 1px; }

  .actions {
    padding: 14px 20px 20px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .btn {
    padding: 10px;
    border-radius: 8px;
    font: inherit; font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    background: var(--surface-3);
    color: var(--text);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.15s;
  }
  .btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
  .btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff; /* texto blanco sobre rojo — Eduardo Luna · 2026 */
    font-weight: 600;
  }
  .btn.primary:hover { background: var(--mustard-soft); color: #fff; border-color: var(--mustard-soft); }
  .btn.full { grid-column: 1 / -1; }
  .btn.active {
    background: color-mix(in oklab, var(--accent-2) 20%, var(--surface-3));
    border-color: var(--accent-2);
    color: var(--accent-2);
    font-weight: 600;
  }
  .btn:disabled { opacity: 0.6; cursor: default; }

  /* selector de rango del trazo de ruta */
  .route-range {
    padding: 0 20px 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .route-range .rr-lbl {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 600;
  }
  .route-range .rr-chips { display: flex; gap: 6px; }
  .route-range .seg { padding: 5px 10px; font-size: 11px; }
  .route-info {
    margin: 0 20px 16px;
    font-size: 10px;
    color: var(--accent-2);
    background: color-mix(in oklab, var(--accent-2) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent-2) 30%, var(--border));
    border-radius: 6px;
    padding: 6px 10px;
  }
  .route-info.empty { color: var(--text-faint); background: var(--surface-3); border-color: var(--border); }

  /* unibot easter egg */
  .unibot-fab {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s;
  }
  [data-theme="light"] .unibot-fab { box-shadow: 0 2px 10px rgba(10,20,48,0.06); }
  .unibot-fab:hover { transform: translateX(-50%) translateY(-2px); border-color: var(--accent-2); }
  .unibot-fab img { width: 32px; height: 32px; }
  .unibot-fab .txt { font-size: 12px; }
  .unibot-fab .txt strong { color: var(--text); }
  .unibot-fab .txt small { color: var(--text-faint); display: block; font-size: 10px; }

  /* alert banner */
  .alert-banner {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--amber);
    border-radius: 8px;
    padding: 10px 14px 10px 12px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.2);
    font-size: 12px;
    color: var(--text);
    max-width: 480px;
  }
  .alert-banner .a-ico { color: var(--amber); }
  .alert-banner strong { color: var(--text); }
  .alert-banner .dim { color: var(--text-faint); }
  .alert-close { margin-left: 6px; color: var(--text-faint); cursor: pointer; }
  .alert-close:hover { color: var(--text); }

  /* scroll */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

  /* hide scrollbar default */
  .groups { scrollbar-gutter: stable; }


/* ===== Leaflet integration ===== */
#leaflet-map { width: 100%; height: 100%; }
.leaflet-container { background: var(--bg); font-family: inherit; }
[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.6) invert(1) contrast(0.85) hue-rotate(200deg) saturate(0.4) brightness(0.85); }
.leaflet-control-attribution { background: var(--surface) !important; color: var(--text-faint) !important; font-size: 9px !important; border: 1px solid var(--border); border-radius: 4px; }
.leaflet-control-attribution a { color: var(--text-dim) !important; }
/* --pin-size lo inyecta map.jsx desde el slider "Tamaño de iconos" del panel
   izquierdo; anillo, halo y etiqueta se derivan de él. — Eduardo Luna · 2026 */
.unigo-pin {
  width: var(--pin-size, 56px); height: var(--pin-size, 56px);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s;
}
.unigo-pin:hover { transform: scale(1.15); z-index: 1000; }
.unigo-pin .truck-img {
  width: var(--pin-size, 56px); height: var(--pin-size, 56px);
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
  transition: transform 0.6s ease-out;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.unigo-pin.offline .truck-img { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)) grayscale(0.85) brightness(0.7); }
.unigo-pin.idle .truck-img { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)) saturate(0.8); }
.unigo-pin .status-ring {
  position: absolute; inset: calc(var(--pin-size, 56px) * 0.0715);
  border-radius: 50%;
  border: 2px solid var(--green);
  background: color-mix(in oklab, var(--green) 10%, transparent);
  z-index: 1;
}
.unigo-pin.moving .status-ring { border-color: var(--green); background: color-mix(in oklab, var(--green) 14%, transparent); }
.unigo-pin.idle .status-ring { border-color: var(--amber); background: color-mix(in oklab, var(--amber) 12%, transparent); }
.unigo-pin.offline .status-ring { border-color: var(--red); background: color-mix(in oklab, var(--red) 12%, transparent); }
.unigo-pin.selected .status-ring {
  border-color: var(--accent-2);
  border-width: 3px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-2) 35%, transparent);
}
.unigo-pin .label {
  position: absolute;
  top: var(--pin-size, 56px); left: 50%; transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: "JetBrains Mono", monospace;
  /* proporcional al pin, pero acotado para que siga siendo legible y no tape
     el mapa cuando el icono es grande. — Eduardo Luna · 2026 */
  font-size: clamp(9px, calc(var(--pin-size, 56px) * 0.18), 15px);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.unigo-halo {
  position: absolute; inset: calc(var(--pin-size, 56px) * -0.036);
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: halo 2s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}
.unigo-pin.moving .unigo-halo { color: var(--green); }
.unigo-pin.idle .unigo-halo, .unigo-pin.offline .unigo-halo { display: none; }
/* Badge NE del pin: estado inferido (satélite cian) o aviso de salida
   fantasma (fantasma ámbar). Una unidad nunca es ambos a la vez (uno exige
   salida capturada, el otro exige que no la haya). Escala con --pin-size y se
   satura en 26px para no tapar el mapa con iconos grandes. — Eduardo Luna · 2026 */
.unigo-pin-badge {
  position: absolute;
  top:   calc(var(--pin-size, 56px) * -0.05);
  right: calc(var(--pin-size, 56px) * -0.05);
  width:  clamp(16px, calc(var(--pin-size, 56px) * 0.34), 26px);
  height: clamp(16px, calc(var(--pin-size, 56px) * 0.34), 26px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  z-index: 4; pointer-events: none;
}
.unigo-pin-badge.gps      { border: 1.5px dashed var(--gps);   color: var(--gps); }
.unigo-pin-badge.fantasma { border: 1.5px dashed var(--amber); color: var(--amber); }
.unigo-pin-badge svg { width: 62%; height: 62%; }
@keyframes halo {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}

.empty-detail {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
.empty-detail strong { display: block; color: var(--text-dim); margin-bottom: 6px; font-size: 14px; }
.spinner-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  z-index: 5;
  font-size: 12px; color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
}

/* ===== LAYOUT sin panel derecho ===== */
.app.no-right {
  grid-template-columns: 320px 1fr;
}
.app.no-right main.map { grid-column: 2 / -1; }

/* ===== Boot screen ===== */
.boot-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text-dim);
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  letter-spacing: 0.15em; text-transform: uppercase;
}

/* ===== LOGIN SCREEN ===== */
.login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1100px 600px at 85% -10%, #ffe6e6 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 110%, #fde7ea 0%, transparent 50%),
    var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}
.login-card {
  width: 360px;
  padding: 36px 32px 30px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02);
  display: flex; flex-direction: column; gap: 14px;
  backdrop-filter: blur(12px);
}
.login-brand {
  font-size: 38px; font-weight: 800; letter-spacing: -0.02em; text-align: center;
  color: var(--text);
}
.login-brand .accent { color: #cc2129; }
.login-brand .bang { color: #cc2129; margin-left: 2px; }
.login-tag {
  text-align: center; color: var(--text-faint);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 14px;
}
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.login-card input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.login-card input:focus { border-color: #cc2129; }
.login-card button[type="submit"] {
  margin-top: 6px;
  background: linear-gradient(135deg, #cc2129, #a81b22);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.05s, filter 0.15s;
}
.login-card button[type="submit"]:hover:not(:disabled) { filter: brightness(1.1); }
.login-card button[type="submit"]:active { transform: translateY(1px); }
.login-card button[type="submit"]:disabled { opacity: 0.6; cursor: progress; }
.login-err {
  background: color-mix(in oklab, var(--red) 18%, transparent);
  color: var(--red);
  padding: 8px 10px; border-radius: 8px; font-size: 12px;
}

/* ===== USER CHIP en header ===== */
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
}
.user-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e11d2a, #ff5d52);
  color: #fff; font-weight: 700; font-size: 12px;
  font-family: "JetBrains Mono", monospace;
  flex-shrink: 0;
}
.user-chip .user-meta { display: flex; flex-direction: column; line-height: 1.1; }
.user-chip .user-name { font-size: 12px; color: var(--text); font-weight: 600; }
.user-chip .user-role { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.user-chip .logout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 10px; border-radius: 999px;
  font-size: 11px; cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.user-chip .logout-btn:hover { color: var(--red); border-color: var(--red); }

/* ===== Panel CP + radio (búsqueda por código postal) ===== */
.cp-panel {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px 6px 34px;
  height: 40px;
  transition: border-color 0.15s;
}
.cp-panel.active { border-color: var(--accent-2); }
.cp-panel .s-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.cp-panel.active .s-icon { color: var(--accent-2); }
.cp-input {
  width: 64px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  outline: none;
  letter-spacing: 0.08em;
}
.cp-input::placeholder { color: var(--text-faint); letter-spacing: 0; }
.cp-radius {
  display: flex; align-items: center; gap: 8px;
  border-left: 1px solid var(--border);
  padding-left: 10px;
}
.cp-radius input[type="range"] {
  width: 100px;
  accent-color: var(--accent-2);
  cursor: pointer;
}
.cp-radius input[type="range"]:disabled { cursor: not-allowed; opacity: 0.5; }
.cp-radius-val { font-size: 11px; color: var(--text-dim); min-width: 44px; }
.cp-clear {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
}
.cp-clear:hover { color: var(--red); border-color: var(--red); }
.cp-hint {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  z-index: 40;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.cp-hint strong { color: var(--accent-2); }

.unigo-cp-marker { background: transparent; border: none; }
.unigo-cp-pin {
  background: #cc2129;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(204,33,41,0.45);
  text-align: center;
  letter-spacing: 0.05em;
}

/* ===== Búsqueda por coordenadas (sidebar) ===== */
.coord-row {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px 6px 32px;
  height: 38px;
  margin-top: 6px;
  transition: border-color 0.15s;
}
.coord-row:focus-within { border-color: #e879f9; }
.coord-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint);
  display: inline-flex;
}
.coord-row:focus-within .coord-icon { color: #e879f9; }
.coord-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12.5px;
  outline: none;
  letter-spacing: 0.02em;
  min-width: 0;
}
.coord-input::placeholder { color: var(--text-faint); }
.coord-clear {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
}
.coord-clear:hover { color: #e879f9; border-color: #e879f9; }
.coord-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.coord-hint.err { color: var(--red); }
.coord-result {
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid #e879f9;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(232,121,249,0.15);
}
.coord-result:hover { background: rgba(232,121,249,0.08); }
.coord-result:active { transform: translateY(1px); }
.coord-result-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.coord-result-name {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.coord-result-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-dim);
}
.coord-result-meta .coord-dist { color: #e879f9; font-weight: 700; }
.coord-result-meta .dot-sep { color: var(--text-faint); }

/* Marker magenta del punto de coordenadas en el mapa */
.unigo-coord-marker { background: transparent; border: none; }
.unigo-coord-pin {
  width: 30px; height: 30px;
  background: #e879f9;
  color: #4a044e;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(232,121,249,0.55);
  display: flex; align-items: center; justify-content: center;
}

/* ===== Cabecera estilo Control de Flota: barra roja sólida =====
   — Eduardo Luna · 2026. Va al final para sobreescribir los controles
   del header (search/cp/live-pill/user) y dejarlos legibles sobre rojo. */
header.top {
  background: var(--accent);
  border-bottom: none;
  color: #fff;
  box-shadow: 0 2px 12px rgba(204, 33, 41, 0.28);
}
header.top::after {                 /* barra de degradado de 4px bajo el header */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px;
  background: linear-gradient(90deg, #cc2129 0%, #f0455a 50%, #cc2129 100%);
}
header.top .brand .logo-img { filter: brightness(0) invert(1); }   /* logo blanco */
header.top .brand .pipe { background: rgba(255,255,255,0.35); }
header.top .brand .product,
header.top .brand .product .accent,
header.top .brand .product .bang { color: #fff; }
header.top .brand .tag {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.14);
}
header.top .search input {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}
header.top .search input::placeholder { color: rgba(255,255,255,0.78); }
header.top .search input:focus { border-color: rgba(255,255,255,0.7); }
header.top .search svg.s-icon { color: rgba(255,255,255,0.85); }
header.top .search .kbd { color: #fff; border-color: rgba(255,255,255,0.4); }
header.top .cp-panel {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
}
header.top .cp-panel .s-icon { color: rgba(255,255,255,0.85); }
header.top .cp-input { color: #fff; }
header.top .cp-input::placeholder { color: rgba(255,255,255,0.7); }
header.top .cp-radius-val { color: rgba(255,255,255,0.9); }
header.top .live-pill {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}
header.top .live-pill strong { color: #fff; }
header.top .icon-btn,
header.top .theme-toggle {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}
header.top .icon-btn:hover { color: #fff; border-color: rgba(255,255,255,0.55); }
header.top .user-chip {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
}
header.top .user-chip .avatar { background: rgba(255,255,255,0.24); color: #fff; }
header.top .user-chip .user-name,
header.top .user-chip .user-role { color: #fff; }
header.top .user-chip .logout-btn {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
header.top .user-chip .logout-btn:hover { background: rgba(255,255,255,0.12); }

/* ===== Pestañas Mapa / Pedidos y vista Pedidos — Eduardo Luna · 2026 ===== */
.tabs { display: flex; gap: 6px; }
/* Los tabs viven en la barra roja → estilo claro sobre rojo (independiente del tema). */
header.top .tabs .seg {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  padding: 8px 16px;
  font-size: 12px;
  width: auto;
}
header.top .tabs .seg:hover { background: rgba(255,255,255,0.24); color: #fff; }
header.top .tabs .seg.active {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
  font-weight: 700;
}

/* En modo pedidos el grid colapsa a una sola columna bajo el header. */
.app.vista-pedidos { grid-template-columns: 1fr; }
.pedidos-view {
  grid-column: 1 / -1;
  overflow: auto;
  padding: 18px 24px;
  background: var(--bg);
}
.ped-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.ped-head h2 { margin: 0; font-size: 20px; color: var(--text); }
.ped-count { color: var(--text-faint); font-size: 13px; }
.ped-msg { font-size: 13px; font-weight: 600; }
.ped-msg.ok  { color: var(--green); }
.ped-msg.err { color: var(--red); }

.ped-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px;
}
.ped-filters .ped-date {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint);
}
.ped-filters .ped-date input {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.ped-search { display: inline-flex; gap: 6px; margin-left: auto; }
.ped-search input {
  min-width: 240px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 13px;
}
.ped-search .seg { width: auto; }

.ped-empty { color: var(--text-faint); padding: 40px 0; text-align: center; font-size: 14px; }

.ped-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,0.06); }
.ped-table th {
  text-align: left; color: var(--text-faint); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  border-bottom: 1px solid var(--border); padding: 10px 12px; background: var(--surface-3);
}
.ped-table td { border-bottom: 1px solid var(--border); padding: 9px 12px; color: var(--text); vertical-align: middle; }
.ped-table tr:last-child td { border-bottom: none; }
.ped-table tbody tr:hover { background: var(--surface-3); }
.ped-table .ped-lineas { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.ped-table .ped-by { color: var(--text-faint); font-size: 11px; }
.ped-table .btn.primary { padding: 5px 14px; font-size: 12px; }

/* Badges de estatus */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-transform: capitalize;
  font-family: "JetBrains Mono", monospace;
}
.badge.borrador   { background: rgba(245,158,11,0.16);  color: #b45309; }
.badge.confirmado { background: rgba(52,211,153,0.18);  color: #047857; }
.badge.procesado  { background: rgba(99,102,241,0.16);  color: #4f46e5; }
.badge.cancelado  { background: rgba(248,113,113,0.18); color: #b91c1c; }

/* Subestado (checkpoint de flujo) — pill con punto, distinta del badge de estatus.
   recibido -> validado -> liquidado -> confirmado. — Eduardo Luna · 2026 */
.subtag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  font-family: "JetBrains Mono", monospace;
}
.subtag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sub-recibido   { background: rgba(100,116,139,0.16); color: #475569; }
.sub-validado   { background: rgba(59,130,246,0.16);  color: #1d4ed8; }
.sub-liquidado  { background: rgba(245,158,11,0.18);  color: #b45309; }
.sub-confirmado { background: rgba(52,211,153,0.18);  color: #047857; }
.sub-na         { background: rgba(100,116,139,0.12); color: #64748b; }

/* ---------- Marcadores de plantas (ícono isométrico Tomza) — Eduardo Luna · 2026 ---------- */
.planta-marker-wrap { background: transparent; border: none; }
.planta-marker { line-height: 0; transition: transform .12s ease; }
.planta-marker img {
  display: block;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.38));
  -webkit-user-drag: none; user-select: none;
}
.planta-marker:hover { transform: translateY(-2px) scale(1.06); }

/* ===========================================================================
   MONITOREO DE UNIDADES (pestaña integrada) — Eduardo Luna · 2026
   Dashboard de flota derivado del snapshot Samsara; tema rojo Control de Flota,
   consciente de claro/oscuro vía tokens.
   =========================================================================== */
.app.vista-monitoreo { grid-template-columns: 1fr; }
.monitoreo-view {
  grid-column: 1 / -1;
  overflow: auto;
  padding: 18px 24px 28px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 18px;
}

/* --- barra de control --- */
.mon-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mon-bar-l { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mon-title { display: flex; align-items: center; gap: 10px; }
.mon-title-h { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.mon-title-s { font-size: 11.5px; color: var(--text-faint); }
.mon-planta { display: inline-flex; align-items: center; gap: 8px; }
.mon-planta select {
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 500;
  outline: none; cursor: pointer; max-width: 260px;
}
.mon-planta select:focus { border-color: var(--accent); }
.mon-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mon-livepill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--green) 14%, transparent);
  color: #16A34A; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
[data-theme="dark"] .mon-livepill { color: #86EFAC; }
.mon-livepill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: livepulse 1.6s ease-out infinite; }
.mon-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.mon-btn:hover { border-color: var(--accent); color: var(--accent); }
.mon-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mon-btn.primary:hover { background: var(--mustard-soft); border-color: var(--mustard-soft); color: #fff; }
.mon-btn:disabled { opacity: 0.65; cursor: default; }

/* --- banner de informe congelado --- */
.mon-frozen {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(37,99,235,0.10); border: 1px solid rgba(37,99,235,0.30);
  color: var(--text);
}
.mon-frozen-txt { flex: 1; min-width: 0; font-size: 13px; }
.mon-frozen strong { font-weight: 700; }

/* --- banner agregado de salidas fantasma (calca .mon-frozen) --- */
.mon-fantasma {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 12px;
  background: color-mix(in oklab, #F59E0B 9%, var(--surface));
  border: 1px dashed color-mix(in oklab, #F59E0B 55%, var(--border));
  color: var(--text);
}
[data-theme="dark"] .mon-fantasma { background: color-mix(in oklab, #F59E0B 12%, var(--surface)); }
.mon-fantasma-txt { flex: 1; min-width: 0; font-size: 13px; }
.mon-fantasma-n   { font-size: 13px; font-weight: 700; color: #F59E0B; }

/* --- KPIs (6, con "En ruta (GPS)") --- */
/* 5 chips: "En ruta (GPS)" dejó de ser uno aparte y volvió al chip "En ruta"
   como sublínea de desglose (2026-08-05). — Eduardo Luna · 2026 */
.mon-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1180px) { .mon-kpis { grid-template-columns: repeat(3, 1fr); } }
/* Chip en 2 columnas: icono grande a la izquierda (sin círculo tintado) y
   columna label/valor/% a la derecha. — Eduardo Luna · 2026 */
.mon-kpi {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 14px 16px 18px; text-align: center;
  /* justify-content centra el grupo icono+texto junto (el body ya no se estira
     con flex:1, que dejaba un hueco entre ambos). — Eduardo Luna · 2026 */
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04);
  transition: box-shadow 0.15s, transform 0.15s;
}
.mon-kpi:hover { box-shadow: 0 8px 22px rgba(15,23,42,0.10); transform: translateY(-2px); }
.mon-kpi-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.mon-kpi-side { flex-shrink: 0; display: flex; align-items: center; justify-content: center; line-height: 0; }
.mon-kpi-body { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mon-kpi-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.mon-kpi-val { font-size: 34px; font-weight: 700; line-height: 1; }
.mon-kpi-pct { font-size: 12px; color: var(--text-faint); }
/* Sublínea del chip "En ruta": desglose capturadas / detectadas por GPS. Va
   dentro del chip, separada por una línea fina, para que se lea como detalle
   del mismo número y no como otro dato. — Eduardo Luna · 2026 */
.mon-kpi-sub {
  margin-top: 4px; padding-top: 5px;
  border-top: 1px solid var(--border);
  font-size: 10px; line-height: 1.2; color: var(--text-faint);
  white-space: nowrap;
}

/* --- cards + grids --- */
.mon-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mon-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.mon-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04);
}
.mon-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mon-card-head-l { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.mon-card-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(148,163,184,0.10); flex-shrink: 0; }
.mon-card-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.mon-card-sub { font-size: 11.5px; color: var(--text-faint); }

/* --- leyenda --- */
.mon-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mon-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); }
.mon-legend-dot { width: 9px; height: 9px; border-radius: 2px; }
/* Swatch rayado 45° del estado inferido (en_ruta_gps): la versión "de
   relleno" de la firma discontinua, a juego con el patrón SVG de la
   dona/barras. — Eduardo Luna · 2026 */
.mon-legend-dot.gps,
.mon-dona-sw.gps {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 6px) #0891B2;
}

/* --- dona --- */
.mon-dona { display: flex; align-items: center; gap: 16px; height: 290px; }
.mon-dona-chart { width: 48%; height: 100%; position: relative; }
.mon-dona-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.mon-dona-total { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.05; }
.mon-dona-cap { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.mon-dona-list { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mon-dona-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mon-dona-sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.mon-dona-name { flex: 1; color: var(--text); }
.mon-dona-num { font-weight: 600; color: var(--text); }
.mon-dona-p { width: 46px; text-align: right; color: var(--text-faint); font-size: 12px; }

/* --- resumen ejecutivo --- */
.mon-resumen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mon-resumen li { display: flex; align-items: flex-start; gap: 12px; }
.mon-resumen-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.mon-resumen p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); }

.mon-foot { font-size: 11px; color: var(--text-faint); text-align: center; padding-top: 2px; }

/* --- modal de informes --- */
.mon-modal-overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2,6,23,0.55); backdrop-filter: blur(2px); }
.mon-modal { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.mon-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.mon-modal-head-l { display: flex; align-items: center; gap: 10px; }
.mon-x { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mon-x:hover { color: var(--text); background: var(--surface-3); }
.mon-modal-filter { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.mon-modal-filter input[type="date"] { background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; padding: 6px 10px; }
.mon-modal-filter .seg { width: auto; padding: 6px 10px; }
.mon-modal-body { max-height: 380px; overflow-y: auto; padding: 10px 12px; }
.mon-modal-err { margin: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(220,38,38,0.10); color: #DC2626; font-size: 12.5px; }
.mon-modal-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 10px; color: var(--text-faint); font-size: 13px; text-align: center; }
.mon-informe-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--border); cursor: pointer; text-align: left; transition: all 0.12s; }
.mon-informe-row:hover { border-color: var(--accent); }
.mon-informe-row:disabled { opacity: 0.6; cursor: default; }
.mon-informe-ico { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mon-informe-meta { flex: 1; min-width: 0; }
.mon-informe-date { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.mon-informe-planta { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.mon-informe-go { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; }

/* --- toast --- */
.mon-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: 380px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--green);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25); font-size: 13px; font-weight: 500;
}

/* --- paneles por planta: unidades en taller + top autotanques --- */
.mon-list-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 10px; color: var(--text-faint); font-size: 13px; text-align: center; }
.mon-taller-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.mon-taller-list li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--border); }
.mon-taller-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mon-taller-meta { flex: 1; min-width: 0; }
.mon-taller-eco { font-size: 13px; font-weight: 600; color: var(--text); }
.mon-taller-plate { font-weight: 400; color: var(--text-faint); }
.mon-taller-motivo { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-taller-when { font-size: 10.5px; color: var(--text-faint); flex-shrink: 0; }
/* Aviso ámbar bajo el motivo: la unidad tiene salida abierta en Control de
   Flota y aun así cuenta en taller (el taller manda). — Eduardo Luna · 2026 */
.mon-taller-ruta {
  font-size: 11px; color: var(--amber); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Columna derecha de la tarjeta de taller: días parados (chip de semáforo,
   el mismo .ruta-chip del panel del mapa) con la fecha de entrada debajo.
   — Eduardo Luna · 2026 */
.mon-taller-dias {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0;
}
.mon-taller-dias .ruta-chip { font-size: 11px; padding: 1px 8px; }

.mon-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.mon-top-list li { display: flex; align-items: center; gap: 12px; }
.mon-top-rank { width: 22px; text-align: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.mon-top-body { flex: 1; min-width: 0; }
.mon-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mon-top-eco { font-size: 13px; font-weight: 600; color: var(--text); }
.mon-top-plate { font-weight: 400; color: var(--text-faint); }
.mon-top-n { font-size: 13px; font-weight: 700; }
.mon-top-track { margin-top: 5px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.mon-top-fill { height: 100%; border-radius: 999px; }

/* --- Reloj de barra: mini-tarjeta al estilo del dashboard (icono en círculo
       tintado + hora con números tabulares); sustituye al LCD 7 segmentos.
       Incluye flashazo al guardar informe. — Eduardo Luna · 2026 --- */
.mon-clock {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 7px 14px 7px 8px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04);
}
.mon-clock-ico {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.mon-clock-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.mon-clock-time {
  font-size: 19px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.mon-clock-date {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.mon-clock-burst {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 45%, #fff) 0%, transparent 70%);
  animation: monburst 500ms ease-out forwards;
}
@keyframes monburst { 0% { opacity: 0; transform: scale(0.5); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.mon-flash {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; background: #fff;
  animation: monflash 440ms ease-out forwards;
}
@keyframes monflash { 0% { opacity: 0; } 12% { opacity: 0.72; } 100% { opacity: 0; } }

/* ===== Campanita de apoyos (ApoyoBell) — Eduardo Luna · 2026 =====
   Badge amarillo + pulso cuando hay solicitudes de apoyo pendientes de
   operadores; popover con lista y chat. Vive en el header (rojo). */
.apoyo-wrap { position: relative; display: inline-flex; }
.apoyo-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #F59E0B; color: #1c1917; border: 2px solid var(--accent);
  font-size: 10px; font-weight: 700; line-height: 12px; text-align: center;
  box-sizing: content-box;
}
@keyframes apoyopulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
}
.apoyo-bell.has-pend { animation: apoyopulse 1.6s ease-out infinite; }
/* Sobre la barra roja el ámbar puro contrasta poco: icono en amarillo claro */
header.top .apoyo-bell.has-pend { color: #FFD34D; border-color: rgba(245, 158, 11, 0.9); }

.apoyo-pop {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 340px; max-height: 480px; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); z-index: 40; overflow: hidden;
}
.apoyo-pop-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.apoyo-pop-title { font-size: 13px; font-weight: 700; color: var(--text); }
.apoyo-back {
  width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer;
  background: var(--surface-3); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.apoyo-back:hover { color: var(--accent); }
.apoyo-chat-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.apoyo-pop-body { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.apoyo-empty { padding: 26px 10px; text-align: center; color: var(--text-faint); font-size: 12.5px; }
.apoyo-sep {
  margin: 8px 4px 2px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-faint);
}
.apoyo-item {
  display: flex; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: 10px;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text); font: inherit; transition: border-color 0.12s;
}
.apoyo-item:hover { border-color: var(--accent); }
.apoyo-item.reciente { opacity: 0.65; }
.apoyo-item-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.apoyo-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.apoyo-item-autor { font-size: 12.5px; font-weight: 700; }
.apoyo-item-badge {
  min-width: 16px; padding: 1px 5px; border-radius: 999px; text-align: center;
  background: #F59E0B; color: #1c1917; font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.apoyo-item-txt {
  font-size: 12px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apoyo-meta { font-size: 10px; color: var(--text-faint); font-family: "JetBrains Mono", ui-monospace, monospace; }

.apoyo-chat-body {
  overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 7px;
  min-height: 150px; max-height: 320px;
}
.apoyo-msg {
  max-width: 78%; border-radius: 12px; padding: 7px 10px;
  font-size: 12.5px; line-height: 1.35; white-space: pre-wrap; word-break: break-word;
  display: flex; flex-direction: column; gap: 2px;
}
.apoyo-msg.op   { align-self: flex-start; background: var(--surface-3); border: 1px solid var(--border); }
.apoyo-msg.op.pend { border-color: #F59E0B; }
.apoyo-msg.otra { align-self: flex-start; background: var(--surface-3); border: 1px dashed var(--border); }
.apoyo-msg.mia  { align-self: flex-end; background: var(--accent); color: #fff; }
.apoyo-msg.mia .apoyo-meta { color: rgba(255, 255, 255, 0.75); }
.apoyo-msg.resp {
  align-self: flex-end; background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.5);
}
.apoyo-msg-autor { font-size: 10px; font-weight: 700; color: var(--text-faint); }
.apoyo-msg.mia .apoyo-msg-autor { color: rgba(255, 255, 255, 0.8); }
.apoyo-err {
  margin: 0 10px 6px; padding: 6px 10px; border-radius: 8px;
  background: rgba(220, 38, 38, 0.10); color: #DC2626; font-size: 12px;
}
.apoyo-input {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px; border-top: 1px solid var(--border);
}
.apoyo-input textarea {
  flex: 1; resize: none; font: inherit; font-size: 12.5px; color: var(--text);
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; outline: none;
}
.apoyo-input textarea:focus { border-color: var(--accent); }
.apoyo-input textarea:disabled { opacity: 0.6; }
.apoyo-send {
  width: 34px; height: 34px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.apoyo-send:disabled { opacity: 0.55; cursor: default; }

/* Link a Google Maps con las coordenadas GPS del mensaje */
.apoyo-gps {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font-size: 11px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.apoyo-gps:hover { text-decoration: underline; }
.apoyo-msg.mia .apoyo-gps { color: #fff; text-decoration: underline; }

/* Botón "Enviar apoyo" + menú de compartir — Eduardo Luna · 2026 */
.apoyo-share { margin-left: auto; position: relative; flex-shrink: 0; }
.apoyo-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 700;
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.14); color: #B45309;
}
[data-theme="dark"] .apoyo-share-btn { color: #FCD34D; }
.apoyo-share-btn:hover { border-color: #F59E0B; }
.apoyo-share-menu {
  position: absolute; right: 0; top: calc(100% + 6px); width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); z-index: 5;
  display: flex; flex-direction: column; overflow: hidden;
}
.apoyo-share-prev {
  padding: 8px 10px; font-size: 10.5px; line-height: 1.4;
  color: var(--text-faint); border-bottom: 1px solid var(--border);
  word-break: break-word;
}
.apoyo-share-item {
  text-align: left; padding: 9px 12px; cursor: pointer;
  background: none; border: none; color: var(--text); font: inherit; font-size: 12.5px;
}
.apoyo-share-item + .apoyo-share-item { border-top: 1px solid var(--border); }
.apoyo-share-item:hover { background: var(--surface-3); color: var(--accent); }

/* ===== Informe en PDF: modal de vista previa (Monitoreo) — Eduardo Luna · 2026 =====
   La HOJA del PDF trae sus estilos incrustados en monitoreo.jsx (siempre clara);
   aquí solo vive el modal que la muestra y ofrece descargarla. */
.mon-pdf-modal { max-width: 920px; display: flex; flex-direction: column; }
.mon-pdf-body { padding: 12px 14px 0; }
.mon-pdf-frame {
  width: 100%; height: 62vh; min-height: 380px; display: block;
  border: 1px solid var(--border); border-radius: 10px;
  background: #525659;   /* gris del visor PDF: sin flashazo blanco al cargar */
}
.mon-pdf-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 14px 14px; }
.mon-pdf-foot .mon-btn { text-decoration: none; }

/* ===== Tamaño de iconos del mapa (slider del panel izquierdo) =============
   Solo la UI del control; el pin ya escala solo con --pin-size. — Eduardo Luna · 2026 */
.icon-size-row { display: flex; align-items: center; gap: 9px; }
.icon-size-row input[type="range"] {
  flex: 1; min-width: 0;
  accent-color: var(--accent-2);
  cursor: pointer;
}
.icon-size-row img {
  object-fit: contain;
  opacity: 0.65;
  flex: none;
  pointer-events: none;
}
.icon-size-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 7px; font-size: 10.5px; color: var(--text-faint);
}
.icon-size-reset {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 10.5px; color: var(--text-dim);
  text-decoration: underline dotted;
}
.icon-size-reset:hover { color: var(--accent); }

/* ===== Tiempo en ruta (panel de la unidad) ================================
   Cronómetro salida → ahora (unidad en ruta) o salida → llegada (último viaje
   cerrado en Control de Flota). — Eduardo Luna · 2026 */
.ruta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ruta-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ruta-chip.live .dot { animation: rutapulse 1.8s ease-in-out infinite; }
.ruta-chip.ok {
  color: var(--green);
  background: color-mix(in oklab, var(--green) 14%, transparent);
  border-color: color-mix(in oklab, var(--green) 35%, transparent);
}
.ruta-chip.warn {
  color: var(--amber);
  background: color-mix(in oklab, var(--amber) 16%, transparent);
  border-color: color-mix(in oklab, var(--amber) 38%, transparent);
}
.ruta-chip.bad {
  color: var(--red);
  background: color-mix(in oklab, var(--red) 15%, transparent);
  border-color: color-mix(in oklab, var(--red) 38%, transparent);
}
.ruta-chip.done {
  color: var(--text-dim);
  background: var(--surface-3);
  border-color: var(--border);
}
@keyframes rutapulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.ruta-nota {
  margin-top: 6px;
  font-size: 10.5px; line-height: 1.35;
  color: var(--red);
  display: flex; align-items: flex-start; gap: 5px;
}

/* ===== Notas del panel derecho: en_ruta_gps y salida fantasma ============
   Mismo lenguaje que .ruta-nota pero tintadas y con borde DASHED (dictamen
   del GPS, no un hecho capturado). — Eduardo Luna · 2026 */
.gps-nota, .fantasma-nota {
  margin-top: 6px; padding: 7px 9px; border-radius: 8px;
  font-size: 10.5px; line-height: 1.35; color: var(--text-dim);
  display: flex; gap: 6px; align-items: flex-start;
}
.gps-nota {
  border: 1px dashed color-mix(in oklab, var(--gps) 55%, transparent);
  background: color-mix(in oklab, var(--gps) 8%, transparent);
}
.gps-nota .ico { color: var(--gps); flex: none; margin-top: 1px; }
.fantasma-nota {
  border: 1px dashed color-mix(in oklab, var(--amber) 55%, transparent);
  background: color-mix(in oklab, var(--amber) 8%, transparent);
}
.fantasma-nota .ico { color: var(--amber); flex: none; margin-top: 1px; }

/* NO existe .taller-nota: la caja explicativa del panel para "salió a ruta aún
   marcada en taller" se quitó a petición de Eduardo (2026-08-07). El aviso vive
   en el encabezado de la sección ("Salida abierta · en taller" + badge "no en
   ruta"), en .mon-taller-ruta (tarjeta de Monitoreo) y en el informe PDF.
   — Eduardo Luna · 2026 */

/* ===== Tiempo en ruta (tarjeta del Monitoreo) — Eduardo Luna · 2026 =====
   Tarjeta de ancho completo debajo de mon-grid3: reusa .ruta-chip/rutaClase
   tal cual (misma píldora que el panel del mapa). Escala de barra FIJA a 24h
   (RUTA_ZOMBI_H) para que los umbrales de 8h/12h vivan siempre en el mismo
   lugar del riel. */
.mon-ruta-res  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mon-ruta-n    { font-size: 14px; font-weight: 700; color: #16A34A; } /* STATUS_COLORS.en_ruta, igual que el contador de TallerCard */
.mon-ruta-mini {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mon-ruta-mini.warn  { color: var(--amber); background: color-mix(in oklab, var(--amber) 16%, transparent); }
.mon-ruta-mini.bad   { color: var(--red);   background: color-mix(in oklab, var(--red) 15%, transparent); }
.mon-ruta-mini.zombi { color: #fff;         background: var(--red); }
/* Mini-pill "en planta" (salida fantasma): dashed ámbar, contraste deliberado
   con el zombi rojo sólido — el zombi es un hecho capturado-vencido, el
   fantasma es un dictamen del GPS. — Eduardo Luna · 2026 */
.mon-ruta-mini.fantasma {
  color: var(--amber); background: transparent;
  border: 1px dashed color-mix(in oklab, var(--amber) 60%, transparent);
}
/* Mini-pill "por GPS": cuántas de las que andan fuera las dedujo la geocerca.
   Discontinuo cian = la misma convención de "inferido" que el resto de la app.
   — Eduardo Luna · 2026 */
.mon-ruta-mini.gps {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--gps); background: transparent;
  border: 1px dashed color-mix(in oklab, var(--gps) 55%, transparent);
}

.mon-ruta-list {
  list-style: none; margin: 0; padding: 0 2px 0 0;
  display: flex; flex-direction: column; gap: 9px;
  max-height: 352px; overflow-y: auto;   /* ~8 renglones visibles; patrón de .mon-taller-list */
}
.mon-ruta-item { display: flex; align-items: flex-start; gap: 10px; }
.mon-ruta-item.zombi {
  background: color-mix(in oklab, var(--red) 7%, transparent);
  border-radius: 10px; padding: 6px 8px; margin-right: 2px;
}
.mon-ruta-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.mon-ruta-dot.ok   { background: var(--green); }
.mon-ruta-dot.warn { background: var(--amber); }
.mon-ruta-dot.bad  { background: var(--red); }

.mon-ruta-body { flex: 1; min-width: 0; }
.mon-ruta-row  { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mon-ruta-eco   { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.mon-ruta-plate { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.mon-ruta-op    { font-size: 12px; color: var(--text-dim); white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.mon-ruta-dest  { flex: 1; min-width: 0; font-size: 12px; color: var(--text-faint);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-ruta-ztag  {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #fff; background: #991B1B; border-radius: 999px; padding: 2px 7px;
  white-space: nowrap; flex-shrink: 0;
}
/* Tag "EN PLANTA" por renglón (salida fantasma): dashed ámbar outline, en vez
   del rojo sólido de SIN LLEGADA — ambos pueden coexistir, orden fijo
   duración -> SIN LLEGADA -> EN PLANTA. — Eduardo Luna · 2026 */
.mon-ruta-ftag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--amber); background: color-mix(in oklab, var(--amber) 10%, transparent);
  border: 1px dashed color-mix(in oklab, var(--amber) 60%, transparent);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; flex-shrink: 0;
}
.ruta-chip.zombi {          /* variante nueva del chip existente del panel del mapa */
  color: #fff; background: var(--red); border-color: var(--red);
}
/* Renglón de una unidad que solo detectó el GPS: cian y DISCONTINUO. No lleva
   punto de semáforo ni cronómetro —nadie capturó su salida—, así que su chip
   muestra la distancia a la que se separó de su planta. — Eduardo Luna · 2026 */
.ruta-chip.gps {
  color: var(--gps);
  background: color-mix(in oklab, var(--gps) 12%, transparent);
  border: 1px dashed color-mix(in oklab, var(--gps) 45%, transparent);
}
.mon-ruta-item.gps {
  border-left: 2px dashed color-mix(in oklab, var(--gps) 45%, transparent);
  padding-left: 6px; margin-left: -8px;
}
.mon-ruta-op.gpsnote { color: var(--gps); font-style: italic; max-width: 200px; }
.mon-ruta-gtag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gps); background: color-mix(in oklab, var(--gps) 10%, transparent);
  border: 1px dashed color-mix(in oklab, var(--gps) 55%, transparent);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; flex-shrink: 0;
}

.mon-ruta-track {
  position: relative; margin-top: 5px; height: 6px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;   /* mismo riel de .mon-top-track */
}
.mon-ruta-fill  { height: 100%; border-radius: 999px; min-width: 2%; }
.mon-ruta-fill.ok   { background: var(--green); }
.mon-ruta-fill.warn { background: var(--amber); }
.mon-ruta-fill.bad  { background: var(--red); }
.mon-ruta-fill.zombi {
  background: repeating-linear-gradient(135deg,
    var(--red) 0 5px, color-mix(in oklab, var(--red) 45%, transparent) 5px 10px);
}
/* Riel de DISTANCIA (unidades por GPS): rayado cian, para que no se confunda
   con un riel de tiempo aunque comparta forma. — Eduardo Luna · 2026 */
.mon-ruta-fill.gps {
  background: repeating-linear-gradient(45deg,
    var(--gps) 0 5px, color-mix(in oklab, var(--gps) 40%, transparent) 5px 10px);
}
.mon-ruta-tick  {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--border-strong); pointer-events: none;
}

/* ===== Incidencias críticas (aviso de alerta) — Eduardo Luna · 2026 =====
   Tarjeta de ancho completo debajo de "Tiempo en ruta": franja/borde/fondo
   tintados de rojo (variante .ok vira TODO a verde cuando no hay incidencias
   en las últimas 24h — celebra, no deja un hueco). */
.mon-alerta {
  border-color: color-mix(in oklab, var(--red) 40%, var(--border));
  border-left: 4px solid var(--red);
  background: color-mix(in oklab, var(--red) 5%, var(--surface));
}
[data-theme="dark"] .mon-alerta { background: color-mix(in oklab, var(--red) 9%, var(--surface)); }
.mon-alerta .mon-card-ico { background: color-mix(in oklab, var(--red) 14%, transparent); }

/* variante BUENA NOTICIA (sin incidencias) */
.mon-alerta.ok {
  border-color: color-mix(in oklab, var(--green) 35%, var(--border));
  border-left-color: var(--green);
  background: color-mix(in oklab, var(--green) 5%, var(--surface));
}
[data-theme="dark"] .mon-alerta.ok { background: color-mix(in oklab, var(--green) 8%, var(--surface)); }
.mon-alerta.ok .mon-card-ico { background: color-mix(in oklab, var(--green) 14%, transparent); }

.mon-alerta-badge {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  color: #fff; background: var(--red);
  font-variant-numeric: tabular-nums;
}
.mon-alerta-badge.pulsa { animation: alertapulse 1.6s ease-out infinite; }
@keyframes alertapulse {          /* gemelo rojo de apoyopulse */
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--red) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
.mon-alerta-badge.aten, .mon-alerta-badge.ok {
  color: var(--green); background: color-mix(in oklab, var(--green) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--green) 45%, transparent);
}

.mon-alerta-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 300px; overflow-y: auto;
}
.mon-alerta-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface);                     /* contrasta sobre el fondo tintado */
  border: 1px solid color-mix(in oklab, var(--red) 25%, var(--border));
}
.mon-alerta-item.aten { border-color: var(--border); opacity: 0.78; }
.mon-alerta-ico {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--red) 12%, transparent);
}
.mon-alerta-item.aten .mon-alerta-ico { background: color-mix(in oklab, var(--green) 12%, transparent); }
.mon-alerta-meta  { flex: 1; min-width: 0; }
.mon-alerta-top   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mon-alerta-eco   { font-size: 13px; font-weight: 600; color: var(--text); }
.mon-alerta-plate { font-weight: 400; color: var(--text-faint); }
.mon-alerta-estado {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.mon-alerta-estado.pend { color: #fff; background: var(--red); }
.mon-alerta-estado.aten {
  color: var(--green); background: color-mix(in oklab, var(--green) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--green) 45%, transparent);
}
.mon-alerta-txt {
  margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.mon-alerta-pie   { margin-top: 4px; font-size: 10.5px; color: var(--text-faint); }
.mon-alerta-vacia { padding: 34px 10px; }

/* ---- Selectores nativos de fecha/hora ------------------------------------
   Los inputs date/datetime-local dibujan su icono de calendario y su
   desplegable con el esquema del sistema, no con el del sitio: en el tema
   oscuro salían negros sobre negro. Se declara SOLO en estos inputs (no en
   :root) para no alterar scrollbars ni el resto de widgets nativos.
   Cubre la fecha de entrada al taller y los filtros de la pestaña Pedidos.
   — Eduardo Luna · 2026 */
input[type="date"],
input[type="datetime-local"] { color-scheme: light; }
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; }