/* =====================================================================
   ANDÉN MOBILITY — Premium SaaS Layer (v1 · base components)
   Extiende tokens.css + components.css con componentes premium reutilizables
   en los 3 portales (passenger, driver, admin):
     · Eyebrow + section headers consistentes
     · Hero stat cards con gradiente, sparkline y trend chip
     · Balance hero card (wallet) tipo neobank
     · Premium trip card con línea visual pickup→drop
     · Settings list iOS-style
     · Filter chip row segmentado
     · Insight chip / trend pill
     · Mini-sparkline SVG inline
     · Skeleton variants (.sk-stat/.sk-tx/.sk-trip — base set)
   Diseño: dark-first, OLED-friendly, tokens compatibles light/dark.

   ---------------------------------------------------------------------
   RELACIÓN CON premium-v2.css (auditado may-2026)
   ---------------------------------------------------------------------
   premium-v2.css NO sustituye a este archivo, es una capa **aditiva** del
   sprint v1.7.0+ que aporta componentes nuevos:
     · Skeletons extendidos (.sk-text/.sk-circle/.skeleton-kpis/.skeleton-table)
     · Empty states ilustrados (.empty-state-v2)
     · Loading bar global (.anden-loadbar)
     · Notification center, premium tables, mobile drawer, toast v2,
       trip replay, driver score, support chat FAB.

   Solape conocido en cascada (v2 gana, intencional):
     .skeleton · .sk-row · .sk-card  → premium-v2.css los redefine con
     shimmer mejorado.  Las clases .sk-stat/.sk-tx/.sk-trip siguen aquí
     porque son específicas a wallet/trip/stat cards de v1.

   Conclusión: cargar ambos en este orden:
       <link href="premium.css">      (1849 líneas · base)
       <link href="premium-v2.css">   (1036 líneas · aditiva v1.7.0+)
   ===================================================================== */


/* =========================================================
   SECTION HEADERS · eyebrow + title + meta
   ========================================================= */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
}
.section-header:first-child { margin-top: 0; }
.section-title-wrap { min-width: 0; }
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand-400);
  margin-bottom: var(--sp-2);
  padding: 4px 10px 4px 8px;
  background: color-mix(in srgb, var(--brand-500) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-500) 22%, transparent);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
:root[data-theme="light"] .section-eyebrow {
  color: var(--brand-700);
  background: color-mix(in srgb, var(--brand-500) 8%, transparent);
}
.section-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-500);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-500) 25%, transparent),
    0 0 12px color-mix(in srgb, var(--brand-500) 70%, transparent);
  animation: anden-eyebrow-pulse 2.4s ease-in-out infinite;
}
@keyframes anden-eyebrow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--brand-500) 25%, transparent),
      0 0 12px color-mix(in srgb, var(--brand-500) 70%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--brand-500) 12%, transparent),
      0 0 18px color-mix(in srgb, var(--brand-500) 90%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-eyebrow .dot { animation: none; }
}
/* Variante "muted" para eyebrows dentro de section-headers (no la del page-head):
   sin badge background, sólo texto + dot pequeño. Aplicado donde se usa dentro
   de un `.section-title-wrap`. */
.section-title-wrap > .section-eyebrow {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-3);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  backdrop-filter: none;
}
.section-title-wrap > .section-eyebrow .dot {
  width: 6px; height: 6px;
  box-shadow: none;
  animation: none;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-0);
  margin: 0;
}
.section-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.4;
}
.section-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-500);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.section-link:hover { color: var(--brand-400); transform: translateX(2px); }


/* =========================================================
   PAGE HEAD · cinematic mobile-first hero (PWA topbar v2)
   Usado por passenger.js y driver.js como cabecera de sección.
   Estructura esperada:
     <header class="page-head">
       <div class="section-eyebrow"><span class="dot"></span> Mi cuenta</div>
       <h1 class="greeting">Perfil <span class="accent">…</span></h1>
       <p class="greeting-sub">…</p>
       <!-- opcional: .stat-grid o .page-head-row con KPIs/acciones -->
     </header>
   ========================================================= */
