/* ==========================================================================
   MOVAI-X · Programa de escritorio — el mapa es la estrella
   ========================================================================== */

:root {
  /* ── Sistema visual MOVAI-X ─────────────────────────────────────────────
     Negro y blanco mandan. El azul SOLO marca lo vivo: IA, navegación,
     ubicación y estados activos. Cambiar estos tokens migra toda la app,
     sin tocar una linea de logica. */
  --bg: #000000;
  --surface: #05070A;
  --surface-2: #090C11;
  --card: rgba(9, 12, 17, 0.88);
  --teal: #8BC7FF;                        /* acento tecnológico */
  --teal-dim: rgba(139, 199, 255, 0.13);
  --glow: rgba(120, 190, 255, 0.30);
  --green: #2dff88;
  --green-dim: rgba(45, 255, 136, 0.13);
  --red: #ff3b5c;
  --red-dim: rgba(255, 59, 92, 0.15);
  --amber: #ffb020;
  --text: #ffffff;
  --text-2: #d6dae0;
  --muted: #a7adb5;
  --faint: #6d757e;
  --border: rgba(255, 255, 255, 0.15);
  --border-strong: rgba(255, 255, 255, 0.28);
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --display: "Space Grotesk", "Inter", "Segoe UI", sans-serif;
  --mono: "Cascadia Code", Consolas, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: var(--sans); background: var(--bg); color: var(--text); overflow: hidden;
  /* Bloquea el "rebote"/scroll de la página y el reajuste de tamaño de texto:
     el mapa maneja sus propios gestos; sin esto, al pinchar el mapa se movía
     TODA la página y la app se rompía. El zoom del mapa lo hace MapLibre. */
  overscroll-behavior: none;
  /* OJO: `manipulation` mata el doble-tap pero NO el pellizco, y Chrome/Safari
     móviles IGNORAN `user-scalable=no`. `pan-x pan-y` sí bloquea el zoom de la
     PÁGINA dejando pasar el desplazamiento. El mapa se exceptúa más abajo. */
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* El contenedor del mapa maneja pan/pinch por su cuenta (MapLibre) */
#mapa, .maplibregl-canvas { touch-action: none; }

/* 100dvh = altura REAL visible del navegador. Con 100vh, en iPhone (Safari/
   Brave) la barra inferior se cuenta como espacio, y TODO lo pegado abajo (SOS,
   menú, botones flotantes) quedaba por debajo, fuera de vista. 100dvh lo ancla
   a lo que de verdad se ve. (height:100vh queda de respaldo para navegadores
   viejos que no conocen dvh.) */
.app { display: flex; position: relative; height: 100vh; height: 100dvh; }
/* iOS viejo (Safari < 15.4) no conoce dvh: ahí 100vh incluye la barra de Safari
   y lo pegado abajo queda tapado. En iOS, html/body (100%) miden el área visible
   MÍNIMA, así que 100% es el respaldo correcto (mejor que -webkit-fill-available,
   que en Chrome se porta distinto). */
@supports not (height: 100dvh) {
  .app { height: 100%; }
}

/* ==========================================================================
   Barra lateral
   ========================================================================== */

.rail {
  width: 86px; flex: none; z-index: 1000;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 18px; gap: 10px;
  background: #05070A;
  border-right: 1px solid var(--border);
}
.rail-logo { width: 46px; height: 46px; margin-bottom: 8px; }
.rail-logo svg { width: 100%; height: 100%; }

.rail-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rail-btn {
  width: 68px; padding: 10px 0 8px; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--faint); border-radius: 14px;
  font-family: var(--sans); transition: all 0.15s;
}
.rail-btn:hover { color: var(--text-2); background: rgba(148, 163, 184, 0.06); }
.rail-btn.active { color: var(--teal); background: var(--teal-dim); }
.rail-btn svg { width: 23px; height: 23px; fill: currentColor; }
.rail-btn span { font-size: 10.5px; font-weight: 600; }

.rail-agent .rail-agent-ring {
  width: 52px; height: 52px; border-radius: 50%;
  background: #0b161b; border: 1.5px solid rgba(139, 199, 255, 0.4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(139, 199, 255, 0.25);
  transition: all 0.2s;
}
.rail-agent.active .rail-agent-ring,
.rail-agent:hover .rail-agent-ring {
  border-color: var(--teal);
  box-shadow: 0 0 26px rgba(139, 199, 255, 0.55);
}
.rail-agent .rail-agent-ring svg { width: 40px; height: 40px; }

.rail-sos {
  width: 62px; height: 62px; border-radius: 50%; cursor: pointer;
  background: rgba(255,59,92,.14);
  border: 2px solid rgba(255, 59, 92, 0.65);
  color: #ff6b85; font-size: 15px; font-weight: 800; letter-spacing: 2px;
  font-family: var(--sans);
  box-shadow: 0 0 22px rgba(255, 59, 92, 0.35);
  animation: sos-idle 2.6s ease-in-out infinite;
  transition: transform 0.12s;
}
.rail-sos:hover { transform: scale(1.06); }
@keyframes sos-idle { 50% { box-shadow: 0 0 34px rgba(255, 59, 92, 0.55); } }

/* ==========================================================================
   Mapa
   ========================================================================== */

.main { position: relative; flex: 1; }
#mapa { position: absolute; inset: 0; background: #0a0f1a; }

/* Controles MapLibre en tema MOVAI-X */
.maplibregl-ctrl-group {
  background: var(--card) !important;
  border: 1px solid var(--border-strong);
  border-radius: 12px !important; overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45) !important;
}
.maplibregl-ctrl-group button { background: transparent !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--border) !important; }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(0.85) hue-rotate(120deg); }
.maplibregl-ctrl-attrib {
  background: rgba(6, 10, 19, 0.75) !important; color: var(--faint) !important;
  font-size: 9.5px !important;
}
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }

/* Popup de zona */
.popup-movaix .maplibregl-popup-content {
  background: var(--card); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: 12px; padding: 10px 14px;
  font-family: var(--sans); font-size: 12.5px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
}
.popup-movaix .maplibregl-popup-content b { display: block; font-size: 13.5px; }
.popup-movaix .maplibregl-popup-content span { color: var(--muted); font-size: 11.5px; }
.popup-movaix .maplibregl-popup-tip { border-top-color: var(--border-strong) !important; }

/* Marcador del usuario (robot) */
.marker-user { filter: drop-shadow(0 0 10px rgba(139, 199, 255, 0.7)); }
.marker-user .mu {
  position: relative; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.marker-user .mu svg { width: 52px; height: 52px; }
.marker-user .mu::before, .marker-user .mu::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--teal); animation: mring 2.4s ease-out infinite;
}
.marker-user .mu::after { animation-delay: 1.2s; }
.marker-user.sos .mu::before, .marker-user.sos .mu::after { border-color: var(--red); }
.marker-user.sos { filter: drop-shadow(0 0 12px rgba(255, 59, 92, 0.8)); }
@keyframes mring {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Marcador de destino */
.marker-dest { filter: drop-shadow(0 0 8px rgba(255, 176, 32, 0.7)); }
.marker-dest .md {
  width: 34px; height: 34px; border-radius: 50% 50% 50% 0;
  background: var(--amber); transform: rotate(-45deg);
  border: 3px solid #000000;
  display: flex; align-items: center; justify-content: center;
}
.marker-dest .md i {
  width: 10px; height: 10px; border-radius: 50%; background: #000000;
}
/* Marcador de parada numerado (rutas con varias paradas) */
.marker-dest .md-num {
  color: #000000; font-family: var(--sans); font-weight: 800; font-size: 15px;
  transform: rotate(45deg); /* endereza el número dentro del pin rotado */
}
/* Segundo botón (gris) en los popups de decisión */
.pop-add2 {
  display: block; width: 100%; margin-top: 6px; padding: 8px; cursor: pointer;
  background: rgba(148,163,184,0.12); border: 1px solid var(--border-strong);
  border-radius: 999px; color: var(--text); font-family: var(--sans);
  font-size: 12.5px; font-weight: 700;
}

/* ==========================================================================
   Navegación giro a giro
   ========================================================================== */

.check-vivo {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  z-index: 1004; width: min(480px, calc(100vw - 40px));
  display: flex; align-items: center; gap: 13px;
  background: var(--card); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 176, 32, 0.65); border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 176, 32, 0.2);
  animation: blink 1.4s infinite;
}
.check-vivo .robot { width: 44px; height: 44px; flex: none; }
.check-vivo b { display: block; font-size: 15px; }
.check-vivo span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.check-vivo em { font-style: normal; color: var(--amber); font-weight: 800; }
/* Variante roja: alerta SOS de un familiar del círculo */
.check-vivo.alerta-circulo { border-color: rgba(255, 59, 92, 0.55); }
.check-vivo.alerta-circulo b { color: var(--red); }
.check-vivo button {
  flex: none; padding: 11px 16px; cursor: pointer;
  background: #2DFF88;
  border: none; border-radius: 999px; color: #04140b;
  font-family: var(--sans); font-size: 13px; font-weight: 800;
}

.nav-banner {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  z-index: 1001; min-width: 330px; max-width: min(560px, calc(100vw - 420px));
  display: flex; align-items: center; gap: 14px;
  background: var(--card); backdrop-filter: blur(12px);
  border: 1px solid rgba(139, 199, 255, 0.45); border-radius: 20px;
  padding: 12px 14px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 199, 255, 0.12);
}
.nav-banner .nb-icon {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  background: var(--teal-dim); border: 1px solid rgba(139, 199, 255, 0.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s ease;
}
.nav-banner .nb-icon svg { width: 30px; height: 30px; fill: var(--teal); }
.nav-banner .nb-main { flex: 1; min-width: 0; }
.nav-banner .nb-main b {
  display: block; font-family: var(--display); font-size: 21px; letter-spacing: 0.3px;
}
.nav-banner .nb-main span {
  display: block; font-size: 13.5px; color: var(--text-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-banner .nb-voz {
  width: 38px; height: 38px; flex: none; border-radius: 50%; cursor: pointer;
  background: rgba(148, 163, 184, 0.08); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.nav-banner .nb-voz svg { width: 17px; height: 17px; fill: var(--teal); }

.nav-luego {
  position: absolute; top: 168px; left: 50%; transform: translateX(-50%);
  z-index: 1000; font-size: 12px; color: var(--muted);
  background: rgba(6, 10, 19, 0.85); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 999px; max-width: min(480px, calc(100vw - 440px));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-luego span { color: var(--text-2); }

/* Opciones del agente (drawer) */
.ag-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ag-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 6px 11px; cursor: pointer;
  background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border);
  border-radius: 14px; color: var(--text-2); font-family: var(--sans);
  font-size: 11.5px; font-weight: 600; transition: all 0.15s;
}
.ag-grid button:hover { border-color: rgba(139, 199, 255, 0.5); color: var(--text); }
.ag-grid button svg { width: 20px; height: 20px; fill: var(--teal); }
.ag-grid button.rojo svg { fill: var(--red); }
.ag-grid button.rojo:hover { border-color: rgba(255, 59, 92, 0.5); }

/* Badge de estado de la IA */
.ia-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--muted); border: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.08);
  padding: 5px 11px; border-radius: 999px;
}
.ia-badge.ok { color: var(--green); border-color: rgba(45, 255, 136, 0.4);
  background: rgba(45, 255, 136, 0.08); }
.ia-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: blink 1.5s infinite; }

/* Chat del agente */
.chat-log { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cb {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45;
  max-width: 90%; animation: cb-in 0.22s ease both;
}
@keyframes cb-in { from { opacity: 0; transform: translateY(6px); } }
.cb-user { align-self: flex-end; background: var(--teal-dim);
  border: 1px solid rgba(139, 199, 255, 0.3); }
.cb-bot { align-self: flex-start; background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border); }
.cb .cb-robot { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.cb-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.cb-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  animation: dots 1.2s infinite; }
.cb-dots i:nth-child(2) { animation-delay: 0.2s; }
.cb-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dots { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); } }
/* Botones Sí/No de confirmación del agente en el chat */
.cb-acciones { display: flex; gap: 8px; margin-top: 9px; }
.cb-acciones button {
  flex: 1; padding: 8px 10px; cursor: pointer; border-radius: 999px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; border: none;
}
.cb-acciones .cb-si { background: #ffffff; color: #000000; }
.cb-acciones .cb-no { background: transparent; border: 1px solid var(--border-strong);
  color: var(--muted); }

.chat-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chat-sug button {
  padding: 8px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
  background: rgba(139, 199, 255, 0.07); border: 1px solid rgba(139, 199, 255, 0.3);
  border-radius: 999px; color: var(--text-2); font-family: var(--sans);
  transition: all 0.13s;
}
.chat-sug button:hover { background: var(--teal-dim); color: var(--text); }

.chat-dock-drawer { display: flex; gap: 8px; }
.chat-dock-drawer input {
  flex: 1; height: 46px; padding: 0 16px;
  background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text); font-size: 14px; outline: none;
  font-family: var(--sans);
}
.chat-dock-drawer input:focus { border-color: rgba(139, 199, 255, 0.55); }
.chat-dock-drawer button {
  width: 46px; height: 46px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
.chat-dock-drawer button svg { width: 18px; height: 18px; fill: #04121a; }
/* Celular: el panel del agente abre con el orbe arriba y la caja para escribir
   quedaba DEBAJO del borde de la pantalla (en 375×812 arrancaba en y=786; en un
   iPhone con las barras de Safari ni se asomaba). Pegada al borde de abajo del
   panel, siempre se ve y se puede escribir sin buscarla. */
@media (max-width: 1024px) {
  .chat-dock-drawer {
    position: sticky; bottom: 0; z-index: 3;
    padding: 8px 0; background: rgba(7, 11, 19, 0.97);
  }
  html[data-tema="dia"] .chat-dock-drawer { background: #F4F7FB; }
}

/* ==========================================================================
   Barra superior
   ========================================================================== */

.topbar {
  position: absolute; top: 16px; left: 16px; right: 16px; z-index: 1001;
  display: flex; align-items: center; gap: 12px; pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.search {
  position: relative; flex: 0 1 520px;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong); border-radius: 999px;
  height: 52px; padding: 0 6px 0 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.search:focus-within { border-color: rgba(139, 199, 255, 0.55); }
.search .s-icon { width: 18px; height: 18px; fill: var(--faint); flex: none; }
/* La lupa era solo un dibujo: al tocarla no pasaba nada. Ahora abre la búsqueda. */
.s-icon-btn {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; margin-left: -4px; padding: 0;
  background: none; border: none; cursor: pointer; border-radius: 50%;
}
.s-icon-btn:active { background: rgba(148, 163, 184, 0.14); }
.search input {
  flex: 1; border: none; background: none; outline: none;
  color: var(--text); font-size: 14.5px; font-family: var(--sans);
}
.search input::placeholder { color: var(--faint); }
.search .s-go {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(139, 199, 255, 0.35);
}
.search .s-go svg { width: 17px; height: 17px; fill: #04121a; }
.search .s-clear {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(148, 163, 184, 0.14); color: var(--muted); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.search .s-clear:hover { color: var(--text); background: rgba(148, 163, 184, 0.24); }
.search .s-clear svg { width: 14px; height: 14px; fill: currentColor; }

.s-sugerencias {
  position: absolute; top: 58px; left: 0; right: 0; display: none;
  background: var(--card); backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong); border-radius: 16px;
  overflow: hidden; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
  max-height: 62vh; overflow-y: auto; scrollbar-width: thin;
}
.s-sugerencias.abierta { display: block; }

/* Menú de categorías (al tocar el buscador) */
.cat-menu-head {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); padding: 14px 16px 8px;
}
.cat-menu-head #cat-zona { color: var(--teal); font-weight: 700; }

.rec-list { padding: 0 8px 6px; }
.rec-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  cursor: pointer; border-radius: 11px; font-size: 14px; color: var(--text-2);
}
.rec-item:hover { background: var(--teal-dim); color: var(--text); }
.rec-item .rec-ico { font-size: 14px; opacity: 0.8; }
.rec-item .rec-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-menu {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px 14px;
}
.cat-menu button {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 13px 6px 11px; cursor: pointer;
  background: rgba(148, 163, 184, 0.06); border: 1px solid var(--border);
  border-radius: 13px; color: var(--text-2);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-align: center;
  transition: all 0.13s;
}
.cat-menu button:hover {
  background: var(--teal-dim); border-color: rgba(139, 199, 255, 0.5); color: var(--text);
  transform: translateY(-1px);
}
.cat-menu button i { font-style: normal; font-size: 22px; line-height: 1; }
.sug {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; cursor: pointer; font-size: 14px; color: var(--text-2);
}
.sug:hover { background: var(--teal-dim); color: var(--text); }
.sug svg { width: 15px; height: 15px; fill: var(--teal); flex: none; }
.sug .sug-emoji { flex: none; font-size: 15px; width: 20px; text-align: center; }
.sug .sug-main { flex: none; font-weight: 600; max-width: 55%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sug small {
  margin-left: auto; color: var(--faint); font-size: 11px; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%;
}
/* Fila "Agregar un lugar" — guardar pines propios */
.sug-add { border-top: 1px solid var(--border, rgba(139,199,255,.15)); color: var(--teal); }
.sug-add .sug-main { color: var(--teal); }
.sug-add:hover { background: var(--teal-dim); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Chips de categorías (inspirado en Google Maps, a nuestro estilo) */
.cat-chips {
  position: absolute; top: 78px; left: 16px; z-index: 1000;
  display: flex; gap: 8px; max-width: min(640px, calc(100vw - 380px));
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips button {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; cursor: pointer; white-space: nowrap;
  background: var(--card); backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--text-2); font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  transition: all 0.15s;
}
.cat-chips button:hover { border-color: var(--teal); color: var(--text); }

/* Botón "Ir aquí" dentro de los popups */
.pop-ir {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 9px; padding: 8px; cursor: pointer;
  background: #ffffff;
  border: none; border-radius: 999px;
  color: #000000; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
}
.pop-del {
  display: block; width: 100%; margin-top: 6px; padding: 6px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,59,92,.5); border-radius: 999px;
  color: #ff6b85; font-family: var(--sans); font-size: 11.5px; font-weight: 600;
}

.user-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--card); backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 6px 16px 6px 6px; height: 46px;
  font-size: 14px; font-weight: 600; cursor: default;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-dim); border: 1px solid rgba(139, 199, 255, 0.4);
  color: var(--teal); font-weight: 700; font-size: 13px;
}
.avatar.green { background: var(--green-dim); border-color: rgba(45,255,136,0.4); color: var(--green); }
.avatar.gray { background: rgba(255,255,255,0.06); border-color: var(--border-strong); color: var(--muted); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  border: 1px solid; backdrop-filter: blur(10px);
}
.pill.green { color: var(--green); border-color: rgba(45,255,136,0.4); background: rgba(6,20,12,0.8); }
.pill.red { color: var(--red); border-color: rgba(255,59,92,0.5); background: rgba(26,7,11,0.85); }
.pill .pd { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* ==========================================================================
   Tarjetas flotantes
   ========================================================================== */

.cards {
  position: absolute; top: 84px; right: 16px; z-index: 1000;
  width: 330px; display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100% - 130px); overflow-y: auto;
  scrollbar-width: none;
}
.cards::-webkit-scrollbar { display: none; }

/* Botón para ocultar/mostrar el panel del agente (no tapar el mapa) */
.cards-handle {
  align-self: flex-end; flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  backdrop-filter: blur(12px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  font-size: 12px; font-weight: 600; -webkit-tap-highlight-color: transparent;
}
.cards-handle:active { color: var(--text); }
.cards-handle .ch-ico { width: 16px; height: 16px; fill: currentColor; transition: transform 0.25s; }
.ch-txt { line-height: 1; }
/* Panel oculto: solo queda el botón (ahora dice "Agente"); el mapa se ve libre */
body.panel-oculto #cards > section.card { display: none; }
body.panel-oculto .cards { pointer-events: none; }        /* deja pasar toques al mapa… */
body.panel-oculto .cards-handle { pointer-events: auto; } /* …excepto el propio botón */
body.panel-oculto .cards-handle .ch-ico { transform: rotate(180deg); }

.card {
  position: relative;
  background: var(--card); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 16px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1.5px;
  background: var(--border-strong); opacity: 0.5; border-radius: 2px;
}
.card.accent-teal::before { background: var(--teal); opacity: 0.9; }
.card.accent-red::before { background: var(--red); opacity: 0.9; }

.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.card-head h3 { font-family: var(--display); font-size: 15px; font-weight: 700; }
.mini-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; border: 1px solid;
}
.mini-tag.red { color: var(--red); border-color: rgba(255,59,92,0.4); background: var(--red-dim); }

.x-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.x-btn:hover { color: var(--text); }

/* Salir de la búsqueda (aparece solo con el panel abierto) */
.s-salir {
  display: none; width: 40px; height: 40px; flex: none; border: none;
  border-radius: 50%; cursor: pointer; align-items: center; justify-content: center;
  background: rgba(148, 163, 184, 0.14); color: var(--text); margin-right: 2px;
}
.s-salir svg { width: 16px; height: 16px; fill: currentColor; }
.x-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* Agente */
.agent-row { display: flex; align-items: center; gap: 12px; }
.robot-wrap { position: relative; width: 62px; height: 62px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.robot-wrap .robot { width: 62px; height: 62px; }
.robot-halo {
  position: absolute; inset: 4%; border-radius: 50%;
  background: rgba(139, 199, 255, 0.16); animation: halo 3.2s ease-in-out infinite;
}
@keyframes halo { 50% { transform: scale(1.12); opacity: 1; } }
.agent-info .a-title { font-family: var(--display); font-size: 15.5px; font-weight: 700; margin-bottom: 7px; }

.waveform { display: flex; align-items: center; gap: 3px; height: 26px; margin-top: 12px; }
.waveform i {
  flex: 1; border-radius: 2px; background: var(--teal); min-height: 3px;
  animation: wave 0.8s ease-in-out infinite alternate;
}
@keyframes wave { from { height: 12%; opacity: 0.45; } to { height: 95%; opacity: 1; } }

.agent-status { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 4px; }
.as-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; color: var(--text-2); }
.as-row svg { width: 16px; height: 16px; fill: var(--green); flex: none; }
.as-row b { margin-left: auto; font-size: 13px; }
.as-row b.amber { color: var(--amber); }
.as-row b.green { color: var(--green); }

/* Viaje */
.viaje-dest { font-size: 14px; color: var(--text-2); margin-bottom: 12px;
  display: flex; align-items: center; gap: 7px; }
.viaje-dest svg { width: 14px; height: 14px; fill: var(--amber); flex: none; }

.modos { display: flex; gap: 6px; margin-bottom: 12px; }
.modos .chip { flex: 1; text-align: center; padding: 9px 4px; font-size: 12px; }

.v-demo {
  display: block; width: 100%; margin-top: 10px; padding: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--faint); font-size: 11.5px; font-family: var(--sans);
}
.v-demo:hover { color: var(--teal); }
.stats { display: flex; border: 1px solid var(--border); border-radius: 14px; padding: 10px 0; }
.stat { flex: 1; text-align: center; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat b { font-family: var(--mono); font-size: 16px; display: block; }
.stat b.green { color: var(--green); }
.stat b.amber { color: var(--amber); }
.stat b.red { color: var(--red); }
.stat span { font-size: 10px; color: var(--muted); }

.v-followers { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--text-2); }
.v-followers .avatar { width: 26px; height: 26px; font-size: 10px; border: 2px solid #0a101c; }
.v-followers .avatar + .avatar { margin-left: -10px; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px; margin-top: 12px;
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 14.5px; font-weight: 700;
  transition: transform 0.12s, filter 0.12s;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 17px; height: 17px; fill: currentColor; }
.btn-primary { background: #ffffff; color: #000000;
  box-shadow: 0 6px 22px rgba(139, 199, 255, 0.3); }
.btn-safe { background: #2DFF88; color: #04140b;
  box-shadow: 0 6px 22px rgba(45, 255, 136, 0.25); }
.btn-ghost-red { background: none; border: 1.5px solid rgba(255, 59, 92, 0.55); color: var(--red); }

/* Zonas */
.zonas { display: flex; flex-direction: column; }
.zona-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; cursor: pointer; border-radius: 14px; font-size: 13.5px;
}
.zona-row:hover { background: rgba(148, 163, 184, 0.07); }
.zona-row .zd { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.zona-row .zn { flex: 1; color: var(--text-2); }
.zona-row .zl { font-size: 12px; font-weight: 700; }

/* ==========================================================================
   Drawer (paneles: viajes, agente, contactos, perfil)
   ========================================================================== */

.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 390px; z-index: 1002;
  background: rgba(7, 11, 19, 0.97); backdrop-filter: blur(14px);
  border-left: 1px solid var(--border-strong);
  display: flex; flex-direction: column;
  animation: drawer-in 0.25s ease both;
  box-shadow: -30px 0 70px rgba(0, 0, 0, 0.5);
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 14px;
}
.drawer-head h2 { font-family: var(--display); font-size: 20px; font-weight: 700; }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 22px 26px; scrollbar-width: thin; }

