:root{
  --bg:#f4f5f7; --panel:#ffffff; --panel-2:#fafbfc; --border:#dfe3e8;
  --text:#1c2430; --muted:#6b7683; --accent:#0f5c8c; --accent-soft:#e6f0f7;
  --ok:#1f7a4d; --ok-soft:#e6f4ec; --warn:#8a5a00; --warn-soft:#fdf3e0;
  --bad:#a32c26; --bad-soft:#fbeceb; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.05);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12161b; --panel:#1a1f26; --panel-2:#161b21; --border:#2c343d;
    --text:#e6eaef; --muted:#98a3af; --accent:#5aa9dc; --accent-soft:#15303f;
    --ok:#5ec98d; --ok-soft:#14301f; --warn:#e0b060; --warn-soft:#2f2512;
    --bad:#e88b84; --bad-soft:#33191a; --shadow:none;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}
h1{font-size:19px}
h2{font-size:15px}
h3{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}

/* ---------- Barra superior ---------- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--border);
}
.topbar .marca{display:flex; flex-direction:column; margin-right:auto; min-width:0}
.topbar .marca input{
  font:600 19px/1.3 inherit; color:var(--text); background:transparent;
  border:1px solid transparent; border-radius:6px; padding:2px 6px; margin-left:-6px; width:100%;
}
.topbar .marca input:hover{border-color:var(--border)}
.topbar .marca input:focus{border-color:var(--accent); outline:none; background:var(--panel-2)}
.topbar .marca span{font-size:12px; color:var(--muted)}

button{
  font:inherit; font-size:13px; padding:8px 13px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border); background:var(--panel-2); color:var(--text);
}
button:hover{border-color:var(--accent); color:var(--accent)}
button.primario{background:var(--accent); border-color:var(--accent); color:#fff}
button.primario:hover{filter:brightness(1.08); color:#fff}
button:disabled{opacity:.5; cursor:not-allowed}
button:disabled:hover{border-color:var(--border); color:var(--text)}

/* ---------- Estructura ---------- */
main{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(360px,.9fr);
  gap:18px; padding:18px 20px 60px; max-width:1440px; margin:0 auto; align-items:start;
}
@media (max-width:1050px){ main{grid-template-columns:1fr} }

.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden;
}
.panel > header{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--border); background:var(--panel-2);
}
.panel > header .paso{
  width:22px; height:22px; flex:none; border-radius:50%; background:var(--accent); color:#fff;
  font-size:12px; font-weight:600; display:grid; place-items:center;
}
.panel > header .nota{margin-left:auto; font-size:12px; color:var(--muted); text-align:right}
.cuerpo{padding:16px}

/* ---------- Formularios ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px}
.campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.campo label{font-size:12px; color:var(--muted); font-weight:500}
.campo .sufijo{position:relative; display:flex; align-items:center}
.campo .sufijo em{
  position:absolute; right:10px; font-style:normal; font-size:12px; color:var(--muted); pointer-events:none;
}
input,select,textarea{
  font:inherit; font-size:14px; width:100%; padding:8px 10px; color:var(--text);
  background:var(--panel-2); border:1px solid var(--border); border-radius:7px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.sufijo input{padding-right:40px}
.check{display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); cursor:pointer}
.check input{width:16px; height:16px; margin:2px 0 0; flex:none; accent-color:var(--accent)}
.check span{font-size:13px}
.check small{display:block; color:var(--muted); font-size:11.5px; line-height:1.4}
.aviso{
  display:none; gap:8px; margin-top:12px; padding:9px 12px; border-radius:8px;
  background:var(--warn-soft); color:var(--warn); font-size:12.5px;
}
.aviso.visible{display:flex}

/* ---------- Buscador de direcciones ---------- */
.buscador{position:relative}
.pista{font-size:11.5px; color:var(--muted); min-height:1em}
.sugerencias{
  position:absolute; top:100%; left:0; right:0; z-index:30; margin:4px 0 0; padding:4px;
  list-style:none; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18); max-height:260px; overflow:auto;
}
.sugerencias li{padding:7px 9px; border-radius:6px; font-size:13.5px; cursor:pointer}
.sugerencias li:hover,.sugerencias li.activa{background:var(--accent-soft); color:var(--accent)}

/* ---------- Mapa de la ruta ---------- */
.ruta{display:flex; flex-direction:column; gap:6px; margin-top:12px}
.ruta[hidden],.ruta [hidden]{display:none}
.ruta iframe{
  width:100%; height:280px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2);
}
.ruta a{align-self:flex-start; font-size:12.5px; color:var(--accent); text-decoration:none}
.ruta a:hover{text-decoration:underline}

/* ---------- Indicadores del día ---------- */
.indicadores{
  display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center;
  padding:9px 20px; font-size:12.5px; color:var(--muted);
  background:var(--panel-2); border-bottom:1px solid var(--border);
}
.indicadores b{color:var(--text); font-variant-numeric:tabular-nums; font-weight:600}
.indicadores .combustible{margin-left:auto; display:flex; align-items:center; gap:8px}
.indicadores button{padding:4px 10px; font-size:12px}

