/* ============================================================
   Rutas Tuxtla v5 · app.css
   Sistema visual: utilitario editorial mexicano
   Dominante: rojo Alerta Chiapas (#BE1623)
   Tipografía: Bricolage Grotesque (display) + DM Sans (UI)
   ============================================================ */

/* ===== Tokens ===== */
:root {
  /* Color · modo claro */
  --bg: #FAF8F5;
  --bg-elev: #FFFFFF;
  --surf-1: #FFFFFF;
  --surf-2: #F4F1EC;
  --surf-3: #ECE7DF;
  --line: #E0DAD0;
  --line-strong: #C9C0B0;
  --txt-1: #1A1614;
  --txt-2: #5A534B;
  --txt-3: #8A8377;
  --txt-on-ac: #FFFFFF;

  /* Acento Alerta Chiapas */
  --ac: #BE1623;
  --ac-tint: #FCE9EB;
  --ac-dark: #8B0F1A;

  /* Semánticos */
  --ok: #15803D;
  --ok-tint: #DCFCE7;
  --warn: #B45309;
  --info: #1D4ED8;

  /* Tipografía */
  --font-display: 'Bricolage Grotesque', 'DM Serif Display', Georgia, serif;
  --font-ui: 'DM Sans', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Escala tipográfica */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* Espaciado */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(26, 22, 20, .06), 0 1px 1px rgba(26, 22, 20, .04);
  --sh-md: 0 4px 12px rgba(26, 22, 20, .08), 0 2px 4px rgba(26, 22, 20, .04);
  --sh-lg: 0 12px 32px rgba(26, 22, 20, .12), 0 4px 12px rgba(26, 22, 20, .08);
  --sh-xl: 0 24px 48px rgba(26, 22, 20, .18), 0 8px 24px rgba(26, 22, 20, .10);
  --sh-press: inset 0 1px 2px rgba(26, 22, 20, .08);

  /* Motion */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 440ms;

  /* Safe area */
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);

  /* Layout */
  --topbar-h: 64px;
  --tabbar-h: 56px;
}

/* ===== Modo oscuro ===== */
[data-theme="dark"] {
  --bg: #0E0B0A;
  --bg-elev: #161312;
  --surf-1: #1C1817;
  --surf-2: #252120;
  --surf-3: #2E2A28;
  --line: #2E2A28;
  --line-strong: #3D3835;
  --txt-1: #F3EFEA;
  --txt-2: #B5ADA3;
  --txt-3: #7A7268;
  --ac: #EF4444;
  --ac-tint: #2A1314;
  --ac-dark: #FCA5A5;
  --ok: #4ADE80;
  --ok-tint: #15803D33;
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-md: 0 4px 12px rgba(0, 0, 0, .5);
  --sh-lg: 0 12px 32px rgba(0, 0, 0, .6);
  --sh-xl: 0 24px 48px rgba(0, 0, 0, .7);
}

/* ===== Reset y base ===== */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--txt-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' on, 'cv11' on;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
input:focus, button:focus { outline: none; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* ===== Layout principal ===== */
.app {
  height: 100dvh;
  display: grid;
  grid-template-areas:
    "topbar"
    "main";
  grid-template-rows: auto 1fr;
  position: relative;
}

@media (min-width: 900px) {
  .app {
    grid-template-areas:
      "topbar topbar"
      "sidebar main";
    grid-template-columns: 420px 1fr;
    grid-template-rows: auto 1fr;
  }
}

/* ===== Topbar ===== */
.topbar {
  grid-area: topbar;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  padding-top: var(--st);
  padding-left: max(var(--s-4), var(--sl));
  padding-right: max(var(--s-4), var(--sr));
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--sh-sm);
}
.topbar-row {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-2);
  min-height: var(--topbar-h);
}
.brand { display: flex; align-items: center; gap: var(--s-3); flex: 1; min-width: 0; }
.brand-mark {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  object-fit: cover;
  background: var(--ac);
  box-shadow: var(--sh-sm);
  display: block;
}
.brand-text { min-width: 0; }
.brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--txt-1);
}
.brand-sub {
  font-size: var(--fs-xs);
  color: var(--txt-2);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.topbar-actions { display: flex; gap: var(--s-1); }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  color: var(--txt-1);
  transition: background var(--dur-fast) var(--ease-ios), transform var(--dur-fast) var(--ease-ios);
  position: relative;
}
.icon-btn:hover { background: var(--surf-2); }
.icon-btn:active { background: var(--surf-3); transform: scale(0.92); }
.icon-btn .material-symbols-rounded {
  font-size: 22px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  transition: font-variation-settings var(--dur-fast);
}
.icon-btn[aria-pressed="true"] {
  color: var(--ac);
}
.icon-btn[aria-pressed="true"] .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

/* ===== Segmented tab bar ===== */
.seg {
  display: flex;
  background: var(--surf-2);
  border-radius: var(--r-full);
  padding: 3px;
  position: relative;
  margin-bottom: var(--s-3);
  isolation: isolate;
}
.seg-btn {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-2);
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  transition: color var(--dur-base) var(--ease-ios), transform var(--dur-fast);
  position: relative; z-index: 2;
  white-space: nowrap;
  cursor: pointer;
}
.seg-btn:hover { color: var(--txt-1); }
.seg-btn:active { transform: scale(0.97); }
.seg-btn.active {
  color: var(--ac);
  font-weight: 700;
}
.seg-btn.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 600;
  transform: scale(1.1);
}
.seg-btn .material-symbols-rounded {
  font-size: 18px;
  transition: transform var(--dur-base) var(--ease-snap), font-variation-settings var(--dur-base);
}
.seg-indicator {
  position: absolute;
  top: 3px; bottom: 3px;
  background: var(--bg-elev);
  border-radius: var(--r-full);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-base) var(--ease-snap), width var(--dur-base) var(--ease-snap);
  z-index: 1;
  pointer-events: none;
}

/* ===== Mapa ===== */
.map-area {
  grid-area: main;
  position: relative;
  background: var(--surf-2);
  overflow: hidden;
}
#mapa {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.leaflet-container {
  background: var(--surf-2);
  font-family: var(--font-ui);
  /* Patrón sutil si no cargan tiles, para que no sea blanco vacío */
  background-image:
    linear-gradient(45deg, var(--surf-3) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surf-3) 25%, transparent 25%);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}
.leaflet-control-zoom {
  border: 0 !important;
  margin-top: calc(var(--st) + var(--s-3)) !important;
  margin-right: calc(var(--sr) + var(--s-3)) !important;
}
.leaflet-control-zoom a {
  background: var(--bg-elev) !important;
  color: var(--txt-1) !important;
  border: 1px solid var(--line) !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  font-size: 18px !important;
  box-shadow: var(--sh-sm);
}
.leaflet-control-zoom a:first-child { border-radius: var(--r-md) var(--r-md) 0 0 !important; }
.leaflet-control-zoom a:last-child { border-radius: 0 0 var(--r-md) var(--r-md) !important; }
.leaflet-control-attribution {
  font-family: var(--font-ui);
  font-size: 10px;
  background: rgba(255,255,255,.85) !important;
  border-radius: var(--r-sm);
  padding: 2px 6px !important;
}
[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(22,19,18,.85) !important;
  color: var(--txt-2);
}

/* Label de ruta */
.ruta-label {
  background: transparent !important;
  border: 0 !important;
}
.ruta-label span {
  background: var(--bg-elev);
  color: var(--txt-1);
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  box-shadow: var(--sh-sm);
  white-space: nowrap;
  border: 1px solid var(--line);
}

/* ===== Sidebar desktop ===== */
.sidebar {
  grid-area: sidebar;
  display: none;
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  overflow: hidden;
  flex-direction: column;
}
@media (min-width: 900px) {
  .sidebar { display: flex; }
}
.panels {
  flex: 1; overflow-y: auto;
  padding: var(--s-4);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.panels::-webkit-scrollbar { width: 6px; }
.panels::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

/* ===== Bottom sheet (móvil) ===== */
/* ════════════════════════════════════════════════════════════════
   BOTTOM SHEET — BULLET-PROOF PARA TODOS LOS CELULARES
   Sin depender de dvh, con fallback robusto, gestos correctos
   ════════════════════════════════════════════════════════════════ */
.bs {
  position: fixed;
  left: 0; right: 0;
  /* CLAVE: bottom 0 SIEMPRE, sin depender de transform inicial frágil */
  bottom: 0;
  background: var(--bg-elev);
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  z-index: 40;
  padding-bottom: var(--sb);
  display: flex; flex-direction: column;

  /* CLAVE: max-height con fallback - vh primero (universal), luego dvh */
  max-height: 92vh;
  max-height: 92dvh;

  /* CLAVE: height MÍNIMA garantizada — peek SIEMPRE visible (152px + safe area) */
  min-height: calc(152px + var(--sb));

  /* CLAVE: NO touch-action: none en el sheet entero — solo en handle */
  /* touch-action: none ROMPÍA scroll dentro del sheet en Android */
  touch-action: pan-y;

  will-change: transform;
  transition: transform var(--dur-slow) var(--ease-snap);
  border-top: 1px solid var(--line);

  /* SAFETY NET: garantizar visibilidad siempre.
     Sin transform inicial, el sheet ocupa min-height (152px) por defecto.
     JS aplicará el translateY correcto basado en altura real del viewport.
     Si JS nunca corre, el peek sigue visible gracias a min-height. */
  visibility: visible;
  pointer-events: auto;
}
/* Estado inicial: hasta que JS calcule la posición, mostramos solo peek
   con un height fijo que garantiza visibilidad universal */
.bs:not(.bs-ready) {
  height: calc(152px + var(--sb));
  max-height: calc(152px + var(--sb));
  overflow: hidden;
}
.bs.bs-ready {
  /* JS tomó control, ya está usando transform */
  height: 92vh;
  height: 92dvh;
}
@media (min-width: 900px) {
  .bs { display: none; }
}
.bs.dragging {
  transition: none;
}

/* HANDLE AREA — la ÚNICA zona que captura gestos de drag.
   touch-action: none aquí está bien porque es área pequeña. */
.bs-handle-area {
  width: 100%;
  padding: 14px 0 8px;
  display: grid; place-items: center;
  cursor: grab;
  background: transparent;
  border: 0;
  -webkit-tap-highlight-color: transparent;
  /* CLAVE: SOLO aquí touch-action: none, no en todo el sheet */
  touch-action: none;
  /* Aumentar el área tappable a 44px mínimo (guideline iOS/Android) */
  min-height: 44px;
  position: relative;
  z-index: 2;
}
.bs-handle-area:active { cursor: grabbing; }
.bs-handle {
  width: 48px; height: 5px;
  background: var(--line-strong);
  border-radius: var(--r-full);
  transition: background var(--dur-fast), width var(--dur-fast);
  pointer-events: none;  /* el handle visual no captura, solo el área */
}
.bs-handle-area:hover .bs-handle,
.bs-handle-area:focus .bs-handle {
  background: var(--ac);
  width: 64px;
}

/* PEEK área — visible siempre con la primer info */
.bs-peek {
  padding: 6px var(--s-4) var(--s-3);
  display: flex; align-items: center; gap: var(--s-3);
  cursor: pointer;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
  /* Peek SÍ permite touch para que el tap funcione bien */
  touch-action: manipulation;
}

/* === BOTÓN FLOTANTE FALLBACK === */
/* Si por algún motivo el sheet quedó oculto, este botón flotante
   permite recuperarlo. Aparece solo cuando el sheet está colapsado. */
.bs-rescue-btn {
  position: fixed;
  bottom: calc(16px + var(--sb));
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac-dark) 100%);
  color: white;
  border: none;
  display: none;  /* visible solo cuando es necesario */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 45;
  box-shadow:
    0 6px 20px rgba(190, 22, 35, 0.4),
    0 2px 6px rgba(0,0,0,0.15);
  transition: all var(--dur-base) var(--spring-snappy);
  -webkit-tap-highlight-color: transparent;
}
.bs-rescue-btn.visible {
  display: flex;
  animation: rescueAppear 0.4s var(--spring-bouncy);
}
.bs-rescue-btn:active {
  transform: scale(0.92);
}
.bs-rescue-btn .material-symbols-rounded {
  font-size: 28px;
  font-variation-settings: 'FILL' 1, 'wght' 600;
}
@keyframes rescueAppear {
  from { opacity: 0; transform: scale(0.5) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (min-width: 900px) {
  .bs-rescue-btn { display: none !important; }
}
.bs-peek-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--ac-tint);
  color: var(--ac);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bs-peek-icon .material-symbols-rounded { font-size: 20px; }
.bs-peek-text { flex: 1; min-width: 0; }
.bs-peek-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.bs-peek-sub {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  margin-top: 2px;
}
.bs-peek-chevron {
  font-size: 26px !important;
  color: var(--txt-2);
  transition: transform var(--dur-base) var(--ease-snap);
}
.bs.is-expanded .bs-peek-chevron { transform: rotate(180deg); }

.bs-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-2) var(--s-4) calc(var(--s-7) + var(--sb));
  -webkit-overflow-scrolling: touch;
}

/* ===== Search box ===== */
.search {
  position: relative;
  margin-bottom: var(--s-3);
}
.search input {
  width: 100%;
  padding: var(--s-3) var(--s-3) var(--s-3) 42px;
  background: var(--surf-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  transition: background var(--dur-fast), border var(--dur-fast);
}
.search input::placeholder { color: var(--txt-3); }
.search input:focus {
  background: var(--bg-elev);
  border-color: var(--ac);
}
.search .material-symbols-rounded {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--txt-3);
  font-size: 20px;
  pointer-events: none;
}
.search-clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  display: none;
  place-items: center;
  color: var(--txt-2);
}
.search.has-value .search-clear { display: grid; }
.search-clear:active { background: var(--surf-3); }

/* ===== Section heading ===== */
.section-h {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-2);
  padding: var(--s-3) var(--s-1) var(--s-2);
  display: flex; align-items: baseline; gap: 6px;
}
.section-h-count {
  font-family: var(--font-mono);
  color: var(--txt-3);
  font-weight: 500;
  font-size: 10px;
}

/* ===== Stats hero ===== */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: var(--s-3);
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
}
.hero-stats::before { display: none; }

.hero-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--dur-base) var(--spring-snappy);
}
.hero-stat::after { display: none; } /* quitar la línea divisoria vieja */
.hero-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, transparent 0%, rgba(190,22,35,0.03) 100%);
  pointer-events: none;
}
.hero-stat:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
}

/* Icon container */
.hero-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(190,22,35,0.08) 0%, rgba(190,22,35,0.04) 100%);
  border: 1px solid rgba(190,22,35,0.12);
  position: relative;
  z-index: 1;
}
.hero-stat-icon .material-symbols-rounded {
  font-size: 20px;
  color: var(--ac);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* Body: número + label */
.hero-stat-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.hero-stat-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--txt-1);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
}
.hero-stat-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt-2);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estados semánticos del stat de status */
[data-stat-card="status"].stat-ok .hero-stat-icon {
  background: linear-gradient(135deg, rgba(34,197,94,0.12) 0%, rgba(21,128,61,0.06) 100%);
  border-color: rgba(34,197,94,0.25);
}
[data-stat-card="status"].stat-ok .hero-stat-icon .material-symbols-rounded {
  color: #15803D;
}
[data-stat-card="status"].stat-ok .hero-stat-n {
  color: #15803D;
}
[data-theme="dark"] [data-stat-card="status"].stat-ok .hero-stat-icon .material-symbols-rounded,
[data-theme="dark"] [data-stat-card="status"].stat-ok .hero-stat-n {
  color: #4ADE80;
}

[data-stat-card="status"].stat-warn .hero-stat-icon {
  background: linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(180,83,9,0.08) 100%);
  border-color: rgba(245,158,11,0.3);
  animation: statusPulse 2s ease-in-out infinite;
}
[data-stat-card="status"].stat-warn .hero-stat-icon .material-symbols-rounded {
  color: #B45309;
}
[data-stat-card="status"].stat-warn .hero-stat-n {
  color: #B45309;
}
[data-theme="dark"] [data-stat-card="status"].stat-warn .hero-stat-icon .material-symbols-rounded,
[data-theme="dark"] [data-stat-card="status"].stat-warn .hero-stat-n {
  color: #FBBF24;
}

[data-stat-card="status"].stat-off .hero-stat-icon {
  background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(79,70,229,0.05) 100%);
  border-color: rgba(99,102,241,0.2);
}
[data-stat-card="status"].stat-off .hero-stat-icon .material-symbols-rounded {
  color: #4F46E5;
  font-variation-settings: 'FILL' 1;
}
[data-stat-card="status"].stat-off .hero-stat-n {
  color: #4F46E5;
}
[data-theme="dark"] [data-stat-card="status"].stat-off .hero-stat-icon .material-symbols-rounded,
[data-theme="dark"] [data-stat-card="status"].stat-off .hero-stat-n {
  color: #818CF8;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(245,158,11,0.15); }
}

/* Tarifa: verde dinero */
[data-stat-card="tarifa"] .hero-stat-icon {
  background: linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(21,128,61,0.05) 100%);
  border-color: rgba(34,197,94,0.2);
}
[data-stat-card="tarifa"] .hero-stat-icon .material-symbols-rounded {
  color: #15803D;
}

/* Cobertura: azul info */
[data-stat-card="cobertura"] .hero-stat-icon {
  background: linear-gradient(135deg, rgba(59,130,246,0.1) 0%, rgba(29,78,216,0.05) 100%);
  border-color: rgba(59,130,246,0.2);
}
[data-stat-card="cobertura"] .hero-stat-icon .material-symbols-rounded {
  color: #1D4ED8;
}
[data-theme="dark"] [data-stat-card="cobertura"] .hero-stat-icon .material-symbols-rounded {
  color: #60A5FA;
}

/* Actualizado: gris/púrpura */
[data-stat-card="actualizado"] .hero-stat-icon {
  background: linear-gradient(135deg, rgba(168,85,247,0.08) 0%, rgba(124,58,237,0.04) 100%);
  border-color: rgba(168,85,247,0.18);
}
[data-stat-card="actualizado"] .hero-stat-icon .material-symbols-rounded {
  color: #7C3AED;
}
[data-theme="dark"] [data-stat-card="actualizado"] .hero-stat-icon .material-symbols-rounded {
  color: #A78BFA;
}

@media (max-width: 768px) {
  .hero-stat { padding: 10px 12px; gap: 8px; }
  .hero-stat-icon { width: 32px; height: 32px; }
  .hero-stat-icon .material-symbols-rounded { font-size: 18px; }
  .hero-stat-n { font-size: 13px; }
  .hero-stat-l { font-size: 9px; }
}