.d-section {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px; margin: 20px 0 10px;
}
.d-section::before { content: ""; width: 3px; height: 13px; background: var(--teal); border-radius: 2px; }

.d-card {
  background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.d-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.d-row + .d-row { border-top: 1px solid var(--border); }
.d-row .dr-main { flex: 1; min-width: 0; }
.d-row .dr-t { font-size: 14px; font-weight: 600; }
.d-row .dr-s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.d-row .dr-s.mono { font-family: var(--mono); font-size: 11px; }

.mini-icon {
  width: 32px; height: 32px; border-radius: 14px; flex: none;
  background: var(--teal-dim); display: flex; align-items: center; justify-content: center;
}
.mini-icon svg { width: 16px; height: 16px; fill: var(--teal); }
.mini-icon.green { background: var(--green-dim); }
.mini-icon.green svg { fill: var(--green); }

.risk-tag { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.risk-tag.low { color: var(--green); border-color: rgba(45,255,136,0.4); }
.risk-tag.medium { color: var(--amber); border-color: rgba(255,176,32,0.4); }
.risk-tag.high { color: var(--red); border-color: rgba(255,59,92,0.4); }

.toggle {
  width: 44px; height: 25px; border-radius: 999px; position: relative;
  background: rgba(148, 163, 184, 0.2); cursor: pointer; flex: none;
  border: none; transition: background 0.2s;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--faint); transition: all 0.2s;
}
.toggle.on { background: rgba(139, 199, 255, 0.3); }
.toggle.on::after { left: 22px; background: var(--teal); box-shadow: 0 0 10px rgba(139,199,255,0.5); }

.trash { background: none; border: none; cursor: pointer; padding: 6px; }
.trash svg { width: 16px; height: 16px; fill: var(--faint); }
.trash:hover svg { fill: var(--red); }

.field { margin-bottom: 14px; }
.field label {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.field input {
  width: 100%; height: 48px; padding: 0 14px;
  background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); font-size: 14.5px; outline: none;
  font-family: var(--sans);
}
.field input:focus { border-color: rgba(139, 199, 255, 0.55); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(148, 163, 184, 0.05);
  color: var(--text-2); font-size: 12.5px; font-weight: 600; font-family: var(--sans);
}
.chip.selected { border-color: var(--teal); background: rgba(139, 199, 255, 0.13); color: var(--teal); }

/* Elegir entre la ruta más rápida y la más segura (evita zonas de riesgo) */
.ruta-pref { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 2px; }
.ruta-pref .chip[data-pref="segura"].selected {
  border-color: var(--green); background: rgba(45, 255, 136, 0.14); color: var(--green);
}
.ruta-pref-nota {
  flex-basis: 100%; font-size: 12px; color: var(--muted); line-height: 1.35;
}

.stats-mini { display: flex; gap: 8px; }
.stats-mini .sm {
  flex: 1; text-align: center; padding: 12px 6px;
  background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border); border-radius: 14px;
}
.stats-mini .sm b { font-family: var(--mono); font-size: 17px; color: var(--teal); display: block; }
.stats-mini .sm span { font-size: 10.5px; color: var(--muted); }

.vj-item:hover { background: rgba(148, 163, 184, 0.06); }
.vj-vacio { text-align: center; padding: 24px 16px; }
.vj-vacio p { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 12px 0 18px; }

/* ==========================================================================
   SOS
   ========================================================================== */

.sos-overlay {
  position: absolute; inset: 0; z-index: 1005;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(30, 5, 10, 0.55), rgba(20, 3, 7, 0.88)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 59, 92, 0.015) 3px 4px);
  backdrop-filter: blur(3px);
  animation: sos-fade 0.3s ease both;
}
@keyframes sos-fade { from { opacity: 0; } }

.sos-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(148, 163, 184, 0.12); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.sos-x:hover { color: var(--text); border-color: var(--border-strong); }
.sos-x svg { width: 16px; height: 16px; fill: currentColor; }

.sos-llamar {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 12px; height: 54px; text-decoration: none;
  background: #2DFF88;
  border-radius: 999px; color: #04140b;
  font-family: var(--sans); font-size: 16px; font-weight: 800;
  box-shadow: 0 6px 26px rgba(45, 255, 136, 0.35);
  animation: llamar-pulso 1.6s ease-in-out infinite;
}
@keyframes llamar-pulso {
  50% { box-shadow: 0 6px 40px rgba(45, 255, 136, 0.6); }
}

.sos-panel {
  position: relative;
  width: 470px; max-width: calc(100vw - 40px);
  max-height: calc(100dvh - 40px); overflow-y: auto; scrollbar-width: none;
  background: rgba(12, 6, 10, 0.95);
  border: 1px solid rgba(255, 59, 92, 0.4); border-radius: 26px;
  padding: 28px; text-align: center;
  box-shadow: 0 0 80px rgba(255, 59, 92, 0.25);
}
.sos-disc {
  width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 50%;
  background: rgba(255,59,92,.14);
  border: 2px solid rgba(255, 59, 92, 0.6);
  box-shadow: 0 0 44px rgba(255, 59, 92, 0.45), inset 0 0 26px rgba(255, 59, 92, 0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: sos-throb 1.3s ease-in-out infinite;
}
@keyframes sos-throb {
  50% { box-shadow: 0 0 74px rgba(255, 59, 92, 0.7), inset 0 0 34px rgba(255, 59, 92, 0.4); }
}
.sos-disc .sd-count { font-size: 50px; font-weight: 800; color: var(--red); }
.sos-disc .sd-sos { font-size: 28px; font-weight: 800; letter-spacing: 4px; }
.sos-disc .sd-sub { font-size: 10px; color: #ff8ca0; margin-top: 2px; }
.sos-panel h2 { font-family: var(--display); font-size: 21px; letter-spacing: 1px; }
.sos-panel p { color: var(--muted); font-size: 13px; line-height: 1.55; margin-top: 8px; }

.sos-etq {
  margin-top: 18px; text-align: left;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 2.4px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.sos-etq::before { content: ""; width: 3px; height: 12px; background: var(--red); border-radius: 2px; }

.sos-tipos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;
}
.sos-tipos button {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 13px 15px; cursor: pointer;
  background: rgba(255, 59, 92, 0.07); border: 1px solid rgba(255, 59, 92, 0.35);
  border-radius: 15px; color: var(--text-2);
  font-family: var(--sans); transition: all 0.13s;
}
.sos-tipos button:hover {
  background: rgba(255, 59, 92, 0.18); color: var(--text);
  border-color: rgba(255, 59, 92, 0.7);
}
.sos-tipos button i { font-style: normal; font-size: 25px; flex: none; }
.sos-tipos button b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); }
.sos-tipos button span { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.sos-tipos button.elegido {
  background: var(--red); border-color: var(--red);
  box-shadow: 0 0 22px rgba(255, 59, 92, 0.55);
}
.sos-tipos button.elegido b, .sos-tipos button.elegido span { color: #fff; }

.sos-ubi {
  display: flex; align-items: center; gap: 11px; text-align: left;
  margin-top: 12px; padding: 12px 14px;
  background: rgba(139, 199, 255, 0.06); border: 1px solid rgba(139, 199, 255, 0.3);
  border-radius: 14px;
}
.sos-ubi i { font-style: normal; font-size: 18px; flex: none; }
.sos-ubi b {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sos-ubi span {
  display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); margin-top: 2px;
}
.sos-ubi em {
  font-style: normal; flex: none; font-family: var(--mono);
  font-size: 10px; font-weight: 700; color: var(--teal);
  border: 1px solid rgba(139, 199, 255, 0.4); border-radius: 999px;
  padding: 4px 9px;
}
.sos-ubi em.aprox { color: var(--amber); border-color: rgba(255, 176, 32, 0.4); }

.sos-otros {
  margin-top: 10px; font-size: 11px; color: var(--faint); text-align: center;
}
.sos-otros a {
  color: var(--muted); text-decoration: none; font-weight: 700;
  font-family: var(--mono); font-size: 10.5px;
}
.sos-otros a:hover { color: var(--teal); }

.sos-avisar { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sos-avisar .av-head {
  font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 2px;
}
.sos-avisar .av-head.ok { color: var(--green); font-weight: 700; }
.sos-wa {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 11px 14px; border-radius: 13px;
  background: rgba(37, 211, 102, 0.1); border: 1px solid rgba(37, 211, 102, 0.4);
  color: var(--text); transition: all 0.13s;
}
.sos-wa:hover { background: rgba(37, 211, 102, 0.2); }
.sos-wa .wa-ico { font-size: 20px; }
.sos-wa b { font-size: 13.5px; font-weight: 700; }
.sos-wa span { display: block; font-size: 11px; color: var(--muted); }
.sos-wa .wa-cta { margin-left: auto; font-size: 12px; font-weight: 700; color: #25d366; }

.sos-lista { margin-top: 16px; text-align: left; display: flex; flex-direction: column; gap: 7px; }
.sos-item {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  border-radius: 13px; padding: 10px 12px;
}
.sos-item .si-main { flex: 1; }
.sos-item .si-n { font-size: 13.5px; font-weight: 600; }
.sos-item .si-p { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.sos-item svg { width: 19px; height: 19px; flex: none; }
.sos-item .ok { fill: var(--green); }
.sos-item .pend { fill: var(--faint); }

.sos-acciones { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.sos-ahora {
  background: none; border: none; color: var(--red); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 8px; font-family: var(--sans);
}

/* ==========================================================================
   Extras
   ========================================================================== */

.btn-ubicacion {
  position: absolute; right: 12px; bottom: 118px; z-index: 1000;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--card); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s;
}
.btn-ubicacion:hover { border-color: var(--teal); }
.btn-ubicacion svg { width: 19px; height: 19px; fill: var(--teal); }

.btn-recentrar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 200px;
  z-index: 1003; display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; cursor: pointer;
  background: var(--card); backdrop-filter: blur(10px);
  border: 1px solid rgba(139, 199, 255, 0.5); border-radius: 999px;
  color: var(--teal); font-family: var(--sans); font-size: 13.5px; font-weight: 700;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}
.btn-recentrar svg { width: 17px; height: 17px; fill: var(--teal); }

.btn-trafico {
  position: absolute; right: 12px; bottom: 262px; z-index: 1000;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--card); border: 1px solid var(--border-strong);
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); transition: all 0.15s;
  filter: grayscale(1); opacity: 0.75;
}
.btn-trafico.activo { filter: none; opacity: 1; border-color: rgba(255, 176, 32, 0.6); }
.btn-trafico:hover { border-color: var(--amber); }

.marker-trafico {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  background: var(--card); border: 1.5px solid rgba(255, 176, 32, 0.7);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.marker-trafico.choque { border-color: var(--red);
  box-shadow: 0 0 14px rgba(255, 59, 92, 0.45); }
.marker-trafico.cierre { border-color: var(--red); }

.gps-chip {
  position: absolute; right: 12px; bottom: 224px; z-index: 1000;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--green); background: var(--card);
  border: 1px solid rgba(45, 255, 136, 0.4); border-radius: 999px;
  padding: 6px 10px; cursor: default;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}
.gps-chip.aprox { color: var(--amber); border-color: rgba(255, 176, 32, 0.4); }
.gps-chip.manual { color: var(--teal); border-color: rgba(139, 199, 255, 0.5); }

.btn-reportar {
  position: absolute; right: 12px; bottom: 170px; z-index: 1000;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--card); border: 1px solid rgba(255, 176, 32, 0.55);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  transition: all 0.15s;
}
.btn-reportar svg { width: 19px; height: 19px; fill: var(--amber); }
.btn-reportar:hover { border-color: var(--amber); }
.btn-reportar.activo {
  background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 24px rgba(255, 176, 32, 0.6);
  animation: blink 1s infinite;
}
.btn-reportar.activo svg { fill: #241500; }

/* Marcadores de reportes comunitarios */
.report-marker {
  position: relative; width: 34px; height: 34px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.report-marker span {
  font-size: 17px; z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.report-marker i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--amber);
  animation: ring 2.2s ease-out infinite;
}
.report-marker.high i { border-color: var(--red); }

/* Selector de tipo de reporte */
.popup-reporte .maplibregl-popup-content { min-width: 230px; }
.rep-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px;
}
.rep-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 2px; cursor: pointer;
  background: rgba(148, 163, 184, 0.07); border: 1px solid var(--border);
  border-radius: 11px; color: var(--text-2);
  font-family: var(--sans); font-size: 10px; font-weight: 600;
}
.rep-grid button:hover { border-color: var(--amber); color: var(--text); }
.rep-grid button span { font-size: 10px; }

.marca {
  position: absolute; left: 16px; bottom: 14px; z-index: 1000;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--faint);
  background: rgba(6, 10, 19, 0.7); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border);
}
.marca span { color: var(--teal); margin-left: 8px; }

/* Bienvenida (primer arranque) */
.bienvenida {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  /* scroll cuando el contenido (o el teclado del celular) no deja ver todo */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px
           max(24px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(139,199,255,.12), transparent 60%),
    rgba(5, 7, 13, 0.95);
  backdrop-filter: blur(6px);
  animation: cb-in 0.4s ease both;
}
.bv-card {
  width: 400px; max-width: 100%; text-align: center;
  /* nunca más alto que la pantalla: si crece (registro/OTP), scrollea adentro */
  max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  margin: auto;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 26px; padding: 30px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 199, 255, 0.1);
}
.bv-card h1 { font-size: 22px; font-weight: 800; margin-top: 12px; }
.bv-card h1 b { color: var(--teal); }
.bv-card p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-top: 8px; }
.bv-card label {
  display: block; text-align: left; font-family: var(--mono); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
  margin: 20px 0 7px;
}
.bv-card input {
  width: 100%; height: 52px; padding: 0 16px;
  background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-strong);
  border-radius: 14px; color: var(--text); font-size: 16px; outline: none;
  font-family: var(--sans);
}
.bv-card input:focus { border-color: var(--teal); }
.bv-card .btn { margin-top: 16px; }
.bv-legal { display: block; font-size: 12px; color: var(--faint); margin-top: 14px; }

/* Pantalla pro de permiso de ubicación (#permiso-ubi) */
.perm-benes { text-align: left; margin: 22px 0 4px; display: flex; flex-direction: column; gap: 15px; }
.perm-bene { display: flex; gap: 13px; align-items: flex-start; }
.perm-ico {
  flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(139, 199, 255, 0.12); border: 1px solid rgba(139, 199, 255, 0.28);
}
.perm-ico svg { width: 21px; height: 21px; fill: var(--teal); }
.perm-bene b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.perm-bene i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.perm-priv {
  display: flex; align-items: center; gap: 8px; justify-content: center; text-align: left;
  font-size: 12px; color: var(--faint); margin: 20px 4px 2px;
}
.perm-priv svg { width: 15px; height: 15px; fill: var(--faint); flex: none; }
.btn-ghost { background: none; border: none; color: var(--muted); margin-top: 8px; }
.btn-ghost:active { color: var(--text); }

#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
  background: rgba(10, 16, 28, 0.96); border: 1px solid rgba(139, 199, 255, 0.4);
  color: var(--text); font-size: 14px; font-weight: 600;
  padding: 13px 24px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 2000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.green { border-color: rgba(45, 255, 136, 0.5); }
#toast.red { border-color: rgba(255, 59, 92, 0.5); }

/* Pantallas angostas: la barra pasa abajo, tarjetas ocupan el ancho */
/* ==========================================================================
   MÓVIL — app nativa (Android/iOS). Mapa protagonista + menú inferior grande.
   ========================================================================== */
@media (max-width: 1024px) {
  .app { flex-direction: column; }
  .main { order: 1; }

  /* ── Menú inferior (tab bar) grande y cómodo ── */
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: auto;
    flex-direction: row; align-items: stretch; justify-content: space-around; gap: 0;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px));
    z-index: 1200; border-right: none; border-top: 1px solid var(--border-strong);
    background: rgba(6, 10, 19, 0.94); backdrop-filter: blur(20px);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
  }
  .rail-logo { display: none; }
  .rail-nav { flex-direction: row; flex: 1; gap: 0; justify-content: space-around; }
  .rail-btn {
    flex: 1; width: auto; min-height: 54px; padding: 7px 2px 5px; gap: 3px;
    border-radius: 14px;
  }
  .rail-btn span { display: block; font-size: 10px; font-weight: 600; }
  .rail-btn svg { width: 23px; height: 23px; }
  /* Agente: botón central elevado, como en el pitch */
  .rail-agent .rail-agent-ring {
    width: 46px; height: 46px; margin-top: -22px;
    border: 3px solid #05070A; background: #05070A;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 18px rgba(139, 199, 255, 0.4);
  }
  .rail-agent .rail-agent-ring svg { width: 44px; height: 44px; }
  .rail-agent span { margin-top: 1px; }

  /* SOS: botón flotante rojo, siempre a la mano, sobre el menú */
  .rail-sos {
    position: fixed; left: 15px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    width: 60px; height: 60px; font-size: 14px; z-index: 1201;
    box-shadow: 0 8px 24px rgba(255, 59, 92, 0.5);
  }

  /* ── Cabecera de app: la marca SIEMPRE visible, buscador debajo ── */
  .topbar {
    top: 0; left: 0; right: 0; gap: 8px;
    flex-direction: column; align-items: stretch;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0;
  }
  /* .topbar delante: la regla base display:none vive mas abajo en el archivo
     y con un solo selector empataria y ganaria por orden. */
  .topbar .buscador-marca {
    display: block; width: 92px; margin: 2px auto 0; opacity: .96;
    filter: drop-shadow(0 1px 10px rgba(0,0,0,.6));
  }
  .topbar-right {
    position: absolute; right: 12px;
    top: calc(10px + env(safe-area-inset-top, 0px));
  }
  /* min-width:0 en la barra y el input: sin esto el input se niega a
     encogerse (min-width:auto) y empuja el avatar fuera de la pantalla. */
  .search { flex: 1; height: 50px; min-width: 0; }
  #buscar { min-width: 0; }
  .topbar-right { margin-left: 0; gap: 0; flex: none; }
  #pill-agente { display: none; }
  .user-chip { padding: 5px; }
  .user-chip #user-nombre { display: none; }  /* solo el avatar en móvil */
  /* El avatar flota arriba-derecha; el botón blanco "ir" del buscador quedaba
     JUSTO debajo, medio tapado. En móvil no hace falta (tocas un resultado para
     trazar): se oculta, y se deja aire a la derecha para que el avatar no pise
     el botón de limpiar. */
  .topbar .search .s-go { display: none; }
  body:not(.buscando) .topbar .search { padding-right: 46px; }

  /* Categorías: fila con scroll horizontal bajo el buscador */
  .cat-chips {
    top: calc(106px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px;
    max-width: none;
  }

  /* Tarjetas (viaje, zonas…) como hoja inferior, sobre el menú.
     right: 84px deja una COLUMNA libre a la derecha para los botones
     flotantes (ubicación, reportar, SOS) — así el panel no los tapa. */
  .cards {
    left: 12px; right: 84px; width: auto; top: auto;
    bottom: calc(152px + env(safe-area-inset-bottom, 0px)); max-height: 42vh;
  }

  /* Columna derecha en móvil: TODO el stack sube ~34px respecto al desktop para
     librar el SOS (60px, que llega hasta 142px desde abajo). Se mantiene el
     espaciado original entre ellos, así ninguno se encima con otro.
     De abajo a arriba: SOS(82) · ubicación(152) · reportar(204) · gps(258) · tráfico(296). */
  .btn-ubicacion {
    right: 24px; bottom: calc(152px + env(safe-area-inset-bottom, 0px)); z-index: 1202;
  }
  .btn-reportar {
    right: 24px; bottom: calc(204px + env(safe-area-inset-bottom, 0px)); z-index: 1202;
  }
  .gps-chip {
    right: 15px; bottom: calc(258px + env(safe-area-inset-bottom, 0px)); z-index: 1202;
  }
  .btn-trafico {
    right: 24px; bottom: calc(296px + env(safe-area-inset-bottom, 0px)); z-index: 1202;
  }
  /* Zoom de MapLibre: en móvil se pincha para acercar; sus botones caían sobre
     el SOS y la columna derecha, así que se ocultan (la atribución queda). */
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; }

  /* Drawer y overlays a pantalla completa */
  /* Hoja inferior nativa: sube desde abajo, con asa, esquinas redondas y
     un respiro arriba para que se sienta app y no pagina. */
  .drawer {
    width: 100vw; z-index: 1250;
    top: calc(52px + env(safe-area-inset-top, 0px)); bottom: 0; height: auto;
    border-left: none; border-top: 1px solid var(--border-strong);
    border-radius: 22px 22px 0 0;
    animation: drawer-up .3s cubic-bezier(.2,.7,.3,1) both;
  }
  .drawer::before {
    content: ""; position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%); width: 44px; height: 4px;
    border-radius: 99px; background: rgba(255,255,255,.22);
  }
  .drawer-head { padding-top: 24px; }

  /* El panel arranca en top:0, asi que sin esto el encabezado (y la X de
     cerrar) quedan DEBAJO de la barra de estado / notch y no se pueden tocar.
     Ademas la X media 28px: por debajo del minimo comodo para el dedo (44). */
  .drawer-head {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    position: sticky; top: 0; z-index: 2;
    background: rgba(7, 11, 19, 0.98);
    border-bottom: 1px solid var(--border);
  }
  .drawer-head .x-btn { width: 44px; height: 44px; }
  .drawer-head .x-btn svg { width: 18px; height: 18px; }

  /* Buscador estilo Waze: ocupa la pantalla al abrirlo, para ver TODOS los
     resultados mientras escribes en vez de una cajita de 3 filas. */
  .s-sugerencias {
    position: fixed; left: 0; right: 0;
    top: calc(72px + env(safe-area-inset-top, 0px)); bottom: 0;
    max-height: none; border-radius: 0; border: none;
    border-top: 1px solid var(--border);
    z-index: 1210;
  }
  /* El buscador vive en .topbar con z-index 1001, pero el tab bar es 1200 y el
     SOS 1201: su panel de resultados quedaba PINTADO POR DEBAJO y se veia
     cortado. Mientras se busca, el buscador manda sobre todo. */
  body.buscando .topbar { z-index: 1260; }
  /* OJO: el tab bar NO se esconde. Si se esconde y el panel ocupa todo, la
     persona queda ATRAPADA sin forma de salir. Se deja visible y el panel
     reserva espacio abajo para no quedar tapado. */
  body.buscando .s-sugerencias { padding-bottom: 6px; }
  /* Boton de salir: solo mientras se busca */
  body.buscando .s-salir { display: flex; }

  /* Con el buscador abierto no estorban los flotantes ni las tarjetas */
  body.buscando .rail-sos,
  body.buscando .btn-ubicacion,
  body.buscando .btn-reportar,
  body.buscando .gps-chip,
  body.buscando .btn-trafico,
  body.buscando .cards,
  body.buscando .cat-chips { display: none !important; }
}

