:root{
  /* Paleta base */
  --ink:#10261a;
  --muted:#5a6b5a;
  --bg:#f6faf4;
  --card:#ffffff;
  --border:#e3eddc;

  /* Marca/gradientes: alineados a las cotizaciones */
  --brand:#6aa215;              /* verde oscuro */
  --brand-2:#c8ff7d;            /* verde limón */
  --brand-ink:#0f3d1e;
  --brand-grad: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);

  /* UI */
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ===== Topbar (header) =================================================== */
.site-topbar{
  position:sticky; top:0; z-index:1000;
  background:var(--brand-grad);
  color:#0a1d0f;
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.site-topbar .inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
}
.site-brand{
  display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px;
  color:#0b2b12; text-decoration:none;
}
.site-brand img{ height:36px; width:auto; display:block; }
.site-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:9px 14px; border-radius:999px; border:1px solid transparent;
  font-weight:800; text-decoration:none; cursor:pointer; transition:transform .06s ease, filter .15s ease;
  background:#fff; color:#0a3b18; box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.btn:hover{ transform:translateY(-1px); filter:saturate(1.05); }
.btn.ghost{
  background:rgba(255,255,255,.15); color:#0a1d0f; border:1px solid rgba(0,0,0,.08); backdrop-filter: blur(6px);
}
.btn.dark{ background:#0f2613; color:#fff; border-color:rgba(255,255,255,.25); }

/* ===== Footer ============================================================ */
.site-footer{
  margin-top:36px;
  background:var(--brand-grad);
  color:#0b2b12; border-top:1px solid rgba(0,0,0,.06);
}
.site-footer .inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; gap:10px; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; letter-spacing:.25px;
}

/* ===== Tarjetas/tablas (compatibles con vistas existentes) =============== */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.tbl thead th{ background:#f8faf0; font-weight:800; padding:10px; border-bottom:1px solid var(--border); }
.tbl td{ padding:10px; border-bottom:1px solid var(--border); }
.tbl tr:last-child td{ border-bottom:none; }

/* Badges */
.badge{ display:inline-block; padding:3px 8px; border-radius:999px; font-weight:900; }
.badge.success{ background:rgba(200,255,125,.45); color:#0f3d1e; box-shadow: inset 0 0 0 1px rgba(15,61,30,.15); }

/* Inputs/select */
input,select,textarea{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px;
}

/* Links */
a{ color:#0b471e; }
a:hover{ color:#072e12; }

/* Utilidades */
.right{text-align:right}
.center{text-align:center}
.container{ max-width:1200px; margin:24px auto; padding:0 16px; }