.page-head {
  position: relative;
  padding:
    calc(var(--safe-top) + var(--sp-6))
    var(--sp-5)
    calc(var(--sp-5) + 4px);
  background:
    /* mesh — esquina TL: brand emerald glow */
    radial-gradient(78% 60% at 0% 0%, rgba(16,185,129,0.18) 0%, transparent 55%),
    /* mesh — esquina BR: violet sapphire glow */
    radial-gradient(70% 60% at 100% 100%, rgba(139,92,246,0.14) 0%, transparent 60%),
    /* mesh — mid cyan accent */
    radial-gradient(60% 50% at 85% 15%, rgba(6,182,212,0.10) 0%, transparent 60%),
    var(--bg-0);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
/* Layer 1: micro grid + noise texture, fade vertical */
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="light"] .page-head::before {
  background-image:
    linear-gradient(rgba(15,23,42,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.035) 1px, transparent 1px);
  opacity: 0.55;
}
/* Layer 2: glow orb floating top-right (drift suave) */
.page-head::after {
  content: '';
  position: absolute;
  top: -90px; right: -70px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(16,185,129,0.25) 0%, rgba(16,185,129,0.05) 45%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: anden-orb-drift 14s ease-in-out infinite;
}
:root[data-theme="light"] .page-head::after {
  background: radial-gradient(circle, rgba(16,185,129,0.30) 0%, rgba(16,185,129,0.08) 45%, transparent 70%);
}
@keyframes anden-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-18px, 12px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .page-head::after { animation: none; }
}
/* Layer 3: contenido por encima de las decoraciones */
.page-head > * { position: relative; z-index: 1; }

.page-head .section-eyebrow {
  /* En el hero queremos un eyebrow más prominente que en cards */
  font-size: 0.6875rem;
  margin-bottom: var(--sp-3);
}
.page-head .greeting {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.45rem + 2.4vw, var(--fs-4xl));
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.02;
  color: var(--text-0);
  margin: 0;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--bg-0) 35%, transparent);
}
.page-head .greeting .accent {
  background: linear-gradient(135deg, var(--brand-400) 0%, var(--accent-cyan) 60%, var(--accent-violet) 130%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* fallback navegadores sin background-clip:text */
  color: var(--brand-500);
}
.page-head .greeting-sub {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin: var(--sp-2) 0 0;
  max-width: 640px;
  line-height: 1.5;
}
/* Borde inferior premium: línea gradient brand sutil (sustituye border-bottom) */
.page-head {
  border-bottom-color: transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--brand-500) 15%, transparent),
    0 1px 0 0 var(--border);
}
.page-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
/* KPIs/stats embebidos en el page-head: usar fondo translúcido glass */
.page-head .stat-grid {
  margin-top: var(--sp-4);
}
.page-head .stat-grid > * {
  background: color-mix(in srgb, var(--bg-1) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--sp-3) var(--sp-3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Override fino: en desktop ampliar el padding y permitir más respiración */
@media (min-width: 768px) {
  .page-head {
    padding:
      calc(var(--safe-top) + var(--sp-7))
      var(--sp-6)
      calc(var(--sp-6) + 4px);
  }
  .page-head::after {
    top: -120px; right: -100px;
    width: 340px; height: 340px;
    filter: blur(36px);
  }
}


/* =========================================================
   HERO STAT (big number card with optional spark + trend)
   ========================================================= */
.hero-stat {
  position: relative;
  background:
    radial-gradient(80% 100% at 100% 0%, var(--bg-brand-soft) 0%, transparent 70%),
    var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-6);
  padding: var(--sp-5);
  overflow: hidden;
  isolation: isolate;
}
.hero-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-glass);
  pointer-events: none;
  z-index: 0;
}
.hero-stat > * { position: relative; z-index: 1; }
.hero-stat .hero-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-stat .hero-value {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-0);
  margin-top: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.hero-stat .hero-value .currency {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--text-2);
  margin-right: 6px;
  vertical-align: 0.18em;
}
.hero-stat .hero-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}


/* =========================================================
   TREND CHIP — small up/down indicator
   ========================================================= */
.trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.trend-chip.up { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.trend-chip.down { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.trend-chip.neutral { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.trend-chip i { font-size: 0.85em; }


/* =========================================================
   STAT GRID (2 / 3 / 4 columns, mobile-first)
   ========================================================= */
.stat-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr 1fr;
}
.stat-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.stat-grid.cols-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) {
  .stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-card .stat-icon {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 32px; height: 32px;
  border-radius: var(--r-3);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 1rem;
}
.stat-card .stat-icon.brand { background: var(--bg-brand-soft); color: var(--brand-500); }
.stat-card .stat-icon.warn  { background: var(--warning-bg); color: var(--warning); }
.stat-card .stat-icon.info  { background: var(--info-bg); color: var(--info); }
.stat-card .stat-icon.success { background: var(--success-bg); color: var(--success); }
.stat-card .stat-icon.danger { background: var(--danger-bg); color: var(--danger); }
.stat-card .stat-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-0);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.stat-card .stat-meta {
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}


/* =========================================================
   BALANCE HERO (wallet · neobank vibe)
   ========================================================= */
.balance-hero {
  position: relative;
  border-radius: var(--r-6);
  padding: var(--sp-6) var(--sp-5);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(16,185,129,0.30) 0%, transparent 60%),
    radial-gradient(120% 90% at 0% 100%, rgba(139,92,246,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #0d1018 0%, #131826 100%);
  color: #fff;
  border: 1px solid var(--brand-700);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
  isolation: isolate;
}
:root[data-theme="light"] .balance-hero {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(16,185,129,0.18) 0%, transparent 60%),
    radial-gradient(120% 90% at 0% 100%, rgba(139,92,246,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f3f5f9 100%);
  color: var(--text-0);
}
.balance-hero::after {
  /* subtle noise + grid */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.balance-hero > * { position: relative; z-index: 1; }
.balance-hero .b-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand-300);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
:root[data-theme="light"] .balance-hero .b-label { color: var(--brand-700); }
.balance-hero .b-value {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-2);
}
.balance-hero .b-value .currency {
  font-size: 0.42em;
  font-weight: 700;
  color: var(--text-2);
  margin-right: 8px;
  vertical-align: 0.32em;
}
.balance-hero .b-meta {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.balance-hero .b-meta strong {
  color: var(--text-0);
  font-weight: 600;
  display: block;
  font-variant-numeric: tabular-nums;
}
.balance-hero .b-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.balance-hero .b-actions .btn {
  backdrop-filter: blur(10px);
}


/* =========================================================
   PREMIUM TRIP CARD (passenger + driver history) — v2 polish
   - Gradient surface (subtle elevation on dark bg)
   - Route timeline más rico (anillos + línea dashed gruesa)
   - Tipografía jerarquizada: from/to con tamaño distinto
   - Hover con leve glow brand + lift sutil
   ========================================================= */
.trip-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--bg-2) 60%, transparent) 0%,
      var(--bg-1) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-6);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.trip-card::before {
  /* Highlight superior sutil — refuerza la sensación premium */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    color-mix(in srgb, var(--brand-500) 30%, transparent) 50%,
    transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.trip-card:hover {
  border-color: color-mix(in srgb, var(--brand-500) 55%, var(--border));
  transform: translateY(-1px);
  box-shadow:
    0 8px 24px -8px color-mix(in srgb, var(--brand-500) 25%, transparent),
    0 4px 12px rgba(0,0,0,0.20);
}
.trip-card:hover::before { opacity: 1; }
.trip-card:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent);
}

/* ----- Route timeline (pickup → dropoff visual) ----- */
.trip-card .trip-route {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
  flex-shrink: 0;
}
.trip-card .route-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--success);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--success) 60%, transparent) inset;
}
.trip-card .route-line {
  flex: 1;
  width: 2px;
  min-height: 26px;
  background: repeating-linear-gradient(
    to bottom,
    var(--border-strong) 0 5px,
    transparent 5px 9px
  );
  margin: 5px 0;
  opacity: 0.7;
}
.trip-card .route-square {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--danger);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--danger) 60%, transparent) inset;
}

/* ----- Body: addresses + metadata ----- */
.trip-card .trip-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Spacing entre from/to igual al de los dots para alineación perfecta */
  justify-content: space-between;
  gap: var(--sp-2);
  /* dejar hueco a la derecha para el status pill */
  padding-right: 88px;
}
.trip-card .trip-from,
.trip-card .trip-to {
  font-size: var(--fs-sm);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 18px;
  display: flex;
  align-items: center;
}
.trip-card .trip-from {
  font-weight: 600;
  color: var(--text-2);   /* origin más tenue, ya viniste de ahí */
}
.trip-card .trip-to {
  font-weight: 700;
  color: var(--text-0);   /* destino prominente */
  letter-spacing: -0.005em;
}
.trip-card .trip-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-3);
  /* la meta-row queda dentro del padding-right del body para no chocar
     con la status pill (top-right).  El fare queda alineado al final
     del bloque de body, justo bajo la pill. */
}
.trip-card .trip-fare {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}
/* "+" en ganancias del driver: separado del importe para no chocar con
   el espacio no-rompible que Intl.NumberFormat pone entre "$" y el número
   ("+ $ 9.750").  Estilo levemente menor y más opaco que el número. */
.trip-card .trip-fare-sign {
  font-weight: 800;
  font-size: 0.85em;
  margin-right: 1px;
  opacity: 0.85;
}
/* Tag "est." — pill discreta para indicar que el importe es estimado
   en viajes activos (accepted/arrived/in_progress).  No grita pero
   queda claro que aún no se cobró. */