/* ══════════ Ficha del lugar (tarjeta inferior, estilo Google Maps) ══════════ */
.ficha-lugar {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); z-index: 1150;
  background: rgba(9, 14, 22, 0.94); backdrop-filter: blur(18px);
  border: 1px solid var(--border-strong); border-radius: 20px;
  padding: 16px 18px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: fl-fade 0.22s ease both;
}
@keyframes fl-fade { from { opacity: 0; } }
.fl-handle {
  width: 40px; height: 4px; border-radius: 3px; background: var(--border-strong);
  margin: -4px auto 12px; display: none;
}
.fl-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(148,163,184,0.12); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.fl-x svg { width: 14px; height: 14px; fill: currentColor; }
.fl-head { display: flex; gap: 13px; align-items: flex-start; padding-right: 30px; }
.fl-emoji {
  font-size: 22px; width: 46px; height: 46px; flex: none; border-radius: 14px;
  background: var(--teal-dim); display: flex; align-items: center; justify-content: center;
}
.fl-info { min-width: 0; flex: 1; }
.fl-nombre { font-family: var(--display); font-size: 18px; font-weight: 700;
  color: var(--text); line-height: 1.2; }
.fl-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.fl-coords { color: var(--faint); font-family: var(--mono); font-size: 10.5px; margin-top: 3px; }
.fl-extra { color: var(--teal); font-size: 12.5px; margin-top: 10px;
  background: var(--teal-dim); border-radius: 14px; padding: 8px 12px; }
.fl-ir {
  width: 100%; margin-top: 14px; padding: 13px; cursor: pointer; border: none;
  border-radius: 999px; background: #ffffff;
  color: #000000; font-family: var(--sans); font-size: 14.5px; font-weight: 800;
}
.fl-sec { display: flex; gap: 8px; margin-top: 8px; }
.fl-sec button {
  flex: 1; padding: 10px 8px; cursor: pointer; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-strong);
  color: var(--text-2); font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.fl-sec button:hover { border-color: var(--teal); color: var(--text); }
