:root { --pri:#0b4f6c; --acc:#01baef; --bg:#f4f8fa; --card:#fff; --txt:#1d2b33; --mut:#6b7b85; --ok:#1f9d55; --warn:#d97706; --bad:#c0392b; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--txt); font-size:16px; }
header { display:flex; gap:12px; align-items:center; background:var(--pri); color:#fff; padding:10px 16px; position:sticky; top:0; z-index:5; flex-wrap:wrap; }
header nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
header nav a { color:#fff; text-decoration:none; padding:8px 12px; border-radius:8px; }
header nav a.on, header nav a:hover { background:rgba(255,255,255,.15); }
main { max-width:1100px; margin:0 auto; padding:16px; }
.card { background:var(--card); border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.07); }
h1 { font-size:1.4rem; margin:.2rem 0 1rem; } h2 { font-size:1.1rem; margin:1rem 0 .5rem; }
label { display:block; font-size:.85rem; color:var(--mut); margin:10px 0 4px; }
input, select, textarea { width:100%; padding:12px; border:1px solid #cfd8dc; border-radius:10px; font-size:1rem; background:#fff; }
textarea { min-height:80px; }
button, .btn { background:var(--pri); color:#fff; border:0; padding:12px 18px; border-radius:10px; font-size:1rem; cursor:pointer; text-decoration:none; display:inline-block; }
button.sec { background:#e3edf2; color:var(--pri); } button.ghost { background:transparent; border:1px solid rgba(255,255,255,.5); }
button.ok { background:var(--ok); } button.bad { background:var(--bad); }
button:disabled { opacity:.5; }
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.list .item { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px; border-bottom:1px solid #eef2f4; cursor:pointer; }
.list .item:hover { background:#f8fbfc; }
.muted { color:var(--mut); font-size:.85rem; }
.pill { display:inline-block; padding:3px 10px; border-radius:99px; font-size:.78rem; background:#e3edf2; color:var(--pri); white-space:nowrap; }
.pill-critica, .pill-fuera_servicio { background:#fde2e1; color:var(--bad); }
.pill-alta, .pill-observacion { background:#fdebd3; color:var(--warn); }
.pill-operativo, .pill-firmada, .pill-aprobada { background:#dcf3e5; color:var(--ok); }
table { width:100%; border-collapse:collapse; font-size:.92rem; } th, td { text-align:left; padding:8px; border-bottom:1px solid #eef2f4; }
.chk { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid #eef2f4; }
.chk select { width:auto; min-width:170px; }
.thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .thumbs img, .thumbs video { width:110px; height:85px; object-fit:cover; border-radius:8px; }
canvas.sig { width:100%; height:180px; border:2px dashed #b0bec5; border-radius:10px; background:#fff; touch-action:none; }
.photo-btn { position:relative; overflow:hidden; } .photo-btn input { position:absolute; inset:0; opacity:0; }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#263238; color:#fff; padding:12px 20px; border-radius:10px; z-index:20; }
.kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; } .kpi div { background:#fff; border-radius:12px; padding:14px; } .kpi b { font-size:1.6rem; display:block; color:var(--pri); }
.qr-page { padding:16px; } .qr-page .card { max-width:520px; margin:0 auto; } .brand { color:var(--pri); font-weight:700; margin:0; }
.login { max-width:380px; margin:10vh auto; }
@media print { header, button { display:none !important; } .card { box-shadow:none; } }