/* ══════════════════════════════════════════════════
   LÍNEA AL DÍA v2 — Premium Dark Mobile UI
   ══════════════════════════════════════════════════ */

:root {
    --bg:          #07090f;
    --bg2:         #0c1019;
    --bg3:         #111722;
    --bg4:         #17202e;
    --surface:     #1a2233;

    --text:        #eaf0f6;
    --text2:       #94a3b8;
    --text3:       #546380;
    --text4:       #2d3a4f;

    --cyan:        #00e8ff;
    --purple:      #b44aff;
    --green:       #22d997;
    --yellow:      #fbbf24;
    --red:         #ff4d6a;
    --orange:      #fb923c;
    --blue:        #60a5fa;
    --pink:        #f472b6;

    --g1: linear-gradient(135deg,#00e8ff,#b44aff);
    --g2: linear-gradient(135deg,#22d997,#00e8ff);
    --g3: linear-gradient(135deg,#fb923c,#ff4d6a);
    --g-card: linear-gradient(170deg,rgba(0,232,255,.04) 0%,rgba(180,74,255,.02) 100%);

    --r:    16px;
    --r-sm: 12px;
    --r-xs: 8px;

    --font:  'Outfit', system-ui, -apple-system, sans-serif;
    --mono:  'JetBrains Mono', ui-monospace, monospace;
    --body:  'Inter', system-ui, sans-serif;

    --accent:      #06d6a0;
    --accent2:     #118ab2;
    --glass-b:     rgba(255,255,255,.06);
    --card:        #111722;

    --safe-b: env(safe-area-inset-bottom, 0px);
    --hdr:  60px;
    --bnav: 60px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  font-size:18px;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.5}
img,svg{display:block;max-width:100%}
button{font-family:var(--font);cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--font)}
a{color:var(--cyan);text-decoration:none}

/* ── SPLASH ─────────────────────────────── */
.splash{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-inner{text-align:center}
.splash-ring{width:72px;height:72px;margin:0 auto 1.2rem;border-radius:50%;border:3px solid var(--bg3);border-top-color:var(--cyan);border-right-color:var(--purple);animation:sRing 1s linear infinite}
@keyframes sRing{to{transform:rotate(360deg)}}
.splash-title{font-size:2.2rem;font-weight:800;letter-spacing:.12em;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.splash-title span{font-weight:400;letter-spacing:.04em;opacity:.7;margin-left:.25em}
.splash-sub{color:var(--text3);font-size:.82rem;margin-top:.4rem}
.splash-dots{display:flex;gap:6px;justify-content:center;margin-top:1.2rem}
.splash-dots i{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:sDot 1.2s ease infinite}
.splash-dots i:nth-child(2){animation-delay:.15s}
.splash-dots i:nth-child(3){animation-delay:.3s}
@keyframes sDot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}

/* ── HEADER ─────────────────────────────── */
.header{position:sticky;top:0;z-index:100;height:var(--hdr)}
.header-glass{position:absolute;inset:0;background:rgba(7,9,15,.88);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);border-bottom:1px solid rgba(255,255,255,.05)}
.header-inner{position:relative;height:100%;padding:0 16px;display:flex;align-items:center;justify-content:space-between}

.brand{display:flex;align-items:center;gap:10px}
.brand-icon svg{width:30px;height:30px}
.brand-name{font-size:1rem;font-weight:700;letter-spacing:.1em;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.brand-name em{font-style:normal;font-weight:400;opacity:.7}
.brand-region{display:block;font-size:.55rem;color:var(--text3);letter-spacing:.14em;text-transform:uppercase;margin-top:-1px}

.header-right{display:flex;align-items:center;gap:10px}
.live-badge{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:10px;background:rgba(34,217,151,.1);border:1px solid rgba(34,217,151,.2)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.live-text{font-size:.6rem;font-weight:700;color:var(--green);letter-spacing:.08em}
.header-clock{font-family:var(--mono);font-size:.75rem;color:var(--cyan);opacity:.8}
.btn-icon{padding:6px;border-radius:8px;color:var(--text3);transition:all .2s}
.btn-icon:active{transform:scale(.85);color:var(--cyan)}
.btn-icon svg{width:18px;height:18px}
.btn-icon.spin svg{animation:spin .7s ease}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── HERO DASHBOARD ─────────────────────── */
.hero{position:relative;overflow:hidden;padding:14px 16px 10px}
.hero-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,232,255,.06) 0%,rgba(180,74,255,.03) 40%,transparent 100%);pointer-events:none}
.hero-bg::after{content:'';position:absolute;top:-50%;right:-30%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(180,74,255,.08),transparent 70%);filter:blur(40px)}
.hero-content{position:relative}

.hero-headline h2{font-size:1rem;font-weight:500;color:var(--text2)}
.hero-headline .accent{font-weight:700;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-date{font-size:.7rem;color:var(--text3);margin-top:2px;font-family:var(--mono)}

/* Quick strip — horizontal scroll of big numbers */
.quick-strip{display:flex;gap:10px;margin-top:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px;scrollbar-width:none}
.quick-strip::-webkit-scrollbar{display:none}

.qs-card{flex:0 0 auto;width:140px;scroll-snap-align:start;padding:14px;border-radius:var(--r);background:var(--bg2);border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden;transition:transform .2s}
.qs-card:active{transform:scale(.97)}
.qs-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.qs-card.tj::before{background:var(--g2)}
.qs-card.tc::before{background:var(--g1)}
.qs-card.mx::before{background:var(--g3)}

.qs-city{font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.qs-city.tj{color:var(--cyan)}
.qs-city.tc{color:var(--purple)}
.qs-city.mx{color:var(--orange)}
.qs-name{font-size:.72rem;font-weight:500;color:var(--text2);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-delay{font-family:var(--mono);font-size:1.8rem;font-weight:700;line-height:1}
.qs-delay.green{color:var(--green)}
.qs-delay.yellow{color:var(--yellow)}
.qs-delay.red{color:var(--red)}
.qs-delay.closed{color:var(--text3);font-size:1rem}
.qs-label{font-size:.6rem;color:var(--text3);margin-top:2px}
.qs-lanes{font-size:.6rem;color:var(--text3);margin-top:4px;font-family:var(--mono)}
.qs-status{position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%}
.qs-status.open{background:var(--green);box-shadow:0 0 8px rgba(34,217,151,.4)}
.qs-status.closed{background:var(--red)}

/* ── CITY TABS ──────────────────────────── */
.city-tabs{display:flex;gap:6px;padding:6px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(7,9,15,.6);backdrop-filter:blur(12px)}
.city-tabs::-webkit-scrollbar{display:none}
.ctab{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;background:var(--bg3);border:1px solid rgba(255,255,255,.05);font-size:.78rem;font-weight:500;color:var(--text3);transition:all .2s;white-space:nowrap}
.ctab:active{transform:scale(.96)}
.ctab.active{background:rgba(0,232,255,.1);border-color:rgba(0,232,255,.25);color:var(--cyan)}
.ctab-icon{font-size:.7rem}
.ctab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ctab-dot.tj{background:var(--cyan)}
.ctab-dot.tc{background:var(--purple)}
.ctab-dot.mx{background:var(--orange)}

/* ── VIEW BAR ───────────────────────────── */
.view-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid rgba(255,255,255,.03)}
.view-tabs{display:flex;gap:4px}
.vtab{width:34px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg3);border:1px solid rgba(255,255,255,.04);color:var(--text3);transition:all .2s}
.vtab svg{width:16px;height:16px}
.vtab.active{background:rgba(0,232,255,.1);border-color:rgba(0,232,255,.2);color:var(--cyan)}
.vtab:active{transform:scale(.9)}
.compare-legend{display:flex;gap:12px}
.legend-item{font-size:.65rem;color:var(--text3);display:flex;align-items:center;gap:4px}
.ldot{width:8px;height:8px;border-radius:50%}
.ldot.cbp{background:var(--cyan)}
.ldot.comm{background:var(--purple)}

/* ═══ WEATHER STRIP ═══ */
.weather-strip{
    padding:8px 16px;
    border-bottom:1px solid rgba(255,255,255,.03);
}
.weather-strip.hidden{display:none!important}
.ws-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.ws-scroll::-webkit-scrollbar{display:none}

.ws-card{
    flex:0 0 auto;display:flex;align-items:center;gap:10px;
    padding:8px 14px;border-radius:12px;
    background:var(--bg2);border:1px solid rgba(255,255,255,.04);
    min-width:0;
}
.ws-icon{width:32px;height:32px;flex-shrink:0}
.ws-icon svg{width:100%;height:100%}
.ws-info{display:flex;flex-direction:column;min-width:0}
.ws-city{font-size:.65rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.ws-temp{
    font-family:var(--mono);font-size:1.15rem;font-weight:800;line-height:1.1;
    color:var(--text);
}
.ws-temp small{font-size:.6rem;font-weight:500;color:var(--text3);margin-left:2px}
.ws-detail{font-size:.58rem;color:var(--text3)}
.ws-hilo{
    display:flex;gap:6px;font-size:.58rem;font-family:var(--mono);
    margin-top:1px;
}
.ws-hi{color:var(--orange)}
.ws-lo{color:var(--cyan)}

/* ═══ LIVE COMMUNITY FEED ═══ */
.live-feed{
    padding:8px 16px 4px;
    border-bottom:1px solid rgba(255,255,255,.03);
}
.live-feed.hidden{display:none!important}
.lf-head{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:8px;
}
.lf-title{
    display:flex;align-items:center;gap:8px;
    font-size:.72rem;font-weight:600;color:var(--text2);
    text-transform:uppercase;letter-spacing:.06em;
}
.lf-pulse{
    width:7px;height:7px;border-radius:50%;
    background:var(--purple);
    animation:lfPulse 2s infinite;
}
@keyframes lfPulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(.7)}
}
.lf-more-btn{
    font-size:.65rem;color:var(--cyan);font-weight:600;
    background:none;border:none;cursor:pointer;
    padding:4px 8px;border-radius:8px;
    transition:background .15s;
}
.lf-more-btn:hover{background:rgba(0,232,255,.08)}