.trip-card .trip-fare-tag {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  background: color-mix(in srgb, var(--text-3) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-3) 22%, transparent);
  border-radius: var(--r-pill);
  padding: 2px 5px;
  margin-left: 4px;
  transform: translateY(-1px);
}
.trip-card .trip-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.trip-card .trip-time .bi {
  font-size: 11px;
  opacity: 0.8;
}
.trip-card .trip-status {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
}


/* =========================================================
   FILTER CHIPS — v2 polish (segmented row, sticky after page-head)
   - Background con backdrop-blur para sticky elegante
   - Active state con gradient brand + glow sutil
   - Hover state con border más sutil
   - Count badge tipográfica refinada
   ========================================================= */
.filter-row {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--bg-0) 88%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  position: sticky;
  top: 0;
  z-index: 5;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.filter-row::-webkit-scrollbar { display: none; }

.filter-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast, 140ms) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  position: relative;
}
.filter-chip:hover:not(.active) {
  color: var(--text-1);
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--bg-2) 40%, transparent);
}
.filter-chip:active { transform: scale(0.97); }
.filter-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent);
}

/* Active state — gradient + halo brand */
.filter-chip.active {
  background: var(--gradient-brand);
  color: #051b13;
  border-color: transparent;
  box-shadow:
    0 4px 14px -4px color-mix(in srgb, var(--brand-500) 50%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-500) 35%, transparent);
}
.filter-chip.active:hover {
  /* hover sutil sobre el activo — no cambia el color, solo amplifica el glow */
  box-shadow:
    0 6px 18px -4px color-mix(in srgb, var(--brand-500) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-500) 45%, transparent);
}
.filter-chip .bi { font-size: 12px; opacity: 0.85; }

/* Count badge */
.filter-chip .count {
  background: color-mix(in srgb, var(--text-3) 18%, transparent);
  color: var(--text-1);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.2;
  min-width: 18px;
  text-align: center;
}
.filter-chip.active .count {
  background: rgba(0,0,0,0.20);
  color: rgba(5,27,19,0.85);
}


/* =========================================================
   SETTINGS LIST (iOS / Linear style)
   ========================================================= */
.settings-list {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  transition: background var(--dur-base) var(--ease-out);
  color: inherit;
}
.settings-row:hover { background: var(--bg-2); }
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-row .s-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-3);
  background: var(--bg-2);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.settings-row.brand .s-icon { background: var(--bg-brand-soft); color: var(--brand-500); }
.settings-row.warn  .s-icon { background: var(--warning-bg);    color: var(--warning); }
.settings-row.info  .s-icon { background: var(--info-bg);       color: var(--info); }
.settings-row.danger .s-icon{ background: var(--danger-bg);     color: var(--danger); }
.settings-row .s-body {
  flex: 1; min-width: 0;
  line-height: 1.3;
}
.settings-row .s-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-1);
}
.settings-row .s-sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 1px;
}
.settings-row .s-end {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-3);
  flex-shrink: 0;
}
.settings-row .s-end .s-value {
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: 500;
}

/* =========================================================
   SETTINGS ROW · vertical (v62)
   Cuando una row contiene controles que no caben en horizontal
   (ej: grid de 4 perfiles de sonido), se apila título arriba +
   contenido extra abajo.  No tiene hover de fondo entero.
   ========================================================= */
.settings-row.settings-row-vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: default;
}
.settings-row.settings-row-vertical:hover { background: transparent; }

/* =========================================================
   NAV APPS · external navigation picker (v1.24.4)
   --------------------------------------------------------
   Sheet picker que aparece al pulsar "Navegar" en un viaje
   activo o zona caliente.  Muestra Google Maps · Waze · Apple
   Maps · Moovit · OSM en una lista vertical de tarjetas.
   ========================================================= */
.nav-app-target {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-2);
  border-radius: var(--r-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.35;
}
.nav-app-target i { color: var(--brand-500); flex-shrink: 0; }

.nav-app-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.nav-app-pick {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border-radius: var(--r-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.nav-app-pick:hover {
  background: var(--bg-1);
  border-color: var(--border-strong);
}
.nav-app-pick:active { transform: scale(0.985); }
.nav-app-pick-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-3);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.nav-app-pick-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-app-pick-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-0);
}
.nav-app-pick-hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.3;
}
.nav-app-remember {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-2);
  user-select: none;
}
.nav-app-remember input[type="checkbox"] { transform: scale(1.15); }

/* =========================================================
   NOTIFY PROFILE PICKER (v62)
   4 radio-cards (Silencio / Suave / Acorde / Campanita) con
   ícono play interno para preview sin cambiar la selección.
   Layout 2x2 mobile · 4x1 desktop ≥768px.
   ========================================================= */