/* ===== Lista de rutas ===== */
.list-rutas {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ruta-row {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  position: relative;
  transition: background var(--dur-fast);
}
.ruta-row:hover { background: var(--surf-2); }
.ruta-row.active {
  background: var(--ac-tint);
}
.ruta-row.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--ac);
  border-radius: 0 3px 3px 0;
}
.ruta-num {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: var(--sh-sm);
  position: relative;
}
.ruta-num::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  pointer-events: none;
}
.ruta-info { flex: 1; min-width: 0; }
.ruta-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--txt-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ruta-meta {
  display: flex; gap: var(--s-2); align-items: center;
  font-size: var(--fs-xs);
  color: var(--txt-2);
  margin-top: 2px;
}
.ruta-meta b {
  font-weight: 600;
  color: var(--txt-1);
  font-variant-numeric: tabular-nums;
}
.ruta-meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
}
.ruta-fav {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  color: var(--txt-3);
  display: grid; place-items: center;
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-ios);
  flex-shrink: 0;
}
.ruta-fav:active { transform: scale(0.85); }
.ruta-fav.is-fav { color: var(--ac); }
.ruta-fav .material-symbols-rounded {
  font-size: 22px;
  transition: font-variation-settings var(--dur-fast);
}
.ruta-fav.is-fav .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* ===== Planificador ===== */
.planner { display: flex; flex-direction: column; gap: var(--s-2); }
.planner-input {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surf-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-ios);
  position: relative;
}
.planner-input:active { transform: scale(0.99); }
.planner-input.marked { background: var(--ok-tint); }
.planner-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid var(--bg-elev);
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px currentColor;
}
.planner-dot.origen { color: var(--ok); background: var(--ok); }
.planner-dot.destino { color: var(--info); background: var(--info); }
.planner-input-text { flex: 1; min-width: 0; }
.planner-input-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt-2);
  font-weight: 700;
}
.planner-input-value {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--txt-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.planner-input-value.empty { color: var(--txt-3); font-weight: 400; }
.planner-swap {
  position: relative;
  align-self: center;
  margin: calc(-1 * var(--s-2)) 0;
  z-index: 2;
  width: 36px; height: 36px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  display: grid; place-items: center;
  color: var(--txt-2);
  transition: transform var(--dur-base) var(--ease-snap), color var(--dur-fast);
}
.planner-swap:active { transform: rotate(180deg); color: var(--ac); }
.planner-swap .material-symbols-rounded { font-size: 18px; }

.btn-primary {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--ac);
  color: var(--txt-on-ac);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  transition: transform var(--dur-fast) var(--ease-ios), background var(--dur-fast);
  margin-top: var(--s-2);
  box-shadow: var(--sh-sm);
}
.btn-primary:hover:not(:disabled) { background: var(--ac-dark); }
.btn-primary:active:not(:disabled) { transform: scale(0.98); }
.btn-primary:disabled {
  background: var(--surf-3);
  color: var(--txt-3);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-primary .material-symbols-rounded { font-size: 20px; }

.btn-ghost {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-2);
  display: inline-flex; align-items: center;
  gap: 6px;
  transition: background var(--dur-fast);
}
.btn-ghost:hover { background: var(--surf-2); }
.btn-ghost:active { background: var(--surf-3); }

/* ===== Acciones rápidas planificador ===== */
.planner-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: -4px 0 4px;
}
.quick-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  padding: 9px 10px;
  background: var(--surf-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-1);
  transition: background var(--dur-fast), border var(--dur-fast), transform var(--dur-fast) var(--ease-ios);
  cursor: pointer;
  white-space: nowrap;
}
.quick-btn:hover { border-color: var(--line-strong); }
.quick-btn:active { transform: scale(0.97); background: var(--surf-3); }
.quick-btn.armed {
  background: var(--ac-tint);
  border-color: var(--ac);
  color: var(--ac);
}
.quick-btn .material-symbols-rounded {
  font-size: 16px;
  font-variation-settings: 'wght' 600;
}

/* ===== Sugerencias de búsqueda de lugar ===== */
.search-suggest {
  margin: -4px 0 6px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-height: 260px;
  overflow-y: auto;
  box-shadow: var(--sh-sm);
}
.suggest-item {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  cursor: pointer;
  transition: background var(--dur-fast);
  border-bottom: 1px solid var(--line);
  text-align: left;
  width: 100%;
  background: transparent;
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover { background: var(--surf-2); }
.suggest-item:active { background: var(--surf-3); }
.suggest-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: var(--surf-2);
  color: var(--txt-2);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.suggest-icon .material-symbols-rounded { font-size: 18px; }
.suggest-info { flex: 1; min-width: 0; }
.suggest-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--txt-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-sub {
  font-size: var(--fs-xs);
  color: var(--txt-2);
  margin-top: 2px;
}
.suggest-target {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ac);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Modo "armado" para marcar punto (cursor crosshair en mapa) */
.map-area.armed-mark #mapa { cursor: crosshair !important; }
.map-area.armed-mark::after {
  content: 'Toca el mapa para marcar el punto';
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  background: var(--ac);
  color: white;
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--sh-md);
  z-index: 999;
  pointer-events: none;
  animation: pulseDown 2s ease-in-out infinite;
}
@keyframes pulseDown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(4px); }
}

/* ===== Resultado de plan ===== */
.plan-results {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.plan-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  transition: border var(--dur-fast), transform var(--dur-fast) var(--ease-ios);
}
.plan-card:hover { border-color: var(--line-strong); }
.plan-card:active { transform: scale(0.99); }
.plan-card.selected {
  border-color: var(--ac);
  background: var(--ac-tint);
}
.plan-head {
  display: flex; align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.plan-time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.plan-time small {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--txt-2);
  letter-spacing: 0;
}
.plan-tags {
  margin-left: auto;
  display: flex; gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  background: var(--surf-2);
  border-radius: var(--r-full);
  color: var(--txt-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tag.tag-best { background: var(--ok-tint); color: var(--ok); }
.tag.tag-cost { background: var(--ac-tint); color: var(--ac); }

.plan-trip {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--s-3);
}
.trip-leg {
  display: inline-flex; align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
}
.trip-walk {
  display: inline-flex; align-items: center;
  gap: 3px;
  color: var(--txt-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.trip-walk .material-symbols-rounded { font-size: 14px; }
.trip-arrow { color: var(--txt-3); font-size: var(--fs-lg); line-height: 1; }

.plan-steps {
  border-top: 1px dashed var(--line);
  padding-top: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--txt-2);
}
.plan-steps b { color: var(--txt-1); font-weight: 600; }
.plan-steps-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--ac);
  margin-right: 4px;
}

/* ===== Empty state ===== */
.empty {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--txt-2);
}
.empty-icon {
  font-size: 48px !important;
  color: var(--line-strong);
  margin-bottom: var(--s-3);
}
.empty-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--txt-1);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.empty-sub { font-size: var(--fs-sm); }

/* ===== FAB stack ===== */
.fab-stack {
  position: fixed;
  right: max(var(--s-4), var(--sr));
  bottom: calc(96px + var(--sb) + var(--s-3));
  display: flex; flex-direction: column;
  gap: var(--s-2);
  z-index: 30;
}
@media (min-width: 900px) {
  .fab-stack {
    bottom: calc(var(--sb) + var(--s-5));
  }
}
.fab {
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: var(--bg-elev);
  color: var(--txt-1);
  display: grid; place-items: center;
  box-shadow: var(--sh-md);
  border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease-ios), background var(--dur-fast);
}
.fab:active { transform: scale(0.92); }
.fab.fab-primary {
  background: var(--ac);
  color: var(--txt-on-ac);
  border-color: var(--ac);
  box-shadow: var(--sh-md), 0 0 0 4px var(--ac-tint);
}
.fab .material-symbols-rounded { font-size: 22px; }

/* ===== Toast ===== */
.toast-host {
  position: fixed;
  top: calc(var(--st) + var(--s-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: max-content;
  max-width: 92vw;
}
.toast {
  background: var(--txt-1);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: var(--sh-lg);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--dur-base) var(--ease-snap), transform var(--dur-base) var(--ease-snap);
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ===== Loader bar ===== */
.loader-bar {
  position: fixed;
  top: var(--st); left: 0; right: 0;
  height: 2px;
  background: var(--ac-tint);
  z-index: 100;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.loader-bar.show { opacity: 1; }
.loader-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: var(--ac);
  animation: loader-slide 1s infinite;
}
@keyframes loader-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* ===== Skeleton ===== */
.skel {
  background: linear-gradient(90deg, var(--surf-2) 0%, var(--surf-3) 50%, var(--surf-2) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s linear infinite;
  border-radius: var(--r-md);
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-line { height: 14px; margin: 6px 0; }
.skel-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
}
.skel-circle { width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0; }
.skel-stack { flex: 1; }

/* ===== Welcome modal ===== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 22, 20, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--s-4);
  opacity: 0;
  transition: opacity var(--dur-base);
  pointer-events: none;
}
@media (min-width: 720px) {
  .modal-backdrop { align-items: center; }
}
.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: var(--bg-elev);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  max-width: 440px;
  width: 100%;
  box-shadow: var(--sh-xl);
  transform: translateY(40px);
  transition: transform var(--dur-slow) var(--ease-snap);
  padding-bottom: max(var(--s-5), var(--sb));
}
.modal-backdrop.show .modal { transform: translateY(0); }
.modal-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  background: var(--ac);
  color: var(--txt-on-ac);
  display: grid; place-items: center;
  margin-bottom: var(--s-3);
  box-shadow: var(--sh-md);
}
.modal-icon .material-symbols-rounded { font-size: 28px; font-variation-settings: 'FILL' 1; }
.modal-logo {
  width: 64px; height: 64px;
  border-radius: var(--r-lg);
  object-fit: cover;
  margin-bottom: var(--s-3);
  box-shadow: var(--sh-md);
  display: block;
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.modal-body { color: var(--txt-2); font-size: var(--fs-md); margin-bottom: var(--s-4); }
.modal-body p { margin: 0 0 var(--s-2); }
.modal-body ul { padding-left: var(--s-4); margin: var(--s-2) 0; }
.modal-body li { margin-bottom: 4px; }
.modal-actions { display: flex; gap: var(--s-2); }
.modal-actions .btn-primary { flex: 1; margin: 0; }

/* ===== Tab móvil inferior (mobile only) ===== */
.tabbar-mobile {
  display: flex;
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: calc(var(--tabbar-h) + var(--sb));
  padding-bottom: var(--sb);
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  z-index: 35;
  box-shadow: var(--sh-md);
}
@media (min-width: 900px) {
  .tabbar-mobile { display: none; }
}
.tab-mob {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  color: var(--txt-3);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--dur-fast);
  position: relative;
}
.tab-mob.active { color: var(--ac); }
.tab-mob .material-symbols-rounded {
  font-size: 22px;
  transition: font-variation-settings var(--dur-fast);
}
.tab-mob.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

/* ===== Footer mini ===== */
.footer {
  padding: var(--s-3) var(--s-4) var(--s-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--txt-3);
  border-top: 1px solid var(--line);
  margin-top: var(--s-5);
}
.footer a {
  color: var(--ac);
  text-decoration: none;
  font-weight: 600;
}
.footer a:hover { text-decoration: underline; }

/* ===== Animaciones de entrada ===== */
@media (prefers-reduced-motion: no-preference) {
  .ruta-row {
    animation: rowIn var(--dur-base) var(--ease-out) backwards;
  }
  .plan-card {
    animation: cardIn var(--dur-slow) var(--ease-snap) backwards;
  }
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Imprimir ===== */
@media print {
  .topbar, .bs, .fab-stack, .tabbar-mobile { display: none !important; }
}

/* ===== Selector de mapa base ===== */
.style-sheet {
  position: fixed; inset: 0;
  z-index: 1500;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.style-sheet.show { pointer-events: auto; opacity: 1; }
.style-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 22, 20, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.style-sheet-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-elev);
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  padding-bottom: max(var(--s-4), var(--sb));
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-snap);
  max-height: 80dvh;
  display: flex; flex-direction: column;
}
@media (min-width: 720px) {
  .style-sheet-content {
    bottom: auto;
    top: 50%;
    transform: translateY(calc(-50% + 100vh));
    border-radius: var(--r-xl);
    max-width: 460px;
    left: 50%;
    margin: 0;
    transform: translate(-50%, calc(-50% + 100vh));
  }
  .style-sheet.show .style-sheet-content {
    transform: translate(-50%, -50%);
  }
}
.style-sheet.show .style-sheet-content {
  transform: translateY(0);
}
@media (min-width: 720px) {
  .style-sheet.show .style-sheet-content {
    transform: translate(-50%, -50%);
  }
}
.style-sheet-handle {
  width: 40px; height: 5px;
  background: var(--line-strong);
  border-radius: var(--r-full);
  margin: var(--s-2) auto var(--s-1);
  opacity: .5;
}
@media (min-width: 720px) {
  .style-sheet-handle { display: none; }
}
.style-sheet-head {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.style-sheet-head > div:nth-child(2) { flex: 1; min-width: 0; }
.style-sheet-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}
.style-sheet-sub {
  font-size: var(--fs-sm);
  color: var(--txt-2);
}
.style-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.style-sheet-foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--txt-3);
  line-height: 1.5;
}

.style-option {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  cursor: pointer;
  transition: border var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-ios);
  text-align: left;
  width: 100%;
}
.style-option:hover { background: var(--surf-2); border-color: var(--line-strong); }
.style-option:active { transform: scale(0.98); }
.style-option.active { border-color: var(--ac); background: var(--ac-tint); }
.style-option.active .style-name { color: var(--ac); }

.style-thumb {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
/* Miniaturas representativas (degradés simulan cada estilo) */
.style-thumb-carto_voyager {
  background:
    linear-gradient(135deg, #E8F1F5 0%, #F4EFE6 100%);
}
.style-thumb-carto_voyager::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 38%, #DAE3D5 38%, #DAE3D5 42%, transparent 42%),
    linear-gradient(180deg, transparent 55%, #C8D9E5 55%, #C8D9E5 60%, transparent 60%);
}
.style-thumb-osm {
  background: #F2EFE9;
}
.style-thumb-osm::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(45deg, transparent 45%, #B8CC9B 45%, #B8CC9B 50%, transparent 50%),
    linear-gradient(-45deg, transparent 45%, #F5C97D 45%, #F5C97D 50%, transparent 50%);
}
.style-thumb-esri_street {
  background: #FDFCFA;
  background-image:
    linear-gradient(0deg, transparent 49%, #DAD3C5 49%, #DAD3C5 51%, transparent 51%),
    linear-gradient(90deg, transparent 49%, #DAD3C5 49%, #DAD3C5 51%, transparent 51%);
  background-size: 18px 18px;
}
.style-thumb-esri_imagery {
  background: linear-gradient(135deg, #2D4A2D 0%, #5A6E3D 35%, #8B7155 65%, #6B5D45 100%);
  position: relative;
}
.style-thumb-esri_imagery::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.2) 0%, transparent 35%);
}
.style-thumb-opentopo {
  background: #F4F2EA;
  background-image:
    radial-gradient(circle at 30% 50%, #C8B98F 5%, transparent 8%),
    radial-gradient(circle at 70% 50%, #A89770 4%, transparent 7%),
    radial-gradient(circle at 50% 30%, #DBC8A0 3%, transparent 6%);
  background-size: 30px 30px;
}
.style-thumb-carto_dark {
  background: #1A1F25;
  background-image:
    linear-gradient(90deg, transparent 38%, #2E3640 38%, #2E3640 42%, transparent 42%),
    linear-gradient(180deg, transparent 55%, #3A4554 55%, #3A4554 60%, transparent 60%);
}
.style-thumb-stamen_toner {
  background: #FFFFFF;
  background-image:
    linear-gradient(0deg, transparent 48%, #000 48%, #000 52%, transparent 52%),
    linear-gradient(90deg, transparent 48%, #000 48%, #000 52%, transparent 52%);
  background-size: 14px 14px;
}

.style-info { flex: 1; min-width: 0; }
.style-name {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--txt-1);
}
.style-desc {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  margin-top: 2px;
}

/* ============================================================
   PASO A PASO REDISEÑADO (estilo Citymapper)
   ============================================================ */

.plan-detail-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  margin: var(--s-2) 0;
  border-radius: var(--r-md);
  background: var(--surf-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-2);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.plan-detail-toggle:hover { background: var(--surf-3); }
.plan-detail-toggle .material-symbols-rounded {
  font-size: 20px;
  transition: transform var(--dur-base) var(--ease-snap);
}
.plan-card.expanded .plan-detail-toggle .material-symbols-rounded {
  transform: rotate(180deg);
}

.plan-pasos {
  display: none;
  padding-top: var(--s-2);
  position: relative;
}
.plan-card.expanded .plan-pasos { display: block; }

.paso {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  position: relative;
}
.paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px; top: 44px; bottom: -8px;
  width: 2px;
  background: var(--line);
  z-index: 0;
}
.paso-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--bg-elev);
}
.paso-icon-walk {
  background: #15803D;
  color: #fff;
}
.paso-icon .material-symbols-rounded { font-size: 20px; }
.paso-body { flex: 1; min-width: 0; padding-top: 6px; }
.paso-titulo {
  font-size: var(--fs-md);
  line-height: 1.35;
  color: var(--txt-1);
}
.paso-titulo b { font-weight: 700; }
.paso-sub {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  margin-top: 4px;
}
.paso-detail {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs);
  color: var(--txt-2);
  margin-top: 6px;
  padding: 4px 8px;
  background: var(--surf-2);
  border-radius: var(--r-sm);
}

.paso-osrm {
  margin-top: 10px;
  padding: 10px;
  background: var(--surf-2);
  border-radius: var(--r-md);
  border-left: 3px solid #15803D;
}
.paso-osrm-step {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-sm);
  color: var(--txt-2);
  padding: 4px 0;
  line-height: 1.4;
}
.paso-osrm-step:not(:last-child) {
  border-bottom: 1px dashed var(--line);
}
.paso-osrm-step .material-symbols-rounded {
  font-size: 18px;
  color: #15803D;
  flex-shrink: 0;
}
.paso-osrm-step b { color: var(--txt-1); font-weight: 600; }

.btn-iniciar {
  margin-top: var(--s-3) !important;
  background: linear-gradient(135deg, #15803D 0%, #0F6E32 100%) !important;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.3) !important;
}
.btn-iniciar:hover:not(:disabled) {
  background: linear-gradient(135deg, #0F6E32 0%, #15803D 100%) !important;
}

/* ============================================================
   MODO NAVEGACIÓN ACTIVA (overlay full-screen)
   ============================================================ */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 5000;
  display: flex;
  flex-direction: column;
  padding: max(var(--s-4), var(--st)) max(var(--s-4), var(--sr)) max(var(--s-4), var(--sb)) max(var(--s-4), var(--sl));
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-snap);
  overflow-y: auto;
}
.nav-overlay.show { transform: translateY(0); }

.nav-overlay-head {
  display: flex; align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  flex-shrink: 0;
}
.nav-overlay-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  flex: 1;
  letter-spacing: -0.02em;
}
.nav-overlay-step {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  background: var(--surf-2);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-weight: 600;
}

.nav-compass {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: var(--s-5);
}
.nav-compass-ring {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--ac-tint) 0%, var(--surf-2) 60%);
  border: 3px solid var(--ac);
  display: grid; place-items: center;
  position: relative;
  box-shadow: 0 8px 32px rgba(190, 22, 35, 0.15);
  margin-bottom: var(--s-3);
}
.nav-compass-ring::before {
  content: 'N';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ac);
}
.nav-compass-arrow {
  width: 80px; height: 80px;
  display: grid; place-items: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-compass-arrow .material-symbols-rounded {
  font-size: 72px;
  color: var(--ac);
  font-variation-settings: 'FILL' 1, 'wght' 700;
}
.nav-compass-distance {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--txt-1);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.nav-compass-direction {
  font-size: var(--fs-md);
  color: var(--txt-2);
  margin-top: 4px;
  font-weight: 600;
  text-align: center;
}

.nav-instruction {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-3);
  box-shadow: var(--sh-sm);
}
.nav-instruction-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.nav-instruction-icon .material-symbols-rounded {
  font-size: 24px;
  color: #fff;
}
.nav-instruction-text {
  flex: 1;
  font-size: var(--fs-md);
  line-height: 1.35;
}
.nav-instruction-text small {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  font-weight: normal;
}