.lf-scroll{
    display:flex;gap:8px;overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:none;
}
.lf-scroll::-webkit-scrollbar{display:none}

.lf-card{
    flex:0 0 auto;width:210px;scroll-snap-align:start;
    padding:10px 12px;border-radius:var(--r-sm);
    background:var(--bg2);border:1px solid rgba(255,255,255,.04);
    cursor:pointer;transition:transform .12s;
    position:relative;overflow:hidden;
}
.lf-card:active{transform:scale(.97)}
.lf-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
}
.lf-card.lf-tj::before{background:var(--g2)}
.lf-card.lf-tc::before{background:var(--g1)}
.lf-card.lf-mx::before{background:var(--g3)}

.lf-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.lf-crossing{font-size:.68rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.lf-ago{font-size:.55rem;color:var(--text3);font-family:var(--mono)}

.lf-mid{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.lf-mins{
    font-family:var(--mono);font-size:1.1rem;font-weight:800;line-height:1;
}
.lf-mins.green{color:var(--green)}
.lf-mins.yellow{color:var(--yellow)}
.lf-mins.red{color:var(--red)}
.lf-lane{
    font-size:.55rem;font-weight:600;padding:2px 6px;
    border-radius:5px;background:rgba(96,165,250,.1);color:var(--blue);
}
.lf-user{font-size:.58rem;color:var(--text3)}

.lf-comment{
    font-size:.65rem;color:var(--text2);line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin-top:3px;
}

.lf-votes{
    display:flex;gap:6px;margin-top:4px;
    font-size:.55rem;color:var(--text3);font-family:var(--mono);
}
.lf-vote{display:flex;align-items:center;gap:2px}
.lf-vote.up{color:var(--green)}
.lf-vote.down{color:var(--red)}

.lf-empty{
    text-align:center;padding:12px 16px;
    font-size:.75rem;color:var(--text4);
}

/* ── MAIN CONTENT ───────────────────────── */
.main{padding:8px 16px 12px}
.view-panel{display:none}
.view-panel.active{display:block}

/* ═══ CARDS VIEW ═══ */
.cards-grid{display:flex;flex-direction:column;gap:14px}

.port-card{background:var(--bg2);border:1px solid rgba(255,255,255,.05);border-radius:var(--r);overflow:hidden;animation:cardUp .4s ease both;position:relative}
.port-card:nth-child(1){animation-delay:.03s}
.port-card:nth-child(2){animation-delay:.06s}
.port-card:nth-child(3){animation-delay:.09s}
.port-card:nth-child(4){animation-delay:.12s}
.port-card:nth-child(5){animation-delay:.15s}
.port-card:nth-child(6){animation-delay:.18s}
.port-card:nth-child(7){animation-delay:.21s}
@keyframes cardUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.card-accent{height:3px}
.card-accent.tj{background:var(--g2)}
.card-accent.tc{background:var(--g1)}
.card-accent.mx{background:var(--g3)}
.card-accent.off{background:var(--bg4);height:2px}

.card-top{padding:14px 16px 6px;display:flex;justify-content:space-between;align-items:flex-start}
.card-city{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.card-city.tj{color:var(--cyan)}
.card-city.tc{color:var(--purple)}
.card-city.mx{color:var(--orange)}
.card-crossing{font-size:1.05rem;font-weight:600;margin-top:1px}
.card-pill{display:flex;align-items:center;gap:5px;font-size:.65rem;font-weight:600;padding:3px 10px;border-radius:10px;flex-shrink:0}
.card-pill.open{background:rgba(34,217,151,.12);color:var(--green)}
.card-pill.closed{background:rgba(255,77,106,.1);color:var(--red)}
.card-pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.card-pill.open .card-pill-dot{animation:pulse 2s infinite}

.card-hours{font-size:.68rem;color:var(--text3);padding:0 16px 8px}

/* Lane rows */
.card-lanes{padding:0 12px 10px}
.lane-title{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text4);padding:6px 4px 4px;display:flex;align-items:center;gap:6px}
.lane-title svg{width:14px;height:14px;fill:var(--text4)}

.lane-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg3);border-radius:var(--r-xs);margin-bottom:5px;border:1px solid rgba(255,255,255,.03)}

.lt-badge{font-family:var(--mono);font-size:.58rem;font-weight:700;padding:3px 8px;border-radius:6px;min-width:50px;text-align:center;letter-spacing:.04em}
.lt-badge.std{background:rgba(96,165,250,.12);color:var(--blue)}
.lt-badge.sen{background:rgba(180,74,255,.12);color:var(--purple)}
.lt-badge.rdy{background:rgba(34,217,151,.12);color:var(--green)}
.lt-badge.fst{background:rgba(251,146,60,.12);color:var(--orange)}

.lane-data{flex:1;min-width:0}
.lane-delay-num{font-family:var(--mono);font-size:1.15rem;font-weight:700;line-height:1}
.lane-delay-num.green{color:var(--green)}
.lane-delay-num.yellow{color:var(--yellow)}
.lane-delay-num.red{color:var(--red)}
.lane-delay-num.off{color:var(--text4);font-size:.8rem}

.lane-comm{display:flex;align-items:center;gap:5px;margin-top:3px}
.lane-comm-val{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--purple)}
.lane-comm-label{font-size:.55rem;color:var(--text3)}
.lane-comm-count{font-size:.5rem;color:var(--text3);background:rgba(180,74,255,.08);padding:1px 5px;border-radius:6px}

.lane-lanes{font-family:var(--mono);font-size:.65rem;color:var(--text3);text-align:right;white-space:nowrap}

.card-foot{padding:6px 16px 12px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.03)}
.card-time{font-size:.62rem;color:var(--text3);font-family:var(--mono)}
.card-report{font-size:.68rem;font-weight:600;padding:5px 12px;border-radius:12px;background:rgba(180,74,255,.1);color:var(--purple);border:1px solid rgba(180,74,255,.15);transition:all .15s}
.card-report:active{transform:scale(.94);background:rgba(180,74,255,.18)}

/* ═══ COMPACT VIEW ═══ */
.compact-list{display:flex;flex-direction:column;gap:6px}
.compact-row{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg2);border:1px solid rgba(255,255,255,.04);border-radius:var(--r-sm);animation:cardUp .3s ease both}
.compact-row:nth-child(n){animation-delay:calc(.03s * var(--i,0))}
.cr-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cr-dot.tj{background:var(--cyan)}
.cr-dot.tc{background:var(--purple)}
.cr-dot.mx{background:var(--orange)}
.cr-info{flex:1;min-width:0}
.cr-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-sub{font-size:.62rem;color:var(--text3)}
.cr-delays{display:flex;gap:8px;flex-shrink:0}
.cr-delay-box{text-align:center}
.cr-delay-val{font-family:var(--mono);font-size:1.1rem;font-weight:700}
.cr-delay-val.green{color:var(--green)}
.cr-delay-val.yellow{color:var(--yellow)}
.cr-delay-val.red{color:var(--red)}
.cr-delay-val.off{color:var(--text4);font-size:.75rem}
.cr-delay-label{font-size:.5rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}

/* ═══ COMPARE VIEW ═══ */
.compare-table{width:100%;border-collapse:separate;border-spacing:0 4px}
.compare-table th{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:6px 10px;text-align:left;position:sticky;top:0;background:var(--bg)}
.compare-table td{padding:10px;background:var(--bg2);font-size:.8rem}
.compare-table tr td:first-child{border-radius:var(--r-xs) 0 0 var(--r-xs)}
.compare-table tr td:last-child{border-radius:0 var(--r-xs) var(--r-xs) 0}
.ct-name{font-weight:600;font-size:.78rem;white-space:nowrap}
.ct-val{font-family:var(--mono);font-weight:700;font-size:1rem}
.ct-val.green{color:var(--green)}
.ct-val.yellow{color:var(--yellow)}
.ct-val.red{color:var(--red)}
.ct-val.off{color:var(--text4);font-size:.75rem}
.ct-comm{font-family:var(--mono);font-weight:600;color:var(--purple);font-size:.85rem}
.ct-diff{font-size:.65rem;padding:2px 6px;border-radius:6px;font-weight:600;font-family:var(--mono)}
.ct-diff.faster{background:rgba(34,217,151,.1);color:var(--green)}
.ct-diff.slower{background:rgba(255,77,106,.1);color:var(--red)}
.ct-diff.same{background:rgba(148,163,184,.08);color:var(--text3)}

/* ═══ ADVERTISING ═══ */
.ad-section{padding:16px;border-top:1px solid rgba(255,255,255,.03);margin-bottom:calc(var(--bnav) + var(--safe-b) + 16px)}
.ad-card{background:var(--bg2);border:1px solid rgba(255,255,255,.05);border-radius:var(--r);overflow:hidden;margin-bottom:12px;position:relative}
.ad-badge{position:absolute;top:10px;right:10px;font-size:.5rem;font-weight:700;letter-spacing:.1em;padding:2px 8px;border-radius:6px;background:rgba(251,191,36,.1);color:var(--yellow);text-transform:uppercase}
.ad-featured .ad-body{padding:20px}
.ad-featured .ad-icon{font-size:2rem;margin-bottom:10px}
.ad-featured h3{font-size:1rem;font-weight:700;margin-bottom:6px}
.ad-featured p{font-size:.8rem;color:var(--text2);line-height:1.4;margin-bottom:12px}
.ad-cta{display:inline-flex;align-items:center;gap:4px;padding:8px 18px;border-radius:10px;background:var(--g1);color:var(--bg);font-size:.8rem;font-weight:600;transition:transform .15s}
.ad-cta:active{transform:scale(.96)}

