:root{
  --cr-ink:#1d1430; --cr-deep:#2b1b54; --cr-primary:#6c4ce0; --cr-primary-press:#5c3ed0; --cr-lilac:#9b7bf0;
  --cr-surface-2:#ede7fd; --cr-surface:#faf8ff; --cr-alert:#f0a63c;
  --cr-map-bg:#eee9f7; --cr-map-road:#ffffff; --cr-map-water:#d9e6f2; --cr-map-dark:#241640;
  --verde:var(--cr-primary); --verde-2:var(--cr-lilac); --verde-claro:var(--cr-surface-2);
  --tinta:var(--cr-ink); --gris:#6b5b8a; --linea:#ece5fb; --fondo:#ffffff; --suave:#f5f2fc;
  --rojo:#dc2626; --ambar:var(--cr-alert);
  --sombra:0 2px 10px rgba(43,27,84,.18);
  --seg-top:env(safe-area-inset-top,0px); --seg-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tinta);background:var(--cr-map-bg);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
a{color:var(--verde)}

#mapa{position:fixed;inset:0}
.maplibregl-ctrl-bottom-right{bottom:calc(var(--hoja-alto,140px) + 4px)}
.maplibregl-ctrl-attrib{font-size:11px}

/* Buscador */
.arriba{position:fixed;left:0;right:0;top:0;padding:calc(10px + var(--seg-top)) 12px 0;z-index:5;pointer-events:none}
.buscador{pointer-events:auto;display:flex;align-items:center;gap:6px;background:var(--fondo);border-radius:14px;box-shadow:var(--sombra);padding:0 6px 0 12px;height:50px;max-width:560px;margin:0 auto}
.buscador input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:transparent;min-width:0;height:100%}
.lupa{color:var(--gris);display:flex}
.menu-btn{border:0;background:transparent;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.sugerencias{pointer-events:auto;list-style:none;margin:6px auto 0;padding:4px 0;background:var(--fondo);border-radius:14px;box-shadow:var(--sombra);max-width:560px;max-height:55vh;overflow:auto}
.sugerencias li button{display:flex;gap:10px;width:100%;text-align:left;border:0;background:none;padding:10px 14px;align-items:flex-start}
.sugerencias li button:hover,.sugerencias li button:focus{background:var(--suave);outline:0}
.sugerencias small{display:block;color:var(--gris);font-size:12.5px}
.sugerencias .ico{width:28px;height:28px;border-radius:50%;background:var(--suave);display:flex;align-items:center;justify-content:center;flex:none;font-size:14px}

/* Banner de navegación */
.banner{position:fixed;left:10px;right:10px;top:calc(10px + var(--seg-top));z-index:6;background:linear-gradient(160deg,#4b25b8,var(--cr-deep));color:#fff;border-radius:16px;box-shadow:var(--sombra);display:flex;align-items:center;gap:12px;padding:12px 16px;max-width:560px;margin:0 auto}
.banner-flecha{width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center}
.banner-flecha svg{width:44px;height:44px;stroke-width:2.6}
.banner-dist{font-size:26px;font-weight:700;line-height:1.1}
.banner-instr{font-size:16px;opacity:.95}
.banner.fuera{background:var(--cr-deep)}
.aviso-vial{position:fixed;left:10px;right:10px;top:calc(98px + var(--seg-top));z-index:6;background:#fff7ed;color:#7c2d12;border:2px solid var(--ambar);border-radius:14px;padding:10px 14px;box-shadow:var(--sombra);max-width:560px;margin:0 auto;font-weight:600}

/* Flotantes */
.flotantes{position:fixed;right:12px;bottom:calc(var(--hoja-alto,140px) + 40px);display:flex;flex-direction:column;gap:10px;z-index:4;transition:bottom .2s}
.fab{width:48px;height:48px;border-radius:50%;border:0;background:var(--fondo);box-shadow:var(--sombra);display:flex;align-items:center;justify-content:center;color:var(--tinta)}
.fab.activo{color:var(--verde);background:var(--verde-claro)}
.fab-reporte{background:var(--ambar);color:#fff}

/* Hoja inferior */
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--fondo);border-radius:18px 18px 0 0;box-shadow:0 -2px 14px rgba(43,27,84,.16);padding:6px 16px calc(14px + var(--seg-bottom));max-height:72vh;overflow:auto;max-width:640px;margin:0 auto}
.asa{width:38px;height:4px;border-radius:2px;background:var(--linea);margin:2px auto 10px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.accion{flex:1 1 140px;min-height:46px;border-radius:12px;border:1px solid var(--linea);background:var(--fondo);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;padding:0 12px}
.accion svg{width:18px;height:18px}
.accion.primaria{background:var(--verde);color:#fff;border-color:var(--verde)}
.accion.primaria:not(:disabled):active,.accion.primaria:not(:disabled):hover{background:var(--cr-primary-press);border-color:var(--cr-primary-press)}
.accion.primaria svg{fill:#fff;stroke:#fff}
.accion.peligro{color:var(--rojo)}
.accion:disabled{opacity:.5;cursor:default}
.nota{color:var(--gris);font-size:13.5px;margin:8px 0}
.nota.fina{font-size:12px}
h2{font-size:18px;margin:0}

.ruta-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}

/* Puntos de la ruta (arriba): A, paradas y destino */
.panel-ruta{position:fixed;left:0;right:0;top:0;padding:calc(10px + var(--seg-top)) 12px 0;z-index:6;pointer-events:none}
.panel-caja{pointer-events:auto;background:var(--fondo);border-radius:16px;box-shadow:var(--sombra);padding:8px 8px 4px 4px;max-width:560px;margin:0 auto}
.panel-fila{display:flex;gap:6px;align-items:flex-start}
.panel-lado{display:flex;flex-direction:column;gap:6px;justify-content:space-between;align-self:stretch}
.paradas{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.paradas li{display:flex;align-items:center;gap:6px;background:var(--fondo);border-radius:10px;position:relative}
.paradas li.arrastrando{z-index:2;box-shadow:var(--sombra);transition:none}
.paradas li:not(.arrastrando){transition:transform .12s}
.paradas .mover{width:24px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--gris);cursor:grab;touch-action:none;flex:none}
.paradas .mover svg{width:18px;height:18px;stroke-width:3}
.paradas .letra{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;background:var(--cr-deep)}
.paradas .letra.origen{background:var(--cr-primary)}
.paradas .letra.parada{background:var(--cr-lilac)}
.paradas input{flex:1;min-width:0;height:40px;border:1px solid var(--linea);background:var(--suave);border-radius:10px;padding:0 10px;font:inherit;font-size:16px;color:var(--tinta);outline:0}
.paradas input:focus{border-color:var(--verde);background:var(--fondo)}
.paradas input::-webkit-search-cancel-button{display:none}
.paradas .quitar{border:0;background:transparent;width:32px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--gris);flex:none;padding:0}
.paradas .quitar svg{width:18px;height:18px}
.agregar-parada{display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--verde);font-weight:600;padding:8px 8px 6px 34px;font-size:14px}
.agregar-parada svg{width:18px;height:18px}
.panel-ruta .sugerencias{max-height:calc(100vh - var(--panel-alto,200px) - 20px)}
body.en-ruta .hoja{max-height:calc(100vh - var(--panel-alto,180px) - 24px)}
body.en-ruta .toast{top:calc(var(--panel-alto,60px) + 8px)}
.tramos{list-style:none;margin:8px 0 0;padding:0;font-size:13.5px}
.tramos li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--linea)}
.tramos span{color:var(--gris)}
.cerrar{border:0;background:var(--suave);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}

.perfiles{display:flex;background:var(--suave);border-radius:12px;padding:3px;gap:3px}
.perfiles button{flex:1;border:0;background:transparent;border-radius:9px;padding:8px 4px;font-size:14px;font-weight:600;color:var(--gris)}
.perfiles button[aria-checked="true"]{background:var(--fondo);color:var(--verde);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;margin:10px 2px 0}
.chk input{width:18px;height:18px;accent-color:var(--verde)}

.ruta-datos .grande{display:flex;align-items:baseline;gap:10px;margin:10px 0 4px}
.ruta-datos .grande b{font-size:26px}
.ruta-datos .grande span{color:var(--gris)}
.barra-infra{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--linea);margin:6px 0}
.barra-infra i{display:block;height:100%}
.leyenda-infra{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--gris)}
.leyenda-infra span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;background:var(--c)}
.altimetria{width:100%;height:70px;display:block;margin-top:6px}

