:root{
  --bg:#090909; --panel:#181818; --panel2:#303030; --line:#484848;
  --txt:#f8fafc; --muted:#a7a7a7; --red:#ef4444; --rose:#c90000;
  --green:#22c55e; --yellow:#f59e0b; --blue:#38bdf8; --white:#fff;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--txt);
  background:
    radial-gradient(circle at 88% 2%,rgba(201,0,0,.16),transparent 25%),
    linear-gradient(180deg,#050505,#0b0b0b 48%,#111);
  min-height:100vh
}
.wrap{max-width:1180px;margin:auto;padding:18px 14px 70px}
.header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}
.brand h1{margin:0;font-size:28px;letter-spacing:.5px}
.brand .ver{color:#fb7185;font-weight:900}
.brand small{color:var(--muted)}
.save-note{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:8px 11px;border-radius:999px;background:#181818}
.tabs{display:flex;gap:8px;overflow:auto;margin-bottom:16px}
.tab{border:1px solid var(--line);background:#181818;color:#dbe5f0;padding:10px 14px;border-radius:12px;font-weight:900;white-space:nowrap;cursor:pointer}
.tab.active{background:var(--rose);border-color:var(--rose);color:white}
.section{display:none}.section.active{display:block}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c6{grid-column:span 6}.c4{grid-column:span 4}
.card{
  background:linear-gradient(180deg,rgba(68,68,68,.98),rgba(43,43,43,.98));
  border:1px solid var(--line);border-radius:18px;padding:16px;
  box-shadow:0 16px 44px rgba(0,0,0,.28)
}
h2,h3{margin:0 0 10px}.muted{color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{background:#101010;border:1px solid var(--line);border-radius:16px;padding:15px}
.stat .num{font-size:30px;font-weight:1000;line-height:1.05}
.stat .lab{font-size:12px;color:var(--muted);margin-top:5px}
.blue{color:#7dd3fc}.red{color:#fb7185}.yellow{color:#fbbf24}.green{color:#4ade80}
.btn{border:0;border-radius:12px;padding:11px 14px;font-weight:900;cursor:pointer}
.btn.primary{background:var(--rose);color:#fff}
.btn.secondary{background:#e5edf5;color:#0f172a}
.btn.green{background:var(--green);color:#052e16}
.btn.ghost{background:#181818;color:#e5edf5;border:1px solid var(--line)}
.btn.danger{background:#3b0d14;color:#fecaca;border:1px solid #7f1d1d}
.btn.small{padding:8px 10px;font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
input,select{
  width:100%;background:#0d0d0d;border:1px solid var(--line);color:#fff;
  border-radius:12px;padding:12px 13px;font-size:15px;outline:none
}
label{display:block;font-size:12px;color:#cbd5e1;margin-bottom:6px;font-weight:900}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.formgrid .full{grid-column:1/-1}
.vehicle-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.vehicle{background:#101010;border:1px solid var(--line);border-radius:18px;padding:15px}
.plate{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:190px;padding:7px 18px 9px;border-radius:10px;
  background:linear-gradient(180deg,#fff,#e8edf3);color:#252525;
  border:3px solid #cbd5e1;box-shadow:inset 0 0 0 1px #94a3b8,0 5px 16px #0005
}
.plate .country{font-size:9px;font-weight:900;letter-spacing:1.8px}
.plate .number{font-size:31px;font-weight:1000;letter-spacing:2px;line-height:1}
.vehicle-name{font-size:18px;font-weight:1000;margin-top:10px}
.vehicle-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.mini{background:#181818;border:1px solid var(--line);border-radius:12px;padding:9px}
.mini b{font-size:18px}.mini span{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:920px}
th,td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;vertical-align:middle}
th{background:#101010;color:#d6e0eb}
.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:900}
.pending{background:#422006;color:#fde68a}.paid{background:#052e16;color:#bbf7d0}
.due-ok{background:#06351d;color:#bbf7d0}.due-warn{background:#4a2c05;color:#fde68a}
.due-soon{background:#4c1d1d;color:#fecaca}.due-exp{background:#3b0a0a;color:#fca5a5}
.filters{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.quick-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.link-card{background:#101010;border:1px solid var(--line);border-radius:14px;padding:12px}
.link-card b{display:block}.link-card span{display:block;color:var(--muted);font-size:12px;min-height:30px;margin-top:5px}
.empty{text-align:center;color:var(--muted);padding:26px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal.show{display:flex}
.modalbox{width:min(650px,100%);max-height:90vh;overflow:auto;background:#262626;border:1px solid var(--line);border-radius:20px;padding:18px}
.modalhead{display:flex;justify-content:space-between;align-items:center}.close{background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
.notice{background:#181818;border:1px solid #444;color:#e5e7eb;border-radius:14px;padding:12px;font-size:12px;line-height:1.45}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:white;color:#262626;padding:10px 15px;border-radius:999px;font-weight:900;opacity:0;transition:.2s;z-index:100;pointer-events:none}
.toast.show{opacity:1}
.print-only{display:none}
@media(max-width:900px){
  .c8,.c6,.c4{grid-column:span 12}.stats{grid-template-columns:repeat(2,1fr)}
  .vehicle-list{grid-template-columns:1fr}.quick-links{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .stats,.formgrid,.quick-links,.filters,.vehicle-kpis{grid-template-columns:1fr}
  .header{flex-direction:column}.plate{min-width:165px}.brand h1{font-size:24px}
}
@media print{
  body{background:white!important;color:#111!important}
  .no-print,.tabs,.header,.modal,.toast{display:none!important}
  .print-only{display:block!important}
  .wrap{max-width:none;padding:0}
  .section{display:none!important}
  #printArea{display:block!important}
  .card{box-shadow:none;border:1px solid #bbb;background:white;color:#111}
  table{min-width:0;font-size:11px}
  th{background:#eee;color:#111}
  td,th{border-color:#ccc}
  .muted{color:#555}
  .badge{border:1px solid #aaa;color:#111;background:#f3f3f3}
}

.district-head{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.district-logo{width:92px;height:58px;flex:0 0 92px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:7px;overflow:hidden}
.district-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.district-logo-fallback{font-size:12px;font-weight:900;color:#8b0000;text-align:center;line-height:1.05}
.district-title{font-size:22px;font-weight:900;color:#fff;line-height:1.1}
@media(max-width:560px){.district-logo{width:82px;height:54px;flex-basis:82px}.district-title{font-size:20px}}

.duplicate-warning{
  display:none;margin:12px 0 4px;padding:16px 18px;border-radius:14px;
  background:#7f0000;border:2px solid #ff4d4d;color:#fff;
  font-size:18px;font-weight:1000;text-align:center;line-height:1.25;
  box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.duplicate-warning.show{display:block}
.acta-chip{display:inline-block;padding:4px 8px;border-radius:8px;background:#3a3a3a;border:1px solid #555;font-weight:900;white-space:nowrap}

.table-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  min-width:150px;
}
.table-actions .btn{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.table-actions .delete-wide{grid-column:1/-1}

.duplicate-overlay{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  padding:22px; background:rgba(0,0,0,.82);
}
.duplicate-overlay.show{display:flex}
.duplicate-box{
  width:min(520px,100%);
  background:linear-gradient(180deg,#a80000,#650000);
  border:3px solid #ff5b5b;
  border-radius:24px;
  padding:28px 22px;
  text-align:center;
  color:white;
  box-shadow:0 24px 80px rgba(0,0,0,.65);
}
.duplicate-icon{font-size:54px;line-height:1;margin-bottom:10px}
.duplicate-title{
  font-size:30px;font-weight:1000;line-height:1.05;
  letter-spacing:.2px;margin-bottom:12px;
}
.duplicate-detail{font-size:16px;font-weight:800;line-height:1.4;opacity:.96}
.duplicate-close{
  margin-top:20px;width:100%;border:0;border-radius:14px;
  padding:14px 16px;font-weight:1000;font-size:16px;
  background:#fff;color:#7d0000;cursor:pointer
}
@media(max-width:600px){
  .duplicate-title{font-size:26px}
  .duplicate-box{padding:24px 18px}
}

.acta-check-row{display:flex;gap:8px;align-items:stretch}
.acta-check-row input{flex:1;min-width:0}
.acta-check-btn{flex:0 0 auto;padding:0 14px;white-space:nowrap}
.acta-check-result{
  display:none;margin-top:8px;padding:10px 12px;border-radius:10px;
  font-size:13px;font-weight:900;line-height:1.25
}
.acta-check-result.ok{display:block;background:#073b22;border:1px solid #19b967;color:#bdfbd8}
.acta-check-result.bad{display:block;background:#5c0909;border:1px solid #ff5151;color:#fff}
.paid-month-note{font-size:11px;color:var(--muted);margin-top:5px;font-weight:700}
@media(max-width:600px){
  .acta-check-row{flex-direction:column}
  .acta-check-btn{min-height:44px}
}

.fuel-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.fuel-kpi{background:#111;border:1px solid #454545;border-radius:16px;padding:16px}
.fuel-kpi .n{font-size:28px;font-weight:1000}.fuel-kpi .l{font-size:12px;color:var(--muted);font-weight:800;margin-top:5px}
.driver-shell{max-width:520px;margin:0 auto;padding:18px}
.driver-card{background:linear-gradient(180deg,#3a3a3a,#2d2d2d);border:1px solid #515151;border-radius:24px;padding:20px}
.driver-title{font-size:30px;font-weight:1000;line-height:1.05;margin:8px 0 6px}
.driver-sub{color:#b9b9b9;font-size:14px;margin-bottom:18px}
.driver-label{display:block;font-size:15px;font-weight:900;margin:15px 0 7px}
.driver-select,.driver-input{width:100%;min-height:58px;border-radius:14px;border:1px solid #555;background:#101010;color:#fff;padding:0 16px;font-size:20px;font-weight:900}
.driver-fuels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.driver-fuel-btn{min-height:54px;border-radius:14px;border:1px solid #555;background:#171717;color:white;font-size:16px;font-weight:1000}
.driver-fuel-btn.active{background:#c90000;border-color:#ff4242}
.driver-amount{font-size:32px!important}
.driver-submit{width:100%;min-height:62px;border:0;border-radius:16px;background:linear-gradient(180deg,#e00000,#aa0000);color:#fff;font-size:22px;font-weight:1000;margin-top:20px}
.driver-success{
  display:none;
  background:linear-gradient(180deg,#0d5a33,#083f25);
  border:2px solid #31d67a;
  color:#fff;
  border-radius:18px;
  padding:18px;
  text-align:center;
  font-weight:1000;
  font-size:20px;
  margin-top:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.28)
}
.driver-success.show{display:block}
.driver-success .check{display:block;font-size:44px;line-height:1;margin-bottom:7px}
.driver-success .small{display:block;font-size:13px;color:#c7f7da;margin-top:5px;font-weight:800}
@media(max-width:760px){.fuel-kpis{grid-template-columns:1fr 1fr}}

.driver-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.driver-card-admin{background:#111;border:1px solid #444;border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.driver-card-admin .name{font-size:20px;font-weight:1000}
.driver-card-admin .meta{font-size:12px;color:var(--muted);margin-top:4px}
.driver-card-actions{display:flex;gap:7px;flex-wrap:wrap}
@media(max-width:700px){.driver-admin-grid{grid-template-columns:1fr}}

.fuel-advanced{display:none;margin-top:14px;padding-top:14px;border-top:1px solid #4b4b4b}
.fuel-advanced.show{display:block}

/* ===== V3.0 RESPONSIVE / MOBILE CLOSING PASS ===== */
html,body{max-width:100%;overflow-x:hidden}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
.wrap,.container,main{max-width:100%}
.card{min-width:0}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%}

/* Mobile nav */
@media(max-width:820px){
  body{font-size:15px}
  .wrap{padding:10px!important}
  header,.header{padding-left:10px!important;padding-right:10px!important}
  .tabs{
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    padding-bottom:8px!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    flex:0 0 auto!important;
    min-height:44px!important;
    padding:10px 13px!important;
    font-size:13px!important;
  }

  .grid{grid-template-columns:1fr!important;gap:10px!important}
  .c12,.c8,.c6,.c4,.c3{grid-column:1/-1!important;width:100%!important}
  .card{padding:14px!important;border-radius:15px!important}

  h1{font-size:24px!important;line-height:1.08!important}
  h2{font-size:20px!important;line-height:1.15!important}
  h3{font-size:18px!important}

  .stats,.fuel-kpis{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }
  .stat,.fuel-kpi{padding:13px!important;min-width:0}
  .stat .num,.fuel-kpi .n{font-size:23px!important;overflow-wrap:anywhere}
  .stat .lab,.fuel-kpi .l{font-size:11px!important}

  .filters,.form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  label{font-size:12px!important}
  input,select,textarea{
    width:100%!important;
    min-height:46px!important;
    font-size:16px!important; /* avoids mobile browser zoom */
  }

  .btn{
    min-height:44px!important;
    white-space:normal!important;
    line-height:1.15!important;
  }

  /* Modals */
  .modal{padding:8px!important;align-items:flex-start!important;overflow:auto!important}
  .modal-box{
    width:100%!important;
    max-width:100%!important;
    margin:8px auto!important;
    max-height:none!important;
    border-radius:16px!important;
    padding:14px!important;
  }
  .modal-head{position:sticky;top:0;z-index:2;background:inherit;padding-bottom:8px}

  /* Driver mode is intentionally very simple on phone */
  .driver-shell{width:100%!important;max-width:520px!important;padding:10px!important}
  .driver-card{padding:16px!important;border-radius:18px!important}
  .driver-title{font-size:25px!important}
  .driver-select,.driver-input{min-height:56px!important;font-size:19px!important}
  .driver-amount{font-size:30px!important}
  .driver-submit{min-height:60px!important;font-size:20px!important}
  .driver-fuels{grid-template-columns:1fr 1fr 1fr!important}
  .driver-fuel-btn{font-size:14px!important;padding:8px 5px!important}

  .driver-admin-grid{grid-template-columns:1fr!important}
  .driver-card-admin{align-items:flex-start!important;flex-direction:column!important}
  .driver-card-actions{width:100%!important}
  .driver-card-actions .btn{flex:1 1 30%!important}

  /* Generic desktop tables become compact stacked cards on phone */
  .table-wrap.mobile-cards{overflow:visible!important}
  .table-wrap.mobile-cards table,
  .table-wrap.mobile-cards thead,
  .table-wrap.mobile-cards tbody,
  .table-wrap.mobile-cards th,
  .table-wrap.mobile-cards td,
  .table-wrap.mobile-cards tr{display:block!important;width:100%!important}
  .table-wrap.mobile-cards thead{display:none!important}
  .table-wrap.mobile-cards tr{
    background:#111!important;
    border:1px solid #444!important;
    border-radius:14px!important;
    margin:0 0 10px!important;
    padding:8px 10px!important;
  }
  .table-wrap.mobile-cards td{
    border:0!important;
    border-bottom:1px solid #2d2d2d!important;
    padding:8px 4px 8px 44%!important;
    position:relative!important;
    min-height:38px!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .table-wrap.mobile-cards td:last-child{border-bottom:0!important}
  .table-wrap.mobile-cards td::before{
    content:attr(data-label);
    position:absolute;
    left:4px;
    top:8px;
    width:39%;
    font-size:11px;
    font-weight:900;
    color:#a9a9a9;
    text-transform:uppercase;
    letter-spacing:.2px;
  }
  .table-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    gap:6px!important;
  }
  .table-actions .delete-wide{grid-column:1/-1!important}
}

/* Very small phones */
@media(max-width:430px){
  .stats,.fuel-kpis{grid-template-columns:1fr!important}
  .driver-fuels{grid-template-columns:1fr!important}
  .driver-fuel-btn{min-height:48px!important}
  .tab{font-size:12px!important;padding:9px 11px!important}
}


/* ===== V1.0 PHP/MySQL: login, roles, usuarios ===== */
[hidden]{display:none!important}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:min(420px,100%);background:linear-gradient(180deg,#3a3a3a,#2d2d2d);border:1px solid #515151;border-radius:24px;padding:26px 22px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.brand-badge{display:inline-block;background:linear-gradient(180deg,#d40000,#a90000);border:1px solid #f43f3f;padding:5px 12px;border-radius:4px;font-weight:1000;font-size:24px;letter-spacing:1px;color:#fff;box-shadow:0 5px 16px #0006}
.login-card h1{font-size:24px;margin:14px 0 4px}
.login-card .muted{margin-bottom:18px}
.login-card label{text-align:left}
.login-card input{min-height:58px;font-size:26px;font-weight:900;letter-spacing:8px;text-align:center}
.login-btn{width:100%;min-height:56px;font-size:18px;margin-top:14px}
.login-error{margin-top:12px;padding:10px 12px;border-radius:12px;background:#5c0909;border:1px solid #ff5151;color:#fff;font-weight:900;font-size:14px;line-height:1.3}
.who{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.who .save-note{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:900;background:#333;border:1px solid #555;color:#eee;white-space:nowrap}
.chip.admin{background:#7f0000;border-color:#ff4d4d;color:#fff}
.chip.nopin{background:#422006;color:#fde68a;border-color:#a16207}
.chip.inactive{background:#333;color:#aaa}
.chip.ok{background:#052e16;color:#bbf7d0;border-color:#166534}
.action-card{cursor:pointer;text-align:center;padding:26px 16px!important;font-size:22px;font-weight:1000;border:2px solid #b00000!important;background:linear-gradient(180deg,#9a0000,#5a0000)!important;color:#fff;user-select:none}
.action-card:active{transform:scale(.98)}
.action-card.alt{background:linear-gradient(180deg,#484848,#2b2b2b)!important;border-color:#666!important}
.action-card small{display:block;font-size:12px;color:#ffd5d5;font-weight:700;margin-top:6px}
.action-card.alt small{color:#bbb}
.mini-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mini-row:last-child{border-bottom:0}
.mini-row .l{min-width:0;flex:1}
.mini-row .t{font-weight:1000;font-size:15px}
.mini-row .s{color:var(--muted);font-size:12px;margin-top:3px;overflow-wrap:anywhere}
.pin-hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4}
.muted-small{font-size:11px;color:var(--muted);margin-top:8px}
.audit-detail{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.driver-card-admin .name{overflow-wrap:anywhere}
.driver-fuel-btn{cursor:pointer}
#driverPersonWrap.locked select{opacity:.75}
.notice.warn{background:#4a2c05;border-color:#a16207;color:#fde68a;font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Indicador de conexión a la base (arriba a la derecha) */
.db-status{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#181818;font-size:11px;font-weight:900;color:#cbd5e1;white-space:nowrap;cursor:default}
.db-status .dot{width:9px;height:9px;border-radius:50%;background:#777;flex:0 0 9px}
.db-status.wait .dot{animation:dbpulse 1.2s ease-in-out infinite}
.db-status.ok{border-color:#166534;color:#bbf7d0}
.db-status.ok .dot{background:#22c55e;box-shadow:0 0 8px #22c55e}
.db-status.bad{border-color:#7f1d1d;color:#fecaca;background:#3b0d14}
.db-status.bad .dot{background:#ef4444;box-shadow:0 0 8px #ef4444}
@keyframes dbpulse{0%,100%{opacity:.35}50%{opacity:1}}
.login-shell{position:relative}
.login-shell>.db-status{position:absolute;top:14px;right:16px}
.header .actions{align-items:center}

/* ===== V1.0.3 — PASE MOBILE COMPLETO ===== */
@media(max-width:820px){
  body{font-size:14px}
  .wrap{padding:8px 10px calc(30px + env(safe-area-inset-bottom))!important}
  /* Header compacto */
  .header{flex-direction:column;align-items:stretch!important;gap:10px!important;margin-bottom:10px!important}
  .brand-badge{font-size:18px!important;padding:4px 9px!important}
  .brand h1,h1{font-size:18px!important;line-height:1.1!important}
  .brand small{font-size:11px;display:block;margin-top:2px}
  .who{justify-content:space-between;width:100%;gap:8px}
  .who .save-note{padding:6px 8px!important;gap:6px}
  #viewDriver .header .actions{justify-content:space-between;width:100%}
  h2{font-size:18px!important}h3{font-size:16px!important}
  /* Pestañas: las 6 visibles, 3 por fila, fijas arriba al scrollear */
  .tabs{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;overflow:visible!important;white-space:normal!important;position:sticky;top:0;z-index:20;background:#0b0b0b;padding:6px 0 8px!important;margin:0 0 10px!important;box-shadow:0 8px 14px -6px rgba(0,0,0,.7)}
  .tab{display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 4px!important;font-size:12px!important;min-height:40px!important;border-radius:10px!important;line-height:1.1!important;white-space:normal!important}
  /* Tarjetas y KPIs */
  .card{padding:12px!important;border-radius:14px!important}
  .stat,.fuel-kpi{padding:11px!important}
  .stat .num,.fuel-kpi .n{font-size:21px!important}
  .fuel-kpis{grid-template-columns:1fr 1fr!important;gap:8px!important}
  /* Filtros: 2 columnas, el primero (patente/vehículo) a todo el ancho */
  .filters{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .filters>div:first-child{grid-column:1/-1}
  .filters .btn{width:100%}
  /* Tablas → tarjetas con la etiqueta ARRIBA del valor (antes: columna izquierda al 39%) */
  .table-wrap.mobile-cards tr{padding:10px 12px!important;margin:0 0 8px!important;border-radius:12px!important}
  .table-wrap.mobile-cards td{padding:5px 0!important;min-height:0!important;border-bottom:1px solid #262626!important}
  .table-wrap.mobile-cards td::before{position:static!important;display:block;width:auto!important;margin-bottom:1px;font-size:10px!important}
  .table-wrap.mobile-cards td:last-child{border-bottom:0!important}
  .table-wrap.mobile-cards table{min-width:0!important}
  .acta-chip{white-space:normal!important;overflow-wrap:anywhere}
  .table-actions{grid-template-columns:1fr 1fr!important;margin-top:4px}
  /* Multas: tarjeta compacta con jerarquía (patente + valor, acta, motivo, distrito + fecha, vencimiento + estado, acciones) */
  .fines-table.mobile-cards tr{display:grid!important;grid-template-columns:1fr auto!important;column-gap:10px;row-gap:3px;align-items:center}
  .fines-table.mobile-cards td{border:0!important;padding:0!important;min-height:0!important}
  .fines-table.mobile-cards td::before{display:none!important}
  .fines-table.mobile-cards td:nth-child(1){grid-column:1;grid-row:1;font-size:17px}
  .fines-table.mobile-cards td:nth-child(6){grid-column:2;grid-row:1;text-align:right!important;font-size:17px;white-space:nowrap}
  .fines-table.mobile-cards td:nth-child(2){grid-column:1/-1;grid-row:2}
  .fines-table.mobile-cards td:nth-child(4){grid-column:1/-1;grid-row:3;color:#e5e7eb}
  .fines-table.mobile-cards td:nth-child(5){grid-column:1;grid-row:4;color:var(--muted);font-size:12px}
  .fines-table.mobile-cards td:nth-child(3){grid-column:2;grid-row:4;text-align:right!important;color:var(--muted);font-size:12px;white-space:nowrap}
  .fines-table.mobile-cards td:nth-child(3)::before{display:inline!important;content:"Acta "!important;font-size:12px!important;text-transform:none!important;color:var(--muted)}
  .fines-table.mobile-cards td:nth-child(7){grid-column:1;grid-row:5;font-size:12px;color:var(--muted);padding-top:4px!important}
  .fines-table.mobile-cards td:nth-child(7) br{display:none}
  .fines-table.mobile-cards td:nth-child(7) .badge{margin-left:6px}
  .fines-table.mobile-cards td:nth-child(8){grid-column:2;grid-row:5;text-align:right!important;padding-top:4px!important}
  .fines-table.mobile-cards td:nth-child(9){grid-column:1/-1;grid-row:6;padding-top:8px!important}
  /* Combustible: tarjeta compacta (patente + importe, vehículo, tipo + fecha, quién cargó, acciones) */
  .fuel-table.mobile-cards tr{display:grid!important;grid-template-columns:1fr auto!important;column-gap:10px;row-gap:3px;align-items:center}
  .fuel-table.mobile-cards td{border:0!important;padding:0!important;min-height:0!important}
  .fuel-table.mobile-cards td::before{display:none!important}
  .fuel-table.mobile-cards td:nth-child(2){grid-column:1;grid-row:1;font-size:17px}
  .fuel-table.mobile-cards td:nth-child(5){grid-column:2;grid-row:1;text-align:right!important;font-size:17px;white-space:nowrap}
  .fuel-table.mobile-cards td:nth-child(3){grid-column:1/-1;grid-row:2;color:var(--muted);font-size:12px}
  .fuel-table.mobile-cards td:nth-child(4){grid-column:1;grid-row:3}
  .fuel-table.mobile-cards td:nth-child(1){grid-column:2;grid-row:3;text-align:right!important;color:var(--muted);font-size:12px}
  .fuel-table.mobile-cards td:nth-child(6){grid-column:1/-1;grid-row:4;color:var(--muted);font-size:12px}
  .fuel-table.mobile-cards td:nth-child(6)::before{display:inline!important;content:"Cargó: "!important;font-size:12px!important;text-transform:none!important;color:var(--muted)}
  .fuel-table.mobile-cards td:nth-child(7){grid-column:1/-1;grid-row:5;padding-top:8px!important}
  /* Vehículos */
  .vehicle{padding:13px!important}
  .vehicle .actions .btn{flex:1 1 45%;min-height:40px!important}
  .plate{min-width:150px;padding:6px 14px 8px}.plate .number{font-size:26px}
  /* Panel chofer */
  .action-card{padding:18px 12px!important;font-size:19px}
  .mini-row{flex-direction:column;align-items:stretch;gap:8px}
  .mini-row .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px}
  .mini-row .actions .btn{width:100%;min-height:40px!important}
  /* Usuarios */
  .driver-card-admin{padding:12px!important}
  .driver-card-admin .name{font-size:17px!important}
  .driver-card-actions .btn{min-height:40px!important}
  /* Consulta distritos */
  .quick-links{grid-template-columns:1fr!important}
  .link-card .district-title{font-size:18px}
  .link-card span{min-height:0!important}
  /* Modales a pantalla completa (las reglas viejas apuntaban a .modal-box/.modal-head, clases inexistentes) */
  .modal{padding:0!important;align-items:flex-start!important;overflow:auto!important}
  .modalbox{width:100%!important;max-width:100%!important;max-height:none!important;min-height:100%;overflow:visible!important;border-radius:0!important;border:0!important;padding:0 14px calc(16px + env(safe-area-inset-bottom))!important}
  .modalhead{position:sticky;top:0;z-index:3;background:#262626;margin:0 -14px 10px;padding:12px 14px 10px;border-bottom:1px solid var(--line)}
  .modalhead h3{font-size:17px!important;margin:0!important}
  .close{font-size:32px!important;line-height:1;padding:0 4px}
  .modalbox>.actions{position:sticky;bottom:0;z-index:3;background:#262626;padding:10px 14px 4px;margin:14px -14px 0;border-top:1px solid var(--line)}
  .modalbox>.actions .btn{flex:1;min-height:48px!important}
  .formgrid{gap:10px!important}
  /* Overlays */
  .duplicate-overlay{padding:14px}
  .duplicate-box{padding:22px 16px}
  .duplicate-title{font-size:24px}
  .driver-shell{padding:8px!important}
  /* Chips y varios */
  .chip{font-size:10px;padding:3px 7px}
  .db-status{font-size:10px;padding:4px 8px}
  .login-shell{padding:14px}
  .login-shell>.db-status{top:10px;right:10px}
  .toast{bottom:calc(14px + env(safe-area-inset-bottom));max-width:92vw;text-align:center;font-size:14px}
  .notice{font-size:12px}
}
@media(max-width:430px){
  .tab{font-size:11px!important;padding:8px 2px!important;min-height:38px!important}
  .filters{grid-template-columns:1fr!important}
  .filters>div:first-child{grid-column:auto}
  .stats,.fuel-kpis{grid-template-columns:1fr 1fr!important}
  .stat .num,.fuel-kpi .n{font-size:19px!important}
}
@media(max-width:820px){
  /* Resumen por patente: tarjeta compacta (patente + deuda, vehículo, total · pendientes) */
  .summary-table.mobile-cards tr{display:grid!important;grid-template-columns:1fr auto!important;column-gap:10px;row-gap:2px;align-items:center}
  .summary-table.mobile-cards td{border:0!important;padding:0!important;min-height:0!important}
  .summary-table.mobile-cards td::before{display:none!important}
  .summary-table.mobile-cards td:nth-child(1){grid-column:1;grid-row:1;font-size:16px}
  .summary-table.mobile-cards td:nth-child(5){grid-column:2;grid-row:1;text-align:right!important;font-size:16px;white-space:nowrap}
  .summary-table.mobile-cards td:nth-child(2){grid-column:1/-1;grid-row:2;color:var(--muted);font-size:12px}
  .summary-table.mobile-cards td:nth-child(3){grid-column:1;grid-row:3;color:var(--muted);font-size:12px}
  .summary-table.mobile-cards td:nth-child(3)::before{display:inline!important;content:"Multas: "!important;font-size:12px!important;text-transform:none!important;color:var(--muted)}
  .summary-table.mobile-cards td:nth-child(4){grid-column:2;grid-row:3;text-align:right!important;color:var(--muted);font-size:12px}
  .summary-table.mobile-cards td:nth-child(4)::before{display:inline!important;content:"Pendientes: "!important;font-size:12px!important;text-transform:none!important;color:var(--muted)}
  /* Actividad: quién/qué en una línea, detalle debajo */
  .audit-table.mobile-cards tr{display:grid!important;grid-template-columns:1fr auto!important;column-gap:10px;row-gap:2px;align-items:center}
  .audit-table.mobile-cards td{border:0!important;padding:0!important;min-height:0!important}
  .audit-table.mobile-cards td::before{display:none!important}
  .audit-table.mobile-cards td:nth-child(2){grid-column:1;grid-row:1;font-size:14px}
  .audit-table.mobile-cards td:nth-child(1){grid-column:2;grid-row:1;text-align:right!important;color:var(--muted);font-size:11px;white-space:nowrap}
  .audit-table.mobile-cards td:nth-child(3){grid-column:1/-1;grid-row:2;font-size:13px}
  .audit-table.mobile-cards td:nth-child(4){grid-column:1/-1;grid-row:3}
  /* Comparativa mensual de combustible: mes + total arriba, desglose debajo */
  .fuel-months.mobile-cards tr{display:grid!important;grid-template-columns:1fr auto!important;column-gap:10px;row-gap:2px;align-items:center}
  .fuel-months.mobile-cards td{border:0!important;padding:0!important;min-height:0!important}
  .fuel-months.mobile-cards td::before{display:inline!important;position:static!important;width:auto!important;font-size:11px!important;text-transform:none!important;color:var(--muted);margin-right:4px}
  .fuel-months.mobile-cards td:nth-child(1){grid-column:1;grid-row:1;font-size:15px}
  .fuel-months.mobile-cards td:nth-child(1)::before,.fuel-months.mobile-cards td:nth-child(2)::before{display:none!important}
  .fuel-months.mobile-cards td:nth-child(2){grid-column:2;grid-row:1;text-align:right!important;font-size:15px}
  .fuel-months.mobile-cards td:nth-child(3),.fuel-months.mobile-cards td:nth-child(4),.fuel-months.mobile-cards td:nth-child(5),.fuel-months.mobile-cards td:nth-child(6){grid-column:1/-1;font-size:12px;color:#e5e7eb}
}
@media(max-width:430px){
  .driver-fuels{grid-template-columns:repeat(3,1fr)!important}
  .driver-fuel-btn{font-size:13px!important;min-height:50px!important}
}
/* Asignación de vehículos por usuario */
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.check-item{display:flex;align-items:center;gap:9px;background:#0d0d0d;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;font-weight:800;cursor:pointer;user-select:none}
.check-item input{width:18px!important;min-width:18px;min-height:18px!important;height:18px;margin:0;accent-color:#c90000}
.check-item .sub{display:block;font-size:11px;color:var(--muted);font-weight:700}
.check-item.on{border-color:#ff4d4d;background:#2a0a0a}
.plates{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
@media(max-width:430px){.check-list{grid-template-columns:1fr}}
/* Link personal de cada chofer + nombre fijo en la pantalla de carga */
.driver-who{font-size:20px;font-weight:1000;background:#101010;border:1px solid #555;border-radius:14px;padding:12px 16px;margin-top:14px}
.driver-who small{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:2px}
.link-row{display:flex;gap:6px;margin-top:8px;align-items:center;flex-wrap:wrap}
.link-row input{flex:1 1 200px;min-width:0;font-size:11px;padding:8px 10px;color:#9ecbff;background:#0d0d0d;border-radius:10px}
.link-row .btn{white-space:nowrap}
@media(max-width:820px){.link-row input{width:100%!important;min-height:38px!important;font-size:12px!important}.link-row .btn{flex:1}}
/* Aviso de multas pendientes del vehículo elegido (pantalla de carga) */
.fines-alert{display:block;width:100%;margin-top:8px;background:#3b0a0a;border:1px solid #ff4d4d;color:#ffb4b4;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:900;text-align:left;cursor:pointer;letter-spacing:.2px;font-family:inherit}
.fines-alert:active{background:#5c0909}
.fine-item{padding:10px 0;border-bottom:1px solid var(--line)}
.fine-item:last-child{border-bottom:0}
.fine-item .t{font-weight:1000;font-size:15px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.fine-item .s{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.4}
/* Link visible para volver al cotizador (login y panel admin; no en la pantalla de carga del chofer) */
.home-link{display:inline-flex;align-items:center;gap:6px;background:#2a2a2a;color:#fff;border:1px solid #555;border-radius:10px;padding:7px 11px;font-weight:900;font-size:12px;text-decoration:none;white-space:nowrap}
.home-link:hover{background:#3a3a3a}
.login-card .home-link{margin-top:14px;font-size:14px;padding:10px 14px}

/* ---------- Tamaño de letra (A− / % / A+) ---------- */
.fontsize { display: inline-flex !important; align-items: stretch !important; gap: 0 !important; background: #292929 !important; border: 1px solid #484848 !important; border-radius: 999px !important; overflow: hidden !important; }
.fsbtn, .fsval { background: transparent !important; color: #fff !important; border: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; padding: 5px 9px !important; cursor: pointer !important; }
.fsbtn { font-size: 13px !important; min-width: 28px !important; }
.fsbtn:hover, .fsval:hover { background: #3a3a3a !important; }
.fsval { min-width: 44px !important; text-align: center !important; color: #d3d3d3 !important; border-left: 1px solid #484848 !important; border-right: 1px solid #484848 !important; }
.login-fs { margin-top: 12px !important; display: flex !important; justify-content: center !important; }