/* ========== Tema base (claro tropical) ========== */
:root{
  --bg:#f7faf9;
  --fg:#18222d;
  --muted:#6b7c87;

  --card:#ffffff;
  --border:#e6eeea;

  --accent:#16c79a;
  --accent-2:#ff8a66;
  --accent-3:#ffd66b;
  --accent-4:#60bfff;

  --danger:#ef4444;
  --blue:#3fb7ff;

  --elev:0 6px 22px rgba(7, 55, 38, .07);
  --elev-strong:0 10px 30px rgba(7, 55, 38, .10);

  --surface-1:#ffffff;
  --surface-2:#f5fbf8;
  --surface-3:#eef8f4;

  --input-bg:#ffffff;
  --input-border:#dfeae5;

  --tab-bg:#f0fbf7;
  --kpi-grad: linear-gradient(180deg, #ffffff 0%, #f4fbf8 100%);
}

/* Reset & layout */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}
a{ color:var(--blue) }
.wrap{ max-width:1000px; margin:auto; padding:16px }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.align-start{ align-items:flex-start }
.align-end{ align-self:end }
.space-between{ justify-content:space-between }
.spacer{ flex:1 }
.hidden{ display:none !important }
.overflow-auto{ overflow:auto }

/* Spacing utils */
.m0{ margin:0 }
.mt-6{ margin-top:6px }
.mt-8{ margin-top:8px }
.mt-10{ margin-top:10px }
.mt-12{ margin-top:12px }
.mb-6{ margin-bottom:6px }
.p0{ padding:0 }
.gap-8{ gap:8px }
.text-12{ font-size:12px }
.text-13{ font-size:13px }
.text-error{ color:#ff6b6b }
.fw-600{ font-weight:600 }
.flex-1{ flex:1 }
.w-140{ width:140px }
.onecol{ grid-template-columns:1fr }

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--elev);
}
.card .hd{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-weight:700; letter-spacing:.2px;
}
.card .bd{ padding:12px 14px }
.muted{ color:var(--muted) }

/* Buttons */
.btn{
  appearance:none; cursor:pointer;
  border:1px solid var(--input-border);
  background:var(--surface-2);
  color:var(--fg);
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  transition:transform .06s ease, filter .12s ease, box-shadow .2s ease;
}
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform:translateY(1px) }
.btn.outline{ background:#fff; border-color:var(--input-border) }
.btn.ghost{ background:transparent; border-color:transparent }
.btn.primary{ background:var(--surface-3); border-color:var(--input-border) }
.btn.accent{
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, white), var(--accent));
  border-color: color-mix(in oklab, var(--accent) 80%, black);
  color:#063228;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 22%, transparent);
}
.btn.danger{ background:var(--danger); color:#fff; border-color:transparent }
.btn.small{ padding:6px 10px; font-weight:700 }
.btn.block{ width:100% }

/* Inputs */
.input, select, textarea{
  width:100%;
  background:var(--input-bg);
  color:var(--fg);
  border:1px solid var(--input-border);
  border-radius:12px;
  padding:10px 12px;
  transition:border-color .12s ease, box-shadow .2s ease;
}
.input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: color-mix(in oklab, var(--accent) 65%, var(--input-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px }

/* Grid */
.grid{ display:grid; gap:12px }
.g2{ grid-template-columns:1fr 1fr }
.g3{ grid-template-columns:repeat(3,1fr) }
.g4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:720px){ .g2,.g3,.g4{ grid-template-columns:1fr } }

/* KPIs */
.kpis{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px }
@media (min-width:760px){ .kpis{ grid-template-columns:repeat(5, minmax(0,1fr)) } }
.kpi{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--border);
  background: var(--kpi-grad);
}
.kpi .l{ font-size:12px; color:var(--muted); letter-spacing:.2px }
.kpi .v{ font-size:22px; font-weight:800 }
.kpi.hl{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  box-shadow: 0 8px 28px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* Tables */
table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff }
th,td{ padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; font-size:14px }
thead th{
  position:sticky; top:0; z-index:1;
  background:#fafdfb;
  box-shadow: inset 0 -1px 0 var(--border);
}
tbody tr:hover{ background: color-mix(in oklab, var(--accent) 4%, #fff) }

/* Misc */
.actions{ display:flex; gap:8px; flex-wrap:wrap }
.pill{ border:1px solid var(--border); background:#fff; padding:6px 10px; border-radius:999px; font-size:12px }
.footer-note{ font-size:12px }
dialog{
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card);
  color:var(--fg);
  width:min(95vw, 680px);
  box-shadow:var(--elev-strong);
}
dialog::backdrop{ background:rgba(0,0,0,.25) }
.stack{ display:flex; flex-direction:column; gap:10px }
.right{ display:flex; justify-content:flex-end; gap:8px }

/* Tabs */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:12px }
.tab{
  padding:8px 12px;
  border:1px solid var(--border);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:#fff;
  cursor:pointer; font-weight:700;
}
.tab.active{
  background:var(--tab-bg);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}

/* Avisos */
.warning{
  background: color-mix(in oklab, var(--accent-3) 20%, #fff);
  border:1px solid color-mix(in oklab, var(--accent-3) 45%, var(--border));
  color:#6d5605;
  padding:14px; border-radius:12px;
}

/* FAB */
.right-fab{ position:fixed; bottom:16px; right:16px; box-shadow:var(--elev-strong) }

/* Print */
@media print{
  .right-fab, .actions, #btn-tests{ display:none !important }
  body{ background:#fff; color:#000 }
  .card{ box-shadow:none; border:1px solid #ddd }
  thead th{ background:#fff !important; box-shadow:none }
}