/* ===== Tokens (los colores de marca vienen de /theme.css) ===== */
:root{
  --primary:#c8102e;--secondary:#14161a;--on-primary:#fff;--radius:12px;--fs:16px;
  --bg:#f3f4f7;--surface:#fff;--surface2:#f7f8fa;--text:#16181d;--muted:#6a7280;--border:#dcdfe6;
  --hover:#eef0f4;--shadow:0 1px 3px rgba(20,22,26,.10);--ok-bg:#e3f6e8;--ok:#14532d;--bad-bg:#fde8e8;--bad:#7f1d1d;
  --unread:#fff4f5;--chip:#e7e9ee;
}
html[data-theme=dark]{
  --bg:#0d0e11;--surface:#171a1f;--surface2:#1d2128;--text:#eceef3;--muted:#98a0ae;--border:#2a2e37;
  --hover:#222731;--shadow:0 1px 3px rgba(0,0,0,.5);--ok-bg:#12301d;--ok:#9be2b3;--bad-bg:#3a1519;--bad:#ffb4b4;
  --unread:#241519;--chip:#262b34;color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  html[data-theme=auto]{
    --bg:#0d0e11;--surface:#171a1f;--surface2:#1d2128;--text:#eceef3;--muted:#98a0ae;--border:#2a2e37;
    --hover:#222731;--shadow:0 1px 3px rgba(0,0,0,.5);--ok-bg:#12301d;--ok:#9be2b3;--bad-bg:#3a1519;--bad:#ffb4b4;
    --unread:#241519;--chip:#262b34;color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);
  padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--primary)}
h1{font-size:1.4rem;margin:.4rem 0 1rem}
h2{font-size:1.1rem;margin:.2rem 0 .6rem}

/* ===== Iconos ===== */
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ===== Barra superior y navegación ===== */
.topbar{display:flex;align-items:center;gap:.75rem;background:var(--secondary);color:#fff;padding:.55rem 1rem;
  border-bottom:3px solid var(--primary)}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.02em}
.brand img{height:34px;max-width:140px;object-fit:contain;border-radius:6px}
.topbar .who{margin-left:auto;font-size:.85rem;opacity:.9}
.topbar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.themebtn{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;width:2.2rem;height:2.2rem;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.themebtn .ico{width:1.1rem;height:1.1rem}
.themebtn .sun{display:none}
html[data-theme=dark] .themebtn .sun{display:block}html[data-theme=dark] .themebtn .moon{display:none}
@media(prefers-color-scheme:dark){html[data-theme=auto] .themebtn .sun{display:block}html[data-theme=auto] .themebtn .moon{display:none}}
.bell{color:#fff;text-decoration:none;margin-left:auto;position:relative;display:inline-flex}
.bell+.who{margin-left:0}
.bell .count{position:absolute;top:-7px;right:-10px;background:var(--primary);color:var(--on-primary);border-radius:999px;font-size:.65rem;padding:.05rem .35rem}
.nav{display:flex;gap:.25rem;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--border);padding:.25rem .5rem}
.nav a{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.4rem .8rem;color:var(--muted);text-decoration:none;
  font-size:.74rem;border-radius:calc(var(--radius) - 4px);white-space:nowrap}
.nav a:hover{background:var(--hover);color:var(--text)}
.nav a.on{color:var(--primary);background:var(--hover);font-weight:600}
.container{max-width:1100px;margin:0 auto;padding:1rem}

/* ===== Componentes ===== */
.card{background:var(--surface);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);margin-bottom:1rem;border:1px solid var(--border)}
.narrow{max-width:460px;margin:1rem auto}
.login{max-width:380px;margin:8vh auto;text-align:center;border-top:4px solid var(--primary)}
.login .logo{max-width:180px;max-height:90px;object-fit:contain;margin-bottom:.5rem}
label{display:block;text-align:left;font-size:.85rem;margin:.6rem 0}
input,select,textarea{width:100%;padding:.65rem;margin-top:.25rem;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);
  font:inherit;background:var(--surface2);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px}
input[type=checkbox],input[type=radio]{width:auto;margin:0;accent-color:var(--primary)}
input[type=color]{padding:.15rem;height:2.6rem;cursor:pointer}
label.check{display:flex;gap:.5rem;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--primary);color:var(--on-primary);border:1px solid var(--primary);
  border-radius:calc(var(--radius) - 4px);padding:.65rem 1rem;font-size:1rem;cursor:pointer;text-decoration:none;margin-top:.5rem}
