: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:'Roboto',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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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,
    .video-wrap video.hls-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }
    .video-wrap video.hls-video{
      object-fit:cover;
      background:#0f172a;
    }

    /* Poster click-to-play sobre cada cámara.
       Fondo degradado azul UNIFORME para todas: cuando la imagen/snapshot no ha
       cargado (o falla), todas se ven igual de azul (no una negra y otra azul).
       La imagen real carga encima cuando está disponible. */
    .cam-poster{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      padding:0;
      border:0;
      cursor:pointer;
      overflow:hidden;
      background:linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #1d4ed8 100%);
      display:block;
      z-index:2;
      transition:opacity .35s var(--ease-out);
      -webkit-tap-highlight-color:transparent;
    }
    .cam-poster.is-hidden{
      opacity:0;
      pointer-events:none;
    }
    .cam-poster-img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .cam-poster-shade{
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,.40) 100%);
    }
    /* Botón "Ver en vivo" — pill de vidrio centrado */
    .cam-poster-play{
      position:absolute;
      top:50%; left:50%;
      transform:translate(-50%, -50%);
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:11px 20px 11px 18px;
      border-radius:999px;
      background:rgba(255,255,255,.16);
      backdrop-filter:saturate(160%) blur(14px);
      -webkit-backdrop-filter:saturate(160%) blur(14px);
      border:1px solid rgba(255,255,255,.55);
      color:#fff;
      font-size:.92rem;
      font-weight:700;
      letter-spacing:.01em;
      white-space:nowrap;
      box-shadow:0 6px 20px rgba(15,23,42,.30);
      transition:transform .2s var(--ease-out), background .2s var(--ease-out);
    }
    .cam-poster-play svg{ flex-shrink:0; }
    .cam-poster:hover .cam-poster-play{
      transform:translate(-50%, -50%) scale(1.04);
      background:rgba(255,255,255,.24);
    }
    .cam-poster:active .cam-poster-play{ transform:translate(-50%, -50%) scale(.96); }

    /* Toggle Cám 1 / Cám 2 — segmented control con thumb deslizante (iOS-style) */
    .cam-switch{
      position:relative;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:0;
      margin:12px auto 2px;
      background:var(--surface-2, #f1f5f9);
      padding:4px;
      border-radius:14px;
      width:min(100%, 320px);
      box-shadow:inset 0 1px 2px rgba(15,23,42,.06);
      isolation:isolate;
    }
    /* Thumb blanco que se desliza bajo el botón activo */
    .cam-switch-thumb{
      position:absolute;
      top:4px;
      left:4px;
      width:calc(50% - 4px);
      height:calc(100% - 8px);
      background:#fff;
      border-radius:11px;
      box-shadow:0 2px 8px rgba(15,23,42,.12), 0 0 0 .5px rgba(15,23,42,.04);
      transition:transform .32s cubic-bezier(.34, 1.4, .42, 1);
      z-index:0;
    }
    .cam-switch[data-active="1"] .cam-switch-thumb{ transform:translateX(100%); }
    .cam-switch-btn{
      position:relative;
      z-index:1;
      appearance:none;
      border:0;
      background:transparent;
      cursor:pointer;
      font:inherit;
      font-size:.86rem;
      font-weight:600;
      color:var(--muted, #64748b);
      padding:9px 12px;
      border-radius:11px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      transition:color .22s var(--ease-out), transform .12s var(--ease-out);
      -webkit-tap-highlight-color:transparent;
    }
    .cam-switch-btn .material-symbols-rounded{ font-size:18px; }
    .cam-switch-btn:active{ transform:scale(.97); }
    .cam-switch-btn.is-active{ color:var(--primary, #2563eb); }

    .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:'Roboto',system-ui,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:'Roboto',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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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:'Roboto',system-ui,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: 'Roboto', -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{
    /* PWA standalone: controles alineados al borde inferior. El fondo blanco
       del form (+ del overlay .chat que llega a bottom:0) cubre el home
       indicator sin inflar la barra. Compacto como el bottom-nav normal. */
    align-items: flex-end;
    padding: 4px 12px 0;
  }
}
/* 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;
}