/* Control de Rutas — Seguridad Vial
 * Paleta Obranext: tinta #161922, azul #0a7afc, violeta #6127f6.
 * Niveles de severidad: gris (suprimido) · ámbar (revisión) · rojo (alerta).
 */

:root {
  --tinta:        #161922;
  --tinta-2:      #1d212d;
  --tinta-3:      #272c3b;
  --azul:         #0a7afc;
  --azul-suave:   #eaf3ff;
  --violeta:      #6127f6;
  --grad:         linear-gradient(120deg, #0a7afc, #6127f6);

  --fondo:        #f3f5f9;
  --sup:          #ffffff;
  --sup-2:        #f8fafc;
  --linea:        #e2e7ef;
  --linea-fuerte: #cbd3e0;

  --texto:        #1a1f2b;
  --texto-2:      #566072;
  /* Darkened from #8b95a6, which was 3.02:1 on white — below AA for the ~35
     places this token is used as secondary text. #6b7383 measures 4.71:1 on
     white and 4.57:1 on the panel tint, and keeps a clear step below
     --texto-2 so the hierarchy still reads. */
  --texto-3:      #6b7383;

  --n0:           #5c6675;
  --n0-bg:        #eef1f6;
  --n0-marca:     #7c8798;
  --n1:           #a1590a;
  --n1-bg:        #fff6e6;
  --n1-marca:     #ea9a12;
  --n2:           #b42318;
  --n2-bg:        #fef1ef;
  --n2-marca:     #dc2626;
  --verde:        #067647;
  --verde-bg:     #e9f8f0;

  --wa-cabecera:  #075e54;
  --wa-verde:     #25d366;
  --wa-check:     #34b7f1;
  --wa-burbuja:   #ffffff;
  --wa-fondo:     #ece5dd;

  --sombra:       0 14px 40px rgba(16, 24, 40, .10);
  --sombra-baja:  0 2px 8px rgba(16, 24, 40, .07);
  --sombra-alta:  0 24px 60px rgba(16, 24, 40, .22);
  --radio:        12px;
  --radio-sm:     8px;
  --lateral-w:    248px;
  --lateral-w-min: 64px;
  --barra-h:      62px;
  --pie-h:        34px;

  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
::selection { background: #cfe4ff; }

/* ============================================================ estructura */
.app {
  display: grid;
  grid-template-columns: var(--lateral-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}
.app.is-colapsado { grid-template-columns: var(--lateral-w-min) minmax(0, 1fr); }

/* el velo y la barra inferior sólo existen en celular: fuera de la grilla */
.velo-tapa { display: none; }

.lateral { grid-column: 1; grid-row: 1; }
.principal {
  grid-column: 2; grid-row: 1;
  display: grid;
  grid-template-rows: var(--barra-h) minmax(0, 1fr) var(--pie-h);
  min-width: 0;
  background: var(--fondo);
}
.lienzo { position: relative; min-height: 0; overflow: hidden; }
.pantalla { position: absolute; inset: 0; overflow: auto; }
.pantalla--mapa { overflow: hidden; }

/* =============================================================== lateral */
.lateral {
  background: var(--tinta);
  color: #d9dee9;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #0e1017;
}
.lateral__marca {
  height: var(--barra-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  flex: none;
}
.lateral__icono { width: 26px; height: 26px; flex: none; }
.lateral__titulo { min-width: 0; flex: 1; line-height: 1.2; }
.lateral__titulo strong {
  display: block; color: #fff; font-size: 13.5px; font-weight: 650;
  letter-spacing: -.01em; white-space: nowrap;
}
.lateral__titulo span {
  display: block; font-size: 11px; color: #7f8b9f; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.lateral__colapsar {
  background: none; border: 0; padding: 6px; border-radius: 6px;
  color: #6f7a8d; display: grid; place-items: center; flex: none;
}
.lateral__colapsar:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.nav { padding: 12px 8px; display: grid; gap: 2px; flex: 1; align-content: start; }
.nav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border: 0; border-radius: var(--radio-sm);
  background: none; color: #aab4c4; font-size: 13.5px; font-weight: 500;
  text-align: left; width: 100%; position: relative;
  transition: background .12s, color .12s;
}
.nav__item svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav__item span.rot { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.nav__item:hover { background: var(--tinta-3); color: #e8ecf3; }
.nav__item.is-on { background: var(--tinta-3); color: #fff; }
.nav__item.is-on::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--grad);
}
.nav__item.is-on svg { opacity: 1; }
.nav__contador {
  min-width: 20px; height: 19px; padding: 0 5px; border-radius: 10px;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  background: var(--n2-marca); color: #fff; font-variant-numeric: tabular-nums;
}
.nav__contador--amb { background: var(--n1-marca); color: #3d2603; }
.nav__contador:empty { display: none; }

.lateral__pie {
  padding: 12px 14px 14px; border-top: 1px solid rgba(255, 255, 255, .07);
  /* Lightened from #76808f, which was 4.39:1 against the dark rail — just under
     AA. This sits on a dark background, so it needed lightening; the --texto-3
     token used elsewhere needed the opposite. #808b9c measures 5.26:1 here. */
  font-size: 11.5px; color: #808b9c; flex: none;
}
.lateral__flota { display: grid; gap: 5px; }
.lateral__flota div { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.lateral__flota b { color: #cfd6e2; font-weight: 600; font-variant-numeric: tabular-nums; }
.lateral__obranext {
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07); opacity: .5; transition: opacity .15s;
}
.lateral__obranext:hover { opacity: 1; }
/* 110 px es el mínimo digital que pide la guía de marca para el logotipo */
.lateral__obranext img { display: block; width: 110px; height: auto; }

.app.is-colapsado .lateral__titulo,
.app.is-colapsado .lateral__pie,
.app.is-colapsado .nav__item span.rot { display: none; }
.app.is-colapsado .nav__item { justify-content: center; padding: 10px 0; }
.app.is-colapsado .lateral__marca { justify-content: center; padding: 0; gap: 0; }
.app.is-colapsado .lateral__colapsar { position: absolute; left: 44px; top: 18px; z-index: 3; }
.app.is-colapsado .nav__contador {
  position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; font-size: 10px;
}

/* ============================================================= barra top */
.barra {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; background: var(--sup);
  border-bottom: 1px solid var(--linea);
  flex: none; min-width: 0;
}
.barra__menu {
  display: none; background: none; border: 1px solid var(--linea);
  border-radius: var(--radio-sm); width: 34px; height: 34px; place-items: center;
  color: var(--texto-2);
}
.barra__id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.barra__id h1 {
  font-size: 15px; font-weight: 650; letter-spacing: -.015em; white-space: nowrap;
}
.barra__sub { color: var(--texto-3); font-weight: 500; }
.barra__sub::before { content: "· "; }
.insignia-demo {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; padding: 3px 6px 2px;
  border-radius: 5px; color: #fff; background: var(--grad); flex: none;
  line-height: 1; text-transform: uppercase;
}
.barra__esp { flex: 1; }

.barra__reloj {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 12px;
  background: var(--sup-2); border: 1px solid var(--linea); border-radius: 999px;
  flex: none;
}
.barra__reloj time {
  font-size: 17px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.reloj__fecha { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }
.reloj__punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde);
  align-self: center; flex: none;
  box-shadow: 0 0 0 3px rgba(6, 118, 71, .16);
}
.barra__reloj.is-pausa .reloj__punto { background: var(--texto-3); box-shadow: none; }
.barra__reloj.is-pausa time { color: var(--texto-2); }

.barra__ctrl { display: flex; align-items: center; gap: 8px; flex: none; }
.btn-icono {
  width: 34px; height: 34px; border-radius: var(--radio-sm);
  border: 1px solid var(--linea); background: var(--sup);
  display: grid; place-items: center; color: var(--texto);
}
.btn-icono:hover { background: var(--sup-2); border-color: var(--linea-fuerte); }
.btn-icono svg { width: 15px; height: 15px; }
.segmentos {
  display: flex; background: var(--sup-2); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); overflow: hidden;
}
.segmentos button {
  border: 0; background: none; padding: 7px 10px; font-size: 12px; font-weight: 600;
  color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.segmentos button + button { border-left: 1px solid var(--linea); }
.segmentos button.is-on { background: var(--tinta); color: #fff; }
.btn-fantasma {
  border: 1px solid var(--linea); background: var(--sup); border-radius: var(--radio-sm);
  padding: 7px 12px; font-size: 12.5px; font-weight: 550; color: var(--texto-2);
}
.btn-fantasma:hover { background: var(--sup-2); border-color: var(--linea-fuerte); color: var(--texto); }

/* =================================================================== pie */
.pie {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--sup); border-top: 1px solid var(--linea);
  font-size: 11.5px; color: var(--texto-3); flex: none; padding: 0 12px;
  text-align: center;
}
.pie a { color: var(--texto-2); text-decoration: none; border-bottom: 1px solid var(--linea-fuerte); }
.pie a:hover { color: var(--azul); border-color: var(--azul); }

/* =========================================================== mapa en vivo */
.mapa-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  height: 100%; min-height: 0;
}
.mapa-zona { display: flex; flex-direction: column; min-width: 0; background: #e8ecf1; }
.mapa-envoltura { position: relative; flex: 1; min-height: 0; }
#mapa { position: absolute; inset: 0; }

/* ---------------------------------------- barra de estado de la flota ---- */
.barra-estado {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 12px; background: var(--sup);
  border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: thin;
}
.chip-estado {
  display: inline-flex; align-items: baseline; gap: 6px; flex: none;
  border: 1px solid var(--linea); background: var(--sup-2); border-radius: 999px;
  padding: 5px 12px 5px 10px; font-size: 12.5px; color: var(--texto-2);
  transition: border-color .12s, background .12s, color .12s;
}
.chip-estado b {
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--texto); letter-spacing: -.01em;
}
.chip-estado::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; align-self: center;
  background: var(--linea-fuerte); flex: none;
}
.chip-estado.e-todas::before { display: none; }
.chip-estado.e-en_ruta::before  { background: var(--verde); }
.chip-estado.e-en_base::before  { background: var(--n0-marca); }
.chip-estado.e-revision::before { background: var(--n1-marca); }
.chip-estado.e-alerta::before   { background: var(--n2-marca); }
.chip-estado.e-en_ruta b  { color: var(--verde); }
.chip-estado.e-en_base b  { color: var(--n0); }
.chip-estado.e-revision b { color: var(--n1); }
.chip-estado.e-alerta b   { color: var(--n2); }
.chip-estado:hover { border-color: var(--linea-fuerte); background: var(--sup); }
.chip-estado.is-on { background: var(--tinta); border-color: var(--tinta); color: #c3ccdb; }
.chip-estado.is-on b { color: #fff; }
.chip-estado.is-vacio { opacity: .5; }
.chip-estado__corto { display: none; }

.btn-ver-alertas {
  display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto;
  border: 1px solid var(--n2-marca); background: var(--n2-bg); color: var(--n2);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 650;
  white-space: nowrap;
}
.btn-ver-alertas svg { width: 14px; height: 14px; }
.btn-ver-alertas:hover { background: var(--n2-marca); color: #fff; }

.mapa-herr {
  position: absolute; top: 12px; left: 12px; z-index: 500;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  max-width: calc(100% - 24px);
}
.mapa-panel {
  background: rgba(255, 255, 255, .96); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra-baja);
  backdrop-filter: blur(6px); padding: 9px 11px;
}
.mapa-panel__tit {
  font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 7px;
}
.leyenda { display: grid; gap: 5px; font-size: 11.5px; color: var(--texto-2); }
.leyenda div { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.leyenda i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.leyenda i.p-ruta { width: 10px; height: 10px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(6, 118, 71, .35); }
.leyenda i.p-base { width: 10px; height: 10px; border-radius: 50%; background: var(--n0-marca);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(124, 135, 152, .35); }
.leyenda i.p-rev { width: 13px; height: 13px; border-radius: 4px; background: var(--n1-marca); }
.leyenda i.p-ale { width: 13px; height: 13px; border-radius: 4px; background: var(--n2-marca); }
.leyenda i.l-ruta { width: 16px; height: 3px; border-radius: 2px; background: #4f8ff5; }
.leyenda i.l-cor { width: 16px; height: 9px; border-radius: 2px; background: rgba(10, 122, 252, .17); }

.interruptor { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor__pista {
  width: 34px; height: 19px; border-radius: 999px; background: var(--linea-fuerte);
  position: relative; transition: background .15s; flex: none;
}
.interruptor__pista::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.interruptor input:checked + .interruptor__pista { background: var(--azul); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(15px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ------------------------------------------- marcadores de vehículo ----
 * Cada marcador trae las dos formas ya construidas y la clase de estado decide
 * cuál se ve: cambiar de estado no reconstruye nada.
 *   e-en_ruta / e-en_base  →  punto chico, sin etiqueta (la mayoría de la flota)
 *   e-revision / e-alerta  →  chapa grande con glifo, aguja de rumbo y etiqueta
 */
/* `absolute`, no `relative`: es lo que Leaflet necesita para colocar el marcador
   con su transform. Con `relative` los marcadores caían en flujo dentro del
   panel y quedaban 17 px más abajo por cada unidad creada antes que ellos — la
   última chapa terminaba a media pantalla de su propio rastro, y ningún clic
   sobre una unidad daba en el blanco. Se declara acá, y no se confía en la regla
   de leaflet.css, porque este archivo carga después y ganaría igual. */
.veh { position: absolute; left: 0; top: 0; width: 34px; height: 34px; }
.veh__aro { position: absolute; inset: 0; transition: transform .5s linear; }
.veh__flecha {
  position: absolute; top: -2px; left: 50%; margin-left: -4.5px;
  width: 9px; height: 9px; border-radius: 1px;
  background: var(--tinta); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.veh__cuerpo {
  position: absolute; left: 5px; top: 5px; width: 24px; height: 24px;
  background: var(--tinta); color: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .35), 0 0 0 2px #fff;
}
.veh__cuerpo svg { width: 15px; height: 15px; }
.veh--bus .veh__cuerpo { border-radius: 5px; width: 28px; left: 3px; }
.veh--camioneta .veh__cuerpo { border-radius: 50%; }
.veh--utilitario .veh__cuerpo { border-radius: 4px; }
.veh__etq {
  position: absolute; left: 50%; top: 31px; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  background: rgba(255, 255, 255, .94); color: var(--tinta);
  padding: 1px 4px; border-radius: 4px; border: 1px solid var(--linea);
  font-variant-numeric: tabular-nums;
}

/* punto chico: la forma callada, la que usa casi toda la flota */
.veh__punto {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(16, 24, 40, .3);
  transition: width .12s, height .12s, margin .12s;
}
.veh--bus .veh__punto { border-radius: 3px; width: 13px; margin-left: -6.5px; }
.veh--utilitario .veh__punto { border-radius: 3px; }

.veh.e-en_ruta .veh__aro, .veh.e-en_ruta .veh__cuerpo, .veh.e-en_ruta .veh__etq,
.veh.e-en_base .veh__aro, .veh.e-en_base .veh__cuerpo, .veh.e-en_base .veh__etq {
  display: none;
}
.veh.e-revision .veh__punto, .veh.e-alerta .veh__punto,
.veh.e-repro .veh__punto { display: none; }

.veh.e-en_base .veh__punto { background: var(--n0-marca); opacity: .8; }
.veh.e-en_ruta:hover .veh__punto, .veh.e-en_base:hover .veh__punto {
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
}
/* la etiqueta de los puntos chicos aparece sólo al pasar por encima */
.veh.e-en_ruta:hover .veh__etq, .veh.e-en_base:hover .veh__etq {
  display: block; top: 22px;
}
.veh.e-en_ruta.is-sel .veh__punto, .veh.e-en_base.is-sel .veh__punto {
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10, 122, 252, .5);
}
.veh.e-en_ruta.is-sel .veh__etq, .veh.e-en_base.is-sel .veh__etq {
  display: block; top: 22px;
}

.veh.e-revision .veh__cuerpo, .veh.e-revision .veh__flecha { background: var(--n1-marca); }
.veh.e-revision .veh__cuerpo { color: #3d2603; }
.veh.e-alerta .veh__cuerpo, .veh.e-alerta .veh__flecha { background: var(--n2-marca); }
.veh.e-alerta .veh__cuerpo { animation: latido 1.5s ease-out infinite; }
.veh.e-revision .veh__etq, .veh.e-alerta .veh__etq {
  font-weight: 800; border-color: currentColor;
}
.veh.e-revision .veh__etq { color: var(--n1); }
.veh.e-alerta .veh__etq { color: var(--n2); }

.veh.is-sel .veh__cuerpo {
  box-shadow: 0 2px 6px rgba(16,24,40,.35), 0 0 0 2px #fff, 0 0 0 5px rgba(10,122,252,.45);
}
.veh.is-quieto .veh__flecha { opacity: .2; }

/* filtro de la barra de estado: lo que no coincide se apaga, no se saca */
.veh.is-atenuado { opacity: .13; pointer-events: none; }

@keyframes latido {
  0%   { box-shadow: 0 2px 6px rgba(16,24,40,.35), 0 0 0 2px #fff, 0 0 0 0 rgba(220,38,38,.55); }
  70%  { box-shadow: 0 2px 6px rgba(16,24,40,.35), 0 0 0 2px #fff, 0 0 0 14px rgba(220,38,38,0); }
  100% { box-shadow: 0 2px 6px rgba(16,24,40,.35), 0 0 0 2px #fff, 0 0 0 0 rgba(220,38,38,0); }
}
@media (prefers-reduced-motion: reduce) {
  .veh.e-alerta .veh__cuerpo { animation: none; }
  .veh__aro { transition: none; }
}

/* globo de Leaflet */
.leaflet-popup-content-wrapper { border-radius: var(--radio); box-shadow: var(--sombra); }
.leaflet-popup-content { margin: 0; width: 258px !important; font-family: var(--sans); }
.leaflet-container { font-family: var(--sans); background: #e8ecf1; }
.leaflet-container a.leaflet-popup-close-button { color: var(--texto-3); }
.globo { padding: 12px 13px; }
.globo__cab { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.globo__id { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.globo__clase {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-3); background: var(--sup-2); border: 1px solid var(--linea);
  padding: 2px 5px; border-radius: 4px;
}
.globo__fila {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px;
  font-size: 12.5px; padding: 3px 0;
}
.globo__fila dt { color: var(--texto-3); }
.globo__fila dd { margin: 0; font-weight: 550; }
.globo__pie {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.globo__vel { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.globo__vel span { font-size: 11px; font-weight: 500; color: var(--texto-3); margin-left: 2px; }

/* ==================================================== panel de eventos */
.panel-ev {
  background: var(--sup); border-left: 1px solid var(--linea);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.panel-ev__cab {
  padding: 13px 16px 11px; border-bottom: 1px solid var(--linea); flex: none;
}
.panel-ev__tit { display: flex; align-items: baseline; gap: 8px; }
.panel-ev__tit h2 { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.panel-ev__tit span { font-size: 11.5px; color: var(--texto-3); }
.panel-ev__res { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.dato-mini {
  flex: 1 1 0; min-width: 66px; background: var(--sup-2);
  border: 1px solid var(--linea); border-radius: var(--radio-sm); padding: 6px 8px;
}
.dato-mini b {
  display: block; font-size: 17px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.dato-mini span {
  display: block; font-size: 10px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-3); margin-top: 1px;
}
.dato-mini.n0 b { color: var(--n0); }
.dato-mini.n1 b { color: var(--n1); }
.dato-mini.n2 b { color: var(--n2); }

.flujo { flex: 1; overflow: auto; padding: 10px 12px 16px; min-height: 0; }
.flujo__vacio {
  text-align: center; color: var(--texto-3); font-size: 12.5px; padding: 34px 16px;
}
.flujo__vacio svg { width: 34px; height: 34px; opacity: .35; margin-bottom: 8px; }

.evento {
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--sup); padding: 10px 11px; margin-bottom: 8px;
  border-left: 3px solid var(--n0-marca); text-align: left; width: 100%;
  display: block; transition: box-shadow .12s, border-color .12s;
  animation: entra .28s ease-out;
}
.evento:hover { box-shadow: var(--sombra-baja); border-color: var(--linea-fuerte); }
.evento.n0 { border-left-color: var(--n0-marca); background: var(--sup); }
.evento.n1 { border-left-color: var(--n1-marca); }
.evento.n2 { border-left-color: var(--n2-marca); background: linear-gradient(90deg, var(--n2-bg), var(--sup) 60%); }
.evento.is-sel { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul-suave); }
/* arranca en .4 y no en 0: si el navegador congela la animación (pestaña en
   segundo plano, dispositivo lento) la fila sigue siendo legible */
@keyframes entra { from { opacity: .4; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.evento__cab { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.evento__hora {
  font-size: 11.5px; font-weight: 650; color: var(--texto-2);
  font-variant-numeric: tabular-nums; flex: none;
}
.evento__uni { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.evento__esp { flex: 1; }
.evento__txt { font-size: 12.5px; color: var(--texto); line-height: 1.42; }
.evento__meta {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
  font-size: 11px; color: var(--texto-3);
}
.evento__meta b { color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.evento__abierto {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  font-weight: 650; color: var(--n2); text-transform: uppercase; letter-spacing: .04em;
}
.evento__abierto::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--n2-marca);
  animation: parpadeo 1.2s ease-in-out infinite;
}
@keyframes parpadeo { 50% { opacity: .25; } }

.chip {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2.5px 6px; border-radius: 5px; flex: none; line-height: 1.3; white-space: nowrap;
}
.chip--n0 { background: var(--n0-bg); color: var(--n0); }
.chip--n1 { background: var(--n1-bg); color: var(--n1); }
.chip--n2 { background: var(--n2-bg); color: var(--n2); }
.chip--ok { background: var(--verde-bg); color: var(--verde); }

/* ================================================== pantallas de contenido */
.hoja { padding: 20px 24px 28px; max-width: 1180px; }
.hoja__cab { margin-bottom: 18px; }
.hoja__ceja {
  font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul); margin-bottom: 5px;
}
.hoja h2 { font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
.hoja__baja { color: var(--texto-2); font-size: 13.5px; margin-top: 5px; max-width: 74ch; }

.tarjeta {
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
}
.tarjeta__cab {
  padding: 13px 16px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tarjeta__cab h3 { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.tarjeta__cab .esp { flex: 1; }
.tarjeta__cuerpo { padding: 16px; }

.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtro {
  border: 1px solid var(--linea); background: var(--sup); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; font-weight: 550; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.filtro:hover { border-color: var(--linea-fuerte); }
.filtro.is-on { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* tabla de revisión */
.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
table.tabla th {
  text-align: left; font-size: 10.5px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-3); padding: 9px 12px;
  border-bottom: 1px solid var(--linea); background: var(--sup-2);
  position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
table.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
table.tabla tbody tr { cursor: pointer; transition: background .1s; }
table.tabla tbody tr:hover { background: var(--azul-suave); }
table.tabla tbody tr.is-abierta { background: var(--azul-suave); }
.td-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.td-uni { font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.td-fecha { color: var(--texto-2); white-space: nowrap; }
.td-ruta {
  color: var(--texto-2); font-size: 12.5px; white-space: nowrap;
  max-width: 300px; overflow: hidden; text-overflow: ellipsis;
}
.conteo {
  display: inline-grid; place-items: center; min-width: 22px; height: 21px; padding: 0 5px;
  border-radius: 6px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.conteo.n0 { background: var(--n0-bg); color: var(--n0); }
.conteo.n1 { background: var(--n1-bg); color: var(--n1); }
.conteo.n2 { background: var(--n2-bg); color: var(--n2); }
.conteo.cero { background: transparent; color: var(--texto-3); font-weight: 500; }
.estado-pin {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.estado-pin::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.estado-pin.pendiente { color: var(--n1); }
.estado-pin.pendiente::before { background: var(--n1-marca); }
.estado-pin.revisado { color: var(--verde); }
.estado-pin.revisado::before { background: var(--verde); }
.estado-pin.justificado { color: var(--texto-2); }
.estado-pin.justificado::before { background: var(--texto-3); }
.estado-pin.limpio { color: var(--texto-3); font-weight: 500; }
.estado-pin.limpio::before { background: var(--linea-fuerte); }
.estado-pin.suprimido { color: var(--n0); font-weight: 500; }
.estado-pin.suprimido::before { background: var(--n0-marca); }

/* línea que resume las unidades sin novedades de una jornada */
table.tabla tbody tr.fila-resumen td { background: var(--sup-2); color: var(--texto-2); }
table.tabla tbody tr.fila-resumen:hover td { background: var(--azul-suave); }
table.tabla tbody tr.is-tenue td { color: var(--texto-3); }
table.tabla tbody tr.is-tenue .td-uni { color: var(--texto-2); }
.resumen-flecha {
  display: inline-block; width: 14px; color: var(--texto-3); font-size: 11px;
}

/* repetición */
.repro { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0; }
.repro__mapa { position: relative; min-height: 400px; background: #e8ecf1; }
#mapaRepro { position: absolute; inset: 0; }
.repro__lado { border-left: 1px solid var(--linea); display: flex; flex-direction: column; min-width: 0; }
.repro__ficha { padding: 13px 15px; border-bottom: 1px solid var(--linea); }
.repro__ficha dl { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 3px 8px; font-size: 12.5px; margin: 0; }
.repro__ficha dt { color: var(--texto-3); }
.repro__ficha dd { margin: 0; font-weight: 550; }
.repro__lista { flex: 1; overflow: auto; padding: 11px 13px 16px; max-height: 330px; }

.barra-tiempo { padding: 12px 16px 14px; border-top: 1px solid var(--linea); background: var(--sup-2); }
.barra-tiempo__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 9px; font-size: 12px; color: var(--texto-2);
}
.barra-tiempo__hora {
  font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--texto);
}
.pista {
  position: relative; height: 26px; border-radius: 6px; background: #e6eaf1;
  border: 1px solid var(--linea); overflow: hidden; margin-bottom: 4px;
}
.pista__seg { position: absolute; top: 0; bottom: 0; }
.pista__seg.n0 { background: var(--n0-marca); opacity: .5; }
.pista__seg.n1 { background: var(--n1-marca); }
.pista__seg.n2 { background: var(--n2-marca); }
.pista__mov { position: absolute; top: 10px; height: 6px; background: #b9c3d3; border-radius: 3px; }
.pista__cursor {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}
.pista__cursor::after {
  content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--tinta); border: 2px solid #fff;
}
input[type=range].scrub {
  width: 100%; margin: 0; -webkit-appearance: none; appearance: none;
  background: transparent; height: 20px; display: block;
}
input[type=range].scrub::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--linea-fuerte);
}
input[type=range].scrub::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tinta); border: 2px solid #fff; margin-top: -6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
input[type=range].scrub::-moz-range-track { height: 4px; border-radius: 2px; background: var(--linea-fuerte); }
input[type=range].scrub::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--tinta);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.escala-tiempo {
  display: flex; justify-content: space-between; font-size: 10.5px; color: var(--texto-3);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

/* fichas de incidente en la cola */
.inc {
  border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 11px;
  margin-bottom: 9px; border-left: 3px solid var(--n0-marca); background: var(--sup);
}
.inc.n1 { border-left-color: var(--n1-marca); }
.inc.n2 { border-left-color: var(--n2-marca); }
.inc__cab { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.inc__txt { font-size: 12.5px; line-height: 1.42; }
.inc__esc {
  margin-top: 7px; padding-left: 10px; border-left: 2px solid var(--linea);
  display: grid; gap: 4px;
}
.inc__esc div { font-size: 11.5px; color: var(--texto-2); display: flex; gap: 7px; }
.inc__esc b { font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 600; flex: none; }
.inc__acc { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
.btn-chico {
  border: 1px solid var(--linea-fuerte); background: var(--sup); border-radius: 6px;
  padding: 5px 9px; font-size: 11.5px; font-weight: 600; color: var(--texto-2);
}
.btn-chico:hover { background: var(--sup-2); color: var(--texto); }
.btn-chico.is-on { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-chico.is-on-2 { background: var(--texto-2); border-color: var(--texto-2); color: #fff; }
.btn-chico[disabled] { opacity: .45; cursor: default; }

/* ======================================================== resumen diario */
.resumen-grid { display: grid; gap: 16px; }
.franja-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px;
}
.dato {
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 13px 15px; box-shadow: var(--sombra-baja);
}
.dato b {
  display: block; font-size: 25px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.dato span {
  display: block; font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-3); margin-top: 3px;
}
.dato em { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.dato.n1 b { color: var(--n1); }
.dato.n2 b { color: var(--n2); }
.dato.ok b { color: var(--verde); }

.marca-ia {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  color: var(--violeta); background: #f4f0ff; border: 1px solid #e2d9ff;
  padding: 3px 8px; border-radius: 999px; letter-spacing: .01em;
}
.marca-ia svg { width: 12px; height: 12px; }

.narrativa { display: grid; gap: 11px; }
.narrativa li {
  list-style: none; padding-left: 22px; position: relative;
  font-size: 14px; line-height: 1.55; color: var(--texto);
}
.narrativa li::before {
  content: ""; position: absolute; left: 6px; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--azul);
}
.narrativa li.alto::before { background: var(--n2-marca); }
.narrativa li.medio::before { background: var(--n1-marca); }
.narrativa strong { font-weight: 650; }
.narrativa ul { padding: 0; margin: 0; }

.patron {
  border: 1px solid #e2d9ff; background: linear-gradient(135deg, #faf8ff, #f4f0ff);
  border-radius: var(--radio); padding: 14px 16px;
}
.patron__cab {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--violeta);
}
.patron__cab svg { width: 15px; height: 15px; }
.patron p { font-size: 13.5px; line-height: 1.55; color: var(--texto); }
.patron__pie { margin-top: 9px; font-size: 12px; color: var(--texto-2); }

.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wa-verde); color: #06301c; border: 0; border-radius: var(--radio-sm);
  padding: 9px 14px; font-size: 13px; font-weight: 650;
}
.btn-wa:hover { filter: brightness(1.06); }
.btn-wa svg { width: 16px; height: 16px; }
.btn-primario {
  background: var(--tinta); color: #fff; border: 0; border-radius: var(--radio-sm);
  padding: 9px 14px; font-size: 13px; font-weight: 600;
}
.btn-primario:hover { background: var(--tinta-3); }

/* =============================================================== ajustes */
.ajustes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.campo { margin-bottom: 18px; }
.campo:last-child { margin-bottom: 0; }
.campo__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.campo__et { font-size: 13px; font-weight: 600; }
.campo__val {
  font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--azul); flex: none;
}
.campo__ayuda { font-size: 11.5px; color: var(--texto-3); margin-top: 5px; line-height: 1.45; }
input[type=range].deslizador {
  width: 100%; margin: 6px 0 0; -webkit-appearance: none; appearance: none;
  background: transparent; height: 18px; display: block;
}
input[type=range].deslizador::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: var(--linea-fuerte);
}
input[type=range].deslizador::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; border: 2px solid var(--azul); margin-top: -6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
input[type=range].deslizador::-moz-range-track { height: 5px; border-radius: 3px; background: var(--linea-fuerte); }
input[type=range].deslizador::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  border: 2px solid var(--azul); box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.regla-fila {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--linea);
}
.regla-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.regla-fila__txt { flex: 1; min-width: 0; }
.regla-fila__txt b { display: block; font-size: 13px; font-weight: 600; }
.regla-fila__txt span { display: block; font-size: 11.5px; color: var(--texto-3); margin-top: 2px; line-height: 1.45; }
.regla-fila__cnt {
  font-size: 10.5px; font-weight: 650; color: var(--texto-3); background: var(--sup-2);
  border: 1px solid var(--linea); border-radius: 5px; padding: 2px 6px; white-space: nowrap;
  font-variant-numeric: tabular-nums; margin-top: 5px; display: inline-block;
}

.dest { display: grid; gap: 8px; }
.dest__fila {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--linea); border-radius: var(--radio-sm); background: var(--sup-2);
}
.dest__wa {
  width: 28px; height: 28px; border-radius: 50%; background: var(--wa-verde);
  display: grid; place-items: center; flex: none;
}
.dest__wa svg { width: 15px; height: 15px; }
.dest__datos { flex: 1; min-width: 0; }
.dest__datos b { display: block; font-size: 13px; font-weight: 600; }
.dest__datos span { display: block; font-size: 11.5px; color: var(--texto-3); }
.dest__tel { font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dest__quitar {
  border: 0; background: none; color: var(--texto-3); width: 26px; height: 26px;
  border-radius: 6px; display: grid; place-items: center; flex: none;
}
.dest__quitar:hover { background: var(--n2-bg); color: var(--n2); }
.dest__alta { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.dest__alta input {
  flex: 1 1 120px; min-width: 0; border: 1px solid var(--linea); border-radius: var(--radio-sm);
  padding: 8px 10px; font-size: 13px; background: var(--sup);
}
.dest__alta input:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-suave); }

.aviso {
  display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--radio-sm);
  background: var(--azul-suave); border: 1px solid #cfe2ff; font-size: 12.5px;
  color: #10437e; line-height: 1.5;
}
.aviso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.aviso--tenue { background: var(--sup-2); border-color: var(--linea); color: var(--texto-2); }

/* ====================================================== tarjeta WhatsApp */
.wa {
  position: fixed; right: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 32px);
  z-index: 4000; border-radius: 14px; overflow: hidden; background: var(--wa-fondo);
  box-shadow: var(--sombra-alta); animation: waEntra .34s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes waEntra { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
.wa__cab {
  background: var(--wa-cabecera); color: #fff; padding: 9px 11px;
  display: flex; align-items: center; gap: 9px;
}
.wa__avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--wa-verde);
  display: grid; place-items: center; flex: none; color: #06301c;
}
.wa__avatar svg { width: 18px; height: 18px; }
.wa__quien { flex: 1; min-width: 0; line-height: 1.25; }
.wa__quien b { display: block; font-size: 13.5px; font-weight: 600; }
.wa__quien span { display: block; font-size: 10.5px; color: #a7ccc5; }
.wa__cerrar {
  border: 0; background: none; color: #cfe6e1; width: 26px; height: 26px;
  border-radius: 6px; display: grid; place-items: center; flex: none;
}
.wa__cerrar:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.wa__cuerpo {
  padding: 12px 11px 14px; max-height: 62vh; overflow: auto;
  background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px);
  background-size: 14px 14px;
}
.wa__burbuja {
  background: var(--wa-burbuja); border-radius: 9px; border-top-left-radius: 2px;
  padding: 9px 10px 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, .13);
  font-size: 13px; line-height: 1.48; color: #111b21; position: relative;
}
.wa__burbuja + .wa__burbuja { margin-top: 8px; }
.wa__burbuja strong { font-weight: 700; }
.wa__burbuja .wa__linea { display: block; }
.wa__burbuja .wa__linea + .wa__linea { margin-top: 5px; }
.wa__mono { font-family: var(--mono); font-size: 12px; }
.wa__meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 4px; font-size: 10.5px; color: #667781;
}
.wa__tildes { display: inline-flex; color: var(--wa-check); }
.wa__tildes svg { width: 15px; height: 11px; }
.wa__pie {
  padding: 8px 11px 10px; background: var(--wa-fondo);
  border-top: 1px solid rgba(0, 0, 0, .07);
  display: flex; align-items: center; gap: 8px;
}
.wa__pie span { flex: 1; font-size: 10.5px; color: #5c6b73; }
.wa__pie button {
  border: 0; background: rgba(0, 0, 0, .06); border-radius: 6px; padding: 5px 10px;
  font-size: 11.5px; font-weight: 600; color: #2b3a41;
}
.wa__pie button:hover { background: rgba(0, 0, 0, .12); }

/* ============================================================ nav inferior */
.nav-inferior { display: none; }

/* aviso flotante */
.brindis {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--tinta); color: #fff; padding: 9px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 550; z-index: 5000; box-shadow: var(--sombra-alta);
  animation: entra .2s ease-out; max-width: calc(100vw - 32px); text-align: center;
}

/* ============================================================== responsive */
@media (max-width: 1180px) {
  .mapa-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .repro { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 960px) {
  .repro { grid-template-columns: minmax(0, 1fr); }
  .repro__lado { border-left: 0; border-top: 1px solid var(--linea); }
  .repro__mapa { min-height: 320px; }
  .repro__lista { max-height: none; }
}

@media (max-width: 860px) {
  :root { --barra-h: 56px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .app.is-colapsado { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 3000;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--sombra-alta);
  }
  .principal { grid-column: 1; }
  .app.is-menu .lateral { transform: none; }
  .lateral__colapsar { display: none; }
  .app.is-colapsado .lateral__titulo,
  .app.is-colapsado .lateral__pie,
  .app.is-colapsado .nav__item span.rot { display: block; }
  .app.is-colapsado .nav__item { justify-content: flex-start; padding: 9px 10px; }
  .app.is-colapsado .lateral__marca { justify-content: flex-start; padding: 0 12px 0 16px; gap: 10px; }
  .app.is-colapsado .nav__contador { position: static; min-width: 20px; height: 19px; font-size: 11px; }
  .velo-tapa {
    display: block; position: fixed; inset: 0; background: rgba(16, 20, 30, .45);
    z-index: 2900; opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .app.is-menu .velo-tapa { opacity: 1; pointer-events: auto; }

  .barra__menu { display: grid; }
  .barra { padding: 0 12px; gap: 9px; }
  .barra__id h1 { font-size: 13.5px; }
  .barra__sub { display: none; }
  .reloj__fecha { display: none; }
  .barra__reloj { padding: 4px 10px; }
  .barra__reloj time { font-size: 15px; }
  .btn-fantasma { padding: 7px 9px; font-size: 0; }
  .btn-fantasma::after { content: "↺"; font-size: 15px; }
  .segmentos button { padding: 6px 7px; font-size: 11px; }

  .principal { grid-template-rows: var(--barra-h) minmax(0, 1fr) var(--pie-h); }
  .lienzo { padding-bottom: 0; }
  .pie { padding-bottom: 0; font-size: 10.5px; }

  /* nav inferior */
  .nav-inferior {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
    background: var(--tinta); border-top: 1px solid #0e1017;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-inferior button {
    border: 0; background: none; color: #99a4b5; padding: 8px 2px 7px;
    display: grid; justify-items: center; gap: 3px; font-size: 10px; font-weight: 600;
    position: relative;
  }
  .nav-inferior button svg { width: 19px; height: 19px; }
  .nav-inferior button.is-on { color: #fff; }
  .nav-inferior button.is-on::before {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2.5px;
    border-radius: 0 0 3px 3px; background: var(--grad);
  }
  .nav-inferior .pin {
    position: absolute; top: 4px; right: calc(50% - 22px); min-width: 15px; height: 15px;
    border-radius: 8px; background: var(--n2-marca); color: #fff; font-size: 9.5px;
    font-weight: 700; display: grid; place-items: center; padding: 0 3px;
  }
  .nav-inferior .pin:empty { display: none; }
  .nav-inferior .pin--amb { background: var(--n1-marca); color: #3d2603; }

  .app { padding-bottom: 54px; }
  .wa { bottom: 66px; right: 12px; left: 12px; width: auto; }
  .brindis { bottom: 72px; }

  /* el mapa ocupa todo; los eventos pasan a hoja inferior */
  .mapa-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  /* z-index por encima de los controles de Leaflet (1000): con la hoja abierta
     tiene que taparlos, y con la hoja cerrada la atribución queda visible. */
  .panel-ev {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1100;
    max-height: 74%; border-left: 0; border-top: 1px solid var(--linea);
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(16, 24, 40, .16);
    transform: translateY(calc(100% - 142px)); transition: transform .26s ease;
  }
  /* sólo el mapa en vivo tiene la hoja de eventos encima */
  #mapa .leaflet-bottom { margin-bottom: 146px; }
  .panel-ev.is-abierta { transform: none; }
  .panel-ev__tirador {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 0 2px; cursor: pointer; border: 0; background: none; width: 100%;
  }
  .panel-ev__tirador i { width: 38px; height: 4px; border-radius: 2px; background: var(--linea-fuerte); }
  .flujo { max-height: 46vh; }
  .mapa-herr { top: 10px; left: 10px; }

  .hoja { padding: 16px 14px 24px; }
  .hoja h2 { font-size: 19px; }
  .ajustes-grid { grid-template-columns: minmax(0, 1fr); }
  .franja-datos { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
  .dato b { font-size: 21px; }
  .tarjeta__cuerpo { padding: 13px; }
}
.panel-ev__tirador { display: none; }
@media (max-width: 860px) { .panel-ev__tirador { display: flex; } }

/* --- teléfonos angostos: la barra superior pasa a dos filas ---------------- */
@media (max-width: 580px) {
  :root { --barra-h: auto; }
  .barra {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; row-gap: 7px; column-gap: 10px;
    padding: 9px 12px 10px;
  }
  .barra__menu { grid-area: 1 / 1; }
  .barra__id { grid-area: 1 / 2; min-width: 0; }
  .barra__id h1 { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
  .barra__esp { display: none; }
  .barra__reloj { grid-area: 2 / 1 / 2 / 2; justify-self: start; }
  /* con el selector de idioma en la fila, la fecha ya no entra: se ve igual en
     el encabezado de Revisión y de Resumen */
  .reloj__fecha { display: none; }
  .barra__ctrl { grid-area: 2 / 2; justify-self: end; }

  /* la referencia de formas ocupa demasiado en pantalla chica */
  #cajaLeyenda { display: none; }
  .mapa-panel { padding: 7px 9px; }
  .interruptor { font-size: 11.5px; }
  .mapa-herr { gap: 6px; }

  /* barra de estado compacta: entra entera en 375 px sin scroll lateral */
  .barra-estado { padding: 6px 7px; gap: 4px; overflow-x: hidden; }
  .chip-estado { padding: 4px 7px 4px 6px; font-size: 10.5px; gap: 3px; }
  .chip-estado b { font-size: 12.5px; }
  .chip-estado::before { width: 6px; height: 6px; }
  .chip-estado__largo { display: none; }
  .chip-estado__corto { display: inline; }
  .chip-estado.e-todas .chip-estado__corto { display: none; }   /* sólo el número */
  .btn-ver-alertas {
    padding: 0; width: 30px; height: 26px; justify-content: center; margin-left: auto;
  }
  .btn-ver-alertas span:last-child { display: none; }           /* sólo el ícono */
  .btn-ver-alertas svg { width: 15px; height: 15px; }

  .franja-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dato { padding: 11px 12px; }
  .barra__ctrl { gap: 5px; }

  /* La cola de revisión entra sin scroll horizontal: se ocultan clase,
     conductor, recorrido y km — todo eso aparece al abrir la jornada. */
  .tabla-envoltura { overflow-x: visible; }
  table.tabla { min-width: 0; font-size: 12.5px; }
  table.tabla th, table.tabla td { padding: 9px 6px; }
  table.tabla th:nth-child(3), table.tabla td:nth-child(3),
  table.tabla th:nth-child(4), table.tabla td:nth-child(4),
  table.tabla th:nth-child(5), table.tabla td:nth-child(5),
  table.tabla th:nth-child(6), table.tabla td:nth-child(6) { display: none; }
  .estado-pin { font-size: 11px; }
}

/* ============================================================ selector de idioma */
.segmentos--idioma button {
  padding: 7px 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
@media (max-width: 580px) {
  .segmentos--idioma button { padding: 6px 7px; font-size: 10.5px; }
}

/* ═══════════════════════════════════════════ capa de demostración guiada */
/* Ver js/guia.js. El velo es un SVG a pantalla completa con un agujero por
   objetivo, recortado con una máscara: no hay que subir nada de z-index —lo que
   pelearía con Leaflet, con la hoja de eventos del celular y con la tarjeta de
   WhatsApp— y como no recibe clics, todo lo de abajo sigue funcionando. */

.guia-velo {
  position: fixed; inset: 0; z-index: 5400; pointer-events: none;
  animation: entra .2s ease-out;
}
/* los avisos flotantes de la app viven por debajo del velo: durante el
   recorrido se suben, o «Jornada completa» se leería a media luz */
body.guia-en-curso .brindis { z-index: 5700; }
.guia-velo svg { display: block; width: 100%; height: 100%; }
.guia-anillo { fill: none; stroke: var(--azul); stroke-width: 2.2; }
.guia-anillo--halo {
  stroke: rgba(10, 122, 252, .34); stroke-width: 8;
  animation: guiaLatido 2s ease-in-out infinite;
}
@keyframes guiaLatido { 0%, 100% { opacity: .9; } 50% { opacity: .2; } }

/* ------------------------------------------------------ globo del paso -- */
.guia-globo {
  position: fixed; z-index: 5600; left: 0; top: 0;
  width: 340px; max-width: calc(100vw - 20px);
  background: var(--sup); color: var(--texto);
  border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); padding: 13px 15px 12px;
  animation: entra .18s ease-out;
}
.guia-globo__cab { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.guia-globo__esp { flex: 1; }
.guia-globo__paso {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  color: #fff; background: var(--grad); border-radius: 5px;
  padding: 3px 7px 2px; line-height: 1; font-variant-numeric: tabular-nums;
}
.guia-globo__saltar {
  border: 0; background: none; padding: 2px 0; font-size: 12px; font-weight: 550;
  color: var(--texto-3); text-decoration: underline; text-underline-offset: 2px;
}
.guia-globo__saltar:hover { color: var(--texto-2); }
.guia-globo h3 {
  font-size: 14.5px; font-weight: 680; letter-spacing: -.015em; margin-bottom: 5px;
}
.guia-globo__txt { font-size: 12.8px; line-height: 1.52; color: var(--texto-2); }
.guia-globo__txt strong { color: var(--texto); font-weight: 650; }
.guia-globo__pie { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

.guia-globo__espera {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 7px 10px; border-radius: var(--radio-sm);
  background: var(--n2-bg); border: 1px solid #f7d4cf;
  font-size: 13px; font-weight: 700; color: var(--n2);
  font-variant-numeric: tabular-nums;
}
.guia-globo__pulso {
  width: 8px; height: 8px; border-radius: 50%; background: var(--n2-marca); flex: none;
  animation: parpadeo 1.1s ease-in-out infinite;
}
.guia-globo--fin { width: 380px; }

/* ------------------------------------------------------------ botones -- */
.guia-btn {
  border: 1px solid var(--linea); background: var(--sup); border-radius: var(--radio-sm);
  padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--texto-2);
  transition: background .12s, border-color .12s, color .12s;
}
.guia-btn:hover { background: var(--sup-2); border-color: var(--linea-fuerte); color: var(--texto); }
.guia-btn--pri {
  border-color: transparent; background: var(--grad); color: #fff;
  box-shadow: 0 6px 16px rgba(10, 122, 252, .26);
}
.guia-btn--pri:hover { color: #fff; filter: brightness(1.06); border-color: transparent; }
.guia-btn--chico { padding: 7px 14px; font-size: 12.5px; }

/* ------------------------------------------------------- bienvenida --- */
.guia-bienv {
  position: fixed; inset: 0; z-index: 5800;
  display: grid; place-items: center; padding: 16px;
}
.guia-bienv__velo {
  position: absolute; inset: 0; background: rgba(12, 16, 26, .58);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: entra .22s ease-out;
}
.guia-bienv__caja {
  position: relative; width: min(456px, 100%);
  max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--sup); border-radius: 16px; box-shadow: var(--sombra-alta);
  padding: 20px 22px 18px; animation: guiaSube .26s cubic-bezier(.2, .9, .3, 1.05);
}
@keyframes guiaSube { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.guia-bienv__caja::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-radius: 16px 16px 0 0; background: var(--grad);
}
.guia-bienv__cejas { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.guia-bienv__sim {
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em; color: var(--texto-3);
  border: 1px solid var(--linea); border-radius: 5px; padding: 3px 7px 2px; line-height: 1.2;
}
.guia-bienv__caja h2 {
  font-size: 21px; font-weight: 680; letter-spacing: -.025em; margin-bottom: 10px;
  padding-right: 28px;
}
.guia-bienv__caja p {
  font-size: 13.5px; line-height: 1.58; color: var(--texto-2); margin-bottom: 9px;
}
.guia-bienv__caja p strong { color: var(--texto); font-weight: 650; }
.guia-bienv__acc { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.guia-bienv__x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border: 0; background: none; border-radius: 7px; color: var(--texto-3);
  display: grid; place-items: center;
}
.guia-bienv__x:hover { background: var(--sup-2); color: var(--texto); }

/* -------------------------------------------------- aviso contextual -- */
.guia-nudge {
  position: fixed; z-index: 5200; max-width: 292px;
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--tinta); color: #eef1f7; border-radius: 10px;
  padding: 10px 10px 10px 12px; font-size: 12.5px; line-height: 1.45;
  box-shadow: var(--sombra-alta); animation: entra .2s ease-out;
}
.guia-nudge__pin {
  width: 8px; height: 8px; border-radius: 50%; background: var(--n2-marca);
  flex: none; margin-top: 5px; box-shadow: 0 0 0 3px rgba(220, 38, 38, .28);
}
.guia-nudge__x {
  border: 0; background: none; color: #8590a3; padding: 0; margin: -1px -2px 0 0;
  width: 20px; height: 20px; display: grid; place-items: center; flex: none;
  border-radius: 5px;
}
.guia-nudge__x:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* -------------------------------------------------------- botón «?» --- */
.btn-ayuda { color: var(--texto-2); }
.btn-ayuda:hover { color: var(--azul); border-color: var(--azul); background: var(--azul-suave); }
.btn-ayuda svg { width: 17px; height: 17px; }

/* --------------------------------------------------------- celulares -- */
@media (max-width: 640px) {
  .guia-globo--hoja {
    max-width: none; border-radius: 14px; padding: 12px 14px 12px;
  }
  .guia-globo--hoja h3 { font-size: 14px; }
  .guia-globo--hoja .guia-globo__txt { font-size: 12.5px; }
  .guia-bienv__caja { padding: 18px 17px 16px; }
  .guia-bienv__caja h2 { font-size: 18.5px; }
  .guia-bienv__caja p { font-size: 12.8px; }
  .guia-bienv__acc .guia-btn { flex: 1 1 100%; text-align: center; }
}
/* El botón «?» suma un control más a una fila que en 375 px ya venía justa.
   Se recupera el espacio apretando el grupo entero —el reloj, los pasos de
   velocidad y el selector de idioma— en vez de dejar que el idioma se caiga a
   una tercera fila y se coma 40 px de mapa. `flex-wrap` queda igual como red:
   con una fuente más ancha se acomoda en dos filas en vez de desbordar. */
@media (max-width: 580px) {
  .barra__ctrl { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .barra__reloj { padding: 4px 9px; }
  .btn-ayuda { width: 30px; height: 30px; }
  .btn-ayuda svg { width: 15px; height: 15px; }
}
@media (max-width: 400px) {
  .btn-icono { width: 30px; height: 30px; }
  .btn-fantasma { padding: 6px 8px; }
  .segmentos button { padding: 6px 6px; }
  .segmentos--idioma button { padding: 6px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .guia-anillo--halo, .guia-globo__pulso { animation: none; }
  .guia-velo, .guia-globo, .guia-bienv__velo, .guia-bienv__caja, .guia-nudge { animation: none; }
}

/* ═══════════════════════════════════════════ modo interactivo «Probá vos» */
/* Ver js/proba.js. Con el modo activo el panel de lectura ocupa el lugar de las
   herramientas del mapa: no hace falta el conmutador de corredor —ya está
   dibujado— ni la referencia de formas, y así no hay dos cajas peleando por la
   esquina superior izquierda. */

.btn-proba {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  border: 0; border-radius: 999px; padding: 8px 14px 8px 11px;
  background: var(--grad); color: #fff;
  font-size: 12.5px; font-weight: 650; letter-spacing: -.005em; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(10, 122, 252, .32), 0 1px 2px rgba(16, 24, 40, .2);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn-proba svg { width: 16px; height: 16px; flex: none; }
.btn-proba:hover { filter: brightness(1.07); transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(10, 122, 252, .38), 0 1px 2px rgba(16, 24, 40, .2); }
.btn-proba:active { transform: none; }

body.proba-en-curso .mapa-herr { display: none; }

/* ------------------------------------------------------ panel de lectura */
.proba {
  position: absolute; left: 12px; top: 12px; z-index: 520; width: 296px;
  max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow: auto;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 11px 12px 12px; animation: entra .2s ease-out;
}
.proba__cab { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.proba__esp { flex: 1; }
.proba__cab b { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.proba__pin {
  width: 9px; height: 9px; border-radius: 50%; background: var(--grad); flex: none;
  box-shadow: 0 0 0 3px rgba(97, 39, 246, .18);
}
.proba__cerrar {
  border: 0; background: none; color: var(--texto-3); width: 22px; height: 22px;
  border-radius: 5px; display: grid; place-items: center; flex: none;
}
.proba__cerrar:hover { background: var(--sup-2); color: var(--texto); }
.proba__guia { font-size: 11.5px; line-height: 1.45; color: var(--texto-2); margin-bottom: 9px; }
.proba__guia strong { color: var(--texto); font-weight: 700; }

.proba__cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.proba__cifra {
  background: var(--sup-2); border: 1px solid var(--linea); border-radius: var(--radio-sm);
  padding: 6px 9px; min-width: 0;
}
.proba__cifra span {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.proba__cifra b {
  display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* --------------------------------------------- regla con los dos umbrales */
.proba__escala { margin: 10px 0 9px; }
.proba__pista {
  position: relative; height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--linea);
}
.proba__zona { position: absolute; top: 0; bottom: 0; display: block; }
.proba__zona.z0 { left: 0; background: var(--verde); opacity: .55; }
.proba__zona.z1 { background: var(--n0-marca); opacity: .45; }
.proba__zona.z2 { background: var(--n1-marca); opacity: .6; }
.proba__zona.z3 { background: var(--n2-marca); opacity: .65; }
.proba__aguja {
  position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px;
  background: var(--tinta); border-radius: 2px; display: block;
  box-shadow: 0 0 0 1.5px #fff; transition: left .08s linear;
}
.proba__marcas { position: relative; height: 13px; margin-top: 3px; }
.proba__marcas span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 9px; font-weight: 650; color: var(--texto-3); white-space: nowrap;
}

/* --------------------------------------------------------------- veredicto */
.proba__veredicto {
  border-radius: var(--radio-sm); border: 1px solid var(--linea);
  background: var(--sup-2); padding: 8px 10px 9px;
}
.proba__nivel { display: flex; align-items: center; gap: 7px; }
.proba__nivel i { width: 9px; height: 9px; border-radius: 3px; background: var(--n0-marca); flex: none; }
.proba__nivel b { font-size: 12.5px; font-weight: 750; letter-spacing: -.01em; }
.proba__txt { font-size: 11.5px; line-height: 1.45; color: var(--texto-2); margin-top: 4px; }
.proba__regla {
  font-size: 10.5px; font-weight: 600; color: var(--texto-3); margin-top: 5px;
  padding-top: 5px; border-top: 1px dashed var(--linea-fuerte);
}
.proba__veredicto.ok { background: var(--verde-bg); border-color: #bfe6d3; }
.proba__veredicto.ok .proba__nivel i { background: var(--verde); }
.proba__veredicto.ok .proba__nivel b { color: var(--verde); }
.proba__veredicto.n0 { background: var(--n0-bg); border-color: var(--linea-fuerte); }
.proba__veredicto.n0 .proba__nivel b { color: var(--n0); }
.proba__veredicto.n1 { background: var(--n1-bg); border-color: #f5dcac; }
.proba__veredicto.n1 .proba__nivel i { background: var(--n1-marca); }
.proba__veredicto.n1 .proba__nivel b { color: var(--n1); }
.proba__veredicto.n2 { background: var(--n2-bg); border-color: #f7cdc7; }
.proba__veredicto.n2 .proba__nivel i { background: var(--n2-marca); }
.proba__veredicto.n2 .proba__nivel b { color: var(--n2); }

.proba__acc { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.proba__nota {
  font-size: 10px; line-height: 1.4; color: var(--texto-3); margin-top: 8px;
  padding-top: 7px; border-top: 1px solid var(--linea);
}

/* ------------------------------------------------- marcador arrastrable */
/* La unidad bajo control siempre muestra la chapa grande, aunque vaya en ruta:
   un punto de 11 px no se agarra con el dedo. El ::before agranda el área
   sensible a 60 px sin mover el dibujo — el evento igual apunta al marcador. */
.veh.is-arrastrable .veh__aro,
.veh.is-arrastrable .veh__cuerpo,
.veh.is-arrastrable .veh__etq { display: block; }
.veh.is-arrastrable .veh__punto { display: none; }
.veh.is-arrastrable::before {
  content: ""; position: absolute; inset: -13px; border-radius: 50%;
}
.veh.is-arrastrable.e-en_ruta .veh__cuerpo,
.veh.is-arrastrable.e-en_base .veh__cuerpo {
  background: var(--violeta);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .35), 0 0 0 2px #fff,
              0 0 0 6px rgba(97, 39, 246, .3);
}
.veh.is-arrastrable.e-en_ruta .veh__flecha,
.veh.is-arrastrable.e-en_base .veh__flecha { background: var(--violeta); }
.veh.is-arrastrable .veh__etq { border-color: var(--violeta); color: var(--violeta); font-weight: 800; }
.veh.is-arrastrable.e-revision .veh__etq { border-color: currentColor; color: var(--n1); }
.veh.is-arrastrable.e-alerta .veh__etq { border-color: currentColor; color: var(--n2); }
.leaflet-marker-draggable.veh { cursor: grab; }
.leaflet-marker-draggable.veh:active { cursor: grabbing; }

/* ------------------------------------------------------------- celulares */
/* En un teléfono, la hoja de eventos y el panel de lectura no entran juntos:
   entre las dos dejaban menos de 200 px de mapa, que no alcanza para arrastrar
   nada. Mientras dura el modo la hoja se retira y el panel baja del todo; al
   salir, la hoja vuelve. El veredicto rojo del panel y la tarjeta de WhatsApp
   son el remate en pantalla chica; la entrada del panel de eventos es un
   agregado de escritorio. */
@media (max-width: 860px) {
  .proba {
    left: 8px; right: 8px; top: auto; bottom: 8px; width: auto;
    max-height: 62%; border-radius: 14px; padding: 10px 12px 11px;
  }
  body.proba-en-curso .panel-ev { display: none; }
  body.proba-en-curso #mapa .leaflet-bottom { margin-bottom: 0; }
  .proba__guia { font-size: 11.5px; margin-bottom: 8px; }
  .proba__cifra { padding: 5px 9px; }
  .proba__cifra b { font-size: 16px; }
  .proba__escala { margin: 8px 0 7px; }
  .proba__veredicto { padding: 7px 9px 8px; }
  .proba__acc { margin-top: 8px; }
  .proba__nota { margin-top: 7px; padding-top: 6px; font-size: 9.5px; }
  .btn-proba { padding: 7px 12px 7px 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .proba { animation: none; }
  .proba__aguja { transition: none; }
  .btn-proba { transition: none; }
}


/* The Obranext watermark is fixed at the bottom-left and outranks everything by
   z-index, so at phone width it sat on top of the first tab of .nav-inferior
   (53px tall) and swallowed the tap. Reserve the bar's height plus a gap and it
   rides above it instead. */
@media (max-width: 720px) {
  :root { --obx-wm-inset-bottom: 66px; }
}