.notify-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  width: 100%;
}
@media (min-width: 768px) {
  .notify-profile-grid { grid-template-columns: repeat(4, 1fr); }
}
.notify-profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--sp-3);
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-4);
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s var(--ease-out),
    background  0.18s var(--ease-out),
    transform   0.18s var(--ease-out);
}
.notify-profile-card:hover {
  border-color: color-mix(in srgb, var(--brand-500) 30%, var(--border));
  background: color-mix(in srgb, var(--brand-500) 4%, var(--bg-2));
}
.notify-profile-card:active {
  transform: scale(0.98);
}
.notify-profile-card.is-active {
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 12%, var(--bg-1));
  box-shadow:
    0 0 0 1px var(--brand-500) inset,
    0 4px 12px -4px color-mix(in srgb, var(--brand-500) 35%, transparent);
}
.notify-profile-card.is-active::after {
  /* Marca de selección · check pequeño esquina superior-derecha */
  content: '\F26B';                /* bi-check2 */
  font-family: 'bootstrap-icons';
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-500);
  color: var(--text-inverse, #051b13);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}
.notify-profile-card .notify-profile-icon {
  font-size: 22px;
  color: var(--brand-500);
  margin-bottom: 2px;
}
.notify-profile-card.is-active .notify-profile-icon {
  color: var(--brand-500);
}
.notify-profile-card .notify-profile-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.notify-profile-card .notify-profile-desc {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.35;
  letter-spacing: 0.01em;
}
/* Botón play interno: posicionado en esquina inferior-derecha,
   evita el ::after del check (que está arriba).  Stop-propagation en
   JS hace que no cambie la selección al pulsarlo. */
.notify-profile-card .notify-profile-preview {
  position: absolute;
  bottom: 6px; right: 6px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.notify-profile-card .notify-profile-preview:hover {
  color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 14%, transparent);
}
.notify-profile-card .notify-profile-preview .bi { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .notify-profile-card,
  .notify-profile-card:active {
    transition: none;
    transform: none;
  }
}

/* =========================================================
   PROFILE HERO (passenger / driver)
   ========================================================= */
.profile-hero {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, var(--bg-brand-soft) 0%, transparent 60%),
    var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-6);
  overflow: hidden;
}
.profile-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: var(--gradient-brand);
  opacity: 0.10;
  pointer-events: none;
}
.profile-hero .p-avatar {
  width: 88px; height: 88px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--bg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-3xl);
  font-weight: 700;
  position: relative;
  z-index: 1;
  border: 3px solid var(--bg-1);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  overflow: hidden;
}
.profile-hero .p-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-hero .p-avatar .p-avatar-edit {
  position: absolute;
  bottom: 0; right: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand-500);
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--bg-1);
  font-size: 0.75rem;
}
.profile-hero .p-name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-0);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.profile-hero .p-name .bi-pencil-fill {
  font-size: 0.6em;
  color: var(--text-3);
  opacity: 0.6;
  transition: opacity var(--dur-base) var(--ease-out);
}
.profile-hero .p-name:hover .bi-pencil-fill { opacity: 1; }
.profile-hero .p-sub {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: 2px;
}
.profile-hero .p-badges {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}
.profile-hero .p-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--text-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.profile-hero .p-badge.gold  { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.profile-hero .p-badge.success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }


/* =========================================================
   ACTIVITY RING (driver KPI · circular progress)
   ========================================================= */
.activity-ring {
  position: relative;
  width: 92px; height: 92px;
  flex-shrink: 0;
}
.activity-ring svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.activity-ring .ring-track {
  fill: none;
  stroke: var(--bg-3);
  stroke-width: 10;
}
.activity-ring .ring-progress {
  fill: none;
  stroke: var(--brand-500);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}
.activity-ring .ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.activity-ring .ring-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}
.activity-ring .ring-label {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-top: 2px;
}


/* =========================================================
   SPARKLINE (inline mini-chart)
   ---------------------------------------------------------
   Estructura SVG esperada (v53):
     <line class="baseline">  · zero line punteada de referencia
     <path class="area">      · gradient fill bajo la curva
     <path class="line">      · curva principal (Catmull-Rom suavizada)
     <circle class="dot">     · marker en cada día con actividad
     <circle class="dot today"> · marker del día actual con halo brand
   ========================================================= */