/* ---------- Flota ---------- */
.flota{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:11px}
.equipo{
  text-align:left; padding:12px 13px; border-radius:9px; display:block;
  border:1.5px solid var(--border); background:var(--panel-2); cursor:pointer;
}
.equipo:hover{border-color:var(--accent)}
.equipo.sel{border-color:var(--accent); background:var(--accent-soft)}
.equipo.sel:hover{color:var(--text)}
.equipo:disabled{opacity:.45; cursor:not-allowed; border-color:var(--border); color:var(--text)}
.equipo .cab{display:flex; align-items:flex-start; gap:8px; justify-content:space-between}
.equipo .nom{font-weight:600; font-size:14px; min-width:0}
.equipo .specs{font-size:12px; color:var(--muted); margin-top:3px}
.equipo .precio{margin-top:9px; font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}
.equipo .precio small{font-size:11.5px; font-weight:400; color:var(--muted); display:block}
.equipo .tag{
  flex:none; margin-top:1px; font-size:10.5px; font-weight:600; white-space:nowrap;
  padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em;
}
.tag.rec{background:var(--ok-soft); color:var(--ok)}
.tag.no{background:var(--bad-soft); color:var(--bad)}
.tag.multi{background:var(--warn-soft); color:var(--warn)}

.noSirven{grid-column:1/-1}
.noSirven summary{cursor:pointer; font-size:12.5px; color:var(--muted); padding:4px 2px}
.noSirven .flota{margin-top:8px}