.btn:hover{filter:brightness(1.08)}
.btn.small{padding:.4rem .7rem;font-size:.85rem;margin:0}
.btn.ghost{background:transparent;color:var(--primary)}
.inline{display:inline}
.row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.flash{padding:.7rem 1rem;border-radius:calc(var(--radius) - 4px);margin-bottom:.75rem}
.flash.ok{background:var(--ok-bg);color:var(--ok)}.flash.error{background:var(--bad-bg);color:var(--bad)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:transparent}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
th,td{padding:.55rem .6rem;border-bottom:1px solid var(--border);text-align:left;font-size:.9rem}
tbody tr:hover{background:var(--hover)}
.matrix td:not(:first-child),.matrix th:not(:first-child){text-align:center}
.actions{white-space:nowrap}
.tabs{display:flex;gap:.4rem;overflow-x:auto;margin-bottom:1rem}
.tabs a{padding:.4rem .8rem;border-radius:999px;background:var(--chip);color:var(--text);text-decoration:none;white-space:nowrap;font-size:.85rem}
.tabs a.on{background:var(--primary);color:var(--on-primary)}
.muted{color:var(--muted)}
.gap-y{margin:.8rem 0}.tight{margin:.2rem 0}.mt-lg{margin-top:1.6rem}.code-lg{font-size:1.05rem}code.raw{word-break:break-all;font-size:.8rem}
progress.readbar{width:100%;height:8px;accent-color:var(--primary)}
.badge{display:inline-block;padding:.1rem .55rem;border-radius:999px;background:var(--chip);font-size:.78rem}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;align-items:end}
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.unit{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:.75rem;margin-bottom:.75rem;background:var(--surface2)}
.unit.damaged{border-color:var(--primary);background:var(--bad-bg)}
.photo{max-width:220px;border-radius:8px;display:block;margin:.5rem 0}
.inline-form{display:flex;gap:.5rem;align-items:end;flex-wrap:wrap}
.inline-form label{margin:0}
.notif{display:block;text-decoration:none;color:inherit;border-left:4px solid transparent;padding:.7rem}
.notif.unread{border-left-color:var(--primary);background:var(--unread);font-weight:600}
.notif small{display:block;color:var(--muted);font-weight:400}
.actions-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.opt{border:1px dashed var(--border);border-radius:var(--radius);padding:.6rem;margin:.6rem 0}
.pre{white-space:pre-wrap;word-break:break-word}
.thread{display:flex;flex-direction:column;gap:.6rem}
.msg{border-left:4px solid var(--border);padding:.4rem .7rem;background:var(--surface2);border-radius:6px}
.msg.out{border-color:var(--primary)}.msg.in{border-color:#2e9e5b}

/* ===== Panel de inicio ===== */
.hero{display:flex;align-items:center;gap:1rem;background:linear-gradient(135deg,var(--secondary),#2a2d33);color:#fff;
  border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:1rem;border-left:6px solid var(--primary)}
.hero img{height:54px;max-width:150px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.06);padding:4px}
.hero h1{margin:0;font-size:1.35rem}.hero p{margin:.15rem 0 0;opacity:.8;font-size:.9rem}
.sect{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1.1rem 0 .5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
.stats{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-bottom:.5rem}
.stat{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit;padding:.9rem;margin:0}
.stat .badge-ico{width:2.8rem;height:2.8rem;border-radius:50%;background:var(--hover);color:var(--primary);display:flex;align-items:center;justify-content:center}
.stat .badge-ico .ico{width:1.4rem;height:1.4rem}
.stat.alert .badge-ico{background:var(--primary);color:var(--on-primary)}
.stat .num{display:block;font-size:1.6rem;line-height:1;font-weight:700;color:var(--text)}
.stat small{color:var(--muted);font-size:.78rem}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;text-decoration:none;color:var(--text);
  margin:0;min-height:128px;transition:transform .12s,border-color .12s}
a.tile:hover{transform:translateY(-2px);border-color:var(--primary)}
.tile .ico-wrap{width:3.4rem;height:3.4rem;border-radius:calc(var(--radius) + 2px);background:var(--secondary);color:#fff;display:flex;align-items:center;
  justify-content:center;border-bottom:3px solid var(--primary)}
.tile .ico-wrap .ico{width:1.7rem;height:1.7rem}
.tile span.t{font-size:.9rem;font-weight:600}
.num{font-size:1.8rem;color:var(--primary)}

/* ===== Setting ===== */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem}
.choice{display:flex;gap:1rem;flex-wrap:wrap}
.logo-prev{max-height:80px;max-width:220px;object-fit:contain;background:var(--surface2);border:1px dashed var(--border);border-radius:8px;padding:6px;display:block;margin:.4rem 0}