.sparkline {
  width: 100%;
  height: 32px;
  margin-top: var(--sp-2);
  overflow: visible;
}
.sparkline .baseline {
  stroke: var(--border);
  stroke-width: 0.5;
  stroke-dasharray: 2 3;
  opacity: 0.6;
  vector-effect: non-scaling-stroke;
}
.sparkline .line {
  fill: none;
  stroke: var(--brand-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--brand-500) 40%, transparent));
}
.sparkline .area {
  fill: url(#sparkGradient);
  stroke: none;
  opacity: 0.85;
}
.sparkline .dot {
  fill: var(--brand-500);
  stroke: var(--bg-1);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.sparkline .dot.today {
  fill: var(--brand-400);
  stroke: var(--bg-1);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand-500) 70%, transparent));
}
/* Fallback: paths sin class (legacy) — los que no son .area ni .line */
.sparkline path:not(.area):not(.line) {
  fill: none;
  stroke: var(--brand-500);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   PAYMENT METHOD CARD (passenger wallet)
   ========================================================= */
.pay-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.pay-card:hover { border-color: var(--border-strong); }
.pay-card.is-default {
  border-color: var(--brand-500);
  background: var(--bg-brand-soft);
}
.pay-card .pc-logo {
  width: 44px; height: 32px;
  border-radius: var(--r-2);
  background: var(--bg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-1);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.pay-card.is-default .pc-logo {
  background: var(--brand-500);
  color: var(--text-inverse);
}
.pay-card .pc-body { flex: 1; min-width: 0; line-height: 1.3; }
.pay-card .pc-title { font-weight: 600; color: var(--text-0); font-size: var(--fs-sm); }
.pay-card .pc-sub   { font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }


/* =========================================================
   TRANSACTION ROW
   ========================================================= */
.tx-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.tx-row:last-child { border-bottom: 0; }
.tx-row .tx-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.tx-row .tx-icon.in  { background: var(--success-bg); color: var(--success); }
.tx-row .tx-icon.out { background: var(--info-bg);    color: var(--info); }
.tx-row .tx-icon.ref { background: var(--warning-bg); color: var(--warning); }
.tx-row .tx-body  { flex: 1; min-width: 0; line-height: 1.3; }
.tx-row .tx-title {
  font-weight: 600;
  color: var(--text-1);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-row .tx-sub   { font-size: var(--fs-xs); color: var(--text-3); }
.tx-row .tx-amt {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}
.tx-row .tx-amt.pos { color: var(--success); }
.tx-row .tx-amt.neg { color: var(--text-0); }


/* =========================================================
   PROMO CARD (passenger wallet)
   ========================================================= */
.promo-card {
  position: relative;
  padding: var(--sp-4);
  border-radius: var(--r-4);
  background: linear-gradient(135deg, var(--accent-violet) 0%, var(--brand-500) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.promo-card::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-0);
  transform: translate(-50%, -50%);
}
.promo-card::after {
  content: '';
  position: absolute;
  top: 50%; right: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-0);
  transform: translate(50%, -50%);
}
.promo-card .pr-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.promo-card .pr-desc {
  font-size: var(--fs-xs);
  opacity: 0.92;
}
.promo-card .pr-discount {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  background: rgba(255,255,255,0.20);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}


/* =========================================================
   ADMIN — page-shell premium hero (dashboard · kpi grid)
   ========================================================= */
.admin-page-hero {
  position: relative;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(16,185,129,0.14) 0%, transparent 65%),
    radial-gradient(70% 90% at 0% 100%, rgba(139,92,246,0.10) 0%, transparent 65%),
    radial-gradient(50% 60% at 50% -10%, rgba(6,182,212,0.08) 0%, transparent 60%),
    var(--bg-1);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  margin-bottom: var(--sp-5);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 color-mix(in srgb, var(--brand-500) 18%, transparent);
}
.admin-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 65%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="light"] .admin-page-hero::before {
  background-image:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
}
.admin-page-hero::after {
  content: '';
  position: absolute;
  top: -120px; right: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(16,185,129,0.22) 0%, rgba(16,185,129,0.04) 50%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: anden-orb-drift 16s ease-in-out infinite;
}
:root[data-theme="light"] .admin-page-hero::after {
  background: radial-gradient(circle, rgba(16,185,129,0.30) 0%, rgba(16,185,129,0.06) 50%, transparent 75%);
}
@media (prefers-reduced-motion: reduce) {
  .admin-page-hero::after { animation: none; }
}
.admin-page-hero > * { position: relative; z-index: 1; }

.admin-page-hero .live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--success);
  padding: 5px 12px 5px 10px;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.admin-page-hero .live-pulse .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-soft 1.6s ease-in-out infinite;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--success) 22%, transparent),
    0 0 12px color-mix(in srgb, var(--success) 80%, transparent);
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page-hero .live-pulse .dot { animation: none; }
}


