html, body {
  margin: 0;
  /* font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

input[type="password"] {
  appearance: none !important; /* Elimina el ícono en navegadores compatibles */
  -webkit-appearance: none !important; /* Compatibilidad con Webkit (Chrome, Safari) */
  -moz-appearance: none !important; /* Compatibilidad con Firefox */
}

/* Estilos mejorados para títulos principales */
.content-header h1 {
  color: #831f46; /* Color principal */
  font-weight: 800; /* Extra negrita */
  text-transform: uppercase; /* Convertir texto a mayúsculas */
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15); /* Sombra más definida */
}

/* Efecto opcional de degradado en el texto */
.content-header h1{
  background: linear-gradient(90deg, #831f46, #c989a2); /* Degradado en el texto */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content-header {
  animation: fadeInUp 0.6s ease-in-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilos adicionales para el breadcrumb (opcional) */
.content-header .breadcrumb {
  background-color: transparent; /* Fondo transparente */
  padding: 0; /* Eliminar padding predeterminado */
  margin-bottom: 0; /* Eliminar margen inferior */
}

.breadcrumb-item a {
  color: #6c757d; /* Color gris para los enlaces del breadcrumb */
  text-decoration: none; /* Eliminar subrayado */
  transition: color 0.3s ease; /* Transición suave al cambiar de color */
}

.breadcrumb-item a:hover {
  color: #831f46; /* Cambiar color al pasar el mouse */
}

.breadcrumb-item.active {
  color: #831f46; /* Color para el ítem activo del breadcrumb */
  font-weight: 500; /* Texto seminegrita */
}

:root {
  --primary: #831f46 !important;
  --primary-hover: #6b1537 !important; /* Un tono más oscuro del color primario */
  --secondary: #68696f !important;
  --secondary-hover: #333436 !important; /* Un tono más claro del color secundario */
  --info: #a4b3bf !important;
  --info-hover: #7c8f9a !important;
  --warning: #f0ad4e !important;
  --warning-hover: #d48e1b !important;
  --danger: #d9534f !important;
  --danger-hover: #c13d38 !important;
  --success: #5cb85c !important;
  --success-hover: #449d48 !important;
}

.bg-primary {
  background-color: #721c24 !important;
}

.alert-primary{
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.alert-info{
  background-color: var(--info) !important;
  border-color: var(--info) !important;
  color: black;
}

/* Para los botones .btn-primary y .btn-outline-primary */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-outline-primary {
  background-color: transparent !important; /* Sin fondo */
  border-color: var(
    --primary
  ) !important; /* Solo el borde usa el color primario */
  color: var(
    --primary
  ) !important; /* El color del texto usa el color primario */
}

/* Hover y focus */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(
    --primary-hover
  ) !important; /* Fondo con el color hover al hacer hover */
  border-color: var(--primary-hover) !important;
  color: #fff !important; /* Cambia a blanco cuando está activo o en hover */
}

/* Botones deshabilitados */
.btn-primary:disabled,
.btn-outline-primary:disabled {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important; /* Mantiene el texto blanco en los botones deshabilitados */
  opacity: 0.65 !important; /* Ajusta la opacidad para mostrar que están deshabilitados */
}

/* ACTIVE STATES FOR BUTTONS AND TABS */
.btn-primary.active,
.btn-primary:active,
.nav-link.active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.nav-link:hover {
  color: var(--primary-hover) !important;
  background-color: transparent !important;
}

.nav-link.active {
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.nav-link.active:hover {
  color: #fff !important;
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.list-group-item.active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}

.list-group-item.active:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}

.pagination .page-item.active .page-link:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.badge-primary {
  background-color: var(--primary);
  color: #fff !important;
}

.badge-primary:hover,
.badge-primary:focus,
.badge-primary.active {
  background-color: var(--primary-hover) !important;
  color: #fff !important;
}

.progress-bar {
  background-color: var(--primary) !important;
}

.text-primary {
  color: var(--primary) !important;
}
.text-primary:hover {
  color: #6b1537 !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

h2.page-title {
  font-size: 2.5rem !important; /* Tamaño grande */
  font-weight: bold !important;
  color: var(--primary) !important; /* Usamos el color primario */
  text-align: center !important; /* Centrado en la página */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important; /* Sombra del texto */
  margin-bottom: 2rem !important; /* Separación con contenido debajo */
  letter-spacing: 1px !important; /* Espaciado entre letras */
  padding-bottom: 0.5rem !important; /* Aumentar espacio inferior */
  border-bottom: 2px solid var(--secondary) !important; /* Línea decorativa */
  display: inline-block !important;
}

/* Forzar estilos personalizados para navbar y nav-items */
.navbar {
  background-color: var(--primary) !important;
  color: #cfcece !important;
}

.navbar .navbar-nav .nav-link {
  color: #cfcece !important;
  padding: 0.75rem 1rem !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}


/* Hover para nav-items y nav-links */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item:hover {
  background-color: var(--primary-hover) !important;
  color: #ffffff !important;
  border-radius: 15px !important;
}

/* Estilos para nav-item activo */
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-link.active {
  background-color: var(--primary-hover) !important;
  color: #cfcece !important;
  border-radius: 15px !important;
}

/* Dropdown Styles */
.navbar .navbar-nav .dropdown-menu {
  background-color: var(--primary) !important;
  border-radius: 10px !important;
}

.navbar .navbar-nav .dropdown-item {
  color: #cfcece !important;
  padding: 0.75rem 1.25rem !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar .navbar-nav .dropdown-item:hover {
  background-color: var(--primary-hover) !important;
  color: #fff !important;
  border-radius: 20px !important;
}

/* Dropdown active state */
.navbar .navbar-nav .dropdown-item.active {
  background-color: var(--primary-hover) !important;
  color: #cfcece !important;
}

/* Toggler button style */
.navbar-toggler {
  border-color: var(--secondary) !important;
}

.navbar-toggler-icon {
  color: #cfcece !important;
}

.footer {
  background-color: transparent !important;
  color: #525b68 !important;
}