/*
 * Mapas MapLibre (Centro de Monitoreo GPS y portal del cliente): marcadores de unidad, destino, grupos, tarjeta,
 * controles y atribución. Lo comparten la app y el portal (ambos cargan tokens.css).
 */
/* Color del estado de Logística (mismos tonos que los chips) */
.vm,.vm-cl{--vm-c:#354FA3;--vm-lbl:#FFFFFF;--vm-lbl-ink:#1A2233;--vm-ring:#FFFFFF;--vm-lbl-line:rgba(26,34,51,.14)}
.vm[data-tone="violet"]{--vm-c:#6F4FC0}
.vm[data-tone="teal"]{--vm-c:#16808F}
.vm[data-tone="amber"]{--vm-c:#C9820A}
.vm[data-tone="light"]{--vm-c:#8A93A5}
.vm[data-tone="gray"]{--vm-c:#5B6478}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vm,:root:not([data-theme="light"]) .vm-cl{--vm-lbl:#1C2230;--vm-lbl-ink:#E8EBF2;--vm-ring:#E8EBF2;--vm-lbl-line:rgba(232,235,242,.16)}}
:root[data-theme="dark"] .vm,:root[data-theme="dark"] .vm-cl{--vm-lbl:#1C2230;--vm-lbl-ink:#E8EBF2;--vm-ring:#E8EBF2;--vm-lbl-line:rgba(232,235,242,.16)}

/* Marcador de unidad: círculo del color del estado con silueta de tractocamión, flecha de rumbo y número económico */
.vm{position:relative;width:40px;height:40px;padding:0;margin:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}
.vm-pin{position:absolute;inset:0;display:block;transition:transform .22s var(--ease,ease),opacity .3s,filter .3s;filter:drop-shadow(0 1.5px 2.5px rgba(15,25,45,.35))}
.vm-svg{display:block;width:40px;height:40px;overflow:visible}
.vm-body{fill:var(--vm-c);stroke:var(--vm-ring);stroke-width:2.4}
.vm-dir{fill:var(--vm-c);stroke:var(--vm-ring);stroke-width:1.6;stroke-linejoin:round;transform-origin:20px 20px;transform:rotate(var(--vm-rot,0deg));opacity:0;transition:opacity .2s,transform .4s var(--ease,ease)}
.vm.has-heading .vm-dir{opacity:1}
.vm-truck{fill:#FFFFFF}
.vm-win{fill:var(--vm-c)}
.vm-wheel{fill:#FFFFFF;stroke:var(--vm-c);stroke-width:1.3}
/* En movimiento sin rumbo conocido: halo suave del color del estado */
.vm[data-motion="moving"]:not(.has-heading) .vm-pin::before,.vm[data-motion="live"] .vm-pin::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--vm-c);opacity:.35;animation:vmHalo 2.2s ease-out infinite;z-index:-1}
/* Sin señal reciente: gris, aro punteado e insignia */
.vm[data-motion="nosignal"] .vm-pin{filter:grayscale(1) drop-shadow(0 1px 2px rgba(15,25,45,.3));opacity:.72}
.vm[data-motion="nosignal"] .vm-body{stroke-dasharray:3.2 2.4}
.vm-badge{display:none;position:absolute;right:-4px;top:-4px;place-items:center;width:18px;height:18px;border-radius:50%;background:#A5431C;color:var(--on-color);box-shadow:0 0 0 2px var(--vm-ring)}
.vm-badge svg{width:11px;height:11px}
.vm[data-motion="nosignal"] .vm-badge{display:grid}
.vm-lbl{position:absolute;left:50%;top:100%;transform:translate(-50%,1px);padding:1px 6px;border-radius:var(--r-xs);background:var(--vm-lbl);color:var(--vm-lbl-ink);border:1px solid var(--vm-lbl-line);
  font:700 var(--fs-caption)/1.35 var(--font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);letter-spacing:.01em;white-space:nowrap;box-shadow:0 1px 3px rgba(15,25,45,.18);pointer-events:none}
.vm.no-lbl .vm-lbl{display:none}
.maplibregl-marker:has(.is-sel),.maplibregl-marker.vm.is-sel{z-index:3}
.vm.is-sel .vm-pin{transform:scale(1.18);filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 2px 6px rgba(15,25,45,.4))}
.vm.is-sel .vm-body{stroke:#F26F22;stroke-width:3}
.vm.vm-upd .vm-pin{animation:vmUpd .8s ease-out}
.vm:focus-visible{outline:none}
.vm:focus-visible .vm-body{stroke:var(--orange,#F26F22);stroke-width:3.2}
@keyframes vmUpd{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes vmHalo{0%{transform:scale(1);opacity:.4}100%{transform:scale(1.9);opacity:0}}
/* Versión estática (mapas Leaflet): centrado en el punto */
.vm-static{position:absolute;left:0;top:0;transform:translate(-50%,-50%);cursor:default}
@media (prefers-reduced-motion:reduce){.vm-pin::before{animation:none!important}}

/* Grupo de unidades cercanas (al alejar con muchas unidades) */
.vm-cl{display:grid;place-items:center;width:46px;height:46px;padding:0;border:3px solid var(--vm-ring);border-radius:50%;background:#233878;color:var(--on-color);cursor:pointer;
  box-shadow:0 0 0 5px rgba(53,79,163,.28),var(--shadow-2,0 2px 8px rgba(15,25,45,.22));font:800 var(--fs-subhead)/1 var(--font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif)}

/* Destino: bandera discreta (aproximado → borde punteado) */
.vm-dest{--vd-bg:#1E2638;--vd-ink:#fff;--vd-ring:#fff;position:relative;display:inline-flex;align-items:center;gap:5px;max-width:200px;padding:4px 10px 4px 5px;border-radius:var(--r-pill);background:var(--vd-bg);color:var(--vd-ink);border:2px solid var(--vd-ring);
  box-shadow:var(--shadow-2,0 2px 8px rgba(15,25,45,.22));font:700 var(--fs-caption)/1.2 var(--font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);pointer-events:none}
.vm-dest::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--vd-ring)}
.vm-dest-ic{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#F26F22;color:var(--on-color)}
.vm-dest-ic svg{width:13px;height:13px}
.vm-dest-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-dest.approx{--vd-bg:#5A6275;border-style:dashed}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vm-dest{--vd-bg:#E8ECF5;--vd-ink:#1E2638;--vd-ring:#1E2638}}
:root[data-theme="dark"] .vm-dest{--vd-bg:#E8ECF5;--vd-ink:#1E2638;--vd-ring:#1E2638}

/* Controles propios */
.mc{display:flex;flex-direction:column;gap:8px}
.mc-g{display:flex;flex-direction:column;border-radius:var(--r-sm);background:var(--surface,#fff);box-shadow:var(--shadow-2,0 2px 8px rgba(15,25,45,.22));overflow:hidden}
.mc-b{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--ink,#1A2233);cursor:pointer}
.mc-b+.mc-b{border-top:1px solid var(--line,#E3E6ED)}
.mc-b .ic{width:21px;height:21px}
.mc-b:active{background:var(--fill,#E9EBF0)}
.mc-b:disabled{color:var(--muted,#5F6879);opacity:.45;cursor:default}
.maplibregl-ctrl-top-right .mc{margin:10px 10px 0 0;align-items:flex-end}
/* Mapa / Satélite: miniatura de la vista a la que se cambia, con su nombre */
.mc-vg{width:60px;padding:3px}
.mc-v{position:relative;display:block;width:54px;height:54px;padding:0;border:0;border-radius:calc(var(--r-sm) - 3px);overflow:hidden;cursor:pointer;color:#fff;
  font:700 var(--fs-caption)/1 var(--font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif)}
.mc-v-th{position:absolute;inset:0;background:
  linear-gradient(118deg,transparent 46%,rgba(255,205,110,.95) 47%,rgba(255,205,110,.95) 51%,transparent 52%),
  radial-gradient(circle at 25% 30%,#5d7a3e 0 18%,transparent 19%),radial-gradient(circle at 78% 72%,#4a6a35 0 22%,transparent 23%),
  radial-gradient(circle at 70% 20%,#8a7a55 0 16%,transparent 17%),linear-gradient(160deg,#6f7f4a,#4f6237 55%,#7c6e4c)}
.mc-v.is-sat .mc-v-th{background:
  linear-gradient(118deg,transparent 45%,#EFAF86 46%,#FCE2CF 47.5%,#FCE2CF 50.5%,#EFAF86 52%,transparent 53%),
  linear-gradient(28deg,transparent 60%,#fff 61%,#fff 64%,transparent 65%),
  radial-gradient(circle at 22% 78%,#C5D2EA 0 20%,transparent 21%),radial-gradient(circle at 80% 25%,#E1E9DF 0 18%,transparent 19%),#F1F3F7}
.mc-v-t{position:absolute;left:0;right:0;bottom:0;padding:14px 2px 4px;background:linear-gradient(transparent,rgba(10,14,20,.78));text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.mc-v:focus-visible{outline:3px solid var(--focus,#F26F22);outline-offset:-3px}

/* Tarjeta al tocar un marcador */
.vm-pop .maplibregl-popup-content{padding:12px 14px 12px;border-radius:var(--r);background:var(--surface,#fff);color:var(--ink,#1A2233);box-shadow:var(--shadow-3,0 10px 30px rgba(15,25,45,.24));font-family:var(--font,inherit)}
.vm-pop .maplibregl-popup-close-button{width:44px;height:44px;font-size:var(--fs-title3);color:var(--muted,#5F6879);border-radius:0 var(--r) 0 var(--r-sm)}
.vm-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,.vm-pop.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,.vm-pop.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:var(--surface,#fff)}
.vm-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip,.vm-pop.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,.vm-pop.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:var(--surface,#fff)}
.vm-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--surface,#fff)}
.vm-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--surface,#fff)}

/* Atribución del proveedor de mapas (siempre accesible) */
.maplibregl-ctrl-attrib{font-size:var(--fs-caption);line-height:1.35}
.maplibregl-ctrl.maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--surface,#fff) 84%,transparent);color:var(--ink-2,#4A5468)}
.maplibregl-ctrl-attrib a{color:var(--ink-2,#4A5468)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .maplibregl-ctrl-attrib-button{filter:invert(1)}}
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button{filter:invert(1)}
@media (prefers-reduced-motion:reduce){.vm-pin,.vm-badge svg{transition:none}.vm.vm-upd .vm-pin,.vm[data-motion="live"] .vm-badge svg{animation:none}}