/* =========================================================
   Paleta Biosnack / Finanzas
========================================================= */
:root {
  --green-light: #a4ff33;
  --green-strong: #00a53a;
  --green-dark: #00581f;
  --cream: #f7fbea;
}

/* Fondo general suave (no obliga, pero queda pro) */
body {
  background: var(--cream);
}

/* =========================================================
   Componentes existentes: icon-circle / mini-stat / card
========================================================= */

/* Tus iconos: ahora con paleta */
.icon-circle{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--green-dark);
  color: #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

/* Variante opcional si quieres un icono “light” */
.icon-circle.is-light{
  background: rgba(164,255,51,.25);
  color: var(--green-dark);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: none;
}

.mini-stat{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

/* Mini stat con acento verde (para totales) */
.mini-stat.is-accent{
  border-left: 6px solid var(--green-strong);
}

/* Mantén tu card global */
.card{
  border-radius: 18px;
}

/* =========================================================
   Botones (sin romper Bootstrap)
========================================================= */
.btn-green{
  background: var(--green-strong);
  color: #fff;
  border: 0;
}
.btn-green:hover{
  background: var(--green-dark);
  color: #fff;
}

.btn-outline-green{
  border: 1px solid var(--green-strong);
  color: var(--green-strong);
  background: transparent;
}
.btn-outline-green:hover{
  background: var(--green-strong);
  color: #fff;
}

/* =========================================================
   Encabezados y textos
========================================================= */
.finance-title{
  color: var(--green-dark);
  font-weight: 800;
}
.finance-subtitle{
  color: rgba(0,88,31,.75);
}

/* =========================================================
   Tablas (finance)
========================================================= */
.table thead.table-light{
  background: rgba(0,88,31,.08);
}

/* resalta diferencias: ya usas table-warning, lo hacemos “verde suave” */
.table-warning{
  background: rgba(164,255,51,.25) !important;
}

/* Base layout */
.app-shell{
  background: var(--cream);
  min-height: 100vh;
}

/* .app-main{

}
 */
/* =========================
   NAVBAR BIOSNACK
========================= */

.navbar-biosnack{
  background: linear-gradient(
    90deg,
    var(--green-dark),
    var(--green-strong)
  );
  border-bottom: 1px solid rgba(0,0,0,.15);
}

.text-green-light{
  color: var(--green-light);
}

.nav-link-bio{
  color: #fff !important;
  font-weight: 500;
}

.nav-link-bio:hover,
.nav-link-bio:focus{
  color: var(--green-light) !important;
}

.dropdown-menu-bio{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
}

.dropdown-menu-bio .dropdown-item{
  font-weight: 500;
}

.dropdown-menu-bio .dropdown-item:hover{
  background: var(--cream);
}

.btn-bio{
  background: var(--green-light);
  color: #111;
  font-weight: 600;
  border-radius: 14px;
}

.btn-bio:hover{
  background: #b7ff55;
  color: #000;
}