/* Tipografía corporativa del manual: Montserrat, familia única. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/montserrat-400-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/montserrat-500-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/montserrat-600-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../vendor/fonts/montserrat-700-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('../vendor/fonts/montserrat-800-latin.woff2') format('woff2')}

/* App de flota Fleet × GoPass. Mismos tokens que el caso de negocio (../styles.css). */
:root{
 /* Paleta del manual de marca Gopass */
 --gopass:#00e400; --gopass-light:#64ff82; --gopass-mid:#4ae050; --gopass-dark:#21b822;
 --navy-900:#000000; --navy-800:#0d0d0d; --navy-700:#1a1a1a; --navy-600:#3c3c3c;
 --line:#333336; --line-soft:#222225;
 --ink:#f1f1f2; --ink-2:#c4c4c6; --ink-3:#8f9093;
 --pluxee:#1b51dc; --pluxee-lt:#7f9cff; --magenta:#cc1480;
 --cat-fuel:#45a01c; --cat-toll:#5b82ea; --cat-park:#d55a90;
 --ok:#64ff82; --warn:#ffc24d; --bad:#ff7375;
 --r-lg:22px; --r-md:14px; --r-sm:10px;
 --mono:ui-monospace,"SF Mono",Menlo,monospace;
 --sans:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 --display:'Montserrat',-apple-system,system-ui,sans-serif;
 --e:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
body{
 font-family:var(--sans); background:var(--navy-900); color:var(--ink); line-height:1.45;
 -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
.kicker{font:600 10px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.mono{font-family:var(--mono)}

/* ── escenario (solo escritorio) ───────────────────────────────── */
.stage{min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; padding:0}
.back,.legend{display:none}
.device{width:100%; min-width:0}
/* el carrusel de rieles no debe estirar la app: todo lo ancho scrollea dentro */
.app,main,.rails,.chips{min-width:0; max-width:100%}
.app{
 position:relative; display:flex; flex-direction:column; min-height:100dvh;
 background:
 radial-gradient(70% 40% at 12% -6%, rgba(27,81,220,.34), transparent 62%),
 radial-gradient(60% 34% at 96% 4%, rgba(0,228,0,.14), transparent 64%),
 var(--navy-900);
 overflow:hidden;
}

@media (min-width:900px){
 .stage{
 grid-template-columns:auto minmax(280px,360px); gap:56px; align-items:center;
 justify-content:center; padding:48px 40px;
 background:
 radial-gradient(50vw 40vw at 10% 0%, rgba(27,81,220,.22), transparent 60%),
 radial-gradient(40vw 34vw at 92% 100%, rgba(204,20,128,.12), transparent 60%);
 }
 .back{
 display:block; position:fixed; top:22px; left:26px; z-index:5;
 font:600 12.5px var(--sans); color:var(--ink-2); text-decoration:none;
 padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(20,26,53,.7);
 backdrop-filter:blur(6px); transition:.2s var(--e);
 }
 .back:hover{color:#fff; border-color:var(--pluxee-lt); transform:translateX(-2px)}
 .device{
 width:392px; padding:12px; border-radius:52px;
 background:linear-gradient(165deg,#33406f,#141a35 62%); border:1px solid var(--line);
 box-shadow:0 70px 110px -55px #000, inset 0 0 0 1px rgba(255,255,255,.04);
 }
 .app{min-height:0; height:min(812px, calc(100dvh - 120px)); border-radius:42px; border:1px solid var(--line-soft)}
 .legend{
 display:block; align-self:center; border-left:1px solid var(--line-soft); padding-left:28px;
 }
 .legend h2{font-size:1.35rem; letter-spacing:-.02em}
 .legend p{color:var(--ink-2); font-size:14px; margin-top:10px}
 .legend ul{margin-top:18px; padding:0; list-style:none; display:grid; gap:12px}
 .legend li{font-size:13px; color:var(--ink-3); padding-left:14px; border-left:2px solid var(--line)}
 .legend b{color:var(--ink)} .legend i{font-style:normal; color:var(--pluxee-lt)}
}

/* ── cromo del teléfono ────────────────────────────────────────── */
.statusbar{
 display:flex; align-items:center; justify-content:space-between; gap:10px;
 padding:max(10px,env(safe-area-inset-top)) 22px 4px;
 font:600 11.5px var(--mono); color:var(--ink-2); flex:none;
}
.statusbar .notch{width:64px;height:5px;border-radius:99px;background:#05070f;display:block}
.sig{display:flex;align-items:center;gap:3px;font-size:10.5px}
.sig b{width:3px;border-radius:1px;background:var(--ink-2)}
.sig b:nth-child(1){height:5px} .sig b:nth-child(2){height:8px} .sig b:nth-child(3){height:11px}

.appbar{display:flex; align-items:center; gap:12px; padding:8px 18px 12px; flex:none}
.lock{display:flex; align-items:center; gap:9px}
.lock .dot{width:9px;height:9px;border-radius:50%;flex:none}
.lock .dot.px{background:var(--magenta)} .lock .dot.gp{background:var(--gopass); margin-left:-14px}
.lock strong{display:block; font-size:15px; letter-spacing:-.01em}
.lock em{font-style:normal;color:var(--ink-3);font-weight:400}
.lock small{display:block; font:500 10.5px var(--mono); color:var(--ink-3); letter-spacing:.05em}
.icon{
 margin-left:auto; width:36px;height:36px; border-radius:50%; font-size:16px;
 border:1px solid var(--line); background:var(--navy-700); color:var(--ink-2);
 display:grid; place-items:center; transition:.25s var(--e);
}
.icon:hover{color:var(--gopass); border-color:var(--gopass)}
.icon:active{transform:scale(.92)}
.icon.busy{animation:spin .9s linear infinite; color:var(--gopass)}
@keyframes spin{to{transform:rotate(360deg)}}

main{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 18px 22px; scrollbar-width:none}
main::-webkit-scrollbar{display:none}
main>*{animation:in .45s var(--e) both}
@keyframes in{from{opacity:0;transform:translateY(10px)}}

.tabbar{
 flex:none; display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
 padding:8px 10px max(8px,env(safe-area-inset-bottom));
 border-top:1px solid var(--line-soft); background:rgba(12,16,39,.86); backdrop-filter:blur(12px);
}
.tabbar button{
 display:grid; gap:3px; justify-items:center; padding:8px 2px 6px; border-radius:var(--r-sm);
 font:600 10.5px var(--sans); color:var(--ink-3); transition:.2s var(--e);
}
.tabbar i{font-style:normal; font-size:16px; line-height:1}
.tabbar button.on{color:#fff; background:rgba(255,255,255,.06)}
.tabbar button.on i{color:var(--gopass)}

/* ── piezas comunes ───────────────────────────────────────────── */
.h{display:flex; align-items:baseline; gap:10px; margin:22px 0 12px}
.h h2{font-size:1.02rem; letter-spacing:-.01em}
.h a,.h span.more{margin-left:auto; font:600 11.5px var(--mono); color:var(--ink-3); letter-spacing:.06em}
.plate{
 font:700 11.5px var(--mono); letter-spacing:.1em; background:#fff; color:#00110a;
 padding:2px 6px; border-radius:4px; border-bottom:2px solid #b9c0e0; white-space:nowrap;
}
.plate.sm{font-size:10.5px; padding:2px 5px}
.rail{font:700 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:3px 7px; border-radius:5px; white-space:nowrap}
.rail.gopass{background:rgba(0,228,0,.13); color:var(--gopass)}
.rail.fleet{background:rgba(127,156,255,.14); color:var(--pluxee-lt)}
.rail.red,.rail.via{background:rgba(255,255,255,.06); color:var(--ink-2)}
.meter{height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.meter i{display:block; height:100%; border-radius:99px; transition:width .6s var(--e)}

/* ── tarjetas de riel (carrusel) ───────────────────────────────── */
.rails{
 display:grid; grid-auto-flow:column; grid-auto-columns:86%; gap:12px;
 overflow-x:auto; scroll-snap-type:x mandatory; margin:6px -18px 0; padding:0 18px 6px;
 scrollbar-width:none;
}
.rails::-webkit-scrollbar{display:none}
.wcard{
 scroll-snap-align:center; border-radius:var(--r-lg); padding:18px 18px 16px; position:relative;
 border:1px solid var(--line); overflow:hidden; isolation:isolate;
}
.wcard::after{
 content:""; position:absolute; inset:0; z-index:-1; opacity:.9;
 background:linear-gradient(150deg,#1d2a5e,#111737 65%);
}
.wcard.gopass::after{background:linear-gradient(150deg,#173a17,#101a2f 62%)}
.wcard.fleet::after{background:linear-gradient(150deg,#16307e,#101637 66%)}
.wcard .top{display:flex; align-items:center; gap:8px}
.wcard .top b{font-size:12.5px; letter-spacing:-.01em}
.wcard .big{margin:14px 0 2px; font-size:1.95rem; font-weight:800; letter-spacing:-.035em}
.wcard .big u{text-decoration:none; font-size:.9rem; color:var(--ink-3); font-weight:600}
.wcard .sub{font:500 10.5px var(--mono); color:var(--ink-2); letter-spacing:.04em}
.wcard .meter{margin-top:14px}
.wcard .fine{display:flex; justify-content:space-between; gap:10px; margin-top:7px; font:500 10px var(--mono); color:#c9d5ff}
.wcard .act{display:flex; gap:8px; margin-top:14px}
.btn{
 font:600 12.5px var(--sans); padding:9px 14px; border-radius:999px;
 border:1px solid var(--line); background:rgba(255,255,255,.05); color:#fff; transition:.22s var(--e);
}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--gopass); color:#00110a; border-color:var(--gopass)}
.btn.wide{width:100%; padding:13px; font-size:14px}
.btn:disabled{opacity:.45}

/* ── acciones rápidas ─────────────────────────────────────────── */
.quick{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px}
.quick button{
 display:grid; gap:6px; justify-items:center; padding:13px 4px 11px; border-radius:var(--r-md);
 background:var(--navy-800); border:1px solid var(--line-soft); font:600 10px var(--sans); color:var(--ink-2);
 transition:.22s var(--e); text-align:center; line-height:1.25;
}
.quick button:hover{border-color:var(--line); color:#fff; transform:translateY(-2px)}
.quick i{font-style:normal; font-size:17px; line-height:1}

/* ── resumen del día ──────────────────────────────────────────── */
.today{margin-top:20px; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--navy-800); padding:16px}
.today .v{font-size:1.5rem; font-weight:800; letter-spacing:-.03em; margin-top:2px}
.bars{display:flex; height:8px; border-radius:99px; overflow:hidden; margin-top:14px; gap:2px}
.bars i{display:block; height:100%}
.split{display:grid; gap:8px; margin-top:12px}
.split div{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2)}
.split u{width:8px;height:8px;border-radius:2px;text-decoration:none;flex:none}
.split b{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:#fff}

/* ── lista de movimientos ─────────────────────────────────────── */
.list{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden}
.row{
 display:grid; grid-template-columns:34px 1fr auto; gap:11px; align-items:center;
 background:var(--navy-800); padding:12px 13px; text-align:left; width:100%; transition:.18s var(--e);
}
.row:hover{background:var(--navy-700)}
.row:active{background:var(--navy-600)}
.row .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px}
.row>span:nth-child(2){min-width:0; display:block} /* si no, el detalle empuja el monto fuera de pantalla */
.row .t{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600}
.row .d{display:block; font:500 11px var(--mono); color:var(--ink-3); margin-top:3px; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.row .a{text-align:right; font:700 13px var(--mono); white-space:nowrap}
.row .a small{display:block; font:600 9px var(--mono); letter-spacing:.08em; margin-top:3px}
.st-no .a{color:var(--bad)} .st-no .a small{color:var(--bad)}
.st-hold .a{color:var(--warn)} .st-hold .a small{color:var(--warn)}
.st-open .a{color:var(--ink-3)} .st-ok .a small{color:var(--ink-3)}

.chips{display:flex; gap:6px; overflow-x:auto; margin:14px -18px 0; padding:0 18px 2px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{
 flex:none; font:600 12px var(--sans); padding:8px 14px; border-radius:999px;
 border:1px solid var(--line-soft); color:var(--ink-2); transition:.2s var(--e);
}
.chips button.on{background:#fff; color:#00110a; border-color:#fff}

/* ── flota ────────────────────────────────────────────────────── */
.veh{
 display:grid; gap:10px; padding:15px; border-radius:var(--r-md); background:var(--navy-800);
 border:1px solid var(--line-soft); text-align:left; width:100%; transition:.22s var(--e);
}
.veh+.veh{margin-top:10px}
.veh:hover{border-color:var(--line)}
.veh .hd{display:flex; align-items:center; gap:9px}
.veh .hd small{margin-left:auto; font:500 10.5px var(--mono); color:var(--ink-3)}
.veh .kv{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 14px}
.veh .kv div{font-size:11.5px; color:var(--ink-3)}
.veh .kv b{display:block; color:var(--ink); font:600 12px var(--mono); letter-spacing:.04em; margin-top:1px}
.badge{font:700 9px var(--mono); letter-spacing:.09em; padding:3px 7px; border-radius:5px}
.badge.on{background:rgba(0,235,94,.12); color:var(--ok)}
.badge.off{background:rgba(255,194,77,.13); color:var(--warn)}

/* ── rieles (explicación) ─────────────────────────────────────── */
.rail-card{border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--navy-800); padding:17px; margin-top:12px}
.rail-card h3{font-size:.98rem; letter-spacing:-.01em; margin-top:8px}
.rail-card p{font-size:12.5px; color:var(--ink-2); margin-top:8px}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.tags span{font:600 10px var(--mono); letter-spacing:.05em; padding:5px 8px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--line-soft); color:var(--ink-2)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:14px; background:var(--line-soft); border-radius:var(--r-sm); overflow:hidden}
.kpis div{background:var(--navy-700); padding:10px 11px}
.kpis b{display:block; font-size:12px; margin-top:3px}

/* ── flujo de pasos ───────────────────────────────────────────── */
.flow{position:relative; display:grid; gap:14px; margin-top:16px; padding-left:2px}
.flow::before{content:""; position:absolute; left:15px; top:12px; bottom:18px; width:2px; background:linear-gradient(180deg,var(--line),transparent)}
.step{display:grid; grid-template-columns:32px 1fr; gap:11px; align-items:start}
.step .n{
 width:32px;height:32px;border-radius:50%; display:grid; place-items:center; position:relative; z-index:1;
 font:700 10.5px var(--mono); background:var(--navy-700); border:1px solid var(--line); color:var(--ink-2);
}
.step.gopass .n{border-color:rgba(0,228,0,.5); color:var(--gopass)}
.step.fleet .n{border-color:rgba(127,156,255,.5); color:var(--pluxee-lt)}
.step.red .n,.step.via .n{border-color:var(--line); color:var(--ink-2)}
.step .hd{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.step .hd b{font-size:12.5px}
.step .ms{font:600 9.5px var(--mono); letter-spacing:.08em; color:var(--ink-3); border:1px solid var(--line-soft); padding:2px 6px; border-radius:4px}
.step p{font-size:11.5px; color:var(--ink-3); margin-top:5px}

/* ── sheet ────────────────────────────────────────────────────── */
.sheet-host{position:fixed; inset:0; z-index:40; display:grid; align-items:end}
.sheet-host[hidden]{display:none} /* [hidden] pierde contra display:grid si no se declara */
.scrim{position:absolute; inset:0; background:rgba(4,6,16,.66); backdrop-filter:blur(3px); animation:fade .3s var(--e)}
@keyframes fade{from{opacity:0}}
.sheet{
 position:relative; width:100%; max-height:86dvh; overflow-y:auto; scrollbar-width:none;
 background:var(--navy-800); border:1px solid var(--line); border-bottom:0;
 border-radius:26px 26px 0 0; padding:8px 20px calc(24px + env(safe-area-inset-bottom));
 animation:up .38s var(--e); box-shadow:0 -30px 60px -30px #000;
}
.sheet::-webkit-scrollbar{display:none}
@keyframes up{from{transform:translateY(24px);opacity:0}}
.sheet .grab{width:42px;height:4px;border-radius:99px;background:var(--line); margin:6px auto 14px}
.sheet h2{font-size:1.1rem; letter-spacing:-.02em}
.sheet .amount{font-size:2.1rem; font-weight:800; letter-spacing:-.04em; margin:12px 0 2px}
.kv-list{margin-top:16px}
.kv-list div{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line-soft); font-size:12.5px}
.kv-list span{color:var(--ink-3)}
.kv-list b{font-weight:600; font-size:12.5px}
.verdict{display:flex; align-items:center; gap:10px; padding:12px; border-radius:var(--r-md); background:rgba(0,235,94,.08); border:1px solid rgba(0,235,94,.26)}
.verdict.no{background:rgba(255,115,117,.09); border-color:rgba(255,115,117,.3)}
.verdict.hold{background:rgba(255,194,77,.09); border-color:rgba(255,194,77,.3)}
.verdict .tick{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:900 14px var(--sans);background:var(--ok);color:#042e20;flex:none}
.verdict.no .tick{background:var(--bad);color:#3d0000} .verdict.hold .tick{background:var(--warn);color:#3d2b00}
.verdict strong{display:block; font-size:13px}
.verdict span{font:500 10.5px var(--mono); color:var(--ink-3); letter-spacing:.04em}
.note{margin-top:12px; font-size:11.5px; color:var(--ink-3); border-left:2px solid var(--line); padding-left:11px}

.amts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px}
.amts button{padding:14px 6px; border-radius:var(--r-md); border:1px solid var(--line-soft); background:var(--navy-700); font:700 13px var(--mono)}
.amts button.on{border-color:var(--gopass); color:var(--gopass); background:rgba(0,228,0,.08)}
.pay{display:grid; gap:8px; margin-top:14px}
.pay button{display:flex; align-items:center; gap:10px; padding:13px; border-radius:var(--r-md); border:1px solid var(--line-soft); background:var(--navy-700); font:600 13px var(--sans); text-align:left}
.pay button:hover{border-color:var(--pluxee-lt)}
.pay small{margin-left:auto; font:500 10.5px var(--mono); color:var(--ink-3)}

/* ── toast ────────────────────────────────────────────────────── */
.toast{
 position:absolute; left:14px; right:14px; bottom:78px; z-index:30;
 padding:12px 14px; border-radius:var(--r-md); background:#fff; color:#00110a;
 font:600 12.5px var(--sans); box-shadow:0 20px 40px -18px #000;
 transform:translateY(18px); opacity:0; pointer-events:none; transition:.34s var(--e);
}
.toast.show{transform:none; opacity:1}
.toast.bad{background:var(--bad); color:#2b0002}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}