:root { --bg:#f4f6f4; --card:#fff; --ink:#14201a; --muted:#5b6b62; --brand:#14532d; --brand2:#1d7a45;
  --warn:#b45309; --warnbg:#fef3c7; --err:#b91c1c; --errbg:#fee2e2; --ok:#166534; --okbg:#dcfce7; --line:#d6ddd8; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1512; --card:#18211c; --ink:#e8efe9; --muted:#9db0a4; --brand:#4ade80; --brand2:#22c55e;
    --warn:#fbbf24; --warnbg:#3a2a07; --err:#fca5a5; --errbg:#3b1212; --ok:#86efac; --okbg:#10301c; --line:#2a3a31; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--ink); }
header { display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
header nav { display:flex; gap:.25rem; flex:1; flex-wrap:wrap; }
header nav a { padding:.4rem .7rem; border-radius:8px; color:var(--ink); text-decoration:none; font-size:.95rem; }
header nav a.on { background:var(--brand); color:#fff; }
@media (prefers-color-scheme: dark) { header nav a.on { color:#06210f; } }
main { max-width:980px; margin:0 auto; padding:1rem; }
h1 { font-size:1.35rem; margin:.2rem 0 1rem; } h2 { font-size:1.1rem; margin:1.2rem 0 .5rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; margin-bottom:1rem; }
.grid { display:grid; gap:.75rem; } .g2 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
label { display:block; font-size:.85rem; color:var(--muted); margin:.6rem 0 .2rem; }
input, select, textarea { width:100%; padding:.6rem .7rem; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; }
input[type=checkbox], input[type=radio] { width:auto; }
.chk { display:flex; align-items:center; gap:.5rem; color:var(--ink); font-size:.95rem; margin:.3rem 0; }
button, .btn { padding:.65rem 1rem; font:inherit; border:0; border-radius:8px; background:var(--brand); color:#fff; cursor:pointer; }
@media (prefers-color-scheme: dark) { button, .btn { color:#06210f; } }
button.sec { background:transparent; color:var(--ink); border:1px solid var(--line); }
button.danger { background:var(--err); color:#fff; }
button.link { background:none; color:var(--brand); padding:.3rem .5rem; }
button:disabled { opacity:.5; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; }
.tile { padding:1rem; border-radius:12px; background:var(--card); border:1px solid var(--line); text-align:left; color:var(--ink); }
.tile b { display:block; font-size:1.05rem; } .tile span { color:var(--muted); font-size:.85rem; }
.badge { display:inline-block; min-width:1.4rem; padding:0 .4rem; border-radius:999px; background:var(--err); color:#fff; font-size:.75rem; text-align:center; }
.msg { padding:.7rem .9rem; border-radius:10px; margin:.6rem 0; }
.msg.aviso { background:var(--warnbg); color:var(--warn); } .msg.alerta, .msg.err { background:var(--errbg); color:var(--err); } .msg.ok { background:var(--okbg); color:var(--ok); }
.muted { color:var(--muted); font-size:.9rem; }
table { width:100%; border-collapse:collapse; font-size:.9rem; } th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
.scroll { overflow-x:auto; }
.row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.qrbox { text-align:center; } .qrbox img { max-width:260px; width:100%; background:#fff; padding:6px; border-radius:8px; }
video, canvas.prev { width:100%; max-height:46vh; background:#000; border-radius:10px; object-fit:cover; }
.thumb { max-width:100%; max-height:150px; border-radius:8px; border:1px solid var(--line); }
.cascada { max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:.5rem; }
.cascada details { margin:.2rem 0; } .cascada summary { cursor:pointer; font-weight:600; }
.casas { display:flex; flex-wrap:wrap; gap:.3rem .9rem; padding:.3rem 0 .3rem 1rem; }
.bar { height:10px; background:var(--brand2); border-radius:4px; min-width:2px; }
#toast { position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:.6rem 1rem; border-radius:10px; opacity:0; transition:opacity .2s; pointer-events:none; max-width:92vw; z-index:20; }
#toast.on { opacity:1; }
.login { max-width:380px; margin:12vh auto 0; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; margin-bottom:1rem; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; }
.kpi b { display:block; font-size:1.6rem; line-height:1.1; } .kpi span { color:var(--muted); font-size:.8rem; }
.vbars { display:flex; align-items:flex-end; gap:2px; height:140px; padding-top:.5rem; }
.vbars > div { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; min-width:0; }
.vbars i { display:block; width:100%; background:var(--brand2); border-radius:3px 3px 0 0; min-height:1px; }
.vbars i.pico { background:var(--warn); }
.vbars small { font-size:.6rem; color:var(--muted); margin-top:2px; }
.heat { display:grid; grid-template-columns:2.2rem repeat(24, 1fr); gap:2px; font-size:.6rem; }
.heat span { text-align:center; color:var(--muted); } .heat .c { aspect-ratio:1; border-radius:3px; background:var(--brand2); }
.cmp { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; }
.cmp figure { margin:0; } .cmp figcaption { font-size:.8rem; color:var(--muted); margin-bottom:.2rem; }
.cmp img { width:100%; border-radius:8px; border:1px solid var(--line); }
.no { color:var(--err); font-weight:700; } .si { color:var(--ok); font-weight:700; }
.export { display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0; }
/* ---- Seguridad: hoja imprimible de QR de puntos de control ---- */
.hoja { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; margin-top:1rem; }
.hoja .noimp { grid-column:1/-1; }
.qrpunto { margin:0; border:1px dashed var(--line); border-radius:8px; padding:.6rem; text-align:center; background:#fff; color:#000; break-inside:avoid; }
.qrpunto img { width:100%; max-width:180px; }
.bar.rojo { background:var(--err); }
@media print {
  header, #toast, #tabs, h1, .card, .noimp, .msg { display:none !important; }
  body { background:#fff; } main { max-width:none; padding:0; }
  .hoja { display:grid !important; grid-template-columns:repeat(3,1fr); gap:10mm; }
  .hoja * { display:revert; }
}
/* ---- Administración: recibo imprimible ---- */
.recibo { border:1px solid var(--line); border-radius:8px; padding:1rem; margin-top:.6rem; background:#fff; color:#000; }
.recibo h2 { margin:.2rem 0; } .recibo table { color:#000; }
#reciboimp { display:none; }
@media print {
  body.imp-recibo header, body.imp-recibo main, body.imp-recibo #toast { display:none !important; }
  body.imp-recibo #reciboimp { display:block !important; }
  body.imp-recibo #reciboimp .recibo { border:none; }
}
.chips { display:flex; gap:.4rem; flex-wrap:wrap; } .chip { padding:.15rem .6rem; border-radius:999px; background:var(--okbg); color:var(--ok); font-size:.8rem; } .chip.mal { background:var(--errbg); color:var(--err); } .chip.av { background:var(--warnbg); color:var(--warn); }