:root{
  --g:#0b6b3a;        /* verde base */
  --g2:#0a8f4e;       /* verde acento */
  --y:#f4c430;        /* amarillo meta */
  --r:#d7263d;        /* rojo bajo */
  --txt:#0b1320;
  --muted:#667085;
  --line:#e6e8ec;
  --card:#ffffff;
}
*{ box-sizing:border-box; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }
body{ margin:0; background:linear-gradient(135deg,#f3fbf6 0%,#f7faf8 55%,#ffffff 100%); color:var(--txt); }
a{ color:var(--g); text-decoration:none; }
.wrap{ max-width:1100px; margin:0 auto; padding:22px; }
.topbar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 18px; border:1px solid var(--line); background:rgba(255,255,255,.85);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.brand{ display:flex; flex-direction:column; }
.brand b{ font-size:1.05rem; }
.brand span{ color:var(--muted); font-size:.9rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background:#fff; cursor:pointer;
}
.btn.primary{ background:var(--g); border-color:var(--g); color:#fff; }
.btn.danger{ background:var(--r); border-color:var(--r); color:#fff; }
.btn.small{ padding:7px 10px; border-radius:10px; font-size:.92rem; }
.grid{ display:grid; gap:14px; }
.grid.two{ grid-template-columns:1fr 1fr; }
.grid.three{ grid-template-columns:1fr 1fr 1fr; }
@media(max-width:900px){ .grid.two,.grid.three{ grid-template-columns:1fr; } }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.kpi{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kpi .val{ font-size:1.7rem; font-weight:800; }
.kpi .lbl{ color:var(--muted); font-size:.95rem; }
.tag{ display:inline-flex; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.85rem; }
.tag.meta{ background:rgba(244,196,48,.18); color:#7a5a00; border:1px solid rgba(244,196,48,.35); }
.tag.ok{ background:rgba(10,143,78,.12); color:var(--g); border:1px solid rgba(10,143,78,.25); }
.tag.low{ background:rgba(215,38,61,.12); color:var(--r); border:1px solid rgba(215,38,61,.25); }

table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px 10px; border-bottom:1px solid var(--line); text-align:left; }
th{ color:var(--muted); font-size:.9rem; }
input,select{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); outline:none; background:#fff;
}
label{ display:block; margin:10px 0 6px; font-weight:700; }
.note{ color:var(--muted); font-size:.92rem; }
.alert{
  padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:#fff;
}
.alert.ok{ border-color:rgba(10,143,78,.25); background:rgba(10,143,78,.06); }
.alert.bad{ border-color:rgba(215,38,61,.25); background:rgba(215,38,61,.06); }