.nav-actions {
  display: flex; gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.nav-overview {
  background: var(--surf-2);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  margin-top: auto;
}
.nav-overview-titulo {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-2);
  margin-bottom: var(--s-2);
}
.nav-overview-list {
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.nav-overview-item {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm);
  opacity: 0.5;
  transition: opacity var(--dur-fast);
}
.nav-overview-item.activo {
  opacity: 1;
  font-weight: 600;
}
.nav-overview-item.pasado {
  opacity: 0.3;
  text-decoration: line-through;
}
.nav-overview-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* ============================================================
   SUGERENCIAS — íconos locales vs remotos
   ============================================================ */
.suggest-icon-local {
  background: #DCFCE7 !important;
  color: #15803D !important;
}
.suggest-icon-saved {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}

/* ============================================================
   ACTION BAR FLOTANTE — botón "Iniciar viaje" persistente
   ============================================================ */

.action-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) max(var(--s-4), var(--sl)) calc(var(--s-3) + var(--sb)) max(var(--s-4), var(--sr));
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(26, 22, 20, 0.12);
  animation: actionBarUp var(--dur-slow) var(--ease-snap);
}
@keyframes actionBarUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.action-bar.show {
  display: flex;
}

/* En desktop, integrarlo en el sidebar en lugar de fixed */
@media (min-width: 900px) {
  .action-bar {
    left: 0;
    width: 420px;
    border-right: 1px solid var(--line);
  }
}

.action-bar-info {
  flex: 1;
  min-width: 0;
}
.action-bar-time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--txt-1);
}
.action-bar-detail {
  font-size: var(--fs-xs);
  color: var(--txt-2);
  margin-top: 2px;
}

.action-bar-btn {
  margin: 0 !important;
  width: auto !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, #15803D 0%, #0F6E32 100%) !important;
  box-shadow: 0 4px 16px rgba(21, 128, 61, 0.35) !important;
  font-size: var(--fs-md);
  white-space: nowrap;
}

/* Cuando action bar está visible, dejar espacio al final del bs-content para que el botón Iniciar viaje de la card no se tape */
.has-action-bar .bs-content {
  padding-bottom: calc(var(--s-7) + 80px + var(--sb)) !important;
}
.has-action-bar .panels {
  padding-bottom: calc(var(--s-5) + 80px + var(--sb)) !important;
}

/* En móvil, el botón "Iniciar viaje" dentro de la card es más grande y prominente */
.btn-iniciar {
  margin: var(--s-3) 0 !important;
  padding: 14px 18px !important;
  font-size: var(--fs-md) !important;
  background: linear-gradient(135deg, #15803D 0%, #0F6E32 100%) !important;
  box-shadow: 0 4px 16px rgba(21, 128, 61, 0.3) !important;
}
.btn-iniciar:hover:not(:disabled) {
  background: linear-gradient(135deg, #0F6E32 0%, #15803D 100%) !important;
  transform: translateY(-1px);
}
.btn-iniciar .material-symbols-rounded {
  font-size: 22px !important;
  font-variation-settings: 'FILL' 1, 'wght' 700 !important;
}

/* En modo oscuro */
[data-theme="dark"] .action-bar {
  background: var(--bg-elev);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   PANTALLA DE LLEGADA "¡Llegaste!" — celebración estilo Citymapper
   ============================================================ */

.llegada-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: max(var(--s-5), calc(var(--st) + var(--s-4))) max(var(--s-4), var(--sr)) max(var(--s-4), var(--sb)) max(var(--s-4), var(--sl));
  text-align: center;
  position: relative;
}

/* Hero */
.llegada-hero {
  padding-top: var(--s-6);
  padding-bottom: var(--s-5);
  animation: heroIn 0.6s var(--ease-snap) 0.1s backwards;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.llegada-check {
  width: 96px; height: 96px;
  margin: 0 auto var(--s-4);
  display: grid; place-items: center;
}
.llegada-check svg { display: block; }
.llegada-check-bg {
  fill: #DCFCE7;
  stroke: #15803D;
  stroke-width: 2;
  animation: checkBgPop 0.5s var(--ease-snap) 0.1s backwards;
}
.llegada-check-mark {
  stroke: #15803D;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: checkDraw 0.6s var(--ease-out) 0.5s forwards;
}
@keyframes checkBgPop {
  0% { transform-origin: center; transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

.llegada-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 0 8px;
  color: var(--txt-1);
  background: linear-gradient(135deg, #15803D 0%, #BE1623 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 720px) {
  .llegada-titulo { font-size: 56px; }
}
.llegada-sub {
  font-size: var(--fs-md);
  color: var(--txt-2);
  margin: 0;
  max-width: 360px;
  margin: 0 auto;
}

/* Stats grid */
.llegada-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: var(--s-5);
}
.llegada-stat {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: statIn 0.5s var(--ease-snap) backwards;
}
.llegada-stat:nth-child(1) { animation-delay: 0.3s; }
.llegada-stat:nth-child(2) { animation-delay: 0.4s; }
.llegada-stat:nth-child(3) { animation-delay: 0.5s; }
.llegada-stat:nth-child(4) { animation-delay: 0.6s; }
@keyframes statIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.llegada-stat-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.llegada-stat-icon .material-symbols-rounded {
  font-size: 22px;
  font-variation-settings: 'FILL' 1;
}
.llegada-stat-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--txt-1);
  font-variant-numeric: tabular-nums;
}
.llegada-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Resumen del viaje */
.llegada-resumen {
  max-width: 460px;
  margin: 0 auto var(--s-5);
  padding: var(--s-4);
  background: var(--surf-2);
  border-radius: var(--r-lg);
  animation: statIn 0.5s var(--ease-snap) 0.7s backwards;
  width: 100%;
}
.llegada-resumen-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-2);
  margin-bottom: var(--s-3);
}
.llegada-resumen-trip {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--s-3);
}
.llegada-resumen-costo {
  font-size: var(--fs-sm);
  color: var(--txt-2);
}
.llegada-resumen-costo b {
  color: var(--txt-1);
  font-weight: 700;
}

/* Acciones */
.llegada-actions {
  max-width: 460px;
  margin: 0 auto var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  animation: statIn 0.5s var(--ease-snap) 0.8s backwards;
}
.llegada-btn-primario {
  margin: 0 !important;
  padding: 16px !important;
  font-size: var(--fs-md) !important;
  background: linear-gradient(135deg, #BE1623 0%, #8B0F1A 100%) !important;
  box-shadow: 0 8px 24px rgba(190, 22, 35, 0.35) !important;
}
.llegada-btn-primario:hover:not(:disabled) {
  background: linear-gradient(135deg, #8B0F1A 0%, #BE1623 100%) !important;
  transform: translateY(-2px);
}
.llegada-btn-primario .material-symbols-rounded {
  font-size: 22px !important;
  font-variation-settings: 'FILL' 1 !important;
}
.llegada-btn-share {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-1);
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.llegada-btn-share:hover { background: var(--surf-2); }
.llegada-btn-share:active { background: var(--surf-3); transform: scale(0.98); }
.llegada-btn-share .material-symbols-rounded { font-size: 18px; }

/* Footer */
.llegada-footer {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--txt-3);
  padding: var(--s-3) 0;
  margin-top: auto;
  animation: statIn 0.5s var(--ease-snap) 1s backwards;
}

/* ============================================================
   CONFETTI — celebración al llegar
   ============================================================ */

.llegada-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 100;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 14px;
  opacity: 0;
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes confettiFall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift, 0), 100vh, 0) rotate(var(--rotate, 360deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .llegada-confetti { display: none !important; }
  .llegada-hero,
  .llegada-stat,
  .llegada-resumen,
  .llegada-actions,
  .llegada-footer,
  .llegada-check-bg,
  .llegada-check-mark {
    animation: none !important;
  }
  .llegada-check-mark { stroke-dashoffset: 0 !important; }
}

/* En modo oscuro */
[data-theme="dark"] .llegada-check-bg {
  fill: #15803D33;
  stroke: #4ADE80;
}
[data-theme="dark"] .llegada-check-mark {
  stroke: #4ADE80;
}
[data-theme="dark"] .llegada-titulo {
  background: linear-gradient(135deg, #4ADE80 0%, #EF4444 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ============================================================
   nav-overlay: animación de entrada/salida más limpia
   ============================================================ */
.nav-overlay {
  /* la animación existe pero refinamos */
  opacity: 0;
  pointer-events: none;
}
.nav-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   PANEL TUXTLA — Guía cívica completa
   ============================================================ */

/* Hero del panel */
.tx-hero {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: linear-gradient(135deg, rgba(190, 22, 35, 0.06) 0%, rgba(190, 22, 35, 0.02) 100%);
  border-radius: var(--r-lg);
  border: 1px solid rgba(190, 22, 35, 0.1);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .tx-hero {
  background: linear-gradient(135deg, rgba(190, 22, 35, 0.15) 0%, rgba(190, 22, 35, 0.05) 100%);
  border-color: rgba(190, 22, 35, 0.2);
}
.tx-hero-text { flex: 1; min-width: 0; }
.tx-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ac);
  margin-bottom: 4px;
}
.tx-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--txt-1);
  margin-bottom: 4px;
}
.tx-hero-sub {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  line-height: 1.4;
}
.tx-hero-deco {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--ac);
  color: var(--txt-on-ac);
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(190, 22, 35, 0.3);
}
.tx-hero-deco .material-symbols-rounded {
  font-size: 28px;
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

/* Sección */
.tx-section {
  margin-bottom: var(--s-5);
}
.tx-section-h {
  display: flex; align-items: center;
  gap: 10px;
  margin-bottom: var(--s-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.tx-section-icon {
  font-size: 22px;
  font-variation-settings: 'FILL' 1;
}
.tx-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--txt-1);
  letter-spacing: -0.01em;
}

/* Grid emergencias */
.tx-grid-emerg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
.tx-emerg {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--s-3);
  background: linear-gradient(135deg, #FEE2E2 0%, #FCA5A5 100%);
  border-radius: var(--r-md);
  text-decoration: none;
  color: #7F1D1D;
  text-align: center;
  border: 1px solid rgba(220, 38, 38, 0.15);
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast);
  min-height: 80px;
  cursor: pointer;
}
.tx-emerg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);
}
.tx-emerg:active { transform: scale(0.97); }
.tx-emerg-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: 1;
  color: #DC2626;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.tx-emerg-l {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #7F1D1D;
  line-height: 1.2;
}
[data-theme="dark"] .tx-emerg {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.08) 100%);
  border-color: rgba(220, 38, 38, 0.3);
  color: #FCA5A5;
}
[data-theme="dark"] .tx-emerg-n { color: #F87171; }
[data-theme="dark"] .tx-emerg-l { color: #FCA5A5; }

/* SOS Mujer */
.tx-sos {
  background: linear-gradient(135deg, rgba(190, 22, 35, 0.04) 0%, rgba(190, 22, 35, 0.01) 100%);
  border: 1px solid rgba(190, 22, 35, 0.15);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
[data-theme="dark"] .tx-sos {
  background: linear-gradient(135deg, rgba(190, 22, 35, 0.1) 0%, rgba(190, 22, 35, 0.03) 100%);
  border-color: rgba(190, 22, 35, 0.3);
}
.tx-sos-text {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  margin: 0 0 var(--s-3);
  line-height: 1.5;
}
.tx-sos-buttons {
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.tx-sos-btn {
  display: flex; align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--txt-1);
  transition: all var(--dur-fast);
  cursor: pointer;
}
.tx-sos-btn:hover {
  border-color: var(--ac);
  transform: translateX(4px);
}
.tx-sos-btn .material-symbols-rounded {
  font-size: 22px;
  color: var(--ac);
  flex-shrink: 0;
}
.tx-sos-btn-t {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--txt-1);
  line-height: 1.2;
  margin-bottom: 2px;
}
.tx-sos-btn-s {
  font-size: var(--fs-xs);
  color: var(--txt-2);
  line-height: 1.3;
}

/* Tips de viaje seguro */
.tx-tips {
  background: var(--surf-2);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.tx-tips-intro {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  margin: 0 0 var(--s-2);
}
.tx-steps {
  font-size: var(--fs-sm);
  color: var(--txt-1);
  margin: 0 0 var(--s-3);
  padding-left: 18px;
  line-height: 1.6;
}
.tx-steps li {
  margin-bottom: 4px;
}
.tx-steps b { color: var(--txt-1); font-weight: 700; }

.tx-share-btn {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: all var(--dur-fast);
  cursor: pointer;
}
.tx-share-btn:hover {
  background: #1FB055;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.tx-share-btn .material-symbols-rounded {
  font-size: 18px;
}

/* Lugares */
.tx-places,
.tx-terminals {
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.tx-place,
.tx-terminal {
  display: flex; align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-fast);
  animation: fadeUp 0.4s var(--ease-snap) backwards;
}
.tx-place:hover,
.tx-terminal:hover {
  border-color: var(--ac);
  transform: translateX(4px);
  box-shadow: var(--sh-sm);
}
.tx-place-icon,
.tx-terminal-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.tx-place-icon {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
}
.tx-terminal-icon {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: #1E40AF;
}
[data-theme="dark"] .tx-place-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
  color: #FCD34D;
}
[data-theme="dark"] .tx-terminal-icon {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.15), rgba(29, 78, 216, 0.05));
  color: #93C5FD;
}
.tx-place-icon .material-symbols-rounded,
.tx-terminal-icon .material-symbols-rounded {
  font-size: 22px;
  font-variation-settings: 'FILL' 1;
}
.tx-place-info,
.tx-terminal-info { flex: 1; min-width: 0; }
.tx-place-name,
.tx-terminal-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--txt-1);
  line-height: 1.2;
  margin-bottom: 2px;
}
.tx-place-sub,
.tx-terminal-sub {
  font-size: var(--fs-xs);
  color: var(--txt-2);
  line-height: 1.3;
}
.tx-place-arrow {
  font-size: 20px;
  color: var(--txt-3);
  transition: transform var(--dur-fast);
}
.tx-place:hover .tx-place-arrow,
.tx-terminal:hover .tx-place-arrow {
  color: var(--ac);
  transform: translateX(4px);
}

/* Tips list (antes de viajar) */
.tx-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.tx-tips-list li {
  display: flex; gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: var(--surf-2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--txt-2);
}
.tx-tips-list li b { color: var(--txt-1); font-weight: 700; }
.tx-tip-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Card branded Alerta Chiapas */
.tx-card-brand {
  display: flex; align-items: center;
  gap: 12px;
  padding: var(--s-3);
  background: linear-gradient(135deg, rgba(26, 22, 20, 0.04) 0%, rgba(26, 22, 20, 0.01) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: var(--s-3);
}
[data-theme="dark"] .tx-card-brand {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
}
.tx-card-brand-logo {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  object-fit: cover;
}
.tx-card-brand-text { flex: 1; min-width: 0; }
.tx-card-brand-t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--txt-1);
  line-height: 1.2;
  margin-bottom: 2px;
}
.tx-card-brand-s {
  font-size: var(--fs-xs);
  color: var(--txt-2);
  line-height: 1.3;
}
.tx-card-brand-cta {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--ac);
  color: var(--txt-on-ac);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: transform var(--dur-fast);
  flex-shrink: 0;
}
.tx-card-brand-cta:hover {
  transform: scale(1.05) rotate(5deg);
}
.tx-card-brand-cta .material-symbols-rounded {
  font-size: 20px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   EVENTOS DE ALERTA CHIAPAS — Calendario de Tuxtla
   ============================================================ */

.tx-section-link {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ac);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity var(--dur-fast);
}
.tx-section-link:hover { opacity: 0.7; }

.tx-events {
  display: flex; flex-direction: column;
  gap: var(--s-2);
}

.tx-events-loading {
  display: flex; align-items: center;
  gap: 8px;
  padding: var(--s-3);
  background: var(--surf-2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--txt-2);
}
.tx-events-loading .material-symbols-rounded {
  animation: spin 1.4s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.tx-event {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-fast);
  animation: fadeUp 0.4s var(--ease-snap) backwards;
}
.tx-event:hover {
  border-color: #EC4899;
  transform: translateX(4px);
  box-shadow: var(--sh-sm);
}

.tx-event-date {
  width: 54px;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px 0;
  background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
  border: 1px solid rgba(236, 72, 153, 0.2);
  border-radius: var(--r-md);
}
[data-theme="dark"] .tx-event-date {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.05) 100%);
  border-color: rgba(236, 72, 153, 0.3);
}
.tx-event-day {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: #BE185D;
  letter-spacing: -0.03em;
}
[data-theme="dark"] .tx-event-day { color: #F472B6; }
.tx-event-month {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #BE185D;
  margin-top: 2px;
}
[data-theme="dark"] .tx-event-month { color: #F472B6; }

.tx-event-info {
  flex: 1; min-width: 0;
}
.tx-event-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--txt-1);
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tx-event-meta {
  display: flex; align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--txt-2);
  flex-wrap: wrap;
}
.tx-event-meta .material-symbols-rounded {
  font-size: 13px;
  vertical-align: middle;
}
.tx-event-dot {
  width: 3px; height: 3px;
  background: var(--txt-3);
  border-radius: 50%;
  margin: 0 2px;
}
.tx-event-arrow {
  font-size: 16px;
  color: var(--txt-3);
  flex-shrink: 0;
}

.tx-events-fallback {
  display: flex; align-items: center;
  gap: 12px;
  padding: var(--s-3);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, rgba(236, 72, 153, 0.02) 100%);
  border: 1px solid rgba(236, 72, 153, 0.15);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-fast);
}
.tx-events-fallback:hover {
  border-color: #EC4899;
  transform: translateX(4px);
}
.tx-events-fallback > .material-symbols-rounded:first-child {
  font-size: 28px;
  color: #EC4899;
  flex-shrink: 0;
}
.tx-events-fallback-t {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--txt-1);
  margin-bottom: 2px;
}
.tx-events-fallback-s {
  font-size: var(--fs-xs);
  color: var(--txt-2);
}