.pasos{margin:8px 0 0;padding:0;list-style:none;border-top:1px solid var(--linea)}
.pasos li{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linea);font-size:14px}
.pasos li svg{flex:none;color:var(--verde)}
.pasos small{color:var(--gris);display:block}

.nav-datos{display:flex;gap:8px;margin:6px 0}
.nav-datos div{flex:1;text-align:center;background:var(--suave);border-radius:12px;padding:8px 4px}
.nav-datos b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.nav-datos span{font-size:12px;color:var(--gris)}
.grab-reloj{font-size:40px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:1px}

.lista{list-style:none;margin:0;padding:0}
.lista li{border-bottom:1px solid var(--linea)}
.lista li>button,.lista li>a{display:block;width:100%;text-align:left;border:0;background:none;padding:12px 2px;text-decoration:none;color:inherit}
.lista small{color:var(--gris)}
.totales{display:flex;gap:8px;margin-bottom:6px}
.totales div{flex:1;background:var(--verde-claro);border-radius:12px;padding:8px;text-align:center}
.totales b{display:block;font-size:19px;color:var(--verde)}
.totales span{font-size:12px;color:var(--gris)}

.tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tipos button{border:1px solid var(--linea);background:var(--fondo);border-radius:14px;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:600;text-align:center}
.tipos .emo{font-size:28px;line-height:1}

