/* Colores personalizados */
:root {
    --primary-color: #39A5EA !important; /* Color primario */
    --secondary-color: #FF4D7E !important; /* Color secundario */
    --success-color: #4CAF50 !important; /* Éxito */
    --warning-color: #FF9800 !important; /* Advertencia */
    --danger-color: #F44336 !important; /* Error */
}

/* Colores de botones */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    color: #fff !important;
    background-color: #39A5EA;
    border-color: #39A5EA;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #ffffff !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: darken(var(--secondary-color), 10%) !important;
    border-color: darken(var(--secondary-color), 10%) !important;
}

/* Botones de estado */
.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: #ffffff !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: darken(var(--success-color), 10%) !important;
}

.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: #ffffff !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: darken(var(--warning-color), 10%) !important;
}

.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: #ffffff !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: darken(var(--danger-color), 10%) !important;
}

.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(72.47deg, #5299e8 22.16%, rgb(162 135 203) 76.47%);
    box-shadow: 0px 2px 6px 0px rgba(28, 89, 0, 0.48);
    color: #fff !important;
  }

  html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.active .menu-link:hover, .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.active .menu-link:hover {
    background: linear-gradient(72.47deg, #5C8BBE 22.16%, rgba(107, 92, 135, 0.7) 76.47%);
}