.tx-events-empty {
  text-align: center;
  padding: var(--s-4);
  background: var(--surf-2);
  border-radius: var(--r-md);
  color: var(--txt-2);
}
.tx-events-empty .material-symbols-rounded {
  font-size: 32px;
  color: var(--txt-3);
  margin-bottom: 8px;
}
.tx-events-empty p {
  font-size: var(--fs-sm);
  margin: 0 0 8px;
}
.tx-events-empty a {
  color: var(--ac);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.tx-events-empty a:hover { text-decoration: underline; }

/* ============================================================
   ===  REDISEÑO DEL FUTURO  ===
   Glassmorphism, spring physics, magnetic interactions,
   gradientes mesh, sombras de color, microanimaciones
   ============================================================ */

/* Nuevas variables del futuro */
:root {
  /* Spring easings (basados en física real, no curvas lineales) */
  --spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-bouncy: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --spring-snappy: cubic-bezier(0.2, 0.9, 0.4, 1.2);
  --spring-elegant: cubic-bezier(0.4, 0.0, 0.2, 1.0);

  /* Sombras de color (no grises planos) */
  --sh-ac: 0 4px 16px rgba(190, 22, 35, 0.25), 0 2px 6px rgba(190, 22, 35, 0.12);
  --sh-ok: 0 4px 16px rgba(21, 128, 61, 0.25), 0 2px 6px rgba(21, 128, 61, 0.12);
  --sh-info: 0 4px 16px rgba(29, 78, 216, 0.25), 0 2px 6px rgba(29, 78, 216, 0.12);
  --sh-glow-ac: 0 0 0 1px rgba(190, 22, 35, 0.15), 0 8px 32px rgba(190, 22, 35, 0.18);

  /* Glass effect */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(20px) saturate(180%);

  /* Gradientes mesh */
  --mesh-warm: radial-gradient(at 12% 18%, rgba(245, 158, 11, 0.10) 0px, transparent 50%),
               radial-gradient(at 85% 22%, rgba(236, 72, 153, 0.08) 0px, transparent 50%),
               radial-gradient(at 50% 90%, rgba(190, 22, 35, 0.06) 0px, transparent 50%);
}
[data-theme="dark"] {
  --glass-bg: rgba(22, 19, 18, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   GLOBAL — Refinamientos generales
   ============================================================ */

/* Selección de texto con color de marca */
::selection { background: var(--ac-tint); color: var(--txt-1); }
[data-theme="dark"] ::selection { background: rgba(190, 22, 35, 0.3); }

/* Scrollbar refinado */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
  transition: background 0.2s;
}
*::-webkit-scrollbar-thumb:hover { background: var(--txt-3); }

/* ============================================================
   FAB stack — Glass morphism
   ============================================================ */
.fab {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  transition: transform var(--dur-base) var(--spring-snappy),
              box-shadow var(--dur-base) var(--ease-snap),
              background var(--dur-fast);
}
.fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--sh-lg);
}
.fab:active {
  transform: translateY(0) scale(0.94);
  transition-duration: 80ms;
}

/* ============================================================
   PLAN ACTIONS — Iniciar + Compartir
   ============================================================ */

.plan-actions {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-3) 0;
}

.btn-iniciar {
  flex: 1;
  margin: 0 !important;
  padding: 14px 18px !important;
  font-size: var(--fs-md) !important;
  background: linear-gradient(135deg, #15803D 0%, #0F6E32 100%) !important;
  box-shadow: var(--sh-ok) !important;
  position: relative;
  overflow: hidden;
}
.btn-iniciar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.btn-iniciar:hover:not(:disabled) {
  background: linear-gradient(135deg, #0F6E32 0%, #15803D 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(21, 128, 61, 0.4), 0 4px 8px rgba(21, 128, 61, 0.2) !important;
}
.btn-iniciar:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}
.btn-iniciar .material-symbols-rounded {
  font-size: 22px !important;
  font-variation-settings: 'FILL' 1, 'wght' 700 !important;
}

.btn-share-plan {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--txt-2);
  cursor: pointer;
  transition: all var(--dur-base) var(--spring-snappy);
  flex-shrink: 0;
}
.btn-share-plan:hover {
  border-color: var(--ac);
  color: var(--ac);
  transform: translateY(-2px) rotate(-5deg);
  box-shadow: var(--sh-ac);
}
.btn-share-plan:active {
  transform: scale(0.92) rotate(0deg);
  transition-duration: 80ms;
}
.btn-share-plan .material-symbols-rounded {
  font-size: 22px;
  font-variation-settings: 'wght' 600;
}

/* ============================================================
   MODAL SEGUIMIENTO — al abrir un link compartido
   ============================================================ */

.seguimiento-modal { z-index: 9999; }

.seguimiento-modal .modal-seguimiento {
  max-width: 480px;
  width: 100%;
}

.modal-seguimiento-status {
  display: flex; align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
  animation: slideDownIn 0.5s var(--spring-soft) backwards;
}
.modal-seguimiento-status .material-symbols-rounded {
  font-size: 32px;
  font-variation-settings: 'FILL' 1;
}
.modal-seguimiento-status-t {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.modal-seguimiento-status-s {
  font-size: var(--fs-xs);
  opacity: 0.85;
  margin-top: 2px;
}

.modal-seguimiento-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin: var(--s-4) 0;
}
.modal-seguimiento-stat {
  text-align: center;
  padding: 12px 8px;
  background: var(--surf-2);
  border-radius: var(--r-md);
  animation: fadeUp 0.5s var(--spring-snappy) backwards;
}
.modal-seguimiento-stat:nth-child(1) { animation-delay: 100ms; }
.modal-seguimiento-stat:nth-child(2) { animation-delay: 200ms; }
.modal-seguimiento-stat:nth-child(3) { animation-delay: 300ms; }
.modal-seguimiento-stat .material-symbols-rounded {
  font-size: 22px;
  margin-bottom: 4px;
  font-variation-settings: 'FILL' 1;
}
.modal-seguimiento-stat-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt-2);
  font-weight: 700;
}
.modal-seguimiento-stat-v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--txt-1);
  letter-spacing: -0.02em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.modal-seguimiento-rutas {
  padding: 14px;
  background: var(--surf-2);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
  animation: fadeUp 0.5s var(--spring-snappy) 400ms backwards;
}
.modal-seguimiento-rutas-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt-2);
  font-weight: 700;
  margin-bottom: 8px;
}
.modal-seguimiento-rutas-trip {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.modal-seguimiento-footer {
  display: flex; gap: 8px;
  font-size: var(--fs-xs);
  color: var(--txt-2);
  background: rgba(29, 78, 216, 0.05);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  margin-bottom: var(--s-3);
  border-left: 3px solid #1D4ED8;
  line-height: 1.45;
  animation: fadeUp 0.5s var(--spring-snappy) 500ms backwards;
}
.modal-seguimiento-footer .material-symbols-rounded {
  font-size: 16px;
  color: #1D4ED8;
  flex-shrink: 0;
  margin-top: 2px;
}

@keyframes slideDownIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PESTAÑAS — Glassmorphism + animaciones más vivas
   ============================================================ */

.seg {
  background: var(--surf-2);
  border-radius: var(--r-full);
  padding: 4px;
  position: relative;
  margin-bottom: var(--s-3);
  isolation: isolate;
  display: flex;
  border: 1px solid var(--line);
}

.seg-indicator {
  position: absolute;
  top: 4px; bottom: 4px;
  background: var(--bg-elev);
  border-radius: var(--r-full);
  z-index: 1;
  transition: transform var(--dur-slow) var(--spring-snappy),
              width var(--dur-slow) var(--spring-snappy);
  box-shadow: var(--sh-sm), 0 0 0 1px rgba(190, 22, 35, 0.08);
}

.seg-btn {
  position: relative;
  z-index: 2;
}
.seg-btn.active {
  color: var(--ac);
  font-weight: 700;
}
.seg-btn.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 700;
  transform: scale(1.15);
  filter: drop-shadow(0 1px 2px rgba(190, 22, 35, 0.3));
}

/* ============================================================
   HERO STATS — Glow más vivo, números con peso variable
   ============================================================ */

.hero-stats {
  background: var(--mesh-warm), linear-gradient(135deg, var(--surf-2) 0%, var(--surf-3) 100%);
  position: relative;
  overflow: hidden;
}
.hero-stats::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(190, 22, 35, 0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.hero-stat-n {
  position: relative;
  z-index: 1;
  font-variation-settings: 'wght' 800;
  background: linear-gradient(135deg, var(--ac) 0%, #DC2626 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(190, 22, 35, 0.1);
}
[data-theme="dark"] .hero-stat-n {
  background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ============================================================
   PLAN CARDS — Sombras de color, gradientes
   ============================================================ */

.plan-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-base) var(--spring-snappy);
  animation: cardSlideIn 0.5s var(--spring-snappy) backwards;
}
.plan-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.plan-card.selected::before {
  opacity: 1;
}
.plan-card.selected {
  border-color: var(--ac);
  box-shadow: var(--sh-glow-ac);
  transform: translateY(-2px);
}
.plan-card:hover:not(.selected) {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ROUTE NUMBERS (chips) — Más sofisticadas
   ============================================================ */

.ruta-num {
  position: relative;
  overflow: hidden;
}
.ruta-num::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  pointer-events: none;
  border-radius: var(--r-md);
}
.ruta-num::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  pointer-events: none;
}

.trip-leg {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trip-leg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
  pointer-events: none;
}

/* ============================================================
   ACTION BAR — Glass + gradient sutil
   ============================================================ */

.action-bar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border) !important;
  box-shadow: 0 -8px 32px rgba(26, 22, 20, 0.08), 0 -1px 0 rgba(255,255,255,0.5) inset;
}
.action-bar-time {
  background: linear-gradient(135deg, var(--ac) 0%, #DC2626 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   BOTTOM SHEET — Glass effect en handle
   ============================================================ */

.bs-handle-area {
  position: relative;
}
.bs-handle {
  background: var(--line-strong);
  transition: background var(--dur-base), width var(--dur-base);
}
.bs-handle-area:hover .bs-handle {
  background: var(--ac);
  width: 56px;
}

/* ============================================================
   MICRO-INTERACCIONES — Botones secundarios
   ============================================================ */

.btn-primary,
.btn-secondary {
  transition: transform var(--dur-base) var(--spring-snappy),
              box-shadow var(--dur-base) var(--ease-snap),
              background var(--dur-fast);
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-secondary::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.3), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  border-radius: 50%;
  transition: transform 0.5s var(--ease-out);
}
.btn-primary:active::after,
.btn-secondary:active::after {
  transform: translate(-50%, -50%) scale(3);
  transition-duration: 0.6s;
}
.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* ============================================================
   PANEL TUXTLA — Iconos con motion sutil
   ============================================================ */

.tx-section-icon {
  transition: transform var(--dur-base) var(--spring-snappy);
}
.tx-section:hover .tx-section-icon {
  transform: scale(1.15) rotate(-5deg);
}

.tx-emerg,
.tx-sos-btn,
.tx-place,
.tx-terminal,
.tx-event {
  position: relative;
  overflow: hidden;
}

.tx-place:hover .tx-place-icon,
.tx-terminal:hover .tx-terminal-icon {
  transform: rotate(-5deg) scale(1.05);
  transition: transform var(--dur-base) var(--spring-bouncy);
}

/* ============================================================
   FOOTER del shell del bottom sheet
   ============================================================ */

.bs-peek {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ============================================================
   ANIMACIONES DE ENTRADA en cargas iniciales
   ============================================================ */

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.skel { animation: pulse-soft 1.6s ease-in-out infinite; }

/* ============================================================
   FAB primary — Color glow
   ============================================================ */

.fab.fab-primary {
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac-dark) 100%) !important;
  box-shadow: var(--sh-ac), var(--sh-md);
}
.fab.fab-primary:hover {
  box-shadow: 0 8px 32px rgba(190, 22, 35, 0.4), 0 4px 12px rgba(190, 22, 35, 0.2);
}

/* ============================================================
   ICONOS DE PESTAÑA — Variable font animation
   ============================================================ */

.seg-btn .material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  transition: font-variation-settings 0.4s var(--ease-snap),
              transform 0.3s var(--spring-bouncy);
}

/* ============================================================
   MODAL — refinamientos del fondo
   ============================================================ */

.modal-backdrop {
  background: rgba(26, 22, 20, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-backdrop.closing {
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.modal {
  animation: modalIn 0.5s var(--spring-soft) backwards;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   ROUTE ROW — micro-feedback en hover
   ============================================================ */

.ruta-row {
  transition: all var(--dur-base) var(--ease-snap);
}
.ruta-row:hover .ruta-num {
  transform: scale(1.05) rotate(-3deg);
  transition: transform var(--dur-base) var(--spring-bouncy);
}

/* ============================================================
   FAVS button (corazón) — late en hover
   ============================================================ */

.ruta-fav .material-symbols-rounded {
  transition: transform 0.3s var(--spring-bouncy),
              font-variation-settings 0.3s;
}
.ruta-fav:hover .material-symbols-rounded {
  transform: scale(1.2);
}
.ruta-fav.is-fav .material-symbols-rounded {
  animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ============================================================
   QUICK BUTTONS (origen, destino) — más vivos
   ============================================================ */

.quick-btn {
  transition: all var(--dur-base) var(--spring-snappy);
}
.quick-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
  border-color: var(--ac);
}
.quick-btn.armed {
  background: var(--ac-tint);
  border-color: var(--ac);
  animation: pulseArmed 1.5s ease-in-out infinite;
}
@keyframes pulseArmed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(190, 22, 35, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(190, 22, 35, 0); }
}

/* ============================================================
   PROGRESS BAR / LOADER — más fino
   ============================================================ */

.loader-bar {
  background: linear-gradient(90deg, transparent, var(--ac), var(--ac), transparent);
  height: 3px;
}

/* ============================================================
   TOAST — slide más sofisticado
   ============================================================ */

.toast {
  background: rgba(26, 22, 20, 0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(255,255,255,0.06) inset;
}

/* ============================================================
   STAGGERED LIST appearance — for plan cards
   ============================================================ */

.plan-card:nth-child(1) { animation-delay: 0ms; }
.plan-card:nth-child(2) { animation-delay: 60ms; }
.plan-card:nth-child(3) { animation-delay: 120ms; }
.plan-card:nth-child(4) { animation-delay: 180ms; }
.plan-card:nth-child(5) { animation-delay: 240ms; }

/* ============================================================
   reduce motion fallback
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .ruta-fav.is-fav .material-symbols-rounded { animation: none; }
  .quick-btn.armed { animation: none; }
}

/* ============================================================
   ===  REDISEÑO "CÓMO LLEGAR" (panel ir) — v2  ===
   Visual más sofisticado, flujo más claro,
   "rail" visual que une origen y destino
   ============================================================ */

.planner-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Hero compacto del panel ir */
.ir-hero {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  background: linear-gradient(135deg,
    rgba(29, 78, 216, 0.06) 0%,
    rgba(124, 58, 237, 0.04) 100%);
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 78, 216, 0.12);
  position: relative;
  overflow: hidden;
}
.ir-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(29, 78, 216, 0.12), transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .ir-hero {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.12) 0%,
    rgba(168, 85, 247, 0.08) 100%);
  border-color: rgba(59, 130, 246, 0.2);
}
.ir-hero-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: var(--sh-info);
  position: relative; z-index: 1;
}
.ir-hero-icon .material-symbols-rounded {
  font-size: 26px;
  font-variation-settings: 'FILL' 1, 'wght' 600;
}
.ir-hero-text { position: relative; z-index: 1; }
.ir-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1D4ED8;
  margin-bottom: 4px;
}
[data-theme="dark"] .ir-hero-eyebrow { color: #93C5FD; }
.ir-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--txt-1);
}

/* Buscador unificado en el panel ir */
.ir-search {
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  transition: all var(--dur-base);
}
.ir-search:focus-within {
  border-color: #1D4ED8;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.08);
}

/* Bloque conectado de origen-destino */
.ir-points {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-3);
  padding: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
}

.ir-points-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 22px;
  position: relative;
}
.ir-rail-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.ir-rail-dot-o {
  background: #15803D;
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.15);
}
.ir-rail-dot-d {
  background: var(--ac);
  box-shadow: 0 0 0 4px rgba(190, 22, 35, 0.15);
}
.ir-rail-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom,
    #15803D 0%,
    #15803D 20%,
    transparent 20%,
    transparent 40%,
    var(--txt-3) 40%,
    var(--txt-3) 60%,
    transparent 60%,
    transparent 80%,
    var(--ac) 80%,
    var(--ac) 100%);
  background-size: 100% 10px;
  margin: 4px 0;
  position: relative;
}

