@font-face{font-family:Poppins;src:url('assets/Poppins-Regular.woff') format('woff')}
@font-face{font-family:Poppins;src:url('assets/Poppins-Medium.woff') format('woff');font-weight:500}
@font-face{font-family:Poppins;src:url('assets/Poppins-SemiBold.woff') format('woff');font-weight:600}
:root{--c:#12add6;--ink:#1c1c1c;--bg:#f2f4f2;--deep:#092d3b;--mute:#7a807b;--line:#e1e5e1;--ok:#1a8f5a;--bad:#c0392b;--warn:#b7791f}
*{box-sizing:border-box}body{margin:0;font:15px/1.55 Poppins,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
[hidden]{display:none!important}h1,h2,h3{margin:0 0 .4em;font-weight:600}h1{font-size:clamp(24px,4vw,32px)}h2{font-size:19px}h3{font-size:16px}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,4vw,48px);background:#fff;border-bottom:1px solid var(--line)}
.brand .logo{width:170px;height:auto;display:block}#who{color:var(--mute);font-size:13px}
.wrap{max-width:980px;margin:0 auto;padding:28px 16px 60px}
.auth{max-width:420px;margin:30px auto;background:#fff;border-radius:22px;padding:30px;box-shadow:0 12px 40px #0001}
.auth p.lead{color:var(--mute);margin:0 0 18px}
.tabs{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:999px;margin-bottom:18px}
.tabs button{flex:1;border:0;background:none;padding:9px;border-radius:999px;font:inherit;font-weight:500;cursor:pointer;color:var(--mute)}.tabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px #0002}
form{display:grid;gap:12px}label{display:grid;gap:4px;font-weight:500;font-size:13px}
input,textarea{font:inherit;padding:11px 14px;border:1px solid var(--line);border-radius:12px;width:100%;background:#fff}input:focus,textarea:focus{outline:2px solid var(--c);outline-offset:-1px}
.btn{background:var(--c);color:#fff;border:0;border-radius:999px;padding:12px 22px;font:inherit;font-weight:600;cursor:pointer}.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.sm{padding:7px 16px;font-size:13px}.btn:disabled{opacity:.5}
.err{color:var(--bad);min-height:1.2em;margin:0;font-size:13px}.mute{color:var(--mute)}.sep{text-align:center;color:var(--mute);font-size:12px;margin:14px 0}
#gbtn{display:flex;justify-content:center;min-height:44px}
.hello{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:#fff;border-radius:18px;padding:16px 18px}.kpi small{color:var(--mute);display:block}.kpi b{font-size:22px;font-weight:600}.kpi.due b{color:var(--bad)}
.nav{display:flex;gap:6px;overflow-x:auto;margin-bottom:16px}.nav button{border:0;background:#fff;padding:9px 18px;border-radius:999px;font:inherit;font-weight:500;cursor:pointer;white-space:nowrap}.nav button.on{background:var(--deep);color:#fff}
.card{background:#fff;border-radius:20px;padding:20px;margin-bottom:14px}
.car{display:grid;grid-template-columns:150px 1fr;gap:16px}.car img.hero{width:150px;height:105px;object-fit:cover;border-radius:14px;background:#e8ecea}
.badge{display:inline-block;padding:2px 12px;border-radius:999px;background:#e6f6fb;color:#0a7b99;font-size:12px;font-weight:600}.badge.ok{background:#e4f5ec;color:var(--ok)}.badge.warn{background:#fcf1de;color:var(--warn)}
.steps{display:flex;gap:4px;margin:14px 0 4px}.steps i{flex:1;height:6px;border-radius:3px;background:var(--line)}.steps i.done{background:var(--c)}
.timeline{margin-top:14px;display:grid;gap:14px}.ev{border-left:3px solid var(--c);padding-left:14px}.ev small{color:var(--mute)}
.ev .ph{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.ev .ph img{width:120px;height:86px;object-fit:cover;border-radius:12px}
.fav{display:grid;grid-template-columns:90px 1fr auto;gap:14px;align-items:center}.fav img{width:90px;height:64px;object-fit:cover;border-radius:10px;background:#e8ecea}
.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.row>*{flex:1 1 150px}.row>.btn{flex:0 0 auto}
.empty{text-align:center;padding:36px 16px;color:var(--mute)}.empty a{color:var(--c);font-weight:600}
table{width:100%;border-collapse:collapse}td,th{padding:10px 6px;border-bottom:1px solid var(--line);text-align:left}th{font-size:12px;color:var(--mute);font-weight:500}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:10px 20px;border-radius:999px;transition:.25s;pointer-events:none}#toast.on{transform:translateX(-50%)}
@media(max-width:560px){.car{grid-template-columns:1fr}.car img.hero{width:100%;height:170px}.fav{grid-template-columns:70px 1fr}.fav>:last-child{grid-column:1/-1}}
a{color:var(--c)}

/* ===== Acceso: portada con la frase del dueño + formulario ===== */
@font-face{font-family:Michroma;src:url('assets/Michroma-Regular.woff') format('woff')}
.auth-mode{background:#fff}
.auth-mode .top{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;border:0}
.auth-mode .top .logo-lt{display:none}.auth-mode .top .logo-dk{display:inline}
.auth-mode .wrap{max-width:none;margin:0;padding:0}
.auth-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(400px,1fr);min-height:100vh;min-height:100dvh}

.auth-art{position:relative;overflow:hidden;background:#092d3b;color:#fff;display:flex;align-items:flex-end;padding:clamp(28px,5vw,72px)}
.auth-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;filter:saturate(.8) brightness(.92)}
.auth-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#092d3bb3 0%,#092d3b33 22%,#092d3b00 40%,#06202bd9 70%,#06202b 100%)}
.auth-quote{position:relative;z-index:1;max-width:640px}
.q-ask{display:inline-block;margin:0 0 20px;padding:10px 16px;font-size:14px;line-height:1.4;color:#fff;background:#ffffff1f;border:1px solid #ffffff38;border-radius:18px 18px 18px 4px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.q-say{display:block;margin:0;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;font:400 clamp(34px,4.5vw,64px)/1.12 Michroma,sans-serif;letter-spacing:-.04em;white-space:nowrap}
.q-say:focus-visible{outline:2px solid #12add6;outline-offset:8px;border-radius:4px}
.q-say .x{display:inline-block;max-width:0;opacity:0;overflow:hidden;vertical-align:bottom;color:#12add6}
.q-say.play .x{animation:estira .5s cubic-bezier(.3,1.6,.5,1) var(--d,0s) forwards}
@keyframes estira{0%{max-width:0;opacity:0;transform:scaleX(.2)}100%{max-width:1.2em;opacity:1;transform:none}}
.q-who{margin:18px 0 0;font-size:13px;color:#ffffffb8;max-width:34ch}

.auth-panel{display:flex;align-items:center;justify-content:center;padding:104px clamp(24px,5vw,72px) 56px;background:#fff}
.auth-mode .auth{width:100%;max-width:400px;margin:0;padding:0;background:transparent;border-radius:0;box-shadow:none}
.auth-mode .auth h1{font-size:clamp(26px,2.4vw,32px);letter-spacing:-.02em;margin-bottom:8px}
.auth-mode .auth p.lead{font-size:14px;margin-bottom:26px;max-width:36ch}
.auth-mode .tabs{margin-bottom:22px}
.auth-mode form{gap:16px}
.auth-mode label{font-size:13px;gap:6px}
.auth-mode input{height:50px;padding:0 16px;border-radius:14px;background:#f7f9f8;transition:border-color .2s,background-color .2s}
.auth-mode input:focus{background:#fff;border-color:var(--c);outline:3px solid #12add633;outline-offset:0}
.pw{position:relative}.pw input{padding-right:84px}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--c);font:500 12px Poppins,sans-serif;padding:8px 10px;border-radius:10px;cursor:pointer}
.pw-eye:hover{background:#12add614}
.btn.big{height:52px;font-size:15px;margin-top:4px;transition:background-color .2s,transform .15s}
.btn.big:hover{background:#0997be}.btn.big:active{transform:scale(.985)}
.auth-mode .sep{display:flex;align-items:center;gap:12px;margin:20px 0}.auth-mode .sep:before,.auth-mode .sep:after{content:'';flex:1;height:1px;background:var(--line)}
.back{display:inline-block;margin-top:26px;font-size:13px;color:var(--mute);text-decoration:none}.back:hover{color:var(--c)}

@media(max-width:860px){
  .auth-split{grid-template-columns:1fr;min-height:0}
  .auth-art{min-height:340px;padding:96px 22px 28px}
  .q-say{font-size:clamp(30px,8.6vw,46px)}
  .q-ask{font-size:13px;margin-bottom:14px}
  .q-who{font-size:12px;margin-top:12px}
  .auth-panel{padding:34px 22px 56px;align-items:flex-start}
  .auth-mode .top .theme-toggle{color:#fff;border-color:#ffffff59;background:#00000033;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}
#toast:not(.on){opacity:0;visibility:hidden}
.q-say.done .x{max-width:none;opacity:1}
@media(prefers-reduced-motion:reduce){.q-say .x{max-width:none;opacity:1;animation:none!important}}

/* ===== Portal: selección personal, subastas y estado de cuenta ===== */
.sel-intro{background:linear-gradient(120deg,#092d3b,#0f4a5e);color:#fff}
.sel-intro b{font-size:17px}.sel-intro p{margin:6px 0 0;color:#d4ecf3}.sel-intro small{color:#9ccfe0}
.sel-intro .sel-warn{margin-top:10px;padding:10px 14px;border-radius:12px;background:#ffffff14;color:#fff}.sel-intro .sel-warn a{color:#7fdcf5;font-weight:600}
.sel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;padding:16px}
.sel-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start}
.sel-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#e8ecea;cursor:zoom-in}
.sel-gal img:first-child{grid-column:1/-1;aspect-ratio:16/10;border-radius:14px}
.sel-noimg{grid-column:1/-1;aspect-ratio:16/10;border-radius:14px;background:#e8ecea;display:grid;place-items:center;color:var(--mute)}
.sel-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.sel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}.sel-top h2{margin:0}
.sel-cd{font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;background:#e6f6fb;color:#0a7b99;white-space:nowrap}
.sel-cd.soon{background:#fff1d6;color:#9a5b00}.sel-cd.past{background:var(--line);color:var(--mute)}
.sel-meta{margin:0;color:var(--mute);font-size:13px}
.sel-nota{margin:0;padding:12px 14px;border-left:3px solid var(--c);background:#f3fafc;border-radius:0 12px 12px 0;font-style:italic}
.sel-nota small{display:block;font-style:normal;color:var(--mute);margin-top:4px;font-size:12px}
.sel-bid{display:grid;gap:8px;padding:14px;border-radius:14px;border:1px solid var(--line)}.sel-bid p{margin:0}
.sel-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:13px}.sel-foot a{font-weight:600;text-decoration:none}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--mute);text-decoration:underline;cursor:pointer;justify-self:start}
.cta-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.cta-sum small{display:block;color:var(--mute)}.cta-sum b{font-size:24px;font-weight:600}.cta-sum b.due{color:var(--bad)}.cta-sum b.okc{color:var(--ok)}
details.acct summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none}details.acct summary::-webkit-details-marker{display:none}
details.acct[open] summary{margin-bottom:10px}
details.acct td:last-child,details.acct th:last-child{text-align:right;white-space:nowrap}
tr.tot td{font-weight:600;border-bottom:2px solid var(--ink)}tr.paid td{color:var(--ok)}
.card{overflow-x:auto}
@media(max-width:760px){.sel{grid-template-columns:1fr}}
html[data-theme=dark] .sel-gal img,html[data-theme=dark] .sel-noimg{background:#1d2226}
html[data-theme=dark] .sel-nota{background:#152227}
html[data-theme=dark] .sel-cd{background:#152227;color:#49cff3}html[data-theme=dark] .sel-cd.soon{background:#292216;color:#f0b955}
@media(max-width:560px){table.pagos td:nth-child(3),table.pagos th:nth-child(3){display:none}.card td,.card th{padding:9px 4px;font-size:13px}}
.chks{display:grid;gap:10px}.chk{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14px;cursor:pointer}
.chk input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--c);flex:0 0 auto}.chk small{display:block;color:var(--mute);font-weight:400;font-size:12px}
.sel-intro .sel-fee{margin-top:10px;font-size:13px;color:#b9dfeb}
/* ---------- Solicitar mi vehículo + pago del servicio ---------- */
.svc-note{background:#e6f6fb;color:#0a6a84;border-radius:12px;padding:10px 12px;font-size:13px;margin:0 0 12px}
.svc-hero{background:var(--deep);color:#fff}.svc-hero h2{font-size:22px}.svc-hero small{color:#b9dfeb}
.svc-steps{margin:14px 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;counter-reset:s}
.svc-steps li{background:#ffffff14;border-radius:14px;padding:12px 14px 12px 46px;position:relative;counter-increment:s;font-size:14px}
.svc-steps li:before{content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--c);display:grid;place-items:center;font-size:13px;font-weight:600}
.svc-hero .fine{font-size:12.5px;color:#b9dfeb;margin:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.svc-pay-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.svc-pay-head p{margin:0}.svc-amt{font-size:24px;font-weight:600;white-space:nowrap}
.q-h{font-weight:600;margin:18px 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.svc-met{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:18px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:4px}
.svc-met button{flex:1 1 auto;border:0;background:transparent;border-radius:11px;padding:11px 14px;font:inherit;font-weight:500;text-align:center;cursor:pointer;color:var(--mute);transition:background .15s,color .15s}
.svc-met button small{display:none}.svc-met button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px #00000022,0 0 0 1px #0000000a}
.pay-big{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0}.pay-big b{font-size:30px;font-weight:600;letter-spacing:-.01em}
.pay-addr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg);border-radius:12px;padding:10px 12px;margin:6px 0 10px}
.pay-addr code{font:13px/1.4 ui-monospace,Menlo,monospace;word-break:break-all;flex:1 1 220px}
.bin-pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;align-items:start;margin:10px 0}
.bin-info{min-width:0}
.bin-qr{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.bin-qr img{width:100%;height:auto;border-radius:12px;background:#fff;padding:10px;box-shadow:0 2px 10px #0000001a}
.pay-tips{margin:8px 0;padding-left:18px;font-size:13px;color:#4a504b}.pay-tips li{margin:3px 0}
.pay-otros{white-space:pre-line;background:var(--bg);border-radius:12px;padding:10px 12px}
.pay-wait{display:flex;align-items:center;gap:10px;font-weight:500;color:#0a6a84;margin:14px 0}
.pay-wait .dot{width:10px;height:10px;border-radius:50%;background:var(--c);animation:lmpulse 1.4s infinite;flex:0 0 auto}
@keyframes lmpulse{0%{box-shadow:0 0 0 0 #12add680}70%{box-shadow:0 0 0 10px #12add600}100%{box-shadow:0 0 0 0 #12add600}}
@media(prefers-reduced-motion:reduce){.pay-wait .dot{animation:none}}
.mute.sm{font-size:12.5px}.svc-pay details{margin-top:10px}.svc-pay summary{cursor:pointer;color:#0a6a84;font-size:13px}.svc-pay details form{margin-top:8px}
.warn-box{background:#fcf1de;color:#7a4f0e;border-radius:12px;padding:10px 12px;font-size:13.5px}
.link-btn{border:0;background:none;color:var(--mute);text-decoration:underline;font:inherit;font-size:13px;cursor:pointer;margin-top:14px;padding:0}
.svc-hist{margin:0;padding-left:18px}
html[data-theme=dark] .svc-met{background:#12171a;border-color:#2a3034}html[data-theme=dark] .svc-met button{background:transparent;color:var(--mute);border:0}html[data-theme=dark] .svc-met button.on{background:#1d2a30;color:#e8ecee;box-shadow:none}
html[data-theme=dark] .pay-addr,html[data-theme=dark] .pay-otros{background:#1d2226}html[data-theme=dark] .pay-tips{color:#b6bec3}html[data-theme=dark] .pay-step .n{background:#143138;color:#7fd8f0}
.acct-svc{display:flex;justify-content:space-between;gap:10px;background:#e4f5ec;color:#145c3b;border-radius:12px;padding:10px 12px;margin:12px 0 4px;font-size:14px}
.card.acct>.btn{margin-top:12px}
html[data-theme=dark] .acct-svc{background:#123326;color:#bfe8d2}
.svc-sec{border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px}.svc-sec h3{margin:0;font-size:15px}
.svc-picks{display:grid;gap:8px}.svc-pick{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center}
.svc-pick img,.svc-pick .ph{width:64px;height:46px;object-fit:cover;border-radius:10px;background:#e8ecea;display:block}.svc-pick small{display:block}
.svc-rows{display:grid;gap:8px}.svc-row{display:grid;grid-template-columns:1.6fr 1fr auto;gap:8px;align-items:center}.svc-row .link-btn{margin:0;font-size:16px;text-decoration:none}
.svc-sec .btn{justify-self:start;text-decoration:none}
label small.mute{font-weight:400;font-size:12px}
@media(max-width:560px){.svc-row{grid-template-columns:1fr 90px auto}}
html[data-theme=dark] .svc-sec{border-color:#31373b}
.sus-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fcf1de;color:#7a4f0e;border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:14px}
.sus-banner.off{background:#fde8e6;color:#8a2a20}
html[data-theme=dark] .sus-banner{background:#3a2c12;color:#f3d9a8}html[data-theme=dark] .sus-banner.off{background:#3b1d19;color:#f4c4bd}
/* Transferencia bancaria */
.pay-big.code b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--brand,#0a7b99)}
.bank-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 12px;margin:8px 0}
.bank-row small{display:block;font-size:12px;color:#6b7470;margin-top:4px}.bank-row .pay-addr{margin:4px 0 4px;padding:8px 10px}
/* ===== Panel del cliente: menú lateral ===== */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.wrap:has(.shell){max-width:1180px}
.side{position:sticky;top:18px;display:grid;gap:4px;background:#fff;border-radius:20px;padding:14px}
.side-who{display:grid;padding:4px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}.side-who b{font-size:16px}.side-who small{color:var(--mute);font-size:12px}
.side-b{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:500;font-size:14px;color:var(--ink)}
.side-b i{font-style:normal;width:22px;text-align:center;color:var(--c);font-size:15px}.side-b em{margin-left:auto;font-style:normal;font-size:12px;background:var(--c);color:#fff;border-radius:999px;padding:0 8px;min-width:20px;text-align:center}
.side-b:hover{background:var(--bg)}.side-b.on{background:var(--deep);color:#fff}.side-b.on i{color:#7fd8f0}
.side-b:focus-visible{outline:2px solid var(--c);outline-offset:2px}.side-b.ext{color:var(--mute);font-size:13px;margin-top:6px}
.main{min-width:0}.main>h1,.main>div>h1{margin-bottom:14px}
.next{border:2px solid var(--c)}.next small{color:var(--c);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11px}.next h2{font-size:22px;margin:4px 0}
.track{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.track li{display:flex;gap:12px;align-items:center;background:#fff;border-radius:16px;padding:12px 14px}
.track i{font-style:normal;flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--mute);font-weight:600;font-size:13px}
.track li.ok i{background:#e4f5ec;color:var(--ok)}.track li.now{box-shadow:inset 0 0 0 2px var(--c)}.track li.now i{background:var(--c);color:#fff}
.track b{display:block;font-size:14px}.track small{color:var(--mute);font-size:12.5px}
.ant{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}.ant p{margin:4px 0 0;font-size:13.5px;color:var(--mute);max-width:60ch}
.ant.due{border:2px solid var(--warn);background:#fffaf0}.ant.ok{background:#f1faf5}
.sel.wanted{box-shadow:inset 0 0 0 2px var(--ok)}.want{margin:0 0 6px}.row-links{display:flex;gap:14px;flex-wrap:wrap}
.sel-bid .btn.big{width:100%;margin:6px 0 4px}
.car-card .car{margin-bottom:6px}.car-pay{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}.car-pay b{color:var(--bad)}
.car-more{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.car-more summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--deep)}
.bank-t{display:block;margin:10px 0 2px;font-size:13px;grid-column:1/-1}
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-bottom:14px}
.plan{position:relative;background:#fff;border-radius:22px;padding:24px 22px;display:grid;gap:8px;align-content:start;border:1.5px solid var(--line)}
.plan.destacado{border-color:var(--c);box-shadow:0 14px 34px #12add626}.plan.mine{outline:3px solid var(--ok);outline-offset:-3px}
.plan h3{font-size:20px;margin:0}.plan p{margin:0;font-size:13.5px}.plan ul{margin:6px 0 10px;padding-left:18px;display:grid;gap:4px;font-size:14px}
.plan-p b{font-size:36px;font-weight:600;letter-spacing:-.02em}.plan-p span{color:var(--mute);margin-left:4px}
.plan-tag{position:absolute;top:-11px;left:20px;background:var(--c);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px}
.fine{color:var(--mute);font-size:12.5px}
@media(max-width:860px){
  .shell{grid-template-columns:1fr;gap:14px}
  .side{position:sticky;top:0;z-index:5;display:flex;overflow-x:auto;gap:4px;padding:8px;border-radius:0 0 16px 16px;margin:-28px -16px 0;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}.side-who{display:none}.side-b{flex:0 0 auto;padding:8px 12px;font-size:13px}.side-b.ext{margin-top:0}
}
html[data-theme=dark] .side,html[data-theme=dark] .track li,html[data-theme=dark] .plan{background:#131619;border-color:#30373b}
html[data-theme=dark] .side-b{color:#e8ecee}html[data-theme=dark] .side-b:hover{background:#1d2226}html[data-theme=dark] .side-b.on{background:#10262d}
html[data-theme=dark] .ant.due{background:#292216}html[data-theme=dark] .ant.ok{background:#12221a}html[data-theme=dark] .track i{background:#1d2226}
/* Plazo para pagar el carro ganado */
.plazo{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff7e6;border:1px solid #f3d48b;color:#6b4b00;font-size:14px}
.plazo.urg{background:#fdecec;border-color:#f0b4b4;color:#8a1c1c}
.plazo-card{border:1px solid #f3d48b;background:#fffaf0}.plazo-card.urg{border-color:#f0b4b4;background:#fff5f5}
/* Sin suscripción: solo los planes, a todo el ancho */
.shell.solo{grid-template-columns:minmax(0,1fr)}.shell.solo .side{display:none}
.gate-head{text-align:center;max-width:640px;margin:8px auto 22px}.gate-head h1{font-size:clamp(26px,4vw,36px);margin:0 0 10px}
.gate-head .lead{color:var(--mute,#5f665f);font-size:16px;line-height:1.5;margin:0 0 10px}.gate-promise{font-weight:700;color:var(--c,#12add6);margin:0}.gate-promise small{font-weight:500;color:var(--mute,#7a807b)}
.shell.solo .planes{max-width:820px;margin-left:auto;margin-right:auto}.shell.solo .fine{text-align:center}
/* Pago: Zelle y transferencia por separado, datos ordenados */
.svc-met.sub{margin-bottom:14px}.svc-met.sub button{padding:9px 12px;display:flex;flex-direction:column;gap:1px}.svc-met.sub button small{display:block;font-size:11px;color:inherit;opacity:.72}
.pay-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:22px 0 10px}
.pay-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin:8px 0 4px}
.pay-step{display:flex;gap:12px;align-items:flex-start;padding:6px 0}
.pay-step .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--soft,#e8f4f8);color:var(--deep);display:grid;place-items:center;font-weight:700;font-size:12px;margin-top:3px}
.pay-step small{display:block;font-size:12.5px;color:#4a504b}.pay-step .pay-big{margin:2px 0 0}.pay-step .pay-big b{font-size:24px}
.bank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0}
.bank-grid .bank-box{display:block;border:1px solid var(--line);border-radius:14px;padding:4px 14px 10px;margin:0}
.bank-row small em{font-style:normal;color:var(--mute)}
.warn-box.sm{font-size:12.5px;margin:4px 0 10px}
.pay-form{border-top:1px solid var(--line);padding-top:12px}
/* "Quiero este vehículo": confirmar y pagar el anticipo en el mismo paso */
.quiero-dlg{border:0;border-radius:18px;padding:22px 22px 18px;max-width:420px;width:calc(100% - 32px);box-shadow:0 20px 60px #0004}
.quiero-dlg::backdrop{background:#0a1a2066}
.quiero-dlg h2{margin:0 0 4px;font-size:22px}.quiero-dlg .q-car{margin:0 0 14px;font-weight:600;color:var(--deep)}
.quiero-dlg dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:0 0 12px;padding:12px 14px;background:var(--bg);border-radius:12px}
.quiero-dlg dt{color:#4a504b}.quiero-dlg dd{margin:0;text-align:right}.quiero-dlg dd b{font-size:18px}
.quiero-dlg .q-sug{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;background:var(--bg);border-radius:12px;font-size:14px}
.quiero-dlg .q-sug svg{color:var(--deep);flex:none}
.quiero-dlg .q-sug b{color:var(--deep)}
.quiero-dlg .q-lab{display:block;font-size:13px;color:#4a504b;margin:0 0 4px}
.quiero-dlg .q-lab .monto{margin-top:6px;width:100%}
.quiero-dlg .q-acc{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}

/* ===================== Portal 2026-10: minimalista, 3 pestañas ===================== */
.wrap:has(.app){max-width:820px;padding-top:18px}
.app-main{display:grid;gap:18px;min-width:0}.home{display:grid;gap:22px}
.tabbar{display:flex;justify-content:center;gap:6px;background:#fff;border-radius:999px;padding:6px;margin:0 auto 18px;width:max-content;box-shadow:0 4px 18px #0000000d}
.tb{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:8px;padding:10px 22px;border-radius:999px;cursor:pointer;font-weight:600;font-size:15px;color:#4a504b}
.tb .tb-i{font-size:18px;line-height:1}.tb.on{background:var(--deep);color:#fff}
.tb em{position:absolute;top:8px;right:12px;width:9px;height:9px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px #fff}
.tb:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.app.solo .tabbar{display:none}
.hola{margin:0;font-size:18px;font-weight:600}
/* Lo que sigue: una sola tarjeta, un solo botón */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:26px 24px 24px;color:#fff;background:linear-gradient(135deg,#092d3b 0%,#0f4a5e 100%);display:grid;justify-items:start;gap:4px;box-shadow:0 14px 34px #092d3b33}
.hero:after{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:#ffffff10}
.hero.azul{background:linear-gradient(135deg,#0a6f8c 0%,#12add6 100%)}.hero.oro{background:linear-gradient(135deg,#8a5a00 0%,#d99a2b 100%)}
.hero.rojo{background:linear-gradient(135deg,#8a1c1c 0%,#d2453a 100%)}.hero.verde{background:linear-gradient(135deg,#0f5e3b 0%,#1fa067 100%)}
.hero-i{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#ffffff26;font-size:30px;margin-bottom:8px}
.hero h1{margin:0;font-size:clamp(26px,6vw,34px);line-height:1.15;letter-spacing:-.02em}
.hero p{margin:0;font-size:16px;color:#ffffffd9}
.hero-b{margin-top:16px;background:#fff;color:var(--deep);font-size:16px;padding:14px 28px;box-shadow:0 6px 16px #0003}.hero-b:hover{background:#f0fbfe}
.sec{font-size:17px;margin:0 0 10px}
/* Tus carros */
.cars{display:grid;gap:12px}
.car-t{all:unset;box-sizing:border-box;display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center;background:#fff;border-radius:20px;padding:10px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.car-t:hover{transform:translateY(-2px);box-shadow:0 10px 24px #0000001a}.car-t:focus-visible{outline:3px solid var(--c)}
.car-f{position:relative}.car-f img,.car-f .ph{width:132px;height:96px;border-radius:14px;object-fit:cover;display:grid;place-items:center;background:#e8ecea;font-size:34px}
.car-x{display:grid;gap:6px;min-width:0}.car-x b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etapa{font-size:14px;color:#3d4440}
.barra{height:8px;border-radius:99px;background:var(--line);overflow:hidden}.barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c),#3fd0f5)}
/* Elegidos para ti */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.pick{background:#fff;border-radius:22px;overflow:hidden;display:grid;box-shadow:0 2px 10px #0000000a}.pick.mio{box-shadow:0 0 0 3px var(--ok)}
.pick-f{all:unset;position:relative;cursor:pointer;display:block}.pick-f img,.pick-f .ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:grid;place-items:center;background:#e8ecea;font-size:44px}
.cd{position:absolute;left:10px;bottom:10px;background:#000000b3;color:#fff;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.cd.soon{background:#d99a2be6}.cd.past{background:#555c}
.pick-x{display:grid;gap:8px;padding:12px 14px 14px}.pick-x b{font-size:16px;line-height:1.25}.pick-x small{color:var(--mute);font-size:12.5px;margin-top:-4px}
.pick-x .btn{width:100%;padding:13px;font-size:16px}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px 12px;border-radius:999px;font-size:13.5px;font-weight:600;background:#e6f6fb;color:#0a6a84;margin:0}
.chip.ok{background:#e4f5ec;color:var(--ok)}.chip.oro{background:#fcf1de;color:#8a5a00}.chip.rojo{background:#fdecec;color:#a32a20}.chip.gris{background:#eceff1;color:#5f6b70}
.chip.flot{position:absolute;left:6px;bottom:6px;padding:3px 8px;font-size:11.5px}
.promesa{text-align:center;color:var(--mute);font-size:13px;margin:6px 0 0}.promesa small{font-size:11.5px}
.center{display:block;text-align:center;margin-left:auto;margin-right:auto}
/* Hoja de detalle */
.sheet{border:0;padding:0;border-radius:24px;width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 32px);box-shadow:0 30px 80px #0005;overflow:hidden}
.sheet[open]{display:flex;flex-direction:column;animation:sube .22s ease}
.sheet::backdrop{background:#06202b80;backdrop-filter:blur(2px)}
@keyframes sube{from{transform:translateY(24px);opacity:0}}
.sheet-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}.sheet-top b{flex:1;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet .x{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:16px}
.sheet-body{overflow:auto;padding:16px;display:grid;gap:16px}
.det-f img,.det-f .ph{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;display:grid;place-items:center;background:#e8ecea;font-size:52px}
.det-pagar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff7e6;border-radius:16px;padding:14px 16px}.det-pagar.rojo{background:#fdecec}
.det-pagar small{display:block;color:#6b4b00;font-size:13px}.det-pagar b{font-size:24px}
.etapas{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.etapas li{display:flex;align-items:center;gap:10px;padding:7px 4px;color:#9aa3a0;font-size:14px}
.etapas li span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:15px;flex:none}
.etapas li.ok{color:var(--ink)}.etapas li.ok span{background:#e4f5ec}.etapas li.now{color:var(--ink);font-weight:600}.etapas li.now span{background:var(--c);box-shadow:0 0 0 4px #12add633}
.novedades{display:grid;gap:12px}.nov{border-left:3px solid var(--c);padding-left:12px}.nov b{display:block}.nov small{color:var(--mute)}.nov p{margin:4px 0 0}
.nov-f{display:flex;gap:8px;overflow-x:auto;margin-top:8px}.nov-f img{width:120px;height:86px;object-fit:cover;border-radius:12px}
.cuenta summary{cursor:pointer;font-weight:600;color:var(--deep);padding:6px 0}
.lista{list-style:none;margin:0;padding:0}.lista li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}.lista li:last-child{border-bottom:0}
.lista li small{display:block;color:var(--mute);font-size:12.5px}.lista li.tot{font-weight:600}.lista li.pagado{color:var(--ok)}.lista .der{text-align:right}
.lista.card{padding:6px 16px}.ok-t{color:var(--ok)!important}.oro-t{color:#8a5a00!important}
.mini{display:flex;align-items:center;gap:10px}.mini img,.mini .ph{width:64px;height:46px;border-radius:10px;object-fit:cover;display:grid;place-items:center;background:#e8ecea}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;cursor:zoom-in;background:#e8ecea}
.gal img:first-child{grid-column:1/-1;aspect-ratio:16/10;border-radius:16px}
.datos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.datos div{background:var(--bg);border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;column-gap:8px}
.datos span{grid-row:span 2;font-size:20px;align-self:center}.datos small{color:var(--mute);font-size:12px}.datos b{font-size:14px}
.nota{margin:0;padding:12px 14px;border-left:3px solid var(--c);background:#f3fafc;border-radius:0 14px 14px 0;font-style:italic}.nota small{display:block;font-style:normal;color:var(--mute);margin-top:4px}
.det-acc{display:grid;gap:10px;justify-items:center}.det-acc .btn{width:100%}.det-acc .chip{width:100%}
/* Yo */
.yo{display:flex;align-items:center;gap:14px}.yo h1{margin:0;font-size:24px}.yo small{color:var(--mute)}
.avatar{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--deep),var(--c));color:#fff;display:grid;place-items:center;font-size:24px;font-weight:600;flex:none}
.filas{padding:4px 6px}.fila{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:14px 10px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:12px}
.fila:last-child{border-bottom:0}.fila:hover{background:var(--bg)}.fila:focus-visible{outline:3px solid var(--c)}
.fila-i{width:40px;height:40px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:19px;flex:none}
.fila-t{flex:1;font-weight:600;font-size:15px}.fila-t small{display:block;font-weight:400;color:var(--mute);font-size:12.5px}.fila-f{color:#b4bcb8;font-size:22px}
.volver{all:unset;cursor:pointer;color:var(--deep);font-weight:600;font-size:14px;padding:6px 0;margin-bottom:6px;display:inline-block}
.quiero-dlg .hero-i{background:#e6f6fb;margin:0 0 8px}
@media(max-width:760px){
  .wrap:has(.app){padding:14px 14px 96px}
  .tabbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:20;margin:0;width:auto;justify-content:space-around;border-radius:22px;padding:6px;box-shadow:0 10px 30px #0000002e}
  .tb{flex:1;flex-direction:column;gap:2px;padding:8px 4px;font-size:12px;border-radius:16px;justify-content:center}.tb .tb-i{font-size:22px}
  .tb em{top:6px;right:calc(50% - 20px)}
  .hero{padding:22px 20px 20px;border-radius:24px}.hero-b{width:100%}
  .car-t{grid-template-columns:104px minmax(0,1fr)}.car-f img,.car-f .ph{width:104px;height:80px}
  .picks{grid-template-columns:1fr}
  .sheet{width:100%;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
}
html[data-theme=dark] .tabbar,html[data-theme=dark] .car-t,html[data-theme=dark] .pick{background:#181d20}
html[data-theme=dark] .tb{color:#c9d0d3}html[data-theme=dark] .tb.on{background:#12add6;color:#04222c}
html[data-theme=dark] .etapa{color:#c9d0d3}html[data-theme=dark] .sheet{background:#131619;color:#e8ecee}html[data-theme=dark] .sheet-top{border-color:#2a3034}
html[data-theme=dark] .sheet .x,html[data-theme=dark] .datos div,html[data-theme=dark] .fila-i,html[data-theme=dark] .etapas li span{background:#1d2226}
html[data-theme=dark] .det-pagar{background:#3a2f12}html[data-theme=dark] .det-pagar small{color:#f6d98e}html[data-theme=dark] .nota{background:#152227}
html[data-theme=dark] .fila:hover{background:#1d2226}html[data-theme=dark] .lista li{border-color:#2a3034}
@media(max-width:760px){body:has(.tabbar) #toast{bottom:96px}}
.pick.pend{box-shadow:0 0 0 3px #d99a2b}
.chip.sm{padding:3px 10px;font-size:12px;justify-self:start}
.porque{background:#eef8fb;border-radius:16px;padding:14px 16px;text-align:left}.porque b{display:block;font-size:15px;margin-bottom:8px;color:var(--deep)}
.porque ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.porque li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.35}.porque li span{flex:none;font-size:16px}
.quiero-dlg .porque{margin:4px 0 6px}.app-main>div>.porque{margin-bottom:12px}
.plan-tag.mine{background:var(--ok)}
html[data-theme=dark] .porque{background:#152227}html[data-theme=dark] .porque b{color:#9fd8ea}
.porque p{margin:0;font-size:13.5px;line-height:1.5;color:#2f3a3e}html[data-theme=dark] .porque p{color:#c9d0d3}
/* Botones de cada carro: [Lo quiero] [Descartar] · [✓ Vamos por él] [⚙️] */
.dos{display:flex;gap:8px;width:100%}.dos .btn{flex:1;padding:13px 10px;font-size:15px}
.dos .tuerca{flex:0 0 52px;padding:0;font-size:20px;display:grid;place-items:center}
.btn.verde{background:var(--ok)}.btn.oro{background:#c98a1c}.btn.rojo{background:var(--bad)}
.det-acc .dos .tuerca{width:52px}
.fila.rojo-t .fila-t{color:var(--bad)}
.quiero-dlg input.monto{font-size:22px;font-weight:600;text-align:center;height:56px;margin:6px 0 4px}
.quiero-dlg form{display:grid;gap:8px}
.hero-nota{display:block;margin-top:8px;font-size:12.5px;color:#ffffffc7;font-style:italic}
.fila.off{cursor:default}.fila.off:hover{background:none}
/* Pagos: filas tocables con detalle */
.lista.movs{padding:4px 8px}.lista.movs li{padding:0;display:block}
.mov{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:36px 1fr auto 14px;align-items:center;gap:12px;padding:13px 8px;border-radius:14px}
.mov:hover,.mov:focus-visible{background:rgba(18,173,214,.07)}.mov-i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--soft,#eef6f9);font-size:16px}
.mov-t{min-width:0}.mov-t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mov-go{color:var(--mute);font-size:20px}
.lista.det li span{color:var(--mute)}.lista.det li.tot span,.lista.det li.tot b{color:inherit;font-weight:700}.lista.det li.pagado b{color:var(--ok)}
.det-t{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:16px 0 4px}
.det-big{display:grid;justify-items:center;gap:4px;padding:18px;border-radius:18px;margin-bottom:8px}.det-big b{font-size:30px}.det-big.ok{background:rgba(20,153,106,.09);color:var(--ok)}.det-big.oro{background:rgba(201,132,23,.1);color:#8a5a00}
.btn.block{width:100%;margin-top:14px}.vacio{padding:14px 0}
html[data-theme=dark] .mov-i{background:#1d2226}
/* Cerrar sesión junto al botón de modo oscuro */
.top .theme-toggle.theme-toggle.theme-toggle{margin-right:8px}
.salir-top{width:36px;height:36px;border:1px solid #dadeda;background:transparent;color:#1c1c1c;display:inline-grid;place-items:center;padding:0;cursor:pointer;margin-right:14px;transition:border-color .2s,color .2s}
.salir-top:hover{border-color:#e0484d;color:#e0484d}.salir-top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[data-theme=dark] .salir-top{border-color:#363e44;color:#e1e3e5}html[data-theme=dark] .salir-top:hover{border-color:#e0484d;color:#e0484d}
#who:empty{display:none}
@media(max-width:740px){.salir-top{width:34px;height:34px}}
/* Pagos: dos columnas con su total (en teléfono, una debajo de la otra) */
.pg-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:18px}
.pg-col{padding:6px 8px 8px}.pg-col-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 10px 10px;border-bottom:1px solid var(--line)}
.pg-col-h span{font-weight:600;font-size:15px}.pg-col-h b{font-size:18px}
.pg-col .lista.movs{padding:2px 0}.pg-col .mov{grid-template-columns:32px 1fr auto 12px;gap:10px;padding:12px 6px}.pg-col .mov-i{width:32px;height:32px}
@media(max-width:700px){.pg-cols{grid-template-columns:1fr}}
/* Pagar: completo hoy o monto personalizado */
.monto-opc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 12px}
.monto-opc button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;padding:16px;border-radius:16px;border:2px solid var(--line);background:var(--card,#fff);transition:border-color .15s,box-shadow .15s}
.monto-opc button small{color:var(--mute);font-size:13px}.monto-opc button b{font-size:19px}
.monto-opc button.on{border-color:var(--c);box-shadow:0 6px 20px rgba(18,173,214,.18)}.monto-opc button:focus-visible{outline:2px solid var(--c);outline-offset:2px}
html[data-theme=dark] .monto-opc button{background:#16191b;border-color:#2a3034}html[data-theme=dark] .monto-opc button.on{border-color:var(--c)}
/* Inicio: En curso / Entregados */
.vista-sw{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:999px;background:var(--card,#fff);box-shadow:0 6px 20px rgba(14,28,35,.06)}
.vista-sw button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:11px 10px;border-radius:999px;font-weight:600;font-size:15px;color:var(--mute);display:flex;justify-content:center;align-items:center;gap:8px}
.vista-sw button.on{background:#0b2b38;color:#fff}.vista-sw button:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.vista-sw .n{min-width:22px;padding:1px 7px;border-radius:999px;background:rgba(18,173,214,.14);color:var(--c);font-size:12px}.vista-sw button.on .n{background:#ffffff26;color:#fff}
html[data-theme=dark] .vista-sw{background:#16191b}html[data-theme=dark] .vista-sw button.on{background:var(--c)}
.ver-mas{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;text-align:center;padding:12px;border-radius:14px;color:var(--c);font-weight:600;font-size:14px}
.ver-mas:hover{background:rgba(18,173,214,.07)}.cars>.ver-mas,.picks>.ver-mas{grid-column:1/-1}
/* Botón blanco del hero: texto oscuro también en modo oscuro */
html[data-theme=dark] .btn.hero-b{background:#fff;color:#0b2b38}html[data-theme=dark] .btn.hero-b:hover{background:#e8f7fc}
/* Pedir otro vehículo (debajo de Subastas anteriores) */
.otro-b{justify-self:center;margin-top:4px;padding:13px 26px;font-size:15px}
/* Completar datos (entró con Google o le faltan) */
.completar{max-width:440px;margin:24px auto;display:grid;gap:12px;padding:28px 24px}.completar h1{font-size:24px;margin:4px 0 0}
.completar .hero-i{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:rgba(18,173,214,.12)}

/* ===================== Estilo de los bocetos (2026-11): corte diagonal, Michroma, iconos de línea, 5 fases ===================== */
.ic{display:inline-grid;place-items:center;width:1.2em;height:1.2em;flex:none;vertical-align:-.22em}
.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:1em;height:1em;vertical-align:-.14em;margin-right:5px}
/* Títulos con la tipografía de la marca */
.hola,.yo h1,.sec,.hero h1,.gate-head h1,.plan h3,.pg-col-h span,.completar h1,.quiero-dlg h2,.app-main h1{font-family:Michroma,Poppins,sans-serif;font-weight:400;letter-spacing:-.02em}
.greet{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.greet .hola{font-size:clamp(22px,3.2vw,30px);margin:0;line-height:1.25}
.greet p{margin:6px 0 0;font-size:14px}
/* Botones: dos esquinas cortadas */
.btn{border-radius:0;--cc:9px;clip-path:polygon(var(--cc) 0,100% 0,100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,0 100%,0 var(--cc));display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background-color .15s,transform .15s,color .15s,box-shadow .15s}
.btn:hover{background:#0997be}.btn:active{transform:translateY(1px)}
.btn.ghost{border:0;box-shadow:inset 0 0 0 1px var(--line)}.btn.ghost:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--c);color:var(--c)}
.btn.sm{--cc:7px}.btn.verde:hover{background:#157a4a}.btn.oro:hover{background:#a8761a}.btn.rojo:hover{background:#a5352b}
.btn.hero-b{box-shadow:none}
/* Tarjetas: esquina superior derecha cortada */
.card,.kpi,.car-t,.pick,.plan,.svc-sec,.sel-bid,.quiero-dlg,.sheet{border-radius:0!important;--k:16px;clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%)}
.car-t:hover{box-shadow:none;transform:translateY(-2px)}
.pick{box-shadow:none}.pick.mio{box-shadow:inset 0 0 0 3px var(--ok)}.pick.pend{box-shadow:inset 0 0 0 3px #d99a2b}
.plan{--k:22px}.plan.destacado{box-shadow:inset 0 0 0 2px var(--c)}.plan.mine{outline:0;box-shadow:inset 0 0 0 3px var(--ok)}
.plan-tag{position:static;justify-self:start;border-radius:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);padding:4px 14px}
.quiero-dlg,.sheet{--k:22px}
/* Hero "lo que sigue": plano, con el corte */
.hero{border-radius:0;--k:26px;clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);box-shadow:none}
.hero:after{display:none}
.hero-i,.fila-i,.mov-i,.avatar{border-radius:0!important;--cc:10px;clip-path:polygon(var(--cc) 0,100% 0,100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,0 100%,0 var(--cc))}
.hero-i .ic{width:28px;height:28px}.fila-i .ic,.mov-i .ic{width:19px;height:19px;color:var(--c)}
.avatar{font-family:Michroma,Poppins,sans-serif;font-weight:400;font-size:22px}
/* Chips, pestañas y selector con el corte */
.chip,.cd,.sel-cd,.badge{border-radius:0!important;--cc:5px;clip-path:polygon(var(--cc) 0,100% 0,100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,0 100%,0 var(--cc))}
.cd{display:inline-flex;align-items:center}
.tabbar,.vista-sw{border-radius:0}
.tb,.vista-sw button{border-radius:0!important;--cc:8px;clip-path:polygon(var(--cc) 0,100% 0,100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,0 100%,0 var(--cc))}
.tb .tb-i .ic{width:19px;height:19px}
input,textarea,select{border-radius:0!important}
.auth-mode input{border-radius:0!important}
/* Fotos con la esquina cortada */
.car-f img,.car-f .ph,.det-f img,.det-f .ph,.mini img,.mini .ph,.gal img,.svc-pick img,.svc-pick .ph,.sel-gal img{border-radius:0!important;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.car-f .ph .ic,.det-f .ph .ic,.pick-f .ph .ic,.mini .ph .ic{width:36%;height:auto;color:color-mix(in srgb,var(--c) 55%,var(--mute))}
.pick-f .ph .ic{width:28%}
.datos div{border-radius:0;--cc:8px;clip-path:polygon(var(--cc) 0,100% 0,100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,0 100%,0 var(--cc))}
.datos span .ic{width:20px;height:20px;color:var(--c)}
.sheet .x .ic{width:16px;height:16px}
/* KPIs (resumen) */
.kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.kpi{background:#fff;padding:16px 18px;display:block;border:0;text-align:left;font:inherit;color:inherit;width:100%}
button.kpi{cursor:pointer;transition:transform .15s}button.kpi:hover{transform:translateY(-2px)}button.kpi:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.kpi small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.kpi b{display:block;margin-top:8px;font:400 clamp(18px,2.4vw,24px)/1.2 Michroma,Poppins,sans-serif;letter-spacing:-.01em}
.kpi.due{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,var(--line))}
/* Etapa en la tarjeta del carro */
.etapa{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.etapa .ic{color:var(--c)}.etapa small{color:var(--mute);font-size:12.5px}
/* Seguimiento: 5 fases (idénticas a la administración) */
.seg-box{display:grid;gap:6px;padding:4px 0}
.fases{list-style:none;margin:0;padding:6px 0 0;display:flex;justify-content:space-between;position:relative;--p:0}
/* La línea va del centro de la primera fase al de la última, con cualquier cantidad de fases (--n) */
.fases::before,.fases::after{content:'';position:absolute;top:20px;left:calc(50% / var(--n, 5));right:calc(50% / var(--n, 5));height:2px;background:var(--line)}
.fases::after{right:auto;width:calc((100% - 100% / var(--n, 5)) * var(--p));background:var(--c)}
.fases li{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.fases .m{width:28px;height:28px;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 2px var(--line);color:var(--mute);--cc:7px;clip-path:polygon(var(--cc) 0,100% 0,100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,0 100%,0 var(--cc))}
.fases .m .ic{width:14px;height:14px}
.fases li.ok .m{background:var(--c);box-shadow:none;color:#fff}
.fases li.now .m{box-shadow:inset 0 0 0 2px var(--c);color:var(--c)}
.fases small{font-size:11.5px;color:var(--mute);line-height:1.25;max-width:10ch}
.fases li.now small{color:var(--ink);font-weight:600}
.seg-now{margin:2px 0 0;text-align:center;font-size:13px;color:var(--mute)}.seg-now b{color:var(--ink)}
.fases.mini{padding:2px 0 0;margin-top:2px}
@media(max-width:600px){.fases small{font-size:10px;max-width:9ch}}
.fases.mini::before,.fases.mini::after{top:11px}
.fases.mini .m{width:18px;height:18px;--cc:5px}.fases.mini .m .ic{width:10px;height:10px}
/* Modo oscuro */
html[data-theme=dark] .kpi{background:#181d20}
html[data-theme=dark] .fases .m{background:#181d20}
html[data-theme=dark] .sheet .fases .m{background:#131619}
html[data-theme=dark] .fases li.ok .m{color:#04222c}
html[data-theme=dark] .btn.ghost{background:transparent;color:var(--ink)}
@media(max-width:620px){.kpis{grid-template-columns:1fr 1fr}.kpis>.kpi:last-child{grid-column:1/-1}.greet .btn{width:100%}}
/* Modo oscuro del portal (más específico que tema-oscuro.css, que carga después) */
html[data-theme=dark] .app .kpi{background:#181d20}
html[data-theme=dark] .app .fases li.ok .m,html[data-theme=dark] .sheet .fases li.ok .m{background:var(--c);color:#04222c;box-shadow:none}
html[data-theme=dark] .app .car-f .ph,html[data-theme=dark] .sheet .det-f .ph,html[data-theme=dark] .app .pick-f .ph,html[data-theme=dark] .app .mini .ph{background:#1d2226}
html[data-theme=dark] .app .hero{background:linear-gradient(135deg,#0a2a36 0%,#0e4152 100%)}
html[data-theme=dark] .app .hero.azul{background:linear-gradient(135deg,#0a5f78 0%,#0f8fb3 100%)}
html[data-theme=dark] .app .hero.oro{background:linear-gradient(135deg,#6b4600 0%,#a87418 100%)}
html[data-theme=dark] .app .hero.rojo{background:linear-gradient(135deg,#6b1616 0%,#a8352c 100%)}
html[data-theme=dark] .app .hero.verde{background:linear-gradient(135deg,#0c4a2f 0%,#178553 100%)}
.det-f .ph .ic{width:20%}

/* ===================== Panel EXACTO al boceto (2026-11-02) ===================== */
:root{--bp-paper:#ffffff;--bp-panel:#eef1ef;--bp-fill:#f6f8f6;--bp-edge:#e3e7e3;--bp-ink:#141615;--bp-mute:#737a76;--bp-faint:#9aa09b;--bp-soft:#e2f4f9;--bp-deep:#0a6f8c;
  --bp-cut:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
html[data-theme=dark]{--bp-paper:#0e1211;--bp-panel:#161b19;--bp-fill:#141c1a;--bp-edge:#232a27;--bp-ink:#eef1ed;--bp-mute:#99a19b;--bp-faint:#6e7671;--bp-soft:#10302f;--bp-deep:#27bfe6}
html body.en-app,body.en-app{background:var(--bp-paper);color:var(--bp-ink)}
/* Barra superior: avatar + nombre + plan; Cerrar sesión y tema a la derecha */
body.en-app .top{position:sticky;top:0;z-index:30;background:var(--bp-paper);border-bottom:1px solid var(--bp-edge);padding:14px max(24px,calc((100vw - 1240px)/2 + 24px));gap:9px}
body.en-app .top .brand{display:none}
.me-chip{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
.me-chip .av{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--c);color:#fff;font:400 15px Michroma,sans-serif;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.me-chip .nm{display:grid;min-width:0}.me-chip .nm b{font-size:13.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.me-chip .nm small{color:var(--bp-faint);font-size:12px;white-space:nowrap}
body.en-app #who{order:1;margin:0}
html body.en-app .top .theme-toggle{order:2;margin:0;width:38px;height:36px;border:0;background:var(--bp-panel);color:var(--bp-ink);border-radius:0;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.salir-b{gap:8px}.salir-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Contenedor y saludo */
.wrap:has(.app){max-width:1240px;padding:30px max(24px,env(safe-area-inset-left,0px)) 64px}
.app{display:block}.app-main{display:block}
.app .greet{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 24px}
.app .greet .hola{font:400 clamp(24px,3.4vw,34px)/1.3 Michroma,sans-serif;margin:0}
.app .greet p{margin:7px 0 0;font-size:14px;color:var(--bp-mute)}
/* Pestañas a la izquierda, sin íconos, con el corte */
html body .app .tabbar{position:static;display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap;background:none;box-shadow:none;padding:0;margin:0 0 26px;width:auto;border-radius:0}
html body .app .tb{flex:0 0 auto;flex-direction:row;padding:11px 20px;font-size:13px;font-weight:500;color:var(--bp-mute);background:var(--bp-panel);border-radius:0;clip-path:var(--bp-cut)}
html body .app .tb:hover{color:var(--bp-ink)}
html body .app .tb.on{background:var(--c);color:#fff}html[data-theme=dark] body .app .tb.on{color:#04181e}
.app .tb .tb-i{display:none}.app .tb em{top:6px;right:6px}
/* Tarjetas: relleno gris claro, borde fino y la esquina cortada (como el boceto) */
.app .card,.app .kpi{--k:16px;background:var(--bp-edge)!important;position:relative;isolation:isolate;box-shadow:none!important;border:0!important;border-radius:0!important;
  clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%)}
.app .card::before,.app .kpi::before{content:'';position:absolute;inset:1px;z-index:-1;background:var(--bp-fill);clip-path:polygon(0 0,calc(100% - var(--k) + .5px) 0,100% calc(var(--k) - .5px),100% 100%,0 100%)}
.app button.card,.app button.kpi{display:block;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
/* Cifras */
.app .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 28px}
.app .kpi{padding:18px 20px}
.app .kpi small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--bp-faint)}
.app .kpi b{display:block;margin-top:11px;font:400 28px/1.15 Michroma,sans-serif;letter-spacing:-.01em;color:var(--bp-ink)}
.app .kpi.due{background:color-mix(in srgb,var(--bad) 42%,var(--bp-edge))!important}.app .kpi.due b{color:var(--bad)}
/* Inicio: seguimiento + columna derecha */
.app .pane{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start;margin-bottom:30px}
.app .block-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.app .block-h h2{font:400 17px Michroma,sans-serif;margin:0}
.app .track{--k:20px;padding:0;overflow:hidden}
.app .track .vh{display:flex;gap:16px;padding:20px;border-bottom:1px solid var(--bp-edge);align-items:center}
.app .track .vthumb{width:120px;flex:none;aspect-ratio:16/11;display:grid;place-items:center;overflow:hidden;background:linear-gradient(150deg,var(--bp-panel),var(--bp-fill));clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}
.app .track .vthumb img{width:100%;height:100%;object-fit:cover;clip-path:none!important}
.app .track .vthumb .ph{background:none!important;clip-path:none!important;width:100%;height:100%;display:grid;place-items:center}
.app .track .vthumb .ic{width:46%;height:auto;color:color-mix(in srgb,var(--c) 55%,var(--bp-faint))}
.app .vh-x{display:grid;gap:3px;min-width:0}.app .vh-t{font:400 17px/1.35 Michroma,sans-serif}
.app .specs{color:var(--bp-faint);font-size:12.5px}.app .tags{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap}
.app .stepper-box{display:block;padding:20px 22px 24px}
.app .vacio-seg{padding:24px;display:grid;gap:14px;justify-items:start}.app .vacio-seg p{margin:0}
.app .pane-side{display:grid;gap:16px}
.app .aside-card{padding:20px}
.app .aside-card h3{font:400 15px Michroma,sans-serif;margin:0}
.app .aside-card .big{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px}
.app .aside-card .big span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bp-faint)}
.app .aside-card .big b{font:400 24px Michroma,sans-serif;color:var(--bad)}
.app .aside-card p.sm{font-size:13px;margin:6px 0 0}
.app .aside-card .btn{width:100%;margin-top:16px}
.app .aside-card .chip{margin-top:14px;justify-content:flex-start}
.app .feed{display:grid;gap:14px;margin-top:12px}.app .feed .ev{border:0;padding:0}
.app .feed small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bp-faint)}.app .feed p{font-size:13.5px;margin:2px 0 0}
.app .buscando{display:flex;gap:14px;align-items:center;padding:18px 20px;margin-bottom:24px}.app .buscando>.ic{width:26px;height:26px;color:var(--c)}.app .buscando p{margin:2px 0 0}
.app #elegidos{margin-bottom:24px}
/* Estados (pastillas) */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:5px 12px;white-space:nowrap;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.live{background:var(--bp-soft);color:var(--bp-deep)}
.pill.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.pill.due{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
/* Mis carros */
.app .subtabs{display:inline-flex;margin:0 0 18px;background:var(--bp-panel);clip-path:var(--bp-cut)}
.app .subtabs button{border:0;background:transparent;font:500 12.5px Poppins,sans-serif;color:var(--bp-mute);padding:9px 18px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.app .subtabs button.on{background:var(--c);color:#fff}html[data-theme=dark] .app .subtabs button.on{color:#04181e}
.app .subtabs .n{font-size:11px;opacity:.85}
.app .cars-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.app .car-b{padding:0;overflow:hidden}
.app .car-b .ph{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,var(--bp-panel),var(--bp-fill))!important;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)!important}
.app .car-b .ph img{width:100%;height:100%;object-fit:cover;clip-path:none!important}
.app .car-b .ph>.ph{background:none!important;clip-path:none!important}
.app .car-b .ph .ic{width:40%;height:auto;color:color-mix(in srgb,var(--c) 50%,var(--bp-faint))}
.app .car-b .mtag{position:absolute;top:0;left:0;z-index:1;font-size:10px;font-weight:600;letter-spacing:.04em;color:#fff;background:var(--bp-deep);padding:5px 14px 5px 11px;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%)}
html[data-theme=dark] .app .car-b .mtag{background:#0b7ea0}
.app .car-b .mtag.ok{background:var(--ok)}
.app .car-b .pad{display:block;padding:15px 16px}
.app .car-b .ct{display:block;font:400 15px/1.35 Michroma,sans-serif}
.app .car-b .meta{display:block;color:var(--bp-faint);font-size:12px;margin-top:4px;min-height:1em}
.app .car-b .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:13px}
.app .car-b .row b{font:400 16px Michroma,sans-serif}
/* Pagos: dos columnas + formas de pago */
.app .pg-cols{gap:18px;margin-top:0}
.app .pg-col{--k:18px;padding:22px 24px}
.app .pg-col-h{display:grid;gap:10px;padding:0 0 4px;border:0}
html body .app .pg-col-h span{font:600 11px Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--bp-faint)}
.app .pg-col-h b{font:400 28px Michroma,sans-serif}
.app .formas{margin-top:18px}.app .formas .acc{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.app .formas .acc .btn{width:auto;margin:0}
/* Perfil */
.app .profile{--k:18px;padding:26px;max-width:580px}
.app .profile .r{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--bp-edge);font-size:14px}
.app .profile .r:first-child{border-top:0}.app .profile .r span{color:var(--bp-faint)}.app .profile .r b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.app .profile .acc{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.app .perfil-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
/* Detalle y elegidos dentro del nuevo estilo */
.app .linkish{color:var(--bp-mute)}
/* Teléfono */
@media(max-width:860px){.app .pane{grid-template-columns:1fr}.app .cars-grid{grid-template-columns:1fr 1fr}.me-chip .nm small{display:none}}
@media(max-width:760px){
  .wrap:has(.app){padding:18px 16px 48px}
  html body .app .tabbar{position:static;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 20px;padding:0 16px}
  html body .app .tb{padding:10px 16px;font-size:13px}
  body:has(.tabbar) #toast{bottom:20px}
  .app .kpis{grid-template-columns:1fr 1fr}.app .kpis>.kpi:last-child{grid-column:1/-1}
  .salir-b{padding:7px 11px;gap:6px}
}
@media(max-width:560px){.app .cars-grid{grid-template-columns:1fr}.app .greet .btn{width:100%}.app .track .vh{flex-direction:column;align-items:flex-start}.app .track .vthumb{width:100%}}
.app .track .fases li{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border-radius:0;padding:0;box-shadow:none!important}
.app .track .fases li .m{border-radius:0}
.app .pg-col-h b.oro-t{color:var(--bad)!important}
html[data-theme=dark] .app .pill{border:0}
html[data-theme=dark] .app .pill.live{background:#10302f;color:#7fdcf5}
html[data-theme=dark] .app .pill.ok{background:#12301f;color:#5fd59b}
html[data-theme=dark] .app .pill.due{background:#341815;color:#ff8b7d}
/* ===================== CELULAR: barra de pestañas abajo (como una app) y tarjetas compactas ===================== */
@media(max-width:720px){
  html body .app .tabbar{position:fixed!important;left:0;right:0;bottom:0;z-index:40;display:grid!important;grid-template-columns:repeat(4,1fr);gap:0;margin:0!important;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom))!important;background:var(--bp-paper,#fff)!important;border-top:1px solid var(--bp-line,#e3e6e4);overflow:visible}
  html body .app .tabbar .tb{display:flex!important;flex-direction:column;align-items:center;gap:3px;padding:6px 2px!important;font-size:11px!important;line-height:1.2;text-align:center;white-space:nowrap;min-width:0;border:0!important;background:none!important;box-shadow:none!important;clip-path:none!important;color:var(--bp-mute)!important;position:relative}
  html body .app .tabbar .tb .tb-i{display:block!important}.app .tb .tb-i .ic{width:22px;height:22px}
  html body .app .tabbar .tb.on{color:var(--c)!important}
  html body .app .tabbar .tb.on::before{content:'';position:absolute;top:-6px;left:28%;right:28%;height:3px;background:var(--c)}
  html body .app .tabbar .tb em{top:2px!important;right:calc(50% - 18px)!important}
  body.en-app{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  body.en-app #toast{bottom:calc(88px + env(safe-area-inset-bottom))!important}
  .app .greet{margin:0 0 18px!important;align-items:center}
  .app .greet .hola{font-size:22px!important}
  .app .greet .btn{width:auto!important;padding:9px 14px!important;font-size:13px!important}
  .app .track .vh{flex-direction:row!important;align-items:center!important;gap:14px}
  .app .track .vthumb{width:96px!important}
  .app .track .vh-t{font-size:15px!important}
  .app .aside-card .big{flex-direction:column;align-items:flex-start;gap:4px}
  .app .aside-card .big b{font-size:22px!important}
  .app .car-b .row{flex-wrap:wrap}
  .app .car-b .row b{font-size:14px!important}
  .app .kpi b{font-size:22px!important}
  .app .pg-col-h b{font-size:24px!important}
}
@media(max-width:420px){.top .salir-b{font-size:0!important;gap:0!important;padding:8px 10px!important}.top .salir-b svg{width:18px;height:18px}}
/* Planes alineados: encabezados a la misma altura y botón al pie */
.planes{align-items:stretch}
.plan{display:flex!important;flex-direction:column;align-items:stretch}
.plan>.plan-tag{align-self:flex-start}
.plan ul{flex:1}
.plan>.btn{margin-top:auto}
.plan-tag.ghost{background:transparent!important;color:var(--bp-mute,#5b6560)!important;box-shadow:inset 0 0 0 1px var(--bp-line,#dfe3e1)}
/* Lista de ciudades: mismo aspecto que los campos de texto */
select{font:inherit;padding:11px 40px 11px 14px;border:1px solid var(--line);width:100%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px;-webkit-appearance:none;appearance:none;color:inherit}
select:focus{outline:2px solid var(--c);outline-offset:-1px}
.auth-mode select{height:50px;padding-left:16px;background-color:#f7f9f8}
html[data-theme=dark] select{background-color:#131619;border-color:#30373b;color:#eef1ed}
.codigo-in{font-size:26px!important;letter-spacing:.45em;text-align:center;font-family:Michroma,Poppins,sans-serif}
.cod-acc{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.plan ul{align-content:start}
.plan>.plan-tag,.plan>.plan-tag.mine{font-size:11px!important;line-height:1.4!important;padding:4px 12px!important;margin:0!important}
.plan>.btn{width:100%}
/* Solicitud: años desde/hasta y puja máxima sugerida o personalizada */
.svc-row{grid-template-columns:minmax(0,1.6fr) 92px 92px auto!important;align-items:end}
.ano-l{display:grid;gap:3px;margin:0}.ano-l small{font-size:11px;color:var(--mute);letter-spacing:.04em}
.ano-l select{padding-right:30px;background-position:right 8px center}
.puja-box{display:grid;gap:6px;align-content:start}
.puja-l{font-size:14px;font-weight:500}
.puja-box .monto-opc{margin:0}
.puja-box .monto-opc button{padding:12px 14px}
.puja-box .monto-opc button b{font-size:17px}
@media(max-width:560px){.svc-row{grid-template-columns:1fr 1fr auto!important}.svc-row>input[data-k=modelo]{grid-column:1/-1}}
/* Presupuesto primero y la puja calculada debajo */
.presu-sec{display:grid;gap:14px;padding:16px;background:color-mix(in srgb,var(--c) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.presu-l{font-weight:500}.presu-l input{font-size:20px;font-weight:600;height:52px}
.puja-row{display:flex;gap:8px;align-items:stretch}.puja-row .puja-in{flex:1;min-width:0;font-size:18px;font-weight:600}
.puja-in.fija{background:var(--bp-panel,#eef1ef)!important;color:var(--bp-ink,#141917);cursor:not-allowed}
.puja-row .btn{white-space:nowrap}
/* Tarjeta de pasos de la solicitud: texto legible sobre el fondo claro de las tarjetas */
.app .card.svc-hero{color:var(--bp-ink,#141917)!important}
.app .card.svc-hero h2,.app .card.svc-hero b{color:var(--bp-ink,#141917)!important}
.app .card.svc-hero .fine,.app .card.svc-hero small,.app .card.svc-hero p{color:var(--bp-mute,#5b6560)!important}
/* Botón con contorno: dibuja también los bordes de las esquinas cortadas */
.btn.ghost{--gb:var(--line);--gd:linear-gradient(to bottom right,transparent calc(50% - .75px),var(--gb) calc(50% - .75px),var(--gb) calc(50% + .75px),transparent calc(50% + .75px));background-image:var(--gd),var(--gd)!important;background-size:var(--cc) var(--cc)!important;background-position:0 0,100% 100%!important;background-repeat:no-repeat!important;box-shadow:inset 0 0 0 1px var(--gb)!important}
.btn.ghost:hover{--gb:var(--c)}
html[data-theme=dark] .btn.ghost{--gb:#30373b}html[data-theme=dark] .btn.ghost:hover{--gb:var(--c)}
/* Puja máxima: secundaria frente al presupuesto; en gris mientras está en "sugerido" */
.puja-box{max-width:340px;gap:4px}
.puja-box .puja-l{font-size:12.5px;font-weight:500;color:var(--mute)}
.puja-row .puja-in{font-size:15px!important;font-weight:500!important;padding:8px 10px!important;min-height:0!important}
.puja-row .btn{padding:7px 12px!important;font-size:12.5px!important}
.puja-box small{font-size:11.5px}
.puja-box.sug .puja-in{background:transparent!important;color:var(--mute)!important;box-shadow:inset 0 0 0 1px var(--line)!important;border-color:var(--line)!important}
.puja-box.sug .puja-l,.puja-box.sug small{color:var(--mute);opacity:.85}
html[data-theme=dark] .puja-box.sug .puja-in{color:#7d8784!important;box-shadow:inset 0 0 0 1px #30373b!important;border-color:#30373b!important}
/* Solicitud: vehículos elegidos del catálogo (tarjetas tocables) */
.svc-picks .svc-pick{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:center;padding:10px;background:var(--bp-panel,#f3f5f4);cursor:pointer;width:100%;transition:box-shadow .15s}
.svc-picks .svc-pick:hover,.svc-picks .svc-pick:focus-visible{box-shadow:inset 0 0 0 2px var(--c)}
.svc-pick .sp-f{position:relative;flex:none;width:92px;height:68px}
.svc-pick .sp-f img,.svc-pick .sp-f .ph{width:92px!important;height:68px!important;object-fit:cover;display:grid;place-items:center}
.svc-pick .sp-f em{position:absolute;left:4px;bottom:4px;background:#141917d9;color:#fff;font-style:normal;font-size:10px;padding:1px 5px}
.svc-pick .sp-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.svc-pick .sp-x b{font-size:13.5px}.svc-pick .sp-x small{font-size:11.5px}
.svc-pick .sp-m{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:500}
.sp-cd{font-style:normal;background:#eef1f0;padding:1px 7px;font-weight:600}.sp-cd.soon{background:#fde8e6;color:#8f1d14}.sp-cd.past{color:var(--mute)}
.svc-pick .sp-go{font-size:22px;color:var(--mute);padding:0 2px}
.sp-hint{margin:2px 0 0}
html[data-theme=dark] .svc-picks .svc-pick{background:#1a1f22}html[data-theme=dark] .sp-cd{background:#262c30}html[data-theme=dark] .sp-cd.soon{background:#3a1e1b;color:#ffb4a8}
/* Vista rápida del vehículo */
.sheet.vr .sheet-body{gap:12px}
.vr-nav{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute)}
.vr-nav button{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;background:var(--bp-panel,#eef1f0);font-size:18px;color:var(--ink)}
.vr-gal{position:relative;background:#1b2226;aspect-ratio:16/10;overflow:hidden}
.vr-f,.vr-f img,.vr-f .ph{width:100%;height:100%;object-fit:cover;display:grid;place-items:center}
.vr-gal .vr-a,.vr-gal .vr-b{all:unset;cursor:pointer;position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;display:grid;place-items:center;background:#ffffffeb;color:#141917;font-size:20px}
.vr-gal .vr-a{left:8px}.vr-gal .vr-b{right:8px}
.vr-n{position:absolute;right:8px;bottom:8px;background:#141917d9;color:#fff;font-style:normal;font-size:11.5px;padding:3px 8px}.vr-n:empty{display:none}
.vr-mini{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.vr-mini button{all:unset;cursor:pointer;flex:0 0 64px;height:46px;box-shadow:inset 0 0 0 2px transparent}
.vr-mini button img{width:100%;height:100%;object-fit:cover;display:block}
.vr-mini button.on{box-shadow:0 0 0 2px var(--c)}
.vr-t h3{margin:0;font:400 17px/1.4 Michroma,Poppins,sans-serif}.vr-t small{font-size:12px}
.vr-k{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vr-k>div{padding:10px 12px;display:flex;flex-direction:column;line-height:1.3}.vr-k small{font-size:11px}.vr-k b{font-size:17px}
.vr-bid{background:#092d3b;color:#bcd9e3}.vr-bid b{color:#7de2f8}
.vr-cd{background:#fff7e8;color:#6b4300}.vr-cd.soon{background:#fde8e6;color:#8f1d14}.vr-cd.past{background:var(--bp-panel,#eef1f0);color:var(--mute)}
html[data-theme=dark] .vr-cd{background:#2c2312;color:#f3cf8e}html[data-theme=dark] .vr-cd.soon{background:#3a1e1b;color:#ffb4a8}
.vr-dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vr-dl dt{font-size:11px;color:var(--mute)}.vr-dl dd{margin:2px 0 0;font-size:13px;font-weight:500;overflow-wrap:anywhere}
html[data-theme=dark] .vr-dl{border-color:#2a3034}
.vr-acc{display:flex;gap:10px;position:sticky;bottom:-16px;background:inherit;padding:12px 0 4px;margin-top:4px}
.sheet.vr{background:#fff}html[data-theme=dark] .sheet.vr{background:#131619}
.vr-acc .btn{flex:1;justify-content:center}.vr-acc .vr-quitar{flex:0 0 auto;color:#b4261a}
@media(min-width:861px){
  .sheet.vr{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:500px;clip-path:none}
  .sheet.vr[open]{animation:lado .22s ease}
  .sheet.vr .sheet-body{flex:1}
}
@keyframes lado{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.sheet.vr[open]{animation:none}}
.svc-pick .sp-m>*{white-space:nowrap}

/* Aceptar el plazo de 5 días y la condición de no reembolso (2026-11-10) */
.acepto{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;font-size:13px;line-height:1.4;text-align:left;cursor:pointer}
.acepto input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:#12add6}
.porque .fine,.sheet .fine{margin-top:8px}