/* =========================================================
   ADMIN — premium table (slightly elevated, soft hover)
   ========================================================= */
.table-premium {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-1);
  border-radius: var(--r-5);
  overflow: hidden;
  border: 1px solid var(--border);
}
.table-premium thead th {
  background: var(--bg-2);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-3);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.table-premium tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-1);
  vertical-align: middle;
}
.table-premium tbody tr:last-child td { border-bottom: 0; }
.table-premium tbody tr {
  transition: background var(--dur-base) var(--ease-out);
}
.table-premium tbody tr:hover { background: var(--bg-2); }


/* =========================================================
   EMPTY STATE PREMIUM (illustrated)
   ========================================================= */
.empty-state-premium {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  background: var(--bg-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-5);
}
.empty-state-premium .es-illu {
  width: 88px; height: 88px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--bg-brand-soft) 0%, transparent 70%),
    var(--bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--brand-500);
}
.empty-state-premium h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-0);
  margin: 0 0 var(--sp-1);
}
.empty-state-premium p {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin: 0 0 var(--sp-4);
  line-height: 1.5;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   QUICK ACTIONS GRID (driver home, passenger home)
   ========================================================= */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
.qa-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  color: var(--text-1);
  text-decoration: none;
}
.qa-tile:hover {
  border-color: var(--brand-500);
  background: var(--bg-brand-soft);
  transform: translateY(-2px);
}
.qa-tile .qa-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-3);
  background: var(--bg-brand-soft);
  color: var(--brand-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.qa-tile .qa-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}


/* =========================================================
   STICKY BOTTOM CTA (mobile, sits above bottom nav)
   ========================================================= */
.sticky-cta {
  position: fixed;
  left: var(--sp-3); right: var(--sp-3);
  bottom: calc(var(--shell-bottomnav-h) + var(--sp-3) + var(--safe-bottom));
  z-index: 30;
  max-width: 560px;
  margin: 0 auto;
}


/* =========================================================
   SKELETON variants (v63: shimmer animation)
   ---------------------------------------------------------
   Uso desde JS:
     UI.skeleton(host, 5, 'trip')   → 5 skeletons tipo trip-card
     UI.skeleton(host, 3, 'stat')   → stat-card altura 88
     UI.skeleton(host, 8, 'row')    → fila genérica
     UI.skeleton(host, 4, 'tx')     → fila tipo tabla/transacción
     UI.skeleton(host, { rows, height, cls }) → custom

   `.skeleton` aplica el gradient + shimmer; los modificadores
   `.sk-*` definen alturas por tipo.  Respeta prefers-reduced-motion.
   ========================================================= */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-3);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--bg-2) 80%, transparent) 0%,
      color-mix(in srgb, var(--bg-2) 55%, transparent) 50%,
      color-mix(in srgb, var(--bg-2) 80%, transparent) 100%
    );
  background-size: 200% 100%;
  animation: anden-skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton + .skeleton { margin-top: var(--sp-2); }
@keyframes anden-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sk-stat { height: 88px; }
.sk-tx   { height: 56px; }
.sk-trip { height: 96px; }
.sk-row  { height: 48px; }
.sk-card { height: 140px; border-radius: var(--r-4); }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: 0.55; }
}

/* =========================================================
   TOAST · action button (v63)
   ---------------------------------------------------------
   Renderiza un botón "Deshacer / Ver / Cancelar" a la derecha
   del toast cuando se pasa `opts.action: { label, onClick }`.
   El toast queda 5500 ms (vs 3200 ms default) para dar tiempo
   a leer y reaccionar.
   ========================================================= */