.ir-points-fields {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ir-input {
  background: transparent !important;
  border: none !important;
  padding: 10px 8px !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer;
  display: flex; align-items: center;
  gap: 0 !important;
  transition: background var(--dur-fast);
  min-height: 48px;
}
.ir-input:hover {
  background: var(--surf-2) !important;
}
.ir-input .planner-dot { display: none; }
.ir-input .planner-input-text {
  flex: 1; min-width: 0;
}
.ir-input .planner-input-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-2);
  margin-bottom: 2px;
}
.ir-input .planner-input-value {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--txt-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ir-input .planner-input-value.empty {
  color: var(--txt-3);
  font-weight: 500;
}
.ir-input.has-value .planner-input-value {
  color: var(--txt-1);
  font-weight: 700;
}
.ir-input-chev {
  font-size: 18px;
  color: var(--txt-3);
  transition: transform var(--dur-base);
}
.ir-input:hover .ir-input-chev {
  transform: translateX(2px);
  color: var(--ac);
}

/* Swap button entre origen y destino (en el rail visual) */
.ir-swap {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  color: var(--txt-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--dur-base) var(--spring-snappy);
  z-index: 2;
}
.ir-swap:hover {
  background: var(--ac-tint);
  border-color: var(--ac);
  color: var(--ac);
  transform: translateY(-50%) rotate(180deg);
}
.ir-swap:active {
  transform: translateY(-50%) rotate(180deg) scale(0.9);
}
.ir-swap .material-symbols-rounded {
  font-size: 18px;
}

/* Grid de acciones rápidas (3 columnas) */
.ir-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ir-quick {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  transition: all var(--dur-base) var(--spring-snappy);
  min-height: 76px;
}
.ir-quick:hover {
  border-color: var(--ac);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  background: var(--ac-tint);
}
.ir-quick:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}
.ir-quick.armed {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--txt-on-ac);
  box-shadow: var(--sh-ac);
}
.ir-quick.armed .ir-quick-icon,
.ir-quick.armed .ir-quick-text,
.ir-quick.armed .ir-quick-text b {
  color: var(--txt-on-ac);
}
.ir-quick-icon {
  font-size: 24px !important;
  color: var(--ac);
  transition: transform var(--dur-base) var(--spring-bouncy);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.ir-quick:hover .ir-quick-icon {
  transform: scale(1.15) rotate(-5deg);
}
.ir-quick-text {
  font-size: 10px;
  color: var(--txt-2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.ir-quick-text b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--txt-1);
  margin-top: 1px;
  letter-spacing: -0.02em;
}

/* CTA buscar */
.ir-cta {
  width: 100%;
  margin: 0 !important;
  padding: 14px 18px !important;
  font-size: var(--fs-md) !important;
  background: linear-gradient(135deg, var(--ac) 0%, #DC2626 100%) !important;
  box-shadow: var(--sh-ac), 0 0 0 0 rgba(190, 22, 35, 0);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-base);
}
.ir-cta:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(190, 22, 35, 0.35), 0 4px 12px rgba(190, 22, 35, 0.18) !important;
}
.ir-cta:disabled {
  background: var(--surf-3) !important;
  color: var(--txt-3) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.ir-cta .material-symbols-rounded {
  font-size: 22px !important;
  font-variation-settings: 'FILL' 1, 'wght' 600 !important;
}

.ir-clear {
  width: 100%;
  padding: 8px !important;
  font-size: var(--fs-sm) !important;
  color: var(--txt-2) !important;
  background: transparent !important;
  border: none !important;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: color var(--dur-fast);
}
.ir-clear:hover { color: var(--ac) !important; }

/* En móvil, ajustes específicos */
@media (max-width: 768px) {
  .ir-hero {
    padding: var(--s-3);
  }
  .ir-hero-icon {
    width: 42px; height: 42px;
  }
  .ir-hero-icon .material-symbols-rounded {
    font-size: 22px;
  }
  .ir-hero-title {
    font-size: var(--fs-lg);
  }
  .ir-quick {
    min-height: 70px;
    padding: 10px 6px;
  }
  .ir-quick-icon {
    font-size: 22px !important;
  }
  .ir-quick-text {
    font-size: 9px;
  }
  .ir-quick-text b {
    font-size: 11px;
  }
}

/* Animaciones de entrada del panel */
[data-panel="ir"]:not([hidden]) > .planner-v2 > * {
  animation: irFadeUp 0.5s var(--spring-snappy) backwards;
}
[data-panel="ir"]:not([hidden]) > .planner-v2 > *:nth-child(1) { animation-delay: 0ms; }
[data-panel="ir"]:not([hidden]) > .planner-v2 > *:nth-child(2) { animation-delay: 50ms; }
[data-panel="ir"]:not([hidden]) > .planner-v2 > *:nth-child(3) { animation-delay: 100ms; }
[data-panel="ir"]:not([hidden]) > .planner-v2 > *:nth-child(4) { animation-delay: 150ms; }
[data-panel="ir"]:not([hidden]) > .planner-v2 > *:nth-child(5) { animation-delay: 200ms; }
[data-panel="ir"]:not([hidden]) > .planner-v2 > *:nth-child(6) { animation-delay: 250ms; }
@keyframes irFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   ▓▓▓  REDISEÑO VISUAL — MODERNIDAD Y FUTURO  ▓▓▓
   Aplicado en orden: header → modal → rutas → cards → eventos
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. HEADER (topbar) — Identidad de marca con personalidad
   ──────────────────────────────────────────────────────────────── */

.topbar {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(252, 250, 247, 0.96) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(190, 22, 35, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 2px 8px rgba(26, 22, 20, 0.04);
  position: relative;
}
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 15% 50%, rgba(190, 22, 35, 0.04) 0%, transparent 50%),
    radial-gradient(at 85% 50%, rgba(29, 78, 216, 0.03) 0%, transparent 50%);
  pointer-events: none;
}
[data-theme="dark"] .topbar {
  background: linear-gradient(135deg,
    rgba(22, 19, 18, 0.95) 0%,
    rgba(28, 24, 22, 0.92) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .topbar::before {
  background:
    radial-gradient(at 15% 50%, rgba(239, 68, 68, 0.05) 0%, transparent 50%),
    radial-gradient(at 85% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 50%);
}

.topbar-row {
  position: relative;
  z-index: 1;
}

/* Brand: logo más sofisticado + texto con jerarquía */
.brand-mark {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  box-shadow:
    0 4px 12px rgba(190, 22, 35, 0.18),
    0 0 0 1px rgba(190, 22, 35, 0.06) inset,
    0 0 0 3px rgba(190, 22, 35, 0.04);
  transition: transform var(--dur-base) var(--spring-snappy),
              box-shadow var(--dur-base);
  cursor: pointer;
}
.brand-mark:hover {
  transform: scale(1.05) rotate(-3deg);
  box-shadow:
    0 6px 20px rgba(190, 22, 35, 0.28),
    0 0 0 1px rgba(190, 22, 35, 0.08) inset,
    0 0 0 4px rgba(190, 22, 35, 0.06);
}

.brand-title {
  background: linear-gradient(135deg, var(--txt-1) 0%, #3a2825 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.025em;
  font-variation-settings: 'wght' 800;
  transition: font-variation-settings 0.4s var(--ease-out);
}
[data-theme="dark"] .brand-title {
  background: linear-gradient(135deg, #F5F1EC 0%, #C9C0B0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.brand:hover .brand-title {
  font-variation-settings: 'wght' 900;
}
.brand-sub {
  font-variation-settings: 'wght' 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  color: var(--ac);
  opacity: 0.85;
}
[data-theme="dark"] .brand-sub { color: #F87171; }

/* Icon buttons del header: más refinados */
.icon-btn {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--dur-base) var(--spring-snappy);
}
.icon-btn:hover {
  background: var(--surf-2);
  border-color: var(--line);
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}
.icon-btn:active {
  transform: scale(0.94);
  transition-duration: 60ms;
}
.icon-btn[aria-pressed="true"] {
  background: rgba(190, 22, 35, 0.08);
  border-color: rgba(190, 22, 35, 0.2);
  color: var(--ac);
}
[data-theme="dark"] .icon-btn[aria-pressed="true"] {
  background: rgba(190, 22, 35, 0.18);
  border-color: rgba(190, 22, 35, 0.3);
}
.icon-btn .material-symbols-rounded {
  font-size: 22px;
}

/* ────────────────────────────────────────────────────────────────
   2. MODAL DE BIENVENIDA — Premium look
   ──────────────────────────────────────────────────────────────── */

#welcomeModal .modal {
  max-width: 460px;
  padding: 0;
  overflow: hidden;
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  position: relative;
}

/* Banner superior con gradiente mesh */
#welcomeModal .modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background:
    radial-gradient(at 20% 40%, rgba(190, 22, 35, 0.22) 0%, transparent 50%),
    radial-gradient(at 80% 30%, rgba(245, 158, 11, 0.18) 0%, transparent 50%),
    radial-gradient(at 50% 80%, rgba(29, 78, 216, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, rgba(190, 22, 35, 0.06) 0%, transparent 100%);
  pointer-events: none;
}

#welcomeModal .modal-logo {
  position: relative;
  z-index: 1;
  margin: 28px auto 16px;
  width: 80px;
  height: 80px;
  border-radius: var(--r-lg);
  display: block;
  box-shadow:
    0 8px 32px rgba(190, 22, 35, 0.3),
    0 0 0 4px rgba(255, 255, 255, 0.4) inset,
    0 0 0 6px rgba(190, 22, 35, 0.08);
  animation: logoIn 0.8s var(--spring-soft);
}
[data-theme="dark"] #welcomeModal .modal-logo {
  box-shadow:
    0 8px 32px rgba(190, 22, 35, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.06) inset;
}
@keyframes logoIn {
  from { opacity: 0; transform: scale(0.5) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

#welcomeModal .modal-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
  padding: 0 var(--s-5);
  margin-bottom: var(--s-4);
  background: linear-gradient(135deg, var(--txt-1) 0%, var(--ac) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeUp 0.6s var(--spring-snappy) 0.2s backwards;
}
[data-theme="dark"] #welcomeModal .modal-title {
  background: linear-gradient(135deg, #F5F1EC 0%, #EF4444 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

#welcomeModal .modal-body {
  position: relative;
  z-index: 1;
  padding: 0 var(--s-5) var(--s-4);
  color: var(--txt-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  animation: fadeUp 0.6s var(--spring-snappy) 0.3s backwards;
}
#welcomeModal .modal-body > p:first-child {
  font-size: var(--fs-md);
  color: var(--txt-1);
  margin-bottom: var(--s-3);
}
#welcomeModal .modal-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#welcomeModal .modal-body ul li {
  position: relative;
  padding-left: 28px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: var(--fs-sm);
  color: var(--txt-2);
}
#welcomeModal .modal-body ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #15803D 0%, #16A34A 100%);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  margin-top: 2px;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.3);
}
#welcomeModal .modal-body ul li b {
  color: var(--txt-1);
  font-weight: 700;
}
#welcomeModal .modal-actions {
  padding: 0 var(--s-5) var(--s-5);
  position: relative;
  z-index: 1;
  animation: fadeUp 0.6s var(--spring-snappy) 0.4s backwards;
}
#welcomeModal .modal-actions .btn-primary {
  width: 100%;
  padding: 14px 20px !important;
  font-size: var(--fs-md) !important;
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac-dark) 100%) !important;
  box-shadow: var(--sh-ac), 0 0 0 0 rgba(190, 22, 35, 0);
  position: relative;
  overflow: hidden;
}
#welcomeModal .modal-actions .btn-primary::after {
  content: '→';
  margin-left: 8px;
  display: inline-block;
  transition: transform var(--dur-base) var(--spring-bouncy);
}
#welcomeModal .modal-actions .btn-primary:hover::after {
  transform: translateX(4px);
}

/* ────────────────────────────────────────────────────────────────
   3. LISTA DE RUTAS — Cards modernas, no filas planas
   ──────────────────────────────────────────────────────────────── */

.list-rutas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

.ruta-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px;
  background: var(--bg-elev);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--dur-base) var(--spring-snappy);
  animation: fadeUp 0.4s var(--spring-snappy) backwards;
}

/* Glow lateral al hover */
.ruta-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  border-radius: 0 3px 3px 0;
  transition: background var(--dur-base);
}
.ruta-row:hover {
  background: var(--surf-2);
  border-color: var(--line);
  transform: translateX(2px);
}
.ruta-row:hover::before {
  background: var(--ac);
}
.ruta-row.active {
  background: linear-gradient(135deg,
    rgba(190, 22, 35, 0.08) 0%,
    rgba(190, 22, 35, 0.02) 100%);
  border-color: rgba(190, 22, 35, 0.25);
  box-shadow: 0 4px 12px rgba(190, 22, 35, 0.12);
}
.ruta-row.active::before {
  background: var(--ac);
  width: 4px;
  box-shadow: 0 0 12px rgba(190, 22, 35, 0.5);
}

/* Pill del número de ruta — más sofisticada */
.ruta-num {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  transition: transform var(--dur-base) var(--spring-bouncy);
}
.ruta-num::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 45%);
  pointer-events: none;
}
.ruta-num::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
  border-radius: 0 0 14px 14px;
}
.ruta-row:hover .ruta-num {
  transform: scale(1.05) rotate(-4deg);
}
.ruta-row.active .ruta-num {
  transform: scale(1.08);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.18),
    0 0 0 2px rgba(255, 255, 255, 0.2) inset,
    0 0 0 3px var(--bg-elev),
    0 0 0 4px currentColor;
}

.ruta-info { flex: 1; min-width: 0; }
.ruta-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--txt-1);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-bottom: 4px;
}
.ruta-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--txt-2);
}
.ruta-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ruta-meta b {
  color: var(--txt-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
}
.ruta-meta-dot {
  width: 3px; height: 3px;
  background: var(--txt-3);
  border-radius: 50%;
  opacity: 0.5;
}

/* Botón fav refinado */
.ruta-fav {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--txt-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--dur-base) var(--spring-snappy);
  flex-shrink: 0;
}
.ruta-fav:hover {
  background: rgba(190, 22, 35, 0.08);
  color: var(--ac);
  transform: scale(1.05);
}
.ruta-fav.is-fav {
  color: var(--ac);
  background: rgba(190, 22, 35, 0.06);
}
.ruta-fav .material-symbols-rounded {
  font-size: 20px;
  transition: font-variation-settings var(--dur-base);
}
.ruta-fav.is-fav .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

/* ────────────────────────────────────────────────────────────────
   4. PLAN CARDS — Resultados de búsqueda más jerárquicos
   ──────────────────────────────────────────────────────────────── */

.plan-card {
  position: relative;
  padding: var(--s-3);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--dur-base) var(--spring-snappy);
  margin-bottom: var(--s-2);
}
.plan-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ac) 30%,
    var(--ac) 70%,
    transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.plan-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.plan-card.selected {
  border-color: var(--ac);
  background: linear-gradient(135deg,
    var(--bg-elev) 0%,
    rgba(190, 22, 35, 0.02) 100%);
  box-shadow:
    var(--sh-md),
    0 0 0 1px rgba(190, 22, 35, 0.1);
}
.plan-card.selected::before {
  opacity: 1;
}

.plan-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.plan-time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--txt-1) 0%, var(--ac) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .plan-time {
  background: linear-gradient(135deg, #F5F1EC 0%, #EF4444 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.plan-time-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-2);
  margin-left: 4px;
  -webkit-text-fill-color: var(--txt-2);
}
.plan-tags {
  display: flex; gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.plan-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surf-2);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  color: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plan-tag .material-symbols-rounded { font-size: 12px; }
.plan-tag.tag-cost {
  background: rgba(21, 128, 61, 0.08);
  color: #15803D;
}
.plan-tag.tag-walk {
  background: rgba(245, 158, 11, 0.08);
  color: #B45309;
}
.plan-tag.tag-transfers {
  background: rgba(29, 78, 216, 0.08);
  color: #1D4ED8;
}

/* ────────────────────────────────────────────────────────────────
   5. EVENTOS DE ALERTA CHIAPAS — Cards más vivas
   ──────────────────────────────────────────────────────────────── */

.tx-event {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tx-event:hover {
  border-color: #EC4899;
  background: linear-gradient(135deg,
    rgba(236, 72, 153, 0.03) 0%,
    transparent 60%);
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.15);
  transform: translateX(2px);
}
.tx-event-date {
  position: relative;
  border-radius: 12px;
  box-shadow:
    0 2px 8px rgba(236, 72, 153, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  transition: transform var(--dur-base) var(--spring-bouncy);
}
.tx-event:hover .tx-event-date {
  transform: rotate(-3deg) scale(1.04);
}
.tx-event-date::before {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px; height: 4px;
  background: #BE185D;
  border-radius: 0 0 4px 4px;
  opacity: 0.6;
}
.tx-event-day {
  font-size: 24px;
  margin-top: 2px;
}

/* ────────────────────────────────────────────────────────────────
   6. EMERGENCIAS — Tarjetas con más presencia
   ──────────────────────────────────────────────────────────────── */

.tx-emerg {
  position: relative;
  overflow: hidden;
  transition: all var(--dur-base) var(--spring-snappy);
}
.tx-emerg::before {
  content: '';
  position: absolute;
  top: -50%; right: -50%;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.15), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.tx-emerg:hover::before { opacity: 1; }
.tx-emerg-n {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .tx-emerg-n {
  background: linear-gradient(135deg, #F87171 0%, #DC2626 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ────────────────────────────────────────────────────────────────
   7. SECTION HEADERS — Más jerarquía visual
   ──────────────────────────────────────────────────────────────── */

.section-h {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 18px 0 12px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--txt-1);
  letter-spacing: -0.02em;
  position: relative;
}
.section-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    var(--line) 0%,
    transparent 100%);
  margin-left: var(--s-2);
}
.section-h-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--surf-2);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  color: var(--txt-2);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────
   8. SEARCH BOX — Más sofisticado
   ──────────────────────────────────────────────────────────────── */

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  height: 46px;
  transition: all var(--dur-base);
  margin-bottom: var(--s-2);
}
.search:focus-within {
  border-color: var(--ac);
  box-shadow:
    0 0 0 4px rgba(190, 22, 35, 0.1),
    0 2px 8px rgba(190, 22, 35, 0.06);
}
.search > .material-symbols-rounded:first-child {
  color: var(--txt-3);
  font-size: 20px;
  flex-shrink: 0;
  transition: color var(--dur-base);
}
.search:focus-within > .material-symbols-rounded:first-child {
  color: var(--ac);
}
.search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--txt-1);
  font-family: inherit;
}
.search input::placeholder {
  color: var(--txt-3);
  font-weight: 400;
}

/* ────────────────────────────────────────────────────────────────
   9. PESTAÑAS — Segmented refinado
   ──────────────────────────────────────────────────────────────── */

.seg {
  padding: 4px;
  background: var(--surf-2);
  border: 1px solid var(--line);
  box-shadow: var(--sh-press);
}
.seg-indicator {
  background: var(--bg-elev);
  box-shadow:
    var(--sh-sm),
    0 0 0 1px rgba(190, 22, 35, 0.08);
}

/* ────────────────────────────────────────────────────────────────
   10. ACTION BAR FLOTANTE — Más premium
   ──────────────────────────────────────────────────────────────── */

.action-bar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 -8px 32px rgba(26, 22, 20, 0.08),
    0 -1px 0 rgba(255, 255, 255, 0.6) inset;
}
.action-bar-time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--ac) 0%, #DC2626 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ────────────────────────────────────────────────────────────────
   11. EMPTY STATES — Mejor UX cuando no hay resultados
   ──────────────────────────────────────────────────────────────── */

