/* Prodie GPS — estilos de la aplicación
   Extraído de gps.html para mantener una estructura de producción limpia. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
html { background-color:#11151a!important; color-scheme:dark; overscroll-behavior:none; }
html, body { width:100%; height:100%; min-height:100dvh; overflow:hidden; background:#11151a!important; font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; }
.leaflet-container { background:#11151a!important; }
.leaflet-tile-pane { background:#11151a; }

/* ── BIENVENIDA / CARGA ── */
#fleet-loading {
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background:#0a0a0a; color:rgba(255,255,255,.88);
  transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
#fleet-loading.is-ready { opacity:0; transform:scale(.985); pointer-events:none; }
.fleet-loading-card { width:min(320px,calc(100vw - 48px)); text-align:center; }
.fleet-loading-logo { width:64px; height:64px; margin:0 auto 22px; display:block; filter:drop-shadow(0 8px 18px rgba(0,158,74,.22)); }
.fleet-loading-greeting { font-size:20px; font-weight:500; letter-spacing:-.4px; margin-bottom:8px; }
.fleet-loading-copy { color:rgba(255,255,255,.42); font-size:13px; line-height:1.5; }
.fleet-loading-status { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:24px; color:rgba(255,255,255,.3); font-size:11px; }
.fleet-loading-dots { display:flex; gap:4px; }
.fleet-loading-dots i { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.48); animation:fleet-dot 1s ease-in-out infinite; }
.fleet-loading-dots i:nth-child(2) { animation-delay:120ms; }
.fleet-loading-dots i:nth-child(3) { animation-delay:240ms; }
.fleet-loading-retry { display:none; margin:20px auto 0; padding:8px 12px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.72); font:inherit; font-size:12px; cursor:pointer; }
.fleet-loading-retry.visible { display:block; }
@keyframes fleet-dot { 0%,100% { opacity:.25; transform:translateY(0); } 50% { opacity:1; transform:translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  #fleet-loading { transition:opacity 160ms linear; }
  #fleet-loading.is-ready { transform:none; }
  .fleet-loading-dots i { animation:none; }
}

/* ── MAPA ── */
#map { position:fixed; left:0; right:0; top:calc(0px - env(safe-area-inset-top)); bottom:auto; width:100%; height:calc(var(--map-viewport-height,100dvh) + env(safe-area-inset-top) + env(safe-area-inset-bottom)); z-index:0; }
/* En iPhone/iPad WebKit conserva parte del lienzo bajo las barras nativas.
   Los controles no usan esta altura y continúan dentro de las áreas seguras. */
@supports (-webkit-touch-callout:none) {
  #map { height:calc(100lvh + env(safe-area-inset-top) + env(safe-area-inset-bottom)); }
}
.map-location-control { display:none; margin-top:calc(14px + env(safe-area-inset-top))!important; margin-right:calc(14px + env(safe-area-inset-right))!important; border:0!important; background:transparent!important; box-shadow:none!important; transition:opacity 180ms ease,transform 180ms ease; }
.map-location-control.is-hidden { opacity:0; transform:translateY(-8px); pointer-events:none; }
.map-location-btn { position:relative; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12)!important; border-radius:12px!important; background:rgba(12,14,18,.9)!important; color:rgba(255,255,255,.72); box-shadow:0 6px 20px rgba(0,0,0,.42); cursor:pointer; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.map-location-btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.map-location-btn:hover { color:#fff; background:rgba(24,27,34,.96)!important; }
.map-location-btn.locating { color:#bae6fd; }
.map-location-btn.locating svg { animation:location-search 1.2s ease-in-out infinite; }
.map-location-btn.active { color:#bfdbfe; border-color:rgba(96,165,250,.42)!important; background:rgba(30,64,175,.38)!important; }
.map-location-btn.resume { color:#dbeafe; border-color:rgba(96,165,250,.48)!important; background:rgba(30,64,175,.52)!important; }
.map-location-btn.error { color:#fca5a5; border-color:rgba(248,113,113,.35)!important; }
.map-location-msg { position:absolute; top:50%; right:calc(100% + 8px); transform:translateY(-50%); width:max-content; max-width:min(240px,calc(100vw - 80px)); padding:6px 9px; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:rgba(12,14,18,.92); color:rgba(255,255,255,.68); font-size:9px; line-height:1.25; opacity:0; pointer-events:none; transition:opacity 150ms; }
.map-location-btn:hover .map-location-msg,.map-location-btn.locating .map-location-msg,.map-location-btn.error .map-location-msg,.map-location-btn.resume .map-location-msg { opacity:1; }
.my-location-marker { width:30px; height:30px; display:grid; place-items:center; border:1px solid rgba(191,219,254,.82); border-radius:50%; background:rgba(37,99,235,.28); box-shadow:0 0 0 8px rgba(59,130,246,.12),0 3px 12px rgba(0,0,0,.55); }
.my-location-arrow { width:20px; height:20px; overflow:visible; transform-origin:50% 50%; transition:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.my-location-arrow path:first-child { fill:#eff6ff; stroke:#2563eb; stroke-width:1.25; stroke-linejoin:round; }
.my-location-arrow path:last-child { fill:none; stroke:#2563eb; stroke-width:1.5; stroke-linecap:round; }
@keyframes location-search { 50% { transform:scale(.82); opacity:.55; } }

/* popup oscuro */
.leaflet-popup-content-wrapper {
  background: rgba(20,20,22,.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 13px;
  box-shadow: 0 8px 32px rgba(0,0,0,.75); color: rgba(255,255,255,.85);
}
.leaflet-popup-tip { background: rgba(20,20,22,.96); }
.leaflet-popup-content { margin: 12px 16px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; }
.vehicle-popup {
  --vpop-bg:rgba(20,20,22,.94); --vpop-block:rgba(255,255,255,.05);
  --vpop-border:rgba(255,255,255,.09); --vpop-divider:rgba(255,255,255,.06);
  --vpop-text:rgba(255,255,255,.9); --vpop-secondary:rgba(255,255,255,.55);
  --vpop-tertiary:rgba(255,255,255,.3); --vpop-moving:#4ade80;
  --vpop-stopped:#fbbf24; --vpop-danger:#f87171;
}
.vehicle-popup .leaflet-popup-content-wrapper { background:var(--vpop-bg); border:1px solid var(--vpop-border); border-radius:13px; box-shadow:0 8px 24px rgba(0,0,0,.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.vehicle-popup .leaflet-popup-content { width:min(320px,calc(100vw - 24px))!important; margin:0; }
.vehicle-popup .leaflet-popup-tip { background:var(--vpop-bg); border:1px solid var(--vpop-border); }
.vehicle-popup .leaflet-popup-close-button { top:12px!important; right:12px!important; width:26px!important; height:26px!important; display:grid!important; place-items:center; padding:0!important; border-radius:8px; background:rgba(255,255,255,.05); color:var(--vpop-secondary)!important; font-size:19px!important; line-height:1!important; z-index:3; }
.vehicle-popup .leaflet-popup-close-button:hover { background:rgba(255,255,255,.1); color:var(--vpop-text)!important; }
.vehicle-popup :is(button,a):focus-visible { outline:2px solid rgba(255,255,255,.72); outline-offset:2px; }
.vpop { display:flex; flex-direction:column; gap:10px; padding:12px; color:var(--vpop-text); font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif; }
.vpop-head { padding-right:34px; }
.vpop-id { display:flex; align-items:center; gap:8px; min-width:0; }
.vpop-id strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; line-height:1.15; font-weight:600; }
.vpop-id span { flex:none; padding:2px 6px; border-radius:5px; background:var(--vpop-block); color:var(--vpop-secondary); font-size:11px; font-weight:500; }
.vpop-status { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:12px; white-space:nowrap; }
.vpop-status i { width:7px; height:7px; flex:none; border-radius:50%; background:var(--vpop-tertiary); }
.vpop-status b { font-weight:600; color:var(--vpop-secondary); }
.vpop-status span { overflow:hidden; text-overflow:ellipsis; color:var(--vpop-secondary); }
.vpop-status.moving i { background:var(--vpop-moving); }.vpop-status.moving b { color:var(--vpop-moving); }
.vpop-status.stopped i { background:var(--vpop-stopped); }.vpop-status.stopped b { color:var(--vpop-stopped); }
.vpop-status.dataissue i,.vpop-status.offline i { background:var(--vpop-danger); }.vpop-status.dataissue b,.vpop-status.offline b { color:var(--vpop-danger); }
.vpop-info { display:flex; flex-direction:column; gap:5px; }
.vpop-info > div { min-width:0; display:flex; align-items:center; gap:8px; color:var(--vpop-secondary); font-size:12px; }
.vpop-info > div:first-child { color:var(--vpop-text); }
.vpop-info > div.danger { color:var(--vpop-danger); }
.vpop-info svg,.vpop-actions svg,.vpop-icon-btn svg,.vpop-call svg,.vpop-metrics svg { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vpop-info svg,.vpop-metrics svg { color:var(--vpop-tertiary); }
.vpop-info span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vpop-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border-radius:10px; background:var(--vpop-block); }
.vpop-metrics > div { min-width:0; padding:8px 7px; border-right:1px solid var(--vpop-divider); }
.vpop-metrics > div:last-child { border-right:0; }
.vpop-metrics small { display:flex; align-items:center; gap:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--vpop-secondary); font-size:9px; font-weight:600; letter-spacing:.3px; }
.vpop-metrics small svg { width:11px; height:11px; }
.vpop-metrics strong { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--vpop-text); font-size:16px; line-height:1.2; font-weight:600; font-variant-numeric:tabular-nums; }
.vpop-metrics strong i { font-style:normal; font-size:11px; font-weight:500; color:var(--vpop-secondary); }
.vpop-metrics strong.warn,.vpop-metrics strong.danger { color:var(--vpop-danger); }.vpop-metrics strong.good { color:var(--vpop-moving); }
.vpop-driver { display:flex; align-items:center; gap:10px; }
.vpop-avatar { width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.12); color:var(--vpop-secondary); font-size:10px; font-weight:600; }
.vpop-driver-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.vpop-driver-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; }
.vpop-driver-copy small { color:var(--vpop-secondary); font-size:11px; }
.vpop-icon-btn,.vpop-call,.vpop-plan,.vpop-primary { border:1px solid var(--vpop-border); color:var(--vpop-text); font-family:inherit; cursor:pointer; transition:background 120ms,border-color 120ms; }
.vpop-icon-btn,.vpop-call { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; background:transparent; color:var(--vpop-secondary); text-decoration:none; }
.vpop-call { width:26px; height:26px; border-radius:8px; }.vpop-call svg { width:14px; height:14px; }
.vpop-icon-btn:hover,.vpop-call:hover,.vpop-plan:hover { background:var(--vpop-block); border-color:rgba(255,255,255,.15); }
.vpop-actions { display:flex; flex-wrap:nowrap; gap:8px; }
.vpop-primary,.vpop-plan { display:flex; align-items:center; justify-content:center; gap:6px; height:34px; border-radius:10px; font-size:13px; font-weight:500; white-space:nowrap; }
.vpop-primary { flex:1; min-width:0; background:rgba(255,255,255,.12); }
.vpop-primary:hover { background:rgba(255,255,255,.17); }
.vpop-plan { flex:1; min-width:0; background:transparent; color:rgba(255,255,255,.7); }
.vpop-route-long { display:none; }
@media (max-width:480px) {
  .vehicle-popup .leaflet-popup-content { width:calc(100vw - 24px)!important; }
}
.leaflet-popup-close-button { color: rgba(255,255,255,.35) !important; top:6px !important; right:8px !important; font-size:16px !important; }
.leaflet-popup-close-button:hover { color: rgba(255,255,255,.75) !important; }
.pop-plate { font-size:13px; font-weight:600; letter-spacing:-.2px; color:rgba(255,255,255,.9); margin-bottom:2px; }
.pop-sub   { font-size:10px; color:rgba(255,255,255,.32); margin-bottom:10px; }
.pop-grid  { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pop-stat  { background:rgba(255,255,255,.06); border-radius:8px; padding:6px 8px; }
.pop-lbl   { font-size:8px; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.28); margin-bottom:3px; }
.pop-val   { font-size:14px; font-weight:300; letter-spacing:-.3px; color:rgba(255,255,255,.85); }
.pop-val.warn { color:rgba(251,146,60,.9); }
.pop-val.good { color:rgba(134,239,172,.9); }
.pop-spd { margin-top:8px; font-size:10px; color:rgba(255,255,255,.3); }
.pop-spd strong { color:rgba(255,255,255,.65); }
.pop-route-btn {
  display:flex; align-items:center; justify-content:center; gap:5px;
  width:100%; margin-top:10px; padding:6px 10px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; color:rgba(255,255,255,.6); font-size:10px; font-weight:500;
  letter-spacing:.02em; cursor:pointer; font-family:inherit;
  transition:background 120ms, color 120ms;
}
.pop-route-btn:hover { background:rgba(255,255,255,.13); color:rgba(255,255,255,.9); }
.pop-route-btn.arrival { border-color:rgba(125,211,252,.22); background:rgba(56,189,248,.09); color:#bae6fd; }

/* etiqueta de matrícula sobre marcadores (zoom >= 13) */
.fl-plate-label {
  background: rgba(10,10,12,.82) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.7) !important;
  white-space: nowrap;
}
.fl-plate-label::before { border-top-color: rgba(10,10,12,.82) !important; }
.map-action-menu { min-width:190px; }
.map-action-title { margin:0 0 7px; color:rgba(255,255,255,.42); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.map-action-btn { width:100%; height:34px; display:flex; align-items:center; gap:8px; margin-top:4px; padding:0 9px; border:1px solid rgba(255,255,255,.07); border-radius:8px; background:rgba(255,255,255,.045); color:rgba(255,255,255,.78); font:inherit; font-size:10px; text-align:left; cursor:pointer; }
.map-action-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.map-action-btn span { width:20px; color:#bae6fd; text-align:center; }
.map-action-btn .map-action-icon { flex:none; display:grid; place-items:center; }
.map-action-btn .map-action-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.map-coordinate-card { min-width:210px; }
.map-coordinate-value { width:100%; box-sizing:border-box; padding:9px 10px; border:1px solid rgba(147,197,253,.16); border-radius:9px; background:rgba(59,130,246,.07); color:#dbeafe; font:600 12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; text-align:center; letter-spacing:.01em; cursor:pointer; }
.map-coordinate-value:hover { background:rgba(59,130,246,.13); border-color:rgba(147,197,253,.3); }
.map-coordinate-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:7px; }
.map-coordinate-actions .map-action-btn { justify-content:center; margin:0; padding:0 7px; }
.map-coordinate-actions .map-action-btn.copied,.map-coordinate-value.copied { color:#86efac; border-color:rgba(74,222,128,.28); }
.lugar-popup-hours { margin-top:7px; padding:7px 8px; border:1px solid rgba(255,255,255,.07); border-radius:8px; background:rgba(255,255,255,.035); color:rgba(255,255,255,.58); font-size:10px; line-height:1.4; }
.lugar-popup-hours strong { color:#86efac; }
.lugar-popup-hours.closed strong { color:#fca5a5; }

/* marcador custom */
.fl-marker {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(0,0,0,.45);
  box-shadow:0 2px 10px rgba(0,0,0,.65); cursor:pointer;
}
.fl-marker svg { width:14px; height:14px; }
.fl-marker.online  { background:rgba(22,163,74,.85); }
.fl-marker.moving  { background:rgba(22,163,74,.95); }
.fl-marker.stopped { background:rgba(245,158,11,.92); }
.fl-marker.dataissue { background:rgba(194,65,12,.92); }
.fl-marker.moving::before { content:''; position:absolute; width:40px; height:40px; border:1px dashed rgba(255,255,255,.7); border-radius:50%; pointer-events:none; animation:moving-ring 4s linear infinite; }
.fl-marker.moving svg { position:relative; z-index:1; }
.fl-marker.offline { background:rgba(185,28,28,.75); }
.fl-marker.sel     { border-color:rgba(255,255,255,.7) !important; box-shadow:0 0 0 3px rgba(255,255,255,.15), 0 2px 10px rgba(0,0,0,.65); }
.fl-marker.dim { background:rgba(105,110,118,.72) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 2px 8px rgba(0,0,0,.35); opacity:.68; }
.fl-marker.dim::before { border-color:rgba(190,194,201,.38) !important; animation:none; }
.fl-marker.dim svg { opacity:.72; filter:grayscale(1); }
.lugar-marker { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:rgba(18,22,29,.96); border:1px solid rgba(147,197,253,.7); color:#bfdbfe; box-shadow:0 3px 10px rgba(0,0,0,.5); }
.lugar-marker svg { width:11px; height:11px; }
.fl-cluster { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; background:rgba(0,158,74,.92); border:2px solid rgba(255,255,255,.78); box-shadow:0 3px 14px rgba(0,0,0,.42); }
.fl-cluster.dim { background:rgba(105,110,118,.78); border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.78); box-shadow:0 2px 10px rgba(0,0,0,.34); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-m {
  0%,100% { box-shadow:0 2px 10px rgba(0,0,0,.65),0 0 0 0 rgba(74,222,128,.35); }
  50%      { box-shadow:0 2px 10px rgba(0,0,0,.65),0 0 0 7px rgba(74,222,128,0); }
}
@keyframes moving-ring { to { transform:rotate(360deg); } }

/* ── FLEET PANEL ── */
.fl-panel {
  position:fixed; left:20px; top:12px;
  width:380px; max-width:calc(100vw - 40px);
  z-index:30;
}

/* barra de búsqueda compacta */
.fl-searchbar {
  display:flex; align-items:center; gap:10px; height:48px; padding:0 9px 0 14px; box-sizing:border-box;
  background:rgba(20,20,22,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:13px; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:border-color 150ms, border-radius 200ms;
}
.fl-searchbar:focus-within { border-color:rgba(255,255,255,.16); }
.fl-panel.open .fl-searchbar { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:rgba(255,255,255,.06); }
.fl-searchbar-inner { position:relative; flex:1; min-width:0; }
.fl-searchbar-inner svg { position:absolute; left:0; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.55); pointer-events:none; }
.fl-searchbar-inner input {
  width:100%; height:32px; box-sizing:border-box; padding:0 26px 0 22px;
  background:transparent; border:0; border-radius:0; outline:none; color:rgba(255,255,255,.9);
  font-size:13px; font-family:inherit; text-overflow:ellipsis;
}
.fl-searchbar-inner input::placeholder { color:rgba(255,255,255,.55); }
.fl-searchbar-inner input:focus { border:0; background:transparent; }
.fl-clear { position:absolute; right:0; top:50%; transform:translateY(-50%); width:18px; height:18px; padding:0; border:0; border-radius:50%; display:none; place-items:center; background:rgba(255,255,255,.14); color:rgba(255,255,255,.9); cursor:pointer; }
.fl-clear:hover { background:rgba(255,255,255,.22); }
.fl-clear svg { position:static; transform:none; color:inherit; }
.fl-searchbar-inner input:not(:placeholder-shown) ~ .fl-clear { display:grid; }
.fl-top-btn { width:28px; height:28px; border:0; border-radius:8px; display:grid; place-items:center; color:rgba(255,255,255,.52); background:rgba(255,255,255,.06); cursor:pointer; flex-shrink:0; }
.fl-top-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.fl-top-btn.active { background:rgba(253,230,138,.13); color:#fde68a; box-shadow:inset 0 0 0 1px rgba(253,230,138,.16); }
.fl-filter-tabs { display:flex; gap:2px; padding:3px; margin:10px 10px 0; border-radius:10px; background:rgba(255,255,255,.05); }
.fl-filter-tab { flex:1; min-width:0; height:32px; display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:8px; background:transparent; color:rgba(255,255,255,.55); font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:background 120ms,color 120ms; }
.fl-filter-tab:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); }
.fl-filter-tab.active { background:rgba(255,255,255,.12); color:rgba(255,255,255,.9); }
.fl-filter-tab.obras.active svg { color:#fde68a; }
.fl-filter-tab.lugares.active svg { color:#93c5fd; }
.fl-tab-n { font-size:11px; font-weight:500; color:rgba(255,255,255,.3); }
.fl-filter-tab.active .fl-tab-n { color:rgba(255,255,255,.55); }
.fl-user { display:flex; }
.fl-avatar { width:28px; height:28px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:grid; place-items:center; background:rgba(0,158,74,.25); color:rgba(255,255,255,.92); font-size:10px; font-weight:700; }
.fleet-fullscreen .fl-panel, .fleet-fullscreen #app-dock { display:none; }

/* dropdown de resultados */
.fl-dropdown {
  margin-top:0;
  background:rgba(20,20,22,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:0 0 13px 13px; border:1px solid rgba(255,255,255,.09); border-top:0;
  box-shadow:0 12px 24px rgba(0,0,0,.35);
  overflow:hidden;
  max-height:0; opacity:0;
  transition:max-height 300ms var(--ease-out), opacity 220ms var(--ease-out);
}
.fl-dropdown.open { max-height:calc(100dvh - 142px); opacity:1; }
.fl-list-wrap { position:relative; flex:1; overflow:hidden; display:flex; flex-direction:column; }
.fl-list { overflow-y:auto; padding:8px 10px 10px; flex:1; scrollbar-width:none; overflow-anchor:none; }
.fl-dropdown { display:flex; flex-direction:column; }
.fl-list::-webkit-scrollbar { display:none; }
.fl-place-heading { padding:8px 8px 5px; color:rgba(255,255,255,.32); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.fl-place-card { display:flex; align-items:center; gap:9px; margin:3px 0; padding:9px; border:1px solid rgba(56,189,248,.09); border-radius:10px; background:rgba(56,189,248,.035); color:inherit; cursor:pointer; }
.fl-place-card:hover { background:rgba(56,189,248,.09); border-color:rgba(56,189,248,.18); }
.fl-place-icon { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:9px; background:rgba(56,189,248,.1); color:#7dd3fc; }
.fl-place-copy { min-width:0; flex:1; }
.fl-place-name { color:rgba(255,255,255,.82); font-size:11px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fl-place-address { margin-top:2px; color:rgba(255,255,255,.34); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fl-scroll-btn {
  position:absolute; left:50%; transform:translateX(-50%);
  width:32px; height:20px; border:none; cursor:pointer;
  background:linear-gradient(to bottom, rgba(12,12,14,.0), rgba(12,12,14,.85));
  display:flex; align-items:center; justify-content:center;
  transition:opacity 200ms; pointer-events:none; opacity:0; z-index:2;
  border-radius:0 0 8px 8px;
}
.fl-scroll-btn.top { top:0; background:linear-gradient(to top, rgba(12,12,14,.0), rgba(12,12,14,.85)); border-radius:8px 8px 0 0; }
.fl-scroll-btn:not(.top) { bottom:0; }
.fl-scroll-btn.visible { opacity:1; pointer-events:all; }
.fl-scroll-btn svg { color:rgba(255,255,255,.45); }

/* filtros de estado dentro del dropdown */
.fl-chips { display:flex; gap:4px; margin:8px 10px 0; overflow-x:auto; scrollbar-width:none; }
.fl-chips::-webkit-scrollbar { display:none; }
.ml-chip { flex:none; display:inline-flex; align-items:center; gap:4px; padding:5px 6px; border:1px solid transparent; border-radius:8px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); font:inherit; font-size:11px; font-weight:500; white-space:nowrap; cursor:pointer; transition:background 120ms,color 120ms; }
.ml-chip:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); }
.ml-chip i { width:6px; height:6px; border-radius:50%; }
.ml-chip b { font-weight:400; color:rgba(255,255,255,.3); }
.ml-chip.active { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.09); color:rgba(255,255,255,.9); }
.ml-chip.active b { color:rgba(255,255,255,.55); }
.fl-dropdown.searching .fl-filter-tabs, .fl-dropdown.searching .fl-chips, .fl-dropdown.obras-mode .fl-chips { display:none; }

/* filas del listado: vehículos, obras y lugares */
.ml-sec { display:flex; align-items:center; gap:6px; padding:10px 10px 4px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.ml-sec:first-child { padding-top:4px; }
.ml-sec b { font-weight:600; color:rgba(255,255,255,.3); }
.ml-summary { display:flex; justify-content:space-between; padding:2px 10px 6px; font-size:11px; color:rgba(255,255,255,.55); }
.ml-summary span:last-child { color:rgba(255,255,255,.3); }
.ml-row { display:flex; flex-direction:column; gap:10px; margin-bottom:2px; padding:9px 10px; border:1px solid transparent; border-radius:10px; cursor:pointer; transition:background 120ms,border-color 120ms; overflow-anchor:none; }
.ml-row:hover { background:rgba(255,255,255,.05); }
.ml-row.active { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09); }
.ml-row.moving { --c:#4ade80; --c-soft:rgba(74,222,128,.15); }
.ml-row.stopped { --c:#fbbf24; --c-soft:rgba(251,191,36,.11); }
.ml-row.dataissue, .ml-row.offline { --c:#f87171; --c-soft:rgba(248,113,113,.11); }
.ml-main { display:flex; align-items:center; gap:10px; min-width:0; }
.ml-dot { width:14px; height:14px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--c-soft); }
.ml-dot::after { content:''; width:7px; height:7px; border-radius:50%; background:var(--c); }
.ml-id { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.ml-top { display:flex; align-items:center; gap:7px; min-width:0; }
.ml-plate { font-size:14px; font-weight:600; letter-spacing:-.1px; color:rgba(255,255,255,.9); white-space:nowrap; }
.ml-movil { flex:none; padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); font-size:10px; font-style:normal; font-weight:500; }
.ml-sub { font-size:12px; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ml-val { flex:none; max-width:50%; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.ml-val b { font-size:13px; font-weight:600; color:var(--c); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ml-val small { font-size:11px; color:rgba(255,255,255,.3); white-space:nowrap; }
.ml-detail { display:none; flex-direction:column; gap:8px; padding-left:24px; }
.ml-row.active .ml-detail { display:flex; }
.ml-loc { display:flex; align-items:center; gap:6px; min-width:0; font-size:12px; color:rgba(255,255,255,.55); }
.ml-loc svg { width:13px; height:13px; flex:none; color:rgba(255,255,255,.3); }
.ml-loc span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ml-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border-radius:9px; background:rgba(255,255,255,.05); }
.ml-metrics > div { min-width:0; padding:6px 10px; border-right:1px solid rgba(255,255,255,.06); }
.ml-metrics > div:last-child { border-right:0; }
.ml-metrics small { display:block; font-size:9px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:rgba(255,255,255,.55); }
.ml-metrics strong { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; }
.ml-metrics strong i { font-size:10px; font-style:normal; font-weight:500; color:rgba(255,255,255,.55); }
.ml-go { display:flex; align-items:center; justify-content:center; gap:6px; height:32px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.9); font:inherit; font-size:12px; font-weight:500; cursor:pointer; }
.ml-go:hover { background:rgba(255,255,255,.17); }
.ml-go svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ml-zone { flex-direction:row; align-items:center; }
.ml-zi { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:9px; border:1px solid var(--zb); background:var(--zbg); color:var(--zc); }
.ml-zi svg { width:16px; height:16px; }
.ml-zi.obra { --zc:#fde68a; --zbg:rgba(253,230,138,.08); --zb:rgba(253,230,138,.15); }
.ml-zi.lugar { --zc:#93c5fd; --zbg:rgba(147,197,253,.08); --zb:rgba(147,197,253,.15); }
.ml-zi.dir { --zc:rgba(255,255,255,.55); --zbg:rgba(255,255,255,.05); --zb:rgba(255,255,255,.09); }
.ml-zc { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.ml-zc b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; color:rgba(255,255,255,.9); }
.ml-zc small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:rgba(255,255,255,.55); }
.ml-arrow { width:14px; height:14px; flex:none; fill:none; stroke:rgba(255,255,255,.3); stroke-width:2; }
.ml-badge { flex:none; display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; color:var(--c); background:var(--cbg); }
.ml-badge i { width:5px; height:5px; border-radius:50%; background:var(--c); }
.ml-badge.open { --c:#4ade80; --cbg:rgba(74,222,128,.12); }
.ml-badge.closed { --c:#f87171; --cbg:rgba(248,113,113,.12); }

/* tarjeta en dropdown */
.fv-card { border-radius:13px; border:1px solid transparent; background:#1e1e1e; cursor:pointer; transition:background 120ms,border-color 120ms; margin-bottom:4px; overflow:hidden; }
.fv-card:hover { background:#252525; }
.fv-card.active { background:#242424; border-color:rgba(255,255,255,.09); }
.fv-body { padding:10px 10px 8px; }
.fv-top { display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.fv-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.fv-dot.online  { background:#4ade80; box-shadow:0 0 5px rgba(74,222,128,.5); }
.fv-dot.offline { background:#f87171; }
.fv-plate { font-size:12px; font-weight:600; letter-spacing:-.2px; color:rgba(255,255,255,.9); flex:1; }
.fv-arrow {
  width:20px; height:20px; border-radius:6px; border:none;
  background:rgba(255,255,255,.07); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 120ms; flex-shrink:0;
}
.fv-arrow:hover { background:rgba(255,255,255,.14); }
.fv-sub { font-size:9px; color:rgba(255,255,255,.28); padding-left:13px; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fv-bar { height:2px; border-radius:2px; background:rgba(255,255,255,.07); position:relative; margin-left:13px; }
.fv-bar-fill { position:absolute; left:0; top:0; height:100%; border-radius:2px; background:rgba(255,255,255,.22); }
.fv-bar-stop { position:absolute; top:0; height:100%; }
.fv-map-wrap { position:relative; height:72px; border-top:1px solid rgba(255,255,255,.04); cursor:pointer; }
.fv-map-wrap:hover::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.04); }
.fv-map-img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; filter:brightness(.8) saturate(.75); opacity:0; transition:opacity 180ms ease; }
.fv-map-img.is-loaded { opacity:1; }
.fv-map-canvas { position:relative; z-index:1; display:block; width:100%; height:100%; }
.fl-no-gps { display:flex; align-items:center; justify-content:center; height:100%; font-size:9px; color:rgba(255,255,255,.18); gap:4px; cursor:default; }
.fv-activity { padding:9px 10px 10px; border-top:1px solid rgba(255,255,255,.05); background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.035)); }
.fv-driver { display:flex; align-items:center; gap:7px; min-width:0; margin-bottom:8px; }
.fv-driver-icon { width:23px; height:23px; flex:0 0 23px; display:grid; place-items:center; border-radius:8px; color:rgba(255,255,255,.62); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.06); }
.fv-driver > span:last-child { min-width:0; display:flex; flex-direction:column; line-height:1.1; }
.fv-driver small,.fv-activity-stat small { font-size:7px; font-weight:600; letter-spacing:.055em; text-transform:uppercase; color:rgba(255,255,255,.25); }
.fv-driver strong { margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:600; color:rgba(255,255,255,.78); }
.fv-activity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.fv-activity-stat { min-width:0; padding:6px 7px; border-radius:8px; background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.04); }
.fv-activity-stat strong { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:650; color:rgba(255,255,255,.76); font-variant-numeric:tabular-nums; }
.fv-activity-foot { min-width:0; margin-top:7px; display:flex; align-items:center; gap:7px; font-size:8px; }
.fv-state { flex:none; font-weight:650; color:rgba(255,255,255,.48); }
.fv-state.moving { color:#4ade80; }
.fv-state.stopped { color:#fbbf24; }
.fv-state.dataissue,.fv-state.offline { color:#f87171; }
.fv-activity-location { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; color:rgba(255,255,255,.27); }
.fv-zone-card { padding:10px; display:flex; align-items:center; gap:9px; }
.fv-zone-icon { width:25px; height:25px; flex:none; display:grid; place-items:center; border-radius:8px; border:1px solid rgba(253,230,138,.22); background:rgba(253,230,138,.08); color:#fde68a; }
.fv-zone-copy { min-width:0; flex:1; }
.fv-zone-name { color:rgba(255,255,255,.88); font-size:12px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fv-zone-meta { margin-top:2px; color:rgba(255,255,255,.32); font-size:9px; }

/* ── CARRUSEL DE TARJETAS INFERIOR ── */
#fc-strip {
  position:fixed; bottom:76px; left:0; right:0;
  z-index:15; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform 340ms var(--ease-out), opacity 280ms var(--ease-out);
  user-select:none;
}
#fc-strip.hidden { transform:translateY(calc(100% + 28px)); opacity:0; pointer-events:none; }
#fc-strip.dragging { transition:none; }
#tl-wrap.open ~ #fc-strip { transform:translateY(calc(100% + 28px)); opacity:0; pointer-events:none; }

/* handle de drag */
.fc-drag {
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:24px; height:52px;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; border-radius:8px; opacity:0.35;
  color:rgba(255,255,255,.7);
  background:rgba(12,12,14,.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.07);
  transition:opacity 120ms;
}
.fc-drag:hover { opacity:0.7; }
#fc-strip.dragging .fc-drag { cursor:grabbing; opacity:0.9; }

.fc-nav {
  width:32px; height:32px; flex-shrink:0; border-radius:10px; border:none; cursor:pointer;
  background:rgba(12,12,14,.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5);
  transition:background 120ms, color 120ms, opacity 150ms;
}
.fc-nav:hover { background:rgba(30,30,32,.9); color:rgba(255,255,255,.85); }
.fc-nav:disabled { opacity:0.25; cursor:default; }

#fc-scroll {
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
  align-items:flex-end; scrollbar-width:none; padding:4px 0;
}
#fc-scroll::-webkit-scrollbar { display:none; }

/* ── VEHICLE CARD (.vc-*) ── */
.vc-card {
  flex-shrink:0; min-width:322px; width:322px;
  height:228px; position:relative;
  scroll-snap-align:start;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(32px) saturate(1.6); -webkit-backdrop-filter:blur(32px) saturate(1.6);
  border-radius:18px; border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.28), 0 28px 56px rgba(0,0,0,.22);
  overflow:hidden; cursor:pointer;
  transition:box-shadow 120ms, border-color 120ms;
}
.vc-card:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.06), 0 12px 36px rgba(0,0,0,.38); }
.vc-card.sel { border-color:rgba(255,255,255,.18); }

.vc-body { position:relative; z-index:4; height:100%; padding:13px 14px 12px; display:flex; flex-direction:column; justify-content:space-between; }
.vc-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.vc-title-block { min-width:0; flex:1; }
.vc-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:6px; }
.vc-dot.online  { background:#4ade80; box-shadow:0 0 5px rgba(74,222,128,.5); }
.vc-dot.moving  { background:#4ade80; box-shadow:0 0 5px rgba(74,222,128,.7); animation:pulse-m 2s ease-in-out infinite; }
.vc-dot.stopped { background:#fbbf24; box-shadow:0 0 5px rgba(251,191,36,.5); }
.vc-dot.dataissue { background:#f97316; box-shadow:0 0 5px rgba(249,115,22,.5); }
.vc-dot.offline { background:#f87171; }
.vc-plate-row { display:flex; align-items:center; gap:7px; min-width:0; }
.vc-name { font-size:17px; font-weight:700; letter-spacing:-.35px; color:rgba(255,255,255,.94); line-height:1.1; white-space:nowrap; }
.vc-unit { flex:none; padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.62); font-size:10px; font-weight:700; }
.vc-subtitle {
  font-size:11px; color:rgba(255,255,255,.62); line-height:1.5; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vc-expand {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.3); padding:0;
  display:flex; align-items:center; flex-shrink:0;
  transition:color 150ms; margin-left:8px;
}
.vc-expand:hover { color:rgba(255,255,255,.7); }

/* estado pill (online/offline) */
.vc-pill {
  flex:none; display:inline-flex; align-items:center; gap:5px;
  padding:4px 7px; border-radius:999px;
  font-size:10px; font-weight:750; letter-spacing:.1px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.72); white-space:nowrap;
}
.vc-pill i { width:6px; height:6px; flex:none; border-radius:50%; background:currentColor; box-shadow:0 0 7px currentColor; }
.vc-card.moving .vc-pill { background:rgba(74,222,128,.10); border-color:rgba(74,222,128,.22); color:#86efac; }
.vc-card.stopped .vc-pill { background:rgba(251,191,36,.10); border-color:rgba(251,191,36,.22); color:#fde68a; }
.vc-card.offline .vc-pill,.vc-card.dataissue .vc-pill { background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.26); color:#fca5a5; }
.vc-passive-info { display:flex; flex-direction:column; gap:4px; min-width:0; margin-top:auto; padding-bottom:8px; }
.vc-place { display:flex; align-items:center; gap:7px; min-width:0; color:rgba(255,255,255,.9); }
.vc-place svg { width:14px; height:14px; flex:none; fill:none; stroke:rgba(255,255,255,.58); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vc-place span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:720; text-shadow:0 1px 6px rgba(0,0,0,.85); }
.vc-context { display:flex; align-items:center; gap:6px; min-width:0; padding-left:21px; font-size:12px; text-shadow:0 1px 6px rgba(0,0,0,.85); }
.vc-context b { flex:none; color:var(--vc-state,#86efac); font-weight:780; }
.vc-card.stopped .vc-context b {
  padding:3px 8px;
  border:1px solid rgba(251,191,36,.28);
  border-radius:999px;
  background:rgba(40,30,8,.76);
  color:#fde68a;
  line-height:1.15;
  text-shadow:none;
  box-shadow:0 2px 7px rgba(0,0,0,.16);
}
.vc-context span { color:rgba(255,255,255,.36); }
.vc-context small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.66); font-size:12px; }
.vc-card.moving { --vc-state:#4ade80; }.vc-card.stopped { --vc-state:#fbbf24; }.vc-card.offline,.vc-card.dataissue { --vc-state:#f87171; }
.vc-passive-stats { height:52px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:11px; background:rgba(255,255,255,.052); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.vc-passive-stats > div { min-width:0; padding:8px 7px; border-right:1px solid rgba(255,255,255,.055); }
.vc-passive-stats > div:last-child { border-right:0; }
.vc-passive-stats small { display:flex; align-items:center; gap:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.55); font-size:8px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.vc-passive-stats small svg { width:11px; height:11px; flex:none; fill:none; stroke:rgba(255,255,255,.36); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vc-passive-stats strong { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.9); font-size:13px; font-weight:760; font-variant-numeric:tabular-nums; }
.vc-passive-stats strong.good { color:#86efac; }.vc-passive-stats strong.danger,.vc-passive-stats strong.warn { color:#fca5a5; }

.vc-compact-panel {
  display:flex; flex-direction:column; gap:8px; padding:9px;
  border:1px solid rgba(255,255,255,.08); border-radius:13px;
  background:linear-gradient(180deg,rgba(15,17,22,.62),rgba(15,17,22,.46));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.vc-driver-line { display:flex; align-items:center; gap:8px; min-width:0; }
.vc-driver-avatar { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.12); color:rgba(255,255,255,.82); font-size:9px; font-weight:750; }
.vc-driver-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.vc-driver-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.86); font-size:11px; font-weight:650; }
.vc-driver-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.44); font-size:9px; }
.vc-mini-btn { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.06); color:rgba(255,255,255,.66); }
.vc-mini-btn svg,.vc-actions svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.vc-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border-radius:10px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.045); }
.vc-metrics > div { min-width:0; padding:6px 5px; border-right:1px solid rgba(255,255,255,.055); }
.vc-metrics > div:last-child { border-right:0; }
.vc-metrics small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.36); font-size:7px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.vc-metrics strong { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.88); font-size:10px; font-weight:750; font-variant-numeric:tabular-nums; }
.vc-metrics strong i { font-style:normal; font-size:8px; color:rgba(255,255,255,.5); }
.vc-metrics strong.warn,.vc-metrics strong.danger { color:#fca5a5; }.vc-metrics strong.good { color:#86efac; }
.vc-actions { display:flex; gap:6px; }
.vc-actions button { height:28px; min-width:0; flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 8px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.09); color:rgba(255,255,255,.86); font:inherit; font-size:10px; font-weight:700; cursor:pointer; }
.vc-actions button:hover,.vc-mini-btn:hover { background:rgba(255,255,255,.16); color:#fff; }
.vc-actions button.icon { flex:0 0 30px; padding:0; }
.vc-card.offline .vc-map-img,.vc-card.dataissue .vc-map-img { filter:none; }
.vc-card.offline .vc-map-canvas,.vc-card.dataissue .vc-map-canvas { opacity:.72; }

/* El mapa ocupa la tarjeta completa; los datos flotan arriba. */
.vc-map-section {
  position:absolute; inset:0; height:auto; margin:0;
  border-radius:18px;
  overflow:hidden;
  z-index:1;
}
.vc-map-img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; filter:none; opacity:0; transition:opacity 180ms ease; }
.vc-map-img.is-loaded { opacity:1; }
.vc-map-canvas { position:relative; z-index:1; display:block; width:100%; height:100%; }

/* degradé superior: fusiona el mapa con el cuerpo de la tarjeta */
.vc-map-section::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:112px;
  /* Sólo oscurece el área de lectura, sin crear una separación con el mapa. */
  background:linear-gradient(to bottom, rgba(8,9,12,.88) 0%, rgba(8,9,12,.56) 38%, rgba(8,9,12,.12) 68%, rgba(8,9,12,.0) 100%);
  pointer-events:none; z-index:3;
}

/* tooltip de hora sobre el mapa */
.vc-pos-time {
  position:absolute; transform:translate(-50%,-130%);
  font-size:10px; font-weight:600; color:rgba(255,255,255,.95);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
  background:rgba(0,0,0,.55); padding:3px 8px; border-radius:5px;
  pointer-events:none; z-index:5;
  opacity:0; transition:opacity 180ms ease;
}

/* scrubber overlay dentro del mapa */
.vc-scrub {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:center; gap:10px;
  padding:20px 16px 27px;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%);
}
.vc-location {
  position:absolute; z-index:5; left:18px; right:18px; bottom:7px;
  text-align:center; font-size:9px; line-height:12px; font-weight:500;
  color:rgba(255,255,255,.48); text-shadow:0 1px 5px rgba(0,0,0,.9);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}
.vc-scrub-time {
  font-size:9px; font-weight:500; color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums; flex-shrink:0; width:28px;
}
.vc-scrub-time.right { text-align:right; }
.vc-scrub-track { flex:1; position:relative; height:36px; display:flex; align-items:center; }
.vc-scrub-fill {
  position:absolute; left:0; height:1.5px;
  background:rgba(255,255,255,.6); pointer-events:none;
  transition:width 90ms var(--ease-out); z-index:2;
}
.vc-scrub-thumb {
  position:absolute; transform:translate(-50%,-50%); top:50%;
  pointer-events:none; color:rgba(255,255,255,.9);
  transition:left 90ms var(--ease-out);
  filter:drop-shadow(0 0 5px rgba(0,0,0,.8));
  z-index:3;
}
/* range invisible sobre el scrubber */
.vc-range {
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-appearance:none; appearance:none;
  background:transparent; outline:none; cursor:pointer; z-index:10; opacity:0;
}
.vc-range::-webkit-slider-thumb { -webkit-appearance:none; width:36px; height:36px; border-radius:50%; }

/* ═══════════════════════════════════════════════════
   TIMELINE PANEL — centrado
   ═══════════════════════════════════════════════════ */
#tl-wrap {
  position: fixed; left: 0; right: 0; bottom: 76px;
  z-index: 20; display: flex; justify-content: center;
  transform: translateY(calc(100% + 100px));
  transition: transform 340ms var(--ease-out);
  pointer-events: none;
}
#tl-wrap.open { transform: translateY(0); pointer-events: none; }

.tl-panel {
  position:relative;
  width: min(760px, calc(100vw - 40px));
  pointer-events: all;
  background: rgba(20,20,22,.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 13px; padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
}
.tl-loading { position:absolute; inset:0; z-index:20; display:none; place-items:center; background:rgba(12,12,14,.62); backdrop-filter:blur(4px); border-radius:13px; color:rgba(255,255,255,.62); font-size:12px; pointer-events:none; }
.tl-loading.visible { display:grid; }
.tl-loading-inner { display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(20,20,22,.72); }
.tl-loading-spinner { width:13px; height:13px; border:2px solid rgba(255,255,255,.18); border-top-color:rgba(255,255,255,.72); border-radius:50%; animation:spin .8s linear infinite; }
.tl-meta { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tl-plate { font-size:14px; font-weight:600; letter-spacing:-.2px; color:rgba(255,255,255,.9); }
.tl-jornada { font-size:12px; color:rgba(255,255,255,.55); }
.tl-day-nav { display:flex; align-items:center; gap:2px; padding:2px; margin-left:0; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(0,0,0,.16); }
.tl-day-btn { height:22px; padding:0 8px; border:0; border-radius:6px; background:transparent; color:rgba(255,255,255,.38); font:600 10px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif; cursor:pointer; transition:background 120ms,color 120ms; }
.tl-day-btn:hover { color:rgba(255,255,255,.78); background:rgba(255,255,255,.06); }
.tl-day-btn.active { color:rgba(255,255,255,.9); background:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.tl-spacer { flex:1; }
.tl-status { font-size:12px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.7); display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; min-height:34px; margin-bottom:10px; }
.tl-st-time { font-size:28px; line-height:1; font-weight:600; letter-spacing:-.8px; color:rgba(255,255,255,.9); }
.tl-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:7px; font-size:12px; font-weight:600; white-space:nowrap; color:var(--c,#FBBF24); background:var(--bg,rgba(251,191,36,.15)); }
.tl-chip i { width:6px; height:6px; border-radius:50%; background:var(--c,#FBBF24); }
.tl-vel { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; white-space:nowrap; color:rgba(255,255,255,.55); }
.tl-vel.exceso { color:#F87171; }
.tl-close {
  width:26px; height:26px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06); cursor:pointer; color:rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center;
  transition:background 120ms, color 120ms; flex-shrink:0; margin-left:8px;
}
.tl-close:hover { background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); }
.tl-row { display:flex; align-items:center; gap:12px; }
.tl-time { font-size:11px; font-weight:500; color:rgba(255,255,255,.55); letter-spacing:.2px; flex-shrink:0; font-variant-numeric:tabular-nums; width:36px; }
.tl-time.right { text-align:right; }
.tl-track { position:relative; flex:1; height:52px; display:flex; align-items:center; }
.tl-track.has-geo { margin-top:24px; }
.tl-geo-marker { position:absolute; top:-24px; left:0; z-index:11; display:none; transform:translateX(-50%); padding:0; border:0; background:transparent; cursor:pointer; color:#bfdbfe; font-size:9px; font-weight:750; white-space:nowrap; }
.tl-geo-marker.visible { display:flex; flex-direction:column; align-items:center; gap:2px; }
.tl-geo-marker-label { padding:3px 7px; border:1px solid rgba(96,165,250,.5); border-radius:6px; background:rgba(13,24,42,.96); box-shadow:0 3px 10px rgba(0,0,0,.35); }
.tl-geo-marker:hover .tl-geo-marker-label,.tl-geo-marker:focus-visible .tl-geo-marker-label { color:#fff; border-color:#93c5fd; background:#172f52; }
.tl-geo-marker-pin { width:2px; height:16px; background:#60a5fa; box-shadow:0 0 7px rgba(96,165,250,.75); }
.tl-cursor {
  position:absolute; top:0; bottom:0; left:0; width:0;
  pointer-events:none; z-index:4;
  transition:left 90ms var(--ease-out);
}
.tl-cursor-knob { position:absolute; left:-3px; top:9px; width:6px; height:26px; border-radius:3px; background:#fff; box-shadow:0 0 0 3px rgba(20,20,22,.94), 0 2px 8px rgba(0,0,0,.5); }
.tl-track:has(.tl-slider:focus-visible) .tl-cursor-knob { box-shadow:0 0 0 3px rgba(20,20,22,.94), 0 0 0 5px rgba(255,255,255,.45); }
.tl-future { position:absolute; left:0; right:0; top:16px; height:12px; border-radius:0 4px 4px 0; background:rgba(20,20,22,.5); pointer-events:none; z-index:2; transition:left 90ms var(--ease-out); }
.tl-slider {
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; -webkit-appearance:none; appearance:none;
  background:transparent; outline:none; cursor:pointer; z-index:10; opacity:0;
}
.tl-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; }
.tl-legend { display:flex; gap:8px 16px; margin-top:8px; font-size:11px; color:rgba(255,255,255,.55); flex-wrap:wrap; }
.tl-legend span { display:flex; align-items:center; gap:6px; }
.tl-legend i { display:inline-block; width:8px; height:8px; border-radius:50%; }
.tl-legend b { font-weight:600; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; }

/* ── DOCK NAVIGATION ── */
#app-dock {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(0);
  z-index:35;
  display:flex; align-items:center; gap:2px;
  padding:6px; box-sizing:border-box;
  background:rgba(20,20,22,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:1; pointer-events:all;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
}
.dock-btn {
  height:36px; padding:0 12px; gap:8px; box-sizing:border-box;
  border:none; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:transparent; white-space:nowrap;
  color:rgba(255,255,255,.55);
  font:inherit; font-size:12px; font-weight:500;
  transition:background 150ms, color 150ms;
}
.dock-btn svg { width:16px; height:16px; flex:none; }
.dock-btn:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.9); }
.dock-btn.active, .dock-btn.current { background:rgba(255,255,255,.12); color:rgba(255,255,255,.9); }
.dock-btn:focus-visible, .dock-sub-btn:focus-visible { outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.dock-caret { width:12px!important; height:12px!important; color:rgba(255,255,255,.3); }
.dock-divider { width:1px; height:20px; flex:none; margin:0 4px; background:rgba(255,255,255,.09); }
.dock-user { padding:0 8px 0 6px; gap:6px; }
.dock-user .fl-avatar { width:26px; height:26px; border-radius:50%; border-color:transparent; background:rgba(255,255,255,.12); color:rgba(255,255,255,.9); font-size:10px; font-weight:600; }
.dock-label-user { display:none; }
.leaflet-control-attribution {
  margin:0 4px 3px 0!important;
  padding:1px 4px!important;
  border-radius:5px 0 0 0;
  background:rgba(10,10,12,.32)!important;
  color:rgba(255,255,255,.34)!important;
  font-size:8px!important;
  line-height:12px!important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.leaflet-control-attribution a { color:rgba(255,255,255,.46)!important; }
.dock-group { position:relative; display:flex; align-items:center; }
/* Menús desplegables sobre el botón: el dock no cambia de ancho al abrirlos */
.dock-submenu {
  position:absolute; left:0; bottom:calc(100% + 12px); z-index:50;
  min-width:236px; display:flex; flex-direction:column; gap:2px; padding:6px;
  background:rgba(20,20,22,.94); border:1px solid rgba(255,255,255,.09); border-radius:14px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
  transition:opacity 160ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.dock-submenu.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
.dock-usermenu { left:auto; right:0; min-width:224px; }
.dock-sec { padding:6px 10px 2px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.dock-sep { height:1px; margin:4px 0; background:rgba(255,255,255,.06); }
.dock-sub-btn { width:100%; height:38px; box-sizing:border-box; display:flex; align-items:center; gap:10px; padding:0 10px; border:0; border-radius:9px; background:transparent; color:rgba(255,255,255,.9); font:inherit; font-size:13px; font-weight:500; text-align:left; white-space:nowrap; cursor:pointer; transition:background 120ms; }
.dock-sub-btn svg { width:16px; height:16px; flex:none; color:rgba(255,255,255,.55); }
.dock-sub-btn:hover { background:rgba(255,255,255,.06); }
.dock-sub-btn.active { background:rgba(255,255,255,.12); font-weight:600; }
.dock-sub-btn.active::after { content:''; width:14px; height:14px; margin-left:auto; flex:none; background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.dock-sub-btn.danger, .dock-sub-btn.danger svg { color:#f87171; }
.dock-sub-btn.danger:hover { background:rgba(248,113,113,.1); }
.dock-account { display:flex; align-items:center; gap:10px; padding:8px 10px; }
.dock-account .fl-avatar { width:32px; height:32px; border-radius:50%; flex:none; background:rgba(255,255,255,.12); border-color:transparent; color:rgba(255,255,255,.9); font-size:12px; font-weight:600; }
.dock-account-copy { min-width:0; display:flex; flex-direction:column; gap:1px; }
.dock-account-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.dock-account-copy small { font-size:11px; color:rgba(255,255,255,.55); }
/* Pantallas medianas: solo iconos (con tooltip) para que el dock no ocupe todo el ancho */
@media (min-width:721px) and (max-width:960px) {
  .dock-btn { padding:0 10px; }
  .dock-btn .dock-label { display:none; }
  .dock-btn .dock-caret { display:none; }
}
/* ═══════════════════════════════════════════════════
   PANELES LATERALES · piezas comunes
   (Visualización, Consultar recorrido, Movimientos por ubicación, Obras y Lugares)
   ═══════════════════════════════════════════════════ */
.vwin [hidden] { display:none!important; }
.pn-card { display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(255,255,255,.05); }
.pn-card > svg { width:16px; height:16px; flex:none; fill:none; stroke:rgba(255,255,255,.55); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pn-card-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.pn-card-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.pn-card-copy small { font-size:11px; color:rgba(255,255,255,.55); }
.pn-card .vw-btn { flex:none; }
.pn-card .vw-btn.ready { color:rgba(255,255,255,.95); }
.pn-switchrow { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); cursor:pointer; }
.pn-sw-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.pn-sw-copy b { font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.pn-sw-copy small { font-size:11px; color:rgba(255,255,255,.55); line-height:1.35; }
.pn-note { display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.55); }
.pn-note svg, .pn-status svg { width:14px; height:14px; flex:none; fill:none; stroke:rgba(255,255,255,.3); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pn-status { display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.4; color:rgba(255,255,255,.55); }
.pn-status svg { margin-top:1px; }
.vw-body > .vw-input { flex:none; }

/* interruptor (casillas de Visualización, Obras y Lugares) */
.fleet-config-check { appearance:none; -webkit-appearance:none; width:34px; height:20px; flex:none; margin:0; border-radius:20px; background:rgba(255,255,255,.14); position:relative; cursor:pointer; transition:background 150ms; }
.fleet-config-check::after { content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; border-radius:50%; background:rgba(255,255,255,.7); transition:transform 150ms,background 150ms; }
.fleet-config-check:checked { background:#4ade80; }
.fleet-config-check:checked::after { transform:translateX(14px); background:#0b2a17; }
.fleet-config-check:focus-visible { outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

/* Visualización */
.fleet-config-list { display:flex; flex-direction:column; gap:2px; }
.fleet-config-row { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; cursor:pointer; }
.fleet-config-row:hover { background:rgba(255,255,255,.05); }
.fleet-config-name { min-width:0; flex:1; }
.fleet-config-plate { display:block; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.fleet-config-sub { display:block; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:rgba(255,255,255,.55); }

/* Consultar recorrido: lista de unidades */
.pn-units { display:flex; flex-direction:column; gap:2px; max-height:280px; overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.pn-unit { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:1px solid transparent; border-radius:10px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background 120ms; }
.pn-unit:hover { background:rgba(255,255,255,.05); }
.pn-unit.on { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09); }
.pn-dot { width:14px; height:14px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--c-soft,rgba(255,255,255,.1)); }
.pn-dot::after { content:''; width:7px; height:7px; border-radius:50%; background:var(--c,rgba(255,255,255,.55)); }
.pn-unit.moving { --c:#4ade80; --c-soft:rgba(74,222,128,.15); }
.pn-unit.stopped { --c:#fbbf24; --c-soft:rgba(251,191,36,.11); }
.pn-unit.offline, .pn-unit.dataissue { --c:#f87171; --c-soft:rgba(248,113,113,.11); }
.pn-unit-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.pn-unit-top { display:flex; align-items:center; gap:7px; }
.pn-unit-top b { font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.pn-unit-top i { padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); font-size:10px; font-style:normal; font-weight:500; }
.pn-unit-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:rgba(255,255,255,.55); }
.pn-check { width:18px; height:18px; flex:none; display:none; place-items:center; border-radius:50%; background:rgba(255,255,255,.16); color:rgba(255,255,255,.95); }
.pn-unit.on .pn-check { display:grid; }
.pn-check svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pn-date-note { font-size:12px; color:rgba(255,255,255,.55); }

/* Movimientos por ubicación: resultados */
.pn-results { display:flex; flex-direction:column; gap:6px; }
.pn-visit { display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); }
.pn-visit-top, .pn-visit-bot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pn-plate { font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.pn-visit-n { flex:none; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.pn-visit-bot > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; }
.pn-link { flex:none; display:inline-flex; align-items:center; gap:5px; padding:0; border:0; background:none; color:rgba(255,255,255,.9); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.pn-link:hover { text-decoration:underline; text-underline-offset:3px; }
.pn-link svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#geocerca-overlay .geocerca-empty, #lugar-overlay .geocerca-empty, #zona-overlay .geocerca-empty { padding:20px 12px; font-size:12px; color:rgba(255,255,255,.55); }

/* Obras y Lugares: listas */
.pn-list { display:flex; flex-direction:column; gap:2px; }
.pn-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; transition:background 120ms; }
.pn-row:hover { background:rgba(255,255,255,.05); }
.pn-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.pn-top { display:flex; align-items:center; gap:8px; min-width:0; }
.pn-name { min-width:0; padding:0; border:0; background:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.9); font:inherit; font-size:14px; font-weight:500; text-align:left; cursor:pointer; }
.pn-name:hover { text-decoration:underline; text-underline-offset:3px; }
.pn-meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:rgba(255,255,255,.55); }
.pn-badge { flex:none; display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border-radius:6px; font-size:11px; font-weight:600; color:var(--c); background:var(--cbg); }
.pn-badge i { width:5px; height:5px; border-radius:50%; background:var(--c); }
.pn-badge.open { --c:#4ade80; --cbg:rgba(74,222,128,.12); }
.pn-badge.closed { --c:#f87171; --cbg:rgba(248,113,113,.12); }
.pn-actions { flex:none; display:flex; gap:4px; }
.pn-iconbtn { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:8px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); cursor:pointer; }
.pn-iconbtn:hover { background:rgba(255,255,255,.12); color:rgba(255,255,255,.95); }
.pn-iconbtn.danger:hover { background:rgba(248,113,113,.12); color:#f87171; }
.pn-iconbtn svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Lugares: formulario */
.lugar-days { display:flex; gap:6px; }
.lugar-day { flex:1; position:relative; }
.lugar-day input { position:absolute; opacity:0; pointer-events:none; }
.lugar-day span { height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); font-size:12px; font-weight:600; cursor:pointer; }
.lugar-day input:checked + span { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.95); }
.lugar-day input:focus-visible + span { outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.lugar-time-row { display:flex; gap:10px; }
.lugar-time-row .vw-field { flex:1; min-width:0; }
.lugar-hours-fields { display:flex; flex-direction:column; gap:12px; }
@media (max-width:720px) { .fleet-config-check { width:44px; height:26px; } .fleet-config-check::after { width:22px; height:22px; } .fleet-config-check:checked::after { transform:translateX(18px); } .pn-iconbtn { width:34px; height:34px; } .pn-unit, .pn-row, .fleet-config-row { min-height:48px; } }

.zona-map-label { background:rgba(62,52,20,.9)!important; border:1px solid rgba(253,230,138,.5)!important; color:#fef3c7!important; box-shadow:0 3px 12px rgba(0,0,0,.35)!important; font-size:10px!important; }
.zona-map-label::before { display:none!important; }
body.zona-picking #map { cursor:crosshair; }
.fl-dropdown.obras-mode .fl-stats { display:none; }
.ruta-picker { position:fixed; top:76px; left:50%; transform:translateX(-50%); z-index:34; display:none; align-items:center; gap:9px; max-width:calc(100vw - 24px); padding:10px 14px; border:1px solid rgba(125,211,252,.25); border-radius:12px; background:rgba(12,18,24,.94); color:#bae6fd; box-shadow:0 10px 30px rgba(0,0,0,.48); font-size:12px; pointer-events:none; }
.ruta-picker.open { display:flex; }
/* ═══════════════════════════════════════════════════
   VENTANAS · sistema común (panel lateral, diálogo)
   ═══════════════════════════════════════════════════ */
.vwin { position:fixed; z-index:36; display:none; flex-direction:column; box-sizing:border-box; overflow:hidden; background:rgba(20,20,22,.94); border:1px solid rgba(255,255,255,.09); border-radius:14px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 8px 24px rgba(0,0,0,.35); color:rgba(255,255,255,.9); font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif; }
.vwin.open { display:flex; }
.vwin-side { top:76px; right:12px; width:400px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 160px); }
.vw-head { flex:none; display:flex; align-items:center; gap:10px; padding:14px 14px 14px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
.vw-icon { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.9); }
.vw-icon svg, .vw-action svg, .vw-close svg, .vw-back svg, .vw-btn svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vw-icon svg { width:16px; height:16px; }
.vw-titles { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.vw-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:600; color:rgba(255,255,255,.9); }
.vw-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:rgba(255,255,255,.55); }
.vw-sub:empty { display:none; }
.vw-action { height:30px; display:inline-flex; align-items:center; gap:6px; padding:0 10px; border:0; border-radius:9px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.9); font:inherit; font-size:12px; font-weight:500; white-space:nowrap; cursor:pointer; }
.vw-action svg { width:14px; height:14px; color:rgba(255,255,255,.55); }
.vw-close, .vw-back { width:30px; height:30px; flex:none; display:grid; place-items:center; border:0; border-radius:9px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); cursor:pointer; }
.vw-close svg, .vw-back svg { width:14px; height:14px; }
.vw-action:hover, .vw-close:hover, .vw-back:hover { background:rgba(255,255,255,.1); color:rgba(255,255,255,.9); }
.vw-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:14px; padding:16px; overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.vw-foot { flex:none; display:flex; flex-direction:column; gap:8px; padding:12px 16px 16px; border-top:1px solid rgba(255,255,255,.06); }
.vw-body > * { flex:none; }
.vw-field { display:flex; flex-direction:column; gap:6px; }
.vw-field > label { font-size:12px; font-weight:500; color:rgba(255,255,255,.55); }
.vw-input, .vw-field input { width:100%; height:38px; box-sizing:border-box; padding:0 12px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.9); color-scheme:dark; font:inherit; font-size:13px; outline:none; transition:border-color 120ms; }
.vw-input::placeholder { color:rgba(255,255,255,.3); }
.vw-input:focus, .vw-field input:focus { border-color:rgba(255,255,255,.28); }
.vw-seg { display:flex; gap:2px; padding:3px; border-radius:10px; background:rgba(255,255,255,.05); }
.vw-seg button { flex:1; height:30px; border:0; border-radius:8px; background:transparent; color:rgba(255,255,255,.55); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.vw-seg button.on { background:rgba(255,255,255,.12); color:rgba(255,255,255,.9); }
.vw-hint { margin-top:-8px; font-size:11px; color:rgba(255,255,255,.3); }
.vw-sec { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.vw-btn { height:38px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 14px; border:1px solid rgba(255,255,255,.22); border-radius:10px; background:rgba(255,255,255,.16); color:rgba(255,255,255,.95); font:inherit; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; transition:background 120ms; }
.vw-btn:hover { background:rgba(255,255,255,.22); }
.vw-btn:disabled { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09); color:rgba(255,255,255,.3); cursor:default; }
.vw-btn.ghost { background:transparent; border-color:rgba(255,255,255,.09); color:rgba(255,255,255,.7); font-weight:500; }
.vw-btn.ghost:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.95); }
.vw-btn.danger { color:#f87171; border-color:rgba(248,113,113,.25); }
.vw-btn.danger:hover { background:rgba(248,113,113,.1); }
.vw-btn.sm { height:30px; padding:0 10px; font-size:12px; }
.vw-btn svg { width:15px; height:15px; }
.vw-btn[hidden] { display:none; }
.vw-btn-row { display:flex; gap:8px; }
.vw-btn-row .vw-btn { flex:1 1 0; min-width:0; height:34px; padding:0 8px; font-size:12px; }

/* ── Planificar viaje: formulario ── */
.ruta-plan-route { display:flex; flex-direction:column; padding:4px 12px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.03); }
.ruta-plan-stops { display:flex; flex-direction:column; }
.ruta-plan-point, .ruta-plan-stop { position:relative; display:flex; align-items:center; gap:12px; min-height:64px; padding:8px 0; }
.ruta-plan-point:not(#ruta-plan-destino)::before, .ruta-plan-stop::before { content:''; position:absolute; left:11px; top:50%; height:100%; width:2px; background:rgba(255,255,255,.12); }
.ruta-plan-point.selecting { margin:0 -8px; padding:8px; border-radius:10px; background:rgba(255,255,255,.06); }
.ruta-plan-point.selecting::before { left:19px; }
.ruta-plan-num { position:relative; z-index:1; width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%; background:#3b3b3f; color:rgba(255,255,255,.9); font-size:11px; font-weight:700; }
.ruta-plan-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.ruta-plan-label { font-size:11px; color:rgba(255,255,255,.55); }
.ruta-plan-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.ruta-plan-value.empty { font-weight:500; color:rgba(255,255,255,.3); }
.ruta-plan-addr { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:rgba(255,255,255,.55); }
.ruta-plan-addr:empty { display:none; }
.ruta-plan-pick { height:28px; flex:none; padding:0 10px; border:0; border-radius:8px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.9); font:inherit; font-size:11px; font-weight:600; cursor:pointer; }
.ruta-plan-pick:hover { background:rgba(255,255,255,.14); }
.ruta-plan-dwell, .ruta-plan-stop-dwell { flex:none; display:flex; align-items:center; gap:4px; font-size:11px; color:rgba(255,255,255,.55); }
.ruta-plan-dwell input, .ruta-plan-stop-dwell input { width:46px; height:28px; padding:0 4px; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.9); color-scheme:dark; text-align:center; font:inherit; font-size:12px; outline:none; }
.ruta-plan-dwell input:focus, .ruta-plan-stop-dwell input:focus { border-color:rgba(255,255,255,.28); }
.ruta-plan-stop-btns { flex:none; display:flex; gap:3px; }
.ruta-plan-stop-btn { width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:8px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); cursor:pointer; }
.ruta-plan-stop-btn:hover { background:rgba(255,255,255,.12); color:rgba(255,255,255,.95); }
.ruta-plan-stop-btn svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ruta-plan-add { height:34px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px dashed rgba(255,255,255,.16); border-radius:10px; background:transparent; color:rgba(255,255,255,.7); font:inherit; font-size:12px; font-weight:500; cursor:pointer; }
.ruta-plan-add:hover { background:rgba(255,255,255,.05); color:rgba(255,255,255,.95); }
.ruta-plan-add:disabled { opacity:.4; cursor:default; }
.ruta-plan-add svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.ruta-plan-help { display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.4; color:rgba(255,255,255,.55); }
.ruta-plan-help svg { width:14px; height:14px; flex:none; margin-top:1px; fill:none; stroke:rgba(255,255,255,.3); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ruta-plan-panel.subview { visibility:hidden; }

/* ── Planificar viaje: elegir punto (misma posición, dentro del panel) ── */
.ruta-punto-panel { z-index:37; }
.rp-list { display:flex; flex-direction:column; gap:2px; }
.rp-sec { padding:12px 8px 4px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.rp-sec:first-child { padding-top:2px; }
.rp-item { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:1px solid transparent; border-radius:10px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background 120ms; }
.rp-item:hover { background:rgba(255,255,255,.06); }
.rp-item.map { border-color:rgba(255,255,255,.09); margin-bottom:4px; }
.rp-ico { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:9px; border:1px solid var(--zb,rgba(255,255,255,.09)); background:var(--zbg,rgba(255,255,255,.05)); color:var(--zc,rgba(255,255,255,.7)); }
.rp-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rp-ico.obra { --zc:#fde68a; --zbg:rgba(253,230,138,.08); --zb:rgba(253,230,138,.15); }
.rp-ico.lugar { --zc:#93c5fd; --zbg:rgba(147,197,253,.08); --zb:rgba(147,197,253,.15); }
.rp-copy { min-width:0; flex:1; }
.rp-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; color:rgba(255,255,255,.9); }
.rp-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; font-size:12px; color:rgba(255,255,255,.55); }
.rp-arrow { width:14px; height:14px; flex:none; fill:none; stroke:rgba(255,255,255,.3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── Planificar viaje: resultado ── */
.ruta-info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border-radius:12px; background:rgba(255,255,255,.05); }
.ruta-info-stat { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-right:1px solid rgba(255,255,255,.06); }
.ruta-info-stat:last-child { border-right:0; }
.ruta-info-label { order:-1; font-size:9px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.ruta-info-value { font-size:18px; font-weight:600; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ruta-info-stat:last-child .ruta-info-value { font-size:20px; }
.ruta-detail { display:flex; flex-direction:column; }
.ruta-detail:empty { display:none; }
.vw-body:has(.ruta-detail:empty) .vw-sec { display:none; }
.rd-point { position:relative; z-index:1; display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:12px; align-items:center; }
.ruta-detail-num { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#3b3b3f; color:rgba(255,255,255,.9); font-size:11px; font-weight:700; }
.rd-copy { min-width:0; }
.rd-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.rd-sub { margin-top:1px; font-size:12px; color:rgba(255,255,255,.55); }
.rd-time { font-size:14px; font-weight:600; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; }
.rd-leg { display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:center; min-height:34px; }
.rd-line { justify-self:center; width:2px; align-self:stretch; background:rgba(255,255,255,.12); }
.rd-leg-data { display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; }
.rd-leg-data svg { width:12px; height:12px; fill:none; stroke:rgba(255,255,255,.3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ruta-detail-point { max-width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; font-weight:inherit; text-align:left; cursor:default; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ruta-detail-point.editable { text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; cursor:pointer; }
.rd-note { display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); font-size:12px; line-height:1.4; color:rgba(255,255,255,.55); }
.rd-note b { display:block; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.rd-note.ok b { color:#4ade80; }
.rd-note.warn b { color:#fbbf24; }
.ruta-plan-map-pin { width:28px; height:28px; display:grid; place-items:center; border:2px solid #141416; border-radius:50%; background:#fff; color:#141416; font-size:11px; font-weight:700; box-shadow:0 3px 13px rgba(0,0,0,.6); }
.ruta-plan-map-pin.stop { background:#e5e5e7; color:#141416; }
.ruta-plan-map-pin.end { background:#fff; color:#141416; }
.ruta-plan-map-label { padding:4px 8px!important; border:1px solid rgba(255,255,255,.09)!important; border-radius:8px!important; background:rgba(20,20,22,.94)!important; color:rgba(255,255,255,.9)!important; box-shadow:0 3px 12px rgba(0,0,0,.5)!important; font-size:11px!important; font-weight:500!important; }
.ruta-plan-map-label::before { border-right-color:rgba(20,20,22,.94)!important; }

/* ── Diálogos de Planificar (destino, guardadas, nombre) ── */
.ruta-destinos-overlay { position:fixed; inset:0; z-index:125; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.ruta-destinos-overlay.open { display:flex; }
.ruta-destinos-panel { width:min(420px,100%); max-height:min(620px,86dvh); display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(20,20,22,.96); box-shadow:0 8px 24px rgba(0,0,0,.35); color:rgba(255,255,255,.9); }
.ruta-destinos-list { padding:8px; overflow:auto; }
.ruta-saved-panel { width:min(460px,100%); }
.ruta-saved-list { max-height:min(520px,70vh); overflow:auto; padding:10px; display:flex; flex-direction:column; gap:6px; }
.ruta-saved-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); }
.ruta-saved-copy { min-width:0; flex:1; }
.ruta-saved-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.ruta-saved-meta { margin-top:2px; font-size:12px; color:rgba(255,255,255,.55); }
.ruta-saved-actions { display:flex; gap:6px; }
.ruta-name-panel { width:min(420px,100%); }
.ruta-name-body { display:flex; flex-direction:column; gap:12px; padding:16px; }
.ruta-name-body label { font-size:12px; font-weight:500; color:rgba(255,255,255,.55); }
.ruta-name-body input { width:100%; height:38px; box-sizing:border-box; padding:0 12px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.9); font:inherit; font-size:13px; outline:none; }
.ruta-name-body input:focus { border-color:rgba(255,255,255,.28); }
.ruta-name-help { min-height:16px; font-size:12px; line-height:1.4; color:rgba(255,255,255,.55); }
.ruta-name-actions { display:flex; justify-content:flex-end; gap:8px; }
.ruta-name-actions .vw-btn { min-width:96px; }

/* ── Cabecera compartida por las ventanas anteriores (misma base visual) ── */
@media (max-width:720px) {
  .vwin-side { top:max(8px,env(safe-area-inset-top)); left:8px; right:8px; width:auto; max-width:none; max-height:calc(100dvh - 90px - env(safe-area-inset-bottom)); }
  #ruta-info.vwin-side { top:auto; bottom:calc(76px + env(safe-area-inset-bottom)); max-height:56dvh; }
  .vw-btn { height:42px; }
  .vw-btn-row .vw-btn { height:40px; }
  .ruta-plan-pick, .ruta-plan-stop-btn { min-height:34px; }
}

body.ruta-picking #map { cursor:crosshair; }
.fuel-map-label { background:transparent!important; border:0!important; }
.fuel-map-tag {
  display:flex; align-items:center; gap:5px; width:max-content; transform:translate(-4px,-4px);
  padding:5px 8px; border-radius:9px; background:rgba(8,12,18,.94);
  border:0; color:rgba(255,255,255,.82); font-size:10px; font-weight:700;
  box-shadow:0 5px 18px rgba(0,0,0,.48);
}
.obra-map-tag { display:flex; align-items:center; gap:5px; width:max-content; transform:translate(-4px,-4px); padding:5px 8px; border-radius:9px; background:rgba(58,48,12,.94); border:1px solid rgba(253,230,138,.22); color:#fde68a; font-size:10px; font-weight:700; box-shadow:0 5px 18px rgba(0,0,0,.48); }
.obra-map-icon { width:14px; height:14px; display:block; flex:none; }
.fuel-ancap-icon { width:14px; height:14px; display:block; flex:none; color:currentColor; }
.fuel-popup-title { font-size:12px; font-weight:750; color:#fff; margin-bottom:6px; }
.fuel-popup-line { font-size:11px; color:rgba(255,255,255,.62); margin-top:3px; }

/* Paneles, informes y adaptación móvil */
/* ── PARTE DEL DÍA OVERLAY ── */
#parte-overlay {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.56); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity 220ms var(--ease-out);
}
#parte-overlay.open { opacity:1; pointer-events:all; }
#periodo-overlay { position:fixed; inset:0; z-index:108; background:rgba(0,0,0,.56); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity 220ms var(--ease-out); }
#periodo-overlay.open { opacity:1; pointer-events:all; }
.parte-panel {
  width:min(1120px,100%); max-height:calc(100dvh - 48px);
  background:rgba(20,20,22,.96);
  border:1px solid rgba(255,255,255,.09); border-radius:16px;
  box-shadow:0 18px 54px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; flex-direction:column; overflow:hidden;
  color:rgba(255,255,255,.9);
}
.parte-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px 14px 16px; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
}
.parte-title { min-width:0; font-size:15px; font-weight:600; color:rgba(255,255,255,.9); display:flex; align-items:center; gap:8px; }
.parte-ts { font-size:11px; color:rgba(255,255,255,.3); font-weight:400; }
.parte-head-actions { display:flex; align-items:center; gap:8px; }
.parte-date {
  height:30px; padding:0 9px; border:1px solid rgba(255,255,255,.11); border-radius:8px;
  background:#1b1d24; color:rgba(255,255,255,.82); color-scheme:dark;
  font:inherit; font-size:11px; outline:none; cursor:pointer;
}
.parte-date:focus { border-color:rgba(255,255,255,.28); }
.parte-close {
  width:30px; height:30px; flex:none; border-radius:9px; border:0;
  background:rgba(255,255,255,.05); cursor:pointer; color:rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  transition:background 120ms, color 120ms;
}
.parte-close:hover { background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); }
.parte-summary {
  padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; gap:16px; font-size:12px; color:rgba(255,255,255,.62); flex-wrap:wrap; flex-shrink:0;
  background:rgba(255,255,255,.018);
}
.parte-body { flex:1; min-height:0; overflow:auto; padding:0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.parte-table { width:100%; min-width:1040px; border-collapse:collapse; font-size:12px; }
.parte-table th {
  padding:8px 10px; text-align:left; font-size:10px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.07);
  position:sticky; top:0; background:rgba(14,16,22,.98); white-space:nowrap;
}
.parte-table th.r { text-align:right; }
.parte-table th.c { text-align:center; }
.parte-table td.r { text-align:right; font-variant-numeric:tabular-nums; }
.parte-table td.c { text-align:center; }
.parte-table td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.04); color:rgba(255,255,255,.75); vertical-align:middle; white-space:nowrap; }
.parte-table th:nth-child(1),.parte-table td:nth-child(1) { min-width:58px; }
.parte-table th:nth-child(2),.parte-table td:nth-child(2) { min-width:86px; }
.parte-table th:nth-child(3),.parte-table td:nth-child(3) { min-width:120px; }
.parte-table th:nth-child(4),.parte-table td:nth-child(4) { min-width:110px; }
.parte-table th:nth-child(5),.parte-table td:nth-child(5) { min-width:100px; }
.parte-table th:nth-child(6),.parte-table td:nth-child(6) { min-width:70px; }
.parte-table th:nth-child(7),.parte-table td:nth-child(7) { min-width:112px; }
.parte-table th:nth-child(8),.parte-table td:nth-child(8) { min-width:65px; }
.parte-table th:nth-child(9),.parte-table td:nth-child(9) { min-width:75px; }
.parte-table th:nth-child(10),.parte-table td:nth-child(10) { min-width:70px; }
.parte-table th:nth-child(11),.parte-table td:nth-child(11) { min-width:150px; }
.parte-table tr:last-child td { border-bottom:none; }
.parte-table tr:hover td { background:rgba(255,255,255,.03); }
.parte-group td { padding:5px 12px; background:rgba(255,255,255,.03); font-size:10px; font-weight:700; color:rgba(255,255,255,.3); letter-spacing:.06em; text-transform:uppercase; }
.parte-actions { display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
.parte-detail-row td { padding:0!important; background:rgba(255,255,255,.014)!important; border-bottom:1px solid rgba(255,255,255,.07)!important; }
.parte-detail { display:none; padding:12px 18px 15px; }
.parte-detail.open { display:block; }
.parte-detail-loading,.parte-detail-empty { color:rgba(255,255,255,.35); font-size:11px; padding:5px 0; }
.parte-events { position:relative; display:block; padding:1px 0; }
.parte-events::before { content:''; position:absolute; top:10px; bottom:10px; left:53px; width:1px; background:rgba(255,255,255,.09); }
.parte-event { position:relative; width:100%; display:grid; grid-template-columns:38px 18px minmax(0,1fr); align-items:center; gap:7px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.045); background:transparent; }
.parte-event:last-child { border-bottom:0; }
.parte-event-time { font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.72); }
.parte-event-icon { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:var(--event-color,#a3a9b4); background:color-mix(in srgb,var(--event-color,#a3a9b4) 15%,transparent); }
.parte-event-icon svg { width:11px; height:11px; }
.parte-event-copy { min-width:0; }
.parte-event-title { font-size:11px; font-weight:650; color:rgba(255,255,255,.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.parte-event-sub { margin-top:2px; font-size:9px; color:rgba(255,255,255,.34); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.periodo-panel { width:min(1120px,100%); max-width:1120px; max-height:calc(100dvh - 48px); }
.periodo-form { display:grid; grid-template-columns:160px 160px minmax(210px,1fr) auto auto; align-items:end; gap:12px; padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
.periodo-form input,.periodo-form select { height:38px; padding:0 10px; border:1px solid rgba(255,255,255,.11); border-radius:9px; background:#1b1d24; color:rgba(255,255,255,.82); color-scheme:dark; font:inherit; font-size:12px; }
.periodo-form select option { background:#1b1d24; color:#eee; }
.periodo-form .informe-submit { height:38px; justify-self:start; }
.periodo-form .periodo-export { background:rgba(255,255,255,.08); color:rgba(255,255,255,.72); }
.periodo-form .periodo-export:disabled { opacity:.32; cursor:not-allowed; }
.periodo-table { width:100%; min-width:1180px; table-layout:auto; }
.periodo-table th,.periodo-table td { min-width:0!important; padding-left:6px; padding-right:6px; }
.periodo-table th { font-size:9px; letter-spacing:.02em; }
.periodo-table td { font-size:11px; }
.periodo-table th:nth-child(4),.periodo-table td:nth-child(4),.periodo-table th:nth-child(5),.periodo-table td:nth-child(5) { max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.periodo-empty { padding:32px!important; text-align:center!important; color:rgba(255,255,255,.32)!important; }
.periodo-status { font-size:10px; font-weight:650; white-space:nowrap; }
.periodo-status.active { color:#4ade80; }.periodo-status.inactive { color:rgba(255,255,255,.3); }
.periodo-exceso { display:inline-block; min-width:24px; padding:2px 7px; border:1px solid rgba(248,113,113,.25); border-radius:99px; background:rgba(248,113,113,.09); color:#fca5a5; font-size:10px; font-weight:700; }

/* ── CONSULTA DE RECORRIDO ── */
.lugar-popup-address { margin-top:4px; max-width:250px; color:#64748b; font-size:11px; line-height:1.4; }
#obra-report-overlay { position:fixed; inset:0; z-index:119; background:rgba(0,0,0,.56); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity 220ms var(--ease-out); }
#obra-report-overlay.open { opacity:1; pointer-events:all; }
.obra-report-panel { width:min(920px,100%); max-height:calc(100dvh - 48px); display:flex; flex-direction:column; background:rgba(20,20,22,.96); border:1px solid rgba(255,255,255,.09); border-radius:16px; box-shadow:0 18px 54px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; color:rgba(255,255,255,.9); }
.obra-report-form { display:grid; grid-template-columns:1fr 160px auto; gap:12px; align-items:end; padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.07); }
.obra-report-results { min-height:110px; overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.obra-report-table { width:100%; border-collapse:collapse; font-size:11px; }
.obra-report-table th { position:sticky; top:0; z-index:1; padding:9px 11px; background:#15171d; color:rgba(255,255,255,.36); font-size:9px; text-align:left; text-transform:uppercase; letter-spacing:.04em; }
.obra-report-table td { padding:10px 11px; border-bottom:1px solid rgba(255,255,255,.045); color:rgba(255,255,255,.68); }
.obra-report-table tr:hover td { background:rgba(255,255,255,.025); }
.obra-report-duration { color:#fde68a!important; font-weight:700; }
.obra-report-table .obra-meta { margin-top:2px; color:rgba(255,255,255,.3); font-size:9px; }
@media (max-width:680px) { .obra-report-form { grid-template-columns:1fr; } .obra-report-table th:nth-child(3),.obra-report-table td:nth-child(3) { display:none; } }
.informe-panel {
  width:min(520px,100%); background:rgba(14,16,22,.97);
  border:1px solid rgba(255,255,255,.1); border-radius:18px;
  box-shadow:0 24px 64px rgba(0,0,0,.7); overflow:hidden;
}
.informe-form { display:grid; grid-template-columns:1fr 150px; gap:14px; padding:20px; }
.informe-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.informe-field label { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.34); }
.informe-field select, .informe-field input {
  display:block; width:100%; min-width:0; max-width:100%; height:40px; padding:0 11px; border-radius:10px;
  border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86); font:inherit; font-size:12px; outline:none; color-scheme:dark;
}
.informe-form > *,.geocerca-form > *,.obra-report-form > *,.lugar-form > *,.zona-form > * { min-width:0; max-width:100%; }
.informe-field input[type="date"],.informe-field input[type="time"],.informe-field input[type="datetime-local"],
.parte-date,.ruta-plan-departure input[type="datetime-local"] { box-sizing:border-box; min-width:0; max-width:100%; overflow:hidden; }
.informe-field input[type="date"]::-webkit-date-and-time-value,
.informe-field input[type="time"]::-webkit-date-and-time-value,
.informe-field input[type="datetime-local"]::-webkit-date-and-time-value,
.parte-date::-webkit-date-and-time-value { min-width:0; text-align:left; }
.informe-field select:focus, .informe-field input:focus { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.09); }
.informe-field select {
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:36px;
  background-color:#1b1d24;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%),linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%);
  background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.informe-field select:hover { background-color:#22242c; border-color:rgba(255,255,255,.2); }
.informe-field select option { background:#1b1d24; color:#e8e9ed; }
.informe-actions { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:4px; }
.informe-help { font-size:11px; color:rgba(255,255,255,.3); line-height:1.4; }
.informe-submit { height:38px; padding:0 16px; border:0; border-radius:10px; background:rgba(255,255,255,.92); color:#151515; font:inherit; font-size:12px; font-weight:650; cursor:pointer; white-space:nowrap; }
.informe-submit:hover { background:#fff; }
@media (max-width:560px) { .informe-form { grid-template-columns:1fr; } .informe-actions { grid-column:1; align-items:flex-start; flex-direction:column; } .informe-submit { width:100%; } }

/* ── CONSULTA POR GEOCERCA ── */
.geocerca-empty { padding:28px 20px; text-align:center; color:rgba(255,255,255,.32); font-size:12px; line-height:1.5; }
.geocerca-view { border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.72); padding:6px 8px; cursor:pointer; font:inherit; font-size:10px; }
.geocerca-view:hover { background:rgba(255,255,255,.12); color:#fff; }
.geocerca-route-label { border:1px solid rgba(96,165,250,.5)!important; border-radius:7px!important; background:rgba(13,24,42,.9)!important; color:#bfdbfe!important; box-shadow:0 5px 18px rgba(0,0,0,.38)!important; font-size:10px!important; font-weight:700!important; }
.geocerca-route-label::before { display:none!important; }
#geocerca-picker {
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:120;
  display:none; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  background:rgba(15,17,22,.94); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.82);
  box-shadow:0 12px 34px rgba(0,0,0,.5); font-size:12px; pointer-events:none;
}
#geocerca-picker.open { display:flex; }
body.geocerca-picking #map { cursor:crosshair; }

/* ── EXPERIENCIA MÓVIL ─────────────────────────────────────────────── */
@media (max-width:720px) {
  html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
  #map,.leaflet-container,.leaflet-touch-drag { touch-action:none!important; overscroll-behavior:none; }
  button,[role="button"],input,select,label { touch-action:manipulation; }
  /* Permitir desplazar controles sin que un pellizco amplíe el documento. */
  #app-dock,.fl-panel,#fc-strip,#tl-wrap,.leaflet-popup,
  .ruta-plan-panel,.ruta-info,.parte-panel,.informe-panel,.geocerca-panel,
  .obra-report-panel,#zona-panel { touch-action:pan-x pan-y!important; }
  .map-location-control { display:block; margin-top:calc(76px + env(safe-area-inset-top))!important; margin-right:10px!important; }
  .map-location-btn { width:44px; height:44px; }
  .fl-panel {
    left:10px; right:10px; top:max(8px,env(safe-area-inset-top)); width:auto; max-width:none;
  }
  .fl-searchbar { height:54px; padding:0 8px 0 14px; border-radius:13px; }
  .fl-searchbar-inner input { height:40px; font-size:16px; }
  .fl-top-btn,.fl-avatar { width:40px; height:40px; border-radius:11px; }
  .fl-avatar { font-size:12px; }
  .fl-dropdown { margin-top:0; border-radius:0 0 13px 13px; }
  .fl-dropdown.open { max-height:min(62dvh,calc(100dvh - 138px)); }
  .fl-filter-tab { min-height:40px; font-size:11px; }
  .ml-chip { padding:8px 8px; }
  .ml-row { padding:11px 10px; }
  .ml-go { height:40px; }
  .fl-clear { width:24px; height:24px; }

  /* Barra inferior con etiquetas: icono arriba, texto abajo */
  #app-dock {
    left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); transform:none;
    width:auto; max-width:none; height:60px; z-index:300; padding:4px; gap:2px;
    border-radius:16px; overflow:visible; touch-action:manipulation;
  }
  #fl-fullscreen-btn { display:none; }
  #app-dock > .dock-btn, #app-dock > .dock-group { flex:1 1 0; min-width:0; }
  .dock-group { position:static; }
  .dock-btn { flex-direction:column; justify-content:center; gap:3px; width:100%; height:100%; padding:0; border-radius:12px; font-size:10px; }
  .dock-btn svg { width:20px; height:20px; }
  .dock-caret, .dock-divider { display:none!important; }
  .dock-user { padding:0; }
  .dock-user .fl-avatar { width:24px; height:24px; }
  .dock-label-user { display:block; }
  .ruta-picker { top:calc(max(8px,env(safe-area-inset-top)) + 62px); }
  .dock-submenu, .dock-usermenu { left:0; right:0; bottom:calc(100% + 8px); min-width:0; }
  .dock-sub-btn { height:44px; font-size:14px; }

  #fc-strip {
    bottom:calc(76px + env(safe-area-inset-bottom)); justify-content:flex-start;
    padding:0 10px; gap:0; pointer-events:auto; touch-action:pan-x;
  }
  .fc-nav,.fc-drag { display:none; }
  #fc-scroll { width:100%; max-width:none!important; gap:8px; padding:4px 0; scroll-padding:10px; pointer-events:auto; touch-action:pan-x; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  .vc-card { width:min(86vw,322px); min-width:min(86vw,322px); height:228px; border-radius:16px; pointer-events:auto; touch-action:pan-x; scroll-snap-stop:always; }
  .vc-expand,.vc-range { touch-action:manipulation; }
  .vc-map-section { border-radius:16px; }
  .vc-body { padding:13px 15px 8px; }
  .vc-header { margin-bottom:8px; }
  .vc-name { font-size:16px; }
  .vc-expand { min-width:36px; min-height:36px; justify-content:center; margin-top:-7px; margin-right:-7px; }
  .vc-map-section::before { height:94px; }
  .vc-scrub { padding:15px 13px 25px; }
  .vc-range::-webkit-slider-thumb { width:44px; height:44px; }

  #tl-wrap { bottom:calc(76px + env(safe-area-inset-bottom)); padding:0 8px; }
  .tl-panel { width:100%; padding:12px 12px 12px; border-radius:13px; }
  .tl-meta { align-items:center; flex-wrap:nowrap; gap:8px; margin-bottom:4px; }
  .tl-spacer { display:none; }
  .tl-jornada { flex:1; min-width:0; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tl-status { min-height:32px; margin-bottom:6px; gap:6px 10px; }
  .tl-st-time { font-size:26px; }
  .tl-close { width:36px; height:36px; margin-top:-5px; margin-bottom:-5px; margin-right:-3px; }
  .tl-row { gap:5px; }
  .tl-time { width:31px; font-size:10px; }
  .tl-track { height:52px; }
  .tl-slider::-webkit-slider-thumb { width:44px; height:44px; }
  .tl-legend { font-size:10px; margin-top:6px; gap:6px 10px; }

  #parte-overlay,#periodo-overlay,#obra-report-overlay {
    align-items:flex-end; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .parte-panel,.informe-panel,.geocerca-panel,.obra-report-panel {
    width:100%; max-height:88dvh; border-radius:20px 20px 14px 14px;
  }
  .parte-head { min-width:0; padding:12px 14px; gap:8px; }
  .parte-title { min-width:0; }
  .parte-panel .parte-title { font-size:12px; }
  .parte-panel .parte-ts { font-size:9px; }
  .parte-head-actions { min-width:0; gap:5px; }
  .parte-close { width:44px; height:44px; border-radius:12px; }
  .parte-date { width:min(132px,40vw); height:40px; min-width:0; max-width:132px; padding:0 7px; font-size:12px; }
  .parte-summary { padding:8px 12px; gap:6px 12px; font-size:10px; line-height:1.3; }
  .parte-body,.obra-report-results,.geocerca-results { overflow:auto; touch-action:pan-x pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .fleet-config-list,.zona-list,.fl-list {
    touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  .obra-report-results { width:100%; min-width:0; min-height:0; max-width:100%; overflow:auto; touch-action:pan-x pan-y; }
  .fl-scroll-btn { display:none!important; }
  .parte-table { min-width:820px; font-size:10px; }
  .parte-table th { padding:7px 9px; font-size:8px; }
  .parte-table td { padding:7px 9px; font-size:10px; }
  .periodo-form { grid-template-columns:minmax(0,1fr); padding:12px 14px; gap:11px; }
  .periodo-form .informe-field:nth-child(3) { grid-column:auto; }
  .periodo-form .informe-submit { width:100%; }
  .periodo-form input,.periodo-form select { width:100%; min-width:0; height:42px; font-size:16px; }
  .periodo-table { min-width:1220px; }
  .parte-group td { padding:5px 9px; font-size:8px; }
  .obra-report-table { min-width:620px; }
  .obra-report-table th:nth-child(3),.obra-report-table td:nth-child(3) { display:table-cell!important; }
  .informe-form,.geocerca-form,.obra-report-form { grid-template-columns:1fr; gap:11px; padding:14px; }
  .obra-report-form { width:100%; box-sizing:border-box; overflow:hidden; }
  .obra-report-form .informe-field { width:100%; min-width:0; max-width:100%; align-self:stretch; overflow:hidden; }
  .obra-report-form .informe-field input,
  .obra-report-form .informe-field select {
    display:block; box-sizing:border-box; inline-size:100%; width:100%;
    min-inline-size:0; min-width:0; max-inline-size:100%; max-width:100%; margin:0;
  }
  .obra-report-form input[type="date"] { -webkit-appearance:none; appearance:none; }
  .informe-actions,.geocerca-query { grid-column:1; }
  .informe-field select,.informe-field input { width:100%; min-width:0; max-width:100%; height:46px; font-size:16px; }
  .informe-submit,.geocerca-location,.geocerca-radius-value { min-height:46px; }
  .geocerca-query { align-items:stretch; }
  .geocerca-row { grid-template-columns:minmax(0,1fr) 78px; padding:12px 14px; }
  .geocerca-time { font-size:11px; }
  .geocerca-view { min-height:38px; }
  .fleet-config-tools { padding:10px 14px 4px; }
  .fleet-config-tools button { min-height:40px; }
  .fleet-map-config { margin:10px 14px 4px; }
  .fleet-config-row { min-height:48px; }
  .fleet-config-check { width:44px; height:26px; }
  .fleet-config-check::after { width:22px; height:22px; }
  .fleet-config-check:checked::after { transform:translateX(18px); }

  #zona-panel {
    left:8px!important; right:8px!important; top:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom)); width:auto; max-height:62dvh;
  }
  #zona-panel .parte-head { cursor:default; touch-action:auto; }
  .zona-form { grid-template-columns:1fr; gap:10px; padding:12px 14px; overflow:auto; }
  .zona-name-field,.zona-actions { grid-column:1; }
  .zona-draw { min-height:46px; }
  .zona-actions { align-items:stretch; flex-direction:column; }
  .zona-actions .informe-submit { width:100%; }
  .zona-list { max-height:25dvh; }
  .zona-row { min-height:52px; padding:9px 14px; }
  .zona-delete { min-width:44px; min-height:38px; }
  .lugar-new { min-height:40px; padding:0 10px; font-size:10px; }

  .dock-btn:active,.dock-sub-btn:active,.fl-top-btn:active,.fl-filter-tab:active,
  .informe-submit:active,.fv-card:active { transform:scale(.96); }
}

@media (max-width:380px) {
  .fl-panel { left:7px; right:7px; }
  .fl-searchbar { gap:4px; padding-left:6px; padding-right:6px; }
  .fl-top-btn { width:38px; }
  .vc-card { width:86vw; min-width:86vw; }
}

@media (prefers-reduced-motion:reduce) {
  .fl-dropdown,#fc-strip,#tl-wrap,.dock-submenu,#parte-overlay,#periodo-overlay,#informe-overlay,
  #fleet-config-overlay,#geocerca-overlay,#obra-report-overlay { transition:none!important; }
  .fl-marker.moving::before,.vc-dot.moving { animation:none!important; }
}

/* ── TEMA CLARO OPERATIVO ───────────────────────────────────── */
html.gps-light, html.gps-light body,
html[data-gps-theme="light"], html[data-gps-theme="light"] body,
body[data-gps-theme="light"] { background:#eef1f4!important; color-scheme:light; }
html.gps-light .leaflet-container, html.gps-light .leaflet-tile-pane,
html[data-gps-theme="light"] .leaflet-container, html[data-gps-theme="light"] .leaflet-tile-pane { background:#e6eaee!important; }
.gps-light #fleet-loading { background:#eef1f4; color:#101820; }
.gps-light .fleet-loading-copy,.gps-light .fleet-loading-status { color:#5f6975; }
.gps-light #app-dock,
.gps-light .fl-searchbar,
.gps-light .fl-dropdown,
.gps-light .dock-submenu,
.gps-light .vwin,
.gps-light .ruta-destinos-panel,
.gps-light .parte-panel,
.gps-light .obra-report-panel,
.gps-light .informe-panel,
html[data-gps-theme="light"] #app-dock,
html[data-gps-theme="light"] .fl-searchbar,
html[data-gps-theme="light"] .fl-dropdown,
html[data-gps-theme="light"] .dock-submenu,
html[data-gps-theme="light"] .vwin,
html[data-gps-theme="light"] .ruta-destinos-panel,
html[data-gps-theme="light"] .parte-panel,
html[data-gps-theme="light"] .obra-report-panel,
html[data-gps-theme="light"] .informe-panel {
  background:rgba(238,242,246,.90)!important;
  border-color:rgba(11,17,23,.11)!important;
  color:#101820!important;
  box-shadow:0 12px 34px rgba(24,32,43,.16), inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.gps-light .dock-btn,
.gps-light .dock-sub-btn,
.gps-light .vw-title,
.gps-light .parte-title,
.gps-light .vc-name,
.gps-light .ml-plate,
.gps-light .ml-zc b,
.gps-light .pn-name,
.gps-light .pn-card-copy b,
.gps-light .pn-sw-copy b,
.gps-light .fleet-config-plate { color:#101820; }
.gps-light .dock-btn:hover,
.gps-light .dock-btn.active,
.gps-light .dock-btn.current,
.gps-light .dock-sub-btn:hover,
.gps-light .dock-sub-btn.active,
.gps-light .fl-filter-tab.active,
.gps-light .vw-seg button.on { background:rgba(11,17,23,.08); color:#101820; }
.gps-light .dock-btn,
.gps-light .dock-sub-btn svg,
.gps-light .dock-caret,
.gps-light .fl-searchbar-inner svg,
.gps-light .vw-sub,
.gps-light .vw-field > label,
.gps-light .vw-sec,
.gps-light .pn-note,
.gps-light .pn-status,
.gps-light .ml-sub,
.gps-light .ml-summary,
.gps-light .fleet-config-sub,
.gps-light .parte-ts { color:#5f6975; }
.gps-light .dock-divider,
.gps-light .dock-sep,
.gps-light .vw-head,
.gps-light .vw-foot,
.gps-light .parte-head,
.gps-light .parte-summary { border-color:rgba(11,17,23,.08); background:rgba(238,242,246,.38); }
.gps-light .fl-searchbar-inner input,
.gps-light .vw-input,
.gps-light .vw-field input,
.gps-light .informe-field input,
.gps-light .informe-field select,
.gps-light .parte-date {
  background:rgba(11,17,23,.05); border-color:rgba(11,17,23,.10); color:#101820; color-scheme:light;
}
.gps-light .fl-searchbar-inner input::placeholder,
.gps-light .vw-input::placeholder { color:#7a8490; }
.gps-light .fl-filter-tabs,
.gps-light .vw-seg,
.gps-light .pn-switchrow,
.gps-light .pn-card,
.gps-light .fleet-config-row:hover,
.gps-light .ml-row:hover,
.gps-light .ml-row.active,
.gps-light .pn-row:hover,
.gps-light .ruta-plan-route,
.gps-light .ruta-info-grid,
.gps-light .ml-metrics,
.gps-light .pn-visit { background:rgba(11,17,23,.055); }
.gps-light .fl-filter-tab,
.gps-light .ml-chip,
.gps-light .vw-seg button { color:#5f6975; }
.gps-light .ml-row.active,
.gps-light .pn-unit.on,
.gps-light .pn-card,
.gps-light .ml-metrics { border-color:rgba(11,17,23,.10); }
.gps-light .vc-card,
html[data-gps-theme="light"] .vc-card {
  background:rgba(232,237,242,.88)!important;
  border-color:rgba(11,17,23,.13)!important;
  box-shadow:0 12px 30px rgba(24,32,43,.20), inset 0 1px 0 rgba(255,255,255,.50)!important;
}
.gps-light .vc-map-img { filter:none; }
.gps-light .vc-map-section::before { background:linear-gradient(to bottom, rgba(232,237,242,.92) 0%, rgba(232,237,242,.66) 42%, rgba(232,237,242,.18) 72%, rgba(232,237,242,0) 100%); }
.gps-light .vc-map-section::after { content:''; position:absolute; left:0; right:0; bottom:0; height:102px; z-index:3; pointer-events:none; background:linear-gradient(to top, rgba(232,237,242,.94) 0%, rgba(232,237,242,.62) 58%, rgba(232,237,242,0) 100%); }
.gps-light .vc-subtitle,
.gps-light .vc-place span,
.gps-light .vc-passive-stats strong { color:#101820; text-shadow:none; }
.gps-light .vc-place svg,
.gps-light .vc-context small,
.gps-light .vc-context span { color:#5f6975; stroke:#5f6975; text-shadow:none; }
.gps-light .vc-passive-stats { background:rgba(238,242,246,.74); border-color:rgba(11,17,23,.11); box-shadow:0 1px 0 rgba(255,255,255,.45) inset; }
.gps-light .vc-passive-stats > div { border-right-color:rgba(11,17,23,.08); }
.gps-light .vc-passive-stats small { color:#667085; }
.gps-light .vc-passive-stats small svg { stroke:#667085; }
.gps-light .tl-panel { background:rgba(248,250,252,.94); border-color:rgba(11,17,23,.10); color:#101820; }
.gps-light .tl-plate,.gps-light .tl-st-time,.gps-light .tl-legend b { color:#101820; }
.gps-light .tl-jornada,.gps-light .tl-legend,.gps-light .tl-time,.gps-light .tl-vel { color:#5f6975; }
.gps-light .tl-day-nav { background:rgba(11,17,23,.05); border-color:rgba(11,17,23,.10); }
.gps-light .tl-day-btn.active { background:rgba(11,17,23,.09); color:#101820; }
.gps-light .tl-future { background:rgba(248,250,252,.62); }
.gps-light .tl-cursor-knob { background:#101820; box-shadow:0 0 0 3px rgba(248,250,252,.94),0 2px 8px rgba(24,32,43,.22); }
.gps-light .parte-table th { background:rgba(248,250,252,.98); color:#667085; border-bottom-color:rgba(11,17,23,.10); }
.gps-light .parte-table td { color:#28323e; border-bottom-color:rgba(11,17,23,.06); }
.gps-light .parte-table tr:hover td { background:rgba(11,17,23,.035); }
.gps-light .map-location-btn,
.gps-light .fl-top-btn,
.gps-light .vw-close,
.gps-light .vw-back,
.gps-light .vw-action,
.gps-light .parte-close { background:rgba(11,17,23,.06)!important; color:#46515e; border-color:rgba(11,17,23,.10)!important; }
.gps-light .gps-theme-note { margin-top:-6px; }
html[data-gps-theme="light"] .dock-btn,
html[data-gps-theme="light"] .dock-sub-btn,
html[data-gps-theme="light"] .vw-title,
html[data-gps-theme="light"] .parte-title,
html[data-gps-theme="light"] .vc-name,
html[data-gps-theme="light"] .ml-plate,
html[data-gps-theme="light"] .ml-zc b,
html[data-gps-theme="light"] .pn-name,
html[data-gps-theme="light"] .pn-card-copy b,
html[data-gps-theme="light"] .pn-sw-copy b,
html[data-gps-theme="light"] .fleet-config-plate { color:#101820!important; }
html[data-gps-theme="light"] .dock-sec { color:#667085!important; }
html[data-gps-theme="light"] .dock-account { background:rgba(11,17,23,.035)!important; border-radius:10px; }
html[data-gps-theme="light"] .dock-account-copy b { color:#101820!important; }
html[data-gps-theme="light"] .dock-account-copy small { color:#5f6975!important; }
html[data-gps-theme="light"] .dock-account .fl-avatar,
html[data-gps-theme="light"] .dock-user .fl-avatar { background:rgba(16,24,32,.12)!important; color:#101820!important; }
html[data-gps-theme="light"] .dock-caret,
html[data-gps-theme="light"] .dock-btn .dock-caret,
html[data-gps-theme="light"] .dock-user .dock-caret {
  color:#8a94a1!important;
  stroke:#8a94a1!important;
}
html[data-gps-theme="light"] .dock-btn:hover .dock-caret,
html[data-gps-theme="light"] .dock-btn.active .dock-caret,
html[data-gps-theme="light"] .dock-btn.current .dock-caret {
  color:#667085!important;
  stroke:#667085!important;
}
html[data-gps-theme="light"] .dock-btn,
html[data-gps-theme="light"] .dock-sub-btn svg,
html[data-gps-theme="light"] .dock-caret,
html[data-gps-theme="light"] .fl-searchbar-inner svg,
html[data-gps-theme="light"] .vw-sub,
html[data-gps-theme="light"] .vw-field > label,
html[data-gps-theme="light"] .vw-sec,
html[data-gps-theme="light"] .pn-note,
html[data-gps-theme="light"] .pn-status,
html[data-gps-theme="light"] .ml-sub,
html[data-gps-theme="light"] .ml-summary,
html[data-gps-theme="light"] .fleet-config-sub,
html[data-gps-theme="light"] .parte-ts { color:#5f6975!important; }
html[data-gps-theme="light"] .fl-searchbar-inner input,
html[data-gps-theme="light"] .vw-input,
html[data-gps-theme="light"] .vw-field input,
html[data-gps-theme="light"] .informe-field input,
html[data-gps-theme="light"] .informe-field select,
html[data-gps-theme="light"] .parte-date { background:rgba(11,17,23,.05)!important; border-color:rgba(11,17,23,.10)!important; color:#101820!important; color-scheme:light; }
html[data-gps-theme="light"] .fl-filter-tabs,
html[data-gps-theme="light"] .vw-seg,
html[data-gps-theme="light"] .pn-switchrow,
html[data-gps-theme="light"] .pn-card,
html[data-gps-theme="light"] .fleet-config-row:hover,
html[data-gps-theme="light"] .ml-row:hover,
html[data-gps-theme="light"] .ml-row.active,
html[data-gps-theme="light"] .pn-row:hover,
html[data-gps-theme="light"] .ruta-plan-route,
html[data-gps-theme="light"] .ruta-info-grid,
html[data-gps-theme="light"] .ml-metrics,
html[data-gps-theme="light"] .pn-visit { background:rgba(11,17,23,.055)!important; }
html[data-gps-theme="light"] .dock-btn:hover,
html[data-gps-theme="light"] .dock-btn.active,
html[data-gps-theme="light"] .dock-btn.current,
html[data-gps-theme="light"] .dock-sub-btn:hover,
html[data-gps-theme="light"] .dock-sub-btn.active,
html[data-gps-theme="light"] .fl-filter-tab.active,
html[data-gps-theme="light"] .vw-seg button.on { background:rgba(11,17,23,.08)!important; color:#101820!important; }
html[data-gps-theme="light"] .tl-panel { background:rgba(248,250,252,.94)!important; border-color:rgba(11,17,23,.10)!important; color:#101820!important; }
html[data-gps-theme="light"] .tl-plate,
html[data-gps-theme="light"] .tl-st-time,
html[data-gps-theme="light"] .tl-legend b { color:#101820!important; }
html[data-gps-theme="light"] .tl-jornada,
html[data-gps-theme="light"] .tl-legend,
html[data-gps-theme="light"] .tl-time,
html[data-gps-theme="light"] .tl-vel { color:#5f6975!important; }
html[data-gps-theme="light"] .vc-subtitle,
html[data-gps-theme="light"] .vc-place span,
html[data-gps-theme="light"] .vc-passive-stats strong { color:#101820!important; text-shadow:none!important; }
html[data-gps-theme="light"] .vc-passive-stats { background:rgba(238,242,246,.74)!important; border-color:rgba(11,17,23,.11)!important; }
html[data-gps-theme="light"] .fv-card,
html[data-gps-theme="light"] .fl-place-card,
html[data-gps-theme="light"] .ml-row,
html[data-gps-theme="light"] .pn-card,
html[data-gps-theme="light"] .pn-visit,
html[data-gps-theme="light"] .ruta-saved-row {
  background:rgba(238,242,246,.58)!important;
  border-color:rgba(11,17,23,.09)!important;
  color:#101820!important;
}
html[data-gps-theme="light"] .fv-card:hover,
html[data-gps-theme="light"] .ml-row:hover,
html[data-gps-theme="light"] .fl-place-card:hover {
  background:rgba(225,231,238,.72)!important;
}

/* Tema claro: panel izquierdo / buscador / listados */
html[data-gps-theme="light"] .fl-searchbar,
html[data-gps-theme="light"] .fl-dropdown {
  background:rgba(238,242,246,.92)!important;
  border-color:rgba(11,17,23,.12)!important;
  box-shadow:0 10px 28px rgba(24,32,43,.18), inset 0 1px 0 rgba(255,255,255,.55)!important;
}
html[data-gps-theme="light"] .fl-searchbar > svg path { fill:rgba(16,24,32,.78)!important; }
html[data-gps-theme="light"] .fl-searchbar > div[style*="background"] { background:rgba(11,17,23,.12)!important; }
html[data-gps-theme="light"] .fl-searchbar-inner input { color:#101820!important; }
html[data-gps-theme="light"] .fl-clear { background:rgba(11,17,23,.12)!important; color:#101820!important; }
html[data-gps-theme="light"] .fl-filter-tabs,
html[data-gps-theme="light"] .fl-chips { color:#101820!important; }
html[data-gps-theme="light"] .fl-filter-tabs { background:rgba(11,17,23,.07)!important; }
html[data-gps-theme="light"] .fl-filter-tab { color:#5f6975!important; }
html[data-gps-theme="light"] .fl-filter-tab:hover { background:rgba(11,17,23,.06)!important; color:#101820!important; }
html[data-gps-theme="light"] .fl-filter-tab.active { background:rgba(255,255,255,.72)!important; color:#101820!important; box-shadow:0 1px 0 rgba(255,255,255,.7) inset; }
html[data-gps-theme="light"] .fl-tab-n,
html[data-gps-theme="light"] .fl-filter-tab.active .fl-tab-n { color:#667085!important; }
html[data-gps-theme="light"] .ml-chip { background:rgba(11,17,23,.06)!important; color:#5f6975!important; }
html[data-gps-theme="light"] .ml-chip.active { background:rgba(255,255,255,.76)!important; border-color:rgba(11,17,23,.10)!important; color:#101820!important; }
html[data-gps-theme="light"] .ml-chip b,
html[data-gps-theme="light"] .ml-chip.active b { color:#667085!important; }
html[data-gps-theme="light"] .ml-sec,
html[data-gps-theme="light"] .fl-place-heading { color:#667085!important; }
html[data-gps-theme="light"] .ml-sec b { color:#8a94a1!important; }
html[data-gps-theme="light"] .ml-row {
  background:transparent!important;
  border-color:transparent!important;
}
html[data-gps-theme="light"] .ml-row:hover,
html[data-gps-theme="light"] .ml-row.active {
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(11,17,23,.09)!important;
}
html[data-gps-theme="light"] .ml-plate,
html[data-gps-theme="light"] .ml-zc b,
html[data-gps-theme="light"] .ml-val small,
html[data-gps-theme="light"] .ml-metrics strong,
html[data-gps-theme="light"] .fv-plate,
html[data-gps-theme="light"] .fv-zone-name,
html[data-gps-theme="light"] .fl-place-name { color:#101820!important; }
html[data-gps-theme="light"] .ml-sub,
html[data-gps-theme="light"] .ml-loc,
html[data-gps-theme="light"] .ml-zc small,
html[data-gps-theme="light"] .ml-summary,
html[data-gps-theme="light"] .fv-sub,
html[data-gps-theme="light"] .fv-driver small,
html[data-gps-theme="light"] .fv-activity-stat small,
html[data-gps-theme="light"] .fv-activity-location,
html[data-gps-theme="light"] .fv-zone-meta,
html[data-gps-theme="light"] .fl-place-address { color:#5f6975!important; }
html[data-gps-theme="light"] .ml-movil { background:rgba(11,17,23,.07)!important; color:#5f6975!important; }
html[data-gps-theme="light"] .ml-metrics,
html[data-gps-theme="light"] .fv-activity-stat,
html[data-gps-theme="light"] .fv-driver-icon {
  background:rgba(11,17,23,.055)!important;
  border-color:rgba(11,17,23,.08)!important;
}
html[data-gps-theme="light"] .ml-metrics > div,
html[data-gps-theme="light"] .fv-metrics > div { border-right-color:rgba(11,17,23,.08)!important; }
html[data-gps-theme="light"] .ml-metrics small { color:#667085!important; }
html[data-gps-theme="light"] .ml-go {
  background:rgba(16,24,32,.88)!important;
  border-color:rgba(16,24,32,.88)!important;
  color:#fff!important;
}
html[data-gps-theme="light"] .fv-card {
  background:rgba(238,242,246,.72)!important;
  border-color:rgba(11,17,23,.08)!important;
}
html[data-gps-theme="light"] .fv-card:hover,
html[data-gps-theme="light"] .fv-card.active { background:rgba(255,255,255,.66)!important; }
html[data-gps-theme="light"] .fv-body,
html[data-gps-theme="light"] .fv-activity { color:#101820!important; }
html[data-gps-theme="light"] .fv-driver strong,
html[data-gps-theme="light"] .fv-activity-stat strong { color:#101820!important; }
html[data-gps-theme="light"] .fl-no-gps,
html[data-gps-theme="light"] .geocerca-empty { color:#667085!important; }

/* Tema claro: formularios y panel Planificar */
html[data-gps-theme="light"] .ruta-plan-route,
html[data-gps-theme="light"] .ruta-plan-point,
html[data-gps-theme="light"] .ruta-plan-stop,
html[data-gps-theme="light"] .ruta-plan-help,
html[data-gps-theme="light"] .rd-note,
html[data-gps-theme="light"] .pn-switchrow,
html[data-gps-theme="light"] .pn-card {
  background:rgba(255,255,255,.46)!important;
  border-color:rgba(11,17,23,.09)!important;
  color:#101820!important;
}
html[data-gps-theme="light"] .ruta-plan-point.selecting { background:rgba(11,17,23,.07)!important; }
html[data-gps-theme="light"] .ruta-plan-num,
html[data-gps-theme="light"] .ruta-detail-num {
  background:#28323e!important;
  color:#fff!important;
}
html[data-gps-theme="light"] .ruta-plan-label,
html[data-gps-theme="light"] .ruta-plan-addr,
html[data-gps-theme="light"] .ruta-plan-help,
html[data-gps-theme="light"] .ruta-plan-help span,
html[data-gps-theme="light"] .ruta-plan-dwell,
html[data-gps-theme="light"] .ruta-plan-stop-dwell,
html[data-gps-theme="light"] .rd-sub,
html[data-gps-theme="light"] .rd-leg-data,
html[data-gps-theme="light"] .ruta-info-label,
html[data-gps-theme="light"] .vw-hint,
html[data-gps-theme="light"] .pn-sw-copy small,
html[data-gps-theme="light"] .pn-card-copy small {
  color:#5f6975!important;
}
html[data-gps-theme="light"] .ruta-plan-value,
html[data-gps-theme="light"] .rd-name,
html[data-gps-theme="light"] .rd-time,
html[data-gps-theme="light"] .ruta-info-value,
html[data-gps-theme="light"] .pn-card-copy b,
html[data-gps-theme="light"] .pn-sw-copy b {
  color:#101820!important;
}
html[data-gps-theme="light"] .ruta-plan-value.empty { color:#8a94a1!important; }
html[data-gps-theme="light"] .ruta-plan-point:not(#ruta-plan-destino)::before,
html[data-gps-theme="light"] .ruta-plan-stop::before,
html[data-gps-theme="light"] .rd-line { background:rgba(11,17,23,.14)!important; }
html[data-gps-theme="light"] .ruta-plan-pick,
html[data-gps-theme="light"] .ruta-plan-add,
html[data-gps-theme="light"] .ruta-plan-stop-btn,
html[data-gps-theme="light"] .ruta-plan-dwell input,
html[data-gps-theme="light"] .ruta-plan-stop-dwell input {
  background:rgba(11,17,23,.06)!important;
  border-color:rgba(11,17,23,.10)!important;
  color:#101820!important;
}
html[data-gps-theme="light"] .ruta-plan-add { border-style:dashed!important; color:#46515e!important; }
html[data-gps-theme="light"] .vw-btn {
  background:#28323e!important;
  border-color:#28323e!important;
  color:#fff!important;
}
html[data-gps-theme="light"] .vw-btn.ghost {
  background:rgba(11,17,23,.06)!important;
  border-color:rgba(11,17,23,.10)!important;
  color:#28323e!important;
}
html[data-gps-theme="light"] .vw-btn:disabled,
html[data-gps-theme="light"] .ruta-plan-submit:disabled {
  background:rgba(11,17,23,.055)!important;
  border-color:rgba(11,17,23,.08)!important;
  color:#8a94a1!important;
}
html[data-gps-theme="light"] .ruta-info-grid { background:rgba(255,255,255,.54)!important; }
html[data-gps-theme="light"] .ruta-info-stat { border-right-color:rgba(11,17,23,.08)!important; }

/* Tema claro: listado izquierdo más contenido */
html[data-gps-theme="light"] .fl-panel { filter:none; }
html[data-gps-theme="light"] .fl-dropdown { background:rgba(232,237,242,.94)!important; }
html[data-gps-theme="light"] .ml-row.active {
  background:rgba(255,255,255,.78)!important;
  box-shadow:0 8px 22px rgba(24,32,43,.12);
}
html[data-gps-theme="light"] .ml-val b { color:var(--c,#101820)!important; }
html[data-gps-theme="light"] .ml-row.offline .ml-val b,
html[data-gps-theme="light"] .ml-row.dataissue .ml-val b { color:#dc2626!important; }
html[data-gps-theme="light"] .ml-row.stopped .ml-val b { color:#d97706!important; }
html[data-gps-theme="light"] .ml-row.moving .ml-val b { color:#16a34a!important; }
html[data-gps-theme="light"] .ml-dot { background:var(--c-soft,rgba(11,17,23,.08))!important; }
html[data-gps-theme="light"] .ml-dot::after { background:var(--c,#667085)!important; }
html[data-gps-theme="light"] .ml-metrics {
  background:rgba(11,17,23,.055)!important;
  border:1px solid rgba(11,17,23,.08)!important;
}
html[data-gps-theme="light"] .ml-go:hover { background:#101820!important; }

/* Tema claro: auditoría final de componentes */
html[data-gps-theme="light"] .leaflet-popup-content-wrapper,
html[data-gps-theme="light"] .leaflet-popup-tip {
  background:rgba(238,242,246,.96)!important;
  border-color:rgba(11,17,23,.12)!important;
  color:#101820!important;
  box-shadow:0 14px 36px rgba(24,32,43,.22)!important;
}
html[data-gps-theme="light"] .leaflet-popup-close-button { color:#5f6975!important; }
html[data-gps-theme="light"] .leaflet-popup-close-button:hover { color:#101820!important; }
html[data-gps-theme="light"] .vehicle-popup {
  --vpop-bg:rgba(238,242,246,.96);
  --vpop-block:rgba(11,17,23,.055);
  --vpop-border:rgba(11,17,23,.10);
  --vpop-divider:rgba(11,17,23,.08);
  --vpop-text:#101820;
  --vpop-secondary:#5f6975;
  --vpop-tertiary:#8a94a1;
}
html[data-gps-theme="light"] .vpop,
html[data-gps-theme="light"] .vpop-id strong,
html[data-gps-theme="light"] .vpop-driver-copy strong,
html[data-gps-theme="light"] .pop-plate,
html[data-gps-theme="light"] .fuel-popup-title { color:#101820!important; }
html[data-gps-theme="light"] .vpop-info > div,
html[data-gps-theme="light"] .vpop-driver-copy small,
html[data-gps-theme="light"] .pop-sub,
html[data-gps-theme="light"] .pop-spd,
html[data-gps-theme="light"] .fuel-popup-line,
html[data-gps-theme="light"] .lugar-popup-address { color:#5f6975!important; }
html[data-gps-theme="light"] .vpop-primary,
html[data-gps-theme="light"] .vpop-plan,
html[data-gps-theme="light"] .vpop-icon-btn,
html[data-gps-theme="light"] .vpop-call,
html[data-gps-theme="light"] .pop-route-btn,
html[data-gps-theme="light"] .map-action-btn,
html[data-gps-theme="light"] .geocerca-view {
  background:rgba(11,17,23,.06)!important;
  border-color:rgba(11,17,23,.10)!important;
  color:#28323e!important;
}
html[data-gps-theme="light"] .vpop-primary:hover,
html[data-gps-theme="light"] .vpop-plan:hover,
html[data-gps-theme="light"] .vpop-icon-btn:hover,
html[data-gps-theme="light"] .map-action-btn:hover,
html[data-gps-theme="light"] .geocerca-view:hover { background:rgba(11,17,23,.10)!important; color:#101820!important; }
html[data-gps-theme="light"] .pop-stat,
html[data-gps-theme="light"] .vpop-metrics,
html[data-gps-theme="light"] .lugar-popup-hours,
html[data-gps-theme="light"] .map-action-menu {
  background:rgba(11,17,23,.055)!important;
  border-color:rgba(11,17,23,.09)!important;
  color:#101820!important;
}
html[data-gps-theme="light"] .pop-lbl,
html[data-gps-theme="light"] .vpop-metrics small,
html[data-gps-theme="light"] .map-action-title { color:#667085!important; }
html[data-gps-theme="light"] .map-coordinate-value { background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.15); color:#1e3a5f; }
html[data-gps-theme="light"] .map-coordinate-value:hover { background:rgba(37,99,235,.1); border-color:rgba(37,99,235,.25); }
html[data-gps-theme="light"] .pop-val,
html[data-gps-theme="light"] .vpop-metrics strong { color:#101820!important; }

html[data-gps-theme="light"] .parte-panel,
html[data-gps-theme="light"] .periodo-panel,
html[data-gps-theme="light"] .obra-report-panel,
html[data-gps-theme="light"] .ruta-destinos-panel,
html[data-gps-theme="light"] .ruta-name-panel,
html[data-gps-theme="light"] .ruta-saved-panel {
  background:rgba(238,242,246,.96)!important;
  border-color:rgba(11,17,23,.11)!important;
  color:#101820!important;
}
html[data-gps-theme="light"] .parte-summary,
html[data-gps-theme="light"] .periodo-form,
html[data-gps-theme="light"] .obra-report-form,
html[data-gps-theme="light"] .ruta-name-body {
  background:rgba(255,255,255,.32)!important;
  border-color:rgba(11,17,23,.08)!important;
  color:#101820!important;
}
html[data-gps-theme="light"] .parte-table th,
html[data-gps-theme="light"] .obra-report-table th,
html[data-gps-theme="light"] .periodo-table th {
  background:rgba(232,237,242,.98)!important;
  color:#667085!important;
  border-bottom-color:rgba(11,17,23,.10)!important;
}
html[data-gps-theme="light"] .parte-table td,
html[data-gps-theme="light"] .obra-report-table td,
html[data-gps-theme="light"] .periodo-table td {
  color:#28323e!important;
  border-bottom-color:rgba(11,17,23,.06)!important;
}
html[data-gps-theme="light"] .parte-group td { background:rgba(11,17,23,.045)!important; color:#667085!important; }
html[data-gps-theme="light"] .periodo-empty,
html[data-gps-theme="light"] .parte-detail-empty,
html[data-gps-theme="light"] .parte-detail-loading { color:#667085!important; }
html[data-gps-theme="light"] .parte-event-title { color:#28323e!important; }
html[data-gps-theme="light"] .parte-event-sub,
html[data-gps-theme="light"] .parte-event-time { color:#5f6975!important; }
html[data-gps-theme="light"] .parte-events::before { background:rgba(11,17,23,.10)!important; }

html[data-gps-theme="light"] .fleet-config-row,
html[data-gps-theme="light"] .pn-row,
html[data-gps-theme="light"] .pn-unit,
html[data-gps-theme="light"] .rp-item,
html[data-gps-theme="light"] .ruta-saved-row,
html[data-gps-theme="light"] .rd-note,
html[data-gps-theme="light"] .pn-list,
html[data-gps-theme="light"] .fleet-config-list {
  color:#101820!important;
}
html[data-gps-theme="light"] .pn-row:hover,
html[data-gps-theme="light"] .pn-unit:hover,
html[data-gps-theme="light"] .pn-unit.on,
html[data-gps-theme="light"] .rp-item:hover,
html[data-gps-theme="light"] .rp-item.map {
  background:rgba(11,17,23,.055)!important;
  border-color:rgba(11,17,23,.09)!important;
}
html[data-gps-theme="light"] .pn-meta,
html[data-gps-theme="light"] .pn-unit-sub,
html[data-gps-theme="light"] .rp-sub,
html[data-gps-theme="light"] .ruta-saved-meta,
html[data-gps-theme="light"] .ruta-name-help,
html[data-gps-theme="light"] .lugar-day span,
html[data-gps-theme="light"] .pn-status { color:#5f6975!important; }
html[data-gps-theme="light"] .pn-name,
html[data-gps-theme="light"] .pn-unit-top b,
html[data-gps-theme="light"] .rp-name,
html[data-gps-theme="light"] .ruta-saved-name,
html[data-gps-theme="light"] .ruta-name-body label { color:#101820!important; }
html[data-gps-theme="light"] .pn-iconbtn,
html[data-gps-theme="light"] .lugar-day span,
html[data-gps-theme="light"] .rp-ico,
html[data-gps-theme="light"] .ml-zi,
html[data-gps-theme="light"] .fleet-config-check:not(:checked) {
  background:rgba(11,17,23,.06)!important;
  border-color:rgba(11,17,23,.10)!important;
  color:#46515e!important;
}
html[data-gps-theme="light"] .lugar-day input:checked + span,
html[data-gps-theme="light"] .fleet-config-check:checked { background:#16a34a!important; color:#fff!important; border-color:#16a34a!important; }
html[data-gps-theme="light"] .fleet-config-check:checked::after { background:#fff!important; }
html[data-gps-theme="light"] .zona-map-label,
html[data-gps-theme="light"] .fl-plate-label,
html[data-gps-theme="light"] .ruta-plan-map-label,
html[data-gps-theme="light"] .geocerca-route-label {
  background:rgba(238,242,246,.96)!important;
  border-color:rgba(11,17,23,.14)!important;
  color:#101820!important;
  box-shadow:0 6px 18px rgba(24,32,43,.18)!important;
}

html[data-gps-theme="light"] .tl-chip { background:var(--bg,rgba(11,17,23,.07))!important; }
html[data-gps-theme="light"] .tl-loading { background:rgba(238,242,246,.72)!important; color:#5f6975!important; }
html[data-gps-theme="light"] .tl-loading-inner { background:rgba(248,250,252,.88)!important; border-color:rgba(11,17,23,.10)!important; }
html[data-gps-theme="light"] .tl-close,
html[data-gps-theme="light"] .tl-day-nav { background:rgba(11,17,23,.055)!important; border-color:rgba(11,17,23,.10)!important; color:#46515e!important; }
html[data-gps-theme="light"] .tl-day-btn { color:#667085!important; }
html[data-gps-theme="light"] .tl-day-btn:hover,
html[data-gps-theme="light"] .tl-day-btn.active { background:rgba(11,17,23,.08)!important; color:#101820!important; }

html[data-gps-theme="light"] .fuel-map-tag,
html[data-gps-theme="light"] .obra-map-tag,
html[data-gps-theme="light"] .fuel-popup-title,
html[data-gps-theme="light"] .fuel-popup-line { color:#101820!important; }
html[data-gps-theme="light"] .fuel-map-tag,
html[data-gps-theme="light"] .obra-map-tag { background:rgba(238,242,246,.95)!important; border:1px solid rgba(11,17,23,.12)!important; box-shadow:0 5px 18px rgba(24,32,43,.18)!important; }
html[data-gps-theme="light"] .obra-report-duration,
html[data-gps-theme="light"] .periodo-exceso { color:#dc2626!important; }

/* Tema claro: correcciones específicas de informes y consultas */
html[data-gps-theme="light"] .vw-icon {
  background:rgba(11,17,23,.07)!important;
  color:#28323e!important;
}
html[data-gps-theme="light"] .vw-icon svg,
html[data-gps-theme="light"] .vw-action svg,
html[data-gps-theme="light"] .vw-close svg,
html[data-gps-theme="light"] .vw-back svg,
html[data-gps-theme="light"] .vw-btn svg,
html[data-gps-theme="light"] .pn-note svg,
html[data-gps-theme="light"] .pn-status svg,
html[data-gps-theme="light"] .pn-card > svg,
html[data-gps-theme="light"] .pn-link svg,
html[data-gps-theme="light"] .informe-help svg {
  color:#5f6975!important;
  stroke:#5f6975!important;
}

/* 1 · Informe por obra */
html[data-gps-theme="light"] #obra-report-overlay,
html[data-gps-theme="light"] #parte-overlay,
html[data-gps-theme="light"] #periodo-overlay {
  background:rgba(238,242,246,.72)!important;
}
html[data-gps-theme="light"] .obra-report-results,
html[data-gps-theme="light"] .parte-body,
html[data-gps-theme="light"] .periodo-table,
html[data-gps-theme="light"] .parte-detail {
  background:rgba(238,242,246,.96)!important;
  color:#101820!important;
}
html[data-gps-theme="light"] .obra-report-title,
html[data-gps-theme="light"] #obra-report-title,
html[data-gps-theme="light"] .obra-report-table strong,
html[data-gps-theme="light"] .obra-report-table td strong,
html[data-gps-theme="light"] .obra-report-table td:first-child,
html[data-gps-theme="light"] .obra-report-table td:nth-child(2),
html[data-gps-theme="light"] .obra-report-table td:nth-child(3),
html[data-gps-theme="light"] .obra-report-table td:nth-child(5) {
  color:#101820!important;
}
html[data-gps-theme="light"] #obra-report-title svg,
html[data-gps-theme="light"] .parte-title svg {
  color:#46515e!important;
  stroke:#46515e!important;
}
html[data-gps-theme="light"] .obra-report-table .obra-meta,
html[data-gps-theme="light"] .obra-report-form label,
html[data-gps-theme="light"] .informe-field label {
  color:#5f6975!important;
}
html[data-gps-theme="light"] .obra-report-table tr:hover td,
html[data-gps-theme="light"] .parte-table tr:hover td,
html[data-gps-theme="light"] .periodo-table tr:hover td {
  background:rgba(11,17,23,.035)!important;
}

/* 2 · Parte diario / período */
html[data-gps-theme="light"] .parte-summary strong,
html[data-gps-theme="light"] .parte-table td strong,
html[data-gps-theme="light"] .parte-event-title,
html[data-gps-theme="light"] .periodo-status,
html[data-gps-theme="light"] .periodo-status.inactive,
html[data-gps-theme="light"] .periodo-table td strong {
  color:#101820!important;
}
html[data-gps-theme="light"] .periodo-status.active { color:#16a34a!important; }
html[data-gps-theme="light"] .periodo-status.inactive { color:#667085!important; }
html[data-gps-theme="light"] .parte-event,
html[data-gps-theme="light"] .parte-detail-row td {
  background:rgba(11,17,23,.025)!important;
  border-bottom-color:rgba(11,17,23,.07)!important;
}
html[data-gps-theme="light"] .parte-event-icon {
  background:rgba(11,17,23,.06)!important;
  color:#46515e!important;
}
html[data-gps-theme="light"] .parte-close,
html[data-gps-theme="light"] .parte-date {
  background:rgba(11,17,23,.06)!important;
  border-color:rgba(11,17,23,.10)!important;
  color:#101820!important;
}

/* 3 · Movimientos por ubicación */
html[data-gps-theme="light"] .pn-results,
html[data-gps-theme="light"] #geocerca-results,
html[data-gps-theme="light"] .geocerca-results {
  color:#101820!important;
}
html[data-gps-theme="light"] .pn-visit {
  background:rgba(255,255,255,.52)!important;
  border:1px solid rgba(11,17,23,.09)!important;
}
html[data-gps-theme="light"] .pn-plate,
html[data-gps-theme="light"] .pn-visit-n,
html[data-gps-theme="light"] .pn-link,
html[data-gps-theme="light"] .pn-visit-top strong,
html[data-gps-theme="light"] .pn-visit-bot strong {
  color:#101820!important;
}
html[data-gps-theme="light"] .pn-visit-bot > span,
html[data-gps-theme="light"] .pn-status span,
html[data-gps-theme="light"] #geocerca-help,
html[data-gps-theme="light"] #informe-help {
  color:#5f6975!important;
}
html[data-gps-theme="light"] .geocerca-empty,
html[data-gps-theme="light"] #geocerca-overlay .geocerca-empty,
html[data-gps-theme="light"] #lugar-overlay .geocerca-empty,
html[data-gps-theme="light"] #zona-overlay .geocerca-empty {
  color:#667085!important;
}
html[data-gps-theme="light"] .geocerca-location,
html[data-gps-theme="light"] .geocerca-radius-value,
html[data-gps-theme="light"] .geocerca-query input {
  background:rgba(11,17,23,.06)!important;
  border-color:rgba(11,17,23,.10)!important;
  color:#101820!important;
}

/* 4 · Consulta de recorrido */
html[data-gps-theme="light"] .pn-units {
  color:#101820!important;
}
html[data-gps-theme="light"] .pn-unit {
  background:transparent!important;
  border-color:transparent!important;
  color:#101820!important;
}
html[data-gps-theme="light"] .pn-unit:hover,
html[data-gps-theme="light"] .pn-unit.on {
  background:rgba(255,255,255,.56)!important;
  border-color:rgba(11,17,23,.09)!important;
}
html[data-gps-theme="light"] .pn-unit-top b,
html[data-gps-theme="light"] .pn-unit-copy b,
html[data-gps-theme="light"] .pn-check {
  color:#101820!important;
}
html[data-gps-theme="light"] .pn-unit-top i {
  background:rgba(11,17,23,.07)!important;
  color:#5f6975!important;
}
html[data-gps-theme="light"] .pn-dot {
  background:var(--c-soft,rgba(11,17,23,.08))!important;
}
html[data-gps-theme="light"] .pn-dot::after {
  background:var(--c,rgba(102,112,133,.95))!important;
}
html[data-gps-theme="light"] .pn-check {
  background:rgba(11,17,23,.10)!important;
}
html[data-gps-theme="light"] .pn-check svg {
  stroke:#101820!important;
}
html[data-gps-theme="light"] #informe-unidades,
html[data-gps-theme="light"] #informe-overlay .vw-body,
html[data-gps-theme="light"] #geocerca-overlay .vw-body,
html[data-gps-theme="light"] #obra-report-results,
html[data-gps-theme="light"] #parte-tbody,
html[data-gps-theme="light"] #periodo-tbody {
  color:#101820!important;
}

/* Tema claro: resumen de Parte diario / estados tipo “33 sin actividad” */
html[data-gps-theme="light"] #parte-summary,
html[data-gps-theme="light"] #periodo-summary,
html[data-gps-theme="light"] .parte-summary {
  background:rgba(255,255,255,.42)!important;
  border-color:rgba(11,17,23,.09)!important;
  color:#46515e!important;
}
html[data-gps-theme="light"] #parte-summary *,
html[data-gps-theme="light"] #periodo-summary *,
html[data-gps-theme="light"] .parte-summary * {
  color:#46515e!important;
}
html[data-gps-theme="light"] #parte-summary strong,
html[data-gps-theme="light"] #parte-summary b,
html[data-gps-theme="light"] #periodo-summary strong,
html[data-gps-theme="light"] #periodo-summary b,
html[data-gps-theme="light"] .parte-summary strong,
html[data-gps-theme="light"] .parte-summary b {
  color:#101820!important;
}
html[data-gps-theme="light"] #parte-summary .inactive,
html[data-gps-theme="light"] #parte-summary .sin-actividad,
html[data-gps-theme="light"] #periodo-summary .inactive,
html[data-gps-theme="light"] #periodo-summary .sin-actividad,
html[data-gps-theme="light"] .parte-summary .inactive,
html[data-gps-theme="light"] .parte-summary .sin-actividad {
  color:#667085!important;
}

/* Ajustes finales de ventanas e informes en pantallas pequeñas. */
@media (max-width:720px) {
  .vwin-side {
    top:max(8px,env(safe-area-inset-top));
    right:8px;
    bottom:calc(76px + env(safe-area-inset-bottom));
    left:8px;
    width:auto;
    max-width:none;
    max-height:none;
  }
  #informe-overlay .vw-body,
  #fleet-config-overlay .vw-body,
  #geocerca-overlay .vw-body { min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }
  .obra-report-panel,
  .periodo-panel { min-height:0; max-height:88dvh; }
  .obra-report-results,
  .periodo-panel .parte-body { flex:1 1 auto; min-height:0; overflow:auto!important; -webkit-overflow-scrolling:touch; }
  .informe-field input[type="date"],
  .informe-field input[type="time"],
  .informe-field input[type="datetime-local"],
  .parte-date {
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    padding-block:0;
    line-height:normal;
    -webkit-appearance:none;
    appearance:none;
  }
}

/* Tema claro: el cuerpo del buscador y los informes deben conservar contraste. */
html[data-gps-theme="light"] .fl-dropdown,
html[data-gps-theme="light"] .fl-list-wrap,
html[data-gps-theme="light"] .fl-list { background:rgba(255,255,255,.96)!important; }
html[data-gps-theme="light"] .fl-scroll-btn,
html[data-gps-theme="light"] .fl-scroll-btn.top,
html[data-gps-theme="light"] .fl-scroll-btn:not(.top) {
  background:transparent!important;
  box-shadow:none!important;
}
html[data-gps-theme="light"] .fl-scroll-btn svg { color:#101820!important; }
html[data-gps-theme="light"] .vc-map-section::before,
html[data-gps-theme="light"] .vc-map-section::after { content:none!important; display:none!important; }
html[data-gps-theme="light"] .vc-scrub { background:transparent!important; }
html[data-gps-theme="light"] .vc-card.stopped .vc-pill {
  background:rgba(255,248,224,.94)!important;
  border-color:rgba(180,112,0,.24)!important;
  color:#7a4b00!important;
  box-shadow:0 1px 4px rgba(24,32,43,.10);
}
html[data-gps-theme="light"] .vc-card.stopped .vc-context b {
  background:rgba(255,248,224,.94)!important;
  border-color:rgba(180,112,0,.26)!important;
  color:#7a4b00!important;
  box-shadow:0 1px 5px rgba(24,32,43,.12);
}
html[data-gps-theme="light"] .vc-scrub-time,
html[data-gps-theme="light"] .vc-location { color:#28323e!important; text-shadow:0 1px 2px rgba(255,255,255,.9)!important; }
html[data-gps-theme="light"] .map-action-btn .map-action-icon { color:#46515e!important; }
html[data-gps-theme="light"] .obra-report-table th { background:#eef2f6!important; color:#5f6975!important; }
html[data-gps-theme="light"] .obra-report-table td,
html[data-gps-theme="light"] .obra-report-table td strong,
html[data-gps-theme="light"] #obra-report-results strong { color:#28323e!important; }
html[data-gps-theme="light"] .obra-report-table .obra-meta,
html[data-gps-theme="light"] #obra-report-results > div { color:#667085!important; }
html[data-gps-theme="light"] .obra-report-duration { color:#9a5b00!important; }