:root {
  --color-terracotta: #945D60;
  --color-herb: #626E60;
  --color-chilli: #AF473C;
  --color-charcoal: #3C3C3C;
  --color-blanco: #fff;
}

/* Background utilities */
.bg-terracotta { background: var(--color-terracotta) !important; }
.bg-herb { background: var(--color-herb) !important; }
.bg-chilli { background: var(--color-chilli) !important; }
.bg-charcoal { background: var(--color-charcoal) !important; }

/* Text utilities */
.text-terracotta { color: var(--color-terracotta) !important; }
.text-herb { color: var(--color-herb) !important; }
.text-chilli { color: var(--color-chilli) !important; }
.text-charcoal { color: var(--color-charcoal) !important; }

/* Button styles */
.btn-terracotta {
  background: var(--color-terracotta);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}
.btn-terracotta:hover {
  background: #7a484b;
  color: var(--color-blanco);
  transform: translateY(-1px);
}

.btn-herb {
  background: var(--color-herb);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}
.btn-herb:hover {
  background: #4e574d;
  color: var(--color-blanco);
  transform: translateY(-1px);
}

.btn-chilli {
  background: var(--color-chilli);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}
.btn-chilli:hover {
  background: #8c372e;
  color: var(--color-blanco);
  transform: translateY(-1px);
}

.btn-charcoal {
  background: var(--color-charcoal);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}
.btn-charcoal:hover {
  background: #232323;
  color: var(--color-blanco);
  transform: translateY(-1px);
}

/* Border utilities */
.border-terracotta { border-color: var(--color-terracotta) !important; }
.border-herb { border-color: var(--color-herb) !important; }
.border-chilli { border-color: var(--color-chilli) !important; }
.border-charcoal { border-color: var(--color-charcoal) !important; }

/* Alert styles */
.alert-terracotta {
  background-color: rgba(148, 93, 96, 0.1);
  border: 1px solid var(--color-terracotta);
  color: var(--color-terracotta);
  border-radius: 15px;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

.alert-herb {
  background-color: rgba(98, 110, 96, 0.1);
  border: 1px solid var(--color-herb);
  color: var(--color-herb);
  border-radius: 15px;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

.alert-chilli {
  background-color: rgba(175, 71, 60, 0.1);
  border: 1px solid var(--color-chilli);
  color: var(--color-chilli);
  border-radius: 15px;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

.alert-charcoal {
  background-color: rgba(60, 60, 60, 0.1);
  border: 1px solid var(--color-charcoal);
  color: var(--color-charcoal);
  border-radius: 15px;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

/* Success alert (replacing red alerts) */
.alert-success-custom {
  background-color: rgba(98, 110, 96, 0.1);
  border: 1px solid var(--color-herb);
  color: var(--color-herb);
  border-radius: 15px;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

/* Error alert (using chilli color instead of red) */
.alert-error-custom {
  background-color: rgba(175, 71, 60, 0.1);
  border: 1px solid var(--color-chilli);
  color: var(--color-chilli);
  border-radius: 15px;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

/* Card styles */
.card-terracotta {
  background: var(--color-blanco);
  border: 2px solid var(--color-terracotta);
  border-radius: 25px;
  box-shadow: 0 4px 12px rgba(148, 93, 96, 0.1);
}

.card-herb {
  background: var(--color-blanco);
  border: 2px solid var(--color-herb);
  border-radius: 25px;
  box-shadow: 0 4px 12px rgba(98, 110, 96, 0.1);
}

/* Icon colors */
.icon-terracotta { color: var(--color-terracotta) !important; }
.icon-herb { color: var(--color-herb) !important; }
.icon-chilli { color: var(--color-chilli) !important; }
.icon-charcoal { color: var(--color-charcoal) !important; }

/* Override Bootstrap primary colors */
.text-primary { color: var(--color-terracotta) !important; }
.bg-primary { background-color: var(--color-terracotta) !important; }
.btn-primary {
  background-color: var(--color-terracotta) !important;
  border-color: var(--color-terracotta) !important;
  color: var(--color-blanco) !important;
}
.btn-primary:hover {
  background-color: #7a484b !important;
  border-color: #7a484b !important;
}

/* Override Bootstrap success colors */
.text-success { color: var(--color-herb) !important; }
.bg-success { background-color: var(--color-herb) !important; }
.btn-success {
  background-color: var(--color-herb) !important;
  border-color: var(--color-herb) !important;
  color: var(--color-blanco) !important;
}
.btn-success:hover {
  background-color: #4e574d !important;
  border-color: #4e574d !important;
}

/* Override Bootstrap danger colors */
.text-danger { color: var(--color-chilli) !important; }
.bg-danger { background-color: var(--color-chilli) !important; }
.btn-danger {
  background-color: var(--color-chilli) !important;
  border-color: var(--color-chilli) !important;
  color: var(--color-blanco) !important;
}
.btn-danger:hover {
  background-color: #8c372e !important;
  border-color: #8c372e !important;
}

/* Logo Verde Mercado - Estilos para escritorio */
.navbar-brand {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.navbar-brand span:first-child {
  color: #28a745 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(40, 167, 69, 0.2) !important;
}

.navbar-brand span:last-child {
  color: #212529 !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 1px rgba(33, 37, 41, 0.1) !important;
}

.navbar-brand:hover {
  transform: scale(1.02) !important;
  text-decoration: none !important;
}

.navbar-brand:hover span:first-child {
  color: #218838 !important;
  text-shadow: 0 2px 4px rgba(40, 167, 69, 0.3) !important;
}

.navbar-brand:hover span:last-child {
  color: #495057 !important;
  text-shadow: 0 1px 2px rgba(33, 37, 41, 0.15) !important;
}

/* Responsive adjustments for logo */
@media (min-width: 768px) {
  .navbar-brand {
    font-size: 1.75rem !important;
  }
}

@media (min-width: 992px) {
  .navbar-brand {
    font-size: 2rem !important;
  }
}