.empty {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--txt-2);
}
.empty-icon {
  font-size: 56px !important;
  color: var(--txt-3);
  opacity: 0.4;
  margin-bottom: var(--s-3);
  display: block;
}
.empty-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--txt-1);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.empty-sub {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────
   12. SCROLLBAR REFINADO (continuación)
   ──────────────────────────────────────────────────────────────── */

.panels {
  scroll-behavior: smooth;
}

/* ────────────────────────────────────────────────────────────────
   13. ANIMACIONES DE ENTRADA DEL CONTENIDO
   ──────────────────────────────────────────────────────────────── */

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ruta-row:nth-child(1) { animation-delay: 0ms; }
.ruta-row:nth-child(2) { animation-delay: 30ms; }
.ruta-row:nth-child(3) { animation-delay: 60ms; }
.ruta-row:nth-child(4) { animation-delay: 90ms; }
.ruta-row:nth-child(5) { animation-delay: 120ms; }
.ruta-row:nth-child(6) { animation-delay: 140ms; }
.ruta-row:nth-child(7) { animation-delay: 160ms; }
.ruta-row:nth-child(8) { animation-delay: 180ms; }
.ruta-row:nth-child(n+9) { animation-delay: 200ms; }

/* ────────────────────────────────────────────────────────────────
   14. RESPONSIVE — Refinamientos en mobile
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .topbar-row {
    padding: 10px 0;
  }
  .brand-mark {
    width: 38px; height: 38px;
  }
  .brand-title {
    font-size: var(--fs-md);
  }
  .brand-sub {
    font-size: 9px;
  }
  .icon-btn {
    width: 38px; height: 38px;
  }
  .ruta-num {
    width: 42px; height: 42px;
    border-radius: 12px;
  }
  #welcomeModal .modal-logo {
    width: 64px; height: 64px;
    margin-top: 20px;
  }
  #welcomeModal .modal-title {
    font-size: var(--fs-xl);
  }
}

/* Tag "Más rápido" — destaca el plan recomendado */
.plan-tag.tag-best {
  background: linear-gradient(135deg, #15803D 0%, #16A34A 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(21, 128, 61, 0.3);
  border: none;
  font-weight: 800;
}
.plan-tag.tag-best .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 700;
  font-size: 13px;
}

/* Plan trip — la "tira" con números de ruta + caminata */
.plan-trip {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surf-2);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
}
.trip-leg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  position: relative;
  overflow: hidden;
}
.trip-leg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
  pointer-events: none;
}
.trip-arrow {
  color: var(--txt-3);
  font-weight: 700;
  font-size: 16px;
  display: inline-block;
}
.trip-walk {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  background: rgba(245, 158, 11, 0.1);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  color: #B45309;
  margin-left: 4px;
}
.trip-walk .material-symbols-rounded {
  font-size: 13px;
  font-variation-settings: 'FILL' 1;
}

/* Toggle "Ver paso a paso" */
.plan-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  margin-top: var(--s-2);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--txt-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-base);
}
.plan-detail-toggle:hover {
  background: var(--surf-2);
  color: var(--ac);
  border-color: var(--ac);
  border-style: solid;
}
.plan-detail-toggle .material-symbols-rounded {
  font-size: 18px;
  transition: transform var(--dur-base) var(--spring-snappy);
}
.plan-card.expanded .plan-detail-toggle .material-symbols-rounded {
  transform: rotate(180deg);
}
.plan-pasos {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.plan-card.expanded .plan-pasos {
  max-height: 2000px;
  margin-top: var(--s-3);
}

/* ════════════════════════════════════════════════════════════════
   ▓▓▓  SELECTOR DE CIUDAD MULTI-CIUDAD  ▓▓▓
   ════════════════════════════════════════════════════════════════ */

/* Botón en header */
.city-selector-btn {
  width: auto !important;
  padding: 0 12px !important;
  gap: 6px;
  display: flex !important;
  align-items: center;
  border: 1px solid rgba(190, 22, 35, 0.2);
  background: rgba(190, 22, 35, 0.04);
  font-family: var(--font-display);
}
.city-selector-btn:hover {
  background: rgba(190, 22, 35, 0.1);
  border-color: rgba(190, 22, 35, 0.4);
}
.city-current {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--ac);
}
[data-theme="dark"] .city-current { color: #F87171; }

/* Modal del selector */
.city-modal {
  max-width: 520px;
  padding: 28px 24px;
  position: relative;
}
.city-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surf-2);
  border: 1px solid var(--line);
  color: var(--txt-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--dur-base);
}
.city-modal-close:hover {
  background: var(--ac);
  color: white;
  transform: rotate(90deg);
}
.city-modal .modal-title {
  text-align: left !important;
  background: none !important;
  -webkit-text-fill-color: var(--txt-1) !important;
  color: var(--txt-1) !important;
  padding: 0 !important;
  font-size: var(--fs-xl) !important;
  margin-bottom: 4px !important;
}
.city-modal-sub {
  color: var(--txt-2);
  font-size: var(--fs-sm);
  margin-bottom: 20px;
}
.city-modal-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  color: var(--txt-3);
}

/* Grid de ciudades */
.city-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.city-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--spring-snappy);
  text-align: left;
  font-family: inherit;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.city-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ac);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--spring-snappy);
}
.city-card:hover {
  border-color: var(--ac);
  background: linear-gradient(135deg, rgba(190,22,35,0.04) 0%, transparent 60%);
  transform: translateX(4px);
}
.city-card:hover::before { transform: scaleY(1); }
.city-card.activa {
  border-color: var(--ac);
  background: linear-gradient(135deg, rgba(190,22,35,0.08) 0%, rgba(190,22,35,0.02) 100%);
  box-shadow: 0 4px 16px rgba(190,22,35,0.15);
}
.city-card.activa::before { transform: scaleY(1); }
.city-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.city-card.disabled:hover {
  transform: none;
  border-color: var(--line);
  background: var(--bg-elev);
}

.city-card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac-dark) 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(190,22,35,0.25),
              0 0 0 1px rgba(255,255,255,0.1) inset;
}
.city-card-icon .material-symbols-rounded {
  color: white;
  font-size: 26px;
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.city-card-content {
  flex: 1;
  min-width: 0;
}
.city-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--txt-1);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.city-card-meta {
  font-size: var(--fs-xs);
  color: var(--txt-2);
}
.city-card-routes {
  display: inline-block;
  padding: 1px 7px;
  background: var(--surf-2);
  border-radius: var(--r-full);
  font-weight: 700;
  color: var(--txt-1);
  margin-right: 4px;
}
.city-card-check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--spring-snappy);
}
.city-card.activa .city-card-check { opacity: 1; }
.city-card-check .material-symbols-rounded {
  color: var(--ac);
  font-size: 24px;
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

/* Estado "datos pendientes" */
.city-card.pending::after {
  content: 'Pronto';
  position: absolute;
  top: 12px; right: 12px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(245,158,11,0.3);
}

@media (max-width: 768px) {
  .city-selector-btn { padding: 0 8px !important; }
  .city-current { font-size: 11px; }
}

/* Tag "Viaje largo" — para planes con 2+ transbordos */
.plan-tag.tag-long {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: white;
  border: none;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(245,158,11,0.25);
}
.plan-tag.tag-long .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 600;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════
   ▓▓▓  MEJORAS DE EXPERIENCIA  ▓▓▓
   GPS proactivo + destinos frecuentes + accesibilidad + compartir
   ════════════════════════════════════════════════════════════════ */

/* ── MEJORA 1: TARJETA DE PARADA CERCANA (GPS) ── */
.gps-card {
  margin-bottom: 14px;
  background: linear-gradient(135deg,
    rgba(34, 197, 94, 0.08) 0%,
    rgba(21, 128, 61, 0.04) 100%);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: fadeUp 0.4s var(--spring-snappy);
  position: relative;
}
.gps-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(34,197,94,0.18), transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .gps-card {
  background: linear-gradient(135deg,
    rgba(34, 197, 94, 0.12) 0%,
    rgba(21, 128, 61, 0.06) 100%);
  border-color: rgba(74, 222, 128, 0.3);
}
.gps-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  position: relative;
  z-index: 1;
}
.gps-card-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #15803D 0%, #16A34A 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.35),
              0 0 0 1px rgba(255,255,255,0.15) inset;
}
.gps-card-icon .material-symbols-rounded {
  color: white;
  font-size: 22px;
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.gps-card-body {
  flex: 1;
  min-width: 0;
}
.gps-card-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #15803D;
  font-weight: 700;
  margin-bottom: 4px;
}
[data-theme="dark"] .gps-card-title {
  color: #4ADE80;
}
.gps-card-route {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.gps-route-pill {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  white-space: nowrap;
}
.gps-route-name {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--txt-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.gps-card-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}
.gps-meta-walk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--txt-2);
  font-weight: 600;
}
.gps-meta-walk .material-symbols-rounded {
  font-size: 14px;
  color: #15803D;
  font-variation-settings: 'FILL' 1;
}
.gps-card-action {
  width: 36px; height: 36px;
  background: var(--bg-elev);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #15803D;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-base) var(--spring-snappy);
}
.gps-card-action:hover {
  background: #15803D;
  color: white;
  transform: translateX(2px);
}
.gps-card-action .material-symbols-rounded { font-size: 18px; }

/* ── BOTÓN TOGGLE GPS ── */
.gps-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--bg-elev);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--txt-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-base);
  font-family: inherit;
}
.gps-toggle-btn:hover {
  border-color: var(--ac);
  background: rgba(190,22,35,0.03);
  color: var(--ac);
  border-style: solid;
}
.gps-toggle-btn.activo {
  background: linear-gradient(135deg, #15803D 0%, #16A34A 100%);
  border-color: transparent;
  border-style: solid;
  color: white;
  box-shadow: 0 4px 12px rgba(21,128,61,0.3);
}
.gps-toggle-btn.activo:hover {
  background: linear-gradient(135deg, #166534 0%, #15803D 100%);
}
.gps-toggle-btn.activo .gps-toggle-text::before {
  content: '🟢 ';
}
.gps-toggle-btn .material-symbols-rounded {
  font-size: 20px;
}

/* ── MARKER GPS DEL USUARIO (Leaflet) ── */
.gps-user-marker {
  position: relative;
}
.gps-pulse {
  position: absolute;
  top: -8px; left: -8px;
  width: 40px; height: 40px;
  background: rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  animation: gpsPulse 2s ease-out infinite;
  pointer-events: none;
}
.gps-dot {
  position: absolute;
  top: 4px; left: 4px;
  width: 16px; height: 16px;
  background: #3B82F6;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3),
              0 0 0 1px rgba(0,0,0,0.1);
}
@keyframes gpsPulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* ── MEJORA 2: CHIPS DE DESTINOS FRECUENTES ── */
.quick-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 0;
}
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--txt-1);
  transition: all var(--dur-base) var(--spring-snappy);
  position: relative;
  animation: fadeUp 0.3s var(--spring-snappy) backwards;
}
.quick-chip:nth-child(1) { animation-delay: 0ms; }
.quick-chip:nth-child(2) { animation-delay: 60ms; }
.quick-chip:nth-child(3) { animation-delay: 120ms; }
.quick-chip:hover {
  border-color: var(--ac);
  background: linear-gradient(135deg, rgba(190,22,35,0.04) 0%, transparent 60%);
  color: var(--ac);
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}
.quick-chip:active { transform: scale(0.96); }
.quick-chip .material-symbols-rounded {
  font-size: 16px;
  color: var(--ac);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.quick-chip-text {
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-chip-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--ac);
  color: white;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── MEJORA 3: MODO ACCESIBILIDAD ── */
[data-action="toggle-accesibilidad"].activo {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  color: white;
  border-color: transparent;
}
[data-action="toggle-accesibilidad"].activo .material-symbols-rounded {
  color: white;
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

/* Cuando está activo el modo accesible — reducir todas las animaciones */
.a11y-reduced-motion *,
.a11y-reduced-motion *::before,
.a11y-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
.a11y-reduced-motion .gps-pulse,
.a11y-reduced-motion .parada-ping {
  display: none !important;
}

/* Modo de alto contraste */
.a11y-high-contrast {
  --txt-1: #000 !important;
  --txt-2: #1a1a1a !important;
  --line: #666 !important;
  --line-strong: #333 !important;
}
.a11y-high-contrast[data-theme="dark"] {
  --txt-1: #fff !important;
  --txt-2: #e5e5e5 !important;
  --line: #999 !important;
}
.a11y-high-contrast .ruta-row,
.a11y-high-contrast .plan-card,
.a11y-high-contrast .gps-card,
.a11y-high-contrast .city-card {
  border-width: 2px !important;
}

/* ── MEJORA 4: PARADA COMPARTIDA (marker) ── */
.parada-compartida-marker {
  position: relative;
  width: 40px;
  height: 40px;
}
.parada-shared-pin {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #BE1623 0%, #970b1a 100%);
  border: 3px solid white;
  border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(190,22,35,0.5),
              0 0 0 1px rgba(0,0,0,0.1);
  z-index: 2;
}
.parada-shared-pin .material-symbols-rounded {
  color: white;
  font-size: 18px;
  font-variation-settings: 'FILL' 1;
  transform: rotate(45deg);
}
.parada-ping {
  position: absolute;
  top: -10px; left: -10px;
  width: 60px; height: 60px;
  background: rgba(190, 22, 35, 0.3);
  border: 2px solid rgba(190, 22, 35, 0.5);
  border-radius: 50%;
  animation: paradaPing 2.2s ease-out infinite;
  pointer-events: none;
}
.parada-ping-delay {
  animation-delay: 1.1s;
}
@keyframes paradaPing {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

@media (max-width: 768px) {
  .gps-card-inner { padding: 12px; gap: 10px; }
  .gps-card-icon { width: 38px; height: 38px; }
  .gps-card-icon .material-symbols-rounded { font-size: 20px; }
  .gps-route-name { font-size: var(--fs-sm); }
  .gps-toggle-btn { padding: 10px 12px; font-size: var(--fs-xs); }
  .quick-chip { padding: 6px 10px 6px 8px; font-size: var(--fs-xs); }
}

/* ════════════════════════════════════════════════════════════════
   ▓▓▓  REDISEÑO PESTAÑA RUTAS  ▓▓▓
   Toggle de vistas + modo rejilla + lista compacta + favoritas
   ════════════════════════════════════════════════════════════════ */

/* ── TOGGLE DE VISTA (rejilla / lista / favoritas) ── */
.rutas-view-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surf-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  box-shadow: var(--sh-press);
}
.view-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: calc(var(--r-md) - 4px);
  color: var(--txt-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-base) var(--spring-snappy);
  font-family: inherit;
}
.view-toggle-btn:hover {
  background: var(--bg-elev);
  color: var(--txt-1);
}
.view-toggle-btn.activo {
  background: var(--bg-elev);
  color: var(--ac);
  box-shadow: var(--sh-sm),
              0 0 0 1px rgba(190, 22, 35, 0.1);
}
.view-toggle-btn .material-symbols-rounded {
  font-size: 18px;
  transition: font-variation-settings var(--dur-base);
}
.view-toggle-btn.activo .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 600;
}
.view-toggle-text {
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media (max-width: 480px) {
  .view-toggle-text { display: none; }
  .view-toggle-btn { padding: 8px; }
}

/* ── MODO REJILLA: cuadrícula de pills numerados ── */
.list-rutas-rejilla {
  display: block;
  padding: 0 !important;
}
.rutas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  padding: 4px;
}
.ruta-grid-pill {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--ruta-color, #888);
  color: white;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--dur-base) var(--spring-snappy);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  animation: fadeUp 0.3s var(--spring-snappy) backwards;
  font-family: inherit;
  min-height: 56px;
}
.ruta-grid-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.28) 0%,
    transparent 45%);
  pointer-events: none;
}
.ruta-grid-pill::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
  border-radius: 0 0 12px 12px;
}
.ruta-grid-pill:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  z-index: 2;
}
.ruta-grid-pill:active {
  transform: scale(0.96);
  transition-duration: 60ms;
}
.ruta-grid-pill.active {
  transform: scale(1.08);
  border-color: white;
  box-shadow:
    0 0 0 3px var(--ruta-color, #BE1623),
    0 8px 20px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  z-index: 3;
}
.ruta-grid-num {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.ruta-grid-fav-mark {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  color: white;
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  filter: drop-shadow(0 0 2px rgba(190, 22, 35, 0.6));
}

/* Animación entrada escalonada en rejilla */
.rutas-grid .ruta-grid-pill:nth-child(1) { animation-delay: 0ms; }
.rutas-grid .ruta-grid-pill:nth-child(2) { animation-delay: 15ms; }
.rutas-grid .ruta-grid-pill:nth-child(3) { animation-delay: 30ms; }
.rutas-grid .ruta-grid-pill:nth-child(4) { animation-delay: 45ms; }
.rutas-grid .ruta-grid-pill:nth-child(5) { animation-delay: 60ms; }
.rutas-grid .ruta-grid-pill:nth-child(6) { animation-delay: 75ms; }
.rutas-grid .ruta-grid-pill:nth-child(7) { animation-delay: 90ms; }
.rutas-grid .ruta-grid-pill:nth-child(8) { animation-delay: 105ms; }
.rutas-grid .ruta-grid-pill:nth-child(n+9) { animation-delay: 120ms; }

/* ── MODO LISTA COMPACTA: filas con info útil ── */
.list-rutas-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ruta-row-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--spring-snappy);
  animation: fadeUp 0.3s var(--spring-snappy) backwards;
  position: relative;
}
.ruta-row-compact::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  border-radius: 0 3px 3px 0;
  transition: background var(--dur-base);
}
.ruta-row-compact:hover {
  background: var(--surf-2);
  border-color: var(--line);
  transform: translateX(2px);
}
.ruta-row-compact:hover::before {
  background: var(--ac);
}
.ruta-row-compact.active {
  background: linear-gradient(135deg, rgba(190, 22, 35, 0.06) 0%, transparent 60%);
  border-color: rgba(190, 22, 35, 0.25);
}
.ruta-row-compact.active::before {
  background: var(--ac);
  width: 4px;
}
.ruta-row-compact .ruta-num {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.ruta-row-compact .ruta-num::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, transparent 50%);
  pointer-events: none;
}
.ruta-meta-compact {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--txt-2);
  margin-top: 2px;
}
.ruta-meta-compact > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.ruta-meta-compact .material-symbols-rounded {
  font-size: 13px;
  color: var(--txt-3);
}
.ruta-meta-km { color: var(--txt-2); }
.ruta-meta-cost { color: #15803D; }
.ruta-meta-cost .material-symbols-rounded { color: #15803D; font-variation-settings: 'FILL' 1; }
[data-theme="dark"] .ruta-meta-cost { color: #4ADE80; }
[data-theme="dark"] .ruta-meta-cost .material-symbols-rounded { color: #4ADE80; }

/* ── REDUCIR ANIMACIÓN MUY LARGA EN LISTA COMPACTA ── */
.list-rutas-lista .ruta-row-compact:nth-child(n+10) { animation-delay: 150ms; }

/* ════════════════════════════════════════════════════════════════
   ▓▓▓  EXTENSIÓN FUTURISTA — toda la app  ▓▓▓
   Toasts, Loader, Mapa, Botones genéricos
   ════════════════════════════════════════════════════════════════ */

/* ── TOASTS FUTURISTAS ── */
.toast {
  background: linear-gradient(135deg,
    var(--txt-1) 0%,
    color-mix(in srgb, var(--txt-1) 92%, var(--ac) 8%) 100%);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  opacity: 0;
  transform: translateY(-12px) scale(0.95);
  transition:
    opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.toast::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%);
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast.show::before {
  animation: toastShimmer 1.2s ease-out;
}
@keyframes toastShimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* ── LOADER BAR FUTURISTA ── */
.loader-bar {
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(190, 22, 35, 0.15) 50%,
    transparent 100%);
}
.loader-bar::after {
  width: 30%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ac) 30%,
    #F87171 50%,
    var(--ac) 70%,
    transparent 100%);
  box-shadow:
    0 0 12px var(--ac),
    0 0 24px rgba(190, 22, 35, 0.4);
  animation: loader-slide-glow 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes loader-slide-glow {
  0%   { left: -30%; opacity: 0.8; }
  50%  { opacity: 1; }
  100% { left: 100%; opacity: 0.8; }
}

/* ── SKELETON FUTURISTA con shimmer doble ── */
.skel {
  background: linear-gradient(90deg,
    var(--surf-2) 0%,
    color-mix(in srgb, var(--surf-3) 80%, var(--ac) 5%) 50%,
    var(--surf-2) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%);
  animation: skel-flash 2s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes skel-flash {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}

/* ── MAPA: marker de ruta activa con glow ── */
.leaflet-marker-icon.ruta-marker-activa {
  filter: drop-shadow(0 0 6px var(--ac));
  animation: rutaMarkerPulse 2s ease-in-out infinite;
}
@keyframes rutaMarkerPulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--ac)); }
  50%      { filter: drop-shadow(0 0 12px var(--ac)) drop-shadow(0 0 4px rgba(190,22,35,0.6)); }
}

