/* Tokens de BM Distribuciones (dirección B «Bloques de rubro», elegida por Santiago el 26/10/2026).
   Los usan el catálogo, el panel y las apps del equipo. Cambiar acá cambia todo. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap');
:root {
  /* marca */
  --azul: #2ea7de; --azul2: #2c6fc4; --lima: #b0d82b; --lima2: #9cc21f; --noche: #0f2533; --noche2: #183447;
  --tinta: #10202b; --gris: #5f6c77; --suave: #8b98a3; --linea: #e6ebef; --fondo: #f3f6f8; --blanco: #fff;
  /* rubros */
  --r-perros: #2c6fc4; --r-gatos: #2ea7de; --r-plagas: #e2463b; --r-limpieza: #13a79a; --r-jardin: #8dbe22; --r-accesorios: #f29a1f;
  /* estados (fondo suave + texto) */
  --ok: #23863b; --ok-s: #e7f5ea; --alerta: #b86a00; --alerta-s: #fff2dc; --peligro: #cf3a2e; --peligro-s: #fdeceb;
  --info: #2c6fc4; --info-s: #e8f1fc; --neutro: #5f6c77; --neutro-s: #eef2f5; --violeta: #6b4fbb; --violeta-s: #f0ecfa;
  /* forma */
  --f: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 30px;
  --sombra-1: 0 1px 2px rgba(15, 37, 51, .06), 0 6px 18px -10px rgba(15, 37, 51, .25);
  --sombra-2: 0 16px 36px -18px rgba(15, 37, 51, .45);
  --canto: 0 4px 0 rgba(0, 0, 0, .18);
  --dur: .2s;
}
/* títulos condensados del lenguaje B */
.cond { font-stretch: 72%; font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; line-height: .95 }
.num { font-variant-numeric: tabular-nums }
/* franjas de BM (celeste + lima), como el pie de sus placas */
.franjas { height: 8px; background: linear-gradient(var(--azul), var(--azul)) 0 0 / 100% 4px no-repeat, linear-gradient(var(--lima), var(--lima)) 0 100% / 100% 4px no-repeat }
/* etiqueta de estado reutilizable: <span class="est ok">Entregado</span> */
.est { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font: 700 12px/1 var(--f); white-space: nowrap; background: var(--neutro-s); color: var(--neutro) }
.est::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.est.ok { background: var(--ok-s); color: var(--ok) } .est.alerta { background: var(--alerta-s); color: var(--alerta) }
.est.peligro { background: var(--peligro-s); color: var(--peligro) } .est.info { background: var(--info-s); color: var(--info) }
.est.violeta { background: var(--violeta-s); color: var(--violeta) }
.ico { width: 20px; height: 20px; flex: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 70%, transparent); outline-offset: 2px }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important } }
/* marcadores del mapa (comun/mapa.js) */
.mk { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 15px; font: 800 13px/1 var(--f); color: #fff; background: var(--azul2); border: 2.5px solid #fff; box-shadow: 0 4px 10px -3px rgba(15, 37, 51, .5); transform: translate(-50%, -50%); white-space: nowrap }
.mk.ok { background: var(--ok) } .mk.alerta { background: var(--alerta) } .mk.peligro { background: var(--peligro) } .mk.gris { background: #9aa6b0 } .mk.lima { background: var(--lima); color: var(--noche) } .mk.noche { background: var(--noche) }
.mk.sel { outline: 3px solid var(--lima); outline-offset: 1px }
.mk-dep { width: 34px; height: 34px; border-radius: 10px; background: var(--noche); color: var(--lima); display: grid; place-items: center; border: 2.5px solid #fff; box-shadow: 0 4px 12px -3px rgba(15, 37, 51, .6); transform: translate(-50%, -50%) }
.mk-dep svg { width: 18px; height: 18px }
.mk-camion { width: 38px; height: 38px; border-radius: 50%; background: var(--lima); color: var(--noche); display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--lima) 35%, transparent), 0 6px 14px -4px rgba(15, 37, 51, .6); transform: translate(-50%, -50%) }
.mk-camion svg { width: 20px; height: 20px }
/* contenedor del mapa: cont (relativo) > caja del motor (Google o Leaflet) + tooltip suelto */
.mapa-cont { position: relative; width: 100%; height: 100%; overflow: hidden; background: #eef2f4 }
.mapa-motor { position: absolute; inset: 0 }
.mapa-error { display: grid; place-items: center; height: 100%; padding: 20px; text-align: center; color: var(--gris) }
/* motor Google: contenedor sin tamaño sobre el punto (Google ancla abajo al medio), así el .mk se centra igual que con Leaflet */
.mk-w { position: relative; width: 0; height: 0 }
.mk-w > :not(.mk-tip-g) { position: absolute; left: 0; top: 0 }
.mk-punto { border-radius: 50%; border: 1.5px solid #fff; box-sizing: border-box; box-shadow: 0 1px 3px rgba(15, 37, 51, .35); transform: translate(-50%, -50%) }
.mk-tip-g { position: absolute; left: 0; top: 0; z-index: 20; padding: 7px 10px; border-radius: 10px; background: #fff; color: #222; font: 600 12.5px/1.3 var(--f); box-shadow: var(--sombra-1); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; transform: translate(-50%, calc(-100% - var(--sube, 22px))) }
.mk-tip-g.on { opacity: 1 }
.mk-tip-g b { display: block; font-weight: 800 }
[data-motor] .gm-err-container { display: none !important }
.leaflet-container { font-family: var(--f); background: #eef2f4 }
.mosaico { filter: saturate(.5) brightness(1.04) contrast(.96) }
.leaflet-tooltip.mk-tip { font: 600 12.5px/1.3 var(--f); border-radius: 10px; padding: 7px 10px; box-shadow: var(--sombra-1); border: 0 }
.leaflet-tooltip.mk-tip b { display: block; font-weight: 800 }
.leaflet-control-attribution { font-size: 10px }