:root {
  --bg: #f4f5f7; --card: #fff; --fg: #1d2330; --muted: #6b7280; --line: #d8dce3; --accent: #1f5fa8; --accent-fg: #fff;
  --danger: #b42318; --ok: #1a7f37; --busy: #c2410c; --off: #9ca3af; --hl: #fff6d6;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171c; --card: #1d2128; --fg: #e6e8eb; --muted: #9aa1ab; --line: #333944; --accent: #5b9bea; --accent-fg: #0b1220; --hl: #3a3420; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
main { padding: 12px 16px 24px; }
h1 { font-size: 1.35rem; margin: .2em 0 .6em; } h1 small { color: var(--muted); font-weight: normal; }
h2 { font-size: 1.1rem; margin: 1em 0 .4em; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.flash { background: var(--hl); border: 1px solid var(--line); padding: 6px 10px; border-radius: 6px; }

/* menu */
header { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1000; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 4px 12px; }
.menu > a, .menu summary { padding: 6px 8px; border-radius: 4px; text-decoration: none; color: var(--fg); cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu > a:hover, .menu summary:hover { background: var(--bg); }
.menu .brand { font-weight: 700; color: var(--accent); }
.menu details { position: relative; }
.menu details > div { position: absolute; top: 100%; left: 0; background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 18px rgb(0 0 0 / .15); min-width: 240px; padding: 4px; z-index: 1001; }
.menu details > div a { display: block; padding: 6px 10px; text-decoration: none; color: var(--fg); border-radius: 4px; }
.menu details > div a:hover { background: var(--bg); }
.menu .quick { margin-left: auto; display: flex; gap: 6px; }
footer { border-top: 1px solid var(--line); padding: 3px 16px; font-size: 12px; color: var(--muted); }

/* controls */
input, select, button, .btn { font: inherit; color: inherit; }
input, select { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; max-width: 100%; }
button, .btn { display: inline-block; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 5px 12px;
  cursor: pointer; text-decoration: none; color: var(--fg); white-space: nowrap; }
button:hover, .btn:hover { border-color: var(--accent); }
button.primary, .menu .quick .btn { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.danger { color: var(--danger); }
.small { padding: 2px 8px; font-size: 12px; }
.up { text-transform: uppercase; }
.bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.form { display: grid; gap: 8px; max-width: 560px; }
.form label { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.form label input, .form label select { font-size: 14px; color: var(--fg); }
.grid2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 980px; }
.checks { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.checks label, label:has(> input[type=checkbox]) { display: inline-flex !important; gap: 4px; align-items: center; color: var(--fg) !important; font-size: 14px !important; }
fieldset { border: 1px solid var(--line); border-radius: 6px; }
.split { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .split > :first-child { flex: 1 1 520px; }
.buttons { display: grid; gap: 6px; min-width: 160px; } .buttons form, form.inline { display: inline; }
.login { max-width: 320px; margin: 12vh auto; display: grid; gap: 12px; text-align: center; }
.login label { display: grid; gap: 4px; }
.tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; text-decoration: none; color: var(--fg); min-width: 200px; display: grid; }
.tile b { font-size: 1.6rem; color: var(--accent); }

/* tables */
.grid { border-collapse: collapse; background: var(--card); width: 100%; }
.grid th, .grid td { border: 1px solid var(--line); padding: 3px 6px; text-align: left; vertical-align: middle; }
.grid th { background: var(--bg); font-weight: 600; position: sticky; top: 0; }
.grid.edit td { padding: 1px 2px; } .grid.edit input { border-color: transparent; width: 100%; } .grid.edit input:focus { border-color: var(--accent); }
.grid.small { font-size: 12px; }
.grid tr.link { cursor: pointer; } .grid tr.link:hover td, .grid tr.sel td { background: var(--hl); }
.grid tr.liq td { color: var(--muted); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; } .nowrap { white-space: nowrap; }
.scroll { overflow: auto; max-height: 70vh; margin-bottom: 8px; }
.totals { width: auto; min-width: 260px; margin: 8px 0; }

/* estados mensajero */
.estado { padding: 1px 6px; border-radius: 10px; color: #fff; font-size: 12px; }
.estado.e0 { background: var(--off); } .estado.e1 { background: var(--ok); } .estado.e2 { background: var(--busy); }

/* carga rapida */
.trip { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 8px 0; }
.trip label { display: grid; font-size: 12px; color: var(--muted); }
.montos { font-size: 12px; color: var(--muted); }
.cm { display: none !important; } body.manual .cm { display: inline-flex !important; gap: 4px; align-items: center; }
.rain { margin-left: auto; font-weight: 600; }

/* despacho */
.despacho { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; } .despacho > section { flex: 1 1 700px; min-width: 0; overflow-x: auto; }
.despacho > aside { flex: 0 1 300px; }

/* mapas */
.mapwrap { display: grid; grid-template-columns: 1fr minmax(320px, 45%); gap: 12px; }
#map { height: 72vh; border-radius: 8px; border: 1px solid var(--line); }
.mapwrap > :last-child { max-height: 72vh; overflow: auto; }
@media (max-width: 800px) { .mapwrap { grid-template-columns: 1fr; } #map { height: 50vh; } }

/* chart */
.chart { margin: 12px 0; } .chart figcaption { font-weight: 600; margin-bottom: 6px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 180px; border-bottom: 1px solid var(--line); }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bar-col span { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 1px; } .bar-col small { color: var(--muted); }

/* print layouts */
.page { background: var(--card); padding: 16px; margin-bottom: 16px; }
.ph { display: flex; justify-content: space-between; border-bottom: 2px solid var(--fg); margin-bottom: 8px; } .ph h2 { margin: 0; }
.voucher-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; break-inside: avoid; }
.voucher { border: 1px dashed var(--fg); padding: 10px; background: var(--card); }
.vh { display: flex; justify-content: space-between; font-size: 1.2rem; } .nro { font-weight: 700; }
.barcode { font-family: "Libre Barcode 39", monospace; font-size: 1.4rem; letter-spacing: 2px; text-align: center; margin: 6px 0; }
.firma { display: flex; justify-content: space-around; margin-top: 30px; } .firma span { border-top: 1px solid var(--fg); padding: 0 30px; }
@media print {
  :root { --bg: #fff; --card: #fff; --fg: #000; --line: #999; }
  .noprint, header, footer { display: none !important; } main { padding: 0; }
  .page { break-after: page; padding: 0; } .grid th { position: static; }
}
@media (max-width: 600px) { .menu .quick { margin-left: 0; } .voucher-pair { grid-template-columns: 1fr; } }