:root{
  --bg:#f7f4ee; --panel:#fff; --ink:#1f2328; --muted:#6b6f76; --line:#e6e1d8;
  --brand:#1a5c5c; --brand-2:#237272; --accent:#d9622b;
  --ok:#2e7d32; --ok-bg:#e8f5e9; --warn:#9a6700; --warn-bg:#fff4d6; --bad:#c62828; --bad-bg:#fdecea;
  --gray-bg:#f1f1f1; --radius:10px;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:15px; color:var(--ink);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
header{background:var(--brand);color:#fff;position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 16px;max-width:1280px;margin:auto}
header .logo{font-weight:700;letter-spacing:.5px;color:#fff;font-size:17px}
header nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
header nav a{color:#dfeeee;padding:6px 10px;border-radius:8px}
header nav a.on,header nav a:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
header .who{font-size:13px;color:#cfe3e3}
main{max-width:1280px;margin:auto;padding:18px 16px 60px}
h1{font-size:22px;margin:4px 0 14px} h2{font-size:17px;margin:22px 0 10px}
.muted{color:var(--muted)} .small{font-size:13px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.grow{flex:1}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar .sp{flex:1}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600}
input,select,textarea{font:inherit;padding:7px 9px;border:1px solid #cfc8bb;border-radius:8px;background:#fff;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc9c9;border-color:var(--brand)}
input.num{width:110px;text-align:right}
input.num.sm{width:84px}
textarea{width:100%;min-height:60px}
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--brand);background:var(--brand);color:#fff;
  padding:7px 13px;border-radius:8px;display:inline-block;white-space:nowrap}
button:hover,.btn:hover{background:var(--brand-2);text-decoration:none}
.btn.sec,button.sec{background:#fff;color:var(--brand)}
.btn.sec:hover,button.sec:hover{background:#eef6f6}
button.danger{background:#fff;color:var(--bad);border-color:#e7b4ae}
button.danger:hover{background:var(--bad-bg)}
button.sm,.btn.sm{padding:4px 9px;font-size:13px}
.inline{display:inline}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);background:#faf8f4;position:sticky;top:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.inactivo td{color:#999;background:#fafafa}
tr.sec-head td{background:var(--brand);color:#fff;font-weight:700;padding:6px 10px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.b-OK{background:var(--ok-bg);color:var(--ok)} .b-REVISAR{background:var(--warn-bg);color:var(--warn)}
.b-ALTO{background:var(--bad-bg);color:var(--bad)} .b-gray,.b-—,.b-SIN{background:var(--gray-bg);color:#777}
.b-inact{background:#eee;color:#777} .b-sub{background:#efe7f6;color:#5b2c6f}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.kpi .v{font-size:24px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.kpi.ok .v{color:var(--ok)} .kpi.warn .v{color:var(--warn)} .kpi.bad .v{color:var(--bad)}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:10px;border:1px solid}
.flash.ok{background:var(--ok-bg);border-color:#b9dfbc;color:#1b5e20}
.flash.warn{background:var(--warn-bg);border-color:#f0d58c;color:#6d4c00}
.flash.error{background:var(--bad-bg);border-color:#f2b8b2;color:#8e1c1c}
.age-old{color:var(--bad);font-weight:600} .age-mid{color:var(--warn)}
.sim{border:2px dashed #9cc9c9;background:#f3fafa}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs a{padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:#fff}
.tabs a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.login{max-width:360px;margin:10vh auto}
.login input{width:100%}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cost-strip{display:flex;gap:18px;flex-wrap:wrap}
.cost-strip div b{display:block;font-size:20px}
.warnbox{background:var(--warn-bg);border:1px solid #f0d58c;border-radius:8px;padding:8px 12px;font-size:14px}
@media (max-width:700px){
  header .who{display:none} main{padding:12px 10px 50px}
  th,td{padding:6px 6px} .hide-m{display:none}
}
