:root{
  --azul:#1a56db; --azul-osc:#1546b3; --azul-claro:#e8efff;
  --tinta:#1b2133; --gris:#6b7390; --gris-2:#9aa0b4; --linea:#e3e6f0; --fondo:#f6f7fb;
  --ok:#22b07d; --pend:#f5a623; --alerta:#e5484d; --placa:#ffd400;
  --sombra:0 1px 4px rgba(20,24,60,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--fondo);color:var(--tinta);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
#app{min-height:100vh;padding-bottom:90px}

/* Barra superior */
.barra{background:var(--azul);color:#fff;position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top)}
.barra .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 16px}
.barra .logo{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--azul);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;flex:none}
.barra .tit{flex:1;min-width:0}
.barra h1{margin:0;font-size:20px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra small{display:block;font-size:13.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reloj{text-align:right;flex:none;font-variant-numeric:tabular-nums}
.reloj b{display:block;font-size:20px;font-weight:800;line-height:1.1}
.reloj span{font-size:12.5px;opacity:.85}
.tabs{display:none}
.cab-lista{padding:14px 16px 12px}
.solo-pc{display:none}
.cab-lista h2{margin-bottom:10px}
@media (max-width:599px){
  .barra h1{font-size:18px}
  .reloj b{font-size:16px}
  .reloj span{display:none}
  .kpi{padding:10px 12px}
  .kpi b{font-size:21px}
}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:12;background:#fff;border-top:1px solid var(--linea);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}
.nav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px 10px;font-size:12.5px;font-weight:650;color:var(--gris)}
.nav button svg{width:24px;height:24px}
.nav button.on{color:var(--azul)}

.cuerpo{max-width:1240px;margin:0 auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.demo-cinta{font-size:12px;color:var(--gris);text-align:center}
.demo-cinta b{color:var(--azul)}

/* KPIs */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sombra)}
.kpi b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;color:var(--gris)}
.kpi.dest b{color:var(--azul)}

