.dark-mode {

    --bg-principal: #1E201E;
    --bg-secundario: #252725;
    --bg-terciario: #2C2E2C;
    --bg-hover: #333533;
    --bg-active: #3A3C3A;
    --bg-sidebar: #252725;
    --bg-navbar: #252725;
    --bg-dropdown: #2C2E2C;
    --bg-dropdown-header: #333533;
    --bg-card: #252725;
    --bg-input: #2C2E2C;
    --bg-modal: #252725;


    --bg-header-modal: linear-gradient(135deg, #091E3E 0%, #00A0E3 100%);
    --bg-gradient-primary: linear-gradient(135deg, #091E3E 0%, #00A0E3 100%);


    --color-texto: #E6EDF3;
    --color-texto-secundario: #8B949E;
    --color-texto-terciario: #6E7681;
    --color-texto-disabled: #484F58;
    --color-texto-hover: #33BDF2;
    --color-texto-claro: #FFFFFF;
    --color-texto-oscuro: #E6EDF3;


    --color-primario: #00A0E3;
    --color-primario-hover: #0081B8;
    --color-primario-light: rgba(0, 160, 227, 0.15);
    
    --color-exito: #3FB950;
    --color-advertencia: #D29922;
    --color-peligro: #F85149;
    --color-info: #58A6FF;


    --color-borde: #30363D;
    --color-borde-claro: #21262D;
    --color-borde-oscuro: #484F58;
    --color-borde-hover: #00A0E3;
    --color-borde-focus: #00A0E3;


    --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --sombra-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --sombra-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
    --sombra-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
    --sombra-2xl: 0 25px 50px rgba(0, 0, 0, 0.8);


    --sombra-primary: 0 4px 14px rgba(0, 160, 227, 0.3);
    --sombra-success: 0 4px 14px rgba(63, 185, 80, 0.3);
    --sombra-danger: 0 4px 14px rgba(248, 81, 73, 0.3);
}


.dark-mode .btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

.dark-mode .btn-primary:hover {
    background-color: var(--color-primario-hover);
    border-color: var(--color-primario-hover);
    box-shadow: var(--sombra-primary);
}

.dark-mode .btn-success {
    background-color: var(--color-exito);
    filter: brightness(0.95);
}

.dark-mode .btn-success:hover {
    filter: brightness(1.1);
}

.dark-mode .btn-warning {
    background-color: var(--color-advertencia);
    filter: brightness(0.95);
}

.dark-mode .btn-warning:hover {
    filter: brightness(1.1);
}

.dark-mode .btn-danger {
    background-color: var(--color-peligro);
    filter: brightness(0.95);
}

.dark-mode .btn-danger:hover {
    filter: brightness(1.1);
}

.dark-mode .btn-info {
    background-color: var(--color-info);
    filter: brightness(0.95);
}

.dark-mode .btn-info:hover {
    filter: brightness(1.1);
}


.dark-mode body::-webkit-scrollbar-track {
    background: var(--bg-terciario);
}

.dark-mode body::-webkit-scrollbar-thumb {
    background: var(--color-borde-oscuro);
}

.dark-mode body::-webkit-scrollbar-thumb:hover {
    background: var(--color-texto-secundario);
}


.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode .form-control,
.dark-mode .formModal,
.dark-mode .form-select {
    background-color: var(--bg-input);
    color: var(--color-texto);
    border-color: var(--color-borde);
    caret-color: var(--color-primario);
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
.dark-mode .form-control:focus,
.dark-mode .formModal:focus,
.dark-mode .form-select:focus {
    background-color: var(--bg-hover);
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-light);
    caret-color: var(--color-primario-hover);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--color-texto-terciario);
}


.dark-mode .card{
    background-color: var(--bg-card);
    border-color: var(--color-borde);
}

.dark-mode .card:hover {
    border-color: var(--color-borde-oscuro);
}


.dark-mode table {
    color: var(--color-texto);
}

.dark-mode thead {
    background-color: var(--bg-terciario);
    color: var(--color-texto);
}

.dark-mode tbody tr {
    border-color: var(--color-borde);
}

.dark-mode tbody tr:hover {
    background-color: var(--bg-hover);
}


.dark-mode .modal-content,
.dark-mode .modalContent {
    background-color: var(--bg-modal);
    border-color: var(--color-borde);
}

.dark-mode .modal-header {
    background: var(--bg-header-modal);
    border-color: var(--color-borde);
}

.dark-mode .modal-footer,
.dark-mode .modalFooter {
    background-color: var(--bg-terciario);
    border-color: var(--color-borde);
}


.dark-mode .alert-success {
    background-color: rgba(63, 185, 80, 0.15);
    border-color: var(--color-exito);
    color: #3FB950;
}

.dark-mode .alert-warning {
    background-color: rgba(210, 153, 34, 0.15);
    border-color: var(--color-advertencia);
    color: #D29922;
}

.dark-mode .alert-danger {
    background-color: rgba(248, 81, 73, 0.15);
    border-color: var(--color-peligro);
    color: #F85149;
}

.dark-mode .alert-info {
    background-color: rgba(88, 166, 255, 0.15);
    border-color: var(--color-info);
    color: #58A6FF;
}


.dark-mode .badge {
    filter: brightness(1.1);
}


.dark-mode .dropdown-menu {
    background-color: var(--bg-dropdown);
    border-color: var(--color-borde);
}

.dark-mode .dropdown-item {
    color: var(--color-texto);
}

.dark-mode .dropdown-item:hover {
    background-color: var(--bg-hover);
    color: var(--color-primario);
}

.dark-mode .dropdown-divider {
    border-color: var(--color-borde);
}




.btn-info {
    background-color: #0DCAF0;
    border-color: #0DCAF0;
    color: #000;
}

.btn-info:hover {
    background-color: #31D2F2;
    border-color: #31D2F2;
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 202, 240, 0.3);
}