@media (max-width: 1024px) {
  .ficha-lugar { position: fixed; left: 12px; right: 12px; width: auto; transform: none;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .fl-handle { display: block; }
}

/* Pantallas muy angostas (teléfonos chicos): aún más compacto */
@media (max-width: 380px) {
  .rail-btn span { font-size: 9px; }
  .cat-chips button { padding: 7px 12px; font-size: 12px; }
}

/* Correcciones de capas y reflow en móvil (revisión) */
@media (max-width: 1024px) {
  /* El SOS y sus modales deben ir SOBRE el tab bar (1200) y el SOS flotante (1201) */
  .sos-overlay { z-index: 1300; }
  /* Con el SOS activo, escondemos el menú y el botón flotante para no tocar por error */
  body.sos-activo .rail, body.sos-activo .rail-sos { display: none; }

  /* Alerta del círculo: los botones bajan a su propia fila (no aplastan el texto) */
  #alerta-circulo { flex-wrap: wrap; }
  #alerta-circulo > div { flex: 1 1 auto; min-width: 0; }
  #alerta-circulo button { flex: 1 1 auto; }

  /* El contenido del drawer libra el tab bar inferior */
  .drawer-body { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

  /* Con un panel abierto (contactos, perfil, viajes…) el drawer ocupa TODA la
     pantalla. Los botones flotantes quedaban por encima (z-index 1201-1202) y
     tapaban los botones de abajo del panel — típico: "enviar mensaje" en la
     lista de gente. Mientras el panel esté abierto, se esconden. */
  body.drawer-abierto .rail-sos,
  body.drawer-abierto .btn-ubicacion,
  body.drawer-abierto .btn-reportar,
  body.drawer-abierto .gps-chip,
  body.drawer-abierto .btn-trafico { display: none !important; }
}

/* ── Círculo familiar en vivo: tu familia en el mapa (estilo Life360) ── */
.marker-circulo {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer;
}
.marker-circulo .mc-av {
  width: 34px; height: 34px; font-size: 12px;
  border: 2px solid var(--teal);
  box-shadow: 0 0 14px rgba(139, 199, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.marker-circulo .mc-n {
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  color: var(--text); background: rgba(5, 10, 15, 0.82);
  border: 1px solid rgba(139, 199, 255, 0.25);
  padding: 2px 8px; border-radius: 9px;
}


/* ══════════════════════════════════════════════════════════════════════════
   Identidad MOVAI-X — logo y pantalla de entrada
   ══════════════════════════════════════════════════════════════════════════ */
.logo-img{width:100%;height:auto;display:block;opacity:.96}
.rail-logo{display:flex;align-items:center;justify-content:center;padding:4px 2px}

/* ── Splash: la Tierra entra desde abajo, el resto es silencio ── */
.splash{
  position:fixed;inset:0;z-index:4000;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:clamp(88px,20vh,190px);overflow:hidden;
}
.splash[hidden]{display:none}
/* La intro ya no se va sola: sale al pulsar ENTRAR, que es quien pone .se-va */
.splash.se-va{animation:splash-sale .7s ease forwards}
@keyframes splash-sale{to{opacity:0;visibility:hidden}}
.splash-in{position:relative;z-index:2;text-align:center;padding:0 26px;
  animation:splash-entra 1.5s cubic-bezier(.2,.7,.3,1) both}
@keyframes splash-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.splash-logo{width:min(300px,62vw);height:auto;display:block;margin:0 auto}
.splash-lema{
  margin-top:20px;font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.42em;color:var(--muted);text-indent:.42em;
  /* "MOVILIDAD INTELIGENTE Y SEGURA" son 30 letras: a 375 px (323 utiles) no
     cabe en una linea. Se parte en DOS lineas parejas y con aire, nunca en 3. */
  line-height:1.85;max-width:300px;margin-left:auto;margin-right:auto;
  text-wrap:balance;
}
.splash-tierra{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:max(100%,560px);height:62%;
  background:url("/img/03_SPLASH_EARTH_HORIZON.webp") center bottom/cover no-repeat;
  animation:tierra-sube 1.8s cubic-bezier(.16,.8,.28,1) both;
}
@keyframes tierra-sube{from{opacity:0;transform:translate(-50%,10%)}to{opacity:1;transform:translate(-50%,0)}}
/* ── El boton ENTRAR ───────────────────────────────────────────────────────
   El boton ES la imagen, con su transparencia. Por eso el <button> va desnudo
   -- sin borde, fondo ni relleno -- y solo aporta tamano, foco y clic. La
   imagen lleva height:auto para que no se deforme en ninguna pantalla.
   No se le anade halo: ya trae su propio brillo. */
.splash-entrar{
  display:block;border:0;padding:0;background:none;cursor:pointer;
  width:min(210px,58vw);margin:clamp(24px,4.5vh,42px) auto 0;
  -webkit-tap-highlight-color:transparent;
  animation:splash-entrar-in .9s cubic-bezier(.2,.7,.3,1) 1.25s both}
.splash-entrar img{display:block;width:100%;height:auto;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),filter .18s cubic-bezier(.2,.7,.3,1)}
.splash-entrar:hover img{transform:scale(1.045);filter:brightness(1.08)}
.splash-entrar:active img{transform:scale(.98)}
.splash-entrar:focus-visible{outline:2px solid #8BC7FF;outline-offset:6px;border-radius:999px}
@keyframes splash-entrar-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── La intro en PC ────────────────────────────────────────────────────────
   03_SPLASH_EARTH_HORIZON se compuso para celular: estirada a lo ancho de un
   monitor se recorta y pierde el horizonte. Desde 768px entra la version
   panoramica, con un desvanecido arriba para que en portatiles de pantalla
   baja el arco no llegue al logotipo. */
@media(min-width:768px){
  .splash{padding-top:clamp(110px,16vh,200px)}
  .splash-logo{width:min(340px,30vw)}
  .splash-entrar{width:244px}
  .splash-tierra{
    width:100%;height:min(70%,680px);
    background-image:url("/img/08_DESKTOP_SPLASH_EARTH.webp");
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 100%)}
}

@media(prefers-reduced-motion:reduce){
  .splash,.splash-in,.splash-tierra,.splash-entrar{animation-duration:.01ms!important}
}


/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTES MOVAI-X — carroceria nueva sobre el motor existente.
   Mismos ids y manejadores; cambia la forma, no la funcion.
   ══════════════════════════════════════════════════════════════════════════ */
.rail{background:rgba(0,0,0,.94);backdrop-filter:blur(24px);border-color:var(--border)}
.rail-logo{padding:6px 4px}
.rail-btn{color:var(--muted);border-radius:14px;gap:6px;transition:color .22s,background .22s}
.rail-btn span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.rail-btn svg,.rail-btn svg *{fill:none;stroke:currentColor;stroke-width:1.5}
.rail-btn.active{color:#fff;background:rgba(255,255,255,.055)}
.rail-btn.active svg,.rail-btn.active svg *{stroke:var(--teal)}
.rail-sos{border-radius:50%;border:1px solid rgba(255,59,92,.5);
  background:rgba(255,59,92,.15);color:#ff90a4;backdrop-filter:blur(14px);
  box-shadow:0 0 26px rgba(255,59,92,.26)}

.search{background:rgba(9,12,17,.84);border:1px solid var(--border);
  border-radius:16px;box-shadow:none;backdrop-filter:blur(16px)}
.search:focus-within{border-color:rgba(139,199,255,.42);box-shadow:0 0 26px var(--glow)}
#buscar{color:var(--text);font-size:15px}
#buscar::placeholder{color:var(--muted)}
.s-sugerencias{background:rgba(3,4,6,.97);border-color:var(--border);border-radius:20px;
  backdrop-filter:blur(20px)}
.sug{border-radius:12px;margin:2px 7px;padding:13px 12px;color:var(--text-2)}
.sug:hover,.sug:active{background:rgba(255,255,255,.05);color:var(--text)}
.sug .sug-main{color:var(--text);font-weight:500}
.cat-menu-head{font-size:10px;letter-spacing:.26em;color:var(--muted);text-transform:uppercase}

.cat-menu button,.rec-item{background:var(--surface-2);border:1px solid var(--border);
  border-radius:14px;color:var(--text);font-size:12.5px}
.cat-menu button i{font-size:14px;opacity:.72;filter:grayscale(.4)}
.cat-menu button:active,.rec-item:active{border-color:rgba(139,199,255,.4);background:var(--surface)}
.cat-chips button{background:rgba(9,12,17,.84);border:1px solid var(--border);
  border-radius:999px;color:var(--text-2);backdrop-filter:blur(14px);font-size:12.5px}
.cat-chips button.activo{border-color:rgba(139,199,255,.5);color:var(--teal);
  background:rgba(139,199,255,.1)}

.card,.ficha-lugar,.nav-banner{background:rgba(9,12,17,.9);border:1px solid var(--border);
  border-radius:20px;backdrop-filter:blur(20px);box-shadow:0 20px 56px rgba(0,0,0,.62)}
.drawer{background:rgba(0,0,0,.97);border-color:var(--border);backdrop-filter:blur(24px)}
.card-head h3,.drawer-head h2{font-family:var(--sans);font-weight:500;letter-spacing:-.012em}
.stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat b{font-family:var(--sans);font-weight:500;letter-spacing:-.025em;font-size:19px}
.stat span{font-size:9.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.stat + .stat{border-left-color:var(--border)}

.btn,.btn-primary,.btn-safe{border-radius:14px;font-family:var(--sans);
  font-weight:500;letter-spacing:.015em}
.btn-primary{background:#fff;color:#000;border:none;box-shadow:none}
.btn-primary:active{opacity:.85}
.chip{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
  color:var(--text-2);font-size:12.5px}
.chip.selected{border-color:rgba(139,199,255,.5);background:rgba(139,199,255,.12);color:var(--teal)}
.x-btn{background:rgba(255,255,255,.06);color:var(--muted)}
.x-btn:hover{background:rgba(255,255,255,.11);color:var(--text)}

.btn-ubicacion,.btn-reportar,.btn-trafico,.gps-chip{
  background:rgba(9,12,17,.82);border:1px solid var(--border);
  backdrop-filter:blur(14px);box-shadow:none;color:var(--text)}
.btn-ubicacion svg,.btn-reportar svg,.btn-trafico svg{fill:var(--text)}
.btn-ubicacion.activo,.btn-reportar.activo,.btn-trafico.activo{
  border-color:rgba(139,199,255,.5);box-shadow:0 0 20px var(--glow)}
.btn-ubicacion.activo svg,.btn-trafico.activo svg{fill:var(--teal)}

.d-section{font-family:var(--sans);font-size:10px;letter-spacing:.26em;color:var(--muted)}
.d-section::before{background:var(--teal)}
.avatar{border-radius:50%;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);font-weight:500}
.avatar.green{border-color:rgba(45,255,136,.4);color:var(--green)}

.robot-halo{background:radial-gradient(circle,var(--glow) 0%,transparent 66%)}
.waveform span{background:var(--teal)}
.chat-dock-drawer input{background:var(--surface-2);border:1px solid var(--border);
  border-radius:14px;color:var(--text)}
.chat-dock-drawer input:focus{border-color:rgba(139,199,255,.45)}
.chat-dock-drawer button{background:#fff;border-radius:14px}
.chat-dock-drawer button svg{fill:#000}


/* ══════════════════════════════════════════════════════════════════════════
   MODO CONDUCCIÓN — 06_DRIVING_MODE de fondo, datos REALES encima
   ══════════════════════════════════════════════════════════════════════════ */
.conduccion{position:fixed;inset:0;z-index:1500;background:#000;
  display:flex;flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));
  animation:cd-entra .45s cubic-bezier(.2,.7,.3,1) both}
.conduccion[hidden]{display:none}
@keyframes cd-entra{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.cd-fondo{position:absolute;inset:0;z-index:0;
  background:url("/img/06_DRIVING_MODE.webp") center bottom/cover no-repeat}
.cd-fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,.35) 52%,rgba(0,0,0,.92) 88%,#000 100%)}
.conduccion > *:not(.cd-fondo){position:relative;z-index:2}

.cd-top{display:flex;align-items:center;justify-content:space-between}
.cd-titulo{font-size:10.5px;letter-spacing:.28em;color:var(--muted)}
.cd-salir{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:rgba(9,12,17,.7);backdrop-filter:blur(12px);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.cd-salir svg{width:15px;height:15px;fill:var(--text-2)}

.cd-vel{margin-top:34px;text-align:center;line-height:1}
.cd-vel b{display:block;font-family:var(--sans);font-weight:200;
  font-size:clamp(5.5rem,26vw,9rem);letter-spacing:-.05em;color:#fff;
  text-shadow:0 0 60px rgba(120,190,255,.22)}
.cd-vel span{display:block;margin-top:8px;font-size:11px;letter-spacing:.42em;
  color:var(--muted);text-indent:.42em}

.cd-giro{margin:26px auto 0;max-width:340px;display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:16px;background:rgba(9,12,17,.72);
  border:1px solid var(--border);backdrop-filter:blur(14px)}
.cd-giro[hidden]{display:none}
.cd-giro svg{width:24px;height:24px;fill:var(--teal);flex:none}
.cd-giro b{display:block;font-size:17px;font-weight:500;color:#fff}
.cd-giro span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

.cd-panel{margin-top:auto;border-radius:20px;padding:20px;
  background:rgba(9,12,17,.86);border:1px solid var(--border);backdrop-filter:blur(20px)}
.cd-datos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.cd-datos b{display:block;font-family:var(--sans);font-size:26px;font-weight:400;
  letter-spacing:-.03em;color:#fff}
.cd-datos span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase}
.cd-fin{width:100%;padding:16px;border-radius:14px;border:none;cursor:pointer;
  background:#fff;color:#000;font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.16em}
.cd-fin:active{opacity:.85}

/* ══════════════════════════════════════════════════════════════════════════
   AGENTE — anillo luminoso (05_AI_ASSISTANT). Reemplaza al robot antiguo;
   la lógica del agente (Gemini, voz, estados) no se toca.
   ══════════════════════════════════════════════════════════════════════════ */
.anillo-ia{position:relative;width:76px;height:76px;flex:none;
  display:flex;align-items:center;justify-content:center}
.anillo-ia i{position:absolute;inset:0;border-radius:50%;
  background:url("/img/05_AI_ASSISTANT.webp") center 30%/170% no-repeat;
  -webkit-mask-image:radial-gradient(circle,#000 62%,transparent 74%);
  mask-image:radial-gradient(circle,#000 62%,transparent 74%);
  animation:anillo-late 3.4s ease-in-out infinite}
@keyframes anillo-late{0%,100%{opacity:.88;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
.anillo-ia::after{content:"";position:absolute;inset:-22%;border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 62%);opacity:.55}
body.agente-escucha .anillo-ia i{animation-duration:1.1s}
/* Estados del agente: procesando (late rapido) y hablando (halo despierto).
   Sutiles a proposito: se nota vida, no fuegos artificiales. */
body.ia-pensando .anillo-ia i{animation-duration:.9s}
body.ia-pensando .anillo-ia::after{opacity:.8}
body.ia-hablando .anillo-ia i{animation-duration:1.4s}
body.ia-hablando .anillo-ia::after{opacity:.95;
  animation:halo-habla 1.2s ease-in-out infinite}
@keyframes halo-habla{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){
  body.ia-hablando .anillo-ia::after{animation:none}}
@media(prefers-reduced-motion:reduce){.anillo-ia i{animation:none}}

/* ── Ruta optimizada: etiqueta del sistema sobre la tarjeta real ── */
.ruta-etq{font-size:10px;letter-spacing:.28em;color:var(--muted);
  text-transform:uppercase;margin-bottom:8px}


/* ── 04_ROUTE_MAP como FALLBACK del mapa real ──────────────────────────────
   No reemplaza MapLibre: se pinta DEBAJO. Mientras cargan los tiles (o si la
   red falla) se ve una estética de ruta oscura en vez de un vacío negro. En
   cuanto el mapa dibuja, queda tapado y no se nota. */
#mapa{background:#000 url("/img/04_ROUTE_MAP.webp") center/cover no-repeat}
#mapa::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.75))}
#mapa .maplibregl-canvas-container{position:relative;z-index:1}


/* ══════════════════════════════════════════════════════════════════════════
   BUSCADOR MOVAI-X — panel flotante premium. El mapa sigue viéndose detrás.
   Usa la búsqueda real: mismos handlers, misma API, mismos resultados.
   ══════════════════════════════════════════════════════════════════════════ */

/* Marca oficial sobre la barra — solo mientras se busca */
.buscador-marca{
  display:none;width:132px;height:auto;margin:0 auto 12px;opacity:.95;
  filter:drop-shadow(0 0 18px rgba(120,190,255,.22))}
body.buscando .buscador-marca{display:block;animation:marca-entra .4s ease both}
@keyframes marca-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:.95;transform:none}}
body.buscando .topbar{flex-direction:column;align-items:stretch}
body.buscando .topbar-right{display:none}

/* Panel: translúcido con blur — el mapa respira por detrás */
.s-sugerencias{
  background:rgba(4,6,9,.80);backdrop-filter:blur(26px) saturate(1.1);
  border:1px solid var(--border);box-shadow:0 26px 70px rgba(0,0,0,.6);
  overflow:hidden auto}

/* Filas de resultado: icono, nombre, dirección, distancia */
.sug{display:flex;align-items:center;gap:13px;padding:13px 14px;margin:3px 7px;
  border-radius:14px;cursor:pointer;transition:background .18s}
.sug:hover,.sug:active{background:rgba(255,255,255,.055)}
.sug-ico{flex:none;width:34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(139,199,255,.10);border:1px solid rgba(139,199,255,.20)}
.sug-ico svg{width:15px;height:15px;fill:var(--teal)}
.sug-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sug-txt b{font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-txt small{font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-dist{flex:none;font-family:var(--sans);font-size:12px;color:var(--teal);
  letter-spacing:.02em}
.sug-add .sug-ico{background:rgba(255,255,255,.06);border-color:var(--border)}
.sug-add .sug-ico svg{fill:var(--muted)}

/* La barra, al buscar: acento azul discreto */
body.buscando .search{border-color:rgba(139,199,255,.42);
  box-shadow:0 0 30px rgba(120,190,255,.18)}

@media(min-width:1025px){
  .s-sugerencias{max-height:60vh}
  .buscador-marca{width:118px}
}


/* Estado abierto: panel de navegación flotante y centrado sobre el mapa. */
body.buscando .cards,body.buscando .cat-chips{display:none!important}

@media(min-width:1025px){
  body.buscando .topbar{
    left:50%;right:auto;transform:translateX(-50%);
    width:min(820px,calc(100% - 48px))}
  body.buscando .search{width:100%;flex:none}
  body.buscando .s-sugerencias{
    left:0;right:0;width:100%;transform:none;
    max-height:min(62vh,620px)}
}

@media(max-width:1024px){
  body.buscando .topbar{align-items:stretch}
  body.buscando .buscador-marca{width:118px;margin-bottom:10px}
  body.buscando .search{flex:none;height:52px;min-height:52px}
  body.buscando #buscar{font-size:16px;min-width:0}
  body.buscando .s-sugerencias{
    left:12px;right:12px;bottom:calc(82px + env(safe-area-inset-bottom,0px));
    width:auto;max-height:none;border:1px solid var(--border);border-radius:20px;
    background:rgba(4,6,9,.86);backdrop-filter:blur(22px) saturate(1.1);
    padding:4px 0 8px;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch}
}


/* ══════════════════════════════════════════════════════════════════════
   BUSCADOR A PANTALLA COMPLETA — su propia seccion, no un panel sobre el mapa.
   Al pulsar la barra, el mapa desaparece detras del planeta y los resultados
   pasan a ocupar la pantalla entera. Va al final del archivo a proposito: asi
   gana a las reglas de panel flotante de mas arriba sin tener que tocarlas.
   ══════════════════════════════════════════════════════════════════════ */

/* El planeta, de FONDO. Nunca por encima de los resultados: para eso esta el
   velo de ::after, que ademas garantiza que el texto siempre se lea. */
.buscador-escena{
  position:fixed;inset:0;z-index:999;display:none;
  background:#000 url("/img/02_HOME_EARTH.webp") center bottom/cover no-repeat}
.buscador-escena::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.90) 0,rgba(0,0,0,.62) 34%,
    rgba(0,0,0,.80) 72%,rgba(0,0,0,.92) 100%)}
body.buscando .buscador-escena{display:block;animation:escena-entra .3s ease both}
@keyframes escena-entra{from{opacity:0}to{opacity:1}}

/* El panel deja de ser tarjeta: es la seccion. Fondo transparente para que el
   planeta se vea por detras. Su posicion y ancho los pone el JS copiandolos de
   la barra de busqueda: la barra se centra dentro de .main (que excluye el
   rail) y el panel se centraba en la ventana -- 43px de desfase que ningun
   CSS podia igualar sin cablear el ancho del rail. */
body.buscando .s-sugerencias{
  position:fixed;bottom:0;z-index:1210;
  max-height:none;border:0;border-radius:0;box-shadow:none;
  background:transparent;backdrop-filter:none;
  padding:6px 0 calc(20px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  animation:panel-entra .35s cubic-bezier(.2,.7,.3,1) both}
@keyframes panel-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Cada pieza si lleva cuerpo propio: sobre el planeta, texto suelto no se
   leeria. El mismo tono en resultados, recientes y categorias: una sola voz.
   Sin blur -- son muchas filas y en movil se notaria. */
body.buscando .sug,
body.buscando .rec-item,
body.buscando .cat-menu button{
  background:rgba(6,9,14,.78);border:1px solid rgba(255,255,255,.07)}
body.buscando .sug{margin:6px 0}
body.buscando .sug:hover,body.buscando .sug:active,
body.buscando .rec-item:hover,
body.buscando .cat-menu button:hover{background:rgba(14,20,30,.9)}

/* Todo al mismo borde: cabeceras, recientes y rejilla alineados con la barra. */
body.buscando .cat-menu-head{padding:18px 2px 10px}
body.buscando .rec-list{padding:0 0 4px}
body.buscando .rec-item{margin:5px 0}
body.buscando .cat-menu{padding:0 0 18px;gap:10px}
body.buscando .cat-menu button i{font-size:17px;opacity:.8}

/* La marca respira: es la cabecera de la seccion, no un adorno apretado. */
body.buscando .buscador-marca{width:126px;margin:8px auto 16px}

/* Siempre hay salida: la X de la barra, en cualquier tamano de pantalla. */
body.buscando .s-salir{display:flex}

/* Con la seccion abierta no queda nada del mapa estorbando. */
body.buscando .rail-sos,body.buscando .btn-ubicacion,body.buscando .btn-reportar,
body.buscando .gps-chip,body.buscando .btn-trafico,body.buscando .cards,
body.buscando .cat-chips,body.buscando .ficha-lugar{display:none!important}

@media(min-width:1025px){
  /* En PC la vertical se recortaria: entra la panoramica, anclada abajo. */
  .buscador-escena{
    background-image:url("/img/08_DESKTOP_SPLASH_EARTH.webp");
    background-size:100% auto}
  /* Seccion inmersiva: el rail tambien se retira. Sin el, .main ocupa todo el
     ancho y la barra queda centrada DE VERDAD en la ventana. Al salir, el JS
     reajusta el mapa, que cambio de ancho mientras estaba tapado. */
  body.buscando .rail{display:none!important}
  body.buscando .topbar{top:26px}
  body.buscando .buscador-marca{width:148px;margin:10px auto 20px}
  /* 22 categorias a 3 columnas era una pared de botones anchos y planos. */
  body.buscando .cat-menu{grid-template-columns:repeat(4,1fr)}
}

@media(prefers-reduced-motion:reduce){
  body.buscando .buscador-escena,body.buscando .s-sugerencias{animation:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   ICONOS LINEALES — la familia unica que sustituye a los emojis. Cada
   contexto fija tamano y color; el trazo vive dentro del simbolo.
   ══════════════════════════════════════════════════════════════════════════ */
svg.li{width:1em;height:1em;vertical-align:-.14em;flex:none}
.cat-chips button svg.li{width:14px;height:14px;margin-right:6px;color:var(--muted)}
.cat-chips button.activo svg.li{color:var(--teal)}
.chip svg.li{width:14px;height:14px;margin-right:5px;vertical-align:-2.5px}
.cat-menu button i{display:flex;align-items:center;justify-content:center}
.cat-menu button i svg.li{width:19px;height:19px;color:var(--muted);opacity:1}
.cat-menu button:hover i svg.li{color:var(--text)}
.rec-ico{display:flex;align-items:center}
.rec-ico svg.li{width:16px;height:16px;color:var(--muted)}
.sug-ico{color:var(--teal)}
.sug-ico svg.li{width:16px;height:16px}
.sos-tipos button i{display:flex;align-items:center;justify-content:center;width:30px}
.sos-tipos button i svg.li{width:23px;height:23px;color:var(--text-2)}
.sos-tipos button.elegido i svg.li{color:#fff}
.sos-llamar svg.li{width:17px;height:17px;margin-right:7px;vertical-align:-3px}
.sos-ubi > i{display:flex;align-items:center}
.sos-ubi > i svg.li{width:18px;height:18px;color:var(--teal)}
.check-vivo button svg.li{width:14px;height:14px;margin-right:5px;vertical-align:-2px}
.fl-emoji{display:flex;align-items:center;justify-content:center;color:var(--teal)}
.fl-emoji svg.li{width:22px;height:22px}
.fl-ir svg.li{width:16px;height:16px;margin-right:7px;vertical-align:-3px}
.fl-sec button svg.li{width:15px;height:15px;margin-right:6px;vertical-align:-3px;color:var(--muted)}
.btn-trafico{display:flex;align-items:center;justify-content:center}
.btn-trafico svg.li{width:19px;height:19px;color:var(--text-2)}
.v-demo svg.li{width:13px;height:13px;margin-right:5px;vertical-align:-2px}
.chat-sug button svg.li{width:13px;height:13px;margin-right:5px;vertical-align:-2px;color:var(--muted)}
.mini-icon{color:var(--teal)}
.mini-icon svg.li{width:16px;height:16px}
.mini-icon.green{color:var(--green)}


/* ══════════════════════════════════════════════════════════════════════════
   CONDUCCION v2 — la escena del auto es la ENTRADA (1.5 s) y el telon cuando
   no hay GPS; el resto del viaje el protagonista es el mapa en vivo, con un
   HUD fino encima. Va al final para ganar a las reglas base sin tocarlas.
   ══════════════════════════════════════════════════════════════════════════ */
.cd-lema{position:absolute;left:0;right:0;top:38%;z-index:3;text-align:center;
  font-size:clamp(17px,4vw,26px);font-weight:300;letter-spacing:.5em;text-indent:.5em;
  color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.85);opacity:0;transition:opacity .5s;
  pointer-events:none}
.conduccion.cd--intro .cd-lema{opacity:1;animation:cd-lema-in .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes cd-lema-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Durante la intro solo se ve la escena: los datos entran con el HUD */
.cd--intro .cd-vel,.cd--intro .cd-giro,.cd--intro .cd-panel{opacity:0}

/* HUD: la capa se vuelve transparente y DEJA PASAR los gestos al mapa.
   Solo los controles reales vuelven a capturar el toque. */
.conduccion{transition:background .5s ease}
.conduccion.cd--hud{background:transparent;pointer-events:none}
.cd--hud .cd-salir,.cd--hud .cd-panel,.cd--hud .cd-giro{pointer-events:auto}
.cd-fondo{transition:opacity .6s ease}
.cd--hud .cd-fondo{opacity:0}

/* La velocidad deja el centro: pastilla abajo a la izquierda, estilo tablero */
.cd--hud .cd-vel{position:absolute;left:22px;
  bottom:calc(196px + env(safe-area-inset-bottom,0px));
  margin:0;text-align:left;line-height:1}
.cd--hud .cd-vel b{font-size:46px;font-weight:300;
  text-shadow:0 1px 16px rgba(0,0,0,.75)}
.cd--hud .cd-vel span{margin-top:4px;font-size:9px;letter-spacing:.3em}

.cd--hud .cd-giro{margin-top:14px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.cd--hud .cd-panel{max-width:460px;width:100%;margin-left:auto;margin-right:auto;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.cd--hud .cd-vel,.cd--hud .cd-giro,.cd--hud .cd-panel{
  animation:cd-hud-in .5s ease both}
@keyframes cd-hud-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Sin GPS: la escena vuelve de telón con el aviso en el centro */
.conduccion.cd--singps{background:#000}
.cd--singps .cd-fondo{opacity:1}
.cd--singps .cd-lema{opacity:1}

/* Mientras conduces: el mapa y el HUD, nada más. El SOS del rail se queda. */
body.conduciendo .topbar,body.conduciendo .cat-chips,body.conduciendo .cards,
body.conduciendo .gps-chip,body.conduciendo .btn-reportar,body.conduciendo .btn-trafico,
body.conduciendo .btn-ubicacion,body.conduciendo .marca,
body.conduciendo .nav-banner,body.conduciendo .nav-luego{display:none!important}

@media(prefers-reduced-motion:reduce){
  .cd-lema,.cd--hud .cd-vel,.cd--hud .cd-giro,.cd--hud .cd-panel{animation:none}}


/* ══════════════════════════════════════════════════════════════════════════
   ACABADO DE APP — feedback tactil y navegacion que responde al dedo.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes drawer-up{from{transform:translateY(52px);opacity:0}}
.rail-btn,.chip,.cat-chips button,.cat-menu button,.rec-item,.sug,
.fl-sec button,.sos-tipos button{transition:transform .12s ease,background .15s ease,
  border-color .15s ease,color .15s ease}
.rail-btn:active{transform:scale(.9)}
.chip:active,.cat-chips button:active,.cat-menu button:active,
.fl-sec button:active,.sos-tipos button:active{transform:scale(.96)}
.rec-item:active,.sug:active{transform:scale(.985)}
.btn:active,.cd-fin:active,.fl-ir:active{transform:scale(.98)}
.btn,.cd-fin,.fl-ir{transition:transform .12s ease,opacity .15s ease}

/* ══════════════════════════════════════════════════════════════════════════
   INTRO CINEMATICA — secuencia tipo video, todo en CSS:
   1) el espacio respira (estrellas a la deriva)  2) la Tierra sube
   3) la marca revela  4) el lema  5) ENTRAR. Nada se mueve brusco.
   ══════════════════════════════════════════════════════════════════════════ */
.splash::before,.splash::after{content:"";position:absolute;inset:-20% 0 0 0;
  z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 34% 8%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 56% 22%, rgba(200,225,255,.7), transparent 60%),
    radial-gradient(1px 1px at 73% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 26%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px 1px at 22% 38%, rgba(200,225,255,.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 66% 34%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 44% 45%, rgba(255,255,255,.4), transparent 60%);
  background-size:640px 520px;
  animation:estrellas-deriva 90s linear infinite,estrellas-entran 2s ease .2s both}
.splash::after{background-size:420px 380px;opacity:.55;
  animation-duration:140s,2s;animation-delay:0s,.5s}
@keyframes estrellas-deriva{to{transform:translateY(220px)}}
@keyframes estrellas-entran{from{opacity:0}}
.splash-tierra{z-index:1}

/* La secuencia: cada pieza entra en su momento */
.splash-in{animation:none}
.splash-logo{animation:marca-revela 1.4s cubic-bezier(.2,.7,.3,1) .7s both}
@keyframes marca-revela{from{opacity:0;transform:translateY(14px);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}}
.splash-lema{animation:lema-entra 1.1s ease 1.5s both}
@keyframes lema-entra{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.42em}}
.splash-tierra{animation:tierra-sube 2.4s cubic-bezier(.16,.8,.28,1) .3s both}
.splash-tierra::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;
  background:radial-gradient(ellipse 52% 90% at 50% 100%,rgba(120,190,255,.16),transparent 70%);
  animation:tierra-late 6s ease-in-out 2.6s infinite}
@keyframes tierra-late{0%,100%{opacity:.7}50%{opacity:1}}
.splash-entrar{animation-delay:2.1s}

@media(prefers-reduced-motion:reduce){
  .splash::before,.splash::after,.splash-logo,.splash-lema,
  .splash-tierra,.splash-tierra::after,.splash-entrar{animation-duration:.01ms!important;
    animation-delay:0s!important;animation-iteration-count:1!important}}


/* ══════════════════════════════════════════════════════════════════════════
   HOME v4 + SIDEBAR — el mockup oficial hecho codigo. Negro profundo, marca
   como imagen (jamas texto), azul frio solo de acento.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){ .solo-pc{display:none!important} }
@media(min-width:1025px){ .solo-movil{display:none!important} }

.home{position:fixed;inset:0;z-index:1100;background:#000;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(12px + env(safe-area-inset-top,0px)) 20px
          calc(96px + env(safe-area-inset-bottom,0px));
  animation:home-in .35s ease both}
.home[hidden]{display:none}
@keyframes home-in{from{opacity:0}}

/* ── Cabecera: ubicacion · MARCA (imagen) · campana + avatar ── */
.hm-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px;max-width:1120px;margin:0 auto;width:100%}
.hm-logo{width:150px;height:auto;justify-self:center;opacity:.98}
.hm-ubi{display:inline-flex;align-items:center;gap:7px;justify-self:start;
  background:none;border:none;cursor:pointer;color:var(--text-2);
  font-family:var(--sans);font-size:13.5px;padding:8px 4px}
.hm-ubi svg.li{width:15px;height:15px;color:var(--teal)}
.hm-ubi .hm-chev{width:13px;height:13px;color:var(--faint)}
.hm-top-r{display:flex;align-items:center;gap:12px;justify-self:end}
.hm-bell{position:relative;width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:none;border:none;display:flex;align-items:center;justify-content:center}
.hm-bell svg.li{width:19px;height:19px;color:var(--text-2)}
.hm-bell i{position:absolute;top:9px;right:9px;width:7px;height:7px;
  border-radius:50%;background:var(--teal)}
.hm-avatar{cursor:pointer;border:1px solid var(--border)}

.hm-cuerpo{max-width:1120px;margin:0 auto;width:100%;
  display:flex;flex-direction:column}

.hm-h1{margin-top:30px;text-align:center;color:#fff;
  font-family:var(--sans);font-weight:600;letter-spacing:.01em;
  font-size:clamp(24px,3.6vw,42px)}

/* ── Buscador: limpio, con la chispa IA a la derecha ── */
.hm-search{margin:22px auto 0;width:min(680px,100%);min-height:54px;
  display:flex;align-items:center;gap:12px;padding:0 18px;cursor:pointer;
  border-radius:16px;background:rgba(9,12,17,.85);border:1px solid var(--border);
  color:var(--faint);font-family:var(--sans);font-size:14.5px;text-align:left;
  transition:border-color .15s ease,box-shadow .15s ease}
.hm-search:hover{border-color:rgba(139,199,255,.45);box-shadow:0 0 22px var(--glow)}
.hm-search span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hm-search svg.li{width:17px;height:17px;color:var(--muted)}
.hm-search .hm-spark{color:var(--teal)}

/* ── Categorias: pastillas en PC, fichas con icono en movil ── */
.hm-chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.hm-chips button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  min-height:38px;padding:0 15px;border-radius:999px;
  background:rgba(9,12,17,.7);border:1px solid var(--border);color:var(--text-2);
  font-family:var(--sans);font-size:12.5px;font-weight:500;
  transition:transform .12s ease,border-color .15s ease}
.hm-chips button:hover{border-color:rgba(139,199,255,.45);color:#fff}
.hm-chips button:active{transform:scale(.96)}
.hm-chips svg.li{width:15px;height:15px;color:var(--muted)}
.hm-chips i{display:flex}

/* ── Sugerencias IA ── */
.hm-sug{margin-top:26px}
.hm-sug-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hm-sug-head h2{font-family:var(--sans);font-size:15px;font-weight:700;
  letter-spacing:.06em;color:#fff}
.hm-sug-head p{margin-top:4px;font-size:12px;color:var(--muted)}
.hm-sug-hora{display:inline-flex;align-items:center;gap:7px;font-size:12px;
  color:var(--muted);white-space:nowrap}
.hm-sug-hora svg.li{width:14px;height:14px}
.hm-vertodas{background:none;border:none;cursor:pointer;color:var(--teal);
  font-family:var(--sans);font-size:12.5px;font-weight:600;white-space:nowrap}

.hm-carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:86%;
  gap:14px;margin-top:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.hm-carrusel::-webkit-scrollbar{display:none}
.hm-card{scroll-snap-align:center;border-radius:18px;overflow:hidden;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);
  transition:transform .12s ease,border-color .15s ease}
.hm-card:hover{border-color:rgba(139,199,255,.4)}

.hm-card:active{transform:scale(.985)}
.hm-card-foto{position:relative;height:150px;
  background-size:cover;background-position:center}
.hm-card-info{padding:12px 14px 13px}
.hm-card-info b{display:block;font-size:15px;font-weight:600;color:#fff}
.hm-card-info small{display:block;margin-top:3px;font-size:12px;color:var(--muted);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hm-card-pie{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.hm-tag{padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:600;
  color:var(--teal);background:var(--teal-dim);border:1px solid rgba(139,199,255,.25)}
.hm-ir{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.hm-ir svg.li{width:14px;height:14px;color:var(--text-2)}

.hm-pie{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.hm-dots{display:flex;gap:7px}
.hm-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .2s,transform .2s}
.hm-dots i.on{background:var(--teal);transform:scale(1.25)}
.hm-flecha{width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:rgba(9,12,17,.8);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center}
.hm-flecha svg.li{width:15px;height:15px;color:var(--text-2)}
#hm-prev svg{transform:rotate(180deg)}
.hm-flecha:hover{border-color:rgba(139,199,255,.45)}

/* ── Acciones rapidas (movil) ── */
.hm-acciones{margin-top:22px}
.hm-acc-cab{font-size:12px;font-weight:700;letter-spacing:.08em;color:#fff;
  margin-bottom:11px}
.hm-acc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.hm-acc-grid button{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 4px 12px;border-radius:14px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
  font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:1.25;
  transition:transform .12s ease,border-color .15s ease}
.hm-acc-grid button:active{transform:scale(.95)}
.hm-acc-grid svg.li{width:21px;height:21px;color:var(--teal)}
.hm-acc-grid .acc-sos svg.li{color:var(--red)}

/* ── MOVIL: cabecera apilada (logo arriba, ubicacion y campana debajo) ── */
@media(max-width:1024px){
  .hm-top{grid-template-columns:1fr auto;grid-template-areas:"logo logo" "ubi camp"}
  .hm-logo{grid-area:logo;width:126px;margin:2px auto 4px}
  .hm-ubi{grid-area:ubi}
  .hm-top-r{grid-area:camp}
  .hm-avatar{display:none}
  .hm-h1{display:none}
  .hm-search{margin-top:6px}
  .hm-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;margin:16px -20px 0;padding:0 20px}
  .hm-chips::-webkit-scrollbar{display:none}
  .hm-chips button{flex-direction:column;min-width:74px;gap:6px;
    padding:10px 6px;border-radius:14px;font-size:10px;min-height:0}
  .hm-chips i{width:38px;height:38px;border-radius:12px;align-items:center;
    justify-content:center;background:rgba(139,199,255,.08);
    border:1px solid rgba(139,199,255,.18)}
  .hm-chips svg.li{width:17px;height:17px;color:var(--teal)}
}

/* ── PC: sidebar con etiquetas + banda de la Tierra + 3 tarjetas ── */
@media(min-width:1025px){
  .home{left:224px;padding-bottom:44px;
    /* El globo conectado de fondo (arte oficial v2). El velo va como primera
       capa del propio background: mas oscuro arriba y abajo para que texto y
       tarjetas respiren, y despejado al centro para que el globo LUZCA. */
    background:
      linear-gradient(180deg,rgba(0,0,0,.86) 0,rgba(0,0,0,.42) 26%,
        rgba(0,0,0,.28) 52%,rgba(0,0,0,.72) 82%,rgba(0,0,0,.92) 100%),
      #000 url("/img/movai-x-home-desktop-v2.webp") center 42%/cover no-repeat}
  .drawer{z-index:1150}

  .rail{width:224px;align-items:stretch;padding:18px 14px 16px}
  .rail-logo{width:auto;height:auto;margin:2px 6px 20px;justify-content:flex-start}
  .rail-logo .logo-img{width:132px}
  .rail-nav{gap:4px;flex:1}
  .rail-btn{flex-direction:row;justify-content:flex-start;gap:12px;width:100%;
    min-height:46px;padding:0 13px;border-radius:12px;border:1px solid transparent}
  .rail-btn span{font-size:13.5px;font-weight:500}
  .rail-btn svg.li{width:19px;height:19px}
  .rail-btn.active{color:#fff;border-color:rgba(139,199,255,.35);
    background:rgba(139,199,255,.07)}
  .rail-fila-sos{color:#FF8FA3}
  .rail-fila-sos svg.li{color:var(--red)}
  .rail-fila-sos:hover{background:var(--red-dim);color:#FFB3C0}
  .rail-cd{display:flex;align-items:center;justify-content:center;gap:10px;
    min-height:48px;margin-top:14px;cursor:pointer;border-radius:14px;
    border:1px solid rgba(139,199,255,.35);background:rgba(139,199,255,.05);
    color:var(--text);font-family:var(--sans);font-size:12.5px;font-weight:600;
    transition:background .15s ease}
  .rail-cd:hover{background:rgba(139,199,255,.12)}
  .rail-cd svg.li{width:18px;height:18px;color:var(--teal)}

  /* UNA tarjeta a la vista tambien en PC: desliza una por una, como pidio
     el usuario. Centrada y contenida para que la foto no se estire de mas. */
  .hm-carrusel{grid-auto-columns:100%;gap:16px;margin-top:18px;
    max-width:500px;margin-left:auto;margin-right:auto}
  .hm-card-foto{height:190px}
  .hm-sug{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.home{animation:none}}


/* ══════════════════════════════════════════════════════════════════════════
   VOZ EN TIEMPO REAL — el orbe del agente. El canvas dibuja con el AUDIO
   REAL (AnalyserNode); aqui solo viven la caja y los controles.
   ══════════════════════════════════════════════════════════════════════════ */
.voz-orb{position:relative;width:186px;height:186px;margin:0 auto}
.voz-orb canvas{position:absolute;inset:0;width:100%;height:100%}
.voz-orb .anillo-ia{position:absolute;left:50%;top:50%;margin:0;
  transform:translate(-50%,-50%)}
.voz-estado{margin-top:10px;font-size:11px;letter-spacing:.3em;text-indent:.3em;
  color:var(--muted);min-height:16px;transition:color .25s}
.voz-estado[data-e="listening"]{color:#fff}
.voz-estado[data-e="speaking"]{color:var(--teal)}
.voz-estado[data-e="thinking"]{color:var(--text-2)}
.voz-estado[data-e="error"]{color:#FF8FA3;letter-spacing:.04em;text-indent:0}
.voz-controles{display:flex;align-items:center;justify-content:center;
  gap:16px;margin-top:14px}
.voz-mic{width:62px;height:62px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(139,199,255,.10);border:1px solid rgba(139,199,255,.4);
  transition:transform .12s ease,box-shadow .25s ease,border-color .25s ease}
.voz-mic svg.li{width:24px;height:24px;color:var(--teal)}
.voz-mic:active{transform:scale(.94)}
.voz-mic.vivo{border-color:rgba(139,199,255,.75);
  box-shadow:0 0 26px rgba(120,190,255,.35);
  animation:mic-late 2.6s ease-in-out infinite}
@keyframes mic-late{0%,100%{box-shadow:0 0 18px rgba(120,190,255,.25)}
  50%{box-shadow:0 0 32px rgba(120,190,255,.45)}}
.voz-ctl{width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--border)}
.voz-ctl svg{width:16px;height:16px;fill:var(--text-2)}
.voz-ctl.apagada{opacity:.5}
.voz-ctl.apagada svg{fill:var(--faint)}
.voz-texto{margin-top:10px;background:none;border:none;cursor:pointer;
  color:var(--faint);font-family:var(--sans);font-size:11.5px;
  text-decoration:underline;text-underline-offset:3px}
.voz-texto:hover{color:var(--muted)}
@media(prefers-reduced-motion:reduce){.voz-mic.vivo{animation:none}}


/* ══════════════════════════════════════════════════════════════════════════
   AUDITORÍA MÓVIL — la decisión de INICIAR RUTA merece una hoja de verdad.
   Antes: la tarjeta compartía un panel de 279px con scroll junto al agente y
   las zonas, la marca de agua pisaba el menú y cinco flotantes rodeaban todo.
   Ahora: en el celular solo existe LA HOJA cuando hay ruta, a ancho completo,
   sin scroll interno, con los flotantes retirados y el SOS siempre visible
   POR ENCIMA de la hoja. Va al final del archivo para ganar a las reglas
   base sin tocarlas; el escritorio no cambia.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  /* 1 · Fuera el ruido permanente */
  .marca{display:none}                          /* pisaba el menú inferior */
  #card-agente,#card-zonas{display:none!important} /* su info vive en el agente */
  .cards-handle{display:none}                   /* sin panel que colapsar */
  body:not(.con-ruta) .cards{display:none}      /* sin ruta no hay panel */

  /* 2 · La hoja: ancho completo sobre el menú. Usa 100dvh (altura REAL visible
     del navegador): con 100vh, en iPhone la barra de Safari/Brave se cuenta como
     espacio y el botón "Iniciar viaje seguro" quedaba escondido detrás. Sube más
     sobre el tab bar para que el botón siempre respire. */
  body.con-ruta .cards{
    left:10px;right:10px;width:auto;top:auto;
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
    /* Respaldo sin dvh (iOS < 15.4): antes caía al max-height:42vh de arriba,
       la hoja quedaba enana y el botón escondido en un scroll que nadie ve. */
    max-height:calc(100% - 230px);
    max-height:calc(100dvh - 168px);overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch}
  body.con-ruta .cards .card{margin:0}
  /* "Iniciar viaje seguro" SIEMPRE a la vista: si la hoja no cabe (iPhone
     chico, apaisado en el carro, texto grande) el botón se queda pegado al
     borde de abajo mientras el resto se desliza por detrás. */
  body.con-ruta:not(.en-viaje) #viaje-iniciar{
    position:sticky;bottom:0;z-index:2;
    box-shadow:0 -12px 18px rgba(9,12,17,.92)}

  /* 3 · Mientras se decide, el mapa y la hoja: los flotantes se retiran */
  body.con-ruta:not(.conduciendo) .btn-reportar,
  body.con-ruta:not(.conduciendo) .btn-trafico,
  body.con-ruta:not(.conduciendo) .btn-ubicacion,
  body.con-ruta:not(.conduciendo) .gps-chip{display:none!important}

  /* 4 · El SOS JAMÁS queda tapado: sube justo encima de la hoja */
  body.con-ruta:not(.conduciendo):not(.buscando) .rail-sos{
    bottom:calc(92px + env(safe-area-inset-bottom,0px) + var(--hoja-ruta,300px));
    width:54px;height:54px;font-size:12.5px}

  /* 5 · Jerarquía dentro de la hoja: la decisión se lee de un vistazo */
  #card-viaje{padding:16px 16px 14px}
  .viaje-dest{font-size:16.5px}
  .modos{display:flex;gap:8px}
  .modos .chip{flex:1;justify-content:center;min-height:44px}
  .ruta-pref .chip{min-height:44px}
  .stats{gap:8px}
  .stats .stat b{font-size:19px}
  #viaje-iniciar{min-height:52px;font-size:14.5px}
  #viaje-llegue{min-height:52px}
}
/* Pantalla BAJITA (iPhone apaisado en el soporte del carro, Android con el
   teclado abierto, tablet chica): la hoja se aprieta para que destino, modos,
   cifras y el botón quepan sin deslizar. */
@media(max-width:1024px) and (max-height:560px){
  body.con-ruta .cards{bottom:calc(76px + env(safe-area-inset-bottom,0px));
    max-height:calc(100% - 92px);max-height:calc(100dvh - 92px)}
  #card-viaje{padding:10px 12px 10px}
  #card-viaje .ruta-etq{display:none}
  .viaje-dest{font-size:14px;margin-bottom:6px}
  .modos{margin-bottom:6px}
  .modos .chip{min-height:38px}
  .stats{padding:6px 0}
  .stats .stat b{font-size:15px}
  #viaje-iniciar{min-height:44px;font-size:13.5px}
}


/* ══════════════════════════════════════════════════════════════════════════
   HOJA DE REPORTE — las opciones salen al pulsar el boton de alerta.
   ══════════════════════════════════════════════════════════════════════════ */
.rep-hoja{position:fixed;inset:0;z-index:1400;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  animation:rep-fondo .2s ease both}
.rep-hoja[hidden]{display:none}
@keyframes rep-fondo{from{opacity:0}}
.rep-caja{width:min(460px,100%);border-radius:24px 24px 0 0;
  background:rgba(7,11,19,.97);border:1px solid var(--border-strong);border-bottom:none;
  backdrop-filter:blur(24px);padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -20px 60px rgba(0,0,0,.6);
  animation:rep-sube .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes rep-sube{from{transform:translateY(40px);opacity:0}}
.rep-asa{width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);
  margin:0 auto 16px}
.rep-caja h3{font-family:var(--display);font-size:19px;font-weight:700}
.rep-sub{margin-top:5px;font-size:13px;color:var(--muted)}
.rep-tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:9px;margin-top:18px}
.rep-tipos button{display:flex;flex-direction:column;align-items:center;gap:9px;
  min-height:88px;justify-content:center;padding:12px 6px;border-radius:16px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-family:var(--sans);font-size:12px;font-weight:600;line-height:1.25;
  text-align:center;transition:transform .12s ease,border-color .15s ease}
.rep-tipos button:hover{border-color:rgba(139,199,255,.45)}
.rep-tipos button:active{transform:scale(.95)}
.rep-tipos svg.li{width:23px;height:23px;color:var(--teal)}
.rep-otro,.rep-cancelar{width:100%;min-height:48px;margin-top:10px;cursor:pointer;
  border-radius:14px;font-family:var(--sans);font-size:14px}
.rep-otro{background:none;border:1px solid var(--border);color:var(--text-2)}
.rep-cancelar{background:none;border:none;color:var(--faint);font-size:13.5px;
  min-height:40px}
.rep-otro[hidden]{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   CONDUCCION — destino y agente: faltaban en la pantalla del carro.
   ══════════════════════════════════════════════════════════════════════════ */
.cd-agente{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  border-radius:999px;background:rgba(45,255,136,.10);
  border:1px solid rgba(45,255,136,.32);
  font-size:10px;letter-spacing:.2em;color:#7CFFB8}
.cd-agente i{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);animation:cd-ag-late 1.8s ease-in-out infinite}
@keyframes cd-ag-late{50%{opacity:.35}}
.cd-agente.sin-senal{background:rgba(255,176,32,.10);
  border-color:rgba(255,176,32,.34);color:#FFCE7A}
.cd-agente.sin-senal i{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.cd-top{gap:12px}
.cd-destino{display:flex;align-items:center;gap:10px;padding-bottom:14px;
  margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10)}
.cd-destino svg.li{width:16px;height:16px;color:var(--teal);flex:none}
.cd-destino span{font-size:15px;font-weight:500;color:#fff;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Targets grandes: esta pantalla se usa MANEJANDO. Medidos 47.3px y 36x39px,
   por debajo del minimo tactil; aqui el minimo se sube aun mas. */
.cd-fin{min-height:58px;font-size:14px;letter-spacing:.18em}
.cd-salir{width:46px;height:46px;min-width:46px;min-height:46px;flex:none}
.cd-salir svg{width:17px;height:17px}

@media(prefers-reduced-motion:reduce){
  .rep-hoja,.rep-caja{animation:none}
  .cd-agente i{animation:none}}


/* ══════════════════════════════════════════════════════════════════════════
   REVISIÓN MÓVIL 5 SEP — al pie de la letra. Va al final para ganar a las
   reglas base sin tocarlas.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · Las categorías NO viven encima del mapa: solo dentro del buscador. Los
   botones siguen en el DOM (el Home los dispara por código). */
#cat-chips{display:none!important}

/* 2 · Reportes: 7 tipos → 4 por fila en el celular; la policía es informativa */
.rep-tipos{grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
.rep-tipos button{min-height:84px;padding:12px 3px;font-size:11.5px}
.report-marker.info i{border-color:var(--teal)}

/* 3 · Guardados: corregir el nombre desde el buscador y desde la ficha */
.rec-item{position:relative}
.rec-item .rec-nombre small{display:block;font-size:11px;color:var(--faint);font-weight:400}
.rec-edit{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:rgba(148,163,184,.08);border:1px solid var(--border);color:var(--muted);
  display:flex;align-items:center;justify-content:center}
.rec-edit svg.li{width:16px;height:16px}
.rec-edit:hover{border-color:var(--teal);color:var(--text)}
.fl-editar{display:flex;gap:8px;margin:10px 0 2px}
.fl-editar[hidden]{display:none}
.fl-editar input{flex:1;min-width:0;min-height:46px;padding:0 14px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(139,199,255,.45);color:var(--text);
  font-family:var(--sans);font-size:15px}
.fl-editar input:focus{outline:none;border-color:var(--teal)}
.fl-editar button{flex:none;min-height:46px;padding:0 16px;border-radius:12px;cursor:pointer;
  background:var(--teal);border:none;color:#04121a;font-family:var(--sans);font-size:14px;font-weight:700}

/* 4 · HABLAR CON EL AGENTE — siempre a un toque */
.btn-hablar{position:fixed;z-index:1150;display:flex;align-items:center;gap:9px;
  min-height:54px;padding:0 20px 0 16px;border-radius:999px;cursor:pointer;
  background:rgba(6,10,19,.94);backdrop-filter:blur(18px);
  border:1px solid rgba(139,199,255,.55);color:#fff;font-family:var(--sans);
  font-size:14px;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 22px rgba(139,199,255,.18);
  transition:border-color .15s ease,box-shadow .2s ease}
.btn-hablar svg.li{width:20px;height:20px;color:var(--teal);flex:none}
.btn-hablar:hover{border-color:var(--teal)}
.btn-hablar:active{opacity:.85}
body.ia-hablando .btn-hablar,body.agente-escucha .btn-hablar{border-color:var(--teal);
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 30px rgba(139,199,255,.38)}
@media(min-width:1025px){
  /* PC: abajo a la izquierda del mapa, junto al rail; la marca de agua sube */
  .btn-hablar{left:248px;bottom:22px}
  .marca{bottom:88px}
}
@media(max-width:1024px){
  /* Celular: a la derecha, a la altura del SOS (que va a la izquierda) */
  .btn-hablar{right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));min-height:56px}
  /* Con ruta trazada, sube con el SOS por encima de la hoja */
  body.con-ruta:not(.conduciendo):not(.buscando) .btn-hablar{
    bottom:calc(92px + env(safe-area-inset-bottom,0px) + var(--hoja-ruta,300px))}
  /* El Home deja aire abajo para que nada quede debajo del botón */
  .home{padding-bottom:calc(172px + env(safe-area-inset-bottom,0px))}
}
/* Se retira cuando estorba o cuando ya estás con el agente */
body.drawer-abierto .btn-hablar,body.rep-abierta .btn-hablar,body.sos-activo .btn-hablar,
body.buscando .btn-hablar,body.conduciendo .btn-hablar{display:none!important}
/* En conducción el botón vive en el HUD y el panel del agente se ve SOBRE el HUD */
body.conduciendo .drawer{z-index:1600}
.cd-hablar{width:100%;min-height:58px;margin-bottom:10px;border-radius:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(139,199,255,.10);border:1px solid rgba(139,199,255,.55);color:#fff;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.16em}
.cd-hablar svg.li{width:20px;height:20px;color:var(--teal);flex:none}
.cd-hablar:active{opacity:.85}

/* 5 · Legibilidad al volante: cifras y destino más grandes DE SERIE (pantallas
   de carro pequeñas, personas mayores, baja visión) */
.cd--hud .cd-vel b{font-size:58px}
.cd--hud .cd-vel span{font-size:10.5px}
.cd-titulo{font-size:12px}
.cd-agente{font-size:11.5px;padding:8px 14px}
.cd-datos b{font-size:30px}
.cd-datos span{font-size:12px;letter-spacing:.12em}
.cd-destino span{font-size:18px}
.cd-giro b{font-size:22px}
.cd-giro span{font-size:15px}
.cd-fin{font-size:15px;min-height:62px}
body.conduciendo #toast{font-size:17px;padding:16px 26px;bottom:auto;
  top:calc(84px + env(safe-area-inset-top,0px))}

/* 6 · TEXTO GRANDE (Perfil → Accesibilidad): más letra en lo que se lee
   caminando o manejando. Se guarda en el dispositivo. */
body.texto-grande .sug .sug-main,body.texto-grande .rec-nombre,
body.texto-grande .cat-menu button,body.texto-grande .dr-t,
body.texto-grande .fl-nombre{font-size:17px}
body.texto-grande .sug .sug-sub,body.texto-grande .dr-s,body.texto-grande .fl-sub,
body.texto-grande .sug-dist{font-size:14.5px}
body.texto-grande .viaje-dest{font-size:19px}
body.texto-grande .stats .stat b{font-size:23px}
body.texto-grande .stats .stat span{font-size:12.5px}
body.texto-grande .chip{font-size:14.5px;min-height:48px}
body.texto-grande .btn,body.texto-grande #viaje-iniciar,body.texto-grande #viaje-llegue,
body.texto-grande .fl-ir{font-size:16px;min-height:54px}
body.texto-grande .fl-sec button{font-size:14px;min-height:46px}
body.texto-grande #toast{font-size:17px;padding:16px 26px}
body.texto-grande .nav-banner .nb-main b{font-size:26px}
body.texto-grande .nav-banner .nb-main span{font-size:16px}
body.texto-grande .rep-tipos button{font-size:13px;min-height:92px}
body.texto-grande .rep-hoja h3{font-size:20px}
body.texto-grande .btn-hablar{font-size:16px;min-height:60px}
body.texto-grande .rail-btn span{font-size:11.5px}
body.texto-grande .rail-sos{font-size:16px}
body.texto-grande .cd-datos b{font-size:36px}
body.texto-grande .cd-destino span{font-size:21px}
body.texto-grande .cd-giro b{font-size:26px}
body.texto-grande .cd-giro span{font-size:17px}
body.texto-grande .cd--hud .cd-vel b{font-size:68px}
body.texto-grande .cd-fin,body.texto-grande .cd-hablar{font-size:16px;min-height:64px}
body.texto-grande .hm-chips button span,body.texto-grande .hm-acciones button span{font-size:13.5px}

/* 7 · El Home es el Home: los flotantes del mapa no se asoman por encima */
/* En el HOME se ocultan los controles del MAPA (el home tiene su propia barra,
   buscador y acciones rápidas). Así nada del mapa se monta sobre el encabezado.
   OJO: .rail es la navegación principal (se queda); aquí solo van cosas del mapa. */
body.en-home .btn-ubicacion,body.en-home .btn-reportar,body.en-home .gps-chip,
body.en-home .btn-trafico,body.en-home .btn-recentrar,
body.en-home .btn-hablar,body.en-home .rail-sos,
body.en-home .cards,body.en-home .topbar{display:none!important}

/* 8 · El aviso (toast) no pisa el SOS, el botón Hablar ni el menú del celular */
@media(max-width:1024px){
  #toast{left:12px;right:72px;bottom:calc(150px + env(safe-area-inset-bottom,0px));
    transform:translateY(20px);text-align:center;font-size:14.5px;padding:13px 18px;
    border-radius:18px}
  #toast.show{transform:none}
  /* Con ruta trazada o buscando, lo de abajo está ocupado: el aviso va arriba */
  body.con-ruta:not(.conduciendo) #toast,body.buscando #toast{
    bottom:auto;top:calc(112px + env(safe-area-inset-top,0px));right:12px}
  body.conduciendo #toast{left:12px;right:12px}
}

/* 9 · Hablar se retira también en la cuenta regresiva del SOS y en "¿Todo bien?" */
body:has(#sos-overlay:not([hidden])) .btn-hablar,
body:has(.check-vivo:not([hidden])) .btn-hablar{display:none!important}

/* 10 · Pantalla completa (menú PC): resalta cuando está activa */
#rail-pantalla.activo{border-color:rgba(139,199,255,.55);color:var(--teal)}
#rail-pantalla.activo svg.li{color:var(--teal)}

/* 11 · LOGIN pulido: error visible, ver contraseña, estado de carga */
.lg-pass-wrap{position:relative}
.lg-pass-wrap[hidden]{display:none}
.lg-pass-wrap input{width:100%;padding-right:50px}
.lg-ojo{position:absolute;right:6px;bottom:6px;width:36px;height:36px;border-radius:10px;
  border:none;background:transparent;color:var(--muted);display:flex;align-items:center;
  justify-content:center;cursor:pointer}
.lg-ojo svg.li{width:18px;height:18px}
.lg-ojo[aria-pressed="true"]{color:var(--teal)}
.lg-error{margin-top:12px;padding:10px 14px;border-radius:12px;text-align:left;
  background:rgba(255,59,92,.10);border:1px solid rgba(255,59,92,.45);color:#ff9fb0;
  font-size:13px;line-height:1.45}
.lg-error[hidden]{display:none}
.bv-card .btn[disabled]{opacity:.65;cursor:progress}

/* Círculo en vivo: color según la frescura de la señal (ahora / reciente / vieja) */
.avatar.amber { background: rgba(255,176,32,0.14); border-color: rgba(255,176,32,0.45); color: #ffb020; }
.marker-circulo[data-frescura="reciente"] .mc-av {
  border-color: #ffb020; box-shadow: 0 0 12px rgba(255,176,32,0.45), 0 2px 8px rgba(0,0,0,0.5); }
.marker-circulo[data-frescura="vieja"] .mc-av {
  border-color: var(--faint); box-shadow: 0 2px 8px rgba(0,0,0,0.5); opacity: 0.75; }
.marker-circulo[data-frescura="vieja"] .mc-n { color: var(--muted); }
.cv-row { cursor: pointer; }
.cv-row:active { background: rgba(255,255,255,0.04); }


/* ══════════════════════════════════════════════════════════════════════════
   LANZAMIENTO PLAY STORE — reportes estilo Waze, términos y legal.
   Va al final para ganar a las reglas anteriores sin tocarlas.
   ══════════════════════════════════════════════════════════════════════════ */

/* Reportes: botones grandes de colores, que cualquiera entienda de un vistazo */
.rep-caja h3{font-size:22px}
.rep-sub{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--text-2)}
.rep-sub svg.li{width:16px;height:16px;color:var(--teal);flex:none}
.rep-tipos{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.rep-tipos button{min-height:104px;padding:14px 4px 12px;gap:10px;border-radius:18px;
  font-size:13.5px;font-weight:600;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09)}
.rep-tipos button i{display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:var(--c);
  box-shadow:0 6px 22px color-mix(in srgb,var(--c) 45%,transparent)}
.rep-tipos button i svg.li{width:26px;height:26px;color:#fff;stroke-width:2}
.rep-tipos button:hover,.rep-tipos button:focus-visible{border-color:var(--c);outline:none}
.rep-tipos button:active{transform:scale(.94)}
.rep-otro{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;font-size:14.5px}
.rep-otro svg.li{width:17px;height:17px;color:var(--teal)}
.rep-cancelar{min-height:48px;font-size:15px;color:var(--muted)}
@media (max-width:360px){.rep-tipos button{min-height:94px;font-size:12.5px}
  .rep-tipos button i{width:46px;height:46px}}

/* El botón del mapa dice "Reportar": se entiende sin adivinar el icono */
.btn-reportar{width:auto;height:44px;padding:0 15px 0 12px;gap:7px;border-radius:999px;
  background:rgba(255,176,32,.16);border:1px solid rgba(255,176,32,.6);
  color:#FFD27A;font:700 13px/1 var(--sans);letter-spacing:.02em}
.btn-reportar svg{width:18px;height:18px;fill:var(--amber)}
.btn-reportar span{white-space:nowrap}
.btn-reportar:hover{background:rgba(255,176,32,.26)}

/* Marcadores de los tipos nuevos */
.report-marker.info i{border-color:var(--teal)}

/* Términos y privacidad: pantalla de aceptar */
.terminos{z-index:3000}
.tc-puntos{list-style:none;margin:16px 0 4px;text-align:left;display:grid;gap:10px}
.tc-puntos li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.tc-puntos svg.li{width:20px;height:20px;color:var(--teal);flex:none;margin-top:1px}
.tc-leer{margin-top:12px;font-size:13px;color:var(--muted)}
.tc-leer a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
#tc-botones .btn,.tc-rechazo .btn{width:100%;min-height:50px;margin-top:10px}
.tc-rechazo{margin-top:14px;padding:16px;border-radius:16px;text-align:center;
  background:rgba(255,59,92,.08);border:1px solid rgba(255,59,92,.35)}
.tc-rechazo b{display:block;color:#fff;font-size:15px}
.tc-rechazo span{display:block;margin-top:6px;font-size:13px;color:var(--text-2)}
.tc-rechazo[hidden],#tc-botones[hidden]{display:none}

/* Visor de documentos legales dentro de la app */
.legal-vista{position:fixed;inset:0;z-index:3100;display:flex;flex-direction:column;background:#05070A}
.legal-vista[hidden]{display:none}
.lv-barra{flex:none;display:flex;align-items:center;
  padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;border-bottom:1px solid var(--border)}
.lv-barra button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border);
  color:var(--text);font:600 14px var(--sans);cursor:pointer}
.lv-barra svg.li{width:18px;height:18px;transform:rotate(180deg)}
#lv-marco{flex:1;width:100%;border:0;background:#05070A}

/* Perfil: borrar cuenta, claro pero sin gritar */
.pf-borrar{width:100%;margin-top:14px;min-height:48px;display:flex;align-items:center;
  justify-content:center;gap:8px;background:rgba(255,59,92,.08);
  border:1px solid rgba(255,59,92,.4);color:#FF8095}
.pf-borrar svg.li{width:17px;height:17px}


/* ══════════════════════════════════════════════════════════════════════════
   PRUEBA EN SAMSUNG A70 — arreglos de diseño en el celular
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  /* El avatar ya no pisa el buscador: logo arriba, buscador y avatar en fila */
  body:not(.buscando) .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:8px;row-gap:6px;align-items:center}
  body:not(.buscando) .topbar .buscador-marca{grid-column:1 / -1;margin:0 auto}
  body:not(.buscando) .topbar .search{grid-column:1;padding-right:12px}
  body:not(.buscando) .topbar-right{position:static;grid-column:2}

  /* Categorías del inicio: la palabra cabe en su botón */
  .hm-chips button{font-size:10.5px;min-width:72px;max-width:84px;padding:10px 4px}
  .hm-chips button span{display:block;max-width:100%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}

  /* Con ruta: "Hablar con el agente" no se monta sobre la hoja (vive en la
     pestaña AGENTE); en viaje, el buscador se retira y manda la navegación */
  body.con-ruta .btn-hablar{display:none!important}
  body.en-viaje:not(.buscando) .topbar{display:none!important}

  /* Hoja de la ruta minimizada: solo destino y hora de llegada */
  body.viaje-mini #card-viaje > :not(.vj-top){display:none!important}
  body.viaje-mini #card-viaje{padding:12px 14px;cursor:pointer}
  body.viaje-mini #card-viaje .card-head{margin-bottom:4px}
  body.viaje-mini #viaje-mini svg{transform:rotate(180deg)}
}
#viaje-mini svg.li{width:16px;height:16px;transition:transform .2s}
@media(min-width:1025px){#viaje-mini{display:none}}

/* Conducción: botón para ocultar el panel y ver la calle completa */
.cd-mini{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff}
.cd-mini svg.li{width:18px;height:18px;transition:transform .2s}
#conduccion.cd-min .cd-datos,#conduccion.cd-min .cd-hablar,#conduccion.cd-min .cd-fin{display:none}
#conduccion.cd-min .cd-destino{margin-bottom:0;padding-bottom:0;border-bottom:none}
#conduccion.cd-min .cd-panel{padding:12px 16px}
#conduccion.cd-min .cd-mini svg{transform:rotate(180deg)}

/* Crédito de la foto de Wikipedia en las sugerencias */
.hm-card-foto{position:relative}
.hm-card-cred{position:absolute;right:8px;bottom:6px;font-size:9px;letter-spacing:.04em;
  color:rgba(255,255,255,.75);background:rgba(0,0,0,.45);padding:2px 6px;border-radius:6px}

/* La app instalada no muestra el botón de simulación (es para demos en PC) */
html.app-nativa #viaje-demo{display:none!important}


/* ══════════════════════════════════════════════════════════════════════════
   CAPAS — NADA SE MONTA ENCIMA DE NADA.
   Orden de toda la app, de arriba a abajo:
     4000 inicio (splash) · 3100 documentos legales · 3000 términos y bienvenida
     2600 SOS (la emergencia manda sobre todo lo demás)
     2400 avisos críticos: "¿Todo bien?" y la alerta de un familiar
     1900 avisos cortos (toast)
     1600 agente durante la conducción · 1500 conducción · 1400 hoja de reportes
     1250 paneles · 1200 menú inferior · 1001 navegación y buscador
   Y arriba de la pantalla se ve UNA sola cosa a la vez, por prioridad:
     alerta de un familiar > "¿Todo bien?" > indicación de giro > aviso corto.
   ══════════════════════════════════════════════════════════════════════════ */
.sos-overlay{position:fixed!important;z-index:2600!important}
#check-vivo,#alerta-circulo{z-index:2400}
#toast{z-index:1900}

/* Con el SOS abierto no hay avisos ni giros encima; solo la emergencia */
body.sos-activo #toast,body.sos-activo #nav-banner,body.sos-activo #check-vivo{display:none!important}

/* Un aviso crítico arriba aparta la indicación de giro y los avisos cortos */
body:has(#check-vivo:not([hidden])) #nav-banner,
body:has(#alerta-circulo:not([hidden])) #nav-banner{visibility:hidden}
body:has(#check-vivo:not([hidden])) #toast,
body:has(#alerta-circulo:not([hidden])) #toast{display:none!important}
/* Si llegan los dos avisos críticos a la vez, uno debajo del otro, nunca encimados */
body:has(#alerta-circulo:not([hidden])) #check-vivo{top:calc(84px + 128px)}

/* En conducción los avisos críticos se ven SOBRE la pantalla del carro, en el
   centro (libre), y el texto "buscando señal" se aparta mientras tanto */
body.conduciendo #check-vivo,body.conduciendo #alerta-circulo{position:fixed;top:36%}
body.conduciendo:has(#check-vivo:not([hidden])) .cd-lema,
body.conduciendo:has(#alerta-circulo:not([hidden])) .cd-lema,
body.conduciendo:has(#toast.show) .cd-lema{opacity:0}

@media(max-width:1024px){
  /* En viaje (sin buscador arriba) la indicación de giro sube a su lugar, y los
     avisos cortos van DEBAJO de ella, nunca encima */
  body.en-viaje:not(.conduciendo) #nav-banner{top:calc(12px + env(safe-area-inset-top,0px))}
  body.en-viaje:not(.conduciendo) #check-vivo,
  body.en-viaje:not(.conduciendo) #alerta-circulo{top:calc(12px + env(safe-area-inset-top,0px))}
  body.en-viaje:not(.conduciendo):not(.buscando) #toast{
    bottom:auto;top:calc(124px + env(safe-area-inset-top,0px));left:12px;right:12px}
  /* En conducción el aviso corto va debajo de la tarjeta de giro */
  body.conduciendo #toast{top:calc(212px + env(safe-area-inset-top,0px));left:12px;right:12px}

  /* ── SOS que cabe en CUALQUIER celular, sin nada cortado ── */
  .sos-overlay{align-items:flex-start;overflow-y:auto;background:rgba(16,3,7,.95);
    padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .sos-panel{width:100%;max-width:470px;max-height:none;overflow:visible;margin:auto 0;
    padding:18px 14px 14px;border-radius:22px}
  .sos-x{top:10px;right:10px;width:40px;height:40px}
  .sos-disc{width:86px;height:86px;margin-bottom:10px}
  .sos-disc .sd-count{font-size:38px}
  .sos-disc .sd-sos{font-size:21px;letter-spacing:3px}
  .sos-panel h2{font-size:19px}
  .sos-panel p{font-size:13.5px;margin-top:6px}
  .sos-etq{margin-top:12px}
  /* Dos columnas que se ENCOGEN: nunca se salen de la pantalla */
  .sos-tipos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
  .sos-tipos button{min-width:0;min-height:62px;padding:10px;gap:9px;border-radius:14px}
  .sos-tipos button i{width:24px}
  .sos-tipos button i svg.li{width:21px;height:21px}
  .sos-tipos button > div{min-width:0}
  .sos-tipos button b{font-size:13.5px;overflow-wrap:anywhere}
  .sos-tipos button span{font-size:11.5px;line-height:1.3;overflow-wrap:anywhere}
  .sos-llamar{height:52px;font-size:15.5px}
  .sos-otros{font-size:11.5px;margin-top:8px;line-height:1.6}
  .sos-ubi{margin-top:10px;padding:10px 12px}
  .sos-ubi em{white-space:nowrap}
  .sos-acciones{margin-top:12px}
  #sos-cancelar{min-height:50px}
}
/* Celulares bajitos: el círculo se achica para que todo quepa sin deslizar */
@media(max-width:1024px) and (max-height:720px){
  .sos-disc{width:68px;height:68px;margin-bottom:6px}
  .sos-disc .sd-count{font-size:30px}
  .sos-disc .sd-sos{font-size:17px}
  .sos-disc .sd-sub{font-size:9px}
  .sos-panel h2{font-size:17px}
  .sos-tipos button{min-height:54px;padding:8px}
}

/* "¿Todo bien?" y la alerta del familiar: fondo SÓLIDO (se leen siempre);
   lo que late es el borde, no la tarjeta entera */
#check-vivo,#alerta-circulo{background:#0B0F16;opacity:1;animation:cv-late 1.4s ease-in-out infinite}
@keyframes cv-late{
  50%{box-shadow:0 14px 44px rgba(0,0,0,.55),0 0 0 3px rgba(255,176,32,.45),0 0 34px rgba(255,176,32,.35)}}
#alerta-circulo{animation-name:ac-late}
@keyframes ac-late{
  50%{box-shadow:0 14px 44px rgba(0,0,0,.55),0 0 0 3px rgba(255,59,92,.5),0 0 34px rgba(255,59,92,.4)}}
@media(prefers-reduced-motion:reduce){#check-vivo,#alerta-circulo{animation:none}}

/* SOS en celulares muy bajitos: aún más compacto, para que "Cancelar" se vea */
@media(max-width:1024px) and (max-height:680px){
  .sos-disc{width:56px;height:56px}
  .sos-disc .sd-count{font-size:26px}
  .sos-disc .sd-sos{font-size:14px;letter-spacing:2px}
  .sos-disc .sd-sub{display:none}
  .sos-panel{padding:14px 12px 12px}
  .sos-panel p{font-size:12.5px}
  .sos-etq{margin-top:8px}
  .sos-tipos{gap:6px}
  .sos-tipos button{min-height:48px;padding:7px 8px}
  .sos-otros{margin-top:6px}
  .sos-llamar{height:48px;margin-top:8px}
  .sos-acciones{margin-top:8px}
}

/* Acciones rápidas: "Cómo usar" ocupa la fila completa, como botón de ayuda */
.hm-acc-grid .acc-ayuda{grid-column:1 / -1;flex-direction:row;justify-content:center;min-height:52px;gap:10px}

/* ==========================================================================
   IDIOMA · selector ES / EN (Perfil)
   ========================================================================== */
.seg-idioma { display: flex; gap: 3px; padding: 3px; flex: none; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); }
.seg-idioma button { min-width: 46px; height: 32px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted); font: 700 13px var(--sans); letter-spacing: .05em; }
.seg-idioma button.on { background: var(--teal); color: #04121a; }

/* ==========================================================================
   MODO DÍA · el modo oscuro es el predeterminado; esto se activa con
   <html data-tema="dia"> (Perfil → Modo día). Primero la paleta (casi toda la
   app usa estas variables) y luego las piezas que traían el fondo oscuro fijo.
   ========================================================================== */
html[data-tema="dia"] {
  --bg: #EEF2F7;
  --surface: #FFFFFF;
  --surface-2: #F2F5F9;
  --card: rgba(255, 255, 255, 0.94);
  --teal: #1F6FE5;
  --teal-dim: rgba(31, 111, 229, 0.12);
  --glow: rgba(31, 111, 229, 0.22);
  --green: #0E9F57;
  --green-dim: rgba(14, 159, 87, 0.12);
  --red: #E0243F;
  --red-dim: rgba(224, 36, 63, 0.12);
  --amber: #C47A00;
  --text: #0B1220;
  --text-2: #263241;
  --muted: #566273;
  --faint: #7D8898;
  --border: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.24);
  color-scheme: light;
}
html[data-tema="dia"] .seg-idioma button.on { color: #fff; }

/* superficies "de vidrio" (antes negras) */
html[data-tema="dia"] .rail,
html[data-tema="dia"] .rail-agent .rail-agent-ring { background: rgba(255, 255, 255, .96); }
html[data-tema="dia"] .search,
html[data-tema="dia"] .hm-search,
html[data-tema="dia"] .cat-chips button,
html[data-tema="dia"] .hm-chips button,
html[data-tema="dia"] .card,
html[data-tema="dia"] .ficha-lugar,
html[data-tema="dia"] .nav-banner,
html[data-tema="dia"] .btn-ubicacion,
html[data-tema="dia"] .btn-reportar,
html[data-tema="dia"] .btn-trafico,
html[data-tema="dia"] .gps-chip,
html[data-tema="dia"] .hm-flecha,
html[data-tema="dia"] .cd-salir,
html[data-tema="dia"] .cd-giro,
html[data-tema="dia"] .cd-panel { background: rgba(255, 255, 255, .93);
  box-shadow: 0 6px 24px rgba(15, 23, 42, .12); }
html[data-tema="dia"] .drawer { background: rgba(248, 250, 252, .98); }
html[data-tema="dia"] .s-sugerencias,
html[data-tema="dia"] body.buscando .s-sugerencias { background: rgba(244, 247, 251, .92); }
html[data-tema="dia"] body.buscando .cat-menu button { background: rgba(255, 255, 255, .9);
  border-color: var(--border); }

/* tarjetas, campos y botones de cuadrícula */
html[data-tema="dia"] .d-card,
html[data-tema="dia"] .ag-grid button,
html[data-tema="dia"] .stats-mini .sm,
html[data-tema="dia"] .cb-bot { background: rgba(255, 255, 255, .92); }
html[data-tema="dia"] .field input,
html[data-tema="dia"] .bv-card input,
html[data-tema="dia"] .chat-dock-drawer input { background: #FFFFFF; color: var(--text); }
html[data-tema="dia"] .toggle { background: rgba(15, 23, 42, .14); }
html[data-tema="dia"] .toggle::after { background: #FFFFFF; box-shadow: 0 1px 3px rgba(15, 23, 42, .35); }
html[data-tema="dia"] .toggle.on { background: rgba(31, 111, 229, .85); }
html[data-tema="dia"] .toggle.on::after { background: #FFFFFF; box-shadow: 0 1px 4px rgba(15, 23, 42, .35); }

/* velos y degradados sobre el mapa (de noche oscurecen; de día casi nada) */
html[data-tema="dia"] #mapa::before { background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0)); }
html[data-tema="dia"] .rep-hoja { background: rgba(15, 23, 42, .28); }

/* páginas legales dentro de la app */
html[data-tema="dia"] .legal-vista,
html[data-tema="dia"] #lv-marco { background: #FFFFFF; }

/* marcadores con número del círculo */
html[data-tema="dia"] .marker-circulo .mc-n { background: rgba(255, 255, 255, .92); color: var(--text); }

/* modo día · segunda pasada (revisado pantalla por pantalla) */
html[data-tema="dia"] .hm-logo { filter: invert(1) brightness(.32); }          /* logo plateado → oscuro */
html[data-tema="dia"] .hm-card-info b,
html[data-tema="dia"] .hm-chips button:hover,
html[data-tema="dia"] .voz-estado[data-e="listening"],
html[data-tema="dia"] .tc-rechazo b,
html[data-tema="dia"] .cd-giro b,
html[data-tema="dia"] .cd-datos b,
html[data-tema="dia"] .cd-destino span,
html[data-tema="dia"] .cd-hablar { color: var(--text); }
html[data-tema="dia"] .cd-mini { background: rgba(15, 23, 42, .06); border-color: var(--border); color: var(--text); }
/* pestaña activa (barra de abajo en el celular y barra lateral en la PC) */
html[data-tema="dia"] .rail-btn.active { color: var(--text); background: rgba(15, 23, 42, .06); }
/* paneles: barra del título y la "asa" */
html[data-tema="dia"] .drawer-head { background: rgba(255, 255, 255, .98); }
html[data-tema="dia"] .drawer::before,
html[data-tema="dia"] .rep-asa { background: rgba(15, 23, 42, .18); }
/* hoja de reportes */
html[data-tema="dia"] .rep-caja { background: rgba(255, 255, 255, .98); box-shadow: 0 -20px 60px rgba(15, 23, 42, .18); }
html[data-tema="dia"] .rep-tipos button { background: #FFFFFF; border-color: var(--border); }

/* modo día · tercera pasada: primeras pantallas (términos, bienvenida) y botones */
html[data-tema="dia"] .bienvenida {
  background: radial-gradient(900px 500px at 50% 0%, rgba(31, 111, 229, .10), transparent 60%), rgba(238, 242, 247, .96);
}
html[data-tema="dia"] .bv-card { box-shadow: 0 30px 80px rgba(15, 23, 42, .16), 0 0 40px rgba(31, 111, 229, .08); }
/* botón principal: de noche blanco sobre negro, de día negro sobre claro (mismo contraste) */
html[data-tema="dia"] .btn-primary { background: #0B1220; color: #FFFFFF; box-shadow: 0 6px 22px rgba(15, 23, 42, .18); }
/* logos plateados de la marca → oscuros sobre fondo claro (la pantalla de entrada se queda oscura a propósito) */
html[data-tema="dia"] .logo-img { filter: invert(1) brightness(.32); }

/* modo día · las IMÁGENES no se tocan: el inicio en PC (globo), el buscador (Tierra) y el modo
   conducción (carro) quedan igual que de noche. Lo que va DIRECTO sobre esas imágenes conserva los
   colores de noche (letra blanca); los paneles y tarjetas de encima sí se ponen claros. */
html[data-tema="dia"] .cd-top,
html[data-tema="dia"] .cd-vel,
html[data-tema="dia"] .cd-lema {
  --text: #ffffff; --text-2: #d6dae0; --muted: #a7adb5; --faint: #6d757e; --teal: #8BC7FF;
  --border: rgba(255, 255, 255, 0.15); --border-strong: rgba(255, 255, 255, 0.28);
}
@media (max-width: 1024px) {
  /* en el celular el inicio no tiene imagen de fondo: ahí sí va claro */
  html[data-tema="dia"] .home { background: var(--bg); }
  html[data-tema="dia"] .hm-h1,
  html[data-tema="dia"] .hm-sug-head h2,
  html[data-tema="dia"] .hm-acc-cab { color: var(--text); }
}
@media (min-width: 1025px) {
  /* en PC el inicio tiene el globo de fondo: títulos y cabecera con los colores de noche */
  html[data-tema="dia"] .hm-top,
  html[data-tema="dia"] .hm-h1,
  html[data-tema="dia"] .hm-sug-head,
  html[data-tema="dia"] .hm-acc-cab {
    --text: #ffffff; --text-2: #d6dae0; --muted: #a7adb5; --faint: #6d757e; --teal: #8BC7FF;
    --border: rgba(255, 255, 255, 0.15);
  }
  html[data-tema="dia"] .hm-logo { filter: none; }
}

/* modo día · avisos (toast): siguen oscuros con letra blanca, como en Android */
html[data-tema="dia"] #toast { color: #FFFFFF; box-shadow: 0 10px 34px rgba(15, 23, 42, .28); }

/* modo día · el BUSCADOR es una pantalla con imagen (la Tierra), como la intro: se ve igual que de noche */
html[data-tema="dia"] body.buscando .s-sugerencias,
html[data-tema="dia"] body.buscando .search,
html[data-tema="dia"] body.buscando .cat-menu {
  --bg: #000000; --surface: #05070A; --surface-2: #090C11; --card: rgba(9, 12, 17, 0.88);
  --teal: #8BC7FF; --teal-dim: rgba(139, 199, 255, 0.13); --text: #ffffff; --text-2: #d6dae0;
  --muted: #a7adb5; --faint: #6d757e; --border: rgba(255, 255, 255, 0.15); --border-strong: rgba(255, 255, 255, 0.28);
  color-scheme: dark;
}
html[data-tema="dia"] body.buscando .s-sugerencias { background: rgba(4, 6, 9, .86); }
html[data-tema="dia"] body.buscando .search { background: rgba(9, 12, 17, .84); box-shadow: none; }
html[data-tema="dia"] body.buscando .cat-menu button { background: rgba(6, 9, 14, .78); border-color: rgba(255, 255, 255, .07); }

@media (min-width: 1025px) {
  /* el círculo del usuario sobre el globo del inicio */
  html[data-tema="dia"] .hm-avatar { background: rgba(139, 199, 255, .13); color: #8BC7FF; border-color: rgba(139, 199, 255, .4); }
}

/* ==========================================================================
   PRIMER USO · idioma y país
   ========================================================================== */
.ip-icono { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--teal-dim); border: 1px solid rgba(139, 199, 255, .35); }
.ip-icono svg.li { width: 30px; height: 30px; color: var(--teal); }
.ip-idiomas { margin: 16px auto 0; width: max-content; }
.ip-idiomas button { min-width: 116px; height: 42px; font-size: 14.5px; letter-spacing: .02em; }
.ip-select, .pf-pais { font-family: var(--sans); color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: 12px; outline: none; cursor: pointer; }
.ip-select { display: block; width: 100%; height: 50px; padding: 0 14px; font-size: 16px; }
.pf-pais { flex: none; max-width: 150px; height: 36px; padding: 0 8px; font-size: 13px; font-weight: 600; }
.ip-select option, .pf-pais option { color: #0B1220; }
html[data-tema="dia"] .ip-select, html[data-tema="dia"] .pf-pais, html[data-tema="dia"] .bv-card input { background: #FFFFFF; }

/* ==========================================================================
   CÓMO USAR · guía corta; cada paso se abre en grande ("Abrir módulo")
   ========================================================================== */
.ay-video { display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 2px; padding: 12px 14px;
  border-radius: 16px; cursor: pointer; text-align: left; font-family: var(--sans); color: var(--text);
  background: var(--teal-dim); border: 1px solid rgba(139, 199, 255, .35); }
.ay-video-i { width: 42px; height: 42px; flex: none; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--teal); color: #04121a; }
.ay-video-i svg.li { width: 19px; height: 19px; }
.ay-video b { display: block; font-size: 15px; font-weight: 600; }
.ay-video small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.ay-lista { display: flex; flex-direction: column; gap: 8px; }
.ay-paso { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "img txt" "img abrir";
  align-items: center; column-gap: 12px; row-gap: 7px; width: 100%; padding: 9px 12px 9px 9px; border-radius: 14px; cursor: pointer; text-align: left; font-family: var(--sans);
  color: var(--text); background: var(--card); border: 1px solid var(--border); transition: border-color .2s; }
.ay-paso:hover { border-color: rgba(139, 199, 255, .4); }
.ay-paso img { grid-area: img; width: 40px; height: auto; }
.ay-txt { grid-area: txt; }
.ay-txt b { display: block; font-size: 14px; font-weight: 600; }
.ay-txt span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ay-abrir { grid-area: abrir; justify-self: start; display: inline-flex; align-items: center; height: 28px;
  padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--teal);
  background: var(--teal-dim); border: 1px solid rgba(139, 199, 255, .3); }
.ay-abrir::after { content: "›"; margin-left: 6px; font-size: 15px; line-height: 1; }
.ay-paso:hover .ay-abrir { border-color: var(--teal); }

/* El módulo abierto: pantalla completa, imagen grande, X arriba */
.ay-modulo { position: fixed; inset: 0; z-index: 1800; display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;   /* celular acostado: se desliza en vez de cortarse */
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  background: rgba(3, 7, 13, .96); backdrop-filter: blur(10px); color: var(--text); font-family: var(--sans);
  animation: aym-entra .22s ease; }
.ay-modulo[hidden] { display: none; }
@keyframes aym-entra { from { opacity: 0; transform: scale(.98); } }
.aym-top, .aym-cuerpo, .aym-nav { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
.aym-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aym-paso { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aym-cerrar { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px 0 11px;
  border-radius: 999px; cursor: pointer; font: 600 13.5px var(--sans); color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-strong); }
.aym-cerrar svg { width: 18px; height: 18px; fill: currentColor; }
.aym-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-top: 14px; }
.aym-cuerpo h2 { font: 700 22px/1.2 var(--sans); }
.aym-cuerpo p { max-width: 460px; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.aym-img { position: relative; flex: 1; min-height: 180px; width: 100%; margin-top: 16px; }
.aym-img img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .55)); }
.aym-nav { display: flex; gap: 10px; max-width: 460px; margin-top: 16px; }
.aym-nav button { flex: 1; height: 48px; border-radius: 14px; cursor: pointer; font: 600 14.5px var(--sans);
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); }
.aym-nav button:last-child { color: #04121a; background: var(--teal); border-color: transparent; }
.aym-nav button:disabled { opacity: .35; cursor: default; }
html[data-tema="dia"] .ay-modulo { background: rgba(238, 242, 247, .97); }
html[data-tema="dia"] .aym-img img { filter: drop-shadow(0 16px 28px rgba(11, 18, 32, .22)); }
html[data-tema="dia"] .aym-nav button:last-child { color: #FFFFFF; }
.ay-pie { margin: 18px 2px 4px; font-size: 12.5px; color: var(--faint); }
html[data-tema="dia"] .ay-video-i { color: #FFFFFF; }

/* ==========================================================================
   MENÚ en PC más compacto (antes 224 px, letra grande en mayúsculas)
   ========================================================================== */
@media (min-width: 1025px) {
  .rail { width: 196px; padding: 14px 10px 12px; }
  .home { left: 196px; }
  .rail-logo { margin: 2px 8px 14px; }
  .rail-logo .logo-img { width: 112px; }
  .rail-nav { gap: 2px; }
  .rail-btn { min-height: 38px; padding: 0 11px; gap: 10px; border-radius: 10px; }
  .rail-btn span { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .rail-btn svg.li { width: 17px; height: 17px; }
  .rail-cd { min-height: 38px; margin-top: 6px; border-radius: 10px; font-size: 12px; }
  .rail-cd svg.li { width: 16px; height: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARA DEL AGENTE — bola blanca con dos ojos (estilo Grok).
   Reemplaza al orbe/aro azul de la pantalla del agente. Todo el dibujo es
   SVG inline + CSS; cara.js solo cambia:
     · data-estado en .cara-wrap: reposo | escuchando | pensando | hablando
     · la clase .cara-parpadeo (un parpadeo) y .cara-sin-audio (hablando sin
       analizador de audio → pulso suave por CSS)
     · la variable --cara-pulso (volumen REAL de la voz, 1 … 1.22)
   Modo día: html[data-tema="dia"] → bola oscura con ojos claros y sombra.
   Pegar al FINAL de static/css/mapa.css.
   ══════════════════════════════════════════════════════════════════════════ */
.cara-wrap{
  --cara-bola:#FFFFFF;                 /* centro de la esfera */
  --cara-bola-2:#D3D9E2;               /* borde en sombra (abajo-derecha) */
  --cara-ojo:#0B0F16;
  --cara-sombra:rgba(0,0,0,.45);       /* sombra que separa la bola del fondo */
  --cara-glow:rgba(255,255,255,.16);   /* halo en reposo */
  --cara-glow-esc:rgba(255,255,255,.34);/* halo escuchando */
  --cara-glow-on:rgba(139,199,255,.60);/* halo hablando (azul de la marca) */
  --cara-piso:rgba(255,255,255,.22);   /* sombra "en el piso" bajo la bola */
  --cara-txt:var(--muted);
  --cara-txt-brillo:#FFFFFF;
  --cara-pulso:1;
  position:relative;margin:0 auto;text-align:center}
.cara{position:relative;width:186px;height:186px;margin:0 auto}
/* Las ondas del audio real (voz.js las dibuja en este canvas) quedan como un
   aura tenue detrás de la bola. El canvas DEBE seguir en el DOM: el bucle de
   voz.js que lo pinta también decide ESCUCHANDO→PROCESANDO (arrancarViz). */
.cara canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.45}
.cara-piso{position:absolute;left:50%;bottom:6px;width:96px;height:14px;margin-left:-48px;
  border-radius:50%;background:radial-gradient(ellipse at center,var(--cara-piso) 0%,transparent 70%);
  animation:cara-piso 4.6s ease-in-out infinite}
.cara-flot{position:absolute;inset:0;animation:cara-flota 4.6s ease-in-out infinite}
.cara-glow{position:absolute;inset:4%;border-radius:50%;
  background:radial-gradient(circle,var(--cara-glow) 0%,transparent 66%);
  transition:opacity .45s,transform .45s}
.cara-resp{position:absolute;inset:0;animation:cara-respira 3.8s ease-in-out infinite}
.cara-pulso{position:absolute;inset:0;transform:scale(var(--cara-pulso))}
.cara-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 12px 16px var(--cara-sombra));
  transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.cara-luz-a{stop-color:var(--cara-bola)}
.cara-luz-b{stop-color:var(--cara-bola-2)}
.cara-bola{fill:url(#cara-luz)}
/* ojos: posición por atributo en .cara-ojo; mirada (.cara-mira), parpadeo
   (.cara-parp) y forma/inclinación (.cara-pupila) van en capas distintas para
   que ninguna animación pise a la otra */
.cara-mira{transition:transform .5s ease}
.cara-parp{transform-box:fill-box;transform-origin:center}
.cara-pupila{fill:var(--cara-ojo);transform-box:fill-box;transform-origin:center;
  transition:transform .34s cubic-bezier(.3,1.3,.5,1),opacity .2s}
.cara-feliz{fill:none;stroke:var(--cara-ojo);stroke-width:9;stroke-linecap:round;
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.55);
  transition:opacity .18s,transform .32s cubic-bezier(.3,1.5,.5,1)}
.cara-parpadeo .cara-parp{animation:cara-parpadea .24s ease-in-out}

/* ── texto de estado (hereda .voz-estado; aquí se afina) ── */
.cara-texto{margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-indent:.16em;
  min-height:18px;color:var(--cara-txt);transition:color .25s}
/* brillo que recorre las letras (shimmer) mientras piensa o escucha */
.cara-wrap[data-estado="pensando"] .cara-texto,
.cara-wrap[data-estado="escuchando"] .cara-texto{
  color:transparent;
  background:linear-gradient(90deg,var(--cara-txt) 0%,var(--cara-txt) 38%,
    var(--cara-txt-brillo) 50%,var(--cara-txt) 62%,var(--cara-txt) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:cara-brillo 2.2s linear infinite}

/* ── ESCUCHANDO: cabeza ladeada, píldoras inclinadas (curiosidad), halo claro ── */
.cara-wrap[data-estado="escuchando"] .cara-svg{transform:rotate(-6deg)}
.cara-wrap[data-estado="escuchando"] .cara-pupila{transform:rotate(-14deg) scale(1.08,1.18)}
.cara-wrap[data-estado="escuchando"] .cara-glow{
  background:radial-gradient(circle,var(--cara-glow-esc) 0%,transparent 66%);
  animation:cara-glow-late 1.6s ease-in-out infinite}

/* ── PENSANDO: ojos más finos que miran a un lado y a otro, flota más rápido ── */
.cara-wrap[data-estado="pensando"] .cara-pupila{transform:scale(.86,1.02)}
.cara-wrap[data-estado="pensando"] .cara-mira{animation:cara-mira 3.6s ease-in-out infinite}
.cara-wrap[data-estado="pensando"] .cara-glow{animation:cara-glow-late 2.3s ease-in-out infinite}

/* ── HABLANDO: ojos felices ^^, halo azul, la bola late con la voz (JS) ── */
.cara-wrap[data-estado="hablando"] .cara-pupila{transform:scaleY(.08);opacity:0}
.cara-wrap[data-estado="hablando"] .cara-feliz{opacity:1;transform:scale(1)}
.cara-wrap[data-estado="hablando"] .cara-glow{
  background:radial-gradient(circle,var(--cara-glow-on) 0%,transparent 70%);
  transform:scale(1.14)}
.cara-wrap[data-estado="hablando"] .cara-texto{color:var(--teal)}
/* sin analizador de audio (voz del navegador): pulso suave por CSS */
.cara-wrap[data-estado="hablando"].cara-sin-audio .cara-pulso{animation:cara-habla 1.05s ease-in-out infinite}

@keyframes cara-flota{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@keyframes cara-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes cara-piso{0%,100%{transform:scaleX(.8);opacity:.5}50%{transform:scaleX(1.08);opacity:1}}
@keyframes cara-parpadea{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.06)}}
@keyframes cara-mira{0%,18%{transform:translate(0,0)}30%,48%{transform:translate(7px,-7px)}
  62%,80%{transform:translate(-8px,-5px)}92%,100%{transform:translate(0,0)}}
@keyframes cara-glow-late{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.1);opacity:1}}
@keyframes cara-habla{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes cara-brillo{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* ── MODO DÍA: bola oscura con ojos claros y sombra marcada ── */
html[data-tema="dia"] .cara-wrap{
  --cara-bola:#1B2432;
  --cara-bola-2:#070B12;
  --cara-ojo:#F8FAFC;
  --cara-sombra:rgba(15,23,42,.32);
  --cara-glow:rgba(15,23,42,.08);
  --cara-glow-esc:rgba(15,23,42,.16);
  --cara-glow-on:rgba(31,111,229,.38);
  --cara-piso:rgba(15,23,42,.26);
  --cara-txt:var(--muted);
  --cara-txt-brillo:#0B1220}

/* ── Menos movimiento: sin flotar, respirar, mirar ni brillo; las expresiones
   (estáticas) y el cambio de color se mantienen ── */
@media(prefers-reduced-motion:reduce){
  .cara-flot,.cara-resp,.cara-piso,.cara-glow,.cara-mira,.cara-parp,.cara-pulso,
  .cara-wrap[data-estado] .cara-texto{animation:none!important}
  .cara-wrap[data-estado] .cara-texto{color:var(--cara-txt);background:none;
    -webkit-background-clip:border-box;background-clip:border-box}
  .cara-wrap[data-estado="hablando"] .cara-texto{color:var(--teal)}
  .cara-svg,.cara-pupila,.cara-feliz,.cara-mira,.cara-glow{transition-duration:.15s}
}

/* ── Pantalla del agente, versión limpia: carita, micrófono, 4 acciones y chat ── */
.ag-hola{margin-top:12px;font-size:14px;color:var(--text-2);display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.ag-hola b{color:var(--teal);font-weight:700}
.ag-editar{background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;padding:4px 6px;border-radius:8px}
.ag-editar:hover{color:var(--text);background:var(--teal-dim)}
.ag-fila{grid-template-columns:repeat(4,1fr);margin:16px 0 14px}
.ag-fila button{padding:11px 4px 9px}
.ag-fila button span{font-size:11px}

/* ── Secciones plegables del Perfil: menos texto a la vista ── */
.d-plegable{width:100%;background:none;border:none;cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px;padding-right:2px}
.d-plegable .d-resumen{margin-left:auto;font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--text-2);font-weight:600;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-plegable .d-chev{font-size:18px;line-height:1;color:var(--faint);transition:transform .2s;margin-left:auto}
.d-plegable .d-resumen + .d-chev{margin-left:0}
.d-plegable.abierto .d-chev{transform:rotate(90deg)}

/* Ajustes de los jueces de accesibilidad para la carita */
@media (prefers-reduced-motion: reduce) { .cara-pulso { transform: none !important; } }
html[data-tema="dia"] .cara-wrap[data-estado="escuchando"] .voz-estado.cara-texto,
html[data-tema="dia"] .cara-wrap[data-estado="pensando"] .voz-estado.cara-texto { color: transparent; }
html[data-tema="dia"] .cara-wrap[data-estado="hablando"] .voz-estado.cara-texto { color: #1A5BC4; }

/* ══════════════════════════════════════════════════════════════════════════
   MOVI — mascota propia de MOVAI-X (sustituye la bola con ojos).
   Cuerpo redondeado con un visor luminoso: dos ojos de luz que parpadean;
   escuchando → anillo azul que late; pensando → tres puntos que ondulan;
   hablando → barras de sonido que bailan con la voz. Modo día: cuerpo blanco.
   ══════════════════════════════════════════════════════════════════════════ */
.cara-wrap{
  --m-c1:#232B38; --m-c2:#0B0F16;              /* cuerpo (arriba → abajo) */
  --m-borde:rgba(139,199,255,.28);             /* luz del borde */
  --m-v1:#04060A; --m-v2:#0D1420;              /* visor */
  --m-luz:#8BC7FF;                             /* ojos, puntos y barras */
  --m-luz-glow:rgba(139,199,255,.75);
  --m-brillo:rgba(255,255,255,.07);
  --m-anillo:rgba(139,199,255,.55);
}
.cara-svg{filter:drop-shadow(0 14px 18px var(--cara-sombra))}
.cara-c1{stop-color:var(--m-c1)} .cara-c2{stop-color:var(--m-c2)}
.cara-v1{stop-color:var(--m-v1)} .cara-v2{stop-color:var(--m-v2)}
.cara-cuerpo{fill:url(#cara-cuerpo-g);stroke:var(--m-borde);stroke-width:1.5}
.cara-brillo{fill:var(--m-brillo)}
.cara-visor{fill:url(#cara-visor-g);stroke:rgba(139,199,255,.18);stroke-width:1}
.cara-ojo,.cara-puntos circle,.cara-barras rect{fill:var(--m-luz);filter:drop-shadow(0 0 5px var(--m-luz-glow))}
.cara-ojos{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.3,1.3,.5,1),opacity .18s}
.cara-puntos,.cara-barras{opacity:0;transition:opacity .2s}
.cara-puntos circle{transform-box:fill-box;transform-origin:center}
.cara-barras rect{transform-box:fill-box;transform-origin:center}
.cara-sonrisa{fill:none;stroke:var(--m-luz);stroke-width:5;stroke-linecap:round;opacity:0;transition:opacity .25s}
.cara-anillo{fill:none;stroke:var(--m-anillo);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.cara-parpadeo .cara-ojos{animation:cara-parpadea .24s ease-in-out}

/* ESCUCHANDO: ojos bien abiertos y el anillo late al ritmo de tu voz */
.cara-wrap[data-estado="escuchando"] .cara-ojos{transform:scaleY(1.18)}
.cara-wrap[data-estado="escuchando"] .cara-anillo{opacity:1;animation:cara-anillo 1.6s ease-out infinite}
.cara-wrap[data-estado="escuchando"] .cara-svg{transform:rotate(-4deg)}

/* PENSANDO: los ojos se apagan y tres puntos ondulan dentro del visor */
.cara-wrap[data-estado="pensando"] .cara-ojos{opacity:0;transform:scaleY(.2)}
.cara-wrap[data-estado="pensando"] .cara-puntos{opacity:1}
.cara-wrap[data-estado="pensando"] .cara-puntos circle{animation:cara-onda 1.1s ease-in-out infinite}
.cara-wrap[data-estado="pensando"] .cara-puntos circle:nth-child(2){animation-delay:.15s}
.cara-wrap[data-estado="pensando"] .cara-puntos circle:nth-child(3){animation-delay:.3s}

/* HABLANDO: barras de sonido en el visor, sonrisa y halo azul; late con la voz (JS) */
.cara-wrap[data-estado="hablando"] .cara-ojos{opacity:0;transform:scaleY(.2)}
.cara-wrap[data-estado="hablando"] .cara-barras{opacity:1}
.cara-wrap[data-estado="hablando"] .cara-barras rect{animation:cara-barra .75s ease-in-out infinite}
.cara-wrap[data-estado="hablando"] .cara-barras rect:nth-child(2){animation-delay:.1s}
.cara-wrap[data-estado="hablando"] .cara-barras rect:nth-child(3){animation-delay:.2s}
.cara-wrap[data-estado="hablando"] .cara-barras rect:nth-child(4){animation-delay:.3s}
.cara-wrap[data-estado="hablando"] .cara-barras rect:nth-child(5){animation-delay:.4s}
.cara-wrap[data-estado="hablando"] .cara-sonrisa{opacity:.9}

@keyframes cara-anillo{0%{transform:scale(.96);opacity:.9}100%{transform:scale(1.12);opacity:0}}
@keyframes cara-onda{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cara-barra{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.15)}}

/* MODO DÍA: cuerpo blanco, visor oscuro, luz azul más intensa */
html[data-tema="dia"] .cara-wrap{
  --m-c1:#FFFFFF; --m-c2:#E3E8EF; --m-borde:rgba(15,23,42,.14);
  --m-v1:#0B1220; --m-v2:#1B2434; --m-luz:#8BC7FF; --m-luz-glow:rgba(139,199,255,.8);
  --m-brillo:rgba(255,255,255,.6); --m-anillo:rgba(31,111,229,.5); --cara-sombra:rgba(15,23,42,.22);
}
@media (prefers-reduced-motion: reduce){
  .cara-anillo,.cara-puntos circle,.cara-barras rect{animation:none!important}
  .cara-wrap[data-estado="escuchando"] .cara-anillo{opacity:.7}
}

/* Mascota: fluidez y rendimiento (jueces) */
.cara canvas { opacity: 0; }                     /* el aura vieja quedaba debajo del cuerpo */
.cara-puntos circle, .cara-barras rect { filter: none; }   /* sin re-rasterizar el SVG cada frame */
.cara-svg { filter: none; }
.cara-cuerpo { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }

/* ══════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN (nv-) — vista giro a giro en TODOS los dispositivos (celular,
   PC y pantalla del carro). Va al final para ganar a las reglas base.
   ══════════════════════════════════════════════════════════════════════════ */
:root{--nv-barra-b:22px}
.nv{position:absolute;inset:0;z-index:1140;pointer-events:none;font-family:var(--sans)}
.nv[hidden]{display:none!important}
.nv>*{pointer-events:auto}
.nv>.nv-izq,.nv-gps{pointer-events:none}
.nv-izq>*{pointer-events:auto}
/* Columna izquierda: tarjeta del próximo giro + burbuja de velocidad */
.nv-izq{position:absolute;left:12px;top:calc(12px + env(safe-area-inset-top,0px));
  width:min(66vw,330px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.nv-giro{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:14px 16px;border-radius:22px;
  background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(139,199,255,.45);
  box-shadow:0 14px 44px rgba(0,0,0,.5),0 0 30px rgba(139,199,255,.12)}
.nv-flecha{width:58px;height:58px;flex:none;border-radius:16px;
  background:var(--teal-dim);border:1px solid rgba(139,199,255,.4);
  display:flex;align-items:center;justify-content:center;transition:transform .4s ease}
.nv-flecha svg{width:36px;height:36px;fill:var(--teal)}
.nv-giro-txt{flex:1;min-width:0}
.nv-giro-txt b{display:block;font-family:var(--display);font-size:34px;line-height:1;
  letter-spacing:-.02em;color:var(--text)}
.nv-giro-txt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:5px;font-size:15px;line-height:1.25;color:var(--text-2)}
.nv-luego{flex-basis:100%;padding-top:8px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-luego span{color:var(--text-2)}
.nv-vel{width:74px;height:74px;border-radius:50%;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:2px solid var(--border-strong);box-shadow:0 8px 26px rgba(0,0,0,.45)}
.nv-vel b{font-family:var(--display);font-size:24px;line-height:1;color:var(--text)}
.nv-vel span{margin-top:3px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Columna derecha: silenciar · hablar · instrucciones */
.nv-col{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;gap:10px}
.nv-btn{width:48px;height:48px;border-radius:50%;cursor:pointer;color:var(--teal);
  background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.45)}
.nv-btn svg{width:21px;height:21px;fill:var(--teal)}
.nv-btn svg.li{fill:none}
.nv-btn.apagada{color:var(--red);border-color:rgba(255,59,92,.5)}
.nv-btn.apagada svg{fill:var(--red)}
/* Volver a centrar · aviso de GPS · demo (web/PC): encima de la barra */
.nv-centrar,.nv-gps,.nv-demo{position:absolute;bottom:calc(var(--nv-barra-b) + var(--nv-barra-h,82px) + 12px)}
.nv-centrar{left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  min-height:46px;padding:0 18px;cursor:pointer;border-radius:999px;
  background:var(--card);backdrop-filter:blur(10px);border:1px solid rgba(139,199,255,.5);
  color:var(--teal);font-family:var(--sans);font-size:14px;font-weight:700;
  box-shadow:0 8px 26px rgba(0,0,0,.5)}
.nv-centrar svg{width:17px;height:17px;fill:var(--teal)}
.nv-gps{left:12px;padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:#FFCE7A;background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.4)}
.nv-demo{right:12px;padding:8px 12px;border-radius:999px;cursor:pointer;
  background:var(--card);border:1px solid var(--border);color:var(--faint);
  font-family:var(--sans);font-size:12px}
html.app-nativa #nv-demo{display:none!important}
/* Barra inferior: tiempo grande · (km · hora) · Llegué · Salida */
.nv-barra{position:absolute;left:12px;right:12px;bottom:var(--nv-barra-b);
  display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-radius:22px;
  background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-strong);box-shadow:0 14px 44px rgba(0,0,0,.5)}
.nv-eta{flex:1;min-width:0}
.nv-eta b{display:block;font-family:var(--display);font-size:28px;line-height:1;letter-spacing:-.02em;color:var(--text)}
.nv-eta span{display:block;margin-top:5px;font-size:14px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-llegue{width:50px;height:50px;flex:none;border-radius:50%;cursor:pointer;
  background:var(--green-dim);border:1px solid rgba(45,255,136,.45);
  display:flex;align-items:center;justify-content:center}
.nv-llegue svg{width:22px;height:22px;fill:var(--green)}
.nv-salir{flex:none;min-height:50px;padding:0 22px;border:none;border-radius:999px;cursor:pointer;
  background:var(--red);color:#fff;font-family:var(--sans);font-size:15px;font-weight:800;
  box-shadow:0 6px 22px rgba(255,59,92,.35)}
.nv-salir:active,.nv-llegue:active,.nv-btn:active,.nv-centrar:active{transform:scale(.97)}
/* Hoja de instrucciones (lista de giros) */
.nv-pasos{position:absolute;left:12px;right:12px;z-index:1195;
  bottom:calc(var(--nv-barra-b) + var(--nv-barra-h,82px) + 12px);
  max-height:70vh;max-height:min(70vh,70dvh);display:flex;flex-direction:column;border-radius:22px;
  background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border-strong);box-shadow:0 20px 60px rgba(0,0,0,.6)}
body:not(.navegando) .nv-pasos{bottom:var(--nv-barra-b)}   /* desde la tarjeta de ruta */
.nv-pasos[hidden]{display:none!important}
.nv-pasos-head{display:flex;align-items:center;gap:10px;padding:14px 12px 10px 18px;border-bottom:1px solid var(--border)}
.nv-pasos-head b{font-family:var(--display);font-size:16px;flex:none}
.nv-pasos-head span{flex:1;min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-pasos-head .x-btn{width:36px;height:36px;flex:none}
.nv-pasos-lista{list-style:none;margin:0;padding:6px 10px 10px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nv-paso{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--border)}
.nv-paso:last-child{border-bottom:none}
.nv-paso i{width:36px;height:36px;flex:none;border-radius:11px;background:var(--teal-dim);
  display:flex;align-items:center;justify-content:center}
.nv-paso i svg{width:20px;height:20px;fill:var(--teal)}
.nv-paso span{flex:1;min-width:0;font-size:14px;color:var(--text)}
.nv-paso small{flex:none;font-family:var(--mono);font-size:12px;color:var(--muted)}
.nv-paso.hecho{opacity:.45}
.nv-paso.actual{background:var(--teal-dim);border-radius:12px}
/* Botón "Instrucciones" en la tarjeta de ruta */
.v-instr{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;
  margin-top:12px;border-radius:999px;cursor:pointer;background:transparent;
  border:1px solid var(--border-strong);color:var(--text);font-family:var(--sans);font-size:14px;font-weight:600}
.v-instr svg.li{width:17px;height:17px;color:var(--teal)}
/* Mientras navegas: fuera el banner viejo (sigue alimentando los datos), el
   buscador, la hoja de la ruta y los flotantes que estorban. El SOS se queda. */
body.navegando #nav-banner,body.navegando #nav-luego,body.navegando .btn-recentrar,
body.navegando .topbar,body.navegando .cards,body.navegando .cat-chips,
body.navegando .gps-chip,body.navegando .btn-reportar,body.navegando .btn-trafico,
body.navegando .btn-ubicacion,body.navegando .marca,body.navegando .btn-hablar{display:none!important}
/* El modo conducción (rail/Home), el Home y el SOS pasan por encima */
body.conduciendo #nv,body.conduciendo #nv-pasos,body.en-home #nv,body.en-home #nv-pasos,
body.sos-activo #nv-pasos{display:none!important}
/* Avisos: debajo de la tarjeta del giro, nunca encima */
body.navegando.en-viaje:not(.conduciendo):not(.buscando) #toast{bottom:auto;
  top:calc(var(--nv-izq-h,230px) + 28px + env(safe-area-inset-top,0px))}
body.navegando.en-viaje:not(.conduciendo) #check-vivo,
body.navegando.en-viaje:not(.conduciendo) #alerta-circulo{
  top:calc(var(--nv-izq-h,230px) + 28px + env(safe-area-inset-top,0px))}

/* ── Celular: la barra va sobre el menú inferior; el SOS sube encima de ella ── */
@media(max-width:1024px){
  :root{--nv-barra-b:calc(84px + env(safe-area-inset-bottom,0px))}
  .nv{z-index:1190}
  body.navegando.en-viaje:not(.conduciendo):not(.buscando) #toast{left:12px;right:12px}
  body.con-ruta.navegando:not(.conduciendo):not(.buscando) .rail-sos{
    bottom:calc(96px + env(safe-area-inset-bottom,0px) + var(--nv-barra-h,82px))}
}
/* ── PC y pantalla del carro: todo más grande y centrado en el mapa ── */
@media(min-width:1025px){
  .nv-izq{left:20px;top:20px;width:min(34vw,460px)}
  .nv-giro{padding:18px 20px;border-radius:26px}
  .nv-flecha{width:80px;height:80px;border-radius:20px}
  .nv-flecha svg{width:50px;height:50px}
  .nv-giro-txt b{font-size:46px}
  .nv-giro-txt span{font-size:18px;margin-top:7px}
  .nv-luego{font-size:14px}
  .nv-vel{width:92px;height:92px}
  .nv-vel b{font-size:30px}
  .nv-vel span{font-size:11px}
  .nv-col{right:20px;top:20px}
  .nv-btn{width:54px;height:54px}
  .nv-btn svg{width:24px;height:24px}
  .nv-barra,.nv-pasos{left:50%;right:auto;transform:translateX(-50%);width:min(620px,calc(100% - 48px))}
  .nv-barra{padding:16px 16px 16px 22px}
  .nv-eta b{font-size:34px}
  .nv-eta span{font-size:15px}
  .nv-salir{min-height:54px;font-size:16px;padding:0 26px}
  .nv-llegue{width:54px;height:54px}
}
/* ── Pantalla muy ancha (carro / monitor): la tarjeta del giro aún más grande ── */
@media(min-width:1400px){
  .nv-izq{width:min(30vw,540px)}
  .nv-flecha{width:96px;height:96px}
  .nv-flecha svg{width:60px;height:60px}
  .nv-giro-txt b{font-size:56px}
  .nv-giro-txt span{font-size:20px}
  .nv-eta b{font-size:38px}
}
/* ── Texto grande (Perfil → Accesibilidad) ── */
body.texto-grande .nv-giro-txt b{font-size:42px}
body.texto-grande .nv-giro-txt span{font-size:18px}
body.texto-grande .nv-luego{font-size:15px}
body.texto-grande .nv-vel b{font-size:28px}
body.texto-grande .nv-eta b{font-size:34px}
body.texto-grande .nv-eta span{font-size:16px}
body.texto-grande .nv-salir{font-size:17px;min-height:56px}
body.texto-grande .nv-centrar{font-size:16px}
body.texto-grande .nv-paso span{font-size:16.5px}
body.texto-grande .nv-paso small{font-size:14px}
/* ── Modo día ── */
html[data-tema="dia"] .nv-giro,html[data-tema="dia"] .nv-vel,html[data-tema="dia"] .nv-btn,
html[data-tema="dia"] .nv-centrar,html[data-tema="dia"] .nv-barra,html[data-tema="dia"] .nv-pasos,
html[data-tema="dia"] .nv-demo{background:rgba(255,255,255,.94);box-shadow:0 6px 24px rgba(15,23,42,.14)}
html[data-tema="dia"] .nv-gps{color:#8A5A00;background:rgba(196,122,0,.12);border-color:rgba(196,122,0,.35)}
html[data-tema="dia"] .nv-salir{color:#fff}
@media(prefers-reduced-motion:reduce){.nv-flecha{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════
   TARJETA DE RUTA COMPACTA (estilo app de navegación) + HOJA "INSTRUCCIONES"
   Fila 1 destino · Fila 2 [Instrucciones][Comenzar][Guardar] · Fila 3 modos ·
   Fila 4 "4 h 26 min · 254 km · Llegas 10:38 p. m. · Riesgo bajo".
   Cabe en ~215 px en un celular de 375x600; si no cabe, la hoja se desplaza.
   ══════════════════════════════════════════════════════════════════════════ */
#card-viaje{padding:14px 14px 12px}
.vj-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}
.vj-info{flex:1;min-width:0}
#card-viaje .ruta-etq{display:block;margin:0 0 2px;font-size:9.5px;letter-spacing:.22em}
#card-viaje .viaje-dest{display:block;margin:0;font-size:17px;line-height:1.25;color:var(--text)}
.vj-nombre{font-family:var(--display);font-weight:700;color:var(--text)}
.vj-km{font-weight:600;color:var(--muted);font-size:14px;white-space:nowrap}
.vj-tipo{display:block;font-size:12px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vj-btns{display:flex;gap:6px;flex:none}
.vj-btns .x-btn{width:30px;height:30px}

/* Tres botones en UNA fila: la tarjeta mide 330 px en PC y ~355 px en iPhone,
   así que cada botón tiene ≈96–104 px. Tercios iguales, letra 11.5 px y sin
   icono en los secundarios (icono + "Instrucciones" no caben en ese ancho). */
.vj-acciones{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.vj-acciones .btn{margin-top:0;height:44px;min-height:44px;flex:1;padding:0 6px;gap:5px;font-size:13px;white-space:nowrap}
.vj-acciones .btn svg{width:16px;height:16px}
.vj-acciones .btn span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#viaje-llegue{flex:1 1 100%}
.vj-sec{flex:1;min-width:0;min-height:44px;padding:0 6px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--border-strong);color:var(--text-2);
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:4px;
  -webkit-tap-highlight-color:transparent}
.vj-sec span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.vj-sec:hover{border-color:var(--teal);color:var(--text)}
.vj-sec svg.li{display:none;width:14px;height:14px;color:var(--teal);flex:none}
@media(min-width:480px) and (max-width:1024px){.vj-sec svg.li{display:block}} /* tablet / celular ancho: sí cabe */
.vj-sec[disabled]{opacity:.6;cursor:default}
.vj-sec.guardado{border-color:rgba(45,255,136,.5);color:var(--green)}
.vj-sec.guardado svg.li{color:var(--green)}

#card-viaje .modos{gap:6px;margin-bottom:10px}
#card-viaje .modos .chip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 4px;
  min-height:38px;padding:5px 4px;font-size:12px;line-height:1.1}
#card-viaje .modos .chip svg.li{margin-right:0}
.chip-t{flex-basis:100%;text-align:center;font-size:10.5px;font-weight:700;color:var(--muted)}
.chip-t:empty{display:none}
.chip.selected .chip-t{color:var(--teal)}

.vj-linea{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;
  font-size:12.5px;color:var(--text-2);line-height:1.4}
.vj-linea > *{white-space:nowrap}
.vj-linea b{font-family:var(--sans);font-weight:700;color:var(--text)}
.vj-linea #v-eta{font-size:15px}
.vj-linea .vj-sep{color:var(--faint)}
.vj-linea #v-llegas{color:var(--teal);font-weight:700}
#v-riesgo{text-transform:lowercase}
#v-riesgo.green{color:var(--green)}
#v-riesgo.amber{color:var(--amber)}
#v-riesgo.red{color:var(--red)}
#card-viaje #v-trafico{margin-top:6px}
#card-viaje #ruta-pref{margin:0 0 10px}
#card-viaje #ruta-pref .chip{min-height:34px;padding:6px 10px;font-size:12px}
#card-viaje .v-followers{margin-top:8px}
#card-viaje .v-demo{margin-top:6px;padding:4px}

@media(max-width:1024px){
  /* La hoja usa la altura REAL visible: 100vh de respaldo (iOS viejo, sin dvh) y
     100dvh (Safari 15.4+, Chrome). Deja libre la barra superior y el menú. */
  body.con-ruta .cards{
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
    max-height:calc(100vh - 160px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - 160px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #card-viaje{padding:14px 14px 12px}
  #card-viaje .viaje-dest{font-size:17px}
  #card-viaje .modos .chip{min-height:40px}
  #viaje-iniciar{min-height:44px;font-size:13px}
  #viaje-llegue{min-height:46px}
  /* Hoja minimizada (flechita): además del destino se sigue viendo la línea
     "tiempo · km · Llegas · Riesgo" (antes la hora de llegada iba en el nombre) */
  body.viaje-mini #card-viaje > #v-linea{display:flex!important}
}
@media(max-width:360px){
  .vj-sec{font-size:11px;padding:0 3px;letter-spacing:-.02em}
  .vj-acciones .btn{font-size:12.5px;padding:0 5px}
  .vj-linea{font-size:12px}
}

/* Modo "texto grande" (Perfil): la tarjeta compacta también crece. Los botones
   pasan a dos filas (Comenzar arriba a todo el ancho) para que quepan a 16 px. */
body.texto-grande #card-viaje .viaje-dest{font-size:19px}
body.texto-grande .vj-linea{font-size:14.5px}
body.texto-grande .vj-linea #v-eta{font-size:18px}
body.texto-grande .vj-sec{font-size:13px;min-height:50px}
body.texto-grande .vj-acciones .btn,body.texto-grande #viaje-iniciar{flex:1 1 100%;order:-1;height:auto;min-height:54px;font-size:16px}
body.texto-grande #card-viaje .modos .chip{font-size:14px;min-height:46px}

/* ── Hoja "Instrucciones" (lista de giros) ──────────────────────────────── */
.ins-hoja{position:fixed;inset:0;z-index:1255;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px);animation:rep-fondo .2s ease both}
.ins-hoja[hidden]{display:none}
.ins-caja{width:min(520px,100%);display:flex;flex-direction:column;
  max-height:calc(100vh - 60px - env(safe-area-inset-top,0px));
  max-height:calc(100dvh - 60px - env(safe-area-inset-top,0px));
  border-radius:24px 24px 0 0;background:rgba(7,11,19,.97);
  border:1px solid var(--border-strong);border-bottom:none;backdrop-filter:blur(24px);
  padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:rep-sube .28s cubic-bezier(.2,.7,.3,1) both}
.ins-asa{width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);margin:0 auto 12px;flex:none}
.ins-head{display:flex;align-items:flex-start;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border);flex:none}
.ins-info{flex:1;min-width:0}
.ins-etq{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ins-head h3{font-family:var(--display);font-size:18px;font-weight:700;margin-top:2px;line-height:1.2;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ins-resumen{font-size:13px;color:var(--teal);font-weight:700;margin-top:3px}
.ins-x{width:34px;height:34px;flex:none}
.ins-lista{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:4px 0;scrollbar-width:thin}
.ins-paso{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--border)}
.ins-paso:last-child{border-bottom:none}
.ins-ico{width:40px;height:40px;flex:none;border-radius:12px;background:var(--teal-dim);
  border:1px solid rgba(139,199,255,.35);display:flex;align-items:center;justify-content:center}
.ins-ico svg{width:22px;height:22px;fill:var(--teal)}
.ins-fin .ins-ico{background:var(--green-dim);border-color:rgba(45,255,136,.4)}
.ins-fin .ins-ico svg{fill:var(--green)}
.ins-txt{flex:1;min-width:0}
.ins-txt b{display:block;font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.ins-txt small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ins-dist{flex:none;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--text-2);white-space:nowrap}
.ins-ir{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;width:100%;min-height:48px;
  margin-top:10px;border:none;border-radius:999px;cursor:pointer;background:#fff;color:#000;
  font-family:var(--sans);font-size:14.5px;font-weight:800}
.ins-ir svg{width:17px;height:17px;fill:currentColor}
body.en-viaje .ins-ir{display:none}   /* ya en viaje: no hay nada que comenzar */
@media(min-width:1025px){
  /* En PC la hoja vive a la derecha, junto a la tarjeta de ruta (no tapa el mapa) */
  .ins-hoja{align-items:flex-start;justify-content:flex-end;padding:84px 362px 0 0;
    background:transparent;backdrop-filter:none;pointer-events:none}
  .ins-caja{pointer-events:auto;width:360px;border-radius:20px;border-bottom:1px solid var(--border-strong);
    max-height:calc(100vh - 120px);padding:14px 16px 16px;animation:fl-fade .22s ease both}
  .ins-asa{display:none}
}
@media(prefers-reduced-motion:reduce){.ins-hoja,.ins-caja{animation:none}}

/* ══════════════════════════════════════════════════════════════════════════
   MODO CARRO + NAVEGACIÓN EN PANTALLAS GRANDES (carro / PC ≥1024 px, táctil)
   Va al final para ganar a las reglas base sin tocarlas.
   ══════════════════════════════════════════════════════════════════════════ */
/* Barra de llegada: "3 h 5 min" grande + "(211.0 km · 9:12 p. m.)" */
.cd-eta{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:14px}
.cd-eta b{font-family:var(--sans);font-size:34px;font-weight:500;letter-spacing:-.02em;color:#fff;line-height:1}
.cd-eta span{font-size:15px;color:var(--muted)}
html[data-tema="dia"] .cd-eta b{color:var(--text)}
.cd-datos{display:none}                       /* la barra de llegada los reemplaza */
/* "Salida" en rojo; "Comenzar" (ruta trazada, aún sin arrancar) en el azul de la app */
.cd-fin{background:var(--red);color:#fff;letter-spacing:.06em;text-transform:uppercase}
.cd-fin.cd-fin--comenzar{background:var(--teal);color:#000}
/* Silenciar la voz: burbuja táctil arriba a la derecha (≥56 px) */
.conduccion .cd-voz{position:absolute;right:20px;top:calc(84px + env(safe-area-inset-top,0px));z-index:3;
  width:56px;height:56px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:rgba(9,12,17,.78);border:1px solid var(--border);backdrop-filter:blur(12px);color:var(--teal)}
.cd-voz svg{width:22px;height:22px;fill:var(--teal)}
.cd-voz.off{color:var(--amber);border-color:rgba(255,176,32,.45)}
.cd-voz.off svg{fill:var(--amber)}
.cd--intro .cd-voz{opacity:0}
.cd--hud .cd-voz{pointer-events:auto}
html[data-tema="dia"] .cd-voz{background:rgba(255,255,255,.93)}
/* "Volver a centrar" (el #btn-recentrar de siempre) por encima de la barra */
body.conduciendo .btn-recentrar{z-index:1501;bottom:calc(250px + env(safe-area-inset-bottom,0px));
  min-height:56px;padding:0 22px;font-size:15px}
/* Botones "Modo carro" encendidos */
#rail-carro.activo,#viaje-carro.activo{border-color:var(--teal);background:rgba(139,199,255,.16);color:#fff}
#viaje-carro{margin-top:8px}
#viaje-carro svg.li{width:18px;height:18px}
.hm-acc-grid .acc-carro{grid-column:1 / -1;flex-direction:row;justify-content:center;min-height:56px;gap:10px}

@media (min-width:1024px){
  /* Sin menús pequeños: el carril lateral y el botón flotante se retiran; el mapa ocupa todo */
  body.modo-carro .rail{display:none!important}
  body.modo-carro .btn-hablar{display:none!important}
  /* Tarjeta de giro GRANDE arriba a la izquierda: flecha + "98 m" + calle */
  .cd--hud .cd-giro{position:absolute;left:28px;top:calc(92px + env(safe-area-inset-top,0px));
    margin:0;max-width:none;width:min(440px,36vw);padding:24px 26px;gap:22px;border-radius:24px}
  .cd--hud .cd-giro svg{width:72px;height:72px}
  .cd--hud .cd-giro b{font-size:48px;line-height:1}
  .cd--hud .cd-giro span{font-size:22px;margin-top:8px;line-height:1.25}
  /* Burbuja de velocidad: abajo a la izquierda, encima de la barra */
  .cd--hud .cd-vel{left:28px;bottom:calc(140px + env(safe-area-inset-bottom,0px));
    padding:14px 24px;border-radius:999px;background:rgba(9,12,17,.72);border:1px solid var(--border);
    backdrop-filter:blur(12px);text-align:center}
  .cd--hud .cd-vel b{font-size:52px}
  .cd--hud .cd-vel span{font-size:12px}
  /* Silenciar: arriba a la derecha, 64 px */
  .conduccion .cd-voz{right:28px;top:calc(92px + env(safe-area-inset-top,0px));width:64px;height:64px}
  .cd-voz svg{width:26px;height:26px}
  /* Barra de llegada abajo, a todo lo ancho: tiempo grande · (km · hora) · Hablar · Salida */
  .cd--hud .cd-panel{position:absolute;left:28px;right:28px;bottom:calc(24px + env(safe-area-inset-bottom,0px));
    max-width:none;width:auto;margin:0;padding:18px 26px;border-radius:24px;
    display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"eta hablar fin" "dest hablar fin";
    column-gap:18px;row-gap:4px;align-items:center}
  .cd--hud .cd-eta{grid-area:eta;margin:0}
  .cd--hud .cd-eta b{font-size:46px}
  .cd--hud .cd-eta span{font-size:20px}
  .cd--hud .cd-destino{grid-area:dest;margin:0;padding:0;border:0}
  .cd--hud .cd-destino span{font-size:18px;color:var(--muted)}
  .cd--hud .cd-mini{display:none}
  .cd--hud .cd-hablar{grid-area:hablar;width:auto;margin:0;min-height:64px;padding:0 24px;font-size:15px}
  .cd--hud .cd-fin{grid-area:fin;width:auto;margin:0;min-height:64px;padding:0 32px;font-size:17px}
  #conduccion.cd-min .cd-panel{padding:18px 26px}
  /* Todo lo que se toca manejando: ≥56 px */
  .cd-salir{width:64px;height:64px;min-width:64px;min-height:64px}
  .cd-salir svg{width:22px;height:22px}
  .cd-titulo{font-size:14px}
  .cd-agente{font-size:13px;padding:10px 18px}
  body.conduciendo .btn-recentrar{left:auto;right:28px;transform:none;
    bottom:calc(150px + env(safe-area-inset-bottom,0px));min-height:56px;padding:0 22px;font-size:16px}
}

/* ══════════════════════════════════════════════════════════════════════════
   MODO CARRO + NAVEGACIÓN EN PANTALLAS GRANDES (carro / PC ≥1025 px, táctil)
   Va al final para ganar a las reglas base sin tocarlas. El corte es 1025 px
   porque es el de toda la app (.solo-pc / .solo-movil / rail lateral).
   ══════════════════════════════════════════════════════════════════════════ */
/* Barra de llegada: "3 h 5 min" grande + "(211.0 km · 9:12 p. m.)" */
.cd-eta{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:14px}
.cd-eta b{font-family:var(--sans);font-size:34px;font-weight:500;letter-spacing:-.02em;color:#fff;line-height:1}
.cd-eta span{font-size:15px;color:var(--muted)}
html[data-tema="dia"] .cd-eta b{color:var(--text)}
.cd-datos{display:none}                       /* la barra de llegada los reemplaza */
/* "Salida" en rojo; "Comenzar" (ruta trazada, aún sin arrancar) en el azul de la app */
.cd-fin{background:var(--red);color:#fff;letter-spacing:.06em;text-transform:uppercase}
.cd-fin.cd-fin--comenzar{background:var(--teal);color:#000}
/* Silenciar la voz: burbuja táctil (≥56 px). En el celular va EN EL FLUJO de la
   columna, pegada a la derecha justo debajo de la tarjeta de giro: así nunca se
   monta sobre el texto del giro (la tarjeta ocupa todo el ancho a 375-430 px). */
.conduccion .cd-voz{position:relative;z-index:3;align-self:flex-end;margin-top:12px;
  width:56px;height:56px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:rgba(9,12,17,.78);border:1px solid var(--border);backdrop-filter:blur(12px);color:var(--teal)}
.cd-voz svg{width:22px;height:22px;fill:var(--teal)}
.cd-voz.off{color:var(--amber);border-color:rgba(255,176,32,.45)}
.cd-voz.off svg{fill:var(--amber)}
.cd--intro .cd-voz{opacity:0}
.cd--hud .cd-voz{pointer-events:auto;animation:cd-hud-in .5s ease both}
html[data-tema="dia"] .cd-voz{background:rgba(255,255,255,.93)}
/* "Volver a centrar" (el #btn-recentrar de siempre) por encima del panel, no debajo
   (el panel del celular con la barra de llegada mide ~290 px desde abajo) */
body.conduciendo .btn-recentrar{z-index:1501;bottom:calc(310px + env(safe-area-inset-bottom,0px));
  min-height:56px;padding:0 22px;font-size:15px}
/* Botones "Modo carro" encendidos (var(--text): legible también en modo día) */
#rail-carro.activo,#viaje-carro.activo{border-color:var(--teal);background:rgba(139,199,255,.16);color:var(--text)}
#viaje-carro{margin-top:8px}
#viaje-carro svg.li{width:18px;height:18px}
.hm-acc-grid .acc-carro{grid-column:1 / -1;flex-direction:row;justify-content:center;min-height:56px;gap:10px}

@media (min-width:1025px){
  /* Sin menús pequeños: el carril lateral y el botón flotante se retiran; el mapa ocupa todo */
  body.modo-carro .rail{display:none!important}
  body.modo-carro .btn-hablar{display:none!important}
  /* Tarjeta de giro GRANDE arriba a la izquierda: flecha + "98 m" + calle */
  .cd--hud .cd-giro{position:absolute;left:28px;top:calc(92px + env(safe-area-inset-top,0px));
    margin:0;max-width:none;width:min(440px,36vw);padding:24px 26px;gap:22px;border-radius:24px}
  .cd--hud .cd-giro svg{width:72px;height:72px}
  .cd--hud .cd-giro b{font-size:48px;line-height:1}
  .cd--hud .cd-giro span{font-size:22px;margin-top:8px;line-height:1.25}
  /* Burbuja de velocidad: abajo a la izquierda, encima de la barra */
  .cd--hud .cd-vel{left:28px;bottom:calc(160px + env(safe-area-inset-bottom,0px));
    padding:14px 24px;border-radius:999px;background:rgba(9,12,17,.72);border:1px solid var(--border);
    backdrop-filter:blur(12px);text-align:center}
  .cd--hud .cd-vel b{font-size:52px}
  .cd--hud .cd-vel span{font-size:12px}
  /* Silenciar: aquí sí flotante, arriba a la derecha, 64 px (la tarjeta de giro queda a la izquierda) */
  .conduccion .cd-voz{position:absolute;right:28px;top:calc(92px + env(safe-area-inset-top,0px));
    margin:0;width:64px;height:64px}
  .cd-voz svg{width:26px;height:26px}
  /* Barra de llegada abajo, a todo lo ancho: tiempo grande · (km · hora) · Hablar · Salida */
  .cd--hud .cd-panel{position:absolute;left:28px;right:28px;bottom:calc(24px + env(safe-area-inset-bottom,0px));
    max-width:none;width:auto;margin:0;padding:18px 26px;border-radius:24px;
    display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"eta hablar fin" "dest hablar fin";
    column-gap:18px;row-gap:4px;align-items:center}
  .cd--hud .cd-eta{grid-area:eta;margin:0}
  .cd--hud .cd-eta b{font-size:46px}
  .cd--hud .cd-eta span{font-size:20px}
  .cd--hud .cd-destino{grid-area:dest;margin:0;padding:0;border:0}
  .cd--hud .cd-destino span{font-size:18px;color:var(--muted)}
  .cd--hud .cd-mini{display:none}
  .cd--hud .cd-hablar{grid-area:hablar;width:auto;margin:0;min-height:64px;padding:0 24px;font-size:15px}
  .cd--hud .cd-fin{grid-area:fin;width:auto;margin:0;min-height:64px;padding:0 32px;font-size:17px}
  #conduccion.cd-min .cd-panel{padding:18px 26px}
  /* Todo lo que se toca manejando: ≥56 px */
  .cd-salir{width:64px;height:64px;min-width:64px;min-height:64px}
  .cd-salir svg{width:22px;height:22px}
  .cd-titulo{font-size:14px}
  .cd-agente{font-size:13px;padding:10px 18px}
  body.conduciendo .btn-recentrar{left:auto;right:28px;transform:none;
    bottom:calc(160px + env(safe-area-inset-bottom,0px));min-height:56px;padding:0 22px;font-size:16px}
}

/* ── Pantalla de entrada (Google / correo / invitado) ── */
#entrada .btn{width:100%}
.en-google{background:#fff;color:#111;border:1px solid var(--border-strong);box-shadow:0 6px 22px rgba(0,0,0,.25)}
.en-google:hover{filter:brightness(.96)}
#entrada .btn-primary{margin-top:10px}
#entrada .bv-legal{margin-top:18px;font-size:13.5px}
html[data-tema="dia"] .en-google{box-shadow:0 6px 22px rgba(15,23,42,.12)}

/* ── Modo día: hoja de instrucciones, botón Comenzar y avisos (antes quedaban
      oscuros con letra oscura) ── */
html[data-tema="dia"] .ins-hoja{background:rgba(15,23,42,.28)}
html[data-tema="dia"] .ins-caja{background:rgba(255,255,255,.98);box-shadow:0 -20px 60px rgba(15,23,42,.18)}
html[data-tema="dia"] .ins-asa{background:rgba(15,23,42,.18)}
html[data-tema="dia"] .ins-ico{border-color:rgba(31,111,229,.35)}
html[data-tema="dia"] .ins-fin .ins-ico{border-color:rgba(14,159,87,.4)}
html[data-tema="dia"] .ins-ir{background:#0B1220;color:#fff}
html[data-tema="dia"] body.con-ruta:not(.en-viaje) #viaje-iniciar{box-shadow:0 -12px 18px rgba(255,255,255,.96)}
html[data-tema="dia"] #toast{background:rgba(255,255,255,.97);color:var(--text);box-shadow:0 10px 30px rgba(15,23,42,.2)}
html[data-tema="dia"] #toast.green{border-color:rgba(14,159,87,.55)}
html[data-tema="dia"] #toast.red{border-color:rgba(224,36,63,.55)}
/* ── "¿Olvidaste tu contraseña?" en el login ── */
.lg-olvide{display:block;text-align:right;margin-top:8px;font-size:12.5px;color:var(--muted);cursor:pointer;text-decoration:underline}
.lg-olvide:hover{color:var(--text)}
.lg-ayuda{margin-top:10px;padding:10px 14px;border:1px dashed rgba(139,199,255,.4);border-radius:12px;font-size:12.5px;color:var(--muted);text-align:left;line-height:1.45}
.lg-ayuda b{color:var(--text)}
html[data-tema="dia"] .lg-ayuda{border-color:rgba(31,111,229,.45)}