@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Paleta: huerto real — hoja, tomate, girasol, papel de semillero */
  --verde-oscuro: #22301c;
  --verde: #3e5c3a;
  --verde-suave: #7c9473;
  --tomate: #b8420f;
  --tomate-oscuro: #93350c;
  --girasol: #c08c1f;
  --papel: #f1f0e3;
  --papel-alto: #ffffff;
  --tinta: #262a20;
  --tinta-suave: #63614f;
  --borde: #ddd8c4;

  --radio: 0.7rem;
  --sombra: 0 1px 2px rgba(34, 30, 20, .05), 0 10px 24px -16px rgba(34, 30, 20, .28);
}

@media (prefers-reduced-motion: no-preference) {
  a, .btn, .card, .navbar-brand, input, select { transition: all .15s ease; }
}

* { -webkit-font-smoothing: antialiased; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .95rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--verde-oscuro);
  font-weight: 600;
  letter-spacing: -.01em;
}

a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-oscuro); }

:focus-visible {
  outline: 2px solid var(--girasol);
  outline-offset: 2px;
}

/* --- Navegación --- */
.navbar {
  background: var(--verde-oscuro) !important;
  border-bottom: 3px solid var(--girasol);
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.navbar-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -.01em;
}
.navbar .nav-link {
  color: rgba(255,255,255,.78) !important;
  font-weight: 500;
  font-size: .92rem;
  padding: .4rem .75rem !important;
  border-radius: .4rem;
}
.navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08);
}
.navbar-text { color: rgba(255,255,255,.65) !important; font-size: .88rem; }

/* --- Tarjetas --- */
.card {
  background: var(--papel-alto);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.card h5 {
  font-size: 1.05rem;
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--borde);
}

/* --- El número protagonista: ingresos, como una etiqueta de puesto de venta --- */
.card.text-center {
  position: relative;
  border-top: none;
}
.card.text-center::before {
  content: "";
  position: absolute;
  top: 0; left: 1.25rem; right: 1.25rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--girasol) 0 8px, transparent 8px 14px);
}
.eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--girasol);
  margin-bottom: .15rem;
}
.stat {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tomate);
}

/* --- Botones --- */
.btn { border-radius: .5rem; font-weight: 600; font-size: .9rem; padding: .5rem 1rem; }
.btn-primary {
  background: var(--verde); border-color: var(--verde);
  box-shadow: 0 1px 2px rgba(34,48,29,.15);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--verde-oscuro); border-color: var(--verde-oscuro);
}
.btn-outline-secondary {
  color: var(--tinta-suave); border-color: var(--borde);
}
.btn-outline-secondary:hover {
  background: var(--papel); border-color: var(--verde-suave); color: var(--verde-oscuro);
}
.btn-outline-light { border-color: rgba(255,255,255,.5); font-weight: 500; }

/* --- Formularios --- */
.form-label { font-size: .82rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: .3rem; }
.form-control, .form-select {
  border: 1px solid var(--borde);
  border-radius: .5rem;
  font-size: .92rem;
  padding: .5rem .7rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--verde-suave);
  box-shadow: 0 0 0 .2rem rgba(62, 92, 58, .13);
}

/* --- Tablas: cuaderno de cuentas --- */
.table thead {
  background: var(--verde-oscuro);
  color: #fff;
}
.table thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border: none;
  padding: .65rem .75rem;
}
.table td { padding: .65rem .75rem; vertical-align: middle; border-color: var(--borde); }
.table td.text-end { font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: rgba(62, 92, 58, .05); }

/* --- Alertas --- */
.alert-success { background: #eef3ea; border-color: var(--verde-suave); color: var(--verde-oscuro); }
.alert-danger { background: #fbeae3; border-color: var(--tomate); color: var(--tomate-oscuro); }

/* --- Login --- */
.login-box {
  max-width: 380px;
  margin: 6rem auto;
  padding: 2.25rem 2rem !important;
}
.login-box h3 {
  font-style: italic;
  text-align: center;
  margin-bottom: 1.75rem;
}

/* --- Estados vacíos --- */
.text-muted { color: var(--tinta-suave) !important; }