.ad-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.ad-small{padding:16px}
.ad-small .ad-icon{font-size:1.5rem;margin-bottom:8px}
.ad-small h4{font-size:.85rem;font-weight:600;margin-bottom:4px}
.ad-small p{font-size:.7rem;color:var(--text3);line-height:1.3;margin-bottom:8px}
.ad-cta-sm{font-size:.7rem;font-weight:600;color:var(--cyan);transition:opacity .15s}
.ad-cta-sm:hover{opacity:.8}

.ad-banner{padding:14px 16px}
.ad-banner-inner{display:flex;align-items:center;gap:12px;padding-right:40px}
.ad-banner-text{font-size:.78rem;color:var(--text2);line-height:1.4;flex:1}
.ad-banner-text strong{color:var(--cyan)}

/* old .fab replaced by .fab-group below */

/* ═══ BOTTOM NAV ═══ */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;height:calc(var(--bnav) + var(--safe-b));padding-bottom:var(--safe-b);display:flex;align-items:center;justify-content:space-around;background:rgba(7,9,15,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,.05)}
.bnav{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:var(--text4);font-size:.58rem;font-weight:500;transition:color .2s}
.bnav svg{width:20px;height:20px;transition:transform .2s}
.bnav.active{color:var(--cyan)}
.bnav.active svg{transform:scale(1.12)}
.bnav:active svg{transform:scale(.82)}

/* ═══ MODAL ═══ */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{width:100%;max-width:480px;max-height:92vh;overflow-y:auto;background:var(--bg2);border-radius:var(--r) var(--r) 0 0;border-top:1px solid rgba(255,255,255,.06);transform:translateY(100%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-handle{width:36px;height:4px;border-radius:2px;background:var(--bg4);margin:10px auto 0}

.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 10px;border-bottom:1px solid rgba(255,255,255,.05)}
.modal-head h2{font-size:1.05rem;font-weight:700;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.modal-x{font-size:1.6rem;color:var(--text3);padding:4px;line-height:1}

.modal-form{padding:14px 20px 32px}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:.72rem;font-weight:600;color:var(--text2);margin-bottom:5px}
.fg label small{font-weight:400;color:var(--text3)}

.fg select,.input{width:100%;padding:10px 14px;background:var(--bg3);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-sm);color:var(--text);font-size:.88rem;outline:none;transition:border-color .2s;appearance:none}
.fg select{background-image:url("data:image/svg+xml,%3Csvg fill='%23546380' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
.fg select:focus,.input:focus{border-color:var(--cyan)}
textarea.input{resize:vertical;min-height:64px}

.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{cursor:pointer}
.pill input{display:none}
.pill span{display:block;padding:7px 14px;border-radius:14px;font-size:.75rem;font-weight:500;background:var(--bg3);border:1px solid rgba(255,255,255,.06);color:var(--text3);transition:all .2s}
.pill input:checked+span{background:rgba(0,232,255,.1);border-color:rgba(0,232,255,.25);color:var(--cyan)}

.time-dial{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px}
.dial-btn{width:44px;height:44px;border-radius:50%;background:var(--bg3);border:1px solid rgba(255,255,255,.06);color:var(--cyan);font-size:1.3rem;font-family:var(--mono);display:flex;align-items:center;justify-content:center;transition:all .12s}
.dial-btn:active{transform:scale(.88);background:rgba(0,232,255,.1)}
.dial-display{text-align:center}
.dial-display input{width:80px;text-align:center;font-family:var(--mono);font-size:2.4rem;font-weight:700;background:none;border:none;color:var(--text);outline:none;-moz-appearance:textfield}
.dial-display input::-webkit-outer-spin-button,.dial-display input::-webkit-inner-spin-button{-webkit-appearance:none}
.dial-display small{display:block;font-size:.65rem;color:var(--text3);margin-top:-4px}

.slider{width:100%;height:6px;border-radius:3px;appearance:none;background:var(--bg4);outline:none}
.slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--g1);border:2px solid var(--bg2);cursor:pointer}
.slider-marks{display:flex;justify-content:space-between;font-size:.55rem;color:var(--text4);margin-top:4px}

.btn-send{width:100%;padding:14px;background:var(--g1);border:none;border-radius:var(--r-sm);color:var(--bg);font-size:.92rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s}
.btn-send:active{transform:scale(.97)}
.btn-send:disabled{opacity:.45;cursor:not-allowed}
.btn-send svg{width:18px;height:18px}

/* ═══ PAGE VIEWS ═══ */
.page-view{padding:16px;padding-bottom:calc(var(--bnav) + var(--safe-b) + 40px)}
.page-view.hidden{display:none}
.pv-header{margin-bottom:16px}
.pv-header h2{font-size:1.15rem;font-weight:700;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pv-header p{font-size:.8rem;color:var(--text3);margin-top:3px}
.pv-filter{margin-bottom:16px}
.pv-filter select{width:100%;padding:10px 14px;background:var(--bg3);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-sm);color:var(--text);font-size:.82rem;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg fill='%23546380' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}

/* Community cards */
.comm-list{display:flex;flex-direction:column;gap:10px}
.comm-card{background:var(--bg2);border:1px solid rgba(255,255,255,.05);border-radius:var(--r-sm);padding:14px;animation:cardUp .3s ease both}
.cc-top{display:flex;justify-content:space-between;margin-bottom:6px}
.cc-port{font-size:.68rem;font-weight:600;color:var(--cyan)}
.cc-time{font-size:.6rem;color:var(--text3);font-family:var(--mono)}
.cc-user{font-size:.75rem;font-weight:500;margin-bottom:3px}
.cc-lane{display:inline-block;font-size:.58rem;font-weight:600;padding:2px 8px;border-radius:8px;background:rgba(96,165,250,.1);color:var(--blue);margin-bottom:6px}
.cc-delay{font-family:var(--mono);font-size:1.3rem;font-weight:700;margin-bottom:4px}
.cc-delay.green{color:var(--green)}
.cc-delay.yellow{color:var(--yellow)}
.cc-delay.red{color:var(--red)}
.cc-comment{font-size:.78rem;color:var(--text2);line-height:1.4;margin-bottom:10px}
.cc-votes{display:flex;gap:8px}
.vote-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:10px;font-size:.68rem;font-weight:600;border:1px solid rgba(255,255,255,.06);background:var(--bg3);color:var(--text3);transition:all .15s}
.vote-btn:active{transform:scale(.92)}
.vote-btn.confirm:hover{border-color:rgba(34,217,151,.25);color:var(--green)}
.vote-btn.deny:hover{border-color:rgba(255,77,106,.25);color:var(--red)}
.vote-btn svg{width:14px;height:14px}

.btn-more{display:block;width:100%;padding:12px;margin-top:12px;border-radius:var(--r-sm);background:var(--bg3);border:1px solid rgba(255,255,255,.05);color:var(--cyan);font-size:.82rem;font-weight:500;transition:all .15s}
.btn-more:active{transform:scale(.98)}
.btn-more.hidden{display:none}

/* ═══ TIPS VIEW ═══ */
.tips-grid{display:grid;grid-template-columns:1fr;gap:12px}
.tip-card{background:var(--bg2);border:1px solid rgba(255,255,255,.05);border-radius:var(--r);padding:18px;position:relative;overflow:hidden;animation:cardUp .35s ease both}
.tip-card:nth-child(n){animation-delay:calc(.04s * var(--i,0))}
.tip-num{font-family:var(--mono);font-size:2.8rem;font-weight:800;position:absolute;top:8px;right:14px;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.12}
.tip-card h3{font-size:.95rem;font-weight:700;margin-bottom:6px}
.tip-card p{font-size:.8rem;color:var(--text2);line-height:1.5}

/* ═══ INFO VIEW ═══ */
.info-shortcuts{
    display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
    margin-bottom:16px;padding:0;
}
.info-shortcut{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:14px 8px;border-radius:var(--r);
    background:var(--bg2);border:1px solid rgba(255,255,255,.05);
    color:var(--text2);font-size:.72rem;font-weight:600;
    cursor:pointer;transition:all .15s;
    text-decoration:none;text-align:center;
}
.info-shortcut:active{transform:scale(.95)}
.info-shortcut:hover{border-color:rgba(0,232,255,.15);color:var(--cyan)}
.info-shortcut svg{width:22px;height:22px;fill:var(--cyan)}
button.info-shortcut{font-family:inherit;width:100%}

