:root {
    --sidebar-width: 249px;
    --bs-primary: #014A56;
    --bs-primary-rgb: 0, 77, 87;
    --bs-btn-bg: #004d57;
    --bs-border-color: #B7BFC7;
    --color-black: #212529;
    --color-gray: #757575;
    --color-gray-drark: #B7BFC7;
    --color-secundary: #28D1DA;

    /* New Color Variables */
    --color-table-header-bg: #e6f2f2;
    --color-table-border-bottom: #212529;
    --color-card-bg: #fff;
    --color-card-shadow: rgba(0, 0, 0, 0.02);
    --color-avatar-bg: #f1f5f9;
    --color-badge-active-bg: #27D1DB33;

    /* Spacing & Dimensions */
    --border-radius-lg: 16px;
    --border-radius-md: 8px;
    --border-radius-circle: 50%;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --bs-success: #C0E7D0;
    --bs-success-border: #14A44D;

    --bs-danger: #F4C8CF;
    --bs-danger-border: #DC4C64;

    --bs-warning: #F59E0B;
    --bs-warning-border: #F9E4BE;


}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #003a42;
    --bs-btn-hover-border-color: #003a42;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: #003a42;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-primary);
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.form-control {
    &:focus {
        box-shadow: 0 0 0 .25rem rgba(0, 77, 87, .25);
        border-color: var(--bs-primary);
    }
}

.form-select {
    &:focus {
        box-shadow: 0 0 0 .25rem rgba(0, 77, 87, .25);
        border-color: var(--bs-primary);
    }
}

input::placeholder,
textarea::placeholder {
    color: var(--color-gray) !important;
    opacity: 0.7;
}


input::-webkit-input-placeholder {
    color: var(--color-gray);
}

input::-moz-placeholder {
    color: var(--color-gray);
}

input:-ms-input-placeholder {
    color: var(--color-gray);
}

#loading-overlay {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    color: white;
    text-align: center;
    padding-top: 20%;
}

.spinner {
    font-size: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.flatpickr-day {
    border-radius: 0 !important;
}