/* 🌿 Estilo general */
body {
  background-color: #f3f6f4;
  font-family: "Poppins", "Segoe UI", sans-serif;
  color: #2e3d34;
  padding: 20px;
}

/* 🧭 Título principal */
h1 {
  font-weight: 700;
  text-align: center;
  color: #1b5e20;
  margin-bottom: 8px;
}

p.text-muted {
  text-align: center;
  color: #6c757d;
  margin-bottom: 40px;
}

/* 🧱 Tarjetas */
.card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  background-color: #ffffff;
  padding: 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 128, 0, 0.15);
}

/* 🏷️ Etiquetas y formularios */
label {
  font-weight: 600;
  color: #2e7d32;
}

.form-control,
.form-select {
  border-radius: 10px;
  border: 1px solid #cfd8dc;
  transition: border-color 0.2s ease-in-out;
}

.form-control:focus,
.form-select:focus {
  border-color: #2e7d32;
  box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.2);
}

/* 🟢 Botones */
.btn {
  border-radius: 10px;
  font-weight: 500;
  transition: background 0.2s ease-in-out, transform 0.1s;
}

.btn:active {
  transform: scale(0.97);
}

/* Principal */
.btn-primary {
  background-color: #2e7d32;
  border: none;
  color: white;
}

.btn-primary:hover {
  background-color: #256428;
}

/* Secundario */
.btn-secondary {
  background-color: #81c784;
  border: none;
  color: #1b5e20;
}

.btn-secondary:hover {
  background-color: #66bb6a;
}

/* ⚪ Tablas */
table {
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

th {
  background-color: #2e7d32;
  color: white;
  border: none;
}

td, th {
  vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f1f8f2;
}

/* 🧩 Contenedores y layout */
.page-header {
  text-align: center;
  margin-bottom: 30px;
}

footer {
  text-align: center;
  margin-top: 50px;
  color: #4e6653;
  font-size: 0.9rem;
}

/* 💫 Botones de acción en tabla */
.btn-outline-info {
  color: #2e7d32;
  border-color: #81c784;
}

.btn-outline-info:hover {
  background-color: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}

.btn-outline-danger {
  color: #c62828;
  border-color: #ef5350;
}

.btn-outline-danger:hover {
  background-color: #c62828;
  color: #fff;
}

/* 📱 Responsivo */
@media (max-width: 768px) {
  .card {
    margin-bottom: 20px;
  }

  table {
    font-size: 0.9rem;
  }

  h1 {
    font-size: 1.6rem;
  }
}