/* ── POPUPS DE LEAFLET con estilo moderno ── */
.leaflet-popup-content-wrapper {
  background: var(--bg-elev);
  border-radius: 14px !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px var(--line);
  padding: 0;
}
.leaflet-popup-content {
  margin: 14px 18px !important;
  font-family: var(--font-body);
  color: var(--txt-1);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.leaflet-popup-tip {
  background: var(--bg-elev);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.leaflet-popup-close-button {
  color: var(--txt-2) !important;
  font-size: 22px !important;
  padding: 6px 10px !important;
}

/* ── BOTONES GENÉRICOS con elevación y gradiente sutil ── */
.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac-dark) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(190, 22, 35, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
  transition: all var(--dur-base) var(--spring-snappy);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 50%);
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(190, 22, 35, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 60ms;
}

/* ── ICON BUTTONS del header con micro-interacción ── */
.icon-btn {
  transition: all var(--dur-base) var(--spring-snappy);
  position: relative;
  overflow: hidden;
}
.icon-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center,
    rgba(190, 22, 35, 0.15) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base);
  pointer-events: none;
}
.icon-btn:hover::after {
  opacity: 1;
}
.icon-btn:active {
  transform: scale(0.92);
  transition-duration: 80ms;
}

/* ── EMPTY STATES más vivos ── */
.empty {
  padding: 32px 20px;
  text-align: center;
  animation: fadeUp 0.4s var(--spring-snappy);
}
.empty-icon {
  font-size: 56px !important;
  background: linear-gradient(135deg, var(--ac-tint) 0%, var(--surf-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  display: block;
  font-variation-settings: 'FILL' 0, 'wght' 300 !important;
}
.empty-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  color: var(--txt-1);
  margin-bottom: 6px;
}

/* ── BACKDROPS de los modales con blur futurista ── */
.modal-backdrop {
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}

/* ── ARTICULAR loaders en botones ── */
.btn-primary[data-loading="true"] {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn-primary[data-loading="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── MICRO-ANIMACIONES SETTLE en cargas ── */
@keyframes settleIn {
  0%   { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(2px); }
  60%  { opacity: 0.9; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.list-rutas > *,
.plan-card,
.gps-card,
.quick-chip {
  animation-fill-mode: backwards;
}


/* ════════════════════════════════════════════════════════════
   v6 · REDISEÑO MÓVIL — tab bar fija, paneles a pantalla completa,
   ficha de ruta anclada. Se apoya en los tokens y componentes v5.
   ════════════════════════════════════════════════════════════ */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Mapa siempre de fondo, pantalla completa */
.v6-map-area { position: fixed; inset: 0; z-index: 1; }
.v6-map-area #mapa { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--surf-2); }
.leaflet-control-zoom { display: none; }
.v6 .leaflet-control-attribution {
  margin-bottom: calc(var(--tabbar-h) + var(--sb) + 6px) !important;
  margin-right: 6px !important;
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent) !important;
  color: var(--txt-3) !important;
  border-radius: var(--r-sm);
  font-size: 9px !important;
}

/* ───── Capa superior: buscador + chips ───── */
.v6-top {
  position: fixed; top: calc(var(--st) + 10px); left: 12px; right: 12px;
  z-index: 1010; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.v6-top > * { pointer-events: auto; }
.v6-search-pill {
  display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 8px 0 18px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  transition: transform var(--dur-fast) var(--ease-ios), box-shadow var(--dur-fast);
}
.v6-search-pill:active { transform: scale(0.985); }
.v6-search-ic { font-size: 22px; color: var(--ac); }
.v6-search-txt { flex: 1; text-align: left; font-size: 15.5px; font-weight: 500; color: var(--txt-3); }
.v6-search-logo { width: 38px; height: 38px; border-radius: var(--r-full); object-fit: cover; border: 2px solid var(--ac-tint); }
.v6-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.v6-chips::-webkit-scrollbar { display: none; }
.v6-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  font-size: 12.5px; font-weight: 700; color: var(--txt-1);
  animation: v6ChipIn .4s var(--ease-snap) backwards;
}
.v6-chip:nth-child(2) { animation-delay: 40ms; } .v6-chip:nth-child(3) { animation-delay: 80ms; }
.v6-chip:nth-child(4) { animation-delay: 120ms; } .v6-chip:nth-child(5) { animation-delay: 160ms; }
@keyframes v6ChipIn { from { opacity: 0; transform: translateY(-8px); } }
.v6-chip:active { transform: scale(0.96); }
.v6-chip-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.v6-chip-fav { background: var(--ac-tint); border-color: color-mix(in srgb, var(--ac) 25%, transparent); color: var(--ac); }
.v6-chip-fav .material-symbols-rounded { font-size: 15px; font-variation-settings: 'FILL' 1; }
.v6-chips-frec .quick-chip { flex: none; }

/* ───── Píldora de estado ───── */
.v6-status {
  position: fixed; left: 12px; bottom: calc(var(--tabbar-h) + var(--sb) + 14px);
  z-index: 1005;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bg-elev) 93%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  font-size: 12px; color: var(--txt-2);
  max-width: 62vw; white-space: nowrap; overflow: hidden;
}
.v6-status b { font-weight: 800; color: var(--ok); }
.v6-status .v6-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.v6-status.stat-off b { color: var(--txt-2); }
.v6-status.stat-off .v6-status-dot { background: var(--txt-3); box-shadow: none; animation: none; }
.v6-status.stat-warn b { color: var(--warn); }
.v6-status.stat-warn .v6-status-dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.v6-status-sep { font-weight: 600; }
@keyframes v6Pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 35%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.v6-status .v6-status-dot { animation: v6Pulse 2.4s ease-out infinite; }

/* ───── FABs ───── */
.v6-fabs {
  position: fixed; right: 12px; bottom: calc(var(--tabbar-h) + var(--sb) + 14px);
  z-index: 1005; display: flex; flex-direction: column; gap: 10px;
  transition: bottom var(--dur-base) var(--ease-snap);
}
.v6-fab.activo { color: var(--info); box-shadow: var(--sh-md), 0 0 0 3px color-mix(in srgb, var(--info) 25%, transparent); }
body.has-ficha .v6-fabs { bottom: calc(var(--tabbar-h) + var(--sb) + 14px + var(--v6-ficha-h, 190px)); }
body.has-ficha .v6-status { opacity: 0; pointer-events: none; }
body.has-action .v6-status { opacity: 0; pointer-events: none; }
.v6-status, .v6-fabs { transition: opacity var(--dur-base), bottom var(--dur-base) var(--ease-snap); }

/* ───── Tab bar ───── */
.tb6 {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060;
  display: grid; grid-template-columns: 1fr 1fr 78px 1fr 1fr; align-items: end;
  padding: 6px 6px calc(var(--sb) + 6px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--line);
}
.tb6-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 0 4px; color: var(--txt-3); border-radius: var(--r-md);
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-ios);
  min-height: 48px;
}
.tb6-tab:active { transform: scale(0.94); }
.tb6-tab .material-symbols-rounded { font-size: 23px; transition: font-variation-settings var(--dur-base), transform var(--dur-base) var(--ease-snap); }
.tb6-tab > span:last-child { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tb6-tab.active { color: var(--ac); }
.tb6-tab.active .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 600; transform: translateY(-1px); }
.tb6-cta { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; }
.tb6-cta-circle {
  width: 56px; height: 56px; margin-top: -26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac), var(--ac-dark));
  display: grid; place-items: center;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ac) 40%, transparent), 0 0 0 5px color-mix(in srgb, var(--bg) 92%, transparent);
  transition: transform var(--dur-fast) var(--ease-ios), box-shadow var(--dur-fast);
}
.tb6-cta:active .tb6-cta-circle { transform: scale(0.92); }
.tb6-cta.active .tb6-cta-circle { box-shadow: 0 8px 24px color-mix(in srgb, var(--ac) 55%, transparent), 0 0 0 5px color-mix(in srgb, var(--bg) 92%, transparent); }
.tb6-cta-circle .material-symbols-rounded { font-size: 25px; color: #fff; font-variation-settings: 'FILL' 1; }
.tb6-cta-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-3); }
.tb6-cta.active .tb6-cta-lbl { color: var(--ac); }

/* ───── Paneles a pantalla completa ───── */
.v6-panel {
  position: fixed; top: 0; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--sb) + 12px);
  z-index: 1030;
  background: var(--bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(var(--st) + 16px) 14px 28px;
  animation: v6PanelIn .32s var(--ease-snap);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.v6-panel[hidden] { display: none !important; }
@keyframes v6PanelIn { from { opacity: 0; transform: translateY(14px); } }
.v6-panel-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.v6-panel-head > div { flex: 1; min-width: 0; }
.v6-h1 { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; margin: 0; color: var(--txt-1); }
.v6-sub { font-size: 12px; color: var(--txt-3); margin: 3px 0 0; }
.v6-kicker { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ac); margin: 0 0 3px; }
.v6-badge { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; background: var(--ac-tint); color: var(--ac); border-radius: var(--r-full); padding: 5px 10px; white-space: nowrap; }
.v6-h2 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--txt-1);
  margin: 24px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.v6-h2 .material-symbols-rounded { font-size: 18px; font-variation-settings: 'FILL' 1; }

/* Buscador dentro de panel */
.v6-search-input {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 8px 0 14px;
  border-radius: var(--r-md); background: var(--surf-2);
  border: 1.5px solid transparent;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  margin-bottom: 10px;
}
.v6-search-input:focus-within { border-color: var(--ac); background: var(--bg-elev); }
.v6-search-input .search-ic { font-size: 20px; color: var(--txt-3); }
.v6-search-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--txt-1); min-width: 0; }
.v6-search-input input::placeholder { color: var(--txt-3); }
.v6-search-input .search-clear { display: none; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; color: var(--txt-2); }
.v6-search-input.has-value .search-clear { display: inline-flex; }
.v6-search-input .search-clear .material-symbols-rounded { font-size: 18px; }

/* Toggle de vistas (rejilla/lista/favoritas + ida/vuelta) */
.v6-vt { display: flex; background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 3px; margin-bottom: 14px; }
.v6-vt-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700; color: var(--txt-2);
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.v6-vt-btn .material-symbols-rounded { font-size: 16px; }
.v6-vt-btn.activo { background: var(--bg-elev); color: var(--ac); font-weight: 800; box-shadow: var(--sh-sm); }
.v6-vt-btn.activo .material-symbols-rounded { font-variation-settings: 'FILL' 1; }

/* ───── Ficha de ruta ───── */
.v6-ficha {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(var(--tabbar-h) + var(--sb) + 12px);
  z-index: 1040;
  background: color-mix(in srgb, var(--bg-elev) 97%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  padding: 14px 14px 14px;
  animation: v6FichaUp .38s var(--ease-snap);
}
@keyframes v6FichaUp { from { opacity: 0; transform: translateY(30px); } }
.v6-ficha-head { display: flex; align-items: center; gap: 11px; }
.v6-ficha-pill {
  flex: none; min-width: 46px; height: 46px; padding: 0 6px;
  border-radius: 13px; display: grid; place-items: center;
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--sh-sm);
}
.v6-ficha-tit { flex: 1; min-width: 0; }
.v6-ficha-tit b { display: block; font-size: 13.5px; line-height: 1.25; color: var(--txt-1); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v6-ficha-tit small { display: block; font-size: 11px; color: var(--txt-3); margin-top: 2px; }
.v6-ficha-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--txt-2); transition: transform var(--dur-fast), background var(--dur-fast); }
.v6-ficha-ic:active { transform: scale(0.9); }
.v6-ficha-ic:hover { background: var(--surf-2); }
.v6-ficha-ic .material-symbols-rounded { font-size: 21px; }
.v6-vt-ficha { margin: 11px 0 0; }
.v6-ficha-walk {
  display: flex; align-items: center; gap: 9px;
  background: var(--surf-2); border-radius: var(--r-md);
  padding: 9px 12px; margin-top: 10px;
  font-size: 12px; color: var(--txt-2);
}
.v6-ficha-walk .material-symbols-rounded { font-size: 19px; color: var(--ok); font-variation-settings: 'FILL' 1; }
.v6-ficha-walk b { color: var(--txt-1); }
.v6-ficha-acts { display: flex; gap: 8px; margin-top: 12px; }
.v6-ficha-cta { flex: 1; margin: 0 !important; width: auto !important; height: 48px; }
.v6-ficha-sq { width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--surf-2); border: 1px solid var(--line); }

/* Action bar sobre la tab bar */
.v6-action-bar { bottom: calc(var(--tabbar-h) + var(--sb) + 12px) !important; z-index: 1045 !important; }

/* ───── Planificador (panel Ir) ───── */
.v6-plan-box {
  position: relative;
  display: grid; grid-template-columns: 22px 1fr 40px; gap: 8px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 10px; box-shadow: var(--sh-sm);
}
.v6-plan-rail { display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.v6-rail-dot { width: 11px; height: 11px; border-radius: 50%; }
.v6-rail-a { background: var(--ok); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--ok) 15%, transparent); }
.v6-rail-b { background: var(--ac); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--ac) 15%, transparent); }
.v6-rail-line { flex: 1; width: 2px; margin: 5px 0; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 9px); }
.v6-plan-inputs { display: flex; flex-direction: column; min-width: 0; }
.v6-plan-input { display: block; text-align: left; padding: 8px !important; border-radius: var(--r-md); transition: background var(--dur-fast); min-height: 52px !important; height: auto !important; box-shadow: none !important; border: 0 !important; background: transparent; }
.v6-plan-input:active, .v6-plan-input:hover { background: var(--surf-2); }
.v6-plan-lbl { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-3); }
.v6-plan-input .planner-input-value { display: block; text-align: left !important; font-size: 14.5px; font-weight: 700; color: var(--txt-1); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v6-plan-input .planner-input-value.empty { color: var(--txt-3); font-weight: 500; }
.v6-plan-input.marked .planner-input-value { color: var(--txt-1); }
.v6-plan-div { height: 1px; background: var(--surf-2); margin: 0 8px; }
.v6-swap { align-self: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surf-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--txt-2); transition: transform var(--dur-base) var(--ease-snap); }
.v6-swap:active { transform: rotate(180deg) scale(0.94); }
.v6-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.v6-quick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; text-align: center;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 10.5px; font-weight: 600; color: var(--txt-2); line-height: 1.3;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.v6-quick b { color: var(--txt-1); font-size: 11.5px; }
.v6-quick .material-symbols-rounded { font-size: 22px; color: var(--ac); font-variation-settings: 'FILL' 1; }
.v6-quick:active { transform: scale(0.97); }
.v6-quick.armed { border-color: var(--ac); background: var(--ac-tint); }
.v6-buscar { width: 100%; height: 52px; margin: 12px 0 0 !important; display: flex; align-items: center; justify-content: center; gap: 8px; }
.v6-limpiar { display: block; margin: 10px auto 0; font-size: 12.5px; font-weight: 700; color: var(--txt-3); padding: 8px 14px; border-radius: var(--r-full); }
.v6-limpiar:hover { color: var(--ac); background: var(--surf-2); }
.v6-suggest { position: relative; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); margin: -4px 0 12px; overflow: hidden; max-height: 320px; overflow-y: auto; }
.v6-suggest[hidden] { display: none; }

/* ───── Panel Tuxtla ───── */
.v6-emg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v6-emg {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 8px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #FEE2E2, #FCA5A5);
  border: 1px solid rgba(220, 38, 38, .18);
  text-decoration: none;
  transition: transform var(--dur-fast);
}
.v6-emg:active { transform: scale(0.97); }
.v6-emg b { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; color: #DC2626; }
.v6-emg span { font-size: 10.5px; font-weight: 600; color: #7F1D1D; }
[data-theme="dark"] .v6-emg { background: linear-gradient(135deg, #3B1213, #4C1D1D); border-color: rgba(239, 68, 68, .3); }
[data-theme="dark"] .v6-emg b { color: #FCA5A5; } [data-theme="dark"] .v6-emg span { color: #FECACA; }
.v6-sos { background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 5%, var(--bg-elev)), var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--ac) 16%, transparent); border-radius: var(--r-md); padding: 12px; }
.v6-sos > p, .v6-card-soft > p { font-size: 11.5px; color: var(--txt-2); line-height: 1.5; margin: 0 0 10px; }
.v6-sos-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px; margin-bottom: 6px; text-decoration: none;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.v6-sos-row:last-child { margin-bottom: 0; }
.v6-sos-row:active { transform: scale(0.98); }
.v6-sos-row .material-symbols-rounded { font-size: 19px; color: var(--ac); font-variation-settings: 'FILL' 1; }
.v6-sos-row b { display: block; font-size: 12.5px; color: var(--txt-1); }
.v6-sos-row small { display: block; font-size: 10.5px; color: var(--txt-3); margin-top: 1px; }
.v6-card-soft { background: var(--surf-2); border-radius: var(--r-md); padding: 12px; }
.v6-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: var(--r-md);
  background: #25D366; color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 800;
  transition: transform var(--dur-fast);
}
.v6-wa-btn:active { transform: scale(0.98); }
.v6-wa-btn .material-symbols-rounded { font-size: 17px; }
.v6-tx-list { display: flex; flex-direction: column; gap: 6px; }
.v6-credit {
  display: flex; align-items: center; gap: 11px;
  background: var(--txt-1); border-radius: var(--r-lg);
  padding: 13px; margin-top: 26px; text-decoration: none;
  transition: transform var(--dur-fast);
}
.v6-credit:active { transform: scale(0.985); }
[data-theme="dark"] .v6-credit { background: var(--surf-2); }
.v6-credit img { width: 40px; height: 40px; border-radius: var(--r-md); object-fit: cover; }
.v6-credit b { display: block; font-size: 12.5px; color: var(--bg); }
[data-theme="dark"] .v6-credit b { color: var(--txt-1); }
.v6-credit small { display: block; font-size: 10.5px; color: var(--txt-3); margin-top: 2px; }
.v6-credit > span:first-of-type { flex: 1; min-width: 0; }
.v6-credit > .material-symbols-rounded { color: var(--ac); }

/* ───── Panel Más ───── */
.v6-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 12px; margin-bottom: 6px; text-align: left;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
  min-height: 56px;
}
.v6-row:active { transform: scale(0.985); }
.v6-row-ic { font-size: 21px; color: var(--txt-2); }
.v6-row-txt { flex: 1; min-width: 0; }
.v6-row-txt b { display: block; font-size: 13px; color: var(--txt-1); }
.v6-row-txt small { display: block; font-size: 10.5px; color: var(--txt-3); margin-top: 1px; }
.v6-row-chev { font-size: 19px; color: var(--txt-3); }
.v6-toggle { flex: none; width: 44px; height: 26px; border-radius: var(--r-full); background: var(--surf-3); position: relative; transition: background var(--dur-base); }
.v6-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left var(--dur-base) var(--ease-snap); }
.v6-row[aria-pressed="true"] .v6-toggle, .v6-row.activo .v6-toggle { background: var(--ac); }
.v6-row[aria-pressed="true"] .v6-toggle::after, .v6-row.activo .v6-toggle::after { left: 21px; }
.v6-legal { text-align: center; font-size: 11px; color: var(--txt-3); line-height: 1.6; margin: 22px 0 8px; }
.v6-legal a { color: var(--ac); text-decoration: none; font-weight: 700; }

