* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#0b1220; color:#e7edf7; height:100vh; display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 14px 10px; background:#101a2e; border-bottom:1px solid #223057; position:relative; z-index:1010; }
.logo { font-size:17px; font-weight:700; }
.pill { font-size:12px; padding:3px 10px; border-radius:999px; background:#223057; }
.pill.on { background:#1d5c33; color:#7ee2a8; }
.pill.off { background:#5c1d1d; color:#f0a0a0; }
.stats { margin-left:auto; font-size:12px; color:#ccd7ef; }

main { flex:1; display:flex; min-height:0; position:relative; }
#map { flex:1; min-height:0; transition: transform .35s ease; }
/* 3D Buildings visibility */
#map .osm-buildings { z-index: 10; }
#map .osm-buildings canvas { pointer-events: none; }
#panel { width:300px; background:#101a2e; border-left:1px solid #223057; overflow-y:auto; padding:12px; }
#panel h2 { font-size:13px; text-transform:uppercase; letter-spacing:1px; color:#b4c2e0; margin:12px 0 6px; }
#panel ul { list-style:none; }
#panel li { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:#0d1526; border:1px solid #223057; border-radius:10px; margin-bottom:6px; font-size:13px; }
#panel .dot { width:9px; height:9px; border-radius:50%; }

/* Tarjetas / formularios */
.card-wrap { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.card { background:#101a2e; border:1px solid #223057; border-radius:16px; padding:22px; width:100%; max-width:380px; }
.card h2 { font-size:18px; margin-bottom:6px; }
.card p { font-size:13px; color:#dbe3f5; margin-bottom:14px; }
.card label { display:block; font-size:12px; color:#ccd7ef; margin:10px 0 4px; }
.card input { width:100%; padding:11px 12px; border-radius:10px; border:1px solid #2c3d61; background:#0d1526; color:#e7edf7; font-size:15px; }
.btn { padding:12px 16px; border:none; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; }
.btn.primary { background:#2563eb; color:#fff; width:100%; margin-top:14px; }
.btn.ghost { background:#16233f; color:#cfe0ff; border:1px solid #2c3d61; }
.note { font-size:12px; color:#b4c2e0; margin-top:10px; min-height:16px; }

.driver-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(11,18,32,.96) 40%);
}
.driver-bar .btn { flex: 1; padding: 13px 6px; }
.btn.disp.on { background:#1d5c33; color:#7ee2a8; }
.btn.disp { background:#16233f; color:#cfe0ff; border:1px solid #2c3d61; }
.btn.reportar { background:#7f1d1d; color:#ffd7d7; border:1px solid #991b1b; }
.btn.viajes { background:#164e63; color:#a5f3fc; border:1px solid #155e75; }
.btn.gps { background:#3b0764; color:#e9d5ff; border:1px solid #581c87; flex:0 0 auto; }
.btn.instalar { background:#1d5c33; color:#7ee2a8; border:1px solid #14532d; }

.viajes-panel { position:absolute; left:10px; right:10px; bottom:84px; background:#101a2e; border:1px solid #223057; border-radius:14px; padding:12px; z-index:940; max-height:60vh; overflow-y:auto; }
.tabs-viajes { display:flex; gap:6px; margin-bottom:10px; }
.tab-viajes { flex:1; padding:8px; border-radius:10px; border:1px solid #2c3d61; background:#0d1526; color:#dbe3f5; font-weight:700; cursor:pointer; font-size:13px; }
.tab-viajes.on { background:#2563eb; color:#fff; border-color:#2563eb; }
#vSolicitudes li, #vMias li { padding:10px; background:#0d1526; border:1px solid #223057; border-radius:12px; margin-bottom:8px; }
#vSolicitudes .acciones, #vMias .acciones { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
#vSolicitudes .acciones button, #vMias .acciones button { padding:8px 10px; border-radius:9px; border:none; cursor:pointer; font-weight:700; font-size:12px; }
#vSolicitudes .aceptar, #vMias .aceptar { background:#1d5c33; color:#7ee2a8; flex:1; }
#vSolicitudes .contra, #vMias .contra { background:#16233f; color:#cfe0ff; border:1px solid #2c3d61; }
#autoPanel input { width:100%; padding:10px 12px; border-radius:9px; border:1px solid #2c3d61; background:#0d1526; color:#e7edf7; font-size:14px; margin-bottom:8px; }
#autoPanel .btn { margin-top:2px; }
#vSolicitudes .dir { font-size:12px; color:#dbe3f5; margin-top:4px; }
#vSolicitudes .dir b { color:#e7edf7; }
#vSolicitudes .nav-btn { background:#164e63; color:#a5f3fc; border:1px solid #155e75; }

.picker { position:absolute; left:10px; right:10px; bottom:84px; background:#101a2e; border:1px solid #223057; border-radius:14px; padding:14px; z-index:950; }
.picker p { font-weight:700; font-size:14px; margin-bottom:8px; }
#pickerTipos { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
#pickerTipos button { padding:12px 8px; border-radius:10px; border:1px solid #2c3d61; background:#0d1526; color:#e7edf7; font-weight:700; cursor:pointer; }

.leaflet-popup-content { color:#111; font-size:13px; }
.leyenda { background:rgba(11,18,32,.98); border:3px solid #1e3a5f; border-radius:16px; padding:16px 20px; font-size:15px; color:#e7edf7; max-width:240px; box-shadow:0 6px 32px rgba(0,0,0,.5); }
.leyenda-titulo { font-weight:900; cursor:pointer; color:#dbe3f5; font-size:16px; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.leyenda-titulo::before { content:"🗺️"; font-size:18px; }
.leyenda-cuerpo { margin-top:10px; }
.leyenda-cuerpo div { display:flex; align-items:center; gap:12px; margin-top:8px; font-size:14px; }
.leyenda .dot { width:16px; height:16px; border-radius:50%; flex:0 0 auto; }
.hidden { display:none !important; }
.nota-flotante { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:auto; max-width:88%; background:#7f1d1d; color:#fff; border-radius:999px; padding:8px 14px; font-size:13px; z-index:1000; text-align:center; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.btn-panel { position:absolute; top:10px; right:10px; z-index:900; width:42px; height:42px; border-radius:12px; border:none; background:#2563eb; color:#fff; font-size:20px; cursor:pointer; }
/* Botón centrar en mi posición (estilo Uber/Didi): sobre el botón 🐛, sin tapar */
#btnUbicacion { position:absolute; right:12px; bottom:216px; z-index:900; width:52px; height:52px; border-radius:50%; border:1px solid #2c3d61; background:#101a2e; color:#e7edf7; font-size:22px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.4); transition:transform .3s, opacity .3s; }
#btnUbicacion.off { opacity:.5; }
/* Banner de navegación libre (destino + ETA) */
#navBanner { position:absolute; left:10px; right:10px; bottom:84px; z-index:940; display:flex; gap:10px; align-items:center; background:#101a2e; border:1px solid #223057; border-radius:14px; padding:10px 12px; }
#navBanner b { font-size:15px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#navCerrar { background:#1b2540; color:#cfe0ff; border:1px solid #2c3d61; border-radius:10px; width:46px; height:46px; font-size:18px; flex:0 0 auto; cursor:pointer; }
/* Botones flotantes que se asoman cuando no se usan (estilo Uber) */
#btnUbicacion.oculto, #bugFab.oculto { transform:translateX(72%); opacity:.55; }
#btn3d.on { background:#1d5c33; color:#7ee2a8; border:1px solid #14532d; }
/* Controles MapLibre: fondo transparente para la leyenda propia */
#map .maplibregl-ctrl-bottom-left > .maplibregl-ctrl:not(.leyenda) { background:transparent; box-shadow:none; padding:0; margin:0 0 10px 10px; }
/* ── Táctil grande: legible sin tapar el mapa (estilo Waze: grande y legible conduciendo) ── */
.btn { font-size:18px; }
.logo { font-size:20px; }
.card h2 { font-size:22px; }
.card p { font-size:16px; }
.card label { font-size:15px; }
.card input, .card select { font-size:18px; padding:14px 12px; }
header .btn { font-size:16px !important; padding:11px 13px !important; }
.driver-bar .btn { padding:17px 6px; font-size:17px; }
.tab-viajes { font-size:17px; padding:13px 8px; }
#vSolicitudes .acciones button, #vMias .acciones button { font-size:16px; padding:14px 12px; min-height:56px; }
#vSolicitudes li, #vMias li { font-size:16px; }
#vSolicitudes .dir { font-size:15px; }
#vSolicitudes .chip-dist, #vMias .chip-dist { font-size:14px; }
.note { font-size:15px; }
.nota-flotante { font-size:15px; }
#vOfertas button { min-height:56px !important; font-size:17px !important; }
#map .maplibregl-popup-content { color:#111; font-size:15px; }
/* ── Menú lateral del conductor ── */
#btnMenu { flex:0 0 auto; }
#menuScrim { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:3000; }
#menuDrawer { position:fixed; top:0; left:0; bottom:0; width:min(300px,84vw); z-index:3001; background:#101a2e; border-right:1px solid #223057; padding:14px; display:flex; flex-direction:column; gap:8px; }
#menuDrawer .menu-head { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
#menuAvatar { width:52px; height:52px; border-radius:50%; background:#164e63; color:#a5f3fc; font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
#menuNombre { font-size:17px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#menuCerrar { background:none; border:none; color:#b4c2e0; font-size:20px; cursor:pointer; padding:6px; }
#menuDrawer [data-menu] { text-align:left; padding:15px 14px; border-radius:12px; border:1px solid #2c3d61; background:#0d1526; color:#e7edf7; font-size:16px; font-weight:700; cursor:pointer; }
/* ── Radar de espera (ondas RF + barrido, estilo propio) ── */
#radar { position:absolute; inset:0; z-index:800; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; text-align:center; padding:16px; }
#radar.full { position:fixed; background:rgba(11,18,32,.96); z-index:1500; }
.radar-anim { position:relative; width:220px; height:220px; }
#radar.full .radar-anim { width:78vmin; height:78vmin; }
.radar-anim .ring { position:absolute; inset:0; border:2px solid rgba(52,211,153,.55); border-radius:50%; animation:rfping 3s ease-out infinite; }
.radar-anim .r2 { animation-delay:1s; }
.radar-anim .r3 { animation-delay:2s; }
@keyframes rfping { 0% { transform:scale(.22); opacity:.95; } 100% { transform:scale(1); opacity:0; } }
.radar-anim .sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(52,211,153,.5), transparent 22%); animation:rfspin 3.5s linear infinite; }
@keyframes rfspin { to { transform:rotate(360deg); } }
.radar-dot { position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px; border-radius:50%; background:#34d399; box-shadow:0 0 14px #34d399; }
#radarTxt { font-size:18px; font-weight:700; margin-top:16px; text-shadow:0 1px 8px #000; }
#radarCount { text-shadow:0 1px 8px #000; }
#radarFull { pointer-events:auto; position:absolute; top:10px; right:10px; width:46px; height:46px; border-radius:12px; border:1px solid #2c3d61; background:#101a2e; color:#e7edf7; font-size:20px; cursor:pointer; }
#radarDisp { display:none; pointer-events:auto; margin-top:12px; padding:14px 26px; border-radius:14px; border:1px solid #14532d; background:#1d5c33; color:#7ee2a8; font-size:17px; font-weight:700; cursor:pointer; }
#radar.full #radarDisp { display:block; }
@media (max-width:430px) {
  .logo { font-size:16px; }
  header { gap:6px; padding-left:10px; padding-right:10px; }
  header .btn { padding:8px 9px !important; font-size:13px !important; }
}
#map .maplibregl-popup-content button { font-size:15px; padding:10px 14px; border-radius:9px; border:1px solid #2c3d61; background:#0d1526; color:#e7edf7; cursor:pointer; }
/* Buscador de destino estilo Uber (chofer) */
#buscadorWrap { position:absolute; top:10px; left:10px; right:64px; z-index:900; }
#buscadorInput { width:100%; padding:14px 16px 14px 44px; border-radius:14px; border:1px solid #2c3d61; background:#101a2e url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ccd7ef" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 14px center; color:#e7edf7; font-size:17px; box-shadow:0 2px 10px rgba(0,0,0,.45); }
#buscadorInput::placeholder { color:#93a7c9; }
#buscadorRes { margin-top:6px; background:#101a2e; border:1px solid #2c3d61; border-radius:14px; overflow:hidden; max-height:46vh; overflow-y:auto; box-shadow:0 4px 16px rgba(0,0,0,.5); }
#buscadorRes .sug { padding:14px 16px; font-size:16px; color:#e7edf7; border-bottom:1px solid #223057; cursor:pointer; }
#buscadorRes .sug:last-child { border-bottom:none; }
#buscadorRes .sug small { display:block; color:#93a7c9; font-size:13px; margin-top:2px; }
@media (max-width:760px) {
  #panel { position:absolute; right:0; top:0; bottom:0; width:78%; z-index:800; transform:translateX(100%); transition:transform .2s; box-shadow:-8px 0 24px rgba(0,0,0,.4); }
  #panel.open { transform:translateX(0); }
  body[data-pagina="mapa"] main { display:block; }
  body[data-pagina="mapa"] #map { height:100%; }
}
/* ── Feed de viajes: tarjetas optimistas (verde/teal) ── */
#vSolicitudes .card-viaje, #vMias .card-viaje {
  background: linear-gradient(180deg, #0f2a24 0%, #0c1f26 100%);
  border: 1px solid #1e7a5f;
  border-left: 4px solid #34d399;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(52, 211, 153, 0.12);
}
#vSolicitudes .chip-dist, #vMias .chip-dist {
  display: inline-block;
  background: #12382f;
  color: #6ee7b7;
  border: 1px solid #1f7a5c;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}
.chip-dist.dim { background:#1b2540; color:#b9c6e2; border-color:#2c3d61; }
#vMias .aviso-lejos {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #4a1d24;
  border: 1px solid #b45309;
  color: #fcd9a0;
  font-size: 12px;
}
#vSolicitudes .contra, #vMias .contra {
  background:#1b3350; color:#9ed6ff; border:1px solid #2e5f8f;
}
/* ── Hoja propuesta entrante (estilo propio, psicología: esmeralda=avance) ── */
.sheet-propuesta { position:fixed; left:0; right:0; bottom:0; z-index:2500; background:#0f1e2e; border-top-left-radius:18px; border-top-right-radius:18px; border:1px solid #1e3a4a; border-bottom:none; max-height:92vh; overflow:auto; box-shadow:0 -8px 32px rgba(0,0,0,.5); }
.sheet-handle { width:44px; height:5px; border-radius:999px; background:#2c4a5a; margin:10px auto 6px; }
.sheet-map-wrap { position:relative; height:210px; background:#07111f; overflow:hidden; border-bottom:1px solid #223057; }
.sheet-mini-mapa { width:100%; height:100%; background: radial-gradient(ellipse at 30% 30%, #1a2f45, #0b1220); }
.sheet-badges { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.badge { padding:6px 12px; border-radius:10px; font-weight:800; font-size:13px; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.badge-a { background:#0f5a8a; }
.badge-b { background:#0e6b4a; }
#sheetZoomIn, #sheetZoomOut { position:absolute; right:10px; width:42px; height:42px; border-radius:50%; border:1px solid #2c3d61; background:#fff; color:#111; font-size:22px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
#sheetZoomIn { bottom:56px; } #sheetZoomOut { bottom:10px; }
.sheet-body { padding:14px; }
.sheet-cliente { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.sheet-avatar { width:44px; height:44px; border-radius:50%; background:#1e3a5a; color:#7ee2a8; display:flex; align-items:center; justify-content:center; font-weight:800; }
.sheet-precio { font-size:26px; font-weight:900; letter-spacing:-.5px; }
.sheet-dir { font-size:13px; color:#dbe3f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.sheet-confirmar { width:100%; padding:16px; border-radius:14px; background:#0e7a4a; color:#eafff3; font-size:17px; font-weight:800; border:none; }
.sheet-alt { text-align:center; font-size:13px; color:#b4c2e0; margin:12px 0 6px; }
.sheet-chips { display:flex; gap:8px; overflow:auto; padding-bottom:4px; }
.sheet-chips button { flex:0 0 auto; padding:10px 14px; border-radius:12px; border:1px solid #2c3d61; background:#16233f; color:#e7edf7; font-weight:700; }
/* Config panel */
.config-tabs { display:flex; gap:6px; margin-bottom:10px; }
.tab-config { flex:1; padding:8px; border-radius:10px; border:1px solid #2c3d61; background:#0d1526; color:#dbe3f5; font-weight:700; }
.tab-config.on { background:#0e7a4a; color:#eafff3; border-color:#14532d; }
.config-item { display:flex; justify-content:space-between; align-items:center; padding:12px; background:#0d1526; border:1px solid #223057; border-radius:12px; margin-bottom:8px; }
.config-item input[type=checkbox] { width:48px; height:28px; appearance:none; background:#223057; border-radius:999px; position:relative; cursor:pointer; }
.config-item input[type=checkbox]:checked { background:#0e7a4a; }
.config-item input[type=checkbox]::after { content:""; position:absolute; width:22px; height:22px; background:#fff; border-radius:50%; top:3px; left:3px; transition:.2s; }
.config-item input[type=checkbox]:checked::after { left:23px; }
/* lista espera compacta */
.lista-espera li { background:#101a2e; border:1px solid #223057; border-radius:14px; padding:12px; margin-bottom:8px; }

#vSolicitudes .nav-btn, #vMias .nav-btn { background:#0f4a52; color:#7ff3ff; border:1px solid #17808f; }

/* ══════ PALETA PROPIA FLOTA V (esmeralda / ámbar / violeta) ══════ */
:root{
  --fv-go:#0FB981;        /* acción, ganar */
  --fv-go-osc:#0a8f63;
  --fv-deal:#F59E0B;      /* negociación */
  --fv-seat:#6366F1;      /* cupos / comunidad */
  --fv-bg:#0b1220;
  --fv-card:#101a2e;
  --fv-line:#223057;
  --fv-txt:#e7edf7;
  --fv-dim:#b4c2e0;
}
.btn.go{ background:var(--fv-go); color:#04241a; border:none; }
.btn.deal{ background:#3a2a08; color:#fcd9a0; border:1px solid var(--fv-deal); }
.btn.seat{ background:#2a2b5e; color:#e0e1ff; border:1px solid var(--fv-seat); }
.tab-viajes.on{ background:var(--fv-go); color:#04241a; border-color:var(--fv-go); }
.tab-config.on{ background:var(--fv-seat); color:#eef; border-color:var(--fv-seat); }

/* ══════ HOME (rol + servicio) ══════ */
.home-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; text-align:center; }
.home-logo{ font-size:30px; font-weight:900; letter-spacing:-.5px; }
.home-logo b{ color:var(--fv-go); }
.home-sub{ color:var(--fv-dim); font-size:15px; max-width:340px; }
.home-card{ width:100%; max-width:380px; background:var(--fv-card); border:1px solid var(--fv-line); border-radius:18px; padding:16px; text-align:left; }
.home-card h3{ font-size:17px; margin-bottom:10px; }
.home-opt{ display:flex; align-items:center; gap:12px; width:100%; padding:15px 14px; margin-bottom:9px; border-radius:14px; border:1px solid var(--fv-line); background:#0d1526; color:var(--fv-txt); font-size:16px; font-weight:700; cursor:pointer; text-align:left; }
.home-opt:last-child{ margin-bottom:0; }
.home-opt .ic{ font-size:22px; }
.home-opt small{ display:block; font-weight:500; color:var(--fv-dim); font-size:12.5px; margin-top:2px; }
.home-opt.go{ border-color:var(--fv-go); }
.home-opt.deal{ border-color:var(--fv-deal); }
.home-opt.seat{ border-color:var(--fv-seat); }
.home-opt.sel{ background:#12352a; }
.home-back{ background:none; border:none; color:var(--fv-dim); font-size:14px; cursor:pointer; }

/* ══════ WIZARD publicar ruta ══════ */
.wiz-steps{ display:flex; gap:6px; margin-bottom:12px; }
.wiz-steps i{ height:5px; flex:1; border-radius:99px; background:#223057; }
.wiz-steps i.on{ background:var(--fv-seat); }
.wiz-step{ display:none; }
.wiz-step.on{ display:block; }
.wiz-title{ font-size:19px; font-weight:900; margin-bottom:8px; }
.wiz-actions{ display:flex; gap:8px; margin-top:12px; }
.wiz-actions button{ flex:1; }
.wiz-chip{ padding:9px 12px; border-radius:11px; border:1px solid var(--fv-line); background:#0d1526; color:var(--fv-txt); font-weight:700; cursor:pointer; }
.wiz-chip.on{ background:#2a2b5e; border-color:var(--fv-seat); color:#e3e4ff; }
.price-big{ font-size:40px; font-weight:900; text-align:center; }
.price-big.ok{ color:var(--fv-go); } .price-big.mid{ color:var(--fv-deal); } .price-big.hi{ color:#ef4444; }
.price-bar{ display:flex; align-items:center; justify-content:center; gap:18px; }
.price-bar button{ width:52px; height:52px; border-radius:50%; border:2px solid var(--fv-go); background:none; color:var(--fv-go); font-size:26px; cursor:pointer; }
.price-rec{ text-align:center; font-size:13px; margin-top:6px; }
.price-rec b{ background:#12382f; color:#6ee7b7; padding:4px 10px; border-radius:99px; }

/* ══════ Desempeño ══════ */
.desem-card{ background:linear-gradient(180deg,#0e2a3a,#0c1f2e); border:1px solid #1e4a5f; border-radius:16px; padding:14px; margin-bottom:10px; }
.desem-nivel{ display:flex; align-items:center; gap:8px; font-size:22px; font-weight:900; }
.desem-bar{ height:12px; background:#0d1526; border:1px solid var(--fv-line); border-radius:99px; overflow:hidden; margin:10px 0 6px; }
.desem-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--fv-go),#5eead4); }
.desem-row{ display:flex; justify-content:space-between; padding:11px 12px; background:#0d1526; border:1px solid var(--fv-line); border-radius:12px; margin-bottom:7px; font-size:15px; }

/* ══════ Hoja de solicitud: contador 20s y tiempos ══════ */
.sheet-count{ position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:6px; background:rgba(11,18,32,.9); border:1px solid var(--fv-deal); color:#fcd9a0; border-radius:999px; padding:5px 12px; font-weight:800; font-size:14px; }
.sheet-count i{ position:absolute; left:0; top:0; bottom:0; width:100%; background:rgba(245,158,11,.22); border-radius:999px; transform-origin:left; transition:transform 1s linear; z-index:-1; }
.sheet-tiempos{ display:flex; gap:8px; margin-bottom:10px; }
.sheet-tiempos div{ flex:1; background:#0d1526; border:1px solid var(--fv-line); border-radius:12px; padding:9px 10px; font-size:13px; }
.sheet-tiempos b{ display:block; font-size:16px; color:var(--fv-txt); }
.sheet-tiempos span{ color:var(--fv-dim); font-size:12px; }
/* Leyenda: iconos más grandes y colapsada por defecto */
.leyenda .dot{ width:20px; height:20px; }
.leyenda-cuerpo div{ font-size:16px; gap:10px; margin-top:9px; }
/* Marcador de destino (bandera) */
.dest-marca{ font-size:30px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); animation:destPulse 1.6s ease-in-out infinite; }
@keyframes destPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.18);} }
/* Iconos del selector de reportes más grandes */
#pickerTipos button{ font-size:17px; padding:16px 10px; }

/* ══════ Aspecto de la hoja de solicitud (más claro, estilo propio) ══════ */
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 16px 10px; }
.sheet-head b{ font-size:18px; font-weight:900; }
.sheet-head span{ background:#122f26; color:#6ee7b7; border:1px solid var(--fv-go); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; }
.sheet-map-wrap{ height:224px; }
.sheet-badges{ align-items:flex-start; left:12px; top:12px; transform:none; }
.badge{ font-size:14px; padding:7px 12px; border-radius:11px; }
.badge-a{ background:#1e3a8a; }
.badge-b{ background:var(--fv-go-osc); }
.sheet-body{ padding:14px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet-cliente{ align-items:flex-start; }
.sheet-precio{ font-size:30px; color:#fcd9a0; }
.sheet-dir{ max-width:46vw; font-size:13.5px; }
.sheet-tiempos div{ display:flex; flex-direction:column; gap:2px; }
.sheet-tiempos b{ font-size:17px; }
.sheet-confirmar{ background:var(--fv-go); color:#04241a; }
.sheet-alt{ font-size:14px; }
#sheetCerrar{ background:#16233f; }
#sheetCount{ font-size:16px; padding:7px 14px; bottom:12px; left:12px; }
#map .maplibregl-popup-content{ border-radius:12px; }
#miniMapa .maplibregl-canvas{ border-radius:0; }
/* Banner de navegación más cómodo: botón ✕ grande y visible */
#navBanner{ bottom:96px; padding:12px 14px; }
#navBanner b{ font-size:16px; }
#navCerrar{ width:56px; height:56px; font-size:22px; }
/* Selector de modo pasajero: Viaje / Cupo / Ambos (segmentado compacto) */
#modoPasajero .home-opt{ flex:1; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px 6px; margin:0; font-size:15px; border-radius:14px; gap:4px; }
#modoPasajero .home-opt .ic{ font-size:20px; }
#modoPasajero .home-opt small{ font-size:11px; }
#modoPasajero .home-opt.sel{ background:#12352a; }
#modoPasajero .home-opt.sel.seat{ background:#262a5e; }
#modoPasajero .home-opt.sel.go{ background:#12352a; }
/* Confirmación propia (sin confirm() del navegador) */
#confirmOverlay{ position:fixed; inset:0; background:rgba(4,8,18,.78); z-index:4000; display:flex; align-items:center; justify-content:center; padding:20px; }
#confirmBox{ background:#101a2e; border:1px solid var(--fv-line); border-radius:16px; padding:18px; max-width:360px; width:100%; }
#confirmBox p{ font-size:15px; }
.sheet-head span.sheet-urg{ background:#4a1d24; color:#fcd9a0; border-color:#b45309; }
#viajeDetalle{ position:fixed; inset:0; background:rgba(4,8,18,.8); z-index:3900; display:flex; align-items:flex-end; justify-content:center; padding:0; }
#viajeDetalleBox{ background:#101a2e; border:1px solid var(--fv-line); border-top-left-radius:18px; border-top-right-radius:18px; max-width:480px; width:100%; padding:10px 16px calc(20px + env(safe-area-inset-bottom)); max-height:86vh; overflow:auto; }
#viajeDetalleBox .sheet-head{ padding:8px 0 10px; }
#btnCerrarDetalle{ background:#16233f; color:#cfe0ff; border:1px solid var(--fv-line); border-radius:10px; width:44px; height:44px; font-size:18px; cursor:pointer; }
.dir-sug{ background:#101a2e; border:1px solid var(--fv-line); border-radius:12px; overflow:hidden; margin-top:6px; max-height:220px; overflow-y:auto; }
.dir-sug div{ padding:12px 14px; font-size:15px; color:var(--fv-txt); border-bottom:1px solid #223057; cursor:pointer; }
.dir-sug div:last-child{ border-bottom:none; }
.dir-sug div small{ display:block; color:var(--fv-dim); font-size:12px; }
/* Banner de giro por giro (estilo Uber) */
#turnBanner{ position:absolute; top:64px; left:10px; right:10px; z-index:920; display:flex; align-items:center; gap:12px;
  background:rgba(11,18,32,.95); border:1px solid var(--fv-line); border-radius:16px; padding:12px 14px;
  box-shadow:0 4px 18px rgba(0,0,0,.5); }
#turnFlecha{ font-size:34px; font-weight:900; color:var(--fv-go); min-width:44px; text-align:center; }
#turnTxt{ font-size:17px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#turnSub{ font-size:13px; color:var(--fv-dim); margin-top:2px; }
#turnEta{ font-size:15px; font-weight:800; color:#7ee2a8; white-space:nowrap; }
/* Chip de velocidad */
#velChip{ position:absolute; left:10px; bottom:96px; z-index:920; background:rgba(11,18,32,.9); border:1px solid var(--fv-line);
  border-radius:12px; padding:7px 12px; font-size:15px; font-weight:800; color:#fff; }
/* Listado de viajes sin mapa (estilo inDrive) */
.main-lista{ position:absolute; inset:0; z-index:600; overflow-y:auto; background:var(--fv-bg); padding:10px 12px 90px; }
.main-lista .card-sol{ background:var(--fv-card); border:1px solid var(--fv-line); border-radius:16px; padding:12px 14px; margin-bottom:10px; }
.main-lista .card-sol .precio{ font-size:24px; font-weight:900; }
.main-lista .card-sol .ruta{ font-size:14px; color:#dbe6ff; margin-top:4px; line-height:1.45; }
.main-lista .card-sol .pie{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:13px; color:var(--fv-dim); }
.main-lista .card-sol .acciones{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.main-lista .card-sol .acciones button{ flex:1 1 auto; padding:10px 8px; border-radius:10px; border:1px solid var(--fv-line); background:#0d1526; color:#e7edf7; font-size:13px; font-weight:700; cursor:pointer; }
.main-lista .card-sol .acciones .nav{ background:transparent; color:#8fd3ff; }
.main-lista .card-sol .acciones .aceptar{ background:var(--fv-go); border-color:var(--fv-go); color:#04120b; }
.main-lista .card-sol .acciones .contra{ background:#12263f; border-color:#2c5c8f; color:#9cd0ff; }
.estado-lista{ text-align:center; color:var(--fv-dim); font-size:15px; padding:40px 16px; line-height:1.6; }
.sheet-nav{ display:flex; gap:8px; margin-top:8px; }
/* Vista del viaje asignado (mapa limpio, sin alertas). Sin superposiciones. */
#viajeVista{ position:absolute; top:0; left:0; right:0; bottom:calc(90px + env(safe-area-inset-bottom)); z-index:600; display:flex; flex-direction:column; background:var(--fv-bg); }
#viajeMapa{ flex:1; min-height:240px; }
#vvPanel{ flex:0 0 auto; background:var(--fv-card); border-top:1px solid var(--fv-line); border-radius:16px 16px 0 0; padding:10px 12px 16px; }
#vvFila1{ display:flex; justify-content:space-between; align-items:center; }
#vvEstado{ font-size:13px; color:#7ee2a8; font-weight:800; }
#vvPagoMetodo{ font-size:13px; color:var(--fv-dim); }
#vvPrecio{ font-size:28px; font-weight:900; color:#fff; margin:2px 0; }
#vvRuta{ font-size:13px; color:#dbe6ff; line-height:1.4; }
#vvMeta{ font-size:12px; color:var(--fv-dim); margin-top:2px; }
.vv-acciones{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.vv-acciones button{ flex:1 1 auto; min-width:100px; padding:13px 8px; border-radius:12px; border:1px solid var(--fv-line); background:#0d1526; color:#e7edf7; font-size:14px; font-weight:800; cursor:pointer; }
.vv-acciones .nav{ background:transparent; color:#8fd3ff; }
.vv-acciones .go{ background:var(--fv-go); border-color:var(--fv-go); color:#04120b; }
.vv-acciones .warn{ background:#4a1d24; border-color:#b45309; color:#fcd9a0; }
/* Radar a pantalla completa SIN mapa (solo fondo) */
#radar.sin-mapa{ position:fixed; inset:0; z-index:640; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-bottom:90px; box-sizing:border-box;
  background:radial-gradient(circle at 50% 42%, #12233f 0%, #0b1220 55%, #070d18 100%);
  background-image:
    linear-gradient(rgba(56,116,203,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(56,116,203,.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, #12233f 0%, #0b1220 55%, #070d18 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%; }
#radar.sin-mapa #radarDisp{ position:static; margin-top:8px; }
#radar.sin-mapa .radar-anim{ width:190px; height:190px; }
#radar.sin-mapa p{ margin:0; }
#vvDiag{ position:absolute; top:8px; left:10px; right:10px; z-index:615; background:rgba(11,18,32,.92); border:1px solid #2c3d61; border-radius:10px; padding:6px 10px; font-size:12px; color:#8fd3ff; text-align:center; }

/* ══════════════════════════════════════════════════════════
   Taxi Ejecutivo — TEMA CLARO / LIMPIO (estilo corporativo)
   Solo este proyecto. Blanco + azul, texto oscuro, tarjetas suaves.
   ══════════════════════════════════════════════════════════ */
:root {
  --fv-go: #1e63e9;        /* acción principal (azul) */
  --fv-go-osc: #174fc0;
  --fv-deal: #f59e0b;
  --fv-seat: #6366f1;
  --fv-bg: #f4f6fa;        /* fondo claro */
  --fv-card: #ffffff;      /* tarjetas blancas */
  --fv-line: #e3e8f0;      /* bordes suaves */
  --fv-txt: #0f172a;       /* texto oscuro */
  --fv-dim: #64748b;       /* texto secundario */
}
body { background: var(--fv-bg) !important; color: var(--fv-txt) !important; }
header { background: #ffffff !important; border-bottom: 1px solid var(--fv-line) !important; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.logo { color: #0f172a !important; font-weight: 800; letter-spacing: .2px; }
.logo b { color: var(--fv-go); }
.pill.off { background: #eef2f7; color: #64748b; }
.pill.on { background: #e7f0ff; color: #174fc0; border: 1px solid #cddffd; }

/* Tarjetas y paneles */
.card, .card-wrap .card, .viajes-panel, .card-viaje, .card-sol,
.sheet-propuesta, #vvPanel, .home-card {
  background: var(--fv-card) !important; color: var(--fv-txt) !important;
  border: 1px solid var(--fv-line) !important; border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
}
.home-card { background: #ffffff !important; }
.home-opt { background: #fbfcfe !important; border: 1px solid var(--fv-line) !important; color: var(--fv-txt) !important; }
.home-opt small, .home-sub { color: var(--fv-dim) !important; }
.home-opt:hover { border-color: var(--fv-go) !important; }
.home-logo { color: #0f172a !important; }
.home-logo b { color: var(--fv-go); }

/* Inputs, selects y textareas (incluye estilos en línea) */
input, select, textarea {
  background: #ffffff !important; color: var(--fv-txt) !important;
  border: 1px solid var(--fv-line) !important; border-radius: 10px !important;
}
input::placeholder, textarea::placeholder { color: #94a3b8 !important; }
label, .note { color: var(--fv-dim) !important; }

/* Botones */
.btn, .btn.ghost { background: #ffffff !important; color: #334155 !important; border: 1px solid var(--fv-line) !important; }
.btn.primary, .btn.go, .aceptar, .sheet-confirmar, .vv-acciones .go, #btnOpCrear {
  background: var(--fv-go) !important; color: #ffffff !important; border: none !important; font-weight: 700;
}
.btn.primary:hover, .btn.go:hover, .aceptar:hover { background: var(--fv-go-osc) !important; }
.contra, .vv-acciones .warn { background: #fff1f2 !important; color: #be123c !important; border: 1px solid #fecdd3 !important; }
.nav-btn, .vv-acciones .nav, .main-lista .card-sol .acciones .nav { background: #f1f5f9 !important; color: #1e63e9 !important; border: 1px solid var(--fv-line) !important; }

/* Listado / tarjetas del conductor */
.main-lista { background: var(--fv-bg) !important; }
.main-lista .card-sol { background: #fff !important; }
.main-lista .card-sol .precio, .precio, .price-big.ok, .sheet-precio, #vvPrecio { color: #0f172a !important; }
.main-lista .card-sol .ruta { color: #334155 !important; }
.main-lista .card-sol .pie, .chip-dist { color: var(--fv-dim) !important; }
.chip-dist { background: #f1f5f9 !important; border: 1px solid var(--fv-line) !important; color: #475569 !important; }

/* Barra del conductor y menú */
.driver-bar { background: linear-gradient(transparent, #ffffff 40%) !important; }
#menuDrawer, #menuDrawer button { background: #ffffff !important; color: var(--fv-txt) !important; }
#menuDrawer button { border-bottom: 1px solid var(--fv-line) !important; }

/* Aviso flotante y diagnóstico */
.nota-flotante { background: #0f172a !important; color: #fff !important; }
#vvDiag { background: #ffffff !important; border: 1px solid var(--fv-line) !important; color: #174fc0 !important; }

/* Vista del viaje (panel inferior) */
#vvPanel { border-radius: 16px 16px 0 0 !important; }
#vvEstado { color: #15803d !important; }
.vv-acciones button { background: #fff !important; color: #334155 !important; border: 1px solid var(--fv-line) !important; }

/* Radar: fondo claro y limpio */
#radar.sin-mapa {
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #eef2f9 60%, #e6ecf6 100%) !important;
  background-image: radial-gradient(circle at 50% 42%, #ffffff 0%, #eef2f9 60%, #e6ecf6 100%) !important;
}
#radar.sin-mapa p, #radar.sin-mapa #radarTxt { color: #334155 !important; }
#radar.sin-mapa .ring { border-color: rgba(30,99,233,.25) !important; }
#radar.sin-mapa .sweep { background: conic-gradient(from 0deg, rgba(30,99,233,.28), transparent 60%) !important; }
#radar.sin-mapa .radar-dot { background: #1e63e9 !important; }

/* Scrollbar clara */
::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
::-webkit-scrollbar { background: #eef2f7; }

/* ── Legibilidad en tema claro (el motor usa colores claros para tema oscuro) ── */
.card-viaje div, .card-viaje small { color: #475569 !important; }
.card-viaje b { color: #0f172a !important; }
.sheet-body, .sheet-body div, .sheet-cliente { color: #475569 !important; }
.sheet-body b, .sheet-head b { color: #0f172a !important; }
.sheet-dir b { color: #1e63e9 !important; }
.main-lista .card-sol .pie span, .main-lista .card-sol .ruta { color: #475569 !important; }
.lista-espera div, .lista-espera small { color: #475569 !important; }
.lista-espera b { color: #0f172a !important; }
#opMapa { background: #eef2f7 !important; }
.op-vacio { color: #64748b; }
/* Re-afirmar botones dentro de tarjetas (para que no los pise la regla de texto) */
.card-viaje .aceptar, .vv-acciones .go, .main-lista .card-sol .acciones .aceptar { color: #ffffff !important; }
.card-viaje .contra, .vv-acciones .warn { color: #be123c !important; }
.card-viaje .nav-btn, .main-lista .card-sol .acciones .nav { color: #1e63e9 !important; }

/* ══ Barrido: componentes oscuros del motor → claro ══ */
#panel, #navBanner, #menuDrawer, #buscadorRes, #confirmBox, #viajeDetalleBox,
.picker, .viajes-panel, .card, .dir-sug, .lista-espera li { background: #ffffff !important; border-color: #e3e8f0 !important; }
#panel li, #vSolicitudes li, #vMias li, .config-item, .desem-row,
.tab-viajes, .tab-config, #pickerTipos button, .sheet-chips button,
.main-lista .card-sol .acciones button, .wiz-chip, .sheet-tiempos div, .desem-bar {
  background: #f8fafc !important; color: #334155 !important; border-color: #e3e8f0 !important;
}
#menuDrawer [data-menu] { background: #ffffff !important; color: #0f172a !important; border-color: #e3e8f0 !important; }
#menuDrawer [data-menu]:hover { background: #f1f5f9 !important; }
.btn.ghost, .btn.disp, #sheetCerrar, #btnCerrarDetalle, #radarFull, #btnUbicacion {
  background: #ffffff !important; color: #334155 !important; border-color: #e3e8f0 !important;
}
#vSolicitudes .nav-btn, #vMias .nav-btn { background: #f1f5f9 !important; color: #1e63e9 !important; border-color: #e3e8f0 !important; }
#vSolicitudes .contra, #vMias .contra { background: #fff1f2 !important; color: #be123c !important; border-color: #fecdd3 !important; }
.sheet-head span { background: #e7f0ff !important; color: #174fc0 !important; border-color: #cddffd !important; }
#buscadorInput { background-color: #ffffff !important; color: #0f172a !important; border-color: #e3e8f0 !important; }
#map .maplibregl-popup-content button { background: #ffffff !important; color: #334155 !important; border-color: #e3e8f0 !important; }
#nota, .nota-flotante { background: #0f172a !important; color: #ffffff !important; }
/* textos secundarios oscuros del motor */
#panel, #panel h2, .viajes-panel, .viajes-panel div, .config-item, .wiz-step, .wiz-title { color: #334155 !important; }
.viajes-panel b, .wiz-title, #panel h2 { color: #0f172a !important; }
/* cabeceras y fondos de hoja */
.sheet-head, .sheet-body { background: #ffffff !important; }
#sheetCerrar { color: #334155 !important; }

/* ── Legibilidad extra del tema claro (componentes que el motor pinta oscuro) ── */
.desem-card { background: #ffffff !important; color: #334155 !important; border: 1px solid #e3e8f0 !important; }
.desem-card b, .desem-row b { color: #0f172a !important; }
.desem-row small { color: #15803d !important; }
.estado-lista small { color: #64748b !important; }
#gpsLista li { background: #f8fafc !important; color: #334155 !important; border-color: #e3e8f0 !important; }
[style*="background:#12204a"], [style*="background: #12204a"] { background: #f1f5f9 !important; color: #334155 !important; }
#vMisRutas li, #vMisRutas div, #vMisRutas b, #vOfertas div, #vOfertas b { color: #334155 !important; }
#vOfertas b { color: #0f172a !important; }
#vOfertas div[style], #vOfertas > div { background: #f8fafc !important; }
.sheet-body p { color: #475569 !important; }
#vvRuta { color: #334155 !important; }
.viajes-panel h3 { color: #0f172a !important; }
.config-item span { color: #334155 !important; }
#btnCerrarViajes, #btnCerrarAuto, #btnCerrarGps, #btnCerrarDesempeno, #btnCerrarConfig, #menuCerrar { color: #334155 !important; }
/* Pestañas activas (el barrido las había pisado) */
.tab-viajes.on, .tab-config.on { background: #e7f0ff !important; color: #174fc0 !important; border-color: #cddffd !important; }
/* Banner de giro / radar en modo mapa (fondo oscuro → texto claro) */
#turnBanner, #turnBanner b, #turnSub { color: #e7edf7 !important; }
#radar.full, #radar.full p { color: #e7edf7 !important; }