/* ARSY Patrullero · PWA v1.0 · Sistema de diseño ARSY */
:root{
  --blue:#111F90; --blue-dark:#0B1566; --tint:#EEF0FB;
  --yellow:#FCB600; --gray:#888C8D; --ink:#171B33; --surface:#F7F8FC;
  --green:#16A34A; --orange:#EA7317; --red:#DC2626;
  --fd:'Poppins',system-ui,sans-serif; --fb:'Inter',system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--fb);background:var(--surface);color:var(--ink);overflow:hidden}
button{font-family:var(--fb);cursor:pointer;border:none;background:none}
input,select,textarea{font-family:var(--fb);font-size:16px;width:100%;padding:13px 14px;border:1.5px solid #D9DCEA;border-radius:12px;background:#fff}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid rgba(252,182,0,.5)}
label{display:block;font-weight:600;font-size:12.5px;margin:13px 0 6px}
.tnum{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#app{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(70px + var(--sab))}
#app.noscroll{overflow:hidden}
.screen{min-height:100%;display:flex;flex-direction:column}
.pad{padding:16px 16px 24px}

/* botones */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:14.5px;padding:14px 18px;border-radius:13px;width:100%;font-family:var(--fd)}
.btn-y{background:var(--yellow);color:var(--blue)}
.btn-b{background:var(--blue);color:#fff}
.btn-g{background:#fff;color:var(--blue);border:1.5px solid #D9DCEA}
.btn-r{background:var(--red);color:#fff}
.btn-grn{background:var(--green);color:#fff}
.btn[disabled]{opacity:.45}
.link{color:var(--blue);font-weight:700;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}

.chip{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:10px;padding:4px 10px;border-radius:99px;white-space:nowrap}
.chip::before{content:"●";font-size:7px}
.c-g{background:#E8F7EE;color:var(--green)}.c-o{background:#FDF1E7;color:var(--orange)}
.c-r{background:#FDECEC;color:var(--red)}.c-b{background:var(--tint);color:var(--blue)}
.c-gr{background:#EEF0F2;color:var(--gray)}

.card{background:#fff;border:1.5px solid #EEF0F7;border-radius:16px;padding:16px;margin-bottom:13px;box-shadow:0 4px 14px rgba(17,31,144,.04)}
.card h3{font-family:var(--fd);font-size:14px;color:var(--blue);margin-bottom:11px}
.hint{font-size:11.5px;color:var(--gray);line-height:1.55}
.warn{background:#FFF9E8;border:1.5px solid #F5DFA0;color:#5A5230;border-radius:12px;padding:11px 13px;font-size:12px;margin:12px 0;line-height:1.5}
.row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #F2F3F8;font-size:13px}
.row b{font-family:var(--fd)}

/* topbar de app */
.top{background:var(--blue);color:#fff;padding:calc(var(--sat) + 12px) 16px 12px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40}
.top img{height:26px}
.top b{font-family:var(--fd);font-size:14px}
.top b span{color:var(--yellow)}
.top .sp{flex:1}
.bell{position:relative;color:#fff;font-size:19px}
.bell i{position:absolute;top:-5px;right:-7px;background:var(--red);color:#fff;font-size:8.5px;font-style:normal;font-weight:800;min-width:16px;height:16px;border-radius:99px;display:none;align-items:center;justify-content:center}
.bell i.on{display:flex}

/* switch disponible */
.avail{display:flex;align-items:center;gap:10px;background:var(--blue-dark);border-radius:14px;padding:13px 15px;color:#fff;margin-bottom:13px}
.avail b{font-family:var(--fd);font-size:13.5px}
.avail small{display:block;color:#9BA3DB;font-size:10.5px;margin-top:2px}
.sw{margin-left:auto;width:52px;height:30px;border-radius:99px;background:#39408A;position:relative;transition:.2s;flex-shrink:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:99px;background:#fff;transition:.2s}
.sw.on{background:var(--green)}
.sw.on::after{left:25px}

/* mapa */
.map{height:300px;border-radius:16px;border:1.5px solid #E4E7F4;overflow:hidden;margin-bottom:13px;position:relative;z-index:1}
.map-mission{height:240px}
.leaflet-container{font-family:var(--fb)}

/* login/splash */
.auth{min-height:100vh;background:radial-gradient(900px 560px at 50% 12%,#232D7E,#10143A);display:flex;align-items:center;justify-content:center;padding:22px}
.authcard{background:#fff;border-radius:20px;padding:28px 22px;width:100%;max-width:400px;box-shadow:0 28px 70px rgba(0,0,0,.5)}
.authcard h1{font-family:var(--fd);font-size:19px;color:var(--blue);margin-top:12px;text-align:center}
.err{display:none;background:#FDECEC;color:var(--red);font-weight:700;font-size:12.5px;border-radius:11px;padding:10px 13px;margin-top:12px}
.err.on{display:block}
.splash{min-height:100vh;background:radial-gradient(900px 560px at 50% 30%,#232D7E,#10143A);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.splash img{width:96px;animation:ignite 1.1s ease}
@keyframes ignite{0%{opacity:.1;filter:brightness(.4)}55%{opacity:.4}70%{opacity:1;filter:brightness(1.6)}100%{filter:brightness(1)}}
.splash b{color:#fff;font-family:var(--fd);font-size:19px;letter-spacing:.04em}
.splash b span{color:var(--yellow)}
.splash small{color:#8F97D8;font-size:10.5px;letter-spacing:.28em;font-weight:700}

/* misión entrante */
.ring{position:fixed;inset:0;z-index:80;background:var(--blue-dark);color:#fff;display:flex;flex-direction:column;padding:calc(var(--sat) + 22px) 20px calc(var(--sab) + 20px);animation:flashbg 1s infinite}
@keyframes flashbg{50%{background:#10143A}}
.ring .pay{font-family:var(--fd);font-weight:800;font-size:52px;color:var(--yellow)}
.ring .cd{width:74px;height:74px;border-radius:99px;border:4px solid var(--yellow);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:26px;margin-left:auto}
.riskband{display:inline-flex;font-weight:800;font-size:11px;padding:6px 13px;border-radius:99px;letter-spacing:.06em}
.r-g{background:#123B24;color:#7FE0A4}.r-o{background:#4A2A10;color:#FFB871}.r-r{background:#4A1212;color:#FF9B9B}

/* permanencia */
.perma{background:var(--blue-dark);border-radius:16px;color:#fff;padding:18px;margin-bottom:13px}
.perma .tmr{font-family:var(--fd);font-weight:800;font-size:46px;letter-spacing:2px}
.perma .amt{color:var(--yellow);font-family:var(--fd);font-weight:800;font-size:24px}
.perma .sub{color:#C6CBEF;font-size:10.5px;line-height:1.55;margin-top:4px}

/* checklist */
.ck{border:1.5px solid #E4E7F4;border-radius:13px;padding:13px;margin-bottom:10px;background:#fff}
.ck b{font-size:13px;font-family:var(--fd);color:var(--blue)}
.ck.done{border-color:#BDE6CC}
.ck.fix{border-color:#F3C2C2;background:#FFF8F8}
.ck img{width:100%;border-radius:10px;margin-top:9px}
.ansrow{display:flex;gap:8px;margin-top:9px}
.ansrow button{flex:1;font-size:12px;font-weight:800;padding:11px;border-radius:10px;background:#F2F3F8;color:var(--gray)}
.ansrow button.sel{background:var(--tint);color:var(--blue)}

/* AYUDA */
.helpbtn{position:fixed;right:14px;bottom:calc(84px + var(--sab));z-index:45;background:var(--red);color:#fff;font-family:var(--fd);font-weight:800;font-size:12px;padding:14px 16px;border-radius:99px;box-shadow:0 12px 30px rgba(220,38,38,.5)}
.helpscreen{position:fixed;inset:0;z-index:90;background:var(--red);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;animation:flashred 1s infinite}
@keyframes flashred{50%{background:#A61B1B}}

/* tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(64px + var(--sab));padding-bottom:var(--sab);background:#fff;border-top:1.5px solid #E4E7F4;display:flex;z-index:50}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9.5px;font-weight:700;color:var(--gray);position:relative}
.tabbar button.cur{color:var(--blue)}
.tabbar .ic{font-size:19px}
.tabbar .dot{position:absolute;top:8px;right:calc(50% - 16px);width:9px;height:9px;border-radius:99px;background:var(--red);display:none}
.tabbar .dot.on{display:block}

/* hoja de acceso + sheets */
.sheetbg{position:fixed;inset:0;z-index:70;background:rgba(23,27,51,.6);display:flex;align-items:flex-end}
.sheet{background:#fff;border-radius:22px 22px 0 0;width:100%;max-height:84%;overflow-y:auto;padding:20px 16px calc(var(--sab) + 22px)}
.sheet h3{font-family:var(--fd);color:var(--blue);font-size:15px}
.acc td{padding:7px 4px;font-size:12.5px}
.acc td:first-child{color:var(--gray)}
.acc td:last-child{text-align:right;font-weight:700}
.acc .clave{font-family:var(--fd);font-weight:800;color:var(--blue);font-size:18px}

.toast{position:fixed;top:calc(var(--sat) + 10px);left:12px;right:12px;background:var(--blue-dark);color:#fff;font-weight:600;font-size:12px;padding:12px 16px;border-radius:14px;z-index:99;opacity:0;pointer-events:none;transition:opacity .25s;text-align:center;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.toast.show{opacity:1}
.offbanner{position:fixed;left:12px;right:12px;bottom:calc(74px + var(--sab));background:#171B33;color:var(--yellow);font-weight:700;font-size:11px;padding:11px 14px;border-radius:12px;z-index:48;text-align:center}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px}
.kpi{background:#fff;border:1.5px solid #EEF0F7;border-radius:13px;padding:13px 15px}
.kpi b{display:block;font-family:var(--fd);font-size:19px;color:var(--blue)}
.kpi span{font-size:9.5px;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.stars button{font-size:24px;opacity:.28;background:none}
.stars button.on{opacity:1}
details.acc2{border:1.5px solid #E4E7F4;border-radius:12px;margin-bottom:9px;background:#fff}
details.acc2 summary{padding:13px;font-weight:700;font-size:13px;cursor:pointer;list-style:none}
details.acc2 .inner{padding:0 13px 13px;font-size:12px;color:#4A4F6B;line-height:1.6}