.leyenda{list-style:none;margin:0;padding:0}
.leyenda li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linea)}
.leyenda label{flex:1;display:flex;align-items:center;gap:10px}
.leyenda input{width:18px;height:18px;accent-color:var(--verde)}
.leyenda .muestra{width:26px;height:6px;border-radius:3px;flex:none}
.leyenda .muestra.pt{width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0003}
.leyenda small{color:var(--gris)}

.mira{position:fixed;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;z-index:3;pointer-events:none}
.mira::before,.mira::after{content:"";position:absolute;background:var(--tinta)}
.mira::before{left:21px;top:0;width:2px;height:44px}
.mira::after{top:21px;left:0;height:2px;width:44px}

.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(72px + var(--seg-top));z-index:9;background:var(--cr-deep);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;max-width:calc(100% - 32px);box-shadow:var(--sombra)}

/* Popups del mapa */
.maplibregl-popup-content{border-radius:12px;padding:12px 14px;font:inherit;box-shadow:var(--sombra)}
.pop h3{margin:0 0 2px;font-size:15px}
.pop p{margin:2px 0;color:var(--gris);font-size:13px}
.pop .acciones{margin-top:8px}
.pop .accion{min-height:36px;flex:1 1 90px;font-size:13px}

/* Marcador de posición */
.yo{width:22px;height:22px;border-radius:50%;background:var(--cr-primary);border:3px solid #fff;box-shadow:0 0 0 1px #0002,0 0 0 8px rgba(108,76,224,.2)}
.yo.rumbo::after{content:"";position:absolute;left:50%;top:-13px;margin-left:-6px;border:6px solid transparent;border-bottom:9px solid var(--cr-primary)}

@media (min-width:900px){
  .hoja{left:16px;right:auto;bottom:16px;width:400px;border-radius:18px;max-height:calc(100vh - 100px)}
  .flotantes{bottom:28px!important}
  .arriba{padding-left:16px}
  .buscador,.sugerencias{margin-left:0;width:400px}
  .panel-ruta{padding-left:16px}
  .panel-caja,.panel-ruta .sugerencias{margin-left:0;width:400px}
  body.en-ruta .hoja{bottom:auto;top:calc(var(--panel-alto,180px) + 8px);max-height:calc(100vh - var(--panel-alto,180px) - 24px)}
  body.en-ruta .toast{left:calc(16px + 200px)}
  .banner{left:432px;right:auto;width:420px;margin:0}
  .aviso-vial{left:432px;right:auto;width:420px;margin:0}
  .maplibregl-ctrl-bottom-right{bottom:0}
}

/* Reportes en el mapa */
.marca-reporte{width:34px;height:34px;border-radius:50%;border:2px solid var(--ambar);background:#fff;box-shadow:var(--sombra);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.sin-reportes .marca-reporte{display:none}
.yo{position:relative}
.nav-datos b{white-space:nowrap;font-size:clamp(17px,5.4vw,22px)}

/* Buscador */
.sugerencias .aprox{font-style:normal;font-size:11px;color:var(--cr-deep);background:var(--cr-surface-2);border-radius:6px;padding:0 5px;margin-left:4px;vertical-align:1px}
.sugerencias .aviso-sin-red{font-size:12px;color:var(--gris);padding:8px 14px;border-top:1px solid var(--linea)}

/* Elegir ciudad */
.elegir-ciudad{position:fixed;inset:0;z-index:20;background:rgba(26,16,48,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.elegir-ciudad .caja{background:var(--fondo);border-radius:18px;padding:22px 18px;max-width:420px;width:100%;box-shadow:var(--sombra)}
.elegir-ciudad h2{margin-bottom:14px}
.elegir-ciudad .opciones{display:flex;flex-direction:column;gap:10px}
.elegir-ciudad .opciones button{border:1px solid var(--linea);background:var(--suave);border-radius:14px;padding:14px 16px;text-align:left}
.elegir-ciudad .opciones b{display:block;font-size:18px;color:var(--verde)}
.elegir-ciudad .opciones small{color:var(--gris)}
.enlace{border:0;background:none;padding:0;color:var(--verde);text-decoration:underline;font:inherit}
.enlace.claro{color:#c9b4ff}