:root {
  --fondo: #f4f5f7; --tarjeta: #fff; --texto: #1d2330; --suave: #6b7385; --borde: #dfe3ea;
  --acento: #1f6feb; --ok: #1a7f37; --peligro: #cf222e; --aviso: #9a6700; --cq: #eaf2ff; --usa: #fff4d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1218; --tarjeta: #171b23; --texto: #e6e9ef; --suave: #98a1b3; --borde: #2a303c;
    --acento: #4c8dff; --ok: #3fb950; --peligro: #f85149; --aviso: #d29922; --cq: #15243d; --usa: #2d2614;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fondo); color: var(--texto); }
button { font: inherit; border: 0; border-radius: 6px; padding: 7px 12px; cursor: pointer; }
.primario { background: var(--acento); color: #fff; width: 100%; margin-top: 8px; }
.primario.on { background: var(--peligro); }
.peligro { background: var(--peligro); color: #fff; font-weight: 700; }
.sec { background: transparent; color: var(--suave); border: 1px solid var(--borde); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.gris { background: var(--borde); color: var(--suave); }
.verde { background: var(--ok); color: #fff; }
.rojo { background: var(--peligro); color: #fff; animation: latido 1s infinite; }
.amarillo { background: var(--aviso); color: #fff; }
@keyframes latido { 50% { opacity: .6; } }

header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 16px;
  background: var(--tarjeta); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 2; }
header form { margin: 0; }
.marca { font-weight: 800; font-size: 18px; }
.marca span { color: var(--acento); }
.estado { display: flex; gap: 8px; align-items: center; flex: 1; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
#frec { font-weight: 700; font-size: 16px; }

main { display: grid; grid-template-columns: 1fr 340px; gap: 16px; padding: 16px; max-width: 1300px; margin: 0 auto; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } aside { order: -1; } }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.titulo { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.titulo small { font-weight: 400; color: var(--suave); }
.filtro { margin-left: auto; font-weight: 400; color: var(--suave); }
.nota { color: var(--suave); font-size: 12px; margin: 4px 0 8px; }
.fila { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.fila input[type=number] { width: 64px; padding: 4px; border: 1px solid var(--borde); border-radius: 4px; background: var(--fondo); color: var(--texto); }

.lista { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.dec { display: grid; grid-template-columns: 62px 44px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px;
  border-bottom: 1px solid var(--borde); font-variant-numeric: tabular-nums; }
.dec.cq { background: var(--cq); }
.dec.usa { background: var(--usa); }
.dec.mio { outline: 2px solid var(--peligro); outline-offset: -2px; }
.dec .hora, .dec .snr { color: var(--suave); font-size: 12px; }
.dec .msg { font-family: ui-monospace, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dec .pais { color: var(--suave); font-size: 12px; margin-left: 6px; }
.dec img { width: 18px; height: 12px; vertical-align: -1px; margin-right: 4px; }
.etq { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.etq.nuevo { background: var(--ok); color: #fff; }
.etq.hecho { background: var(--borde); color: var(--suave); }
.dec button { background: var(--acento); color: #fff; padding: 4px 10px; font-size: 12px; }
.separador { padding: 3px 10px; font-size: 11px; color: var(--suave); background: var(--fondo); border-bottom: 1px solid var(--borde); }
.mini > div { padding: 4px 0; border-bottom: 1px solid var(--borde); font-size: 13px; }
.mini > div:last-child { border: 0; }
.mini small { color: var(--suave); }
.vacio { padding: 24px; text-align: center; color: var(--suave); }

body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
body.login .tarjeta { width: 100%; max-width: 340px; }
body.login h1 { margin: 0 0 12px; font-size: 22px; }
body.login h1 span { color: var(--acento); }
body.login label { display: block; margin: 10px 0; color: var(--suave); font-size: 13px; }
body.login input { display: block; width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--fondo); color: var(--texto); font: inherit; }
body.login button { width: 100%; background: var(--acento); color: #fff; margin-top: 8px; }
.err { color: var(--peligro); min-height: 1em; }