/* MOTOCADEST v1.0 — mobile-first */
:root{
  --azul-prof:#123B5D; --azul-tec:#1976D2; --naranja:#F28C28;
  --fondo:#F4F6F8; --sup:#FFFFFF; --sup2:#EAF0F6;
  --txt:#17212B; --txt2:#5B6573; --borde:#D9E2EC;
  --ok:#1E8E3E; --warn:#B7791F; --crit:#C62828; --info:#1976D2;
  --radio:14px; --sombra:0 2px 10px rgba(18,59,93,.08);
  --tabbar-h:64px;
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#0F1722; --sup:#182435; --sup2:#1F2F45;
    --txt:#EAF0F6; --txt2:#9FB0C3; --borde:#2A3B52;
    --sombra:0 2px 10px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{font-size:17px}
body{margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--fondo); color:var(--txt); line-height:1.5}
#app{max-width:640px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; background:var(--fondo)}
#topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; background:linear-gradient(135deg,var(--azul-prof),#1B4E7E); color:#fff}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:.5px}
.brand-mark{background:var(--naranja); color:#123B5D; font-weight:900; border-radius:8px; padding:.1rem .45rem; font-size:.9rem}
#vehiclePicker{margin-left:auto; max-width:45%; padding:.4rem .5rem; border-radius:10px; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; font-size:.9rem}
#vehiclePicker option{color:#17212B}
#view{flex:1; padding:1rem 1rem calc(var(--tabbar-h) + 1.2rem)}
#tabbar{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:640px; height:var(--tabbar-h); display:flex; background:var(--sup); border-top:1px solid var(--borde); z-index:20; padding-bottom:env(safe-area-inset-bottom)}
#tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; color:var(--txt2); font-size:.72rem}
#tabbar a .ti{font-size:1.25rem; line-height:1}
#tabbar a.activo{color:var(--azul-tec); font-weight:700}
h1{font-size:1.35rem; margin:.2rem 0 .8rem}
h2{font-size:1.1rem; margin:1.2rem 0 .6rem}
h3{font-size:1rem; margin:.8rem 0 .4rem}
p{margin:.4rem 0}
.card{background:var(--sup); border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra); padding:.9rem 1rem; margin-bottom:.8rem}
.card.tint{background:linear-gradient(135deg,var(--azul-prof),#1E5A8F); color:#fff; border:none}
.card.tint .muted{color:#BCD3E8}
.row{display:flex; align-items:center; gap:.6rem}
.spread{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.muted{color:var(--txt2); font-size:.88rem}
.small{font-size:.82rem}
.mono{font-variant-numeric:tabular-nums}
.btn{display:inline-block; border:none; border-radius:14px; padding:.7rem 1.1rem; font-size:1rem; font-weight:700; cursor:pointer; text-decoration:none; text-align:center; color:#fff; min-height:48px; background:linear-gradient(180deg,#5BA2E8 0%,#1976D2 60%,#1565B8 100%); box-shadow:0 3px 0 #0D4C8C,0 6px 14px rgba(18,59,93,.22),inset 0 1px 0 rgba(255,255,255,.4); text-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px); box-shadow:0 0 0 #0D4C8C,0 2px 6px rgba(18,59,93,.2),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.sec{background:linear-gradient(180deg,#FFFFFF 0%,#EAF0F6 100%); color:var(--txt); border:1px solid var(--borde); box-shadow:0 3px 0 #B9C9DA,0 6px 12px rgba(18,59,93,.1),inset 0 1px 0 #fff; text-shadow:none}
.btn.sec:active{transform:translateY(3px); box-shadow:0 0 0 #B9C9DA,0 2px 6px rgba(18,59,93,.1),inset 0 1px 0 #fff}
.btn.warn{background:linear-gradient(180deg,#FFB85E 0%,#F28C28 60%,#DE7A12 100%); color:#123B5D; box-shadow:0 3px 0 #A05A08,0 6px 14px rgba(178,121,31,.25),inset 0 1px 0 rgba(255,255,255,.45); text-shadow:0 1px 0 rgba(255,255,255,.35)}
.btn.warn:active{transform:translateY(3px); box-shadow:0 0 0 #A05A08,0 2px 6px rgba(178,121,31,.2),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.danger{background:linear-gradient(180deg,#E05A5A 0%,#C62828 60%,#A51F1F 100%); color:#fff; box-shadow:0 3px 0 #6E1414,0 6px 14px rgba(198,40,40,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.danger:active{transform:translateY(3px); box-shadow:0 0 0 #6E1414,0 2px 6px rgba(198,40,40,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.ghost{background:transparent; color:var(--azul-tec); border:1px dashed var(--azul-tec); box-shadow:none; text-shadow:none}
.btn.block{width:100%; margin:.4rem 0}
.btn.sm{padding:.45rem .8rem; font-size:.88rem; min-height:40px}
.acceso{box-shadow:0 3px 0 var(--borde),var(--sombra); transition:transform .08s}
.acceso:active{transform:translateY(2px); box-shadow:0 1px 0 var(--borde),var(--sombra)}
@media print{
  #topbar,#tabbar,#toast,.no-print{display:none !important}
  #view{padding:0}
  body{background:#fff}
  .card{box-shadow:none; break-inside:avoid}
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem}
.acceso{display:flex; flex-direction:column; align-items:center; gap:.35rem; background:var(--sup); border:1px solid var(--borde); border-radius:var(--radio); padding:.8rem .4rem; text-decoration:none; color:var(--txt); font-size:.82rem; text-align:center; box-shadow:var(--sombra)}
.acceso .ti{font-size:1.5rem}
.acceso.off{opacity:.55}
.badge{display:inline-block; font-size:.75rem; font-weight:700; border-radius:999px; padding:.15rem .6rem; margin:.1rem .15rem .1rem 0; white-space:nowrap}
.b-verificada{background:#E3F2FD; color:#0D47A1; border:1px solid #90CAF9}
.b-orientativa{background:#FFF3E0; color:#8D4E00; border:1px solid #FFCC80}
.b-pendiente{background:#F1F3F5; color:#5B6573; border:1px solid #D9E2EC}
.b-nodisponible{background:#FCE4EC; color:#880E4F; border:1px solid #F48FB1}
.b-ok{background:#E8F5E9; color:#1B5E20; border:1px solid #A5D6A7}
.b-proximo{background:#FFF8E1; color:#7A5C00; border:1px solid #FFE082}
.b-vencido{background:#FFEBEE; color:#B71C1C; border:1px solid #EF9A9A}
.b-crit{background:#B71C1C; color:#fff; border:1px solid #B71C1C}
.b-info{background:#E3F2FD; color:#0D47A1; border:1px solid #90CAF9}
.b-demo{background:#EDE7F6; color:#4527A0; border:1px solid #B39DDB}
@media (prefers-color-scheme: dark){
  .b-verificada,.b-info{background:#0D3B66; color:#BBDEFB; border-color:#1565C0}
  .b-orientativa{background:#4A3200; color:#FFD54F; border-color:#8D6E00}
  .b-pendiente{background:#26313F; color:#9FB0C3; border-color:#3A4C63}
  .b-nodisponible{background:#4A1030; color:#F48FB1; border-color:#880E4F}
  .b-ok{background:#0E3B1E; color:#A5D6A7; border-color:#1E8E3E}
  .b-proximo{background:#4A3D00; color:#FFE082; border-color:#8D6E00}
  .b-vencido{background:#4A1212; color:#EF9A9A; border-color:#C62828}
  .b-demo{background:#2E2350; color:#B39DDB; border-color:#5E35B1}
}
label{display:block; font-weight:600; margin:.7rem 0 .25rem; font-size:.92rem}
input,select,textarea{width:100%; padding:.7rem .8rem; font-size:1rem; border:1px solid var(--borde); border-radius:10px; background:var(--sup); color:var(--txt); font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul-tec); border-color:var(--azul-tec)}
textarea{min-height:84px; resize:vertical}
input[type=checkbox],input[type=radio]{width:1.25rem; height:1.25rem; accent-color:var(--azul-tec)}
.checkline{display:flex; gap:.6rem; align-items:flex-start; margin:.55rem 0; font-weight:400}
fieldset{border:1px solid var(--borde); border-radius:var(--radio); margin:.8rem 0; padding:.8rem}
legend{font-weight:700; padding:0 .4rem}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{padding:.5rem .4rem; border-bottom:1px solid var(--borde); text-align:left; vertical-align:top}
th{color:var(--txt2); font-size:.8rem; text-transform:uppercase}
.timeline{position:relative; padding-left:1.2rem}
.timeline:before{content:""; position:absolute; left:.35rem; top:.4rem; bottom:.4rem; width:2px; background:var(--borde)}
.tl-item{position:relative; margin-bottom:.9rem}
.tl-item:before{content:""; position:absolute; left:-1.05rem; top:.35rem; width:.7rem; height:.7rem; border-radius:50%; background:var(--azul-tec); border:2px solid var(--sup)}
.tl-item.crit:before{background:var(--crit)} .tl-item.warn:before{background:var(--naranja)} .tl-item.ok:before{background:var(--ok)}
.paso{border:1px solid var(--borde); border-radius:var(--radio); padding:.9rem; margin-bottom:.7rem; background:var(--sup)}
.paso.hecho{opacity:.75; border-color:var(--ok)}
.paso-num{background:var(--azul-prof); color:#fff; font-weight:800; border-radius:50%; width:1.9rem; height:1.9rem; display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem}
.svgbox{background:var(--sup2); border:1px solid var(--borde); border-radius:12px; padding:.5rem; margin:.6rem 0; text-align:center}
.svgbox svg{max-width:100%; height:auto}
.alert{border-radius:var(--radio); padding:.8rem 1rem; margin-bottom:.7rem; border:1px solid}
.alert.crit{background:#FFEBEE; border-color:#EF9A9A; color:#7F1D1D}
.alert.warn{background:#FFF8E1; border-color:#FFE082; color:#5D4A00}
.alert.info{background:#E3F2FD; border-color:#90CAF9; color:#0D3A66}
.alert.ok{background:#E8F5E9; border-color:#A5D6A7; color:#1B5E20}
@media (prefers-color-scheme: dark){
  .alert.crit{background:#3A1212; color:#F8BBD0; border-color:#7F1D1D}
  .alert.warn{background:#3A2E00; color:#FFE082; border-color:#8D6E00}
  .alert.info{background:#0E2A45; color:#BBDEFB; border-color:#1565C0}
  .alert.ok{background:#0E2E1A; color:#A5D6A7; border-color:#1E8E3E}
}
.kv{display:flex; justify-content:space-between; gap:.6rem; padding:.35rem 0; border-bottom:1px dashed var(--borde); font-size:.93rem}
.kv:last-child{border-bottom:none}
.kv b{text-align:right}
#toast{position:fixed; bottom:calc(var(--tabbar-h) + 1rem); left:50%; transform:translateX(-50%) translateY(20px); background:#17212B; color:#fff; padding:.7rem 1.2rem; border-radius:999px; opacity:0; transition:.25s; z-index:99; max-width:90%; text-align:center; font-size:.92rem}
#toast.ver{opacity:1; transform:translateX(-50%) translateY(0)}
.prog{height:10px; background:var(--sup2); border-radius:999px; overflow:hidden; margin:.4rem 0}
.prog i{display:block; height:100%; background:linear-gradient(90deg,var(--azul-tec),var(--naranja))}
details{border:1px solid var(--borde); border-radius:10px; padding:.6rem .8rem; margin:.5rem 0; background:var(--sup)}
summary{font-weight:700; cursor:pointer}
.zona{cursor:pointer}
.zpunto{fill:#1976D2; stroke:#fff; stroke-width:2.5}
.znum{fill:#fff; font-size:12px; font-weight:800; text-anchor:middle; pointer-events:none}
.zona:hover .zpunto{fill:#F28C28}
.zleyenda{display:flex; flex-direction:column; gap:.45rem; margin:.4rem 0 .6rem}
.zleyenda .zona{display:flex; align-items:center; gap:.6rem; background:linear-gradient(180deg,#E9F2FD 0%,#C9E0F8 100%); border:1px solid #A9CBEF; border-radius:14px; padding:.55rem .8rem; font-size:.92rem; font-weight:700; color:#123B5D; cursor:pointer; box-shadow:0 3px 0 #8FB8E8,0 6px 12px rgba(25,118,210,.14),inset 0 1px 0 #fff; transition:transform .08s,box-shadow .08s}
.zleyenda .zona:active{transform:translateY(3px); box-shadow:0 0 0 #8FB8E8,0 2px 6px rgba(25,118,210,.12),inset 0 1px 0 #fff}
.zleyenda .zn{background:linear-gradient(180deg,#5BA2E8,#1565B8); color:#fff; border-radius:50%; width:1.7rem; height:1.7rem; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800; flex-shrink:0; box-shadow:0 2px 0 #0D4C8C}
.diagrama{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--borde); margin:.6rem 0 .2rem; background:#fff}
.diagrama img{width:100%; height:auto; display:block}
.marca{position:absolute; transform:translate(-50%,-50%); width:32px; height:32px; border-radius:50%; border:2px solid #fff; background:linear-gradient(180deg,#5BA2E8,#1565B8); color:#fff; font-weight:800; font-size:.95rem; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 3px 0 #0D4C8C,0 4px 10px rgba(0,0,0,.35); padding:0}
.marca:active{transform:translate(-50%,-50%) translateY(2px); box-shadow:0 1px 0 #0D4C8C}
.leyenda-col{display:flex; flex-direction:column; gap:.45rem; margin:.4rem 0 .6rem}
.leg{display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; background:linear-gradient(180deg,#E9F2FD 0%,#C9E0F8 100%); border:1px solid #A9CBEF; border-radius:14px; padding:.65rem .85rem; font-size:.92rem; cursor:pointer; box-shadow:0 3px 0 #8FB8E8,0 6px 12px rgba(25,118,210,.14),inset 0 1px 0 #fff; text-align:left; color:#123B5D; width:100%; transition:transform .08s,box-shadow .08s}
.leg:active{transform:translateY(3px); box-shadow:0 0 0 #8FB8E8,0 2px 6px rgba(25,118,210,.12),inset 0 1px 0 #fff}
.leg b{font-size:.95rem; color:#0D47A1}
.leg .small{font-size:.78rem; color:#3E5A78}
.centrado{text-align:center}
.zona:hover .z-fondo{fill:rgba(242,140,40,.35)}
.z-fondo{fill:rgba(25,118,210,.12); stroke:var(--azul-tec); stroke-width:1.5; transition:.15s}
.z-label{font-size:11px; fill:var(--txt); font-weight:700; pointer-events:none}
.hidden{display:none!important}
.centrado{text-align:center}
.mt{margin-top:.8rem}
img.foto{max-width:100%; border-radius:10px; margin:.4rem 0}
.legal{font-size:.9rem} .legal h3{margin-top:1rem}
.firma{border-top:1px solid var(--borde); margin-top:1.5rem; padding-top:.5rem; font-size:.8rem; color:var(--txt2); text-align:center}

/* VEHICADEST v2.1 — conmutador grande, pico y placa dual, plan+guías */
.switch-card{padding:1.1rem .8rem}
.switch-row{gap:.9rem; justify-content:center}
.tipo-btn{font-size:1.3rem !important; padding:1rem 2.2rem !important; min-width:10rem; border-radius:16px !important; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease !important}
.tipo-btn:hover{transform:translateY(-3px) scale(1.05); filter:brightness(1.07); box-shadow:0 10px 24px rgba(0,0,0,.28), 0 4px 0 rgba(0,0,0,.18)}
.tipo-btn:active{transform:translateY(1px) scale(1.01); box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pyp-estado{border-radius:12px; padding:.9rem 1rem; margin-top:.6rem; font-size:1.03rem; line-height:1.45}
.pyp-estado.ok{background:linear-gradient(180deg,#E8F5E9,#C9E7CB); border:2px solid #43A047; color:#1B5E20; box-shadow:0 3px 10px rgba(67,160,71,.25)}
.pyp-estado.crit{background:linear-gradient(180deg,#FFEBEE,#FFCDD2); border:2px solid #E53935; color:#B71C1C; box-shadow:0 3px 10px rgba(229,57,53,.25)}
.pyp-estado.neutro{background:var(--sup2); border:2px dashed var(--borde); color:var(--txt)}
#updBanner{position:fixed;left:16px;right:16px;bottom:78px;z-index:300;background:#101828;color:#fff;
  border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:15px;font-weight:600;}
#updBanner button{margin-left:auto;background:#F2994A;color:#fff;border:none;border-radius:10px;
  padding:10px 18px;font-weight:800;font-size:15px;cursor:pointer;flex-shrink:0;}
.alert-opts{display:flex; gap:.45rem; margin-top:.55rem; flex-wrap:wrap}
.plan-card{background:linear-gradient(180deg,#EAF3FE,#D8EAFB); border:1px solid #A9CBEF}
.guia-card{background:linear-gradient(180deg,#FFF8E6,#FCEFC7); border:1px solid #F0B429; border-radius:12px; padding:.8rem .95rem; margin:-.4rem 0 .9rem; box-shadow:0 2px 0 #D89A12, 0 4px 10px rgba(240,180,41,.18); color:#5D4037}
.guia-card details{margin:.4rem 0}
.guia-card summary{cursor:pointer; color:#8D5A00}

.kit-item{display:flex; gap:.6rem; align-items:flex-start; padding:.55rem .2rem; border-bottom:1px solid var(--borde); cursor:pointer}
.kit-item:last-of-type{border-bottom:none}
.kit-item input[type=checkbox]{width:1.3rem; height:1.3rem; margin-top:.15rem; flex-shrink:0; accent-color:var(--azul-tec)}

input[type=date]{min-height:2.8rem; font-size:1.05rem}
input[type=date]::-webkit-calendar-picker-indicator{width:1.8rem; height:1.8rem; cursor:pointer}