@media(min-width:900px){
  body{display:grid;grid-template-columns:230px 1fr;grid-template-rows:auto 1fr}
  .topbar{grid-column:1/3}
  .nav{flex-direction:column;border-right:1px solid var(--border);border-bottom:0;padding:.75rem}
  .nav a{flex-direction:row;gap:.7rem;font-size:.92rem;padding:.55rem .8rem;color:var(--text)}
  .nav a.on{color:var(--primary)}
  .container{width:100%}
}
@media(max-width:899px){
  .nav{position:fixed;bottom:0;left:0;right:0;border-top:2px solid var(--primary);border-bottom:0;z-index:5;
    padding-bottom:calc(.25rem + env(safe-area-inset-bottom))}
  .container{padding-bottom:5.5rem}
  .topbar .who{display:none}
}

/* ===== Viaje / GPS / mapa ===== */
.btn.big{padding:.9rem 1.3rem;font-size:1.1rem;font-weight:700;letter-spacing:.03em}
.dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:var(--muted);vertical-align:middle}
.dot.live{background:#2e9e5b;box-shadow:0 0 0 3px rgba(46,158,91,.25)}
.dot.start{background:#3b82f6}
.gps{margin-top:.6rem;padding:.5rem .7rem;border-radius:calc(var(--radius) - 4px);background:var(--surface2);border:1px solid var(--border);font-size:.9rem}
.gps.err{border-color:var(--primary)}
.livemap{position:relative;height:min(62vh,520px);min-height:320px;overflow:hidden;background:#cfd6df;border-radius:calc(var(--radius) - 2px);
  touch-action:none;cursor:grab;user-select:none}
.livemap:active{cursor:grabbing}
.livemap .tiles,.livemap .marks{position:absolute;inset:0}
.livemap .tiles img{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none}
.livemap .mk{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;text-align:center}
.livemap .mk i{display:block;width:1.1rem;height:1.1rem;margin:0 auto;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--primary);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.livemap .mk.stale i{background:#888}
.livemap .mk.sp i{width:.8rem;height:.8rem;background:#3b82f6;border-radius:50%;transform:none}
.livemap .mk span{display:inline-block;margin-top:2px;background:rgba(20,22,26,.85);color:#fff;font-size:.72rem;padding:.1rem .4rem;border-radius:6px;white-space:nowrap}
.livemap .zoom{position:absolute;right:.6rem;top:.6rem;display:flex;flex-direction:column;gap:.3rem;z-index:3}
.livemap .zoom button{width:2.2rem;height:2.2rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.2rem;cursor:pointer}
.livemap .attr{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.8);color:#222;font-size:.65rem;padding:0 .35rem;z-index:3}
.livemap .attr a{color:#0645ad}
tr.sel{background:var(--hover)}
.dot.pin{background:var(--primary)}

.navgroup{display:none;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:.9rem .4rem .2rem;padding-top:.5rem;border-top:1px solid var(--border)}
@media(min-width:900px){.navgroup{display:block}}

/* ===== Costos, libro y semana ===== */
.num-col{text-align:right!important;white-space:nowrap}
.owe{color:var(--primary)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.k-CHOFER,.kc-CHOFER{--kc:#2563eb}.badge.k-CAMION,.kc-CAMION{--kc:#d97706}.badge.k-CIGUENA,.kc-CIGUENA{--kc:#7c3aed}
.badge[class*="k-"]{background:var(--kc);color:#fff}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.receipt{max-width:640px;margin:1rem auto;border:2px solid var(--secondary)}
.receipt .big{font-size:1.3rem}
.sign{display:flex;gap:2rem;margin-top:3rem}.sign div{flex:1;border-top:1px solid var(--text);text-align:center;font-size:.8rem;padding-top:.3rem}
table.ledger tfoot th{border-top:2px solid var(--border)}
.week-nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}
.week-nav .title{font-weight:700;margin:0 .4rem}
.weekgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;align-items:start}
.day{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem;min-height:120px}
.day.today{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary) inset}
.day h3{margin:0 0 .5rem;font-size:.9rem;display:flex;justify-content:space-between}
.day h3 small{color:var(--muted);font-weight:400}
.trip{display:block;text-decoration:none;color:var(--text);background:var(--surface2);border-left:5px solid var(--kc);border-radius:8px;padding:.45rem .55rem;margin-bottom:.5rem;font-size:.82rem}
.trip:hover{background:var(--hover)}
.trip .who{font-weight:700;color:var(--kc)}
.trip .route{color:var(--muted)}
.trip .u{display:flex;justify-content:space-between;gap:.4rem;margin-top:.2rem}
.trip .st{font-size:.68rem;padding:.02rem .4rem;border-radius:999px;background:var(--chip);white-space:nowrap}
.st.EN_TRANSITO{background:#fef3c7;color:#78350f}.st.ENTREGADA{background:var(--ok-bg);color:var(--ok)}.st.A_RETIRAR{background:var(--chip)}
.legend-k{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem;font-size:.85rem}
.legend-k i{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;background:var(--kc);margin-right:.3rem;vertical-align:middle}
@media print{.topbar,.nav,.noprint{display:none!important}body{display:block;background:#fff}.container{max-width:none}}
@media (min-width:1100px){.weekgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.trip .u{align-items:center}.trip .st{align-self:center}
.btn.danger{background:#b91c1c;border-color:#b91c1c;color:#fff}details.ed summary{cursor:pointer;list-style:none}details.ed[open]{min-width:240px}

/* ===== Avisos e informacion ===== */
.notif.hl{border-left-width:8px;border-left-color:var(--primary);background:linear-gradient(90deg,var(--primary-soft,rgba(200,16,46,.12)),transparent 70%);font-weight:700;box-shadow:0 0 0 1px var(--primary) inset}
.notif.hl.unread{animation:pulse 2.4s ease-in-out 3}
@keyframes pulse{50%{box-shadow:0 0 0 3px var(--primary) inset}}
.bell.hl .count{animation:pulse 1.6s ease-in-out infinite;box-shadow:0 0 0 2px #fff}
.alert-banner{display:block;text-decoration:none;color:var(--text);border:2px solid var(--primary);border-left-width:8px;background:var(--surface);border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:.6rem}
.alert-banner small{display:block;color:var(--muted)}
.notice{display:block;text-decoration:none;color:inherit;border-left:4px solid var(--border);padding:.7rem}
.notice.unread{border-left-color:var(--primary);background:var(--unread)}
.notice small{display:block;color:var(--muted)}.notice .snippet{display:block;margin-top:.25rem;color:var(--text);font-weight:400}
.badge.new{background:var(--primary);color:var(--on-primary)}
.pre{white-space:pre-wrap}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.mcard{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:var(--text);padding:.5rem;transition:transform .12s,border-color .12s}
.mcard:hover{transform:translateY(-2px);border-color:var(--primary)}
.mcard .thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:var(--surface2);border-radius:calc(var(--radius) - 2px);overflow:hidden;color:var(--muted)}
.mcard .thumb img{width:100%;height:100%;object-fit:cover}.mcard .thumb .ico{width:2.4rem;height:2.4rem}
.mcard small{color:var(--muted)}
.ribbon{position:absolute;top:.4rem;left:.4rem;background:var(--primary);color:var(--on-primary);font-size:.65rem;font-weight:700;padding:.1rem .45rem;border-radius:999px}
.mdetail{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.mdetail .hero-img{display:flex;align-items:center;justify-content:center;background:var(--surface2);border-radius:var(--radius);min-height:180px;overflow:hidden}
.mdetail .hero-img img{width:100%;height:auto;display:block}
.price{font-size:1.6rem;font-weight:800;margin:.2rem 0}.price small{font-size:.8rem;font-weight:400;color:var(--muted)}
.energy{max-width:180px;border-radius:6px;border:1px solid var(--border)}
.camp{border-left:4px solid var(--primary);padding-left:.6rem;margin:.5rem 0}
.campline{display:flex;gap:.8rem;justify-content:space-between;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid var(--border)}
/* ===== Gestion global ===== */
.card.ai{border-left:6px solid var(--primary)}
.warn{background:#fef3c7;color:#78350f;border-radius:8px;padding:.4rem .6rem;font-size:.85rem}
.stat .delta{display:block;color:var(--muted);font-size:.72rem}
.alert-line{display:block;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--border);border-left:6px solid var(--muted);border-radius:var(--radius);padding:.5rem .7rem;margin-bottom:.4rem}
.alert-line.alta{border-left-color:#b91c1c}.alert-line.media{border-left-color:#d97706}.alert-line.baja{border-left-color:#2563eb}
.okline{display:flex;align-items:center;gap:.4rem;color:var(--ok)}
svg.trend{width:100%;height:auto}svg.trend .bar{fill:var(--primary)}svg.trend .axis{stroke:var(--border)}
svg .lab{font-size:11px;fill:var(--muted)}
svg.hbars{width:100%;max-width:560px;height:auto}svg.hbars .lab,svg.hbars .val{font-size:12px;fill:var(--text)}
svg.hbars .track{fill:var(--surface2)}svg.hbars .bar{fill:var(--primary)}
svg.hbars .bar.kc-CHOFER{fill:#2563eb}svg.hbars .bar.kc-CAMION{fill:#d97706}svg.hbars .bar.kc-CIGUENA{fill:#7c3aed}
/* Fase 10: disponibilidad del chofer en el panel */
.avail{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-left:8px solid var(--muted);margin-bottom:1rem}
.avail.on{border-left-color:#15803d}.avail.off{border-left-color:#b91c1c}
.avail .state{display:flex;align-items:center;gap:.4rem;font-size:1.4rem;margin:.15rem 0}
.avail.on .state{color:#15803d}.avail.off .state{color:#b91c1c}
.avail small{display:block}
@media(max-width:600px){.avail form,.avail .btn{width:100%;justify-content:center}}
.stat .badge-ico{flex:none}
/* Fase 11: plataforma y aplicaciones */
.appchip{background:var(--primary);color:var(--on-primary);border-radius:999px;padding:.15rem .7rem;font-size:.78rem;font-weight:600;white-space:nowrap}
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-bottom:1rem}
.apptile{display:flex;align-items:center;gap:1rem;padding:1.2rem;text-decoration:none;color:var(--text);border-left:6px solid var(--primary)}
.apptile:hover{background:var(--hover)}
.apptile .ico-wrap{width:3.4rem;height:3.4rem;border-radius:14px;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;flex:none}
.apptile .ico-wrap .ico{width:1.8rem;height:1.8rem}
.apptile strong{display:block;font-size:1.15rem}.apptile small{display:block;color:var(--muted)}
.matrix .apphead td{background:var(--hover);font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:.06em}
@media(max-width:600px){.appchip{display:none}}

/* chat de avisos: un color por usuario */
.cmsg{border-left:4px solid var(--uc);padding:.4rem .7rem;margin:.6rem 0;background:rgba(127,127,127,.07);border-radius:8px}
.cmsg .cname{color:var(--uc)}.cmsg .chead{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.cmsg .chead form{margin-left:auto}
.uc0{--uc:#2563eb}.uc1{--uc:#d97706}.uc2{--uc:#16a34a}.uc3{--uc:#9333ea}.uc4{--uc:#dc2626}.uc5{--uc:#0891b2}.uc6{--uc:#be185d}.uc7{--uc:#65a30d}.uc8{--uc:#7c3aed}.uc9{--uc:#ea580c}.uc10{--uc:#0d9488}.uc11{--uc:#4f46e5}

/* ===== Calendario de choferes ===== */
.calnav{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calhead{text-align:center;font-size:.8rem;color:var(--muted);font-weight:700;padding:.2rem 0}
.calday{display:flex;flex-direction:column;justify-content:space-between;min-height:3.6rem;padding:.3rem .4rem;border:1px solid var(--border);
  border-radius:calc(var(--radius) - 4px);background:var(--surface);color:var(--text);text-decoration:none}
.calday.blank{border:0;background:transparent}
a.calday:hover{border-color:var(--primary)}
.calday .dn{font-weight:700}
.calday .dc{font-size:.78rem;color:var(--muted);text-align:right}
.calday.none .dc{color:#b91c1c}
.calday.full{background:rgba(21,128,61,.12);border-color:#15803d}
.calday.past{opacity:.6}
.calday.today{outline:2px solid var(--primary)}
.daydlg{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:1.2rem;width:min(92vw,420px)}
.daydlg::backdrop{background:rgba(0,0,0,.45)}
.drvlist{list-style:none;margin:.6rem 0;padding:0;max-height:50vh;overflow:auto}
.drvlist li label{display:flex;align-items:center;gap:.6rem;padding:.55rem .2rem;font-size:1.05rem;border-bottom:1px solid var(--border)}
.drvlist input{width:1.3rem;height:1.3rem}
@media(max-width:600px){.calday{min-height:3rem;padding:.2rem .25rem}.calday .dc{font-size:.68rem}}

/* ===== Buscador global ===== */
.searchform{display:flex;gap:.5rem;align-items:center}
.searchform input{flex:1;min-width:0}
.results{list-style:none;margin:0;padding:0}
.results li a{display:block;padding:.6rem .2rem;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none}
.results li a:hover{background:var(--surface2)}

/* ===== Movil primero: Chofer y Vendedor (body.mf) ===== */
body.mf{font-size:17px}
body.mf .container{padding:.75rem .75rem 6rem}
body.mf .btn{min-height:48px;justify-content:center;font-size:1rem}
body.mf .btn.small{min-height:44px;padding:.5rem .9rem;font-size:.95rem}
body.mf input,body.mf select,body.mf textarea{min-height:48px;font-size:16px}
body.mf input[type=checkbox],body.mf input[type=radio]{width:1.4rem;height:1.4rem}
body.mf .nav a{padding:.5rem .4rem;min-height:56px;justify-content:center;flex:1 1 0;min-width:0}
body.mf .nav a span{font-size:.72rem;text-align:center}
body.mf .topbar .who{display:none}
body.mf .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
body.mf .cols,body.mf .cols2{grid-template-columns:1fr}
body.mf .row{flex-direction:column;align-items:stretch}
body.mf .actions-row{flex-direction:column}
body.mf .actions-row .btn,body.mf .actions-row form{width:100%}
body.mf .hero{padding:.8rem}
body.mf .card{padding:.9rem}
body.mf table.stack thead{display:none}
body.mf table.stack,body.mf table.stack tbody,body.mf table.stack tr,body.mf table.stack td{display:block;width:100%}
body.mf table.stack tr{border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);margin-bottom:.7rem;padding:.3rem .6rem;background:var(--surface)}
body.mf table.stack td{display:flex;justify-content:space-between;gap:.8rem;border-bottom:1px solid var(--border);padding:.45rem 0;text-align:right;font-size:.95rem}
body.mf table.stack td:last-child{border-bottom:0}
body.mf table.stack td::before{content:attr(data-label);font-size:.75rem;text-transform:uppercase;color:var(--muted);text-align:left;flex:0 0 38%}
body.mf table.stack td:not([data-label])::before{content:none}
body.mf .avail .btn{width:100%}
body.mf .calday{min-height:3.2rem}
body.mf .searchform{flex-direction:column;align-items:stretch}
@media(min-width:900px){body.mf{font-size:16px}body.mf .container{padding:1rem}body.mf .nav a{flex:0 0 auto;min-height:0}}

/* ===== Barra inferior en celular: solo PANEL (el resto se abre desde el Panel) ===== */
.navhome,.navchofer{display:none!important}
@media(max-width:899px){
  .nav a:not(.navhome):not(.navchofer),.nav .navgroup{display:none!important}
  .navhome{display:flex!important;flex:1 1 auto;justify-content:center;flex-direction:row;gap:.6rem;font-size:1rem;min-height:52px;align-items:center}
  .navhome span{font-size:1rem;font-weight:700}
  body.mf .nav a.navhome{flex:1 1 auto;min-height:56px}
}
/* Separacion entre el boton principal y los filtros (celular) */
.row + .tabs{margin-top:.9rem}
@media(max-width:899px){
  .row{margin-bottom:.9rem;row-gap:.8rem}
  .row + .tabs,.row + .card{margin-top:.4rem}
  .tabs{margin-top:1rem;row-gap:.5rem}
  .tabs a{min-height:44px;display:inline-flex;align-items:center}
}

/* ===== Registro de errores ===== */
.trace{white-space:pre-wrap;word-break:break-word;font-size:.78rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.7rem;max-height:60vh;overflow:auto}
/* Barra inferior del chofer (celular): Agenda traslados, Movimientos, Avisos, Notificaciones */
@media(max-width:899px){
  .navchofer{display:flex!important;flex:1 1 0;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:56px;padding:.4rem .2rem}
  .navchofer span{font-size:.7rem;text-align:center;line-height:1.1}
}

/* Burbuja de avisos sin abrir */
.nbadge{display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:999px;background:#b91c1c;color:#fff;font-size:.75rem;font-weight:700;line-height:1}
a.tile{position:relative}
a.tile .nbadge{position:absolute;top:.5rem;right:.6rem}
.navchofer{position:relative}
.navchofer .nbadge{position:absolute;top:.15rem;left:calc(50% + .5rem);min-width:1.1rem;height:1.1rem;font-size:.65rem}
.nav a .nbadge{margin-left:auto}
/* Disponibilidad del chofer */
.navdesk{display:none!important}
@media(min-width:900px){.navdesk{display:flex!important}}
.calday.dayon{background:rgba(21,128,61,.14);border-color:#15803d}
.calday.dayon .dc{color:#15803d;font-weight:600}
.calday.dayoff{background:rgba(185,28,28,.14);border-color:#b91c1c}
.calday.dayoff .dc{color:#b91c1c;font-weight:600}
.calday.sun{background:var(--surface2);opacity:.65}
.badge.okb{background:rgba(21,128,61,.18);color:#15803d}.badge.offb{background:rgba(185,28,28,.18);color:#b91c1c}
/* Bloqueo de doble envio: «Cargando…» */
.busy{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.45);align-items:center;justify-content:center}
.busy.on{display:flex}
.busybox{display:flex;align-items:center;gap:.8rem;background:var(--surface);color:var(--text);padding:1rem 1.4rem;border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.35);font-size:1.05rem}
.spin{width:1.4rem;height:1.4rem;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Fotos: miniaturas que se abren al tocarlas, y captura de las 4 fotos de retiro */
.thumb{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block;margin:.4rem 0;cursor:zoom-in}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
label.btn{position:relative;cursor:pointer}
.pick{border:2px dashed var(--primary);border-radius:var(--radius);padding:.8rem;margin:.8rem 0}
.pickunit{margin:.6rem 0;padding-top:.5rem;border-top:1px solid var(--border)}
.pickgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.5rem}
.pickgrid .slot{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.pickgrid .slot .btn{width:100%}
@media(min-width:700px){.pickgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Agenda del chofer: HOY / SEMANA */
.weekview{margin-bottom:.4rem}
.weekview a{font-weight:700}
.todaytitle{font-size:1.15rem;font-weight:700;margin:.4rem 0}
.weekgrid.onlytoday{grid-template-columns:1fr}
@media(min-width:1100px){.weekgrid.onlytoday{grid-template-columns:minmax(0,640px)}}
.clientbox{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.6rem 0;padding:.6rem .8rem;border:1px dashed var(--primary);border-radius:var(--radius)}
.clientbox .clientsum{font-size:.9rem}.clientdlg label{display:block;margin:.5rem 0}.clientdlg input.bad,.clientdlg select.bad{border-color:var(--danger,#c0392b)}
.receipt{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin:.8rem 0;line-height:1.5}
.receipt h3{margin:.2rem 0 .6rem;text-align:center}.receipt h4{margin:.8rem 0 .2rem}.receipt p{margin:.4rem 0}.receipt .bind{font-weight:700;text-decoration:underline}
#sigpad{width:100%;aspect-ratio:5/2;background:#fff;border:2px dashed var(--primary);border-radius:var(--radius);touch-action:none;display:block}

.pushbox{margin-bottom:.8rem}.pushbox .row{gap:.5rem;flex-wrap:wrap}.pushbox p{margin:.3rem 0 .6rem}.pushbox [hidden]{display:none!important}