:root{
      --bg-1:#f6f8fc;
      --bg-2:#eef2f9;
      --surface:#ffffff;
      --surface-2:#f8fafc;
      --border:#e6ebf3;
      --border-strong:#d8e0ec;
      --text:#0f172a;
      --text-2:#334155;
      --muted:#64748b;
      --soft:#94a3b8;

      --primary:#2563eb;
      --primary-soft:#dbeafe;
      --primary-ink:#1e3a8a;

      --good:#10b981;
      --good-soft:#d1fae5;
      --good-ink:#065f46;

      --warn:#f59e0b;
      --warn-soft:#fef3c7;
      --warn-ink:#92400e;

      --danger:#ef4444;
      --danger-soft:#fee2e2;
      --danger-ink:#991b1b;

      /* Sombras mínimas — iOS 26 liquid glass usa elevación muy sutil */
      --shadow-xs:0 1px 1px rgba(15,23,42,.03);
      --shadow-sm:0 2px 8px rgba(15,23,42,.05);
      --shadow-md:0 8px 20px rgba(15,23,42,.06);
      --shadow-lg:0 20px 40px rgba(15,23,42,.08);

      /* === Liquid Glass (iOS 26) === */
      /* Superficie semi-translúcida — el contenido detrás se ve refractado */
      --glass-bg:rgba(255,255,255,.55);
      --glass-bg-strong:rgba(255,255,255,.72);
      --glass-border:rgba(255,255,255,.55);

      /* Refracción: contrast/brightness/saturate hace que el fondo se sienta vivo */
      --glass-blur-sm:saturate(180%) contrast(1.05) blur(14px);
      --glass-blur-md:saturate(190%) contrast(1.06) blur(24px);
      --glass-blur-lg:saturate(200%) contrast(1.08) blur(36px);
      /* Alias por defecto */
      --glass-blur:var(--glass-blur-md);

      /* Edge highlight stack — rim light arriba, sombra rim abajo (depth) */
      --glass-edge:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -1px 0 rgba(15,23,42,.04);
      /* Edge para cards oscuras / tintadas */
      --glass-edge-dark:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.10);

      /* Specular highlight — destello sutil arriba-izquierda (luz natural) */
      --glass-specular:radial-gradient(140% 60% at 0% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 30%, transparent 60%);

      /* Escala de radius unificada (base 8). Todas las cards usan estos. */
      --radius-sm:10px;
      --radius-md:16px;
      --radius-lg:20px;
      --radius-xl:24px;

      --container:1320px;

      /* Custom easing — más fuerte que los easings nativos */
      --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
      --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
      --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Liquid Glass — morphing al presionar (iOS .interactive() modifier).
       Solo aplica a las cards que el usuario puede "tocar" como unidad. */
    .home-best,
    .home-stats,
    .home-compare,
    .home-trend,
    .cambio-converter,
    .cambio-banks,
    .bridge-card{
      transition:transform .22s var(--ease-out), box-shadow .25s var(--ease-out);
    }

    /* Pausa animaciones decorativas (pulse, spinners, shimmer) cuando
       la pestaña no está visible — la clase la pone visibilitychange en JS. */
    body.is-hidden *,
    body.is-hidden *::before,
    body.is-hidden *::after{
      animation-play-state:paused !important;
    }

    /* Skeleton shimmer: utilidad para estados de carga.
       Aplicar la clase .is-loading-skeleton al elemento con "--" mientras carga. */
    .skeleton{
      display:inline-block;
      min-width:1.5em;
      height:.85em;
      vertical-align:middle;
      border-radius:6px;
      background:linear-gradient(90deg,
        rgba(148,163,184,.18) 0%,
        rgba(148,163,184,.35) 50%,
        rgba(148,163,184,.18) 100%);
      background-size:200% 100%;
      animation:skeletonShimmer 1.4s linear infinite;
      color:transparent !important;
    }
    @keyframes skeletonShimmer{
      0%{ background-position:200% 0 }
      100%{ background-position:-200% 0 }
    }

    /* Tabular nums: dígitos del mismo ancho para evitar layout shift
       en valores que cambian (tiempos, precios, contadores). */
    .home-best-time,
    .hs-value,
    .lane-value,
    .cambio-bs-value,
    .cambio-hero-rate,
    .info-pill-main,
    .footer-counter,
    #hbs-savings-val,
    #home-fx-rate,
    #cambio-mid-rate,
    #fc-total,
    #fc-today,
    #last-update,
    #bridges-active,
    .cambio-conv-input,
    .ht-headline{
      font-variant-numeric:tabular-nums;
      font-feature-settings:'tnum' 1;
    }

    /* Ocultar scrollbar en móvil para look nativo de app */
    @media (max-width:720px){
      html, body{
        scrollbar-width:none;          /* Firefox */
        -ms-overflow-style:none;       /* IE/Edge */
      }
      html::-webkit-scrollbar,
      body::-webkit-scrollbar,
      .bim-sheet::-webkit-scrollbar,
      .im-sheet::-webkit-scrollbar{
        display:none;                  /* Chrome/Safari */
      }
      .bim-sheet,
      .im-sheet{
        scrollbar-width:none;
        -ms-overflow-style:none;
      }
    }

    /* Accesibilidad: respetar prefers-reduced-motion globalmente.
       Mantenemos transiciones de opacidad/color (ayudan a la comprensión)
       pero eliminamos movimiento. */
    @media (prefers-reduced-motion: reduce){
      *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
      }
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{
      scroll-behavior:smooth;
      /* Cuando se scroll-into-view a algo, deja espacio para el header sticky */
      scroll-padding-top:calc(76px + env(safe-area-inset-top, 0px));
      scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));
    }
    /* Durante el tour: sin scroll suave para que Driver.js pueda posicionar bien */
    body.tour-active, body.tour-active html{
      scroll-behavior:auto !important;
    }

    /* Hide ligature text until Material Symbols font is fully loaded */
    .material-symbols-rounded{
      visibility:hidden;
    }
    .fonts-ready .material-symbols-rounded{
      visibility:visible;
    }

    html, body{
      touch-action:manipulation;
      -webkit-text-size-adjust:100%;
      -ms-text-size-adjust:100%;
      text-size-adjust:100%;
    }

    body{
      min-height:100vh;
      font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
      color:var(--text);
      background:
        radial-gradient(1100px 500px at 8% -10%, rgba(37,99,235,.08), transparent 60%),
        radial-gradient(900px 400px at 100% 0%, rgba(16,185,129,.06), transparent 55%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
      background-attachment:fixed;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      letter-spacing:-0.01em;
    }

    .app-shell{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
      padding:0 0 48px;
    }

    /* ===== TOPBAR ===== */
    .topbar{
      position:sticky;
      top:0;
      z-index:60;
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      background:rgba(255,255,255,.88);
      border-bottom:1px solid rgba(15,23,42,.06);
      box-shadow:0 1px 4px rgba(15,23,42,.03);
      padding-top:env(safe-area-inset-top, 0);
      /* GPU layer — elimina flicker durante scroll rápido */
      transform:translateZ(0);
      -webkit-transform:translateZ(0);
      will-change:transform;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
    }

    .topbar-inner{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
      padding:14px 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }

    .header-weather{
      display:flex;
      align-items:center;
      gap:10px;
      flex-shrink:0;
      color:var(--text);
    }

    .header-weather .weather-thermo{
      font-size:24px;
      color:var(--primary);
      flex-shrink:0;
    }

    .header-weather .info-pill-main{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.05rem;
      font-weight:800;
      color:var(--text);
      letter-spacing:-.02em;
    }

    .header-weather .info-pill-sub{
      font-size:.74rem;
      color:var(--muted);
      font-weight:600;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
      flex:1;
    }

    .brand-copy{min-width:0;flex:1}

    .brand-eyebrow{
      font-size:.68rem;
      font-weight:700;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--primary);
      line-height:1;
    }

    .brand-copy .greeting{
      margin-top:4px;
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:clamp(1.05rem, 4.5vw, 1.4rem);
      font-weight:800;
      letter-spacing:-.03em;
      line-height:1.1;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .info-pill-text{
      display:flex;
      flex-direction:column;
      line-height:1.2;
      min-width:0;
    }

    .info-pill-main{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:.98rem;
      font-weight:800;
      color:var(--text);
      letter-spacing:-.02em;
      white-space:nowrap;
    }

    .info-pill-sub{
      font-size:.74rem;
      color:var(--muted);
      font-weight:500;
      white-space:nowrap;
      text-transform:capitalize;
    }

    .unit-toggle{
      display:inline-flex;
      align-items:center;
      gap:2px;
      padding:3px;
      border-radius:9px;
      background:var(--bg-2);
      flex-shrink:0;
    }

    .unit-toggle button{
      appearance:none;
      border:0;
      cursor:pointer;
      font:inherit;
      padding:5px 9px;
      border-radius:6px;
      background:transparent;
      color:var(--muted);
      font-size:.72rem;
      font-weight:700;
      position:relative;
      transition:background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out);
    }
    /* Extiende el hit area a 44x44 sin cambiar el tamaño visual (touch target a11y) */
    .unit-toggle button::after{
      content:'';
      position:absolute;
      inset:-12px -4px;
    }
    .unit-toggle button:active{ transform:scale(.97) }

    .unit-toggle button.active{
      background:var(--surface);
      color:var(--primary);
      box-shadow:var(--shadow-xs);
    }

    /* ===== STACK ===== */
    .stack{
      display:grid;
      gap:24px;
      margin-top:24px;
    }


    @keyframes pulse{
      0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}
      70%{box-shadow:0 0 0 12px rgba(52,211,153,0)}
      100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
    }

    /* ===== SECTION HEADER ===== */
    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:0 4px;
      margin-bottom:18px;
      flex-wrap:wrap;
    }
    /* En móvil estrecho: el título y el chip se apilan para que nada se trunque */
    @media (max-width:520px){
      .section-head{
        flex-wrap:nowrap;
      }
      .section-head .update-chip{
        font-size:.72rem;
        padding:7px 12px;
      }
      .section-head .update-chip .uc-refresh{
        font-size:13px;
      }
    }

    .bridge-section-block{
      display:flex;
      flex-direction:column;
    }

    .section-title{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:clamp(1.05rem, 4.2vw, 1.25rem);
      font-weight:800;
      letter-spacing:-.025em;
      color:var(--text);
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;       /* permite que se trunque si hace falta */
      flex:1 1 auto;
    }
    .section-title > span:not(.material-symbols-rounded){
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    /* Iconos del section header — caja fija para que FA y Material Symbols
       se rendericen al mismo tamaño visual (los glyphs tienen métricas distintas) */
    .section-title .material-symbols-rounded,
    .section-title > i.fa-solid,
    .section-title > i.fa-brands,
    .section-title > i.fa-regular{
      width:24px;
      height:24px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--primary);
      font-size:22px;
      line-height:1;
      flex-shrink:0;
    }

    .update-chip{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:8px 14px;
      border-radius:999px;
      background:#ffffff;
      border:1px solid var(--border);
      font-size:.8rem;
      font-weight:600;
      color:var(--muted);
      box-shadow:0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
      cursor:pointer;
      font-family:inherit;
      white-space:nowrap;
      flex-shrink:0;
      transition:background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
    }
    .update-chip:hover{
      background:var(--surface-2);
      border-color:var(--primary-soft);
      color:var(--text);
    }
    .update-chip:active{ transform:scale(.98) }
    .update-chip:focus{ outline:none }
    .update-chip:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }

    .update-chip .dot{
      width:7px;
      height:7px;
      border-radius:999px;
      background:var(--good);
    }
    .update-chip.is-loading .dot{
      background:var(--primary);
      animation:pulse 1.6s infinite;
    }
    .update-chip.is-error .dot{ background:var(--danger) }

    .update-chip .uc-refresh{
      font-size:15px;
      color:var(--muted);
      transition:transform .25s ease, color .18s ease;
    }
    .update-chip:hover .uc-refresh{ color:var(--primary) }
    .update-chip.is-loading .uc-refresh{
      color:var(--primary);
      animation:ucSpin .9s linear infinite;
    }
    @keyframes ucSpin { to { transform:rotate(360deg) } }

    /* ===== BRIDGE GRID ===== */
    .bridge-list{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:20px;
    }

    /* Contenedor principal — liquid glass minimal con accent superior de severidad */
    .bridge-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      background:var(--glass-bg);
      backdrop-filter:var(--glass-blur);
      -webkit-backdrop-filter:var(--glass-blur);
      border:1px solid var(--glass-border);
      box-shadow:var(--glass-edge), var(--shadow-sm);
      transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
      display:flex;
      flex-direction:column;
      isolation:isolate;
    }
    .bridge-card::before{
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius:inherit;
      background:var(--glass-specular);
      z-index:0;
    }
    .bridge-card > *{ position:relative; z-index:1 }

    /* Sin lift al hover — el usuario pidió cards estáticas */

    /* Accent superior — más grueso y con glow del color */
    .bridge-accent{
      height:5px;
      width:100%;
      position:relative;
    }
    .bridge-accent::after{
      content:'';
      position:absolute;
      left:0;
      right:0;
      top:100%;
      height:14px;
      pointer-events:none;
      opacity:.6;
    }

    .bridge-card.good .bridge-accent{
      background:linear-gradient(90deg, #059669 0%, #10b981 50%, #34d399 100%);
      box-shadow:0 2px 12px rgba(16,185,129,.30);
    }
    .bridge-card.good .bridge-accent::after{
      background:linear-gradient(180deg, rgba(16,185,129,.25), transparent);
    }
    .bridge-card.warn .bridge-accent{
      background:linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
      box-shadow:0 2px 12px rgba(245,158,11,.30);
    }
    .bridge-card.warn .bridge-accent::after{
      background:linear-gradient(180deg, rgba(245,158,11,.25), transparent);
    }
    .bridge-card.danger .bridge-accent{
      background:linear-gradient(90deg, #b91c1c 0%, #ef4444 50%, #f87171 100%);
      box-shadow:0 2px 12px rgba(239,68,68,.30);
    }
    .bridge-card.danger .bridge-accent::after{
      background:linear-gradient(180deg, rgba(239,68,68,.25), transparent);
    }

    .bridge-header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:22px 24px 16px;
      flex-wrap:wrap;
    }

    .bridge-header-left{
      display:flex;
      align-items:flex-start;
      gap:14px;
      min-width:0;
      flex:1;
    }

    /* Ícono del puente — oculto en las bridge cards (solo se conserva en section header) */
    .bridge-icon{ display:none !important }
    .bridge-icon .bridge-svg{
      font-size:34px;
      color:var(--primary);
      filter:drop-shadow(0 2px 4px rgba(37,99,235,.18));
      line-height:1;
    }
    .bridge-icon .camera-glyph{
      font-size:30px;
      color:var(--primary);
      filter:drop-shadow(0 2px 4px rgba(37,99,235,.18));
      line-height:1;
    }
    /* Siempre se muestra el puente — la cámara nunca se renderiza dentro de la card */
    .bridge-icon .camera-glyph{ display:none !important }
    /* En vista Cámaras: ocultar header redundante "Cámara X · En vivo" */
    body[data-view="camaras"] .bridge-camera-head{ display:none }
    /* Títulos y header con el mismo tamaño en Cruces y Cámaras (consistencia) */

    .bridge-titles{min-width:0}

    .bridge-title{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.12rem;
      font-weight:800;
      letter-spacing:-.025em;
      color:var(--text);
      line-height:1.2;
    }

    .bridge-sub{
      margin-top:3px;
      color:var(--muted);
      font-size:.82rem;
      font-weight:500;
    }

    /* ===== MODAL "MÁS INFORMACIÓN" DEL PUENTE ===== */
    .bridge-info-modal{
      position:fixed;
      inset:0;
      z-index:9000;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      pointer-events:none;
    }
    .bridge-info-modal[hidden]{ display:none }
    .bridge-info-modal .bim-backdrop{
      position:absolute;
      inset:0;
      background:rgba(15,23,42,.55);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      opacity:0;
      transition:opacity .3s var(--ease-out);
      pointer-events:auto;
    }
    .bridge-info-modal.show .bim-backdrop{ opacity:1 }

    .bim-sheet{
      position:relative;
      width:100%;
      max-width:460px;
      margin:0 auto;
      background:rgba(255,255,255,.94);
      backdrop-filter:var(--glass-blur-lg);
      -webkit-backdrop-filter:var(--glass-blur-lg);
      border:1px solid rgba(255,255,255,.7);
      border-radius:20px 20px 0 0;
      padding:8px 18px calc(20px + env(safe-area-inset-bottom));
      box-shadow:var(--glass-edge), 0 -10px 40px rgba(15,23,42,.18);
      transform:translateY(100%);
      transition:transform .42s var(--ease-drawer);
      /* Limita altura para no tapar todo el teléfono */
      max-height:70vh;
      overflow-y:auto;
      pointer-events:auto;
      isolation:isolate;
      -webkit-overflow-scrolling:touch;
    }
    .bridge-info-modal.show .bim-sheet{ transform:translateY(0) }
    /* En desktop: centrado vertical, menos alto */
    @media (min-width:721px){
      .bridge-info-modal{ align-items:center; padding:24px }
      .bim-sheet{ border-radius:20px; max-height:75vh }
    }

    .bim-grab{
      width:36px;
      height:4px;
      border-radius:999px;
      background:var(--border);
      margin:0 auto 10px;
    }

    .bim-close{
      position:absolute;
      top:10px;
      right:12px;
      width:30px;
      height:30px;
      border-radius:50%;
      border:0;
      background:rgba(15,23,42,.06);
      color:var(--text-2);
      cursor:pointer;
      display:grid;
      place-items:center;
      z-index:2;
      transition:background .18s var(--ease-out), transform .14s var(--ease-out);
    }
    .bim-close:hover{ background:rgba(15,23,42,.10) }
    .bim-close:active{ transform:scale(.92) }
    .bim-close i{ font-size:14px }

    .bim-head{
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 36px 10px 0;
      margin-bottom:12px;
      border-bottom:1px solid var(--border);
    }
    .bim-icon{
      width:36px;
      height:36px;
      border-radius:11px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color:#fff;
      box-shadow:0 4px 10px rgba(37,99,235,.28);
      flex-shrink:0;
    }
    .bim-icon i{ font-size:16px; color:#fff }
    .bim-title{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:.92rem;
      font-weight:800;
      letter-spacing:-.015em;
      color:var(--text);
      line-height:1.25;
      margin:0;
      min-width:0;
      flex:1;
    }

    .bim-body{
      display:flex;
      flex-direction:column;
      gap:6px;
    }

    /* ===== FAQ acordeón ===== */
    .bim-faq-item{
      border-radius:12px;
      background:rgba(255,255,255,.55);
      border:1px solid rgba(15,23,42,.06);
      overflow:hidden;
      transition:background .18s var(--ease-out), border-color .18s var(--ease-out);
    }
    .bim-faq-item.open{
      background:rgba(37,99,235,.04);
      border-color:rgba(37,99,235,.18);
    }
    .bim-faq-q{
      appearance:none;
      width:100%;
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 14px;
      background:transparent;
      border:0;
      cursor:pointer;
      font:inherit;
      text-align:left;
      color:var(--text);
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:.85rem;
      font-weight:700;
      letter-spacing:-.005em;
      line-height:1.3;
      transition:color .18s var(--ease-out);
    }
    .bim-faq-q > span{ flex:1; min-width:0 }
    .bim-faq-icon{
      width:18px;
      text-align:center;
      color:var(--primary);
      font-size:.95em;
      flex-shrink:0;
    }
    .bim-faq-arrow{
      color:var(--muted);
      font-size:.75em;
      flex-shrink:0;
      transition:transform .25s var(--ease-out), color .18s var(--ease-out);
    }
    .bim-faq-item.open .bim-faq-arrow{
      transform:rotate(180deg);
      color:var(--primary);
    }
    .bim-faq-q:hover{ color:var(--primary-ink) }

    /* Respuesta colapsable */
    .bim-faq-a{
      display:grid;
      grid-template-rows:0fr;
      transition:grid-template-rows .28s var(--ease-out);
    }
    .bim-faq-item.open .bim-faq-a{
      grid-template-rows:1fr;
    }
    .bim-faq-a-inner{
      overflow:hidden;
      min-height:0;
    }
    .bim-faq-item.open .bim-faq-a-inner{
      padding:0 14px 14px 14px;
    }

    .bim-text{
      color:var(--text-2);
      font-size:.82rem;
      line-height:1.45;
      margin:0;
    }

    .bim-hours{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .bim-hour-row{
      display:flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:10px;
      background:rgba(37,99,235,.05);
    }
    .bim-hour-icon{
      width:22px;
      height:22px;
      border-radius:7px;
      display:grid;
      place-items:center;
      background:rgba(37,99,235,.14);
      color:var(--primary);
      flex-shrink:0;
    }
    .bim-hour-icon i{ font-size:11px }
    .bim-hour-text{ flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
    .bim-hour-label{
      font-size:.66rem;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .bim-hour-value{
      font-size:.78rem;
      color:var(--text);
      font-weight:500;
      line-height:1.45;
    }
    /* Si la hora tiene múltiples días (comercial), el row crece verticalmente */
    .bim-hour-row:has(.bim-hour-value br){ align-items:flex-start; padding:8px 10px }
    .bim-hour-row:has(.bim-hour-value br) .bim-hour-icon{ margin-top:1px }
    .bim-hour-row:has(.bim-hour-value br) .bim-hour-text{ flex-direction:column; gap:2px; align-items:flex-start }

    .bim-tags{
      display:flex;
      flex-wrap:wrap;
      gap:5px;
    }
    .bim-tag{
      padding:4px 10px;
      border-radius:999px;
      background:rgba(37,99,235,.10);
      color:var(--primary-ink);
      font-size:.7rem;
      font-weight:600;
      border:1px solid rgba(37,99,235,.18);
    }

    /* Sección de tip — solo un highlight sutil con barra azul izquierda */
    .bim-section-tip{
      padding-top:12px;
      border-top:1px solid rgba(15,23,42,.06);
      position:relative;
    }
    .bim-section-tip .bim-text{
      padding:10px 12px 10px 14px;
      border-radius:10px;
      background:rgba(37,99,235,.06);
      border-left:3px solid var(--primary);
      color:var(--text-2);
    }

    /* Botón "Más información" — IDÉNTICO al de Maps para visual unity */
    .mini-btn-info{
      background:var(--surface);
      border-color:var(--border);
      color:var(--text-2);
    }
    .mini-btn-info i{ color:var(--primary); font-size:18px; transition:none }
    @media (hover: hover) and (pointer: fine){
      .mini-btn-info:hover{
        background:var(--primary);
        border-color:var(--primary);
        color:#fff;
      }
      .mini-btn-info:hover i{ color:#fff }
    }
    .mini-btn-info:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }

    /* Chip "Sin actualizar en las últimas X horas" — debajo del subtítulo */
    .bridge-stale{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:8px;
      padding:5px 10px;
      border-radius:999px;
      font-size:.7rem;
      font-weight:600;
      line-height:1.2;
      background:rgba(245,158,11,.12);
      color:var(--warn-ink);
      border:1px solid rgba(245,158,11,.25);
      max-width:100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .bridge-stale span{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .bridge-stale i{
      font-size:.85em;
      color:var(--warn);
      flex-shrink:0;
    }
    .bridge-stale.danger{
      background:rgba(239,68,68,.10);
      color:var(--danger-ink);
      border-color:rgba(239,68,68,.22);
    }
    .bridge-stale.danger i{ color:var(--danger) }

    /* Badge del estado — píldora limpia con tinte del severity (refinado) */
    .bridge-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 12px;
      border-radius:999px;
      font-size:.78rem;
      font-weight:700;
      letter-spacing:-.005em;
      flex-shrink:0;
      border:1px solid transparent;
      transition:transform .18s ease, background .25s ease;
    }
    .bridge-badge .material-symbols-rounded{
      font-size:16px;
    }

    .bridge-badge.good{
      background:#ecfdf5;
      border-color:#bbf7d0;
      color:#065f46;
    }
    .bridge-badge.good .material-symbols-rounded{ color:#059669 }
    .bridge-badge.warn{
      background:#fffbeb;
      border-color:#fde68a;
      color:#92400e;
    }
    .bridge-badge.warn .material-symbols-rounded{ color:#d97706 }
    .bridge-badge.danger{
      background:#fef2f2;
      border-color:#fecaca;
      color:#991b1b;
    }
    .bridge-badge.danger .material-symbols-rounded{ color:#dc2626 }

    /* ===== CAMERA ===== */
    .bridge-camera-wrap{padding:0 24px 16px}

    .bridge-camera-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }

    .bridge-camera-title{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }

    .bridge-camera-title .material-symbols-rounded{
      font-size:18px;
      color:var(--primary);
    }

    .bridge-camera-head h3{
      font-size:.9rem;
      font-weight:700;
      color:var(--text);
    }

    .live-tag,.coming-tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 10px;
      border-radius:999px;
      font-size:.7rem;
      font-weight:700;
    }

    .live-tag{
      color:var(--good-ink);
      background:var(--good-soft);
    }

    .live-tag .live-dot{
      width:7px;
      height:7px;
      border-radius:999px;
      background:var(--good);
      animation:pulse 1.8s infinite;
    }

    .coming-tag{
      color:var(--primary-ink);
      background:var(--primary-soft);
    }

    .video-wrap{
      position:relative;
      width:100%;
      aspect-ratio:16/9;
      border-radius:var(--radius-md);
      overflow:hidden;
      background:#0f172a;
      box-shadow:var(--shadow-xs);
    }

    .video-wrap iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    .camera-placeholder{
      aspect-ratio:16/9;
      border-radius:var(--radius-md);
      background:linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:18px;
      border:1px dashed var(--border-strong);
    }

    .camera-placeholder-inner{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      max-width:340px;
    }

    .camera-placeholder-inner .material-symbols-rounded{
      font-size:38px;
      color:var(--soft);
    }

    .camera-placeholder-title{
      font-size:.95rem;
      font-weight:700;
      color:var(--text-2);
    }

    .camera-placeholder-sub{
      font-size:.82rem;
      color:var(--muted);
      line-height:1.45;
    }

    /* ===== TOGGLE ===== */
    .crossings-toggle-wrap{padding:0 24px 20px;margin-top:auto}

    .crossings-toggle{
      position:relative;
      overflow:hidden;
      width:100%;
      appearance:none;
      border:1px solid rgba(255,255,255,.15);
      background:linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
      color:#fff;
      border-radius:var(--radius-md);
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      cursor:pointer;
      font:inherit;
      transition:transform .18s ease, box-shadow .18s ease;
      box-shadow:0 8px 22px rgba(37,99,235,.25);
    }

    .crossings-toggle::before{
      content:'';
      position:absolute;
      inset:0;
      background:
        radial-gradient(400px 140px at 100% 0%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(300px 120px at 0% 100%, rgba(16,185,129,.20), transparent 60%);
      pointer-events:none;
    }

    .crossings-toggle:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 28px rgba(37,99,235,.32);
    }

    .crossings-toggle > *{position:relative;z-index:1}

    .crossings-toggle-left{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      text-align:left;
    }

    .crossings-toggle-icon{
      width:36px;
      height:36px;
      border-radius:10px;
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.22);
      backdrop-filter:blur(8px);
      display:grid;
      place-items:center;
      flex-shrink:0;
    }

    .crossings-toggle-icon .material-symbols-rounded{
      font-size:20px;
      color:#fff;
    }

    .crossings-toggle-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }

    .crossings-toggle-title{
      font-size:.95rem;
      font-weight:800;
      color:#fff;
      letter-spacing:-.015em;
    }

    .crossings-toggle-sub{
      font-size:.78rem;
      color:rgba(255,255,255,.78);
      font-weight:500;
    }

    .crossings-toggle .toggle-arrow{
      color:rgba(255,255,255,.85);
      transition:transform .22s ease;
      flex-shrink:0;
    }

    .bridge-card.crossings-open .crossings-toggle .toggle-arrow{
      transform:rotate(180deg);
      color:#fff;
    }

    .crossings-content{
      display:grid;
      grid-template-rows:0fr;
      transition:grid-template-rows .28s ease;
    }

    .bridge-card.crossings-open .crossings-content{grid-template-rows:1fr}

    .crossings-content-inner{
      min-height:0;
      overflow:hidden;
    }

    .crossings-content-pad{
      padding:0 24px 24px;
      display:grid;
      gap:14px;
    }

    /* ===== LANES ===== */
    .bridge-lanes{
      display:grid;
      /* Siempre 2 columnas — consistencia visual entre mobile y desktop */
      grid-template-columns:repeat(2, 1fr);
      gap:10px;
    }
    /* Si queda un lane suelto al final (3 items → 2+1), centrarlo en la fila */
    .bridge-lanes > .lane-card:last-child:nth-child(odd):not(:first-child){
      grid-column:1 / -1;
      justify-self:center;
      width:calc(50% - 5px);
    }

    /* ===== LANE CARDS — gradiente saturado estilo dashboard premium ===== */
    .lane-card{
      position:relative;
      overflow:hidden;
      padding:18px 14px 16px;
      border-radius:16px;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:8px;
      border:0;
      color:#fff;
      isolation:isolate;
      transition:transform .18s ease, box-shadow .2s ease;
    }
    /* Highlights muy sutiles — igual filosofía que la card azul de Inicio */
    .lane-card::after{
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:
        radial-gradient(420px 200px at 100% 0%, rgba(255,255,255,.14), transparent 60%),
        radial-gradient(360px 200px at 0% 100%, rgba(0,0,0,.10), transparent 60%);
    }
    .lane-card::before{ display:none } /* quita la barrita lateral vieja */

    .lane-top{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }

    /* Ícono sin contenedor — solo el símbolo centrado, blanco */
    .lane-icon{
      display:grid;
      place-items:center;
      background:transparent;
      border:0;
      box-shadow:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      flex-shrink:0;
    }
    .lane-icon .material-symbols-rounded{
      font-size:38px;
      color:rgba(255,255,255,.95);
      font-variation-settings:'wght' 400, 'FILL' 0, 'GRAD' 0, 'opsz' 24;
      filter:drop-shadow(0 1px 3px rgba(0,0,0,.22));
    }

    /* El dot ya no se necesita — el gradiente comunica el estado */
    .lane-status-dot{ display:none }

    /* Placeholder cuando CBP no reporta ningún lane (en vez de grilla naranja) */
    .lane-empty{
      grid-column:1 / -1;
      display:flex;
      align-items:center;
      gap:14px;
      padding:18px 18px;
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.35);
      backdrop-filter:var(--glass-blur-sm);
      -webkit-backdrop-filter:var(--glass-blur-sm);
      border:1px solid rgba(255,255,255,.5);
      box-shadow:var(--glass-edge);
      color:var(--muted);
    }
    .lane-empty .material-symbols-rounded{
      font-size:24px;
      color:var(--soft);
      flex-shrink:0;
    }
    .lane-empty-title{
      font-weight:700;
      color:var(--text-2);
      font-size:.92rem;
    }
    .lane-empty-sub{
      font-size:.78rem;
      color:var(--muted);
      margin-top:2px;
    }

    /* Valor (5 min, Cerrado, Sin datos) — debajo del ícono, ocupa todo el ancho */
    .lane-value{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.4rem;
      font-weight:800;
      letter-spacing:-.035em;
      line-height:1.1;
      color:#fff;
      text-shadow:0 1px 2px rgba(0,0,0,.12);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* Label del carril — pequeño debajo del valor */
    .lane-label{
      font-size:.76rem;
      font-weight:600;
      line-height:1.3;
      color:rgba(255,255,255,.88);
      letter-spacing:-.005em;
    }

    /* === GRADIENTES POR SEVERIDAD ===
       Oscuro arriba-izquierda → brillante abajo-derecha.
       Sombra única suave (mismo estilo que la card azul de Inicio). */
    .lane-card.good{
      background:linear-gradient(135deg, #064e3b 0%, #047857 55%, #10b981 100%);
      box-shadow:0 12px 32px rgba(16,185,129,.25);
    }
    .lane-card.warn{
      background:linear-gradient(135deg, #78350f 0%, #b45309 50%, #f59e0b 100%);
      box-shadow:0 12px 32px rgba(245,158,11,.30);
    }
    .lane-card.danger{
      background:linear-gradient(135deg, #7f1d1d 0%, #9f1239 50%, #be123c 100%);
      box-shadow:0 12px 32px rgba(190,18,60,.32);
    }

    /* Sin lift en lane cards */
    .lane-card.good:hover{   box-shadow:0 16px 40px rgba(16,185,129,.32) }
    .lane-card.warn:hover{   box-shadow:0 16px 40px rgba(245,158,11,.38) }
    .lane-card.danger:hover{ box-shadow:0 16px 40px rgba(190,18,60,.40) }

    .bridge-footer{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      align-items:stretch;
    }
    .bridge-footer .mini-btn{
      width:100%;
      justify-content:center;
      padding:10px 8px;
      font-size:.78rem;
      gap:6px;
      white-space:nowrap;
      min-width:0;
    }
    .bridge-footer .mini-btn .material-symbols-rounded,
    .bridge-footer .mini-btn i{ font-size:15px; flex-shrink:0 }

    .mini-btn{
      appearance:none;
      border:1px solid var(--border);
      cursor:pointer;
      font:inherit;
      color:var(--text-2);
      background:var(--surface);
      border-radius:10px;
      padding:9px 14px;
      display:inline-flex;
      align-items:center;
      gap:7px;
      font-size:.85rem;
      font-weight:600;
      transition:background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), transform .16s var(--ease-out), box-shadow .18s var(--ease-out);
      box-shadow:var(--shadow-xs);
    }

    @media (hover: hover) and (pointer: fine){
      .mini-btn:hover{
        background:var(--primary);
        border-color:var(--primary);
        color:#fff;
      }
    }
    .mini-btn:active{ transform:scale(.97) }

    .mini-btn:hover .material-symbols-rounded{color:#fff}

    .mini-btn .material-symbols-rounded{
      font-size:18px;
      color:var(--primary);
      transition:color .18s ease;
    }

    /* ===== SHARE FAB (siempre arriba del bottom-nav, lado derecho) ===== */
    /* ===== FAB STACK (speed-dial) ===== */
    .fab-stack{
      position:fixed;
      bottom:calc(86px + env(safe-area-inset-bottom));
      right:16px;
      z-index:50;
      width:46px;
      height:46px;
      transition:opacity .25s var(--ease-out), transform .18s var(--ease-out);
    }
    .fab-stack.is-hidden{
      opacity:0;
      pointer-events:none;
      transform:translateY(8px);
    }

    .fab-main{
      position:relative;
      width:46px;
      height:46px;
      border-radius:999px;
      background:linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
      color:#fff;
      border:0;
      cursor:pointer;
      display:grid;
      place-items:center;
      box-shadow:0 8px 20px rgba(37,99,235,.38), inset 0 1px 0 rgba(255,255,255,.22);
      transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .18s var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine){
      .fab-main:hover{
        transform:scale(1.06);
        box-shadow:var(--glass-edge-dark), 0 16px 36px rgba(37,99,235,.45);
      }
    }
    .fab-main:active{ transform:scale(.94); }
    .fab-main:focus{ outline:none; }
    .fab-main:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
    .fab-stack[data-open="true"] .fab-main{
      transform:rotate(135deg);
      background:linear-gradient(135deg,#1e40af 0%, #2563eb 100%);
    }

    .fab-icon{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      font-size:26px;
      color:#fff;
      transition:opacity .2s var(--ease-out), transform .25s cubic-bezier(.34,1.56,.64,1);
    }
    .fab-icon-close{ opacity:0; transform:rotate(-135deg) scale(.6); }
    .fab-stack[data-open="true"] .fab-icon-open{ opacity:0; transform:rotate(-135deg) scale(.6); }
    .fab-stack[data-open="true"] .fab-icon-close{ opacity:1; transform:rotate(-135deg) scale(1); }

    /* Mini buttons (children) */
    .fab-mini{
      position:absolute;
      bottom:0;
      right:0;
      width:46px;
      height:46px;
      border:0;
      background:transparent;
      padding:0;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      pointer-events:none;
      opacity:0;
      transform:translateY(0) scale(.4) rotate(-20deg);
      transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s var(--ease-out);
    }
    .fab-mini:focus{ outline:none; }
    .fab-mini-btn{
      width:42px;
      height:42px;
      border-radius:999px;
      background:#fff;
      color:#1e40af;
      display:grid;
      place-items:center;
      box-shadow:0 6px 18px rgba(15,23,42,.18), 0 1px 3px rgba(15,23,42,.10);
      flex-shrink:0;
      transition:transform .18s var(--ease-out), background .18s var(--ease-out);
    }
    .fab-mini-btn .material-symbols-rounded{ font-size:22px; }
    .fab-mini:hover .fab-mini-btn{ transform:scale(1.08); }
    .fab-mini:active .fab-mini-btn{ transform:scale(.94); }
    .fab-mini:focus-visible .fab-mini-btn{ outline:2px solid #2563eb; outline-offset:2px; }

    .fab-mini-label{
      background:rgba(15,23,42,.92);
      color:#fff;
      font-size:.78rem;
      font-weight:600;
      padding:5px 10px;
      border-radius:8px;
      white-space:nowrap;
      box-shadow:0 4px 12px rgba(15,23,42,.18);
      transform:translateX(6px);
      opacity:0;
      transition:transform .25s var(--ease-out) .05s, opacity .2s var(--ease-out) .05s;
    }

    .fab-stack[data-open="true"] .fab-mini{
      pointer-events:auto;
      opacity:1;
    }
    .fab-stack[data-open="true"] .fab-mini-1{
      transform:translateY(-58px) scale(1) rotate(0);
      transition-delay:.04s;
    }
    .fab-stack[data-open="true"] .fab-mini-2{
      transform:translateY(-114px) scale(1) rotate(0);
      transition-delay:.10s;
    }
    .fab-stack[data-open="true"] .fab-mini-label{
      opacity:1;
      transform:translateX(0);
    }

    /* Backdrop sutil cuando está abierto */
    .fab-backdrop{
      position:fixed;
      inset:0;
      background:transparent;
      z-index:49;
      opacity:0;
      pointer-events:none;
      transition:opacity .2s var(--ease-out);
    }
    .fab-backdrop.is-open{
      opacity:1;
      pointer-events:auto;
      background:rgba(15,23,42,.10);
      backdrop-filter:blur(2px);
      -webkit-backdrop-filter:blur(2px);
    }

    .fab-mini-btn.copied{
      background:linear-gradient(135deg,#10b981,#065f46);
      color:#fff;
    }

    /* ===== TOUR (Driver.js) — diseño limpio y responsive ===== */
    .driver-overlay,
    .driver-active-element,
    .driver-popover,
    .driver-popover *{
      transition:none !important;
      animation:none !important;
    }
    .driver-popover{
      will-change:transform;
      transform:translateZ(0);
      -webkit-transform:translateZ(0);
      border-radius:var(--radius-lg);
      box-shadow:var(--glass-edge), 0 18px 42px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.06);
      font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
      background:rgba(255,255,255,.85);
      backdrop-filter:var(--glass-blur-lg);
      -webkit-backdrop-filter:var(--glass-blur-lg);
      border:1px solid rgba(255,255,255,.6);
      max-width:min(360px, calc(100vw - 24px));
      padding:18px 18px 16px;
      color:var(--text);
      -webkit-tap-highlight-color:transparent;
    }
    /* Título del tour: grid de 2 columnas → alineación icon+texto bulletproof */
    .driver-popover-title{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-weight:800;
      letter-spacing:-.025em;
      color:var(--text);
      font-size:1.05rem;
      line-height:1.3;
      display:grid;
      grid-template-columns:auto 1fr;
      align-items:center;
      column-gap:12px;
      margin:0 36px 10px 0;
    }
    /* Ícono del tour: solo el símbolo, sin contenedor */
    .driver-popover-title .tour-icon{
      display:block;
      color:var(--primary);
      font-size:26px;
      line-height:26px;          /* mismo que font-size → caja exacta del glyph */
      width:26px;
      height:26px;
      text-align:center;
      background:none;
      border:0;
      padding:0;
      margin:0;
      font-family:'Material Symbols Rounded' !important;
      font-feature-settings:'liga' 1, 'rlig' 1;
      -webkit-font-feature-settings:'liga' 1, 'rlig' 1;
      font-weight:500;
    }
    /* Texto del título: ocupa la otra columna, con line-height controlado */
    .driver-popover-title .tour-title-text{
      min-width:0;
      line-height:1.25;
    }
    .driver-popover-description{
      color:var(--text-2);
      line-height:1.5;
      font-size:.9rem;
      margin-top:0;
    }

    /* Leyenda de colores dentro del popover del tour */
    .tour-legend{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:4px;
    }
    .tour-legend-row{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:.88rem;
      color:var(--text-2);
      line-height:1.3;
    }
    .tour-legend-row strong{
      color:var(--text);
      font-weight:800;
    }
    .tl-dot{
      width:12px;
      height:12px;
      border-radius:999px;
      flex-shrink:0;
      box-shadow:0 0 0 3px rgba(15,23,42,.04);
    }
    .tl-dot.good{   background:#10b981 }
    .tl-dot.warn{   background:#f59e0b }
    .tl-dot.danger{ background:#ef4444 }
    .driver-popover-progress-text{
      color:var(--muted);
      font-weight:800;
      font-size:.72rem;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .driver-popover-footer{
      gap:10px;
      margin-top:18px;
      display:flex;
      align-items:center;
      flex-wrap:wrap;
    }
    .driver-popover-navigation-btns{
      gap:8px;
      display:flex;
      flex-wrap:nowrap;
      margin-left:auto;  /* progress queda a la izquierda, botones a la derecha */
    }
    .driver-popover-navigation-btns .driver-popover-next-btn,
    .driver-popover-navigation-btns .driver-popover-prev-btn{
      border-radius:12px;
      font-weight:700;
      font-size:.92rem;
      font-family:inherit;
      padding:11px 18px;
      min-height:44px;     /* tap target Apple HIG */
      min-width:88px;
      text-shadow:none;
      cursor:pointer;
      transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
      letter-spacing:-.01em;
    }
    .driver-popover-navigation-btns .driver-popover-next-btn{
      background:linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
      color:#fff;
      border:0;
      box-shadow:0 6px 16px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .driver-popover-navigation-btns .driver-popover-next-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 22px rgba(37,99,235,.40), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .driver-popover-navigation-btns .driver-popover-next-btn:active{ transform:translateY(0) }
    .driver-popover-navigation-btns .driver-popover-prev-btn{
      background:var(--surface);
      color:var(--text-2);
      border:1px solid var(--border-strong);
    }
    .driver-popover-navigation-btns .driver-popover-prev-btn:hover{
      background:var(--bg-2);
      color:var(--text);
    }
    .driver-popover-close-btn{
      color:var(--text-2);
      background:var(--bg-2);
      border-radius:999px;
      font-size:20px;
      width:30px;
      height:30px;
      top:10px;
      right:10px;
      display:grid;
      place-items:center;
      line-height:1;
      transition:background .15s ease, color .15s ease;
    }
    .driver-popover-close-btn:hover{
      background:var(--danger-soft);
      color:var(--danger-ink);
    }

    @media (max-width: 560px){
      .driver-popover{
        padding:16px;
        max-width:calc(100vw - 20px);
      }
      .driver-popover-title{font-size:1rem; margin-right:30px}
      .driver-popover-title .tour-icon{font-size:22px}
      .driver-popover-description{font-size:.88rem}
      .driver-popover-navigation-btns .driver-popover-next-btn,
      .driver-popover-navigation-btns .driver-popover-prev-btn{
        padding:10px 14px;
        font-size:.88rem;
      }
      .fab-stack, .fab-main{
        width:48px;
        height:48px;
      }
      .fab-main .fab-icon{font-size:22px}
    }
    /* Pantallas muy pequeñas (iPhone SE, etc.): botones full-width */
    @media (max-width: 360px){
      .driver-popover-footer{ flex-direction:column-reverse; align-items:stretch }
      .driver-popover-progress-text{ text-align:center; padding-top:4px }
      .driver-popover-navigation-btns{
        margin-left:0;
        width:100%;
      }
      .driver-popover-navigation-btns .driver-popover-next-btn,
      .driver-popover-navigation-btns .driver-popover-prev-btn{
        flex:1;
        min-width:0;
      }
    }

    /* ===== FOOTER COUNTER ===== */
    .footer-counter{
      margin-top:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      gap:8px;
      font-size:.78rem;
      color:var(--soft);
      font-weight:500;
    }

    .fc-item{
      display:inline-flex;
      align-items:center;
      gap:5px;
    }

    .fc-item .material-symbols-rounded{
      font-size:14px;
      color:var(--muted);
    }

    .fc-item span:not(.material-symbols-rounded){
      color:var(--text-2);
      font-weight:700;
    }

    .fc-dot{color:var(--soft)}

    /* ===== UPDATE BANNER (nueva versión PWA) ===== */
    .update-banner{
      position:fixed;
      top:env(safe-area-inset-top, 0);
      left:8px;
      right:8px;
      z-index:100;
      display:flex;
      justify-content:center;
      padding-top:8px;
      transform:translateY(-150%);
      transition:transform .42s var(--ease-drawer);
      pointer-events:none;
    }
    .update-banner.show{
      transform:translateY(0);
      pointer-events:auto;
    }
    .update-banner[hidden]{display:none}

    .ub-pill{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 14px;
      border-radius:var(--radius-md);
      background:linear-gradient(135deg, rgba(30,58,138,.78) 0%, rgba(37,99,235,.78) 60%, rgba(59,130,246,.78) 100%);
      backdrop-filter:var(--glass-blur-md);
      -webkit-backdrop-filter:var(--glass-blur-md);
      border:1px solid rgba(255,255,255,.22);
      color:#fff;
      box-shadow:var(--glass-edge-dark), 0 12px 30px rgba(37,99,235,.32);
      max-width:480px;
      width:100%;
    }

    .ub-icon{
      font-size:22px !important;
      color:#fff;
      animation:ubSpin 2s linear infinite;
    }
    @keyframes ubSpin {
      to { transform:rotate(360deg) }
    }

    .ub-text{flex:1;min-width:0}

    .ub-title{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:.84rem;
      font-weight:800;
      letter-spacing:-.015em;
      line-height:1.2;
    }

    .ub-sub{
      font-size:.7rem;
      opacity:.85;
      margin-top:1px;
    }

    .ub-btn{
      flex-shrink:0;
      padding:8px 14px;
      border-radius:999px;
      border:0;
      background:#fff;
      color:var(--primary-ink);
      font:inherit;
      font-weight:800;
      font-size:.82rem;
      cursor:pointer;
      box-shadow:0 4px 10px rgba(0,0,0,.12);
      transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine){
      .ub-btn:hover{
        transform:translateY(-1px);
        box-shadow:0 8px 16px rgba(0,0,0,.18);
      }
    }
    .ub-btn:active{ transform:scale(.97) }
    .ub-btn:disabled{opacity:.7;cursor:wait}

    /* ===== INSTALL CHIP (en home, arriba) ===== */
    .install-chip-wrap{
      position:relative;
      display:flex;
      align-items:stretch;
      gap:6px;
    }
    .install-chip-wrap[hidden]{display:none}

    .install-chip{flex:1}

    .install-chip-dismiss{
      width:32px;
      flex-shrink:0;
      display:grid;
      place-items:center;
      position:relative;
      border:1px solid rgba(37,99,235,.18);
      background:rgba(37,99,235,.05);
      border-radius:12px;
      cursor:pointer;
      color:var(--muted);
      transition:background .18s var(--ease-out), color .18s var(--ease-out), transform .14s var(--ease-out);
    }
    .install-chip-dismiss::after{
      content:'';
      position:absolute;
      inset:-8px;
    }
    .install-chip-dismiss:active{ transform:scale(.94) }
    .install-chip-dismiss:hover{
      background:rgba(37,99,235,.12);
      color:var(--text);
    }
    .install-chip-dismiss .material-symbols-rounded{font-size:18px}

    .install-chip{
      position:relative;
      overflow:hidden;
      display:flex;
      align-items:center;
      gap:12px;
      width:100%;
      padding:12px 16px 12px 12px;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(37,99,235,.08) 0%, rgba(59,130,246,.14) 100%);
      border:1px solid rgba(37,99,235,.20);
      box-shadow:0 6px 18px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.6);
      cursor:pointer;
      font:inherit;
      text-align:left;
      isolation:isolate;
      transition:transform .18s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out);
    }
    .install-chip::before{
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:radial-gradient(420px 160px at 100% 0%, rgba(255,255,255,.4), transparent 60%);
    }
    @media (hover: hover) and (pointer: fine){
      .install-chip:hover{
        transform:translateY(-1px);
        background:linear-gradient(135deg, rgba(37,99,235,.12) 0%, rgba(59,130,246,.20) 100%);
        box-shadow:0 10px 24px rgba(37,99,235,.16), inset 0 1px 0 rgba(255,255,255,.6);
      }
    }
    .install-chip:active{ transform:scale(.99) }
    .install-chip:focus{outline:none}
    .install-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

    .ic-icon{
      display:grid;
      place-items:center;
      flex-shrink:0;
    }
    .ic-icon img{
      width:36px;
      height:36px;
      border-radius:10px;
      display:block;
      box-shadow:0 4px 10px rgba(37,99,235,.25);
    }

    .ic-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}

    .ic-title{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:.86rem;
      font-weight:800;
      color:var(--primary-ink);
      letter-spacing:-.015em;
    }
    .ic-sub{
      font-size:.72rem;
      color:var(--text-2);
      font-weight:500;
    }
    .ic-arrow{
      color:var(--primary);
      font-size:22px;
      flex-shrink:0;
    }

    /* ===== INSTALL MODAL (bottom sheet) ===== */
    .install-modal{
      position:fixed;
      inset:0;
      z-index:9999;
      display:flex;
      align-items:flex-end;
      justify-content:center;
    }
    .install-modal[hidden]{display:none}

    .im-backdrop{
      position:absolute;
      inset:0;
      background:rgba(15,23,42,.55);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      opacity:0;
      transition:opacity .3s ease;
    }
    .install-modal.show .im-backdrop{opacity:1}

    .im-sheet{
      position:relative;
      width:100%;
      max-width:480px;
      background:rgba(255,255,255,.85);
      backdrop-filter:var(--glass-blur-lg);
      -webkit-backdrop-filter:var(--glass-blur-lg);
      border:1px solid rgba(255,255,255,.6);
      border-radius:24px 24px 0 0;
      padding:8px 22px calc(28px + env(safe-area-inset-bottom));
      box-shadow:var(--glass-edge), 0 -10px 40px rgba(15,23,42,.18);
      transform:translateY(100%);
      transition:transform .42s var(--ease-drawer);
      max-height:90vh;
      overflow-y:auto;
    }
    .install-modal.show .im-sheet{transform:translateY(0)}

    .im-grab{
      width:42px;
      height:5px;
      border-radius:999px;
      background:var(--border);
      margin:0 auto 16px;
    }

    .ib-close{
      position:absolute;
      top:16px;
      right:16px;
      width:32px;
      height:32px;
      border-radius:50%;
      border:0;
      background:var(--bg-2);
      color:var(--muted);
      font-size:22px;
      line-height:1;
      cursor:pointer;
      display:grid;
      place-items:center;
      z-index:2;
      transition:background .18s var(--ease-out), color .18s var(--ease-out), transform .14s var(--ease-out);
    }
    .ib-close::after{
      content:'';
      position:absolute;
      inset:-8px;
    }
    .ib-close:active{ transform:scale(.92) }
    @media (hover: hover) and (pointer: fine){
      .ib-close:hover{background:var(--border);color:var(--text)}
    }

    .im-head{
      text-align:center;
      margin-bottom:18px;
    }

    .im-icon{
      width:64px;
      height:64px;
      border-radius:16px;
      box-shadow:0 8px 22px rgba(37,99,235,.30);
      margin:0 auto 12px;
      display:block;
    }

    .im-title{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-weight:800;
      font-size:1.25rem;
      color:var(--text);
      letter-spacing:-.025em;
    }

    .im-desc{
      margin-top:6px;
      font-size:.88rem;
      color:var(--muted);
      line-height:1.5;
    }

    .im-sheet{display:flex;flex-direction:column;align-items:stretch}
    .im-platform{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      align-self:center;
      gap:6px;
      margin:0 auto 16px;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(37,99,235,.12);
      backdrop-filter:var(--glass-blur-sm);
      -webkit-backdrop-filter:var(--glass-blur-sm);
      border:1px solid rgba(37,99,235,.2);
      color:var(--primary-ink);
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .im-platform .material-symbols-rounded{font-size:14px}

    .ib-ios-steps,
    .im-android-steps{
      display:flex;
      flex-direction:column;
      gap:12px;
      padding:18px;
      background:rgba(255,255,255,.5);
      backdrop-filter:var(--glass-blur-sm);
      -webkit-backdrop-filter:var(--glass-blur-sm);
      border:1px solid rgba(255,255,255,.6);
      border-radius:var(--radius-md);
      box-shadow:var(--glass-edge);
      margin-bottom:14px;
    }

    .ib-step{
      display:flex;
      align-items:center;
      gap:12px;
      font-size:.88rem;
      color:var(--text-2);
      line-height:1.4;
    }
    .ib-step strong{color:var(--text);font-weight:700}

    .ib-num{
      width:26px;
      height:26px;
      border-radius:50%;
      background:var(--primary);
      color:#fff;
      font-weight:800;
      font-size:.78rem;
      display:grid;
      place-items:center;
      flex-shrink:0;
    }

    .ib-share-icon{
      width:16px;
      height:16px;
      fill:var(--primary);
      vertical-align:middle;
      margin:0 2px;
    }

    .ib-cta{
      width:100%;
      padding:14px 16px;
      border-radius:14px;
      border:0;
      background:linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
      color:#fff;
      font:inherit;
      font-weight:800;
      font-size:.95rem;
      cursor:pointer;
      box-shadow:0 8px 20px rgba(37,99,235,.32);
      transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine){
      .ib-cta:hover{
        transform:translateY(-1px);
        box-shadow:0 12px 26px rgba(37,99,235,.42);
      }
    }
    .ib-cta:active{ transform:scale(.97) }

    /* ===== PAGE TRANSITION (al cambiar tab) ===== */
    main.stack.view-anim{
      animation:viewSwitch .22s var(--ease-out);
    }
    @keyframes viewSwitch {
      0%   { opacity:.55; transform:translateY(4px) }
      100% { opacity:1;   transform:translateY(0)  }
    }

    /* Durante el tour: desactivar animaciones de view para que Driver.js posicione bien */
    body.tour-active main.stack,
    body.tour-active main.stack.view-anim{
      animation:none !important;
      transform:none !important;
      opacity:1 !important;
    }

    /* ===== BOTTOM NAV (mobile app style) ===== */
    /* Padding inferior solo para el nav. El FAB se auto-oculta al scroll. */
    body{
      padding-bottom:calc(80px + env(safe-area-inset-bottom));
    }

    .bottom-nav{
      position:fixed;
      bottom:0;
      left:0;
      right:0;
      z-index:40;
      display:grid;
      grid-template-columns:repeat(5, 1fr);
      /* === LIQUID GLASS (iOS 26) ===
         Refracción del contenido detrás con backdrop-filter agresivo (saturate +
         contrast + blur), edge highlight rim arriba, y semi-transparente para
         que el contenido detrás se vea "a través" del cristal. */
      background: var(--glass-bg, rgba(255,255,255,.55));
      backdrop-filter: var(--glass-blur-md, saturate(190%) contrast(1.06) blur(24px));
      -webkit-backdrop-filter: var(--glass-blur-md, saturate(190%) contrast(1.06) blur(24px));
      border-top: 1px solid var(--glass-border, rgba(255,255,255,.55));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 -2px 12px rgba(15,23,42,.05);
      padding:6px 4px calc(8px + env(safe-area-inset-bottom));
      /* GPU layer — elimina flicker durante scroll rápido en iOS/Android */
      transform:translateZ(0);
      -webkit-transform:translateZ(0);
      will-change:transform;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
    }

    /* En desktop: nav flotante centrada como en muchas apps */
    @media (min-width:721px){
      .bottom-nav{
        left:50%;
        right:auto;
        bottom:16px;
        transform:translateX(-50%);
        width:min(560px, calc(100% - 32px));
        border-radius:18px;
        border:1px solid var(--border);
        box-shadow:0 12px 36px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.04);
        padding:8px 8px;
      }
      body{ padding-bottom:48px; }
      /* En desktop el FAB queda más abajo (la nav no ocupa todo el ancho) */
      .fab-stack{ right:24px; bottom:24px; }
    }

    .bn-item{
      appearance:none;
      border:0;
      background:transparent;
      cursor:pointer;
      font:inherit;
      padding:8px 6px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:3px;
      color:var(--muted);
      border-radius:10px;
      transition:color .18s var(--ease-out), background .18s var(--ease-out), transform .14s var(--ease-out);
    }
    .bn-item:active{ transform:scale(.95) }

    .bn-item .material-symbols-rounded{
      font-size:24px;
      transition:transform .22s var(--ease-out);
    }

    .bn-label{
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.01em;
    }

    @media (hover: hover) and (pointer: fine){
      .bn-item:hover{
        color:var(--text);
      }
    }

    .bn-item.active{
      color:var(--text);
      font-weight:800;
    }

    .bn-item.active .material-symbols-rounded{
      transform:translateY(-2px);
    }

    .bn-item:focus{outline:none}
    .bn-item:focus-visible{
      outline:2px solid var(--text);
      outline-offset:2px;
    }

    /* ===== HOME DASHBOARD (Inicio) ===== */
    .home-dashboard{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .home-best{
      position:relative;
      overflow:hidden;
      padding:22px;
      border-radius:var(--radius-xl);
      background:linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
      color:#fff;
      box-shadow:var(--glass-edge-dark), 0 14px 36px rgba(37,99,235,.30);
      border:1px solid rgba(255,255,255,.18);
      font:inherit;
      text-align:left;
      width:100%;
      display:flex;
      flex-direction:column;
      gap:18px;
      transition:box-shadow .25s var(--ease-out), transform .18s var(--ease-out);
    }
    /* Sin efecto hover en la hero card */

    /* Brillo decorativo top-right + sombra interior bottom-left para depth */
    .home-best::before{
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(700px 280px at 100% 0%, rgba(255,255,255,.18), transparent 55%),
        radial-gradient(500px 220px at 0% 100%, rgba(0,0,0,.12), transparent 60%);
    }

    /* Header: eyebrow izquierda + chip "En vivo" derecha */
    .home-best-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    /* Cuerpo: texto a la izquierda + icono de puente grande a la derecha */
    .home-best-body{
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .home-best-text{
      display:flex;
      flex-direction:column;
      gap:6px;
      flex:1;
      min-width:0;
      text-align:left;
    }

    /* Icono de puente (Font Awesome) — grande, derecha, sin contenedor */
    .home-best-icon{
      flex-shrink:0;
      display:grid;
      place-items:center;
      color:#fff;
      filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));
    }
    .home-best-icon i,
    .home-best-icon svg{
      font-size:110px;
      line-height:1;
      width:auto;
      height:auto;
    }
    @media (max-width:560px){
      .home-best-icon i,
      .home-best-icon svg{ font-size:84px }
    }
    @media (max-width:380px){
      .home-best-icon i,
      .home-best-icon svg{ font-size:70px }
    }

    /* Footer: chip de ahorro izquierda + botón CTA derecha */
    .home-best-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    /* En móvil mantén la fila: Ahorras a la izquierda + Abrir Maps a la derecha */

    /* Chips premium con glass effect */
    .hb-chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.22);
      color:#fff;
      font-size:.78rem;
      font-weight:600;
      letter-spacing:-.005em;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .hb-chip .material-symbols-rounded{
      font-size:14px;
      color:rgba(255,255,255,.85);
    }
    .hb-chip strong{
      font-weight:800;
      color:#fff;
    }

    /* Chip "En vivo" — más distintivo (punto verde pulsando + texto crisp) */
    .hb-chip-live{
      background:rgba(16,185,129,.20);
      border-color:rgba(16,185,129,.40);
    }
    .hb-chip-dot{
      width:7px;
      height:7px;
      border-radius:999px;
      background:#34d399;
      box-shadow:0 0 0 0 rgba(52,211,153,.6);
      animation:hbDotPulse 1.8s infinite;
    }
    @keyframes hbDotPulse{
      0%   { box-shadow:0 0 0 0 rgba(52,211,153,.55) }
      70%  { box-shadow:0 0 0 8px rgba(52,211,153,0) }
      100% { box-shadow:0 0 0 0 rgba(52,211,153,0) }
    }

    /* Chip de ahorros — ícono verde menta */
    #home-best-savings .material-symbols-rounded{ color:#86efac }
    #home-best-savings.is-empty{ display:none }

    .home-best::before{
      content:'';
      position:absolute;
      inset:0;
      background:
        radial-gradient(800px 280px at 100% 0%, rgba(255,255,255,.16), transparent 60%),
        radial-gradient(600px 240px at 0% 100%, rgba(16,185,129,.18), transparent 60%);
      pointer-events:none;
    }

    .home-best:focus{outline:none}
    .home-best:focus-visible{outline:2px solid #fff;outline-offset:3px}

    .home-best > *{position:relative;z-index:1}

    .home-best-eyebrow{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(255,255,255,.78);
    }

    /* Estado vacío de la card "Mejor cruce" (sin datos / todo cerrado) */
    .home-best.is-empty{
      background:linear-gradient(135deg, #1e293b 0%, #334155 60%, #475569 100%);
      box-shadow:0 12px 32px rgba(30,41,59,.18);
      cursor:default;
    }
    .home-best.is-empty:hover{
      transform:none;
      box-shadow:0 12px 32px rgba(30,41,59,.18);
    }
    .home-best.is-empty .home-best-eyebrow{
      color:rgba(255,255,255,.6);
    }
    .home-best.is-empty .home-best-bridge{
      font-size:clamp(1.15rem, 4vw, 1.5rem);
    }
    .home-best.is-empty .home-best-meta{
      font-size:.92rem;
      line-height:1.5;
      color:rgba(255,255,255,.86);
      max-width:46ch;
    }
    .home-best.is-empty .home-best-cta{ display:none; }
    .home-best.is-empty .home-best-savings{ display:none; }

    .home-best-bridge{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:clamp(1.3rem, 4.5vw, 1.7rem);
      font-weight:800;
      letter-spacing:-.03em;
      line-height:1.15;
    }

    .home-best-time{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:clamp(2.8rem, 12vw, 3.6rem);
      font-weight:900;
      letter-spacing:-.05em;
      line-height:1;
      color:#fff;
      /* Reserva espacio para evitar CLS cuando cambia "Cargando…" → "15 min" */
      min-height:1em;
    }

    .home-best-meta{
      font-size:.85rem;
      color:rgba(255,255,255,.78);
    }

    /* CTA premium — botón blanco prominente que destaca sobre el azul */
    .home-best-cta{
      appearance:none;
      cursor:pointer;
      font:inherit;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:13px 18px;
      min-height:44px;
      border-radius:999px;
      background:rgba(255,255,255,.95);
      color:var(--primary-ink);
      border:0;
      font-size:.88rem;
      font-weight:800;
      letter-spacing:-.015em;
      box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
      transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine){
      .home-best-cta:hover{
        background:#fff;
        transform:translateY(-1px);
        box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7);
      }
    }
    .home-best-cta:active{ transform:scale(.97) }
    .home-best-cta:focus{ outline:none }
    .home-best-cta:focus-visible{
      outline:2px solid #fff;
      outline-offset:3px;
    }
    .home-best-cta .material-symbols-rounded{
      font-size:18px;
      color:var(--primary);
    }

    /* Stats row */
    .home-stats{
      position:relative;
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      padding:18px 12px;
      border-radius:var(--radius-lg);
      background:var(--glass-bg);
      backdrop-filter:var(--glass-blur);
      -webkit-backdrop-filter:var(--glass-blur);
      border:1px solid var(--glass-border);
      box-shadow:var(--glass-edge), var(--shadow-xs);
      isolation:isolate;
    }
    .home-stats::before{
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius:inherit;
      background:var(--glass-specular);
      z-index:-1;
    }

    .hs-item{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      min-width:0;
      padding:0 4px;
    }

    .hs-icon{
      width:38px;
      height:38px;
      border-radius:11px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color:#fff;
      box-shadow:0 6px 14px rgba(37,99,235,.28);
      flex-shrink:0;
    }
    .hs-icon i,
    .hs-icon .material-symbols-rounded{
      font-size:18px;
      color:#fff;
    }

    .hs-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }

    .hs-label{
      font-size:.72rem;
      font-weight:600;
      letter-spacing:-.005em;
      color:var(--muted);
    }

    .hs-value{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.25rem;
      font-weight:800;
      color:var(--text);
      letter-spacing:-.025em;
      white-space:nowrap;
      line-height:1.1;
    }

    .hs-divider{
      width:1px;
      height:44px;
      background:var(--border);
    }

    /* ==== Comparación de puentes — liquid glass ==== */
    .home-compare,
    .home-trend{
      position:relative;
      background:var(--glass-bg);
      backdrop-filter:var(--glass-blur);
      -webkit-backdrop-filter:var(--glass-blur);
      border:1px solid var(--glass-border);
      border-radius:var(--radius-lg);
      padding:20px;
      box-shadow:var(--glass-edge), var(--shadow-xs);
      isolation:isolate;
    }
    .home-compare::before,
    .home-trend::before{
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius:inherit;
      background:var(--glass-specular);
      z-index:-1;
    }

    .hc-head,
    .ht-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:14px;
      padding-bottom:12px;
      border-bottom:1px solid var(--border);
    }

    .hc-title,
    .ht-title{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-weight:700;
      font-size:.92rem;
      color:var(--text);
      letter-spacing:-.015em;
    }
    .hc-title .material-symbols-rounded,
    .ht-title .material-symbols-rounded{
      font-size:18px;
      color:var(--text-2);
    }

    .hc-list{
      display:flex;
      flex-direction:column;
      gap:2px;
    }

    .hc-row{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:4px 14px;
      padding:11px 4px;
      /* Estado natural visible — animación cubre solo el fade-in inicial */
      opacity:1;
      transform:translateY(0);
      animation:hcRowIn .32s var(--ease-out);
    }
    .hc-row:nth-child(1){ animation-delay:0ms }
    .hc-row:nth-child(2){ animation-delay:40ms }
    .hc-row:nth-child(3){ animation-delay:80ms }
    .hc-row:nth-child(4){ animation-delay:120ms }
    .hc-row:nth-child(5){ animation-delay:160ms }
    @keyframes hcRowIn{
      from{ opacity:0; transform:translateY(4px) }
      to  { opacity:1; transform:translateY(0) }
    }
    /* Durante el tour no animar las filas — quedan en su estado natural visible */
    body.tour-active .hc-row{ animation:none !important; opacity:1 !important; transform:none !important }

    .hc-row + .hc-row{
      border-top:1px solid var(--border);
    }

    .hc-row-left{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:0;
    }

    .hc-row-name{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.86rem;
      font-weight:600;
      color:var(--text);
      letter-spacing:-.01em;
    }

    .hc-row-name::before{
      content:'';
      width:7px;
      height:7px;
      border-radius:50%;
      flex-shrink:0;
      background:var(--soft);
    }
    .hc-row.good .hc-row-name::before{background:#10b981}
    .hc-row.warn .hc-row-name::before{background:#f59e0b}
    .hc-row.danger .hc-row-name::before{background:#ef4444}
    .hc-row.closed .hc-row-name::before{background:#94a3b8}

    .hc-row-bar{
      position:relative;
      height:4px;
      border-radius:999px;
      background:var(--bg-2);
      overflow:hidden;
    }

    .hc-row-bar-fill{
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      width:var(--w, 0%);
      border-radius:999px;
      transform-origin:left center;
      transform:scaleX(1);
      animation:barGrow .6s cubic-bezier(.2,.8,.2,1);
    }
    /* Durante el tour la barra queda en su estado natural (visible al 100%) */
    body.tour-active .hc-row-bar-fill{ animation:none !important; transform:scaleX(1) !important }

    .hc-row.good .hc-row-bar-fill{background:#10b981}
    .hc-row.warn .hc-row-bar-fill{background:#f59e0b}
    .hc-row.danger .hc-row-bar-fill{background:#ef4444}
    .hc-row.closed .hc-row-bar-fill{background:#cbd5e1}

    @keyframes barGrow {
      from { transform:scaleX(0) }
      to   { transform:scaleX(1) }
    }

    .hc-row-status{
      display:none;
    }

    .hc-row-time{
      display:flex;
      align-items:baseline;
      gap:3px;
      line-height:1;
      flex-shrink:0;
    }

    .hc-row-num{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.05rem;
      font-weight:800;
      letter-spacing:-.025em;
      color:var(--text);
    }
    .hc-row.closed .hc-row-num{font-size:.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

    .hc-row-unit{
      font-size:.7rem;
      font-weight:600;
      color:var(--muted);
    }
    .hc-row.closed .hc-row-unit{display:none}

    /* ==== Tendencia: card con sparkline ==== */
    .home-trend{
      position:relative;
      overflow:hidden;
      padding:18px;
      transition:background .35s ease, border-color .35s ease;
    }

    .home-trend .ht-head{display:none}

    .home-trend.is-good{
      background:linear-gradient(135deg, #ecfdf5 0%, #ffffff 60%);
      border-color:#bbf7d0;
    }
    .home-trend.is-warn{
      background:linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
      border-color:#fde68a;
    }
    .home-trend.is-bad{
      background:linear-gradient(135deg, #fef2f2 0%, #ffffff 60%);
      border-color:#fecaca;
    }
    .home-trend.is-flat{
      background:linear-gradient(135deg, #f1f5f9 0%, #ffffff 60%);
      border-color:var(--border);
    }

    .ht-row{
      display:flex;
      align-items:center;
      gap:14px;
      margin-bottom:14px;
    }

    .ht-arrow{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:var(--bg-2);
      color:var(--muted);
      flex-shrink:0;
      transition:background .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out);
    }
    .ht-arrow .material-symbols-rounded{font-size:24px}

    .ht-arrow.down{
      background:linear-gradient(135deg, #10b981, #059669);
      color:#fff;
      box-shadow:0 6px 16px rgba(16,185,129,.32);
    }
    .ht-arrow.warn{
      background:linear-gradient(135deg, #f59e0b, #d97706);
      color:#fff;
      box-shadow:0 6px 16px rgba(245,158,11,.32);
    }
    .ht-arrow.up{
      background:linear-gradient(135deg, #ef4444, #dc2626);
      color:#fff;
      box-shadow:0 6px 16px rgba(239,68,68,.32);
    }
    .ht-arrow.flat{
      background:var(--bg-2);
      color:var(--muted);
    }

    .ht-content{flex:1;min-width:0}

    .ht-headline{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1rem;
      font-weight:700;
      color:var(--text);
      letter-spacing:-.02em;
      line-height:1.3;
    }

    .ht-headline strong{font-weight:800}

    .ht-headline.good{color:var(--good-ink)}
    .ht-headline.warn{color:var(--warn-ink)}
    .ht-headline.bad{color:var(--danger-ink)}

    .ht-sub{
      margin-top:3px;
      font-size:.78rem;
      color:var(--muted);
      font-weight:500;
    }

    /* Sparkline */
    .ht-spark-wrap{
      position:relative;
      margin-top:8px;
      padding-bottom:4px;
    }

    .ht-spark{
      width:100%;
      height:60px;
      display:block;
    }

    /* Estado vacío: línea animada como skeleton */
    .home-trend.is-empty .ht-spark{
      animation:sparkLoading 1.6s ease-in-out infinite;
    }
    @keyframes sparkLoading {
      0%, 100% { opacity:.4 }
      50%      { opacity:.8 }
    }

    .ht-spark-axis{
      display:flex;
      justify-content:space-between;
      font-size:.62rem;
      font-weight:700;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-top:8px;
      padding:0 2px;
    }

    /* Brand logo image */
    .brand-logo{
      width:44px;
      height:44px;
      border-radius:14px;
      display:block;
      flex-shrink:0;
      background:linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
      object-fit:contain;
      padding:6px;
      box-shadow:0 8px 22px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.25);
    }

    @media (max-width:480px){
      .home-best{padding:18px;min-height:auto}
      .home-best-bridge{font-size:1.3rem}
      .home-best-time{font-size:2.8rem}
      .hs-label{font-size:.7rem}
      .hs-value{font-size:1.1rem}
      .home-compare,.home-trend{padding:14px}
      .hc-bar-track{height:24px}
      .hc-bar-label{font-size:.78rem}
      .hc-legend{gap:10px}
      .hc-legend-item{font-size:.7rem}
    }

    /* ===== VIEW SWITCHING ===== */

    /* INICIO: solo home dashboard */
    body[data-view="inicio"] .bridge-section-block,
    body[data-view="inicio"] .cambio-section{
      display:none;
    }

    /* CÁMARAS */
    body[data-view="camaras"] .home-dashboard,
    body[data-view="camaras"] .cambio-section,
    body[data-view="camaras"] .footer-note,
    body[data-view="camaras"] .footer-counter{
      display:none;
    }
    body[data-view="camaras"] .bridge-card .crossings-toggle-wrap,
    body[data-view="camaras"] .bridge-card .crossings-content{
      display:none;
    }

    /* CRUCES */
    body[data-view="cruces"] .home-dashboard,
    body[data-view="cruces"] .cambio-section,
    body[data-view="cruces"] .footer-note,
    body[data-view="cruces"] .footer-counter{
      display:none;
    }
    body[data-view="cruces"] .bridge-camera-wrap{display:none}
    body[data-view="cruces"] .bridge-card.crossings-open .crossings-content{grid-template-rows:1fr}
    /* En Cruces no se necesita el botón "Ver tiempos de cruce" — el contenido ya está abierto */
    body[data-view="cruces"] .crossings-toggle-wrap{display:none}
    /* Compensar el padding superior que aportaba el camera-wrap */
    body[data-view="cruces"] .crossings-content-pad{padding-top:8px}

    /* CAMBIO */
    body[data-view="cambio"] .home-dashboard,
    body[data-view="cambio"] .bridge-section-block,
    body[data-view="cambio"] .footer-note,
    body[data-view="cambio"] .footer-counter{
      display:none;
    }

    /* Bridge grid en Cámaras y Cruces: 2 columnas desde tablet en adelante */
    body[data-view="camaras"] .bridge-list,
    body[data-view="cruces"] .bridge-list{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
    /* Solo en móvil estrecho: 1 columna */
    @media (max-width:720px){
      body[data-view="camaras"] .bridge-list,
      body[data-view="cruces"] .bridge-list{
        grid-template-columns:1fr;
      }
    }

    /* ===== CAMBIO SECTION ===== */
    .cambio-section{
      margin-top:0;
    }

    .cambio-grid{
      display:grid;
      gap:14px;
    }


    .cambio-hero{
      padding:22px;
      border-radius:var(--radius-xl);
      background:linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
      color:#fff;
      box-shadow:var(--glass-edge-dark), 0 14px 36px rgba(37,99,235,.30);
      border:1px solid rgba(255,255,255,.18);
      position:relative;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    /* Header: eyebrow izquierda + chip Banxico FIX derecha (igual que Inicio) */
    .cambio-hero-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      position:relative;
      z-index:1;
    }

    /* Body: texto izquierda + icono billete derecha (igual layout que Inicio) */
    .cambio-hero-body{
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      position:relative;
      z-index:1;
    }
    .cambio-hero-text{
      display:flex;
      flex-direction:column;
      gap:4px;
      flex:1;
      min-width:0;
      text-align:left;
    }
    .cambio-hero-icon{
      flex-shrink:0;
      display:grid;
      place-items:center;
      color:#fff;
      filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));
    }
    .cambio-hero-icon i.fa-solid{
      font-size:90px;
      line-height:1;
    }
    @media (max-width:560px){
      .cambio-hero-icon i.fa-solid{ font-size:72px }
    }
    @media (max-width:380px){
      .cambio-hero-icon i.fa-solid{ font-size:60px }
    }

    .cambio-hero::before{
      content:'';
      position:absolute;
      inset:0;
      background:
        radial-gradient(800px 280px at 100% 0%, rgba(255,255,255,.16), transparent 60%),
        radial-gradient(600px 240px at 0% 100%, rgba(16,185,129,.18), transparent 60%);
      pointer-events:none;
    }

    .cambio-hero > *{position:relative;z-index:1}

    /* Icono futurista en el hero — mismo lenguaje que la home-best */
    .cambio-hero-icon{
      display:grid;
      place-items:center;
      margin-bottom:6px;
    }
    .cambio-hero-icon .material-symbols-rounded{
      font-size:42px;
      color:rgba(255,255,255,.95);
      font-variation-settings:'wght' 400, 'FILL' 0, 'GRAD' 0, 'opsz' 24;
      filter:drop-shadow(0 2px 5px rgba(0,0,0,.22));
    }

    .cambio-hero-eyebrow{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(255,255,255,.78);
    }

    .cambio-hero-rate{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:clamp(2.4rem, 9vw, 3rem);
      font-weight:900;
      letter-spacing:-.04em;
      line-height:1;
      color:#fff;
      display:flex;
      align-items:baseline;
      flex-wrap:nowrap;
      gap:6px;
    }
    .cambio-hero-unit{
      font-size:.38em;
      font-weight:700;
      opacity:.82;
    }

    .cambio-hero-eq{
      font-size:.85rem;
      font-weight:600;
      color:rgba(255,255,255,.78);
      letter-spacing:-.01em;
    }

    .cambio-hero-meta{
      font-size:.78rem;
      color:rgba(255,255,255,.68);
      line-height:1.4;
    }

    .cambio-converter{
      position:relative;
      display:grid;
      gap:10px;
      padding:22px;
      border-radius:var(--radius-lg);
      background:var(--glass-bg);
      backdrop-filter:var(--glass-blur);
      -webkit-backdrop-filter:var(--glass-blur);
      border:1px solid var(--glass-border);
      box-shadow:var(--glass-edge), var(--shadow-xs);
      isolation:isolate;
    }
    .cambio-converter::before{
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius:inherit;
      background:var(--glass-specular);
      z-index:-1;
    }

    /* Header del conversor — icono swap + título */
    .cambio-conv-head{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:6px;
    }
    /* Mismo lenguaje que el contenedor del icono en la card de tendencia (Inicio),
       pero en variante azul con icono blanco */
    .cambio-conv-icon{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color:#fff;
      box-shadow:0 6px 16px rgba(37,99,235,.32);
      flex-shrink:0;
    }
    .cambio-conv-icon .material-symbols-rounded,
    .cambio-conv-icon i.fa-solid{
      font-size:22px;
      color:#fff;
      font-variation-settings:'wght' 500;
      line-height:1;
    }
    .cambio-conv-title{ display:flex; flex-direction:column; gap:1px; min-width:0 }
    .cambio-conv-eyebrow{
      font-size:.65rem;
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .cambio-conv-name{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.05rem;
      font-weight:800;
      letter-spacing:-.02em;
      color:var(--text);
      display:flex;
      align-items:center;
      gap:8px;
    }
    .cambio-conv-name i.fa-solid{
      font-size:.85em;
      color:var(--primary);
    }

    /* Cada input: lado izquierdo (label) + input grande */
    .cambio-conv-row{
      position:relative;
      display:grid;
      grid-template-columns:auto 1fr;
      align-items:center;
      gap:14px;
      padding:16px 18px;
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.55);
      border:1px solid rgba(255,255,255,.7);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(15,23,42,.03);
      transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
    }
    .cambio-conv-row:focus-within{
      border-color:rgba(37,99,235,.45);
      background:rgba(255,255,255,.75);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 4px rgba(37,99,235,.10);
    }
    .cambio-conv-side{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:60px;
    }
    .cambio-conv-micro{
      font-size:.66rem;
      font-weight:600;
      color:var(--muted);
      letter-spacing:.01em;
    }

    /* Divisor con icono swap entre los dos inputs */
    .cambio-conv-divider{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      height:0;
      margin:-4px 0;
      pointer-events:none;
    }
    .cambio-conv-divider .material-symbols-rounded,
    .cambio-conv-divider i.fa-solid{
      position:relative;
      z-index:1;
      width:34px;
      height:34px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color:#fff;
      font-size:14px;
      line-height:1;
      box-shadow:0 4px 12px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.25);
    }

    /* Footer: tasa que se está usando ahora */
    .cambio-conv-footer{
      display:flex;
      align-items:center;
      gap:8px;
      margin-top:6px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(37,99,235,.06);
      border:1px solid rgba(37,99,235,.12);
      font-size:.78rem;
      color:var(--muted);
    }
    .cambio-conv-footer .material-symbols-rounded{
      font-size:16px;
      color:var(--primary);
      flex-shrink:0;
    }
    .cambio-conv-footer strong{
      color:var(--text);
      font-weight:800;
      font-variant-numeric:tabular-nums;
    }

    .cambio-conv-flag{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-weight:900;
      font-size:1rem;
      letter-spacing:-.01em;
      color:var(--text);
      line-height:1.1;
    }

    .cambio-conv-input{
      min-width:0;
      appearance:none;
      border:0;
      outline:none;
      background:transparent;
      font:inherit;
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.7rem;
      font-weight:800;
      letter-spacing:-.03em;
      color:var(--text);
      text-align:right;
      width:100%;
    }
    .cambio-conv-input::-webkit-outer-spin-button,
    .cambio-conv-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
    .cambio-conv-input{-moz-appearance:textfield}
    .cambio-conv-input::placeholder{color:var(--soft)}

    .cambio-bs{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }

    /* ===== COMPRA / VENTA — gradiente premium centrado ===== */
    .cambio-bs-card{
      position:relative;
      overflow:hidden;
      padding:22px 18px;
      border-radius:18px;
      border:0;
      color:#fff;
      isolation:isolate;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:6px;
      transition:transform .18s ease, box-shadow .2s ease;
    }
    .cambio-bs-card::after{
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:
        radial-gradient(500px 240px at 100% 0%, rgba(255,255,255,.14), transparent 60%),
        radial-gradient(440px 240px at 0% 100%, rgba(0,0,0,.10), transparent 60%);
    }

    /* Gradiente oscuro arriba-izquierda → brillante abajo-derecha.
       Sombra única suave (estilo card azul de Inicio). */
    .cambio-bs-card.buy{
      background:linear-gradient(135deg, #064e3b 0%, #047857 55%, #10b981 100%);
      box-shadow:0 12px 32px rgba(16,185,129,.25);
    }
    .cambio-bs-card.sell{
      background:linear-gradient(135deg, #7f1d1d 0%, #9f1239 50%, #be123c 100%);
      box-shadow:0 12px 32px rgba(190,18,60,.32);
    }

    /* Sin lift al hover en compra/venta */

    .cambio-bs-label{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(255,255,255,.92);
    }

    .cambio-bs-card.buy .cambio-bs-label,
    .cambio-bs-card.sell .cambio-bs-label{
      color:rgba(255,255,255,.92);
    }
    .cambio-bs-label .material-symbols-rounded{
      font-size:38px;
      color:#fff;
      font-variation-settings:'wght' 400, 'FILL' 0, 'GRAD' 0, 'opsz' 24;
      filter:drop-shadow(0 1px 3px rgba(0,0,0,.20));
    }

    .cambio-bs-value{
      margin-top:4px;
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.8rem;
      font-weight:800;
      letter-spacing:-.03em;
      color:#fff;
      text-shadow:0 1px 2px rgba(0,0,0,.12);
    }

    .cambio-bs-note{
      font-size:.76rem;
      color:rgba(255,255,255,.85);
    }

    .cambio-banks{
      position:relative;
      padding:22px;
      border-radius:var(--radius-lg);
      background:var(--glass-bg);
      backdrop-filter:var(--glass-blur);
      -webkit-backdrop-filter:var(--glass-blur);
      border:1px solid var(--glass-border);
      box-shadow:var(--glass-edge), var(--shadow-xs);
      isolation:isolate;
    }
    .cambio-banks::before{
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius:inherit;
      background:var(--glass-specular);
      z-index:-1;
    }

    .cambio-block-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }

    .cambio-block-badge{
      display:inline-flex;
      align-items:center;
      gap:5px;
      font-size:.66rem;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--warn-ink);
      background:var(--warn-soft);
      padding:4px 10px;
      border-radius:999px;
      transition:color .25s ease, background .25s ease;
    }
    /* Cuando hay datos reales del Worker → verde con punto pulsando */
    .cambio-block-badge.is-live{
      color:var(--good-ink);
      background:var(--good-soft);
    }
    .cambio-block-badge.is-live::before{
      content:'';
      width:6px;
      height:6px;
      border-radius:999px;
      background:var(--good);
      animation:pulse 1.8s infinite;
    }

    .cambio-block-title{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.05rem;
      font-weight:800;
      letter-spacing:-.025em;
      color:var(--text);
    }

    .cambio-block-sub{
      margin-top:4px;
      font-size:.85rem;
      color:var(--muted);
      line-height:1.45;
    }

    .cambio-banks-list{
      margin-top:14px;
      display:grid;
      gap:8px;
    }

    .cambio-bank-row{
      display:grid;
      grid-template-columns:1fr auto auto;
      gap:10px;
      align-items:center;
      padding:14px 16px;
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.45);
      border:1px solid rgba(255,255,255,.55);
      box-shadow:var(--glass-edge);
    }

    .cambio-bank-name{
      font-weight:700;
      color:var(--text);
      font-size:.92rem;
      min-width:0;
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:6px;
    }
    /* Chips por banco — distinguen entre datos reales vs estimados */
    .cambio-bank-tag{
      display:inline-flex;
      align-items:center;
      gap:4px;
      font-size:.58rem;
      font-weight:800;
      letter-spacing:.06em;
      padding:2px 6px;
      border-radius:4px;
      line-height:1.2;
    }
    .cambio-bank-tag.live{
      background:var(--good-soft);
      color:var(--good-ink);
    }
    .cambio-bank-tag.live::before{
      content:'';
      width:5px;
      height:5px;
      border-radius:999px;
      background:var(--good);
      animation:pulse 1.8s infinite;
    }
    .cambio-bank-tag.est{
      background:var(--bg-2);
      color:var(--muted);
    }

    .cambio-bank-rate{
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-weight:800;
      font-size:.95rem;
      letter-spacing:-.02em;
      min-width:64px;
      text-align:right;
    }

    .cambio-bank-rate.buy{color:var(--good-ink)}
    .cambio-bank-rate.sell{color:var(--danger-ink)}

    .cambio-bank-rate-label{
      display:block;
      font-size:.62rem;
      font-weight:700;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--muted);
      margin-bottom:2px;
    }

    .cambio-disclaimer{
      display:flex;
      gap:10px;
      padding:14px 16px;
      border-radius:var(--radius-md);
      background:var(--glass-bg);
      backdrop-filter:var(--glass-blur-sm);
      -webkit-backdrop-filter:var(--glass-blur-sm);
      border:1px solid var(--glass-border);
      box-shadow:var(--glass-edge);
      font-size:.82rem;
      color:var(--muted);
      line-height:1.5;
      align-items:flex-start;
    }

    .cambio-disclaimer .material-symbols-rounded{
      font-size:18px;
      color:var(--primary);
      flex-shrink:0;
      margin-top:2px;
    }

    @media (max-width:560px){
      .cambio-bs{grid-template-columns:1fr 1fr}
      .cambio-bs-value{font-size:1.3rem}
      .cambio-bs-card{padding:14px}
      .cambio-bank-row{grid-template-columns:1fr auto auto}
      .cambio-bank-rate{font-size:.85rem;min-width:54px}
      .cambio-conv-input{font-size:1.25rem}
    }

    /* ===== FOOTER ===== */
    .footer-note{
      margin-top:18px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
    }

    .footer-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 8px 8px 16px;
      border-radius:999px;
      background:var(--glass-bg-strong);
      backdrop-filter:var(--glass-blur);
      -webkit-backdrop-filter:var(--glass-blur);
      border:1px solid var(--glass-border);
      box-shadow:var(--shadow-xs);
      color:var(--muted);
      font-size:.82rem;
      font-weight:500;
      letter-spacing:-.005em;
    }

    .footer-pill strong{
      color:var(--text);
      font-weight:700;
    }

    .footer-ig{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:30px;
      height:30px;
      border-radius:999px;
      background:var(--primary-soft);
      transition:background .18s ease, transform .18s ease;
    }

    .footer-ig:hover{
      background:var(--primary);
      transform:scale(1.05);
    }

    .footer-ig svg{
      width:16px;
      height:16px;
      fill:var(--primary);
      transition:fill .18s ease;
    }

    .footer-ig:hover svg{
      fill:#fff;
    }

    /* ===== INSTAGRAM GATE ===== */
    .ig-gate{
      position:fixed;
      inset:0;
      z-index:9999;
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:rgba(15,23,42,.55);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      animation:fadeIn .25s ease;
    }

    .ig-gate.show{display:flex}

    @keyframes fadeIn{
      from{opacity:0}
      to{opacity:1}
    }

    @keyframes slideUp{
      from{opacity:0;transform:translateY(20px) scale(.96)}
      to{opacity:1;transform:translateY(0) scale(1)}
    }

    .ig-gate-card{
      position:relative;
      width:min(100%, 440px);
      border-radius:var(--radius-xl);
      padding:32px 28px;
      background:rgba(255,255,255,.82);
      backdrop-filter:var(--glass-blur-lg);
      -webkit-backdrop-filter:var(--glass-blur-lg);
      border:1px solid rgba(255,255,255,.6);
      box-shadow:var(--glass-edge), var(--shadow-lg);
      text-align:center;
      animation:slideUp .38s var(--ease-out);
    }

    .ig-close{
      position:absolute;
      top:12px;
      right:12px;
      width:32px;
      height:32px;
      border-radius:999px;
      border:0;
      background:var(--surface-2);
      color:var(--muted);
      font-size:22px;
      line-height:1;
      cursor:pointer;
      display:grid;
      place-items:center;
      transition:background .18s var(--ease-out), color .18s var(--ease-out), transform .14s var(--ease-out);
    }
    .ig-close::after{
      content:'';
      position:absolute;
      inset:-8px;
    }
    .ig-close:active{ transform:scale(.92) }

    @media (hover: hover) and (pointer: fine){
      .ig-close:hover{
        background:var(--border);
        color:var(--text);
      }
    }

    .ig-close:focus-visible{
      outline:2px solid var(--primary);
      outline-offset:2px;
    }

    .ig-gate-icon{
      width:72px;
      height:72px;
      margin:0 auto 18px;
      border-radius:20px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
      box-shadow:0 14px 30px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.20);
    }

    .ig-gate-icon svg{
      width:34px;
      height:34px;
      fill:#fff;
    }

    .ig-gate-eyebrow{
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--primary);
    }

    .ig-gate-card h2{
      margin-top:8px;
      font-family:'Plus Jakarta Sans','Inter',sans-serif;
      font-size:1.4rem;
      font-weight:800;
      letter-spacing:-.03em;
      color:var(--text);
      line-height:1.2;
    }

    .ig-gate-card p{
      margin-top:10px;
      color:var(--muted);
      line-height:1.55;
      font-size:.94rem;
    }

    .ig-handle{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:14px;
      padding:8px 16px;
      border-radius:999px;
      background:rgba(255,255,255,.55);
      backdrop-filter:var(--glass-blur-sm);
      -webkit-backdrop-filter:var(--glass-blur-sm);
      border:1px solid rgba(255,255,255,.65);
      box-shadow:var(--glass-edge);
      font-size:.86rem;
      font-weight:700;
      color:var(--text);
    }

    .ig-handle .material-symbols-rounded{
      font-size:16px;
      color:var(--primary);
    }

    .ig-gate-actions{
      display:grid;
      gap:10px;
      margin-top:22px;
    }

    .ig-btn{
      appearance:none;
      text-decoration:none;
      cursor:pointer;
      min-height:50px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 16px;
      font:inherit;
      font-weight:700;
      font-size:.95rem;
      border:1px solid transparent;
      transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), opacity .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out);
    }
    .ig-btn:active{ transform:scale(.97) }

    .ig-btn-primary{
      background:linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
      color:#fff;
      text-shadow:0 1px 2px rgba(0,0,0,.12);
      box-shadow:0 10px 24px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.18);
      outline:none;
    }

    .ig-btn-primary:focus{outline:none}
    .ig-btn-primary:focus-visible{
      outline:2px solid var(--primary);
      outline-offset:3px;
    }

    @media (hover: hover) and (pointer: fine){
      .ig-btn-primary:hover{
        transform:translateY(-1px);
        box-shadow:0 14px 30px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.18);
      }
    }

    .ig-btn-secondary{
      background:var(--surface-2);
      color:var(--text);
      border-color:var(--border);
    }

    .ig-btn-secondary:not(:disabled):hover{
      background:var(--primary);
      color:#fff;
      border-color:var(--primary);
    }

    .ig-btn-secondary:disabled{
      opacity:.45;
      cursor:not-allowed;
    }

    .ig-help{
      margin-top:14px;
      font-size:.78rem;
      color:var(--soft);
      line-height:1.5;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 720px){
      .header-weather{gap:6px}
      .header-weather .weather-thermo{font-size:18px}
      .header-weather .info-pill-main{font-size:.88rem}
      .header-weather .info-pill-sub{display:none}
      .header-weather .unit-toggle{padding:2px}
      .header-weather .unit-toggle button{padding:4px 7px;font-size:.66rem}
      .topbar-inner{gap:8px;padding:10px 0}
      .brand{gap:10px}
    }

    @media (max-width: 560px){
      .app-shell{width:min(100% - 16px, var(--container))}
      .topbar-inner{width:min(100% - 16px, var(--container))}

      .brand-eyebrow{font-size:.62rem}

      .info-pill-main{font-size:.9rem}
      .info-pill-sub{font-size:.7rem}

      .stack{gap:18px;margin-top:18px}

      .bridge-list{gap:14px}
      .bridge-header{padding:18px 18px 12px}
      .bridge-camera-wrap,.crossings-toggle-wrap{padding-left:18px;padding-right:18px}
      .crossings-content-pad{padding:0 18px 18px}

      .bridge-lanes{grid-template-columns:1fr 1fr;gap:10px}

      /* Lane cards en móvil — preserva el icono grande sin contenedor */
      .lane-card{padding:18px 12px 14px; border-radius:16px; gap:6px}
      .lane-icon .material-symbols-rounded{font-size:34px}
      .lane-value{font-size:1.4rem}
      .lane-label{font-size:.74rem}

      .footer-pill{flex-wrap:wrap;justify-content:center;text-align:center}
    }



/* ============================================================================
   CHAT — Reescritura limpia (v126)
   ============================================================================
   Estructura:
     1. Tokens                  → variables del chat
     2. Vista chat              → ocultar UI base, body lock, html bg match
     3. Overlay                 → posición y altura del .chat
     4. Topbar                  → header del chat (match con .topbar del sitio)
     5. Cuerpo                  → área de mensajes + login + loading
     6. Mensajes                → burbujas, avatares, separadores día
     7. Form                    → input + botones cámara/send
     8. Modales                 → photo preview, lightbox, edit, confirm
     9. Popover                 → menú ⋯ con spring
    10. Toast                   → notificaciones flotantes
    11. SVG icons               → display correcto en flex
    12. Bottom-nav en chat      → sólido, sin transparencia
    13. Motion reduce
   ========================================================================== */

/* ============ 1. TOKENS ============ */
.chat{
  --c-primary: #2563EB;
  --c-primary-2: #3B82F6;
  --c-online: #059669;
  --c-bg: #FFFFFF;
  --c-surface: #F8FAFC;
  --c-text: #0F172A;
  --c-text-soft: #475569;
  --c-text-faint: #94A3B8;
  --c-border: #E4ECFC;
  --c-bubble-other: #F1F5F9;
  --c-bubble-mine: linear-gradient(135deg, #2563EB, #3B82F6);
  --c-danger: #DC2626;
  --c-warn: #D97706;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;
  --t-fast: 150ms;
  --t-base: 200ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34, 1.56, .42, 1);
  --font-chat: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* ============ 2. VISTA CHAT ============ */
/* Ocultar UI base */
body[data-view="chat"] .topbar,
body[data-view="chat"] .fab-stack,
body[data-view="chat"] .bottom-nav,
body[data-view="chat"] main.stack > *{ display:none !important; }

/* Body lock: position:fixed evita auto-scroll iOS al enfocar input */
body[data-view="chat"]{
  position:fixed;
  inset:0;
  width:100%;
  overflow:hidden;
  /* Background BLANCO: si el chat overlay no llega al fondo absoluto en PWA iOS
     (área del home indicator), lo que se asoma detrás es el body blanco —
     mismo color que el form arriba → CERO contraste, todo uniforme. */
  background: var(--c-bg, #FFFFFF);
  overscroll-behavior:none;
  touch-action:none;
}
body[data-view="chat"] .chat__messages{
  touch-action:pan-y;
  overscroll-behavior:contain;
}

/* HTML también blanco en vista chat — sin franja gris/blanca detrás */
html.in-chat,
html.in-chat body{
  background: var(--c-bg, #FFFFFF);
}
/* En login/loading (sin user logged) → chat overlay + body + chat__body en
   gris UNIFORME (visible vs blanco puro #FFF). Cubre toda la pantalla
   incluyendo safe-area abajo. Una vez logged → vuelve a blanco normal. */
body[data-view="chat"]:not(.chat-logged) .chat,
body[data-view="chat"]:not(.chat-logged) .chat__body,
body[data-view="chat"]:not(.chat-logged),
html.in-chat body:not(.chat-logged){
  background: #EEF2F7 !important;
}

/* ============ 3. OVERLAY ============ */
.chat{ display:none; }
body[data-view="chat"] .chat{
  display:grid;
  grid-template-rows: auto 1fr auto;
  position:fixed;
  top:0;
  left:0;
  right:0;
  /* bottom: si teclado abierto, sube; si no, va al bottom absoluto del viewport
     (con viewport-fit=cover, eso INCLUYE el área del home indicator iOS).
     Sin height: deja que el bottom decida la altura naturalmente. */
  bottom: max(var(--kb-offset, 0px), env(keyboard-inset-height, 0px));
  /* Background BLANCO igual que body — si por cualquier razón hay un gap,
     el body blanco asoma sin contraste visible. */
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-chat);
  font-size: 15px;
  line-height: 1.4;
  z-index: 60;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ 4. TOPBAR ============ */
.chat__topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  /* min-height = altura medida del .topbar normal del sitio (medida en JS,
     cached en localStorage). Garantiza que sean idénticos en todas las vistas. */
  min-height: var(--site-topbar-h, calc(env(safe-area-inset-top, 0px) + 65px));
  box-sizing: border-box;
  background: var(--c-bg);
  /* Sin border-bottom — esa línea horizontal era visualmente molesta. */
}
.chat__back{
  width:44px; height:44px;
  display:grid; place-items:center;
  background:transparent;
  border:0; border-radius: var(--r-full);
  color: var(--c-primary);
  cursor:pointer;
  transition: background var(--t-fast) var(--ease);
}
.chat__back:hover{ background: var(--c-surface); }
.chat__back:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }
.chat__title{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:10px;
}
.chat__title-icon{
  width:40px; height:40px; border-radius: var(--r-full);
  background: var(--c-primary);
  color:#fff;
  display:grid; place-items:center;
  flex-shrink:0;
}
.chat__title-text{ display:flex; flex-direction:column; min-width:0; }
.chat__title-text strong{
  font-size:1rem; font-weight:700; color: var(--c-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat__online{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600;
  color: var(--c-online);
  white-space:nowrap;
  min-height: 14px; /* evita layout shift al cambiar a "escribiendo" */
}
.chat__online.is-typing{ color: var(--c-primary); }
.chat__online-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--c-online);
  box-shadow: 0 0 0 0 rgba(5,150,105,.55);
  animation: chatOnlinePulse 1.8s ease-out infinite;
}
@keyframes chatOnlinePulse{
  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,.50); }
  70%  { box-shadow: 0 0 0 6px rgba(5,150,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}
/* === Typing indicator dots === */
.chat__typing-dots{
  display: inline-flex; gap: 3px;
  align-items: center;
}
.chat__typing-dots span{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-primary);
  animation: chatTypingDots 1.2s ease-in-out infinite;
}
.chat__typing-dots span:nth-child(2){ animation-delay: .15s; }
.chat__typing-dots span:nth-child(3){ animation-delay: .30s; }
@keyframes chatTypingDots{
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}
.chat__typing-text{
  font-weight: 600;
  font-size: .76rem;
  font-style: italic;
  letter-spacing: -.01em;
}
.chat__userbox{
  display:flex; align-items:center; gap:8px;
  font-size:.85rem;
}
.chat__avatar{
  width:36px; height:36px; border-radius:50%; object-fit:cover;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--c-primary);
  color:#fff; font-weight:700; font-size:.95rem;
  user-select:none;
}
.chat__username{ display:none; }
@media (min-width:560px){
  .chat__username{
    display:inline;
    max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-weight:600; color: var(--c-text-soft);
  }
}
.chat__signout{
  background:transparent;
  border:1px solid var(--c-border);
  color: var(--c-text-soft);
  padding:6px 12px; border-radius: var(--r-full);
  font-family: inherit;
  font-size:.78rem; font-weight:600; cursor:pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chat__signout:hover{ background: var(--c-surface); color: var(--c-text); }
.chat__signout:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }

/* ============ 5. CUERPO ============ */
.chat__body{
  position:relative;
  min-height:0;
  overflow:hidden;
  /* MISMO color que el form (c-bg blanco) — antes era c-surface gris y
     causaba una línea visible donde body y form se tocaban en todas las vistas.
     Ahora todo el chat (excepto el login state que usa el override gris) es
     uniforme blanco, sin seams horizontales. */
  background: var(--c-bg);
}

/* Loading inicial — spinner mientras Firebase Auth evalúa la sesión */
.chat__loading{
  height: 100%;
  display: grid;
  place-items: center;
}
.chat__loading[hidden]{ display: none !important; }
.chat__spinner{
  width: 32px; height: 32px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: chatSpin 0.8s linear infinite;
}
@keyframes chatSpin{ to { transform: rotate(360deg); } }

/* Login screen */
.chat__login{
  height:100%;
  padding:32px 22px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px;
}
.chat__login[hidden]{ display:none !important; }
.chat__login-icon{
  width:64px; height:64px; border-radius:50%;
  background: var(--c-primary);
  color:#fff; display:grid; place-items:center;
}
.chat__login-title{ margin:6px 0 0; font-size:1.25rem; font-weight:700; color: var(--c-text); }
.chat__login-sub{
  margin:0; max-width:42ch;
  font-size:.95rem; line-height:1.5; color: var(--c-text-soft);
}
.chat__google{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color: var(--c-text);
  border: 1px solid var(--c-border);
  padding: 12px 22px; border-radius: var(--r-full);
  font-family: inherit; font-size: .95rem; font-weight:600;
  cursor:pointer;
  min-height:44px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chat__google:hover{ background: var(--c-surface); border-color: var(--c-primary); }
.chat__google:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }
.chat__login-foot{ margin:6px 0 0; max-width:38ch; font-size:.8rem; color: var(--c-text-faint); }

/* ============ 6. MENSAJES ============ */
.chat__messages{
  list-style:none;
  margin:0; padding:14px 12px 18px;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex; flex-direction:column;
  gap:8px;
  scrollbar-width:thin;
  scrollbar-color: rgba(37,99,235,.30) transparent;
}
.chat__messages[hidden]{ display:none !important; }
.chat__messages::-webkit-scrollbar{ width:6px; }
.chat__messages::-webkit-scrollbar-thumb{
  background: rgba(37,99,235,.30); border-radius: var(--r-full);
}
.chat__messages > :first-child{ margin-top:auto; }
.chat__messages > .chat__empty:first-child{ margin:auto; }
.chat__empty{
  text-align:center; color: var(--c-text-faint);
  font-size:.92rem; padding:24px 12px; list-style:none;
}
.chat__empty--hero{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:48px 24px;
}
.chat__empty-icon{
  width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--c-surface);
  color: var(--c-primary);
  margin-bottom:6px;
}
.chat__empty-title{
  font-size:1.05rem; font-weight:600; color: var(--c-text);
}
.chat__empty-sub{
  font-size:.85rem; color: var(--c-text-faint);
  max-width:30ch;
}
.chat__empty--error{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:32px 24px;
}
.chat__retry-btn{
  padding:10px 22px; border-radius:999px;
  background: var(--c-primary); color:#fff;
  border:0; font-weight:600; font-size:.9rem;
  cursor:pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chat__retry-btn:hover{ background: var(--c-primary-dark, #1d4ed8); }
.chat__retry-btn:active{ transform: scale(.96); }

/* Mensaje individual */
.chat__msg{
  display:flex; gap:8px; align-items:flex-start;
  max-width:86%;
  list-style:none;
  position:relative; /* ancla para popover */
}
.chat__msg--mine{ align-self:flex-end; flex-direction:row-reverse; }
.chat__msg-avatar{
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:#64748B;
  color:#fff; font-weight:700; font-size:.85rem;
  user-select:none;
}
.chat__msg--mine .chat__msg-avatar{ background: var(--c-primary); }

/* Avatar wrapper (foto Google + fallback inicial coloreada) */
.chat__msg-avatar-wrap{
  position:relative;
  overflow:hidden;
}
.chat__msg-avatar-letter{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-weight:700; font-size:.85rem; color:#fff;
  user-select:none;
}
.chat__msg-avatar-img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
}

.chat__msg-body{
  background: var(--c-bubble-other);
  border-radius: var(--r-lg);
  padding: 8px 12px;
  min-width:0;
  color: var(--c-text);
}
.chat__msg--mine .chat__msg-body{
  background: var(--c-bubble-mine);
  color:#fff;
}
.chat__msg-head{
  display:flex; gap:8px; align-items:baseline;
  font-size:.74rem;
  color: var(--c-text-faint);
  margin-bottom:2px;
  width:100%;
}
/* Contraste mejorado: .92 (AA en blanco gradient azul) vs .85 anterior */
.chat__msg--mine .chat__msg-head{ color: rgba(255,255,255,.95); }
.chat__msg-name{ font-weight:700; }
.chat__msg-time{ font-variant-numeric: tabular-nums; }
.chat__msg-edited{
  opacity:.82; font-style:italic; font-size:.74rem; margin-left:2px;
}
.chat__msg--mine .chat__msg-edited{ color: rgba(255,255,255,.92); }
.chat__msg-text{
  font-size:.95rem; line-height:1.42;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
/* Imagen dentro del mensaje */
.chat__msg-img{
  display:block;
  max-width:100%; max-height:280px;
  width:auto; height:auto;
  border-radius:10px;
  margin-top:4px;
  cursor:zoom-in;
  background: rgba(15,23,42,.05);
  object-fit:cover;
}
.chat__msg-img:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }

/* Botón ⋯ de opciones (solo en mensajes propios) */
.chat__msg-menu{
  margin-left:auto;
  align-self:center;
  width:24px; height:24px;
  border:0; border-radius:50%;
  background: rgba(255,255,255,.22);
  color:#fff;
  cursor:pointer;
  display:grid; place-items:center;
  padding:0;
  transition: background var(--t-fast) var(--ease);
  flex-shrink:0;
  position:relative;
}
/* Hit area invisible 44x44 — el botón visual sigue 24x24 pero el touch target
   cumple la regla iOS de 44pt mínimo (a11y). */
.chat__msg-menu::before{
  content:""; position:absolute;
  top:50%; left:50%;
  width:44px; height:44px;
  transform:translate(-50%, -50%);
}
.chat__msg-menu:hover{ background: rgba(255,255,255,.40); }
.chat__msg-menu:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
.chat__msg-menu:active{ transform: scale(.90); }
.chat__msg:not(.chat__msg--mine) .chat__msg-menu{ display:none; }

/* Separador de día */
.chat__day{
  align-self:center;
  display:flex; align-items:center; gap:10px;
  margin:10px 4px 4px;
  font-size:.72rem; font-weight:700;
  color: var(--c-text-faint);
  text-transform:uppercase; letter-spacing:.04em;
  list-style:none;
}
.chat__day::before, .chat__day::after{
  content:""; display:block; width:28px; height:1px;
  background: var(--c-border);
}
.chat__day span{
  padding:4px 12px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--r-full);
  white-space:nowrap;
}

/* Pill "Nuevos mensajes" */
.chat__pill{
  position:absolute;
  left:50%; transform: translateX(-50%);
  bottom: 16px;
  display:inline-flex; align-items:center; gap:6px;
  background: var(--c-primary);
  color:#fff;
  font-family: inherit;
  font-size:.82rem; font-weight:700;
  padding: 8px 14px 8px 10px;
  border:0; border-radius: var(--r-full);
  cursor:pointer;
  z-index:5;
  min-height:36px;
  animation: chatPillIn 220ms var(--ease);
}
.chat__pill:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@keyframes chatPillIn{
  from{ opacity:0; transform: translateX(-50%) translateY(8px); }
  to  { opacity:1; transform: translateX(-50%) translateY(0); }
}

/* Editor inline (cuando das Editar) */
.chat__msg-editor{
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  animation: chatMsgEditorIn 220ms var(--ease-spring);
}
@keyframes chatMsgEditorIn{
  from{ opacity: 0; transform: translateY(-4px) scale(.98); }
  to  { opacity: 1; transform: translateY(0)    scale(1); }
}
.chat__msg-editor-input{
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.40);
  background: rgba(255,255,255,.18);
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  min-height: 40px;
}
.chat__msg-editor-input::placeholder{ color: rgba(255,255,255,.65); }
.chat__msg-editor-input:focus{
  border-color: #fff;
  background: rgba(255,255,255,.30);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.chat__msg-editor-actions{
  display: flex; justify-content: flex-end; gap: 6px;
}
.chat__msg-editor-btn{
  padding: 7px 14px; border-radius: 8px; border: 0;
  font-family: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; min-height: 34px;
  transition: background 120ms var(--ease), opacity 120ms var(--ease);
}
.chat__msg-editor-btn:disabled{ opacity: .5; cursor: not-allowed; }
.chat__msg-editor-btn--cancel{
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.95);
}
.chat__msg-editor-btn--cancel:hover{ background: rgba(255,255,255,.28); }
.chat__msg-editor-btn--save{
  background: #fff; color: var(--c-primary);
}
.chat__msg-editor-btn--save:hover{ background: rgba(255,255,255,.92); }
.chat__msg-editor-btn--save.is-loading{
  animation: chatSendPulse 1s ease-in-out infinite;
}

/* ============ 7. FORM ============ */
.chat__form{
  display:flex; align-items:center; gap:8px;
  padding: 8px 12px;
  min-height: 65px;
  box-sizing: border-box;
  background: var(--c-bg);
  /* Sin border-top — esa línea horizontal causaba inconsistencia visual
     en varias vistas. Si queremos separación, usar sombra sutil arriba. */
}
/* PWA standalone: controles alineados al borde inferior del form.
   Form sigue midiendo lo mismo que el topbar, pero los botones se ven pegados
   al fondo absoluto del display (gracias a position:fixed; bottom:0 del overlay). */
@media (display-mode: standalone){
  .chat__form{
    /* En PWA standalone: padding-bottom incluye safe-area-inset-bottom para
       que el FONDO BLANCO del form cubra TODA la zona del home indicator.
       Sin esto el chat overlay deja una franja vacía debajo de los iconos
       que se ve como "strip" extraño (no hay nav que la cubra). */
    align-items: center;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
}
/* Cuando el teclado abre, NO incluir safe-area (el teclado ya ocupó esa zona) */
body[data-kb-open="true"] .chat__form{
  align-items: center;
  padding: 8px 12px;
}
.chat__form[hidden]{ display:none !important; }
/* Label como contenedor para el input file: tap nativo (sin doble tap iOS) */
.chat__attach{
  width:44px; height:44px; border-radius:50%;
  border:0; cursor:pointer;
  background:transparent;
  color: var(--c-primary);
  display:grid; place-items:center;
  flex-shrink:0;
  transition: background var(--t-fast) var(--ease);
}
.chat__attach:hover{ background: var(--c-surface); }
.chat__attach:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }
.chat__attach:active{ transform: scale(.94); }
.chat__input{
  flex:1; min-width:0;
  padding: 10px 16px;
  border-radius: var(--r-full);
  border:1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  outline:none;
  min-height:44px;
  box-sizing: border-box;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chat__input::placeholder{ color: var(--c-text-faint); }
.chat__input:focus{
  border-color: var(--c-primary);
  background:#fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.chat__input:disabled{ opacity:.6; cursor:not-allowed; }
.chat__send{
  width:44px; height:44px; border-radius:50%;
  border:0; cursor:pointer;
  background: var(--c-primary);
  color:#fff;
  display:grid; place-items:center;
  flex-shrink:0;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chat__send:hover{ background: var(--c-primary-2); }
.chat__send:active{ transform: scale(.94); }
.chat__send:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }
.chat__send:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.chat__send.is-sending{ animation: chatSendPulse 1s ease-in-out infinite; }
@keyframes chatSendPulse{
  0%,100%{ transform: scale(1); }
  50%   { transform: scale(.92); }
}

/* ============ 8. MODALES ============ */
/* Photo preview (antes de enviar) */
.chat-photo-preview{
  position:fixed; inset:0;
  z-index: 200;
  background: #0F172A;
  display:grid;
  grid-template-rows: 1fr auto;
  animation: chatPhotoFadeIn 180ms var(--ease);
}
.chat-photo-preview[hidden]{ display:none !important; }
@keyframes chatPhotoFadeIn{ from{opacity:0} to{opacity:1} }
.chat-photo-preview__close{
  position:absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  width:44px; height:44px; border-radius:50%;
  background: rgba(0,0,0,.55);
  color:#fff; border:0; cursor:pointer;
  display:grid; place-items:center;
  z-index:2;
}
.chat-photo-preview__close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.chat-photo-preview__img{
  min-height:0; min-width:0;
  width:100%; height:100%; object-fit:contain;
  margin:0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}
.chat-photo-preview__form{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px;
  background: var(--c-bg);
}
.chat-photo-preview__caption{
  flex:1; min-width:0;
  padding: 12px 16px;
  border-radius: var(--r-full);
  border:1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-chat);
  font-size: 16px;
  outline:none;
  min-height:44px;
}
.chat-photo-preview__caption:focus{
  border-color: var(--c-primary);
  background:#fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.chat-photo-preview__send{
  width:44px; height:44px; border-radius:50%;
  border:0; cursor:pointer;
  background: var(--c-primary);
  color:#fff;
  display:grid; place-items:center;
  flex-shrink:0;
  transition: background var(--t-fast) var(--ease);
}
.chat-photo-preview__send:hover{ background: var(--c-primary-2); }
.chat-photo-preview__send:disabled{ opacity:.6; cursor:not-allowed; }
.chat-photo-preview__send.is-sending{ animation: chatSendPulse 1s ease-in-out infinite; }

/* Lightbox (foto ampliada) */
.chat-lightbox{
  position:fixed; inset:0;
  z-index: 210;
  background: rgba(15,23,42,.96);
  display:flex; align-items:center; justify-content:center;
  padding: env(safe-area-inset-top, 0px) 8px env(safe-area-inset-bottom, 0px);
  animation: chatPhotoFadeIn 180ms var(--ease);
  cursor: zoom-out;
  /* Override del body[data-view="chat"] touch-action:none — sin esto iOS
     no permite pinch-to-zoom sobre la foto del lightbox. */
  touch-action: pinch-zoom;
}
.chat-lightbox[hidden]{ display:none !important; }
.chat-lightbox__img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  border-radius:6px;
  touch-action: pinch-zoom;
}
.chat-lightbox__close{
  position:absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  width:44px; height:44px; border-radius:50%;
  background: rgba(0,0,0,.55);
  color:#fff; border:0; cursor:pointer;
  display:grid; place-items:center;
  z-index:2;
}
.chat-lightbox__close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Confirm dialog (Borrar mensaje) */
.chat-confirm{
  position:fixed; inset:0;
  z-index: 220;
  display:grid; place-items:center;
  padding:16px;
}
.chat-confirm__backdrop{
  position:absolute; inset:0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  animation: chatPhotoFadeIn 200ms var(--ease);
}
.chat-confirm__card{
  position:relative;
  width:100%; max-width:340px;
  background: #FFFFFF;
  border-radius:24px;
  padding: 26px 22px 18px;
  text-align:center;
  box-shadow:
    0 24px 60px rgba(15,23,42,.22),
    0 4px 14px rgba(15,23,42,.10);
  animation: chatConfirmSpring 380ms var(--ease-spring);
  transform-origin:center;
}
@keyframes chatConfirmSpring{
  0%   { opacity:0; transform: scale(.80); }
  60%  { opacity:1; transform: scale(1.04); }
  100% { opacity:1; transform: scale(1); }
}
.chat-confirm__icon{
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  color: var(--c-danger);
  display:grid; place-items:center;
  margin: 0 auto 14px;
  box-shadow: 0 6px 18px rgba(220,38,38,.15);
}
.chat-confirm__title{
  margin: 0 0 6px;
  font-size: 1.12rem; font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.chat-confirm__sub{
  margin: 0 0 22px;
  font-size: .92rem;
  color: var(--c-text-soft);
  line-height: 1.45;
  padding: 0 6px;
}
.chat-confirm__actions{ display:flex; gap:10px; }
.chat-confirm__btn{
  flex:1;
  padding: 13px 16px;
  border-radius: 14px;
  border: 0;
  font-family: var(--font-chat);
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  letter-spacing: -0.01em;
  transition: background 120ms var(--ease), transform 120ms var(--ease);
}
.chat-confirm__btn:active{ transform: scale(.96); }
.chat-confirm__btn:disabled{ opacity:.55; cursor:not-allowed; }
.chat-confirm__btn--cancel{
  background: #F1F5F9;
  color: var(--c-primary);
}
.chat-confirm__btn--cancel:hover{ background: #E2E8F0; }
.chat-confirm__btn--cancel:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }
.chat-confirm__btn--delete{
  background: #DC2626;
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
}
.chat-confirm__btn--delete:hover{ background: #B91C1C; }
.chat-confirm__btn--delete:focus-visible{ outline:2px solid #DC2626; outline-offset:2px; }
.chat-confirm__btn--delete.is-loading{
  animation: chatSendPulse 1s ease-in-out infinite;
  pointer-events: none;
}

/* ============ 9. POPOVER (⋯) ============ */
#chat-msg-popover-bg{
  position:fixed; inset:0;
  z-index:199; background:transparent;
}
.chat-menu-pop{
  position:fixed;
  z-index:200;
  min-width:168px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:14px;
  padding:5px;
  box-shadow:
    0 12px 40px rgba(15,23,42,.20),
    0 4px 12px rgba(15,23,42,.12);
  display:flex; flex-direction:column;
  gap:1px;
  animation: chatMenuPopSpring 260ms var(--ease-spring);
}
@keyframes chatMenuPopSpring{
  0%   { opacity:0; transform: scale(.82); }
  60%  { opacity:1; transform: scale(1.04); }
  100% { opacity:1; transform: scale(1); }
}
.chat-menu-pop__item{
  display:flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border:0; background:transparent;
  color: var(--c-text);
  font-family: var(--font-chat);
  font-size:.95rem; font-weight:500;
  cursor:pointer;
  border-radius:9px;
  text-align:left;
  width:100%;
  min-height:40px;
  transition: background 120ms var(--ease);
}
.chat-menu-pop__item:hover,
.chat-menu-pop__item:focus-visible{
  background: rgba(37,99,235,.10); outline:none;
}
.chat-menu-pop__item:active{ background: rgba(37,99,235,.18); }
.chat-menu-pop__item .chat-svg-icon{ color: var(--c-text-soft); }
.chat-menu-pop__item--danger{ color: var(--c-danger); }
.chat-menu-pop__item--danger .chat-svg-icon{ color: var(--c-danger); }
.chat-menu-pop__item--danger:hover,
.chat-menu-pop__item--danger:focus-visible{
  background: rgba(220,38,38,.10);
}

/* ============ 10. TOAST ============ */
.chat-toast{
  position:fixed;
  left:50%; transform: translateX(-50%) translateY(12px);
  bottom: calc(86px + env(safe-area-inset-bottom));
  background: #0F172A;
  color:#fff;
  padding: 10px 18px;
  border-radius: var(--r-full);
  font-family: var(--font-chat);
  font-size:.88rem; font-weight:500;
  z-index:80;
  opacity:0; pointer-events:none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  max-width: calc(100% - 32px);
  text-align:center;
}
.chat-toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.chat-toast[data-kind="error"]{ background: var(--c-danger); }
.chat-toast[data-kind="warn"] { background: var(--c-warn); }

/* ============ 11. SVG ICONS ============ */
.chat-svg-icon{
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ============ 12. HELPERS ============ */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ============ 13. MOTION REDUCE (GLOBAL) ============ */
/* Respeta system setting "Reducir movimiento" — a11y. Aplica a TODA la app,
   no solo al chat. Disable animations + transitions + smooth scroll. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .chat__spinner{ border-top-color: var(--c-border); }
}

/* ============ 14. SKIP LINK (a11y) ============ */
/* Permite a usuarios de teclado saltar la navegación e ir directo al contenido. */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 99999;
  background: var(--c-primary, #2563eb);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: .95rem;
}
.skip-link:focus{
  left: 8px;
}