/* Kohen Ruta — app del fletero. Se usa en la calle, con sol y con una mano: contraste alto, botones grandes. */
:root {
  --tinta: #14161a;
  --tinta-2: #4b515c;          /* 7.6:1 sobre --superficie */
  --fondo: #f2f0eb;
  --superficie: #ffffff;
  --linea: #dcd8cf;
  --pri: #1450d8;
  --pri-osc: #0f3fae;
  --pri-claro: #e6edfc;
  --pri-fondo: #1450d8;        /* fondo de botones con texto blanco */
  --ok: #17763a;
  --ok-claro: #e2f3e7;
  --mal: #b42318;
  --mal-claro: #fde9e7;
  --aviso: #8a4b00;
  --aviso-claro: #fff0d6;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(20, 22, 26, .06), 0 6px 18px rgba(20, 22, 26, .07);
  --logo-filtro: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #f1f2f4; --tinta-2: #b3b9c4; --fondo: #0f1114; --superficie: #1a1d22; --linea: #2d323a;
    --pri: #7aa2ff; --pri-osc: #9bb9ff; --pri-claro: #1b2742; --pri-fondo: #2f5fd6;
    --ok: #5ccf86; --ok-claro: #16301f; --mal: #ff7b6e; --mal-claro: #3a1a17; --aviso: #ffb547; --aviso-claro: #3a2a10;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4); --logo-filtro: invert(1);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--pri-fondo); color: #fff; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--pri); outline-offset: 2px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprite { position: absolute; }
[hidden] { display: none !important; }
.logo, .barra-logo { filter: var(--logo-filtro); }

/* ---------- pantallas sueltas (sin registrar, PIN) ---------- */
.solo { min-height: 100dvh; display: grid; place-items: center; padding: 24px 20px; }
.aviso-pagina, .pin { width: min(380px, 100%); text-align: center; }
.logo { width: 170px; height: auto; margin-bottom: 28px; }
.aviso-pagina h1, .pin h1 { font-size: 1.35rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.aviso-pagina p { color: var(--tinta-2); margin: 0; }
.pin-ayuda { color: var(--tinta-2); margin: 0 0 18px; min-height: 1.45em; }
.pin-puntos { display: flex; justify-content: center; gap: 14px; height: 18px; margin-bottom: 10px; }
.pin-puntos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--tinta-2); }
.pin-puntos i.lleno { background: var(--tinta); border-color: var(--tinta); }
.pin-error { color: var(--mal); min-height: 1.45em; margin: 0 0 12px; font-weight: 600; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.teclado button {
  height: 64px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--superficie);
  font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .15s;
}
.teclado button:active { background: var(--pri-claro); }
.teclado .tecla-sec { font-size: 1rem; font-weight: 500; color: var(--tinta-2); }
.teclado .tecla-ok { background: var(--pri-fondo); border-color: var(--pri-fondo); color: #fff; display: grid; place-items: center; }
.teclado .tecla-ok svg { width: 30px; height: 30px; stroke-width: 2.6; }

/* ---------- barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.barra-logo { height: 26px; width: auto; }
.barra-info { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font-size: .86rem; line-height: 1.25; }
.barra-info #saludo { font-weight: 600; }
.gps { color: var(--tinta-2); display: inline-flex; align-items: center; gap: 6px; }
.gps::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-2); }
.gps[data-estado="on"] { color: var(--ok); }
.gps[data-estado="on"]::before { background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: latido 2s ease-out infinite; }
.gps[data-estado="mal"] { color: var(--mal); font-weight: 600; }
.gps[data-estado="mal"]::before { background: var(--mal); }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(23, 118, 58, .5); } 80%, 100% { box-shadow: 0 0 0 7px rgba(23, 118, 58, 0); } }
.barra-salir { border: 0; background: none; padding: 8px; margin-right: -8px; color: var(--tinta-2); }

.aviso-nuevo {
  margin: 12px 16px 0; padding: 12px 14px; border-radius: var(--radio); background: var(--aviso-claro); color: var(--aviso);
  font-weight: 600; animation: entrar .25s cubic-bezier(.2, .8, .2, 1);
}
@keyframes entrar { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- contenido ---------- */
.tab { padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
.progreso { margin: 0 0 12px; color: var(--tinta-2); font-size: .95rem; font-variant-numeric: tabular-nums; }
.progreso b { color: var(--tinta); }
.barra-prog { height: 6px; border-radius: 3px; background: var(--linea); margin-top: 6px; overflow: hidden; }
.barra-prog i { display: block; height: 100%; background: var(--ok); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }

/* próximo destino: lo único que importa al manejar */
.destino { background: var(--superficie); border-radius: 18px; box-shadow: var(--sombra); padding: 18px 18px 16px; }
.destino-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.parada { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pri); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--fondo); color: var(--tinta-2); }
.chip svg { width: 16px; height: 16px; }
.chip.cobrar { background: var(--aviso-claro); color: var(--aviso); }
.chip.ok { background: var(--ok-claro); color: var(--ok); }
.chip.mal { background: var(--mal-claro); color: var(--mal); }
.destino h2 { font-size: 1.15rem; margin: 0; font-weight: 600; color: var(--tinta-2); }
.destino .direccion { font-size: 1.6rem; line-height: 1.2; font-weight: 750; margin: 4px 0 2px; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.destino .localidad { color: var(--tinta-2); margin: 0; }
.destino-datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.obs { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--fondo); font-size: .95rem; }
.obs b { display: block; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); }
.obs.devuelve { background: var(--aviso-claro); color: var(--tinta); }
.obs.devuelve b { color: var(--aviso); }
.ir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.ir a, .ir button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px;
  border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta);
  font-size: .88rem; font-weight: 600; text-decoration: none;
}
.ir a:active, .ir button:active { background: var(--pri-claro); }
.ir svg { width: 24px; height: 24px; }
.ir .maps svg { color: #1a73e8; }
.ir .waze svg { color: #08a0d8; }
.acciones { display: grid; gap: 8px; margin-top: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); font-weight: 650; text-decoration: none;
  transition: background .15s, transform .1s;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; }
.btn-pri { background: var(--pri-fondo); border-color: var(--pri-fondo); color: #fff; }
.btn-pri:active { filter: brightness(.88); }
.btn-grande { min-height: 62px; font-size: 1.08rem; width: 100%; }
.btn-texto { border: 0; background: none; color: var(--tinta-2); min-height: 44px; font-weight: 600; }
.btn-peligro { color: var(--mal); }

.terminado-hoy { text-align: center; padding: 36px 18px; background: var(--superficie); border-radius: 18px; box-shadow: var(--sombra); }
.terminado-hoy svg { width: 46px; height: 46px; color: var(--ok); stroke-width: 2.4; }
.terminado-hoy h2 { margin: 8px 0 4px; }
.terminado-hoy p { margin: 0; color: var(--tinta-2); }

.lista-tit { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin: 26px 2px 8px; }
.lista { list-style: none; margin: 0; padding: 0; background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--linea); overflow: hidden; }
.lista li + li { border-top: 1px solid var(--linea); }
.lista button {
  width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px;
  border: 0; background: none; text-align: left;
}
.lista button:active { background: var(--fondo); }
.lista .num { width: 28px; height: 28px; border-radius: 50%; background: var(--fondo); display: grid; place-items: center; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lista .t1 { font-weight: 600; display: block; overflow-wrap: anywhere; }
.lista .t2 { color: var(--tinta-2); font-size: .9rem; display: block; overflow-wrap: anywhere; }
.lista .der { text-align: right; font-size: .85rem; color: var(--tinta-2); white-space: nowrap; }
.lista .hecho .num { background: var(--ok-claro); color: var(--ok); }
.lista .fallo .num { background: var(--mal-claro); color: var(--mal); }
.lista .num svg { width: 16px; height: 16px; stroke-width: 2.6; }

/* ---------- carga de la camioneta ---------- */
.carga-resumen { background: var(--superficie); border-radius: 18px; box-shadow: var(--sombra); padding: 18px; margin-bottom: 12px; }
.carga-resumen .grande { font-size: 2.2rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.carga-resumen p { margin: 4px 0 0; color: var(--tinta-2); }
.carga-resumen.completa .grande { color: var(--ok); }
.carga-lista { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.carga-lista li { background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--linea); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.carga-lista .t1 { font-weight: 600; overflow-wrap: anywhere; }
.carga-lista .t2 { color: var(--tinta-2); font-size: .9rem; grid-column: 1; overflow-wrap: anywhere; }
.carga-lista .cuenta { grid-row: 1 / span 2; grid-column: 2; font-weight: 750; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.carga-lista .falta .cuenta { color: var(--aviso); }
.carga-lista .lleno .cuenta { color: var(--ok); }
.cajitas { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.cajitas i { width: 26px; height: 8px; border-radius: 4px; background: var(--linea); }
.cajitas i.si { background: var(--ok); }

/* ---------- pestañas abajo (al alcance del pulgar) ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--superficie); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom);
}
.tabs button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0 12px; font-size: .82rem; font-weight: 600; color: var(--tinta-2); }
.tabs button.act { color: var(--pri); }

/* ---------- mapa del recorrido ---------- */
.tab-mapa { position: fixed; top: calc(57px + env(safe-area-inset-top)); left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom));
  padding: 0; max-width: none; margin: 0; }
.mapa-f { position: absolute; inset: 0; z-index: 0; background: #e8eaed; }  /* su propia capa: Leaflet no tapa el escáner ni las hojas */
.leaflet-container { font: inherit; }
.leaflet-container svg { width: auto; height: auto; stroke: none; }  /* la regla de íconos no tiene que achicar la capa de las líneas */
.mapa-centrar { position: absolute; top: 12px; right: 12px; z-index: 500; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); display: grid; place-items: center; }
.mapa-resumen { position: absolute; top: 12px; left: 12px; right: 70px; z-index: 500; background: var(--superficie); border-radius: 12px;
  box-shadow: var(--sombra); padding: 9px 12px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.mapa-resumen b { font-size: 1rem; }
.mapa-tarjeta { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 600; background: var(--superficie); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 14px 16px 12px; animation: subir .22s cubic-bezier(.2, .8, .2, 1); }
.mapa-tarjeta .parada { display: block; margin-bottom: 2px; }
.mapa-tarjeta h3 { margin: 0; font-size: 1.05rem; color: var(--tinta-2); font-weight: 600; }
.mapa-tarjeta .dir { margin: 2px 0 4px; font-size: 1.2rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.mapa-tarjeta .datos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.mapa-tarjeta .fila-btn { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.mapa-tarjeta .fila-btn a, .mapa-tarjeta .fila-btn button { min-height: 48px; border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 650; font-size: .9rem; color: var(--tinta); text-decoration: none; }
.mapa-tarjeta .fila-btn .pri { background: var(--pri-fondo); border-color: var(--pri-fondo); color: #fff; }
.mapa-tarjeta .cerrar-t { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; background: none; color: var(--tinta-2); }
.mk-f { width: 32px; height: 32px; border-radius: 50%; background: var(--pri-fondo); color: #fff; border: 3px solid #fff; display: grid; place-items: center;
  font: 800 13px/1 system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.mk-f.siguiente { background: #c2410c; width: 38px; height: 38px; font-size: 15px; }
.mk-f.hecha { background: #fff; color: var(--ok); border-color: var(--ok); }
.mk-f.fallo { background: #fff; color: var(--mal); border-color: var(--mal); }
.mk-f.elegida { outline: 4px solid rgba(194, 65, 12, .45); }
.mk-yo { width: 20px; height: 20px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26, 115, 232, .25); }
.mapa-sin { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--tinta-2); z-index: 400; }

/* ---------- escáner ---------- */
.escaner { position: fixed; inset: 0; z-index: 1200;  /* arriba de las pestañas (1000): si no, tapan «Listo» */ background: #0b0c0e; color: #fff; display: flex; flex-direction: column; }
.esc-top { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.esc-top h2 { font-size: 1.1rem; margin: 0; }
.esc-cerrar { border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.esc-visor { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.esc-visor video { width: 100%; height: 100%; object-fit: cover; }
.esc-marco {
  position: absolute; left: 50%; top: 50%; width: min(64vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 22px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); outline: 3px solid rgba(255, 255, 255, .9);
}
.escaner.leyo .esc-marco { outline-color: #5ccf86; }
.escaner.error .esc-marco { outline-color: #ff7b6e; }
.esc-estado { min-height: 76px; padding: 14px 18px; font-size: 1.05rem; font-weight: 650; text-align: center; display: grid; place-items: center; }
.esc-estado.ok { background: #17763a; }
.esc-estado.mal { background: #b42318; }
.esc-manual { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: #16181c; }
.esc-manual label { display: block; font-size: .88rem; color: #b3b9c4; margin-bottom: 6px; }
.esc-fila { display: flex; gap: 8px; }
.esc-fila input {
  flex: 1; min-width: 0; height: 52px; border-radius: 12px; border: 1px solid #3a3f48; background: #0b0c0e; color: #fff;
  padding: 0 14px; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}

/* ---------- hoja inferior ---------- */
.hoja-fondo { position: fixed; inset: 0; z-index: 1100;  /* arriba de las pestañas (1000): si no, tapan «Confirmar» */ background: rgba(10, 11, 13, .5); display: flex; align-items: flex-end; }
.hoja {
  width: 100%; max-width: 640px; margin: 0 auto; background: var(--superficie); border-radius: 20px 20px 0 0;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); animation: subir .25s cubic-bezier(.2, .8, .2, 1);
  max-height: 92dvh; overflow-y: auto;  /* con el teclado abierto, los botones se alcanzan deslizando */
}
@keyframes subir { from { transform: translateY(30px); opacity: 0; } }
.hoja h2 { margin: 0 0 12px; font-size: 1.2rem; }
.motivos { display: grid; gap: 8px; margin-bottom: 12px; }
.motivos button { min-height: 52px; border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); text-align: left; padding: 0 16px; font-weight: 600; }
.motivos button[aria-pressed="true"] { border-color: var(--pri); background: var(--pri-claro); color: var(--pri-osc); }
.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; font-size: .9rem; color: var(--tinta-2); margin-bottom: 4px; }
.campo input { width: 100%; height: 52px; border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); padding: 0 14px; }
.hoja .acciones { grid-template-columns: 1fr 1fr; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== marca de color de la etiqueta (igual a la franja impresa en la caja) ===== */
.m0 { --m: #d92d20; --mt: #fff; } .m1 { --m: #1d5bd8; --mt: #fff; } .m2 { --m: #15803d; --mt: #fff; } .m3 { --m: #e5b000; --mt: #14161a; }
.m4 { --m: #7a3fe0; --mt: #fff; } .m5 { --m: #f06a0f; --mt: #fff; } .m6 { --m: #0ea5e9; --mt: #14161a; } .m7 { --m: #e0338a; --mt: #fff; }
.m8 { --m: #8a5a2b; --mt: #fff; } .m9 { --m: #1f2329; --mt: #fff; }
.marca { display: inline-block; padding: 1px 8px; border-radius: 9px; background: var(--m); color: var(--mt); font-size: .72rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.marca-barra { margin: -2px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--m, #1f2329); color: var(--mt, #fff); font-size: .9rem; }
.marca-barra b { letter-spacing: .12em; }
.lista .num[class*=" m"] { background: var(--m); color: var(--mt); }
.mk-f[class*=" m"] { background: var(--m); color: var(--mt); }
.mk-f.siguiente[class*=" m"] { box-shadow: 0 0 0 4px rgba(20, 22, 26, .55); }
.esc-estado.con-marca { border-left: 0; box-shadow: inset 0 -6px 0 var(--m); }

/* ===== vueltas: el fletero vuelve a la oficina a cargar ===== */
.sep-vuelta { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: 4px 0; border-radius: 12px; background: #fff3dc; color: #8a5300; font-weight: 700; font-size: .9rem; }
.sep-vuelta svg { width: 18px; height: 18px; }
.aviso-vuelta { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; padding: 10px 12px; border-radius: 12px; background: #fff3dc; color: #8a5300; font-size: .92rem; }
.aviso-vuelta svg { width: 20px; height: 20px; flex: none; }
.aviso-vuelta .btn { margin-left: auto; }
.carga-vuelta { margin: 0 0 8px; font-weight: 700; color: #8a5300; }
.carga-vuelta:empty { display: none; }

/* ---------- al día, avisos, varias paradas y vuelta a cargar ---------- */
.al-dia { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .8rem; color: var(--ok); font-weight: 600; }
.al-dia::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.al-dia.viejo { color: var(--mal); }
.avisos-banner { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radio);
  background: var(--pri-claro); color: var(--tinta); }
.avisos-banner p { margin: 2px 0 0; font-size: .88rem; color: var(--tinta-2); line-height: 1.35; }
.avisos-banner .btn { flex: none; }
.ir-varias { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 10px; border-radius: 12px;
  border: 1px dashed var(--linea); color: var(--pri); font-weight: 650; font-size: .9rem; text-decoration: none; }
.ir-varias svg { width: 18px; height: 18px; }
.aviso-vuelta { flex-direction: column; align-items: stretch; }
.aviso-vuelta .av-txt { display: flex; align-items: center; gap: 8px; }
.aviso-vuelta .av-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.aviso-vuelta .av-btns a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 10px; background: #fff; color: #8a5300;
  font-weight: 700; text-decoration: none; min-height: 40px; }
.aviso-vuelta .av-btns svg { width: 18px; height: 18px; }
.aviso-vuelta .av-btns .btn { margin-left: auto; }
.sep-vuelta a { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #8a5300; }

/* ---------- mapa: oficina, flechas de sentido y leyenda ---------- */
.mk-f.base { background: #14161a; color: #fff; border-radius: 10px; }
.fl { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #1450d8;
  margin: 1px 1px; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.fl.fl-sig { border-bottom-color: #c2410c; }
.mapa-resumen .ley { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; font-size: .78rem; color: var(--tinta-2); }
.mapa-resumen .ley i { display: inline-block; width: 18px; height: 0; border-top: 4px solid; border-radius: 2px; }
.mapa-resumen .ley .l-sig { border-color: #c2410c; } .mapa-resumen .ley .l-resto { border-color: #1450d8; }
.mapa-resumen .ley .l-ofi { border-top-style: dotted; border-color: #8a5300; } .mapa-resumen .ley .l-hecho { border-top-style: dotted; border-color: #8a8f98; }
.mapa-resumen small { display: block; }