/* ==========================================================================
   NUBAM WEB - TEMA "CAMPO & RANCHO" (Verde Orgánico, Tierra y Madera)
   ========================================================================== */

/* 1. Variables de Color del Campo */
:root {
  --nubam-verde-bosque: #1E3A1E;
  --nubam-verde-campo: #2D5A27;
  --nubam-verde-hoja: #3A7233;
  --nubam-verde-olivo: #556B2F;
  --nubam-tierra-cuero: #8B5A2B;
  --nubam-tierra-madera: #5C3A21;
  --nubam-oro-paja: #D4A373;
  --nubam-crema-fondo: #F8F5EE;
  --nubam-crema-tarjeta: #FCFBF7;
  --nubam-texto-oscuro: #2A2823;
  --nubam-borde-tierra: #E2D7C5;
}

/* 2. Estilos Globales */
body {
  background-color: var(--nubam-crema-fondo) !important;
  color: var(--nubam-texto-oscuro) !important;
  font-family: 'Open Sans', 'Roboto', sans-serif;
}

/* 3. Encabezados y Barra de Navegación */
.navbar, header.navbar, .bg-white.navbar {
  background: linear-gradient(135deg, var(--nubam-verde-bosque) 0%, var(--nubam-verde-campo) 100%) !important;
  border-bottom: 3px solid var(--nubam-tierra-cuero) !important;
  box-shadow: 0 4px 15px rgba(30, 58, 30, 0.25) !important;
}

.navbar .nav-link, .navbar-brand, .navbar .nav-link i {
  color: #FFFFFF !important;
  font-weight: 600;
}

.navbar .nav-link:hover {
  color: var(--nubam-oro-paja) !important;
}

/* 4. Hero Banners y Máscaras */
.page-header {
  border-bottom: 4px solid var(--nubam-tierra-cuero);
}

.mask.bg-gradient-dark {
  background: linear-gradient(135deg, rgba(30, 58, 30, 0.88) 0%, rgba(45, 90, 39, 0.80) 100%) !important;
}

/* 5. Tarjetas estilo Madera/Establo */
.card, .card.blur {
  background-color: var(--nubam-crema-tarjeta) !important;
  border: 1px solid var(--nubam-borde-tierra) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(92, 58, 33, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  border-color: var(--nubam-tierra-cuero) !important;
  transform: translateY(-3px);
}

/* 6. Botones Orgánicos */
.btn-success, .bg-gradient-success {
  background: linear-gradient(135deg, var(--nubam-verde-campo) 0%, var(--nubam-verde-hoja) 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(45, 90, 39, 0.3) !important;
}

.btn-success:hover, .bg-gradient-success:hover {
  background: linear-gradient(135deg, var(--nubam-verde-bosque) 0%, var(--nubam-verde-campo) 100%) !important;
  color: #FFFFFF !important;
}

.btn-info, .bg-gradient-info {
  background: linear-gradient(135deg, var(--nubam-tierra-cuero) 0%, #A06A3B 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(139, 90, 43, 0.3) !important;
}

/* 7. Contenedor de Marcadores de Posición de Imagen (Placeholders) */
.image-placeholder-box {
  background-color: #EFE8DC;
  border: 2px dashed var(--nubam-tierra-cuero);
  border-radius: 10px;
  padding: 35px 20px;
  text-align: center;
  color: var(--nubam-tierra-madera);
  font-weight: 600;
  transition: all 0.3s ease;
}

.image-placeholder-box:hover {
  background-color: #E5DCCB;
  border-color: var(--nubam-verde-campo);
}

/* 8. Controles de Formularios */
.form-control, .form-select {
  border: 1px solid var(--nubam-borde-tierra) !important;
  background-color: #FFFFFF !important;
  color: var(--nubam-texto-oscuro) !important;
  border-radius: 8px !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--nubam-verde-campo) !important;
  box-shadow: 0 0 0 0.2rem rgba(45, 90, 39, 0.25) !important;
}

/* 9. ANULACIÓN DE FLECHA DEFECTUOSA DE PLANTILLA */
.dropdown .dropdown-toggle:after,
.dropdown .dropdown-toggle::after,
.dropdown .dropdown-toggle:before,
.dropdown .dropdown-toggle::before,
.dropdown-toggle:after,
.dropdown-toggle::after,
.dropdown-toggle:before,
.dropdown-toggle::before,
a[data-bs-toggle="dropdown"]::after,
a[data-bs-toggle="dropdown"]::before {
  display: none !important;
  content: "" !important;
}

/* 10. ESPACIADO UNIFORME EN EL MENÚ DESPLEGABLE DE PRODUCTOS */
.dropdown-menu .dropdown-item {
  padding: 0.5rem 1.25rem !important;
  margin: 0 !important;
}
/* 11. ESPACIADO SIMÉTRICO Y UNIFORME EN TODA LA BARRA DE NAVEGACIÓN */
.navbar-nav .nav-item {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.navbar-nav .nav-link {
  margin: 0 !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* AJUSTE DEL LOGO NUBAM EN EL ENCABEZADO */
.navbar-logo {
  max-height: 60px !important;
  width: auto !important;
  transition: transform 0.2s ease;
}

.navbar-brand:hover .navbar-logo {
  transform: scale(1.03);
}