/* ---------- Listas editables: flota y trabajadores ---------- */
.barra{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.barra select{width:auto; min-width:190px}
.espacio{flex:1}
label.boton{
  font-size:13px; padding:8px 13px; border-radius:8px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--border); background:var(--panel-2); color:var(--text);
}
label.boton:hover{border-color:var(--accent); color:var(--accent)}
button.peligro{color:var(--bad)}
button.peligro:hover{border-color:var(--bad); color:var(--bad)}
.listaTabla{max-height:240px; overflow:auto; border:1px solid var(--border); border-radius:8px}
table.tabla{width:100%; border-collapse:collapse; font-size:13px}
table.tabla th{
  position:sticky; top:0; background:var(--panel-2); text-align:left; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap;
  padding:7px 9px; border-bottom:1px solid var(--border);
}
table.tabla td{padding:7px 9px; border-bottom:1px solid var(--border)}
table.tabla tbody tr:last-child td{border-bottom:none}
table.tabla tbody tr{cursor:pointer}
table.tabla tbody tr:hover td{background:var(--panel-2)}
table.tabla tbody tr.sel td{background:var(--accent-soft)}
table.tabla .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.edicion{margin-top:14px}
.cargas{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:12px 0; font-size:13px}
.cargas > span{font-size:12px; color:var(--muted); font-weight:500}
.cargas label{display:flex; align-items:center; gap:5px; cursor:pointer}
.cargas input{width:15px; height:15px; margin:0; accent-color:var(--accent)}
.accionesEquipo{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
input.patente{text-transform:uppercase}
.importacion{margin-bottom:12px; padding:12px 14px; border-radius:8px; background:var(--accent-soft); font-size:13px}
.importacion p{margin:0 0 6px}
.importacion ul{margin:0 0 8px; padding-left:18px; font-size:12.5px}

/* ---------- Cotización ---------- */
.sticky{position:sticky; top:78px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border-bottom:1px solid var(--border)}
.kpi{background:var(--panel); padding:11px 12px; text-align:center}
.kpi b{display:block; font-size:15px; font-variant-numeric:tabular-nums}
.kpi span{font-size:11px; color:var(--muted)}

table.desglose{width:100%; border-collapse:collapse; font-size:13.5px}
table.desglose td{padding:5px 0; vertical-align:top}
table.desglose td:last-child{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:12px}
table.desglose td small{display:block; color:var(--muted); font-size:11.5px}
table.desglose tr.grupo td{
  padding-top:13px; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600;
}
table.desglose tr.sep td{border-top:1px solid var(--border); padding-top:8px}
table.desglose tr.sub td{font-weight:600}
table.desglose tr.desc td{color:var(--ok)}
table.desglose tr.total td{
  border-top:2px solid var(--text); padding-top:10px; font-size:19px; font-weight:700;
}
.jornada{
  margin:14px 0 0; padding:11px 12px; border-radius:8px; background:var(--panel-2);
  border:1px solid var(--border); font-size:12.5px;
}
.jornada h3{margin-bottom:7px}
.jornada div{display:flex; justify-content:space-between; gap:12px; padding:2px 0}
.jornada div span:last-child{font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap}
.jornada small{display:block; color:var(--muted); font-size:11.5px}
.jornada .alerta{color:var(--warn); margin-top:7px; display:block}
.vacio{padding:34px 16px; text-align:center; color:var(--muted); font-size:13.5px}
.acciones{display:flex; gap:8px; padding:0 16px 16px}
.acciones button{flex:1}

/* ---------- Diálogos ---------- */
dialog{
  border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); color:var(--text);
  padding:0; max-width:min(880px,94vw); width:100%; box-shadow:0 12px 40px rgba(0,0,0,.25);
}
dialog::backdrop{background:rgba(10,14,20,.55)}
dialog > header{padding:14px 16px; border-bottom:1px solid var(--border); background:var(--panel-2)}
dialog > header p{margin:5px 0 0; font-size:12.5px; color:var(--muted)}
dialog .cuerpo{max-height:66vh; overflow:auto}
dialog footer{display:flex; gap:8px; justify-content:flex-end; padding:13px 16px; border-top:1px solid var(--border); background:var(--panel-2)}
.grupoParam{margin-bottom:20px}
.grupoParam h3{margin-bottom:9px; padding-bottom:5px; border-bottom:1px solid var(--border)}
.resumenUnidad{
  margin:12px 0 0; padding:10px 12px; border-radius:8px; background:var(--accent-soft);
  font-size:12.5px; display:flex; flex-wrap:wrap; gap:6px 20px;
}
.resumenUnidad b{font-variant-numeric:tabular-nums}
.historial{list-style:none; margin:0; padding:0; font-size:13px}
.historial li{display:flex; gap:12px; align-items:center; padding:9px 4px; border-bottom:1px solid var(--border)}
.historial li b{font-variant-numeric:tabular-nums}
.historial li .desc{flex:1; min-width:0; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- Acceso y cuenta (sólo versión en la nube) ---------- */
.acceso{
  min-height:100dvh; display:grid; place-items:center; padding:24px;
}
.acceso .tarjeta{
  width:100%; max-width:410px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:26px;
}
.acceso h1{margin-bottom:4px}
.acceso .sub{color:var(--muted); font-size:13px; margin-bottom:20px}
.acceso .campo{margin-bottom:12px}
.acceso button{width:100%; margin-top:6px; padding:10px}
.acceso .alterna{margin-top:16px; font-size:13px; color:var(--muted); text-align:center}
.acceso .alterna a{color:var(--accent); cursor:pointer; text-decoration:underline}
.mensaje{
  margin-top:12px; padding:9px 12px; border-radius:8px; font-size:12.5px; display:none;
}
.mensaje.visible{display:block}
.mensaje.error{background:var(--bad-soft); color:var(--bad)}
.mensaje.ok{background:var(--ok-soft); color:var(--ok)}

.cuenta{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted)}
.cuenta .correo{max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pastilla{
  font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.04em;
}
.pastilla.activa{background:var(--ok-soft); color:var(--ok)}
.pastilla.prueba{background:var(--accent-soft); color:var(--accent)}
.pastilla.vencida{background:var(--bad-soft); color:var(--bad)}

.bandaSusc{
  display:none; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 20px; font-size:13px; border-bottom:1px solid var(--border);
}
.bandaSusc.visible{display:flex}
.bandaSusc.aviso{background:var(--warn-soft); color:var(--warn)}
.bandaSusc.bloqueo{background:var(--bad-soft); color:var(--bad)}
.bandaSusc button{margin-left:auto}

.planes{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.plan{border:1.5px solid var(--border); border-radius:9px; padding:16px; background:var(--panel-2)}
.plan.destacado{border-color:var(--accent); background:var(--accent-soft)}
.plan h4{margin:0 0 4px; font-size:15px}
.plan .precio{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; margin:8px 0 2px}
.plan .periodo{font-size:12px; color:var(--muted)}
.plan ul{margin:12px 0 0; padding-left:18px; font-size:12.5px; color:var(--muted)}
.plan li{margin-bottom:4px}
.plan button{width:100%; margin-top:14px}

.tablaUsuarios{width:100%; border-collapse:collapse; font-size:13px}
.tablaUsuarios th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border);
}
.tablaUsuarios td{padding:7px 8px; border-bottom:1px solid var(--border)}

/* ---------- Documento imprimible ---------- */
#documento{display:none}
@media print{
  .no-print{display:none !important}
  body{background:#fff; color:#000; font-size:12px}
  main,.topbar,.bandaSusc{display:none !important}
  #documento{display:block}
  #documento h1{font-size:20px; margin-bottom:2px}
  #documento .doc-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:16px}
  #documento .doc-meta{text-align:right; font-size:12px; line-height:1.7}
  #documento h3{color:#000; margin:16px 0 6px; font-size:11px}
  #documento table{width:100%; border-collapse:collapse; font-size:12px}
  #documento table td{padding:4px 0; border-bottom:1px solid #ddd}
  #documento table td:last-child{text-align:right}
  #documento table tr.total td{border-top:2px solid #000; border-bottom:none; font-size:16px; font-weight:700; padding-top:8px}
  #documento .datos{display:grid; grid-template-columns:1fr 1fr; gap:2px 24px; font-size:12px}
  #documento .datos div{display:flex; justify-content:space-between; border-bottom:1px solid #eee; padding:3px 0}
  #documento .pie{margin-top:22px; font-size:10.5px; color:#555; border-top:1px solid #ccc; padding-top:10px}
  @page{margin:16mm}
}