.btn-info:active {
    background-color: #0AA9C7;
    border-color: #0AA9C7;
}


.btn-warning {
    background-color: #FFC107;
    border-color: #FFC107;
    color: #000;
}

.btn-warning:hover {
    background-color: #FFCA2C;
    border-color: #FFCA2C;
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.btn-warning:active {
    background-color: #E0A800;
    border-color: #E0A800;
}


.btn-danger {
    background-color: #DC3545;
    border-color: #DC3545;
    color: #fff;
}

.btn-danger:hover {
    background-color: #E4525F;
    border-color: #E4525F;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.btn-danger:active {
    background-color: #BB2D3B;
    border-color: #BB2D3B;
}


.btn-success {
    background-color: #28A745;
    border-color: #28A745;
    color: #fff;
}

.btn-success:hover {
    background-color: #48B461;
    border-color: #48B461;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-success:active {
    background-color: #218838;
    border-color: #218838;
}


.btn-primary {
    background-color: #00A0E3;
    border-color: #00A0E3;
    color: #fff;
}

.btn-primary:hover {
    background-color: #0081B8;
    border-color: #0081B8;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 160, 227, 0.3);
}

.btn-primary:active {
    background-color: #006A96;
    border-color: #006A96;
}


.btn-secondary {
    background-color: #6C757D;
    border-color: #6C757D;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #828A91;
    border-color: #828A91;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.btn-secondary:active {
    background-color: #5C636A;
    border-color: #5C636A;
}


.btn,
.btn-info,
.btn-warning,
.btn-danger,
.btn-success,
.btn-primary,
.btn-secondary {
    transition: all 0.2s ease-in-out;
}




.badge.bg-primary {
    background-color: #00A0E3 !important;
    color: #fff;
}


.badge.bg-success {
    background-color: #28A745 !important;
    color: #fff;
}


.badge.bg-danger {
    background-color: #DC3545 !important;
    color: #fff;
}


.badge.bg-warning {
    background-color: #FFC107 !important;
    color: #000;
}


.badge.bg-info {
    background-color: #0DCAF0 !important;
    color: #000;
}


.badge.bg-secondary {
    background-color: #6C757D !important;
    color: #fff;
}


.badge.bg-dark {
    background-color: #212529 !important;
    color: #fff;
}


.badge {
    padding: 0.35em 0.65em;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 0.375rem;
    display: inline-block;
    line-height: 1;
}