:root { --azul:#0b2a4a; --cian:#1aa3dd; --gris:#5b6b7b; --linea:#d6dee6; --suave:#f3f7fa; --fondo:#fff;
        --rojo:#d64545; --naranja:#f0932b; --verde:#2e9e5b; --sindato:#8a97a4; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: #1c2833; font: 14px/1.45 "Segoe UI", Arial, sans-serif; }
a { color: var(--cian); }
.top { background: var(--azul); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 10px 16px; }
.top .marca { font-weight: 700; letter-spacing: .3px; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 1; }
.top a { color: #cfe3f2; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.top a.on, .top a:hover { color: #fff; border-bottom-color: var(--cian); }
.top form { margin: 0; }
.linkbtn { background: none; border: 0; color: #cfe3f2; cursor: pointer; font: inherit; padding: 4px 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 22px; color: var(--azul); margin: 0 0 4px; }
.sub { color: var(--gris); margin-bottom: 14px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 14px 0; }
.filtros label { display: flex; flex-direction: column; font-size: 12px; color: var(--gris); gap: 3px; }
select, input[type=password], input[type=text] { padding: 6px 8px; border: 1px solid var(--linea); border-radius: 6px; font: inherit; }
button, .btn { background: var(--azul); color: #fff; border: 0; border-radius: 6px; padding: 7px 14px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
button:disabled { opacity: .5; cursor: default; }
.btn.sec { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: var(--azul); color: #fff; text-align: left; padding: 7px 8px; font-weight: 600; }
td { padding: 6px 8px; border-bottom: 1px solid var(--linea); }
td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.tot td { font-weight: 700; background: var(--suave); border-top: 2px solid var(--azul); }
.scroll { overflow-x: auto; }
.semaforo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.semaforo::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sindato); }
.semaforo.rojo::before { background: var(--rojo); }
.semaforo.naranja::before { background: var(--naranja); }
.semaforo.verde::before { background: var(--verde); }
.semaforo.sin_dato::before { background: var(--sindato); }
.conteo { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 16px; }
.conteo .caja { background: var(--suave); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 14px; min-width: 110px; }
.conteo .caja b { display: block; font-size: 20px; color: var(--azul); }
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #fde8e8; color: #9b1c1c; margin-right: 4px; }
.badge.warn { background: #fff1dc; color: #8a5200; }
.msg { background: #e8f4fb; border: 1px solid var(--cian); border-radius: 6px; padding: 8px 12px; margin: 10px 0; }
.err { color: var(--rojo); }
.login { max-width: 340px; margin: 12vh auto; padding: 0 16px; }
.login form { display: flex; flex-direction: column; gap: 12px; }
.vacio { color: var(--gris); padding: 24px 0; }
@media (max-width: 640px) { .top { padding: 8px 16px; } }
@media print { .top, .filtros, .noprint { display: none !important; } .wrap { padding: 0; } }