/* ───── Sheets (estilo de mapa + ciudad) ───── */
.v6-sheet {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(15, 12, 10, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.v6-sheet.show { display: flex; }
.v6-sheet-card {
  width: 100%; max-width: 520px; max-height: 78vh; overflow-y: auto;
  background: var(--bg); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-xl);
  padding: 8px 14px calc(var(--sb) + 18px);
  animation: v6FichaUp .35s var(--ease-snap);
}
.v6-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 12px; }
.v6-sheet-head b { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--txt-1); }
.v6-sheet-close { width: 36px; height: 36px; border-radius: 50%; background: var(--surf-2); display: grid; place-items: center; color: var(--txt-2); }
.v6-sheet-close .material-symbols-rounded { font-size: 19px; }
.v6-city-list { display: flex; flex-direction: column; gap: 6px; }
.v6-city { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--bg-elev); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 13px 12px; text-align: left; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.v6-city:active { transform: scale(0.985); }
.v6-city > .material-symbols-rounded { font-size: 21px; color: var(--txt-2); }
.v6-city.activa { border-color: var(--ac); }
.v6-city.activa .v6-city-check { color: var(--ac); font-variation-settings: 'FILL' 1; }
.v6-city .v6-city-check { color: transparent; }
.v6-city.pending { opacity: .55; }

/* ───── Bienvenida compacta ───── */
.v6-welcome .modal-logo { box-shadow: 0 6px 16px color-mix(in srgb, var(--ac) 25%, transparent); }
.v6-wm-pts { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.v6-wm-pt { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--txt-1); line-height: 1.35; }
.v6-wm-pt .material-symbols-rounded { flex: none; width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 19px; font-variation-settings: 'FILL' 1; }
.v6-wm-meta { text-align: center; font-size: 11px; color: var(--txt-3); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
#welcomeModal { z-index: 1300; }
#welcomeModal .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; }

/* Overlays legacy por encima de todo lo v6 */
.nav-overlay { z-index: 1500 !important; }
.toast-host { z-index: 1600 !important; }
.loader-bar { z-index: 1700 !important; }
#actionBar:not(.show) { display: none !important; }

/* GPS card dentro del panel rutas */
.v6-gps-card { margin-bottom: 12px; }

/* ───── Desktop ≥900px: columna izquierda ───── */
@media (min-width: 900px) {
  .v6-panel { left: 0; right: auto; width: 430px; bottom: 0; border-right: 1px solid var(--line); box-shadow: var(--sh-lg); padding-bottom: calc(var(--tabbar-h) + 28px); }
  .tb6 { left: 0; right: auto; width: 430px; border-right: 1px solid var(--line); }
  .v6-top { left: 16px; right: auto; width: 400px; }
  body[data-v6tab]:not([data-v6tab="mapa"]) .v6-top { left: 446px; }
  .v6-status { left: 446px; }
  body[data-v6tab="mapa"] .v6-status { left: 16px; }
  .v6-ficha { left: auto; right: 16px; width: 420px; }
  .v6-action-bar { left: auto !important; right: 16px !important; width: 420px; }
  .v6-sheet { align-items: center; }
  .v6-sheet-card { border-radius: var(--r-xl); }
  .leaflet-control-zoom { display: block; margin-top: calc(var(--st) + 76px) !important; }
}

/* Reduced motion */
.a11y-reduced-motion .v6-panel, .a11y-reduced-motion .v6-ficha,
.a11y-reduced-motion .v6-chip, .a11y-reduced-motion .v6-sheet-card { animation: none !important; }
.a11y-reduced-motion .v6-status .v6-status-dot { animation: none !important; }

/* ═══ v6.2 · Loader de búsqueda narrado ═══ */
.rtq-loader { padding: 26px 16px 22px; text-align: center; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); animation: fadeUp .4s var(--ease-snap); }
.rtq-map { position: relative; height: 46px; max-width: 260px; margin: 0 auto 14px; }
.rtq-line { position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; border-radius: 3px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 10px, transparent 10px 18px); }
.rtq-stop { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--surf-3); }
.rtq-s1 { left: 12%; animation: rtqStop 2.4s infinite 0s; }
.rtq-s2 { left: 50%; animation: rtqStop 2.4s infinite .8s; }
.rtq-s3 { left: 88%; animation: rtqStop 2.4s infinite 1.6s; }
@keyframes rtqStop { 0%, 100% { background: var(--surf-3); box-shadow: none; } 18% { background: var(--ac); box-shadow: 0 0 0 6px var(--ac-tint); } 40% { background: var(--surf-3); } }
.rtq-bus { position: absolute; top: 50%; left: 0; font-size: 26px !important; color: var(--ac); font-variation-settings: 'FILL' 1;
  transform: translate(-50%, -58%); animation: rtqBus 2.4s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--ac) 35%, transparent)); }
@keyframes rtqBus { 0% { left: 8%; } 45% { left: 52%; } 55% { left: 52%; } 100% { left: 92%; } }
.rtq-msgs { position: relative; height: 20px; overflow: hidden; }
.rtq-msgs span { position: absolute; inset: 0; opacity: 0; font-size: 13px; font-weight: 700; color: var(--txt-1); animation: rtqMsg 8.8s infinite; }
.rtq-msgs span:nth-child(1) { animation-delay: 0s; } .rtq-msgs span:nth-child(2) { animation-delay: 2.2s; }
.rtq-msgs span:nth-child(3) { animation-delay: 4.4s; } .rtq-msgs span:nth-child(4) { animation-delay: 6.6s; }
@keyframes rtqMsg { 0% { opacity: 0; transform: translateY(10px); } 4%, 21% { opacity: 1; transform: translateY(0); } 26%, 100% { opacity: 0; transform: translateY(-10px); } }
.rtq-sub { font-size: 11px; color: var(--txt-3); margin-top: 7px; }
.rtq-retry { display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; margin: 14px auto 0 !important; padding: 0 18px; height: 42px; }
.rtq-gps-sug { border-bottom: 1px solid var(--line); }
.rtq-gps-btns { display: flex; gap: 6px; }
.rtq-gps-btns button { font-size: 11px; font-weight: 800; padding: 7px 11px; border-radius: var(--r-full); background: var(--ac-tint); color: var(--ac); transition: transform var(--dur-fast); }
.rtq-gps-btns button:active { transform: scale(.94); }
.a11y-reduced-motion .rtq-bus, .a11y-reduced-motion .rtq-stop, .a11y-reduced-motion .rtq-msgs span { animation-duration: 20s !important; }

/* ═══ v6.3 · Encuesta de unidad ═══ */
.enc-ruta { display: flex; align-items: center; gap: 11px; background: var(--surf-2); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 6px; }
.enc-ruta b { display: block; font-size: 13.5px; color: var(--txt-1); }
.enc-ruta small { display: block; font-size: 10.5px; color: var(--txt-3); margin-top: 1px; }
.enc-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-2); margin: 14px 2px 7px; }
.enc-lbl small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--txt-3); }
.enc-stars { display: flex; gap: 4px; }
.enc-stars button { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--surf-2); display: grid; place-items: center; color: var(--line-strong); transition: transform var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
.enc-stars button:active { transform: scale(0.9); }
.enc-stars button .material-symbols-rounded { font-size: 24px; }
.enc-stars button.on { color: #F59E0B; background: #FEF3C7; }
.enc-stars button.on .material-symbols-rounded { font-variation-settings: 'FILL' 1; }
[data-theme="dark"] .enc-stars button.on { background: #451A03; }
.enc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.enc-chips button { min-height: 40px; padding: 0 15px; border-radius: var(--r-full); background: var(--surf-2); border: 1.5px solid transparent; font-size: 12.5px; font-weight: 700; color: var(--txt-2); transition: all var(--dur-fast); }
.enc-chips button.on { background: var(--ac-tint); border-color: var(--ac); color: var(--ac); }
.enc-chips button:active { transform: scale(0.96); }
.enc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.enc-input { width: 100%; box-sizing: border-box; height: 46px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--bg-elev); padding: 0 13px; font: inherit; font-size: 14px; color: var(--txt-1); outline: 0; }
.enc-input:focus { border-color: var(--ac); }
.enc-enviar { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; height: 50px; margin: 18px 0 0 !important; }
.enc-nota { text-align: center; font-size: 10.5px; color: var(--txt-3); margin-top: 10px; }

/* ═══ v6.3 · Modo ligero (gama media/baja): sin blur, sombras planas, menos animación ═══ */
.perf-lite .v6-search-pill, .perf-lite .v6-chip, .perf-lite .v6-status,
.perf-lite .tb6, .perf-lite .v6-ficha, .perf-lite .fab {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: var(--bg-elev) !important;
}
.perf-lite .tb6 { background: var(--bg) !important; }
.perf-lite .v6-panel, .perf-lite .v6-ficha, .perf-lite .v6-chip, .perf-lite .v6-sheet-card { animation: none !important; }
.perf-lite .v6-search-pill, .perf-lite .v6-ficha { box-shadow: var(--sh-md) !important; }
.perf-lite .toast { backdrop-filter: none !important; }
.perf-lite .rtq-bus, .perf-lite .rtq-stop { animation-duration: 3.5s !important; }
.perf-lite .v6-status .v6-status-dot { animation: none !important; }

/* ═══ v6.4 · Comunidad ═══ */
.v6-demo-band { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #EEF2FF, #E0E7FF); border: 1px solid #C7D2FE; color: #3730A3; border-radius: var(--r-md); padding: 9px 12px; font-size: 11.5px; font-weight: 700; margin-bottom: 12px; }
.v6-demo-band .material-symbols-rounded { font-size: 17px; }
[data-theme="dark"] .v6-demo-band { background: #1E1B4B; border-color: #312E81; color: #C7D2FE; }
.com-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; margin-bottom: 4px; animation: fadeUp .35s var(--ease-snap); }
.com-card-head { display: flex; align-items: center; gap: 11px; }
.com-card-tit { flex: 1; min-width: 0; }
.com-card-tit > b { display: block; font-size: 13.5px; color: var(--txt-1); line-height: 1.25; }
.com-rating { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; }
.com-rating small { color: var(--txt-3); font-size: 11px; }
.com-stars { display: inline-flex; }
.com-stars .material-symbols-rounded { font-size: 15px; color: var(--line-strong); }
.com-stars .material-symbols-rounded.on { color: #F59E0B; font-variation-settings: 'FILL' 1; }
.com-bars { display: flex; flex-direction: column; gap: 8px; margin: 13px 0; }
.com-bar { display: grid; grid-template-columns: 118px 1fr 36px; align-items: center; gap: 9px; font-size: 11px; color: var(--txt-2); }
.com-bar b { text-align: right; color: var(--txt-1); }
.com-track { height: 6px; border-radius: 3px; background: var(--surf-2); overflow: hidden; }
.com-track i { display: block; height: 100%; border-radius: 3px; background: var(--info); }
.com-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.com-foto { aspect-ratio: 4/3; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--txt-3); background: var(--surf-2); }
.com-foto .material-symbols-rounded { font-size: 20px; }
.com-foto small { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.com-op { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--surf-2); }
.com-op > div { flex: 1; min-width: 0; }
.com-op b { font-size: 12px; color: var(--txt-1); }
.com-op p { margin: 2px 0 0; font-size: 12px; color: var(--txt-2); line-height: 1.45; }
.com-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ac); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.com-nota .v6-row-txt b { font-weight: 600; font-style: italic; }
.com-cta { display: flex; align-items: center; gap: 12px; background: var(--ac-tint); border: 1px solid color-mix(in srgb, var(--ac) 22%, transparent); border-radius: var(--r-lg); padding: 14px; margin-top: 22px; }
.com-cta > div { flex: 1; }
.com-cta b { display: block; font-size: 13px; color: var(--txt-1); }
.com-cta small { display: block; font-size: 11px; color: var(--txt-2); margin-top: 2px; }
.com-cta-btn { display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; margin: 0 !important; padding: 0 16px; height: 44px; white-space: nowrap; }
.g-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border-radius: var(--r-md); background: #fff; border: 1.5px solid #DADCE0; font-size: 14.5px; font-weight: 700; color: #3C4043; transition: box-shadow var(--dur-fast), transform var(--dur-fast); }
.g-btn:active { transform: scale(0.98); }
[data-theme="dark"] .g-btn { background: #131314; border-color: #3D3835; color: #E3E3E3; }
.nota-pin { width: 32px; height: 32px; border-radius: 50% 50% 50% 4px; background: var(--bg-elev, #fff); border: 2.5px solid var(--ac); display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.25); transform: rotate(-8deg); }
.nota-pin .material-symbols-rounded { font-size: 16px; color: var(--txt-1, #1A1614); transform: rotate(8deg); }
.v6-glow { width: 30px; height: 30px; border-radius: 50%; background: #FEF3C7; border: 2px solid #F59E0B; display: grid; place-items: center; color: #92400E; }
.v6-glow .material-symbols-rounded { font-size: 16px; }
.v6-glow.on { animation: glowPulse 1.8s ease-out infinite; }
@keyframes glowPulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 100% { box-shadow: 0 0 0 14px rgba(245,158,11,0); } }
.perf-lite .v6-glow.on { animation: none; }

/* ═══ v6.5 · Pulido final: guía vistosa (imperdibles, terminales, eventos, emergencias) ═══ */
.v6-tx-list { gap: 8px; }
.tx-place, .tx-terminal {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px; text-align: left; box-shadow: var(--sh-sm); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-ios), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.tx-place:hover, .tx-terminal:hover { border-color: var(--line-strong); box-shadow: var(--sh-md); }
.tx-place:active, .tx-terminal:active { transform: scale(0.98); }
.tx-place-icon, .tx-terminal-icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(180,83,9,.18);
}
.tx-terminal-icon { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color: #1E40AF; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(29,78,216,.18); }
.tx-place-icon .material-symbols-rounded, .tx-terminal-icon .material-symbols-rounded { font-size: 23px; font-variation-settings: 'FILL' 1; }
[data-theme="dark"] .tx-place-icon { background: linear-gradient(135deg, #451A03, #78350F); color: #FDE68A; box-shadow: none; }
[data-theme="dark"] .tx-terminal-icon { background: linear-gradient(135deg, #172554, #1E3A8A); color: #BFDBFE; box-shadow: none; }
.tx-place-info, .tx-terminal-info { flex: 1; min-width: 0; }
.tx-place-name, .tx-terminal-name { font-size: 13px; font-weight: 800; color: var(--txt-1); }
.tx-place-sub, .tx-terminal-sub { font-size: 11px; color: var(--txt-3); margin-top: 2px; }
.tx-place-arrow { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surf-2); display: grid; place-items: center; color: var(--txt-2); font-size: 16px !important; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.tx-place:hover .tx-place-arrow, .tx-terminal:hover .tx-place-arrow { background: var(--ac-tint); color: var(--ac); transform: translateX(2px); }

.tx-event { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 11px 12px; text-decoration: none; box-shadow: var(--sh-sm); transition: transform var(--dur-fast) var(--ease-ios), box-shadow var(--dur-fast), border-color var(--dur-fast); }
.tx-event:hover { border-color: var(--line-strong); box-shadow: var(--sh-md); }
.tx-event:active { transform: scale(0.98); }
.tx-event-date { flex: none; width: 52px; border-radius: 14px; background: linear-gradient(160deg, var(--ac), var(--ac-dark)); color: #fff; text-align: center; padding: 9px 0 8px; box-shadow: 0 4px 10px color-mix(in srgb, var(--ac) 30%, transparent); }
.tx-event-day { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1; }
.tx-event-month { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .92; margin-top: 3px; }
.tx-event-info { flex: 1; min-width: 0; }
.tx-event-title { font-size: 12.5px; font-weight: 700; color: var(--txt-1); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tx-event-meta { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--txt-3); margin-top: 4px; }
.tx-event-meta .material-symbols-rounded { font-size: 13px; }
.tx-event-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.tx-event-arrow { color: var(--txt-3); font-size: 17px !important; }
.tx-events-fallback, .tx-events-empty { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); padding: 14px; text-decoration: none; color: var(--txt-2); font-size: 12px; }
.tx-events-fallback .material-symbols-rounded:first-child, .tx-events-empty .material-symbols-rounded { font-size: 26px; color: var(--ac); }
.tx-events-fallback-t { font-weight: 800; color: var(--txt-1); font-size: 12.5px; }
.tx-events-fallback-s { font-size: 11px; color: var(--txt-3); margin-top: 2px; }

.v6-emg { position: relative; overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--dur-fast) var(--ease-ios), box-shadow var(--dur-fast); }
.v6-emg:hover { box-shadow: var(--sh-md); }
.v6-emg b { font-size: 18px; }
.v6-emg::after { content: 'call'; font-family: 'Material Symbols Rounded'; position: absolute; right: -5px; bottom: -9px; font-size: 46px; color: rgba(220, 38, 38, .13); pointer-events: none; }
[data-theme="dark"] .v6-emg::after { color: rgba(252, 165, 165, .12); }

/* Calidad transversal */
.v6 button:focus-visible, .v6 a:focus-visible { outline: 2.5px solid var(--ac); outline-offset: 2px; }
.v6 input:focus-visible { outline: none; }
.leaflet-popup-content-wrapper { border-radius: 14px !important; box-shadow: var(--sh-lg) !important; font-family: var(--font-ui) !important; border: 1px solid var(--line); }
.leaflet-popup-content { margin: 12px 14px !important; line-height: 1.45 !important; }
.leaflet-popup-tip { box-shadow: var(--sh-sm) !important; }
.v6-row, .v6-city { box-shadow: var(--sh-sm); }
.v6-row:hover, .v6-city:hover { border-color: var(--line-strong); box-shadow: var(--sh-md); }
.v6-h2 { margin-top: 26px; }
.perf-lite .tx-place, .perf-lite .tx-terminal, .perf-lite .tx-event { box-shadow: none; }