.toast.toast-with-action {
  padding-right: var(--sp-3);
}
.toast .toast-action {
  flex-shrink: 0;
  margin-left: var(--sp-3);
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-500) 28%, transparent);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background 0.15s var(--ease-out),
    transform 0.15s var(--ease-out);
  white-space: nowrap;
}
.toast .toast-action:hover {
  background: color-mix(in srgb, var(--brand-500) 22%, transparent);
  transform: scale(1.04);
}
.toast .toast-action:active { transform: scale(0.97); }
.toast.success .toast-action { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.toast.warning .toast-action { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.toast.danger  .toast-action { color: var(--danger);  background: color-mix(in srgb, var(--danger) 14%, transparent);  border-color: color-mix(in srgb, var(--danger) 28%, transparent); }

/* =========================================================
   PULL-TO-REFRESH indicator (v63)
   ---------------------------------------------------------
   Solo touch devices.  El indicador se posiciona absolute
   sobre el container donde se monta el gesture; CSS controla
   el spinner ready→refreshing.
   ========================================================= */
.ptr-indicator {
  position: absolute;
  top: -36px;
  left: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  color: var(--brand-500);
  font-size: 18px;
  z-index: 600;
  transform: translateX(-50%) translateY(-30px);
  pointer-events: none;
  user-select: none;
}
.ptr-indicator.ready {
  background: color-mix(in srgb, var(--brand-500) 16%, var(--bg-2));
  border-color: color-mix(in srgb, var(--brand-500) 40%, transparent);
  box-shadow:
    0 6px 22px color-mix(in srgb, var(--brand-500) 40%, transparent),
    0 0 0 4px color-mix(in srgb, var(--brand-500) 20%, transparent);
}
.ptr-indicator.refreshing .bi {
  animation: anden-ptr-spin 0.8s linear infinite;
}
@keyframes anden-ptr-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ptr-indicator.refreshing .bi { animation: none; }
}


/* =========================================================
   UTILITY: limited-width content wrapper
   ========================================================= */
.pwa-content {
  padding: var(--sp-4) var(--sp-5);
  max-width: 560px;
  margin: 0 auto;
}
.pwa-content + .pwa-content { padding-top: 0; }


/* =========================================================
   Helpers premium
   ========================================================= */
.fw-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fw-num {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-weight: 700;
}

/* =========================================================
   v66 · Feed-item layout (admin dashboard live-ops)
   ---------------------------------------------------------
   Bug previo: `.feed-item` no tenía CSS dedicado.  En col
   estrecha (Live ops), el status-pill empujaba la línea sub
   y forzaba "Pendiente · 11 min · $35.000" a romper en 3
   líneas.  Ahora el body es un grid de 3 filas con la pill
   inline en top-row → la ruta y el meta tienen ancho completo
   y el ellipsis funciona bien.
   ========================================================= */
.feed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 380px;
  overflow-y: auto;
  /* Scrollbar discreto compatible con dark mode */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  padding-right: 4px;
}
.feed::-webkit-scrollbar { width: 6px; }
.feed::-webkit-scrollbar-track { background: transparent; }
.feed::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.feed-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  border-radius: var(--r-3);
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg-1) 60%, transparent);
  transition:
    background 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    transform 0.18s var(--ease-out);
}
.feed-item:hover {
  background: var(--bg-2);
  border-color: var(--border);
  transform: translateY(-1px);
}

.feed-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: var(--bg-3);
  color: var(--text-1);
}
.feed-icon.tone-warning { background: var(--warning-soft); color: var(--warning); }
.feed-icon.tone-info    { background: var(--info-soft);    color: var(--info); }
.feed-icon.tone-success { background: var(--success-soft); color: var(--success); }
.feed-icon.tone-danger  { background: var(--danger-soft);  color: var(--danger); }

.feed-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feed-row-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.feed-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-0);
  letter-spacing: -0.005em;
}
.feed-route {
  display: block;
  min-width: 0;
  line-height: 1.4;
}
.feed-route .bi {
  margin-right: 4px;
  font-size: 0.85em;
}
.feed-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.feed-meta .bi { margin-right: 4px; }

/* Pill / botón compacto para top-row: evita que se coma el
   ancho del nombre.  Padding reducido, font-weight más alto,
   nunca encoge ni wrappea. */
.pill-compact {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.status-pill.pill-compact { gap: 5px; padding: 0.2rem 0.6rem; }
.status-pill.pill-compact::before { width: 6px; height: 6px; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent); }
.btn.pill-compact { padding: 0.2rem 0.65rem; border-radius: var(--r-pill); }

/* =========================================================
   v66 · Grid splits responsive para dashboard admin
   ---------------------------------------------------------
   Antes: inline grid-template-columns con minmax(280px, 1fr)
   dejaba la col derecha tan estrecha que el feed-item
   reventaba.  Ahora utilizamos clamp + auto-stack en mobile.
   ========================================================= */
.grid-live-split {
  display: grid;
  gap: var(--sp-4);
  /* Map 2fr / right ~340-420px (clamp) — más respiro para feed */
  grid-template-columns: minmax(0, 1.9fr) clamp(340px, 28vw, 440px);
}
@media (max-width: 1199.98px) {
  .grid-live-split { grid-template-columns: minmax(0, 1.6fr) clamp(320px, 32vw, 400px); }
}
@media (max-width: 991.98px) {
  .grid-live-split { grid-template-columns: minmax(0, 1fr); }
}

.grid-perf-split {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1.2fr) clamp(320px, 28vw, 420px);
}
@media (max-width: 991.98px) {
  .grid-perf-split { grid-template-columns: minmax(0, 1fr); }
}