/* Legal: términos y privacidad (Info) */
.info-legal h3{margin-bottom:6px}
.legal-intro{
    font-size:.8rem;color:var(--text3);line-height:1.55;margin-bottom:14px;
}
.legal-details{
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-sm);
    margin-bottom:10px;
    background:var(--bg3);
    overflow:hidden;
}
.legal-details summary{
    padding:14px 16px;
    font-weight:700;
    font-size:.86rem;
    color:var(--text);
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.legal-details summary::-webkit-details-marker{display:none}
.legal-details summary::after{
    content:'+';
    font-size:1.15rem;
    font-weight:500;
    color:var(--cyan);
    flex-shrink:0;
    line-height:1;
}
.legal-details[open] summary::after{content:'\2212'}
.legal-details[open] summary{
    border-bottom:1px solid rgba(255,255,255,.06);
}
.legal-body{
    padding:16px 16px 18px;
    font-size:.8rem;
    color:var(--text2);
    line-height:1.58;
    max-height:min(70vh,520px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.legal-body h4{
    font-size:.86rem;
    font-weight:700;
    color:var(--text);
    margin:14px 0 8px;
}
.legal-body h4:first-child{margin-top:0}
.legal-body p{margin:0 0 10px}
.legal-body ul{
    margin:6px 0 12px;
    padding-left:1.15rem;
}
.legal-body li{margin:6px 0}

.info-blocks{display:flex;flex-direction:column;gap:14px}
.info-block{background:var(--bg2);border:1px solid rgba(255,255,255,.05);border-radius:var(--r);padding:20px}
.info-block h3{font-size:.95rem;font-weight:700;margin-bottom:10px}
.info-block p{font-size:.82rem;color:var(--text2);line-height:1.5}

.src-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.src-box{padding:14px;border-radius:var(--r-sm);text-align:center;border:1px solid rgba(255,255,255,.05)}
.src-box.official{background:rgba(0,232,255,.04)}
.src-box.community{background:rgba(180,74,255,.04)}
.src-box svg{width:26px;height:26px;margin:0 auto 8px}
.src-box.official svg{fill:var(--cyan)}
.src-box.community svg{fill:var(--purple)}
.src-box h4{font-size:.8rem;margin-bottom:4px}
.src-box p{font-size:.68rem;color:var(--text3)}

.garitas-ul{list-style:none}
.garitas-ul li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:.82rem;display:flex;align-items:center;gap:8px}
.gdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.gdot.tj{background:var(--cyan)}
.gdot.tc{background:var(--purple)}
.gdot.mx{background:var(--orange)}

.lane-info-grid{display:flex;flex-direction:column;gap:8px}
.lane-info-grid div{display:flex;align-items:center;gap:8px;font-size:.82rem}
.lbadge{font-family:var(--mono);font-size:.58rem;font-weight:700;padding:3px 8px;border-radius:6px}
.lbadge.std{background:rgba(96,165,250,.12);color:var(--blue)}
.lbadge.sen{background:rgba(180,74,255,.12);color:var(--purple)}
.lbadge.rdy{background:rgba(34,217,151,.12);color:var(--green)}

/* ═══ TOAST ═══ */
.toast{position:fixed;top:calc(var(--hdr) + 8px);left:50%;transform:translateX(-50%) translateY(-120%);z-index:300;padding:10px 20px;border-radius:12px;font-size:.82rem;font-weight:500;background:var(--bg2);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 24px rgba(0,0,0,.4);white-space:nowrap;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(34,217,151,.25);color:var(--green)}
.toast.error{border-color:rgba(255,77,106,.25);color:var(--red)}

/* ═══ STATS VIEW ═══ */
.stats-consult{background:var(--bg2);border:1px solid rgba(255,255,255,.05);border-radius:var(--r);padding:18px;margin-bottom:14px}
.sc-title{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.sc-title svg{fill:var(--cyan);flex-shrink:0}
.sc-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.sc-select{padding:9px 12px;background:var(--bg3);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-xs);color:var(--text);font-family:var(--font);font-size:.78rem;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg fill='%23546380' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;padding-right:28px}
.sc-select.sm{width:auto;min-width:140px}
.sc-select:focus{border-color:var(--cyan)}
.btn-consult{width:100%;padding:12px;background:var(--g1);border:none;border-radius:var(--r-sm);color:var(--bg);font-size:.88rem;font-weight:700;cursor:pointer;transition:transform .12s;font-family:var(--font)}
.btn-consult:active{transform:scale(.97)}

.consult-result{margin-top:16px;animation:cardUp .35s ease both}
.cr-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.05)}
.cr-header-titles{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.cr-port-name{font-size:.85rem;font-weight:600;color:var(--cyan)}
.cr-when{font-size:.72rem;color:var(--text3);line-height:1.35}
.cr-mode-badge{
  font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  padding:6px 10px;border-radius:8px;white-space:nowrap;align-self:flex-start;
}
.cr-mode-snapshot{background:rgba(180,74,255,.14);color:#c4a5ff;border:1px solid rgba(180,74,255,.28)}
.cr-mode-average{background:rgba(0,232,255,.1);color:var(--cyan);border:1px solid rgba(0,232,255,.22)}
.cr-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.cr-metric{text-align:center;padding:12px 6px;background:var(--bg3);border-radius:var(--r-xs);border:1px solid rgba(255,255,255,.03)}
.cr-metric.main{background:rgba(0,232,255,.06);border-color:rgba(0,232,255,.12)}
.cr-val{font-family:var(--mono);font-size:1.3rem;font-weight:700;line-height:1;margin-bottom:4px}
.cr-metric.main .cr-val{font-size:1.6rem;color:var(--cyan)}
.cr-lbl{font-size:.55rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.cr-val.green{color:var(--green)}
.cr-val.yellow{color:var(--yellow)}
.cr-val.red{color:var(--red)}
.cr-extras{display:flex;gap:12px;flex-wrap:wrap}
.cr-extras span{font-size:.7rem;color:var(--text3);background:var(--bg3);padding:4px 10px;border-radius:8px;font-family:var(--mono)}

.stats-block{background:var(--bg2);border:1px solid rgba(255,255,255,.05);border-radius:var(--r);padding:18px;margin-bottom:14px}
.stats-block h3{font-size:.9rem;font-weight:700;margin-bottom:10px}
.sb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sb-head h3{margin-bottom:0}
.stats-note{font-size:.72rem;color:var(--text4);line-height:1.45;margin:-4px 0 10px;padding:0 2px}

/* Heatmap */
.heatmap-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent;padding-bottom:4px}
.heatmap{display:grid;grid-template-columns:42px repeat(24,1fr);gap:2px;min-width:520px}
.hm-label{font-size:.58rem;color:var(--text3);display:flex;align-items:center;font-weight:500}
.hm-hlabel{font-size:.5rem;color:var(--text4);text-align:center;font-family:var(--mono)}
.hm-cell{aspect-ratio:1;border-radius:3px;position:relative;cursor:pointer;transition:transform .12s,box-shadow .12s;min-width:14px}
.hm-cell:hover{transform:scale(1.3);z-index:2;box-shadow:0 0 8px rgba(0,0,0,.5)}
.hm-cell[title]:hover::after{content:attr(title);position:absolute;bottom:110%;left:50%;transform:translateX(-50%);font-size:.55rem;white-space:nowrap;background:var(--bg);border:1px solid rgba(255,255,255,.1);padding:3px 8px;border-radius:6px;z-index:10;color:var(--text);font-family:var(--mono);pointer-events:none}
.heat-legend{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.6rem;color:var(--text3)}
.heat-bar{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,#22d997 0%,#fbbf24 35%,#fb923c 60%,#ff4d6a 100%)}

/* Best/Worst */
.stats-bw{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.stats-block.half{margin-bottom:0}
.bw-list{display:flex;flex-direction:column;gap:4px}
.bw-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--bg3);border-radius:var(--r-xs);font-size:.75rem}
.bw-when{color:var(--text2)}
.bw-val{font-family:var(--mono);font-weight:700;font-size:.85rem}
.bw-val.green{color:var(--green)}
.bw-val.yellow{color:var(--yellow)}
.bw-val.red{color:var(--red)}

/* Trend chart (CSS bar chart) */
.trend-chart{display:flex;align-items:flex-end;gap:4px;height:140px;padding-top:10px}
.trend-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.trend-bar{width:100%;border-radius:4px 4px 0 0;transition:height .4s ease;position:relative;min-height:2px}
.trend-bar:hover{opacity:.8}
.trend-bar-val{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.5rem;color:var(--text3);white-space:nowrap}
.trend-day{font-size:.5rem;color:var(--text4);margin-top:4px;font-family:var(--mono);white-space:nowrap}

/* ── Stats: propósito + mobile ── */
.stats-purpose-card{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:14px;
  background:rgba(0,232,255,.06);border:1px solid rgba(0,232,255,.14);border-radius:14px;
}
.stats-purpose-ico{font-size:1.35rem;line-height:1;flex-shrink:0;margin-top:2px}
.stats-purpose-card p{font-size:.8rem;color:var(--text2);line-height:1.5;margin:0}
.stats-purpose-card strong{color:var(--text)}
.sc-subhint{font-size:.76rem;color:var(--text4);line-height:1.45;margin:-6px 0 12px}
.stats-note-tight{margin-top:-6px;margin-bottom:12px}
.stats-page .stats-intro{line-height:1.5;max-width:42rem}
.sc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sc-controls-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.sc-field-full{grid-column:1/-1}
.sc-field{display:flex;flex-direction:column;gap:6px;margin:0}
.sc-optional{font-weight:500;opacity:.8;font-size:.62rem;text-transform:none;letter-spacing:0}
.sc-input-date{
  min-height:48px;padding:10px 14px;border-radius:12px;width:100%;
  border:1px solid rgba(255,255,255,.08);background:var(--bg3);color:var(--text);
  font-family:var(--font);outline:none;
}
.sc-input-date:focus{border-color:var(--cyan)}
.sc-field-lbl{font-size:.7rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.sc-field-inline{flex-direction:row;align-items:center;width:100%}
.sc-field-inline .sc-select-heat{flex:1;min-width:0}
.stats-page .sc-select{
  min-height:48px;padding:12px 14px;padding-right:36px;border-radius:12px;font-size:.9rem;
  background-position:right 12px center;background-size:16px;
}
@media (max-width:559px){
  .stats-page .sc-select{font-size:16px}
  .stats-page .sc-input-date{font-size:16px}
}
.stats-page .btn-consult{
  min-height:52px;font-size:1rem;border-radius:14px;padding:14px 18px;
  box-shadow:0 4px 20px rgba(0,232,255,.15);
}
.sb-head-stats{gap:12px}
@media (min-width:560px){
  .sc-controls-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .stats-page .sc-select{min-height:44px;padding:10px 12px;padding-right:32px;font-size:.85rem}
  .stats-page .sc-input-date{min-height:44px;font-size:.88rem}
  .stats-page .btn-consult{font-size:.92rem;min-height:48px}
}
@media (max-width:520px){
  .cr-header{flex-direction:column;align-items:flex-start;gap:6px}
  .cr-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cr-metric.main{grid-column:1/-1;padding:16px 12px}
  .cr-metric.main .cr-val{font-size:1.85rem}
  .cr-lbl{font-size:.6rem}
  .stats-bw{grid-template-columns:1fr;gap:14px}
  .bw-item{padding:12px 14px;font-size:.82rem;min-height:44px}
  .trend-chart{overflow-x:auto;gap:8px;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .trend-bar-wrap{flex:0 0 40px}
  .trend-day{font-size:.62rem}
  .trend-bar-val{font-size:.58rem;top:-18px}
}
/* Vista por horas (solo pantallas estrechas) */
.heatmap-mobile-panel{
  margin-bottom:18px;padding:14px;border-radius:14px;background:var(--bg3);
  border:1px solid rgba(255,255,255,.06);
}
.hm-mobile-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.hm-mobile-title{font-size:1.02rem;font-weight:800;color:var(--cyan);letter-spacing:-.02em}
.hm-mobile-pick-wrap{display:flex;align-items:center;gap:10px;flex:1;min-width:min(100%,200px);justify-content:flex-end}
.hm-mobile-pick-lbl{font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.hm-day-select{min-width:0;flex:1;max-width:220px}
.heatmap-mobile-hours{display:flex;flex-direction:column;gap:6px}
.hm-hour-row{
  display:grid;grid-template-columns:56px 1fr 48px;align-items:center;gap:10px;
  min-height:40px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.hm-hour-row:last-child{border-bottom:none}
.hm-hr-time{font-size:.8rem;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums}
.hm-hr-track{height:14px;background:var(--bg2);border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.hm-hr-fill{height:100%;border-radius:10px;min-width:3px;transition:width .2s ease}
.hm-hr-min{font-size:.82rem;font-weight:800;font-family:var(--mono);text-align:right;color:var(--text)}
.hm-mobile-empty,.hm-mobile-scroll-hint{font-size:.78rem;color:var(--text4);line-height:1.45;text-align:center;padding:12px 8px}
.hm-mobile-scroll-hint{text-align:left;display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:10px 12px;background:rgba(0,232,255,.05);border-radius:10px;border:1px solid rgba(0,232,255,.1)}
.hm-hint-ico{flex-shrink:0;opacity:.8;font-weight:700}
.heatmap-scroll-hint{display:none;text-align:right;font-size:.68rem;font-weight:600;color:var(--cyan);margin:0 4px 6px;opacity:.9}
.heatmap-desktop-hint{display:none}
@media (min-width:641px){
  .heatmap-mobile-panel,.hm-mobile-scroll-hint,.heatmap-scroll-hint{display:none!important}
  .heatmap-desktop-hint{display:block}
}
@media (max-width:640px){
  .heatmap-scroll-hint{display:block}
  .sb-head-stats{flex-direction:column;align-items:stretch}
  .sc-field-inline .sc-select-heat{width:100%}
}
/* Mapa: más grande al tacto en móvil */
@media (max-width:640px){
  .heatmap-wrap-enhanced{
    -webkit-overflow-scrolling:touch;scroll-snap-type:inline proximity;
    padding:10px 6px 14px;margin:0 -6px;border-radius:14px;
  }
  .heatmap{
    min-width:700px;gap:4px;
    grid-template-columns:46px repeat(24,minmax(18px,1fr));
  }
  .hm-label{font-size:.65rem;font-weight:600}
  .hm-hlabel{font-size:.52rem;font-weight:600}
  .hm-cell{min-width:18px;min-height:18px;border-radius:4px}
  .heat-legend{font-size:.68rem;margin-top:12px}
  .heat-bar{height:10px}
}
.stats-pv-header h2{font-size:clamp(1.05rem,4vw,1.2rem)}

/* ═══ DEALS / OFERTAS ═══ */
.deals-filters{
    display:flex;gap:6px;padding:0 0 10px;overflow-x:auto;scrollbar-width:none;
}
.deals-filters::-webkit-scrollbar{display:none}
.deal-chip{
    flex-shrink:0;padding:7px 14px;border-radius:20px;
    background:var(--bg3);border:1px solid rgba(255,255,255,.05);
    font-size:.74rem;font-weight:500;color:var(--text3);
    cursor:pointer;transition:all .2s;white-space:nowrap;
}
.deal-chip:active{transform:scale(.96)}
.deal-chip.active{
    background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.25);color:var(--yellow);
}

.deals-city-bar{
    display:flex;gap:6px;padding:0 0 14px;overflow-x:auto;scrollbar-width:none;
}
.deals-city-bar::-webkit-scrollbar{display:none}
.deal-city-btn{
    flex-shrink:0;padding:5px 12px;border-radius:8px;
    background:var(--bg3);border:1px solid rgba(255,255,255,.04);
    font-size:.68rem;font-weight:500;color:var(--text3);
    cursor:pointer;transition:all .2s;white-space:nowrap;
}
.deal-city-btn.active{
    background:rgba(0,232,255,.08);border-color:rgba(0,232,255,.2);color:var(--cyan);
}

/* Featured deal */
.deal-featured{
    background:linear-gradient(135deg,rgba(251,191,36,.06),rgba(255,77,106,.04));
    border:1px solid rgba(251,191,36,.15);border-radius:var(--r);
    padding:20px;margin-bottom:14px;cursor:pointer;
    position:relative;overflow:hidden;transition:transform .15s;
}
.deal-featured:active{transform:scale(.99)}
.deal-featured::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,#fbbf24,#ff4d6a);
}
.df-badge{
    position:absolute;top:10px;right:12px;
    font-size:.55rem;font-weight:700;letter-spacing:.08em;
    padding:3px 10px;border-radius:8px;
    background:rgba(251,191,36,.15);color:var(--yellow);
}
.df-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.df-icon{font-size:2.2rem;flex-shrink:0}
.df-info{flex:1;min-width:0}
.df-biz{font-size:.68rem;color:var(--text3);font-weight:500}
.df-title{font-size:1rem;font-weight:700;margin:2px 0 0;line-height:1.3}
.df-discount{
    flex-shrink:0;padding:6px 12px;border-radius:10px;
    background:rgba(255,77,106,.12);color:var(--red);
    font-family:var(--mono);font-size:.82rem;font-weight:800;
    white-space:nowrap;margin-top:4px;
}
.df-desc{font-size:.8rem;color:var(--text2);line-height:1.5;margin-bottom:14px}
.df-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.df-meta{display:flex;flex-direction:column;gap:6px}
.df-city{font-size:.65rem;color:var(--text3);background:var(--bg3);padding:3px 10px;border-radius:8px;display:inline-block}
.df-coupon{
    font-size:.72rem;color:var(--yellow);cursor:pointer;
    padding:5px 12px;border-radius:8px;background:rgba(251,191,36,.08);
    border:1px dashed rgba(251,191,36,.3);display:inline-block;
    transition:background .15s;
}
.df-coupon:hover{background:rgba(251,191,36,.15)}
.df-coupon strong{font-family:var(--mono);letter-spacing:.08em}
.df-cta{
    display:inline-flex;align-items:center;gap:4px;
    padding:10px 20px;border-radius:10px;
    background:linear-gradient(135deg,#fbbf24,#f59e0b);color:var(--bg);
    font-size:.82rem;font-weight:700;flex-shrink:0;
    transition:transform .12s;text-decoration:none;
}
.df-cta:active{transform:scale(.95)}

/* Deal cards grid */
.deals-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;
}
.deal-card{
    background:var(--bg2);border:1px solid rgba(255,255,255,.05);
    border-radius:var(--r);padding:16px;cursor:pointer;
    position:relative;overflow:hidden;transition:transform .15s;
    animation:cardUp .35s ease both;display:flex;flex-direction:column;
}
.deal-card:active{transform:scale(.98)}
.deal-card:nth-child(1){animation-delay:.03s}
.deal-card:nth-child(2){animation-delay:.06s}
.deal-card:nth-child(3){animation-delay:.09s}
.deal-card:nth-child(4){animation-delay:.12s}
.deal-card:nth-child(5){animation-delay:.15s}
.deal-card:nth-child(6){animation-delay:.18s}

.dc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.dc-icon{font-size:1.8rem}
.dc-discount{
    padding:3px 8px;border-radius:8px;
    background:rgba(255,77,106,.12);color:var(--red);
    font-family:var(--mono);font-size:.68rem;font-weight:800;
    white-space:nowrap;
}
.dc-biz{font-size:.62rem;color:var(--text3);margin-bottom:2px;font-weight:500}
.dc-title{font-size:.85rem;font-weight:700;line-height:1.3;margin-bottom:6px}
.dc-desc{font-size:.72rem;color:var(--text3);line-height:1.4;margin-bottom:10px;flex:1;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.dc-coupon{
    display:flex;align-items:center;gap:6px;
    padding:6px 10px;border-radius:8px;margin-bottom:10px;
    background:rgba(251,191,36,.06);border:1px dashed rgba(251,191,36,.2);
    cursor:pointer;transition:background .15s;
}
.dc-coupon:hover{background:rgba(251,191,36,.12)}
.dc-coupon-label{font-size:.6rem;color:var(--text3)}
.dc-coupon-code{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--yellow);letter-spacing:.06em;flex:1}
.dc-coupon-copy{font-size:.55rem;color:var(--text3)}

.dc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.dc-city{font-size:.58rem;color:var(--text3);background:var(--bg3);padding:2px 8px;border-radius:6px}
.dc-cta{font-size:.68rem;font-weight:600;color:var(--cyan);text-decoration:none;transition:opacity .15s}
.dc-cta:hover{opacity:.8}

/* Empty state */
.deals-empty{text-align:center;padding:3rem 1rem}
.de-icon{font-size:3rem;margin-bottom:.8rem;opacity:.4}
.deals-empty p{color:var(--text4);font-size:.85rem}

/* CTA banner */
.deals-cta-banner{
    background:linear-gradient(135deg,rgba(0,232,255,.06),rgba(180,74,255,.04));
    border:1px solid rgba(0,232,255,.12);border-radius:var(--r);
    padding:20px;margin-top:8px;
}
.dcb-content{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.dcb-icon{font-size:1.8rem;flex-shrink:0}
.dcb-content h4{font-size:.9rem;font-weight:700;margin-bottom:4px}
.dcb-content p{font-size:.76rem;color:var(--text3);line-height:1.4}
.dcb-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 24px;border-radius:10px;border:none;cursor:pointer;
    background:var(--g1);color:var(--bg);font-size:.82rem;font-weight:700;
    font-family:inherit;text-decoration:none;transition:transform .12s;
}
.dcb-btn:active{transform:scale(.95)}

/* ═══ CURRENCY CONVERTER ═══ */
.converter-section{
    padding:0 16px calc(var(--bnav) + var(--safe-b) + 20px);margin-top:4px;
}
.conv-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px;
    background:linear-gradient(135deg,rgba(6,214,160,.08),rgba(17,138,178,.08));
    border:1px solid rgba(6,214,160,.15);
    border-radius:16px 16px 0 0;
    cursor:pointer;
}
.conv-body:not(.collapsed) ~ .conv-header,
.conv-header{border-radius:16px 16px 0 0}
.conv-body.collapsed ~ .conv-header,
.conv-header:has(+ .conv-body.collapsed){border-radius:16px}

.conv-title{display:flex;align-items:center;gap:12px}
.conv-icon{font-size:1.6rem}
.conv-title h3{font-size:.92rem;font-weight:700;margin:0}
.conv-rate-label{font-size:.7rem;color:var(--text3);margin-top:2px}
.conv-rate-label strong{color:var(--accent);font-family:var(--mono)}

.conv-toggle{
    background:none;border:none;color:var(--text3);cursor:pointer;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;transition:.3s;
}
.conv-toggle:hover{background:rgba(255,255,255,.06)}
.conv-toggle svg{width:20px;height:20px;transition:transform .3s}
.conv-toggle.flipped svg{transform:rotate(180deg)}

.conv-body{
    background:var(--card);border:1px solid var(--glass-b);
    border-top:none;border-radius:0 0 16px 16px;
    padding:16px;overflow:hidden;
    transition:max-height .3s ease,padding .3s ease,opacity .3s ease;
    max-height:600px;opacity:1;
}
.conv-body.collapsed{max-height:0;padding:0 16px;opacity:0;border:none}

.conv-direction{display:flex;gap:6px;margin-bottom:14px}
.conv-dir-btn{
    flex:1;padding:10px;border-radius:10px;
    background:var(--bg3);border:1px solid var(--glass-b);
    color:var(--text3);font-size:.76rem;font-weight:600;
    cursor:pointer;transition:.2s;
    display:flex;align-items:center;justify-content:center;gap:6px;
}
.conv-dir-btn.active{
    background:linear-gradient(135deg,rgba(6,214,160,.12),rgba(17,138,178,.12));
    border-color:var(--accent);color:var(--text);
}
.conv-flag{font-size:1.1rem}

.conv-input-wrap{
    display:flex;align-items:center;
    background:var(--bg3);border:2px solid var(--glass-b);
    border-radius:14px;padding:4px 16px;margin-bottom:16px;
    transition:.2s;
}
.conv-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(6,214,160,.1)}
.conv-currency-label{font-size:1.4rem;font-weight:800;color:var(--accent);margin-right:8px}
.conv-input{
    flex:1;background:none;border:none;outline:none;
    color:var(--text);font-family:var(--mono);font-size:1.6rem;font-weight:700;
    padding:12px 0;width:100%;
}
.conv-input::placeholder{color:var(--text4)}
.conv-currency-code{font-size:.78rem;font-weight:700;color:var(--text3);letter-spacing:.05em}
.conv-input::-webkit-inner-spin-button{display:none}

.conv-cities{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.conv-city{
    padding:12px 14px;background:var(--bg3);
    border-radius:12px;border:1px solid transparent;
    transition:.2s;
}
.conv-city:hover{border-color:var(--glass-b)}
.conv-city-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.conv-city-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.conv-city-name{font-size:.82rem;font-weight:600;flex:1}
.conv-city-rate{font-family:var(--mono);font-size:.72rem;color:var(--text3)}
.conv-city-result{font-family:var(--mono);font-size:1.1rem;font-weight:700}

.conv-result-val{color:var(--text)}
.conv-result-val.best{color:var(--accent)}
.conv-result-val small{font-size:.65rem;color:var(--text3);font-weight:500}
.conv-best-tag{
    display:inline-block;margin-left:8px;
    padding:2px 8px;border-radius:6px;
    background:rgba(6,214,160,.15);color:var(--accent);
    font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    vertical-align:middle;
}

.conv-footer{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:10px;border-top:1px solid var(--glass-b);
}
.conv-updated{font-size:.65rem;color:var(--text4);font-family:var(--mono)}
.conv-note{font-size:.6rem;color:var(--text4);font-style:italic}

/* ═══ MAP VIEW ═══ */
.map-container{position:relative;height:calc(100vh - 64px - 60px);display:flex;flex-direction:column}
.map-canvas{flex:1;z-index:1;background:#0a0e1a}

/* Toolbar */
.map-toolbar{
    position:absolute;top:12px;left:12px;z-index:1000;
    display:flex;gap:8px;
}
.map-btn{
    display:flex;align-items:center;gap:6px;
    padding:10px 16px;background:rgba(17,24,39,.92);
    border:1px solid var(--glass-b);border-radius:12px;
    color:var(--text);font-size:.78rem;font-weight:600;
    cursor:pointer;backdrop-filter:blur(12px);
    transition:.2s;box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.map-btn:hover{background:rgba(6,214,160,.15);border-color:var(--accent)}
.map-btn svg{width:18px;height:18px;fill:currentColor}

/* Custom markers */
.map-marker-custom{background:none!important;border:none!important}
.mm-pin{
    display:flex;flex-direction:column;align-items:center;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
.mm-delay{
    background:var(--mc);color:#0a0e1a;
    font-family:var(--mono);font-size:.72rem;font-weight:800;
    padding:3px 8px;border-radius:8px;white-space:nowrap;
    text-align:center;
}
.mm-dot{
    width:12px;height:12px;border-radius:50%;
    background:var(--mc);border:2px solid #0a0e1a;
    margin-top:-2px;
}

/* User marker */
.user-marker{background:none!important;border:none!important}
.um-dot{
    width:14px;height:14px;border-radius:50%;
    background:#3b82f6;border:3px solid #fff;
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);z-index:2;
    box-shadow:0 2px 8px rgba(59,130,246,.5);
}
.um-pulse{
    width:40px;height:40px;border-radius:50%;
    background:rgba(59,130,246,.2);
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);z-index:1;
    animation:umPulse 2s ease infinite;
}
@keyframes umPulse{
    0%{transform:translate(-50%,-50%) scale(.5);opacity:.8}
    100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}
}

/* Dark popup override */
.leaflet-popup-content-wrapper{
    background:rgba(15,22,41,.96)!important;
    color:var(--text)!important;border:1px solid var(--glass-b)!important;
    border-radius:14px!important;box-shadow:0 12px 40px rgba(0,0,0,.5)!important;
    backdrop-filter:blur(12px);
}
.leaflet-popup-content{margin:12px 14px!important}
.leaflet-popup-tip{background:rgba(15,22,41,.96)!important}
.leaflet-popup-close-button{color:var(--text3)!important;font-size:22px!important;top:6px!important;right:10px!important}
.leaflet-popup-close-button:hover{color:var(--text)!important}

.map-popup{padding:4px 2px;min-width:200px}
.mp-city{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:2px}
.mp-name{font-size:1rem;font-weight:700;margin-bottom:6px}
.mp-status{font-size:.72rem;padding:4px 10px;border-radius:20px;display:inline-block;margin-bottom:10px}
.mp-status.open{background:rgba(34,217,151,.12);color:var(--green)}
.mp-status.closed{background:rgba(100,116,139,.15);color:var(--text3)}

.mp-lanes{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.mp-lane{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:rgba(255,255,255,.04);border-radius:8px}
.mp-lane-type{font-size:.72rem;color:var(--text3)}
.mp-lane-val{font-family:var(--mono);font-weight:700;font-size:.85rem}

.mp-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.mp-btn{
    display:inline-flex;align-items:center;gap:5px;
    padding:8px 14px;border-radius:8px;
    font-size:.74rem;font-weight:700;cursor:pointer;
    border:none;text-decoration:none;transition:.2s;white-space:nowrap;
}
.mp-route{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a0e1a}
.mp-route:hover{opacity:.85}
.mp-gmaps{background:rgba(66,133,244,.15);color:#4285f4;border:1px solid rgba(66,133,244,.2)}
.mp-waze{background:rgba(51,181,229,.15);color:#33b5e5;border:1px solid rgba(51,181,229,.2)}

/* Route panel */
.route-panel{
    position:absolute;bottom:12px;left:12px;right:12px;z-index:1000;
    background:rgba(15,22,41,.96);border:1px solid var(--glass-b);
    border-radius:16px;padding:16px;
    backdrop-filter:blur(16px);
    box-shadow:0 -8px 32px rgba(0,0,0,.5);
    animation:slideUp .3s ease;
}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

.rp-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.rp-dest-name{font-size:1.05rem;font-weight:700}
.rp-dest-wait{font-size:.78rem;color:var(--accent);margin-top:2px}
.rp-close{background:none;border:none;color:var(--text3);font-size:1.5rem;cursor:pointer;padding:0 4px;line-height:1}
.rp-close:hover{color:var(--text)}

.rp-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.rp-stat{display:flex;align-items:center;gap:8px;padding:10px;background:rgba(255,255,255,.04);border-radius:10px}
.rp-stat svg{width:18px;height:18px;fill:var(--accent);flex-shrink:0}
.rp-stat-val{font-family:var(--mono);font-weight:700;font-size:.9rem;display:block}
.rp-stat-lbl{font-size:.62rem;color:var(--text3);display:block}

.rp-actions{display:flex;gap:8px}
.rp-nav-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:12px;border-radius:12px;font-weight:700;
    font-size:.85rem;text-decoration:none;transition:.2s;
}
.rp-nav-btn.google{
    background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;
}
.rp-nav-btn.waze{
    background:linear-gradient(135deg,#33b5e5,#00bfa5);color:#fff;
}
.rp-nav-btn.stop{
    background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
}
.rp-nav-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.rp-nav-btn svg{width:16px;height:16px;fill:currentColor}

/* Live tracking strip */
.rp-tracking{
    display:flex;align-items:center;gap:10px;
    padding:8px 12px;margin:-16px -16px 12px;
    background:linear-gradient(90deg,rgba(6,214,160,.15),rgba(6,214,160,.05));
    border-radius:16px 16px 0 0;
    border-bottom:1px solid rgba(6,214,160,.2);
}
.rp-tracking-pulse{
    width:10px;height:10px;border-radius:50%;
    background:#06d6a0;
    animation:navPulse 1.5s ease infinite;
    flex-shrink:0;
}
@keyframes navPulse{0%,100%{box-shadow:0 0 0 0 rgba(6,214,160,.6)}50%{box-shadow:0 0 0 8px rgba(6,214,160,0)}}
.rp-tracking-text{font-size:.78rem;font-weight:600;color:#06d6a0}

/* Live distance/ETA/speed */
.rp-live{
    display:grid;grid-template-columns:1fr 1fr auto;gap:8px;
    padding:10px 12px;margin-bottom:12px;
    background:linear-gradient(135deg,rgba(6,214,160,.1),rgba(59,130,246,.08));
    border-radius:12px;border:1px solid rgba(6,214,160,.15);
}
.rp-live-dist,.rp-live-eta{display:flex;align-items:center;gap:8px}
.rp-live-dist svg,.rp-live-eta svg{width:18px;height:18px;fill:#06d6a0;flex-shrink:0}
.rp-live-val{font-family:var(--mono);font-weight:800;font-size:1.1rem;display:block;color:#06d6a0}
.rp-live-lbl{font-size:.6rem;color:var(--text3);display:block;text-transform:uppercase;letter-spacing:.5px}
.rp-live-speed{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:50px;padding:4px 8px;
    background:rgba(255,255,255,.05);border-radius:10px;
}
.rp-live-speed .rp-live-val{font-size:1.3rem;line-height:1.1}
.rp-live-speed .rp-live-lbl{font-size:.55rem}

/* ═══ ALERT BELL & PANEL ═══ */
.alert-bell{position:relative}
.alert-count{
    position:absolute;top:-4px;right:-4px;
    min-width:16px;height:16px;padding:0 4px;
    background:#ef4444;color:#fff;
    font-size:.6rem;font-weight:800;line-height:16px;text-align:center;
    border-radius:50%;
    animation:alertBounce .5s ease;
}
@keyframes alertBounce{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

.alert-modal{max-width:440px}
.alert-intro{
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;margin-bottom:16px;
    background:rgba(59,130,246,.08);border-radius:12px;
    border:1px solid rgba(59,130,246,.15);
}
.alert-intro-icon{width:32px;height:32px;stroke:var(--accent);flex-shrink:0}
.alert-intro p{font-size:.82rem;color:var(--text2);line-height:1.4;margin:0}

.alert-list{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.alert-empty{
    text-align:center;padding:20px;
    color:var(--text3);font-size:.82rem;
    background:rgba(255,255,255,.02);border-radius:12px;
}

.alert-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    transition:.2s;
}
.alert-item.alert-met{
    background:rgba(6,214,160,.08);
    border-color:rgba(6,214,160,.25);
}
.alert-item-info{flex:1;min-width:0}
.alert-item-name{font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert-item-detail{font-size:.72rem;color:var(--text3);margin-top:2px}
.alert-met .alert-item-detail{color:#06d6a0}
.alert-item-del{
    background:none;border:none;cursor:pointer;
    color:var(--text3);padding:4px;margin-left:8px;
    transition:.2s;flex-shrink:0;
}
.alert-item-del:hover{color:#ef4444}
.alert-item-del svg{width:18px;height:18px}

.alert-add{
    padding:16px;border-radius:14px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
}
.alert-add h3{font-size:.9rem;margin-bottom:12px;font-weight:700}

.alert-form-row{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.alert-fg label{display:block;font-size:.72rem;color:var(--text3);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.alert-fg .input{width:100%;box-sizing:border-box}

.alert-threshold{display:flex;align-items:center;gap:8px}
.alert-threshold .input{width:80px;text-align:center;font-family:var(--mono);font-weight:700;font-size:1.1rem}
.alert-unit{color:var(--text3);font-size:.85rem;font-weight:600}

.alert-save{width:100%}

.alert-perm{
    margin-top:14px;padding:14px;border-radius:12px;
    background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);
    text-align:center;
}
.alert-perm p{font-size:.8rem;color:var(--text2);margin-bottom:10px}
.alert-perm .btn-send{width:100%;background:linear-gradient(135deg,#3b82f6,#6366f1)}

/* ═══ SMART RECOMMENDATION ═══ */
.smart-rec{
    margin:0 16px 6px;padding:14px 16px;
    background:linear-gradient(135deg,rgba(0,232,255,.06),rgba(34,217,151,.06));
    border:1px solid rgba(0,232,255,.12);border-radius:16px;
    display:none;
}
.smart-rec.active{display:block;animation:fadeIn .4s ease}
.sr-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sr-icon{width:20px;height:20px;color:var(--green)}
.sr-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--green)}
.sr-body{}
.sr-loading{font-size:.8rem;color:var(--text3);text-align:center;padding:8px}
.sr-card{display:flex;align-items:center;gap:14px}
.sr-card-main{flex:1}
.sr-crossing{font-size:.95rem;font-weight:700;color:var(--text)}
.sr-city{font-size:.68rem;color:var(--accent);text-transform:uppercase;font-weight:600;letter-spacing:.5px}
.sr-reason{font-size:.75rem;color:var(--text2);margin-top:4px;line-height:1.4}
.sr-delay{text-align:center;min-width:60px}
.sr-delay-val{font-family:var(--mono);font-size:1.8rem;font-weight:800;line-height:1}
.sr-delay-lbl{font-size:.6rem;color:var(--text3);margin-top:2px}
.sr-delay-val.green{color:var(--green)}
.sr-delay-val.yellow{color:var(--yellow)}
.sr-delay-val.red{color:var(--red)}
.sr-others{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.sr-other{
    flex-shrink:0;padding:8px 12px;border-radius:10px;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
    font-size:.72rem;text-align:center;min-width:80px;
}
.sr-other-name{font-weight:600;color:var(--text2);white-space:nowrap}
.sr-other-val{font-family:var(--mono);font-weight:700;margin-top:2px}
.sr-city-row{
    padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.sr-city-row:last-child{border-bottom:none}
.sr-city-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin-bottom:4px}
.sr-city-best{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sr-city-name{font-weight:700;font-size:.88rem;color:var(--text)}
.sr-city-hint{font-size:.7rem;color:var(--text3);margin-top:2px}

/* ═══ SHARE BAR ═══ */
.share-bar{
    display:flex;gap:8px;margin:0 16px 8px;
}
.share-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 12px;border-radius:12px;border:none;cursor:pointer;
    font-size:.78rem;font-weight:600;transition:.2s;font-family:inherit;
}
.share-btn svg{width:18px;height:18px;flex-shrink:0}
.share-btn.wa{
    background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;
}
.share-btn.wa:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,211,102,.3)}
.share-btn.native{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--text2);
}
.share-btn.native:hover{background:rgba(255,255,255,.1);color:var(--text)}

/* ═══ CROSSING TIMER ═══ */
.timer-panel{
    position:fixed;bottom:80px;left:12px;right:12px;z-index:900;
    background:rgba(12,16,25,.97);border:1px solid rgba(0,232,255,.12);
    border-radius:20px;padding:20px;
    backdrop-filter:blur(20px);
    box-shadow:0 -8px 40px rgba(0,0,0,.6);
    animation:slideUp .3s ease;
    max-width:420px;margin:0 auto;
}
.tp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.tp-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--text)}
.tp-title svg{color:var(--cyan)}
.tp-close{background:none;border:none;color:var(--text3);font-size:1.4rem;cursor:pointer;padding:0 4px}
.tp-close:hover{color:var(--text)}
.tp-select{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.tp-port-select{
    width:100%;padding:10px 12px;border-radius:10px;
    background:var(--bg3);border:1px solid rgba(255,255,255,.06);
    color:var(--text);font-size:.82rem;font-family:inherit;
}
.tp-lane-pills{display:flex;gap:6px}
.pill.sm{font-size:.7rem}
.pill.sm span{padding:6px 12px}
.tp-display{text-align:center;margin-bottom:16px}
.tp-time{
    font-family:var(--mono);font-size:2.8rem;font-weight:800;
    color:var(--text);letter-spacing:2px;line-height:1;
}
.tp-time.running{color:var(--cyan)}
.tp-time.stopped{color:var(--green)}
.tp-status{font-size:.72rem;color:var(--text3);margin-top:6px}
.tp-actions{display:flex;gap:8px;justify-content:center}
.tp-btn{
    padding:10px 24px;border-radius:12px;border:none;cursor:pointer;
    font-weight:700;font-size:.82rem;font-family:inherit;transition:.2s;
}
.tp-btn.start{background:var(--g2);color:#000}
.tp-btn.stop{background:var(--g3);color:#fff}
.tp-btn.reset{background:rgba(255,255,255,.06);color:var(--text2)}
.tp-btn.report{background:var(--g1);color:#000;width:100%;margin-top:8px}
.tp-btn:hover{transform:translateY(-1px)}
.tp-auto-report{margin-top:14px;padding:14px;border-radius:12px;background:rgba(0,232,255,.06);border:1px solid rgba(0,232,255,.1)}
.tp-auto-report p{font-size:.78rem;color:var(--text2);margin-bottom:8px}

/* ═══ FAB GROUP ═══ */
.fab-group{
    position:fixed;bottom:80px;right:14px;z-index:800;
    display:flex;flex-direction:column;gap:10px;align-items:flex-end;
}
.fab{
    width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(0,0,0,.3);transition:.2s;
}
.fab svg{width:24px;height:24px}
.fab-primary{background:var(--g1);color:#000}
.fab-primary:hover{transform:scale(1.1)}
.fab-secondary{
    width:44px;height:44px;
    background:rgba(15,22,41,.95);border:1px solid rgba(0,232,255,.2);color:var(--cyan);
}
.fab-secondary svg{width:20px;height:20px}
.fab-secondary:hover{transform:scale(1.1);background:rgba(0,232,255,.1)}

/* ═══ FAVORITE STAR ═══ */
.fav-btn{
    background:none;border:none;cursor:pointer;padding:2px;
    color:var(--text4);transition:.2s;position:absolute;top:8px;right:8px;
}
.fav-btn svg{width:18px;height:18px}
.fav-btn.active{color:var(--yellow)}
.fav-btn:hover{color:var(--yellow);transform:scale(1.2)}
.port-card{position:relative}
.qs-card{position:relative}
.qs-fav{
    position:absolute;top:4px;right:4px;background:none;border:none;
    cursor:pointer;color:var(--text4);padding:2px;
}
.qs-fav.active{color:var(--yellow)}
.qs-fav svg{width:14px;height:14px}

/* ═══ EMPTY ═══ */
.empty{text-align:center;padding:3rem 1rem;color:var(--text4)}
.empty svg{width:44px;height:44px;opacity:.25;margin-bottom:.8rem}

.hidden{display:none !important}

/* ═══ MÓVIL / TABLET: texto grande — legible sin lentes ═══
   Base rem alta + refuerzos. No duplicamos literal (rompería tarjetas);
   ~+30–40% vs el diseño anterior en móvil. */
@media (max-width: 768px) {
    html { font-size: 21px; }
    body { line-height: 1.55; }
    :root {
        --bnav: 70px;
        --hdr: 62px;
    }
    .bottom-nav {
        padding-top: 4px;
    }
    .bnav {
        font-size: 0.78rem;
        font-weight: 600;
        padding: 6px 2px 8px;
        gap: 4px;
        letter-spacing: 0.02em;
    }
    .bnav svg { width: 24px; height: 24px; }
    .brand-name { font-size: 1.06rem; }
    .brand-region { font-size: 0.7rem; letter-spacing: 0.1em; }
    .live-text { font-size: 0.76rem; }
    .header-clock { font-size: 0.92rem; }
    .hero-headline h2 { font-size: 1.12rem; }
    .hero-date { font-size: 0.88rem; }
    .qs-card {
        width: 158px;
        padding: 15px 14px;
    }
    .qs-city { font-size: 0.74rem; }
    .qs-name { font-size: 0.9rem; }
    .qs-label,
    .qs-lanes { font-size: 0.82rem; }
    .qs-delay { font-size: 1.72rem; }
    .ctab { font-size: 0.92rem; padding: 9px 16px; }
    .legend-item { font-size: 0.82rem; }
    .ws-city { font-size: 0.78rem; }
    .ws-detail,
    .ws-meta { font-size: 0.76rem; }
    .card-city { font-size: 0.74rem; }
    .card-crossing {
        font-size: 1.12rem;
        line-height: 1.25;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .card-pill { font-size: 0.8rem; }
    .card-hours { font-size: 0.84rem; }
    .lane-title { font-size: 0.78rem; }
    .lt-badge { font-size: 0.74rem; min-width: 54px; padding: 4px 8px; }
    .lane-delay-num { font-size: 1.22rem; }
    .lane-lanes,
    .lane-comm-label { font-size: 0.8rem; }
    .lane-comm-count { font-size: 0.68rem; }
    .card-time { font-size: 0.8rem; }
    .card-report { font-size: 0.84rem; padding: 7px 14px; }
    .lf-crossing {
        font-size: 0.84rem;
        max-width: 100%;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .lf-ago,
    .lf-user { font-size: 0.76rem; }
    .lf-comment { font-size: 0.86rem; line-height: 1.45; -webkit-line-clamp: 3; }
    .lf-mins { font-size: 1.24rem; }
    .lf-lane { font-size: 0.74rem; padding: 3px 8px; }
    .lf-votes { font-size: 0.72rem; }
    .lf-empty { font-size: 0.88rem; }
    .pv-header p { font-size: 0.98rem; line-height: 1.55; }
    .pv-header h2 { font-size: 1.32rem; }
    .pv-filter select { font-size: 1rem; padding: 13px 14px; }
    .cc-port { font-size: 0.82rem; }
    .cc-time { font-size: 0.76rem; }
    .cc-user { font-size: 0.9rem; }
    .cc-lane { font-size: 0.76rem; }
    .cc-comment { font-size: 0.94rem; line-height: 1.5; }
    .cc-delay { font-size: 1.35rem; }
    .vote-btn { font-size: 0.84rem; padding: 8px 14px; }
    .toast {
        font-size: 1rem;
        white-space: normal;
        max-width: min(94vw, 380px);
        text-align: center;
        line-height: 1.45;
        padding: 12px 18px;
    }
    .modal-head h2 { font-size: 1.2rem; }
    .fg label { font-size: 0.9rem; }
    .fg label small { font-size: 0.82rem; }
    .fg select,
    .input { font-size: 18px; padding: 14px 16px; }
    .pill span { font-size: 0.9rem; padding: 10px 18px; }
    .btn-send { font-size: 1.08rem; padding: 17px; }
    .slider-marks { font-size: 0.72rem; }
    .dial-display small { font-size: 0.76rem; }
    .deal-chip,
    .deal-city-btn { font-size: 0.9rem; padding: 9px 16px; }
    .dcb-content p,
    .dcb-content h4 { font-size: 0.96rem; }
    .dcb-btn { font-size: 0.9rem; padding: 10px 18px; }
    .dc-title { font-size: 1.02rem; }
    .dc-desc { font-size: 0.9rem; }
    .dc-coupon-copy,
    .dc-city { font-size: 0.76rem; }
    .info-block p { font-size: 0.96rem; line-height: 1.55; }
    .info-block h3 { font-size: 1.1rem; }
    .info-shortcut span { font-size: 0.82rem; }
    .stats-intro,
    .stats-purpose-card p,
    .sc-subhint { font-size: 0.96rem; line-height: 1.55; }
    .sc-field-lbl { font-size: 0.84rem; }
    .sc-title { font-size: 1.05rem; }
    .cr-lbl { font-size: 0.68rem; }
    .cr-val { font-size: 1.45rem; }
    .cr-metric.main .cr-val { font-size: 1.75rem; }
    .cr-extras span { font-size: 0.78rem; }
    .cr-mode-badge { font-size: 0.65rem; }
    .hm-mobile-title { font-size: 1.12rem; }
    .hm-hr-time,
    .hm-hr-min { font-size: 0.88rem; }
    .hm-mobile-scroll-hint,
    .hm-mobile-empty { font-size: 0.86rem; }
    .hm-label { font-size: 0.72rem; }
    .heat-legend { font-size: 0.78rem; }
    .bw-item { font-size: 0.88rem; padding: 11px 14px; }
    .trend-day { font-size: 0.68rem; }
    .trend-bar-val { font-size: 0.65rem; }
    .compare-table th { font-size: 0.76rem; padding: 8px 10px; }
    .compare-table td { font-size: 0.92rem; padding: 11px 10px; }
    .ct-name { font-size: 0.88rem; }
    .share-btn { font-size: 0.92rem; padding: 13px 16px; }
    .ad-featured p,
    .ad-featured h3,
    .ad-small p,
    .ad-small h4,
    .ad-banner-text { font-size: 0.92rem; }
    .ad-cta,
    .ad-cta-sm { font-size: 0.88rem; }
    .map-legend,
    .map-hint { font-size: 0.84rem; }
    .sr-crossing { font-size: 1.05rem; }
    .sr-city,
    .sr-reason,
    .sr-delay-lbl,
    .sr-other { font-size: 0.84rem; }
    .sr-city-label { font-size: 0.76rem; }
    .sr-city-name { font-size: 0.96rem; }
    .rp-live-speed .rp-live-lbl { font-size: 0.72rem; }
    .fab-group { bottom: calc(var(--bnav) + 24px); }
    .timer-panel { bottom: calc(var(--bnav) + 18px); }
    .tp-title { font-size: 1rem; }
    .tp-port-select,
    .tp-status,
    .tp-btn { font-size: 0.92rem; }
    .tp-auto-report p { font-size: 0.88rem; }
    .empty { font-size: 1rem; }
    .garitas-ul li { font-size: 0.92rem; }
    .lbadge { font-size: 0.72rem; }
    .hm-hlabel { font-size: 0.62rem; }
    .stats-page .sc-select,
    .stats-page .sc-input-date,
    .stats-page .btn-consult { font-size: 18px; }
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:380px){
    .deals-grid{grid-template-columns:1fr}
}
@media(min-width:480px){
    .qs-card{width:170px}
    .tips-grid{grid-template-columns:1fr 1fr}
    .deals-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:640px){
    .main,.hero-content,.ad-section,.page-view,.converter-section{max-width:580px;margin-left:auto;margin-right:auto}
    .deals-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(min-width:900px){
    .cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .main,.hero-content,.ad-section,.page-view,.converter-section{max-width:860px}
}