/* Síguelo On Hand (app para clientes) · piel Síguelo: amarillo de marca, tinta casi negra, IBM Plex.
   Sin estilos en línea (la CSP los bloquea): todo va por clases. */
:root{--ink:#15181D;--ink2:#3A414C;--muted:#5B6370;--line:#E2E5EA;--bg:#F4F5F7;--card:#FFFFFF;--soft:#F7F8FA;
  --marca:#FFD500;--ok:#1E7B3A;--okS:#E6F4EA;--mal:#B42318;--malS:#FDECEA;--amb:#8A3B06;--ambS:#FEF3E2;--gris:#9AA3AF;--az:#2F5BD3;--azS:#EAF0FD;
  --arriba:env(safe-area-inset-top,0px);--abajo:env(safe-area-inset-bottom,0px);color-scheme:light;
  /* 9-nov · modo oscuro: colores que antes iban escritos a mano. «inv» = superficie invertida (chip apretado, aviso
     flotante); los «F» son rellenos que no cambian con el tema porque van sobre el mapa o llevan texto blanco. */
  --inv:#15181D;--invT:#FFFFFF;--azF:#2F5BD3;--okF:#1E7B3A;--malF:#B42318;--grisF:#9AA3AF;
  --sopBg:#E7F7EE;--sopLn:#BFE6CF;--sopT:#14532D;--infoT:#1E3A8A;--nuevo:#FFFBEA;--neutro:#EEF0F3;--carril:#C9CED6;
  --malLn:#F3C1BC;--fila2:#FBFBFC;--sombra:rgba(21,24,29,.15)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.45 'IBM Plex Sans',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit}
.mono{font-family:'IBM Plex Mono',monospace}
.muted{color:var(--muted)} .peq{font-size:12.5px}
[hidden]{display:none!important}
.app{display:flex;flex-direction:column;height:100%;max-width:640px;margin:0 auto;background:var(--card)}
.barra{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--arriba)) 14px 10px;border-bottom:1px solid var(--line);background:var(--card);flex:none}
.barra .pin{width:26px;height:26px}
.barra-t{display:grid;min-width:0;flex:1}.barra-t b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:12px;color:var(--muted)}
.ico{border:0;background:var(--soft);border-radius:10px;width:38px;height:38px;font-size:18px;flex:none}
.vista{flex:1;min-height:0;overflow:auto;position:relative}
.vista.lleno{overflow:hidden}
.nav{display:flex;border-top:1px solid var(--line);background:var(--card);padding:6px 4px calc(8px + var(--abajo));flex:none}
.nav a{flex:1;display:grid;justify-items:center;gap:1px;font-size:11px;color:var(--muted);text-decoration:none;position:relative}
.nav a span{font-size:19px;line-height:1.2;padding:0 12px;border-radius:12px}
.nav a.on{color:var(--ink);font-weight:700}.nav a.on span{background:var(--marca);color:#15181D}
.punto{position:absolute;top:0;right:calc(50% - 22px);width:9px;height:9px;border-radius:50%;background:var(--mal)}
.sec{padding:14px;display:grid;gap:12px}
h1{font-size:22px;margin:0;text-wrap:balance}h2{font-size:17px;margin:0}
.btn{display:block;text-align:center;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:12px;font-weight:600;text-decoration:none;color:var(--ink);cursor:pointer}
.btn.primario{background:var(--marca);border-color:var(--marca);color:#15181D}.btn.peligro{background:var(--malS);color:var(--mal);border-color:var(--malLn)}
.btn.peligro-lleno{background:var(--malF);color:#fff;border-color:var(--malF)}
.btn:disabled{opacity:.5}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tarj{background:var(--soft);border-radius:12px;padding:10px 12px;display:grid;gap:2px;min-width:0}
.tarj span{font-size:11.5px;color:var(--muted)}.tarj b{font-size:16px;overflow-wrap:anywhere}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 10px;font-size:12.5px;font-weight:700;width:max-content}
.chip.movimiento{background:var(--okS);color:var(--ok)}.chip.detenida{background:var(--neutro);color:var(--ink2)}.chip.sin_senal,.chip.sin_dato{background:var(--malS);color:var(--mal)}
.pt{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block}
.pt.movimiento{background:var(--ok)}.pt.detenida{background:var(--gris)}.pt.sin_senal,.pt.sin_dato{background:var(--mal)}
.pat{font-family:'IBM Plex Mono',monospace;font-weight:600}
.aviso{border-radius:12px;padding:10px 12px;font-size:13.5px}.aviso.info{background:var(--azS);color:var(--infoT)}.aviso.mal{background:var(--malS);color:var(--mal)}.aviso.amb{background:var(--ambS);color:var(--amb)}
/* Ingreso */
.ingreso{display:grid;gap:14px;padding:calc(48px + var(--arriba)) 24px 24px;align-content:start;max-width:420px;margin:0 auto}
.ingreso img{width:180px;justify-self:center}
/* 6-nov: «Síguelo On Hand» (mockup de nombres aprobado): logo oficial sin tocar + pastilla amarilla con el nombre */
.logo-onhand{display:grid;justify-items:end;gap:6px;justify-self:center;width:max-content}
.logo-onhand img{width:180px}
.pastilla-on{display:inline-flex;align-items:center;gap:6px;background:var(--marca,#FFD500);color:#15181D;border-radius:999px;padding:4px 12px 4px 9px;font-weight:700;font-size:15px;white-space:nowrap}
.pastilla-on svg{width:14px;height:17px}
.ingreso p,.ingreso h1{text-align:center;margin:0} /* 9-nov (auditoría #20): el título iba a la izquierda y el resto centrado */
/* Mapa */
.mapa{position:absolute;inset:0}
.buscar{position:absolute;left:12px;right:12px;top:10px;z-index:500;display:grid;gap:8px}
.buscar input{width:100%;border:0;border-radius:12px;padding:11px 14px;font:inherit;background:var(--card);color:var(--ink);box-shadow:0 2px 10px rgba(21,24,29,.15)}
/* 9-nov (auditoría 8-nov, On Hand #9): los filtros en una sola fila que se desliza de lado; en dos filas tapaban
   marcadores (p. ej. HSVG-39 quedaba debajo de «Sin señal»). */
.chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:2px 12px 6px}
.chips::-webkit-scrollbar{display:none}
.chips button{border:0;border-radius:99px;padding:7px 12px;font-size:12.5px;font-weight:600;background:var(--card);box-shadow:0 1px 5px rgba(21,24,29,.12);flex:none;white-space:nowrap;min-height:32px}
.chips button[aria-pressed=true]{background:var(--inv);color:var(--invT)}
.marcador{width:28px;height:28px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);display:grid;place-items:center;color:#fff;font-size:12px}
.marcador.movimiento{background:var(--okF)}.marcador.detenida{background:var(--grisF)}.marcador.sin_senal,.marcador.sin_dato{background:var(--malF)}
.marcador i{display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid #fff;transform:rotate(var(--rumbo,0deg))}
.marcador.detenida i,.marcador.sin_senal i,.marcador.sin_dato i{border:0;width:8px;height:8px;border-radius:50%;background:#fff}
.etq{background:#15181D;color:#fff;font:600 10.5px 'IBM Plex Mono',monospace;border-radius:5px;padding:1px 5px;white-space:nowrap;border:0;box-shadow:none}
.etq::before{display:none}
/* Listas */
.fila{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.fila .t{display:grid;min-width:0;flex:1}.fila .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .d{text-align:right;font-size:12px;color:var(--muted);white-space:nowrap}
.vacio{padding:28px 18px;text-align:center;color:var(--muted)}
/* Ficha */
.ficha-mapa{height:190px;position:relative}
.sensores{display:grid;gap:0;background:var(--soft);border-radius:12px;overflow:hidden}
.sensores div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}
.sensores div:last-child{border-bottom:0}.sensores b.sin{color:var(--muted);font-weight:500}
.comandos{display:grid;gap:8px}
/* Recorrido */
.seg{display:flex;background:var(--soft);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:7px 0;font-weight:600;font-size:13px;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(21,24,29,.12)}
.rango{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.rango label{display:grid;gap:3px;font-size:12px;color:var(--ink2);flex:1;min-width:120px}
.rango input{border:1px solid var(--line);border-radius:10px;padding:9px;font:inherit}
.rec-mapa{height:300px;position:relative}
.parada{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
/* Avisos */
.av{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.av .t{display:grid;flex:1;min-width:0}.av .h{font-size:11.5px;color:var(--muted);white-space:nowrap}
.av.nuevo{background:var(--nuevo)}
.copiar{display:flex;gap:8px;align-items:center;background:var(--soft);border-radius:10px;padding:8px 10px;font:12px 'IBM Plex Mono',monospace;overflow-wrap:anywhere}
ol.pasos{margin:0;padding-left:20px;display:grid;gap:6px}
/* Capa (modal: solo se cierra con sus botones) */
.capa{position:fixed;inset:0;background:rgba(14,16,19,.5);z-index:2000;display:flex;align-items:flex-end;justify-content:center}
.modal{background:var(--card);border-radius:20px 20px 0 0;padding:18px 16px calc(18px + var(--abajo));display:grid;gap:12px;width:100%;max-width:640px;max-height:90%;overflow:auto}
.modal h2.peligro{color:var(--mal)}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--abajo));transform:translateX(-50%);background:var(--inv);color:var(--invT);border-radius:12px;padding:10px 14px;z-index:3000;max-width:92%;font-size:14px}
.toast.mal{background:var(--malF);color:#fff}
.cargando{padding:30px;text-align:center;color:var(--muted)}
/* Página de ubicación compartida y página de ingreso simulada */
.compartida{height:100%;display:flex;flex-direction:column}
.compartida header{padding:12px 14px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line)}
.compartida #mapa{flex:1}
.sim{max-width:420px;margin:60px auto;padding:0 20px;display:grid;gap:12px}
.leaflet-container{font:inherit}
.buscar-lista{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font:inherit}
/* ── 6-nov: capas del mapa, ficha completa, reproductor, alertas y geocercas ── */
.mapa-botones{position:absolute;right:12px;bottom:14px;z-index:600;display:grid;gap:8px}
.vista.lleno .mapa-botones{bottom:96px}
.mb{width:44px;height:44px;border:0;border-radius:12px;background:var(--card);box-shadow:0 2px 8px rgba(21,24,29,.2);font-size:19px;cursor:pointer}
.mb[aria-pressed=true]{background:var(--inv);color:var(--invT)}
.chips-estado{display:flex;gap:6px;flex-wrap:wrap}
.chip .p{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px;background:var(--azF);color:#fff;font-size:11px}
.chip.motor-on{background:var(--okS);color:var(--ok)}.chip.motor-off{background:var(--neutro);color:var(--ink2)}
.chip.neutro{background:var(--soft);color:var(--ink2);font-weight:600}.chip.ok{background:var(--okS);color:var(--ok)}
.plegables{display:grid;gap:8px}
details.plegable{border:1px solid var(--line);border-radius:12px;overflow:hidden}
details.plegable summary{cursor:pointer;padding:11px 12px;font-weight:700;list-style:none;display:flex;justify-content:space-between;color:var(--az)}
details.plegable summary::-webkit-details-marker{display:none}
details.plegable summary::after{content:"⌄";color:var(--muted)}
details.plegable[open] summary::after{content:"⌃"}
details.plegable .sensores{border-radius:0;border-top:1px solid var(--line)}
.sensores b.mono{font-family:'IBM Plex Mono',monospace;font-size:13px;overflow-wrap:anywhere;text-align:right}
/* Reproductor */
.reproductor{padding:12px 14px 4px;display:grid;gap:8px;border-bottom:1px solid var(--line);background:var(--card)}
.rep-info{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.rep-info div{background:var(--soft);border-radius:10px;padding:6px 10px;display:grid;min-width:0}
.rep-info span{font-size:11px;color:var(--muted)}.rep-info b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-dir{font-size:13px;color:var(--ink2);min-height:1.4em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reproductor input[type=range]{width:100%;accent-color:var(--az);margin:0}
.rep-eje{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.rep-ctrl{display:flex;align-items:center;gap:8px}
.rep-ctrl .play{width:52px;height:52px;border:0;border-radius:50%;background:var(--azF);color:#fff;font-size:20px;cursor:pointer;flex:none}
.rep-ctrl .seg.vel{flex:1;min-width:0}
.leyenda{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--ink2);padding-bottom:6px}
.leyenda span{display:inline-flex;align-items:center;gap:5px}
.leyenda i{width:18px;height:5px;border-radius:3px;display:inline-block}
.ley-v30{background:#1E7B3A}.ley-v60{background:#2F5BD3}.ley-v90{background:#D97706}.ley-vmas{background:#B42318}.ley-sin{background:#9AA3AF}
.num-parada,.num-viaje{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--azF);color:#fff;font:700 12px 'IBM Plex Sans',sans-serif;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);flex:none}
.num-viaje{background:#15181D}
.borde-rec{display:block;width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.borde-rec.ini{background:var(--okF)}.borde-rec.fin{background:var(--malF)}
.rep-marca{box-shadow:0 0 0 4px rgba(47,91,211,.25),0 1px 4px rgba(0,0,0,.35)}
button.parada{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;color:inherit;cursor:pointer;align-items:center}
/* Alertas y geocercas */
.alerta-fila{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.alerta-fila .t{display:grid;gap:3px;flex:1;min-width:0}
.alerta-fila .t b{overflow-wrap:anywhere}
.enlace{border:0;background:none;color:var(--az);font-weight:600;padding:0;text-align:left;cursor:pointer;width:max-content}
.enlace-fila{border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0}
/* 9-nov (auditoría 8-nov, On Hand #2): el interruptor-botón de «Configurar alertas» se llamaba también «.interruptor»,
   igual que el de casilla de más abajo (42×24), que le pisaba el tamaño: la perilla de 22 px se salía del carril.
   Ahora cada uno tiene su clase. */
.interruptor-btn{width:46px;height:28px;border-radius:99px;border:0;padding:0;background:var(--carril);position:relative;flex:none;cursor:pointer}
.interruptor-btn i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.interruptor-btn[aria-checked=true]{background:var(--okF)}.interruptor-btn[aria-checked=true] i{transform:translateX(18px)}
.interruptor-btn:disabled{opacity:.6}
.campo{display:grid;gap:6px}
.campo>span{font-size:12.5px;color:var(--ink2);font-weight:600}
.campo input,.campo select{border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;background:var(--card);width:100%}
.seg.envolver{flex-wrap:wrap}.seg.envolver button{flex:1 1 40%;padding:8px 6px}
.checks{display:grid;gap:2px;max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.check{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px}
.check input{width:18px;height:18px;accent-color:var(--az)}
.dias{display:flex;gap:6px}
.dias button{flex:1;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 0;font-weight:700;color:var(--muted);min-height:44px}
.dias button[aria-pressed=true]{background:var(--inv);color:var(--invT);border-color:var(--inv)}
.geo-mapa{height:300px;position:relative}
.colores{display:flex;gap:10px;flex-wrap:wrap}
.color-geo{width:22px;height:22px;border-radius:50%;background:var(--c,#2F5BD3);border:2px solid #fff;box-shadow:0 0 0 1px var(--line);flex:none;display:inline-block}
button.color-geo{width:34px;height:34px;cursor:pointer}
button.color-geo[aria-pressed=true]{box-shadow:0 0 0 3px var(--ink)}
.ico.peligro{color:var(--mal);background:var(--malS)}
.menu-mas{border-bottom:8px solid var(--soft)}
.ico-mas{width:38px;height:38px;border-radius:10px;background:var(--soft);display:grid;place-items:center;font-size:18px;flex:none}
/* ── 6-nov: ficha como hoja que se arrastra sobre el mapa, ajustar vista, soporte y compartir con rango ── */
.hoja-ficha{position:absolute;left:0;right:0;bottom:0;z-index:1100;background:var(--card);border-radius:18px 18px 0 0;box-shadow:0 -4px 18px rgba(21,24,29,.16);display:flex;flex-direction:column;min-height:120px;touch-action:none}
.manija{flex:none;display:grid;place-items:center;height:22px;cursor:grab;touch-action:none}
.manija i{display:block;width:42px;height:5px;border-radius:5px;background:var(--line)}
.manija:focus-visible{outline:2px solid var(--az);outline-offset:-4px;border-radius:10px}
.hf-cuerpo{flex:1;min-height:0;overflow:auto;padding:0 14px calc(14px + var(--abajo));display:grid;gap:12px;align-content:start;touch-action:pan-y}
.hf-cabeza{display:grid;gap:6px;touch-action:none;cursor:grab}
.hoja-ficha[data-alto=min] .hf-cuerpo{overflow:hidden}
.btn.suave{background:var(--soft);border-color:var(--soft);font-weight:600}
.btn.soporte{background:var(--sopBg);border-color:var(--sopLn);color:var(--sopT)}
.boton-fila{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}
/* 8-nov: opción con interruptor en «Más» (Mantener la pantalla encendida) */
.fila-opcion{cursor:pointer}
.fila-opcion.no-disponible{cursor:default}.fila-opcion.no-disponible .t b{color:var(--muted)}
.ajuste-lista{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ajuste-fila{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line)}
.ajuste-fila:last-child{border-bottom:0}
.ajuste-fila .t{flex:1;min-width:0;font-weight:600}
.ajuste-fila .ico{width:34px;height:34px;font-size:15px}
.ajuste-fila .ico:disabled{opacity:.35}
.interruptor{position:relative;width:42px;height:24px;flex:none}
.interruptor input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.interruptor span{position:absolute;inset:0;border-radius:99px;background:var(--carril);transition:background .15s;pointer-events:none}
.interruptor span::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.interruptor input:checked+span{background:var(--okF)}
.interruptor input:checked+span::before{transform:translateX(18px)}
.interruptor input:focus-visible+span{outline:2px solid var(--az);outline-offset:2px}
.rango-compartir{display:grid;gap:8px}
.rango-compartir input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;background:var(--card);min-width:0}
.seg button{white-space:nowrap}
/* 6-nov: mapa con la hoja que se arrastra (la misma de la ficha) y el tope de 50 unidades en cuentas grandes. */
.mapa .leaflet-bottom{bottom:var(--hoja,0px)}
.hm-resumen{display:grid;gap:6px;padding-bottom:4px}
.hm-elegida{display:flex;align-items:center;gap:10px}
.hm-elegida .t{display:grid;min-width:0;flex:1}.hm-elegida .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-elegida .d{font-size:13px;color:var(--muted);white-space:nowrap}
.hm-filas{display:grid;margin:0 -14px}
.aviso-tope{display:block;background:var(--azS);color:var(--infoT);border-radius:10px;padding:8px 11px;font-size:13px;text-decoration:none}
button.fila{width:100%;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;text-align:left;cursor:pointer}
.fila.elegida{background:var(--azS)}
.paginas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:12px 14px}
.paginas .btn{padding:8px 14px;min-width:44px}.paginas .btn[disabled]{opacity:.4;cursor:default}
.paginas span{font-size:13.5px;color:var(--muted)}
.filas-pag{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.filas-pag select{border:1px solid var(--line);border-radius:8px;padding:5px 6px;font:inherit;background:var(--card);color:var(--ink)}
.chips.claros button{box-shadow:none;border:1px solid var(--line)}
.elegir-barra{display:flex;align-items:center;justify-content:space-between;gap:10px}
.elegir-barra b{font-size:15px}.elegir-barra b.lleno{color:var(--amb)}
.elegir-barra .btn{padding:8px 12px}
.elegir-fila{cursor:pointer}.elegir-fila input{width:20px;height:20px;flex:none;accent-color:var(--az)}
.elegir-pie{position:sticky;bottom:0;background:var(--bg);grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
/* 6-nov: «Mi ubicación» y «Cómo llegar» */
.mb[aria-pressed="true"]{color:var(--az);box-shadow:0 0 0 2px var(--az),0 2px 8px rgba(21,24,29,.2)}
.mb:disabled{opacity:.6}
.lista-nav{display:grid;gap:10px;margin:12px 0}
.lista-nav .btn{text-align:center}
.hm-acciones{margin-top:8px}
.hm-acciones .btn{text-align:center}
#llegar{width:100%;margin-top:8px}
/* 8-nov: «Cómo llegar» y «💬 Soporte» en una fila de la ficha: misma altura y el texto al centro. */
.acciones-ficha .btn,.acciones-ficha #llegar{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:0}
/* 6-nov: Recorrido con hoja deslizable. La cabecera (siempre visible, también en la altura mínima) es una línea
   compacta: play + línea de tiempo + hora · velocidad. El resto del reproductor queda en el cuerpo de la hoja. */
.hf-cabeza.rep-compacto{display:flex;align-items:center;gap:12px;padding-top:2px}
.rep-compacto .play{width:46px;height:46px;border:0;border-radius:50%;background:var(--azF);color:#fff;font-size:18px;cursor:pointer;flex:none}
.rep-compacto .play:disabled{opacity:.45;cursor:default}
.rep-linea{flex:1;min-width:0;display:grid;gap:4px}
.rep-linea input[type=range]{width:100%;accent-color:var(--az);margin:0}
.rep-mini{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hoja-rec .reproductor{padding:0;border:0}
/* En la altura mínima del Recorrido se ven solo los controles: el alto lo da la cabecera, no los 120 px de la ficha. */
.hoja-ficha.hoja-rec{min-height:0}

/* 6-nov · Transición del logo al abrir la app (public/intro.js). Arranca sobre el mismo fondo tinta de la splash nativa;
   mientras la capa existe, la página entera es tinta (sin destello blanco). Las posiciones las pone intro.js. */
html:has(#intro){background:#15181D}
.intro{position:fixed;inset:0;z-index:4000;background:#15181D;pointer-events:none;overflow:hidden}
.sin-intro .intro{display:none}
.intro-marca{position:absolute;left:50%;top:50%;width:280px;will-change:transform}
.intro-marca img{display:block;width:100%;height:auto;clip-path:inset(0 83.2% 0 0)}
.intro-pastilla{position:absolute;opacity:0;font-size:16px}
.intro-pastilla b{font-weight:700}
/* 7-nov · Informes: tabla del resultado con deslizamiento lateral propio (la página no se desborda) */
.inf-ultimo{display:block;text-decoration:none}
.inf-nota{padding:0 14px 14px}.inf-periodo{padding:12px 14px 0;margin:0}
.inf-objetos{max-height:240px;overflow:auto}
.inf-tabla{overflow-x:auto;margin:10px 14px 0;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.inf-tabla table{border-collapse:collapse;font-size:12.5px;min-width:100%}
.inf-tabla th,.inf-tabla td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:top}
.inf-tabla td.largo{white-space:normal;min-width:180px;max-width:260px} /* solo el texto largo (direcciones) se parte, y por palabras */
.inf-tabla th{background:var(--soft);font-weight:600;color:var(--ink2);position:sticky;top:0}
.inf-tabla td.sin{color:var(--muted)}
.inf-tabla tr.grupo td{font-weight:600}
.inf-tabla tr.subfila td{background:var(--fila2);color:var(--ink2)}
.inf-tabla tfoot td{font-weight:700;background:var(--soft);border-bottom:0}
.inf-abrir{border:0;background:var(--soft);border-radius:8px;width:28px;height:28px;font-size:14px;cursor:pointer}

/* ── 9-nov · Arreglos de la auditoría del 8-nov (On Hand) ── */
/* #5 · Respuesta al toque: no había ni una regla :active y el resaltado de toque está anulado, así que un toque no daba
   ninguna señal hasta que llegaba la respuesta de red. Ahora el control se hunde un poco (120 ms, curva rápida al
   final). touch-action:manipulation quita la espera del doble toque; user-select evita seleccionar texto al mantener. */
.btn,.mb,.ico,.chips button,.seg button,.dias button,.nav a,.play,.interruptor-btn,.inf-abrir,button.fila,.boton-fila,.enlace{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.btn,.mb,.ico,.chips button,.seg button,.dias button,.nav a span,.play,.interruptor-btn,.inf-abrir{transition:transform 120ms cubic-bezier(.23,1,.32,1)}
.btn:not(:disabled):active,.mb:not(:disabled):active,.ico:not(:disabled):active,.chips button:active,.seg button:active,.dias button:active,.nav a:active span,.play:not(:disabled):active,.interruptor-btn:not(:disabled):active,.inf-abrir:active{transform:scale(.96)}
button.fila:active,.boton-fila:active,a.fila:active{background:var(--soft)}
/* #6 · Campos a 16 px en pantallas táctiles: con menos, Safari del iPhone hace zoom al enfocar y no vuelve. */
@media (pointer:coarse){input,select,textarea,.buscar input,.buscar-lista,.campo input,.campo select,.rango input,.rango-compartir input,.filas-pag select{font-size:16px}}
/* #9 · La atribución del mapa va abajo a la izquierda (la pone crearMapa): a la derecha tapaba el botón de geocercas. */
.leaflet-control-attribution{font-size:10.5px}
/* #14 · Recorrido: la parte de abajo (Hoy/Ayer/Fechas, tarjetas, viajes) tenía doble margen (.sec dentro de .hf-cuerpo). */
.hoja-rec .hf-cuerpo .sec{padding-left:0;padding-right:0}
/* #17 · El arrastre al tope de una lista o de la hoja no se encadena a la página. */
.hf-cuerpo,.modal,.checks,.inf-objetos,.inf-tabla{overscroll-behavior:contain}
/* #18 · Zonas táctiles de 44 px sin agrandar lo dibujado (pseudo-elemento invisible). */
.ajuste-fila .ico,.inf-abrir{position:relative}
.ajuste-fila .ico::after{content:"";position:absolute;inset:-5px}
.inf-abrir::after{content:"";position:absolute;inset:-8px}
/* #16 · El modal sube desde abajo y el aviso aparece suave (solo al entrar: salir es inmediato, para no frenar). Con
   «reducir movimiento», solo cambia la opacidad. */
.capa{transition:opacity 200ms ease}
.modal{transition:transform 280ms cubic-bezier(.32,.72,0,1)}
.toast{transition:opacity 200ms ease,translate 200ms cubic-bezier(.23,1,.32,1)}
@starting-style{.capa{opacity:0}.modal{transform:translateY(100%)}.toast{opacity:0;translate:0 8px}}
/* #7 · La curva de la hoja (rápida al partir, suave al llegar) ahora va sobre transform: ver «Hoja con transform». */
@media (prefers-reduced-motion:reduce){
  .btn,.mb,.ico,.chips button,.seg button,.dias button,.nav a span,.play,.interruptor-btn,.inf-abrir{transition:none}
  .btn:active,.mb:active,.ico:active,.chips button:active,.seg button:active,.dias button:active,.nav a:active span,.play:active,.interruptor-btn:active,.inf-abrir:active{transform:none}
  .modal{transition:none}
  @starting-style{.modal{transform:none}.toast{translate:none}}
}

/* ── 9-nov · Modo oscuro (auditoría 8-nov, On Hand #4; aprobado por Pablo) ──
   Tema en «Más»: Claro · Automático · Oscuro. Automático sigue al teléfono (prefers-color-scheme); Claro y Oscuro lo
   fuerzan con <html data-tema> (lo pone public/tema.js antes de dibujar, así no hay destello). Los tokens oscuros van
   dos veces (automático y forzado) porque CSS no deja juntar una consulta de medios con un selector. */
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]){
  --ink:#E8EAED;--ink2:#C2C7CF;--muted:#9AA3AF;--line:#2C323B;--bg:#0E1013;--card:#171A1F;--soft:#22262D;
  --ok:#5CC98A;--okS:#173324;--mal:#FF8A80;--malS:#3B1C1A;--amb:#F6B26B;--ambS:#3A2815;--gris:#7D8693;--az:#8FA8F5;--azS:#1D2742;
  --inv:#E8EAED;--invT:#15181D;--azF:#3D68DE;--sopBg:#16301F;--sopLn:#24503A;--sopT:#8FE0B0;--infoT:#B9C9FA;--nuevo:#2A2614;
  --neutro:#2A2F37;--carril:#4A515C;--malLn:#6B2B26;--fila2:#1B1F25;--sombra:rgba(0,0,0,.45);color-scheme:dark}}
:root[data-tema=oscuro]{
  --ink:#E8EAED;--ink2:#C2C7CF;--muted:#9AA3AF;--line:#2C323B;--bg:#0E1013;--card:#171A1F;--soft:#22262D;
  --ok:#5CC98A;--okS:#173324;--mal:#FF8A80;--malS:#3B1C1A;--amb:#F6B26B;--ambS:#3A2815;--gris:#7D8693;--az:#8FA8F5;--azS:#1D2742;
  --inv:#E8EAED;--invT:#15181D;--azF:#3D68DE;--sopBg:#16301F;--sopLn:#24503A;--sopT:#8FE0B0;--infoT:#B9C9FA;--nuevo:#2A2614;
  --neutro:#2A2F37;--carril:#4A515C;--malLn:#6B2B26;--fila2:#1B1F25;--sombra:rgba(0,0,0,.45);color-scheme:dark}
input,select,textarea{color:var(--ink)}
/* Logo: el oficial no se recolorea. En oscuro va la versión oficial de texto blanco de la familia (pin + texto, como
   la app de terreno de Síguelo Gestión). */
.logo-osc{display:none;align-items:flex-start;width:180px}
.logo-osc .lp{width:16.37%;height:auto;margin-right:1.2%}
.logo-osc .lt{width:82.43%;height:auto}
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]) .logo-cla{display:none}:root:not([data-tema=claro]) .logo-osc{display:flex}}
:root[data-tema=oscuro] .logo-cla{display:none}:root[data-tema=oscuro] .logo-osc{display:flex}
/* Mapa en oscuro: las teselas (OSM) no tienen versión oscura. Se bajan un poco de brillo con un filtro suave, sin
   invertirlas: invertir cambia el significado de los colores (parques, autopistas, agua) y la gente lee el mapa por
   ellos. Así el mapa no encandila de noche y se sigue leyendo igual. Solo la capa de calles: la satelital es una foto
   y queda tal cual. Los marcadores, trazados y etiquetas están en otras capas y no se tocan. */
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]) .capa-calles .leaflet-tile-pane{filter:brightness(.8) contrast(1.06) saturate(.85)}}
:root[data-tema=oscuro] .capa-calles .leaflet-tile-pane{filter:brightness(.8) contrast(1.06) saturate(.85)}
.leaflet-container{background:var(--soft)}
.leaflet-container .leaflet-control-attribution{background:color-mix(in srgb,var(--card) 82%,transparent);color:var(--muted)}
.leaflet-container .leaflet-control-attribution a{color:var(--az)}
.leaflet-tooltip:not(.etq){background:var(--card);color:var(--ink);border-color:var(--line)}
.leaflet-tooltip-top:not(.etq)::before{border-top-color:var(--card)}

/* ── 9-nov · Barra inferior con íconos SVG de línea (auditoría #13): reemplazan los emoji, que cada Android dibujaba
   distinto. Mismo trazo que la mano de la pastilla «On Hand» (1,8 sobre 24, puntas redondeadas). El activo va relleno
   en la pastilla amarilla (forma + color, no solo color). ── */
.nav a span{display:grid;place-items:center;height:30px;width:52px;padding:0;font-size:0}
.nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a.on svg .relleno{fill:currentColor}
.nav a.on svg{stroke-width:2}

/* ── 9-nov · Tema en «Más» ── */
.seg.tema{margin:0}
.fila-tema{display:grid;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.fila-tema .cab{display:flex;align-items:center;gap:10px}
.ico-mas svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── 9-nov · Eliminar mi cuenta ── */
.zona-riesgo{display:grid;gap:8px;border:1px solid var(--malLn);border-radius:12px;padding:12px}
.zona-riesgo h2{color:var(--mal);font-size:15px}
.campo input.confirmar-texto{font-family:'IBM Plex Mono',monospace;letter-spacing:.06em}

/* ── 9-nov · Hoja con transform (auditoría #7, segunda parte) ──
   Antes se animaba «height»: el navegador rehacía el diseño de la hoja (y su lista) en cada cuadro. Ahora la hoja tiene
   un alto fijo (casi toda la vista) y se mueve con translateY, que lo hace la tarjeta gráfica. Lo que queda bajo el
   borde de la pantalla se compensa con un relleno al final del cuerpo (--oculto), que se pone solo al detenerse, para
   que el final de la lista se pueda alcanzar con el dedo. */
.hoja-ficha{will-change:transform}
.hoja-ficha .hf-cuerpo{padding-bottom:calc(14px + var(--abajo) + var(--oculto,0px))}
.hoja-ficha.animar{transition:transform var(--hoja-ms,300ms) cubic-bezier(.32,.72,0,1)}
.vista[data-hoja-anim] .mapa-botones{transition:bottom var(--hoja-ms,300ms) cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:reduce){.hoja-ficha.animar{transition:none}.vista[data-hoja-anim] .mapa-botones{transition:none}}

/* ── 9-nov · Respuesta al toque en lo que faltaba (#5): filas, enlaces de «Más», manija, píldoras de color y la
   pestaña de la barra. Solo :active (sirve con dedo y mouse); el :hover queda para punteros finos. ── */
.manija,.color-geo,.check,.elegir-fila,.fila-opcion,details.plegable summary,.inf-ultimo{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.manija:active i{background:var(--muted)}
.manija i{transition:background 120ms ease}
button.color-geo{transition:transform 120ms cubic-bezier(.23,1,.32,1)}
button.color-geo:active{transform:scale(.9)}
details.plegable summary:active,.check:active,.elegir-fila:active,.fila-opcion:active,.av:active{background:var(--soft)}
.nav a{-webkit-touch-callout:none}
@media (hover:hover) and (pointer:fine){.fila:hover,.boton-fila:hover{background:var(--soft)}.btn:hover{filter:brightness(.97)}}
@media (prefers-reduced-motion:reduce){button.color-geo:active{transform:none}}
.ingreso .logo-osc{justify-self:center}
.fila-tema .t{display:grid;flex:1;min-width:0}
p a:not(.btn),li a,.vacio a{color:var(--az)}