.tarjeta{background:#fff;border-radius:16px;padding:16px;box-shadow:var(--sombra)}
.tarjeta h2{margin:0 0 12px;font-size:17px;font-weight:800}
.tarjeta h2 small{font-weight:500;color:var(--gris);font-size:13.5px;margin-left:6px}

/* Placa colombiana */
.placa{display:inline-flex;align-items:center;justify-content:center;background:var(--placa);color:#111;border:2px solid #111;border-radius:7px;font-family:"Arial Black","Segoe UI Black",Arial,sans-serif;font-weight:900;letter-spacing:.06em;padding:3px 9px;font-size:16px;line-height:1.1;white-space:nowrap;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.placa,.tx .placa{color:#111}
.placa.gde{font-size:30px;padding:6px 16px;border-width:3px;border-radius:10px}
.entrada-placa{position:relative}
.entrada-placa input{width:100%;background:var(--placa);border:3px solid #111;border-radius:12px;font-family:"Arial Black","Segoe UI Black",Arial,sans-serif;font-weight:900;font-size:34px;letter-spacing:.12em;text-align:center;text-transform:uppercase;padding:10px 8px;outline:none;color:#111}
.entrada-placa input::placeholder{color:rgba(0,0,0,.2)}
.entrada-placa input:focus{box-shadow:0 0 0 4px rgba(26,86,219,.25)}
.ayuda{display:block;font-size:12.5px;color:var(--gris);margin-top:6px}
.ayuda.mal{color:#a51f24;font-weight:600}
.ayuda.bien{color:#137a43;font-weight:600}
.tipo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.tipo button{border:2px solid #d5d9e6;border-radius:12px;padding:11px 6px;font-weight:750;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.tipo button.on{border-color:var(--azul);background:var(--azul-claro);color:var(--azul-osc)}
.tipo svg{width:24px;height:24px}

/* Botones */
.btn{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;background:var(--azul);color:#fff;font-weight:750;font-size:17px;padding:14px 16px;min-height:54px;width:100%;text-align:center;box-shadow:0 2px 6px rgba(26,86,219,.25)}
.btn:active{transform:translateY(1px);filter:brightness(.95)}
.btn.alt{background:#fff;color:var(--tinta);border:1.5px solid #d5d9e6;box-shadow:none}
.btn.verde{background:#16a34a;box-shadow:0 2px 6px rgba(22,163,74,.25)}
.btn.rojo{background:var(--alerta);box-shadow:none}
.btn.chico{min-height:42px;padding:8px 14px;font-size:15px;width:auto;border-radius:11px}
.btn svg{width:22px;height:22px;flex:none}
.btn[disabled]{opacity:.5;pointer-events:none}
.fila-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Buscar */
.buscar{position:relative}
.buscar input{width:100%;background:#fff;border:1px solid var(--linea);border-radius:999px;padding:12px 16px 12px 44px;font-size:16px;outline:none;text-transform:uppercase}
.buscar input::placeholder{text-transform:none}
.buscar input:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(26,86,219,.15)}
.buscar svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--gris-2)}

/* Lista de vehículos (celular) */
.lista{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sombra)}
.veh{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #eef0f6;width:100%;text-align:left}
.veh:last-child{border-bottom:0}
.veh:active{background:#f3f5fa}
.veh .tx{flex:1;min-width:0}
.veh .tx b{display:block;font-weight:700;font-size:15.5px;font-variant-numeric:tabular-nums}
.veh .tx>span{font-size:13px;color:#7a819a}
.veh .der{text-align:right;flex:none}
.veh .der b{display:block;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.veh .der span{font-size:12.5px;color:var(--azul);font-weight:700}
.veh .ic{width:26px;height:26px;color:#7a819a;flex:none}
.tag{display:inline-block;font-size:11.5px;font-weight:750;padding:2px 8px;border-radius:999px;vertical-align:1px}
.tag.ok{background:#e6f7ee;color:#137a43}.tag.pend{background:#fff4e0;color:#9a5b00}.tag.alerta{background:#fdecec;color:#a51f24}.tag.info{background:var(--azul-claro);color:var(--azul-osc)}
.vacio{padding:26px 16px;text-align:center;color:var(--gris)}

/* Tabla (PC) */
.tabla{display:none;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabla th{background:#eef0f8;color:#4b5270;font-weight:650;text-align:left;padding:10px 12px;font-size:13.5px}
.tabla td{padding:10px 12px;border-top:1px solid #eef0f6;font-size:15px}
.tabla tr.fila:hover td{background:#f7f9ff;cursor:pointer}
.tabla td.v{font-weight:800}
.tabla td:last-child,.tabla th:last-child{text-align:right}

/* Mensualidades */
.mens{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #eef0f6}
.mens:last-child{border-bottom:0}
.mens .tx{flex:1;min-width:0}
.mens .tx b{display:block;font-weight:700}
.mens .tx>span{font-size:13px;color:#7a819a}
.mens .acc{display:flex;gap:8px;flex:none}
@media (max-width:599px){ .mens{flex-wrap:wrap} .mens .tx{flex:1 1 150px} .mens .acc{width:100%;justify-content:flex-end} }

/* Caja */
.medios-tot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.medio-t{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sombra);border-left:5px solid}
.medio-t b{display:block;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.medio-t span{font-size:13px;color:var(--gris)}
.resumen .ln{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #e3e6f0;font-variant-numeric:tabular-nums}
.resumen .ln:last-child{border-bottom:0}
.resumen .ln.tot{font-weight:850;font-size:19px;border-top:2px solid var(--tinta);border-bottom:0;margin-top:4px;padding-top:10px}
.mov{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid #eef0f6;align-items:center;font-size:14.5px}
.mov:last-child{border-bottom:0}
.mov .h{width:64px;color:var(--gris);font-variant-numeric:tabular-nums;flex:none;font-size:13.5px}
.mov .tx{flex:1;min-width:0}
.mov .v{font-weight:800;font-variant-numeric:tabular-nums}

/* Hojas */
#capa{position:fixed;inset:0;z-index:30;display:none}
#capa.on{display:block}
.fondo-capa{position:absolute;inset:0;background:rgba(15,20,40,.45);animation:aparece .18s ease}
.hoja{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:#fff;border-radius:22px 22px 0 0;max-height:94vh;overflow:auto;padding:8px 18px calc(18px + env(safe-area-inset-bottom));animation:sube .22s ease;overscroll-behavior:contain}
.hoja .asa{width:42px;height:5px;border-radius:9px;background:#d5d9e6;margin:4px auto 12px}
.hoja h3{margin:0 0 4px;font-size:21px;font-weight:800}
.hoja .sub{color:var(--gris);font-size:14.5px;margin:0 0 14px}
.campo{display:block;margin-bottom:14px}
.campo>span{display:block;font-size:14px;font-weight:650;color:#4b5270;margin-bottom:6px}
.campo input,.campo select{width:100%;border:1.5px solid #d5d9e6;border-radius:12px;padding:12px 14px;font-size:17px;background:#fff;outline:none}
.campo input:focus,.campo select:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(26,86,219,.15)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cobro-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.detalle .ln{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #f0f2f7;font-size:15.5px;font-variant-numeric:tabular-nums}
.detalle .ln span{color:var(--gris)}
.detalle .ln b{text-align:right}
.total{display:flex;justify-content:space-between;align-items:baseline;background:var(--azul-claro);border-radius:14px;padding:12px 16px;margin:12px 0 14px}
.total span{font-weight:700;color:var(--azul-osc)}
.total b{font-size:34px;font-weight:900;color:var(--azul-osc);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.medios{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.medios button{border:2px solid #d5d9e6;border-radius:12px;padding:11px 2px;font-weight:750;font-size:14.5px}
.medios button.on{border-color:var(--azul);background:var(--azul-claro);color:var(--azul-osc)}
.mini-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.mini-chips button{background:#f1f3f8;border-radius:999px;padding:8px 13px;font-size:14px;font-weight:600;color:#4b5270}
.vueltas{display:flex;justify-content:space-between;font-weight:800;font-size:18px;background:#e6f7ee;color:#137a43;border-radius:12px;padding:10px 14px;margin:-4px 0 14px}
.vueltas.falta{background:#fdecec;color:#a51f24}
.aviso{border-radius:12px;padding:11px 14px;font-weight:600;font-size:14.5px;margin-bottom:12px}
.aviso.alerta{background:#fdecec;color:#a51f24}.aviso.ok{background:#e6f7ee;color:#137a43}.aviso.info{background:var(--azul-claro);color:var(--azul-osc)}
.sugerencias{border:1px solid var(--linea);border-radius:12px;overflow:hidden;margin-top:8px}

/* Vista previa del tiquete */
.tiq-prev{background:#eef0f6;border-radius:14px;padding:14px;margin-bottom:14px;display:flex;justify-content:center}
.tiquete{width:280px;background:#fff;color:#111;font-family:"Courier New",Consolas,monospace;font-size:13px;line-height:1.4;padding:14px 14px 18px;box-shadow:0 4px 14px rgba(20,24,60,.15)}
.tiquete .c{text-align:center}
.tiquete .g{font-size:15px;font-weight:700}
.tiquete .xl{font-size:24px;font-weight:700;letter-spacing:.08em}
.tiquete .tt{font-size:19px;font-weight:700}
.tiquete hr{border:0;border-top:1px dashed #555;margin:7px 0}
.tiquete .ln{display:flex;justify-content:space-between;gap:8px}
.tiquete .barras{height:38px;margin:8px auto 2px;width:85%;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 8px,#111 8px 11px,#fff 11px 12px)}

/* Diálogo */
.dialogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 40px);max-width:420px;background:#fff;border-radius:20px;padding:20px;animation:aparece .18s ease}
.dialogo h3{margin:0 0 8px;font-size:20px}
.dialogo p{margin:0 0 16px;color:#4b5270;font-size:15.5px}

#toast{position:fixed;left:0;right:0;top:84px;z-index:45;display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.tst{background:#1b2133;color:#fff;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.25);max-width:520px;animation:aparece .2s ease}
.nota{font-size:13px;color:var(--gris);line-height:1.45}
.firma{text-align:center;font-size:12.5px;color:var(--gris-2);padding:6px 0}
#imprimir{display:none}

@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}

/* ---------- PC / tableta ---------- */
@media (min-width:900px){
  #app{padding-bottom:20px}
  .nav{display:none}
  .tabs{display:block;background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:66px;z-index:9}
  .tabs .in{max-width:1240px;margin:0 auto;display:flex;gap:4px;padding:0 16px}
  .tabs button{padding:13px 18px;font-weight:700;color:var(--gris);border-bottom:3px solid transparent;display:flex;gap:8px;align-items:center}
  .tabs button svg{width:20px;height:20px}
  .tabs button.on{color:var(--azul);border-bottom-color:var(--azul)}
  .cuerpo{padding:20px 16px;gap:16px}
  .kpis{grid-template-columns:repeat(4,1fr);gap:14px}
  .kpi{padding:16px 18px}
  .kpi b{font-size:30px}
  .rejilla{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
  .lista.veh-lista .veh{display:none}
  .tabla{display:table}
  .solo-pc{display:block}
  .medios-tot{grid-template-columns:repeat(4,1fr)}
  .rejilla-caja{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .hoja{bottom:auto;top:50%;transform:translateY(-50%);border-radius:20px;animation:aparece .18s ease;max-height:90vh}
  .hoja .asa{display:none}
  #toast{top:auto;bottom:24px}
}
@media (min-width:900px){ .rejilla>*{min-width:0} }

/* ---------- Impresión: tirilla de 80 mm ---------- */
@media print{
  @page{size:80mm 200mm;margin:0}
  html,body{background:#fff!important;width:80mm}
  #app,#capa,#toast{display:none!important}
  #imprimir{display:block!important}
  #imprimir .tiquete{width:72mm;margin:0 auto;padding:3mm 3mm 6mm;box-shadow:none;font-size:13px;color:#000}
  #imprimir .tiquete .barras{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}