/** ----------------------------------------------------------------------------------------------- ESTILOS PARA LA BARRA DE DESPLAZAMIENTO ------------------------------------------------------------------------------------------*/
::-webkit-scrollbar {
    width: 0.43em; /* Ancho de la barra de desplazamiento */
    height: 0.45em;
}
.dark-mode::-webkit-scrollbar, .dark-mode::-webkit-scrollbar-track {
    background-color: #1f1e1f;
}
.light-mode::-webkit-scrollbar, .light-mode::-webkit-scrollbar-track {
    background-color: rgb(241, 244, 246);
}
/* Estilos para el thumb de la barra de desplazamiento */
::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 3px solid;
}
::-webkit-scrollbar-thumb {
    background-color: #ababab40;
    border: #ababab40;
}
.dark-mode::-webkit-scrollbar-thumb {
    background-color: rgb(24 24 24);
    border: rgb(24 24 24);
}
select::-webkit-scrollbar-thumb, .select2-results__options::-webkit-scrollbar-thumb {
    background-color: #00000014;
    border: #00000014;
}
.dark-mode select::-webkit-scrollbar-thumb, .dark-mode .select2-results__options::-webkit-scrollbar-thumb {
    background-color: #ffffff0f;
    border: #ffffff0f;
}
body {
    transition: background-color 0.5s ease;
}
/* * {
    transition: none !important;
} */
 /* Contenedor de pestañas */
.card-header .tab-container {
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
}
/* Pestañas normales */
.card-header .tab-container .tabs {
    display: flex;
    gap: .3rem;
}
.card-header .tab-container .tabs .tab {
    padding-block: .375rem;
    padding-inline: .75rem;
    text-align: center;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .375rem;  /* Borde redondeado para cada pestaña individual */
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: 500;
    color: #818181;
    font-size: .875rem;
    position: relative; /* Necesario para el pseudoelemento */
    user-select:none;
    white-space: nowrap; /* Mantiene el texto en una línea */
}
.card-header .tab-container .tabs .tab:hover {
    background-color: rgba(55,23,23,.03);
    color: #1e1f21;
}
.dark-mode .card-header .tab-container .tabs .tab:hover {
    background-color: rgba(255,255,255,.06);
    color:#f5f4f3;
}
.card-header .tab-container .tabs .tab:active {
    background: rgba(55,23,23,.05);
    border-color:#afabac;
}
/* Pestaña activa */
.card-header .tab-container .tabs .tab.active {
    color: #1e1f21;
}
.dark-mode .card-header .tab-container .tabs .tab.active{
    color:#f5f4f3;
}
/* Línea inferior en la pestaña activa que no afecta el borde redondeado */
.card-header .tab-container .tabs .tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centra la línea */
    bottom: -22%; /* Ubica la línea justo debajo del borde redondeado */
    width: calc(100% - 25px); /* Ajusta el ancho para que coincida con el texto */
    height: 2px;
    background-color: #6d6e6f; /* Color de la línea inferior */
}
.dark-mode .card-header .tab-container .tabs .tab.active::after {}
/* Estilo del botón de elipsis */
.card-header .tab-container .menu-button {
    background: #d3d3d373; /* Fondo semitransparente */
    color: #a5a5a5;        /* Color del texto */
    font-size: 1rem;
    cursor: pointer;
    width: 1.5rem;            /* Ancho y alto iguales para hacerlo circular */
    height: 1.5rem;
    border-radius: 1rem;     /* Hace el botón redondo */
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border:none;
}
.dark-mode .card-header .tab-container .menu-button {
    background: #34343473; /* Fondo semitransparente */
    color: #606060;        /* Color del texto */
}
/* Estilo de hover para el botón */
.card-header .tab-container .menu-button:hover {
    background: #afafaf60; /* Cambia la transparencia en hover */
}
.dark-mode .card-header .tab-container .menu-button:hover {
    background: #afafaf0d; /* Cambia la transparencia en hover */
}
/* Menú desplegable de vistas */
.card-header .tab-container .view-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 6.4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
.dark-mode .card-header .tab-container .view-menu {
    background-color: #161616;
    border-color:#3f3f3f;
}
/* Botones dentro del menú */
.card-header .tab-container .view-menu button {
    display: block;
    padding: 8px 12px;
    width: 100%;
    text-align: left;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color:#111111;
}
/* Botones dentro del menú */
.card-header .tab-container .view-menu button:first-child {
    border-top-left-radius: 5.4px;
    border-top-right-radius: 5.4px;
}
.card-header .tab-container .view-menu button:last-child {
    border-bottom-left-radius: 5.4px;
    border-bottom-right-radius: 5.4px;
}
.dark-mode .card-header .tab-container .view-menu button {
    color:#c9c9c9;
}
.card-header .tab-container .view-menu button:hover {
    background-color: rgba(55,23,23,.03);
}
.dark-mode .card-header .tab-container .view-menu button:hover {
    background-color: #2d2d2d;
}

/* Responsividad */
@media (max-width: 768px) {
    .card-header .tab-container .tabs {
        display: none; /* Oculta las pestañas en pantallas pequeñas */
    }

    .card-header .tab-container .menu-button {
        display: flex; /* Muestra el botón de elipsis en pantallas pequeñas */
    }
}
.custom-row {
    display: flex;
    gap: calc(1.5rem - 15px); /* Espacio horizontal entre columnas */
}
/** -------------------------------------------------------------- */
.form-control {
    transition: none;
}
.dark-mode .wrapper{
    background-color: #131313;
}
.sidebar-mini .nav-sidebar .nav-header:before {
    content:'';
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:#4c8cb9;
    text-indent:1px;
    display:none;
}
@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-header:before {
        display: block;
    }
}
.sidebar-collapse .wrapper .sidebar-focused:not(:hover) li,
.sidebar-collapse .wrapper .sidebar .menu-open {
    max-width: 2.1rem;
}
.modal-dialog .body-modal{
    margin:16px 32px;
}
.modal-dialog.modal-sm .body-modal{
    margin:24px;
}
.modal-dialog.modal-sm .modal-header, .modal-dialog.modal-sm .modal-footer{
    padding:0 24px;
}
.card .card-footer .container .mx-auto, .card .card-header .container .mx-auto{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    height: 64px;
    padding: 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
.card .card-footer .container .mx-auto{
    border-top-color: #e9ecef;
    justify-content: flex-end;
}
.card .card-header .container .mx-auto{
    justify-content: center;
    border-bottom-color: #e9ecef;
}
.dark-mode .card .card-footer .container .mx-auto{
    border-top-color: #242424;
}
.dark-mode .card .card-header .container .mx-auto{
    border-bottom-color: #242424;
}
.card-footer .container .mx-auto>:not(:first-child) {
    margin: 0 0 0 13px;
}
.card .card-header .container .mx-auto, .card .card-body .container .mx-auto, .card .card-footer .container .mx-auto{
    padding:0;
}
/** ------------------------------------------------------------------------------------------------ ESTILOS DE LOS LINKS EN LA PAGINA ---------------------------------------------------------------------------------------------- */
a, .link-icon {
    color: #0096ff;
}
a:hover, .link-icon:hover {
    color: #2eacff;
}
/* Nombre del usuario */
/* .d-block, .dark-mode .d-block {
    color: white;
}
.d-block:hover, .dark-mode .d-block:hover {
    color: #c6c6c6 !important;
} */
.dark-mode a:not(.btn):hover {
    color: #ffffff;
}
.content-wrapper {
    background: rgb(241, 244, 246);
}

.content-wrapper .content-header {
    background: rgb(255, 255, 255, 0.45);
}
.dark-mode .content-wrapper .content-header {
    background: rgb(27 27 27 / 0.45);
}
@media (max-width: 991.98px) {
    .content-header {
        text-align: center;
    }
}
@media (max-width: 991.98px) {
    .content-header .col-auto {
        display: none;
}}
/** ---------------------------------------------------------------------------------------------- ESTILOS DE NAVBAR/HEADER EN LA PÁGINA ---------------------------------------------------------------------------------------------- */
.dark-mode .main-footer, .dark-mode .main-header {
    background-color: rgb(22 22 22);
    border-color: #252525;
}
.main-header .navbar-nav .nav-link:active, .main-header .navbar-nav .nav-link:focus, .main-header .navbar-nav .nav-link {
    color: #869099;
    font-size: 1rem;
}
.dark-mode .main-header .navbar-nav .nav-link:hover {
    color: #bac7d3;
}
.main-header .navbar-nav .nav-link:hover {
    color: #3e3f3f;
}

/* Estilo del círculo con las iniciales */
.profile-circle {
    width: 29px;
    height: 29px;
    background-color: #6ad7fba3;
    color: #1e1f21;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
}
.profile-circle::after {
    content: attr(aria-label);
    font-size: 12px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.main-header .navbar-nav .nav-item .dropdown-menu {
    padding:4px 0px;
    right: .45rem !important;
    top: 2.15rem;
}
.dark-mode .dropdown-menu, .dark-mode .MenuSeparatorStructure{
    border-color:#333;
}
.main-header .navbar-nav .nav-item #profileDropdown{
    margin-right: .5rem;
    margin-left: .5rem;
    padding-right: 0;
    padding-left: 0;
}
.dropdown-divider{
    border-bottom: 0;
    margin: 4px 0;
}
.main-header .dropdown-item.mb-2 {
    display: flex;
    align-items: center;
    gap: 2.67rem; /* Espacio entre el texto y el switch */
    margin-bottom: 0 !important; /* Espacio entre el cambio de tema y el logout */
}
.main-header .dropdown-item:active{
    background-color:#f8f9fa;
    color:#16181b;
}
.dark-mode .main-header .dropdown-item:active, .dark-mode .main-header .dropdown-item:hover, .dark-mode .main-header .dropdown-item:active {
    background-color:#43434324;
    color:#fff;
}
.main-header .nav-item.dropdown .nav-link i{
    font-size:.75rem;
    margin-left:.75rem;
}
.MenuSeparatorStructure{
    border: 1px solid #e9ecef;
    border-bottom: 0;
    margin: 4px 0;
    opacity:1;
}
/** ---------------------------------------------------------------------------------------------- ESTILOS DE SIDENAVBAR/ SECCION DE LA IZQUIERDA EN LA PÁGINA ---------------------------------------------------------------------------------------------- */
/* Ocultar scrollbar inicialmente */
.sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: #afe1ff14;
    border: #afe1ff14;
}
.dark-mode .sidebar::-webkit-scrollbar-thumb {
    background-color: #afe1ff05 !important;
    border: #afe1ff05 !important;
}
/* Mostrar scrollbar solo cuando se hace hover en .sidebar */
/* .sidebar::-webkit-scrollbar:hover {
    width: 0.43em;
    height: 0.45em;
} */
.main-sidebar {
    background-color:#ffffff;
}
.main-sidebar .sidebar {
    border-right:1px solid #e9ecef;
}
.dark-mode .main-sidebar .sidebar {
    border-color:#252525;
}
.dark-mode .main-sidebar {
    background-color: rgb(19 19 19);
}
.dark-mode .brand-link {
    background-color: rgb(22 22 22);
}
.btn-sidebar:hover, .btn-sidebar {
    background-color: #80bdff !important;
    border-color: #80bdff !important;
}
.nav-link[aria-expanded="true"], .eso {
    font-weight: bold;
}
/* Aplicar bold al primer <a> dentro de <li> con las clases específicas */
.main-sidebar .sidebar nav ul .nav-item.menu-is-opening > .nav-link,
.main-sidebar .sidebar nav ul .nav-item.menu-open > .nav-link,
.main-sidebar .sidebar nav ul .nav-item.active > .nav-link {
    font-weight: bold;
}
.main-sidebar .sidebar nav ul .nav-item.active > .nav-link i {
    opacity:.8;
}
.main-sidebar .sidebar nav ul li ul.nav.nav-treeview{
    transition: padding 300ms;
    padding: .5em 0 0 2.5rem !important;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
}
.main-sidebar .sidebar nav ul .nav-item > .nav-link[aria-expanded="true"] + ul::before {
    content:'';
    height:100%;
    opacity:1;
    width:3px;
    background:#d7ebf9;
    position: absolute;
    left:28px;
    top:0;
    border-radius:15px;
}
.dark-mode .main-sidebar .sidebar nav ul .nav-item > .nav-link[aria-expanded="true"] + ul::before{
    background:#262e33;
}
/* margin: .1rem 0; */

/* Estilo exclusivo para el primer enlace del <li> activo */
.main-sidebar .sidebar nav ul li.nav-item a.nav-link:hover, .eso .nav-link, .nav-link.eso {
    background-color: #d7ebf9 !important; /* Color específico para este enlace */
}
.dark-mode .main-sidebar .sidebar nav ul li.nav-item a.nav-link:hover, .dark-mode .eso .nav-link, .dark-mode .nav-link.eso {
    background-color: #151a1d !important; /* Color específico para este enlace */
}
.eso p, .main-sidebar .brand-link .brand-text.font-weight-light{
    color:#4c8cb9 !important;
}
.dark-mode .eso p, .dark-mode .main-sidebar .brand-link .brand-text.font-weight-light{
    color:#357090 !important;
}
.main-sidebar .sidebar nav ul li.nav-item a.nav-link:hover i, .main-sidebar .sidebar nav ul .nav-item.active:first-of-type .nav-link i, .eso i{
    opacity: .8 !important;
}
.main-sidebar .sidebar nav ul li.nav-item ul.nav-treeview a.nav-link:hover p{
    color: #4c8cb9 !important; /* Aplica color azul al hover de los elementos <a> dentro del <ul> */
}
.dark-mode .main-sidebar .sidebar nav ul li.nav-item ul.nav-treeview a.nav-link:hover p{
    color: #357090 !important; /* Aplica color azul al hover de los elementos <a> dentro del <ul> */
}
/* Color predeterminado para los iconos */
.main-sidebar .sidebar nav .nav-sidebar .nav-item .nav-link i{
    color: #343A41;
    opacity:.3;
}
.dark-mode .main-sidebar .sidebar nav .nav-sidebar .nav-item .nav-link i{
    color: #a1a7b0;
}
/* Estilo exclusivo para el primer enlace del <li> activo */
.main-sidebar .sidebar nav ul li.nav-item a.nav-link p {
    color: #343a40; /* Color específico para este enlace */
    transition: all .2s;
}
.main-sidebar .sidebar nav ul li.nav-item ul.nav-treeview a.nav-link p {
    color: #6c757d; /* Color específico para este enlace */
}
.dark-mode .main-sidebar .sidebar nav ul li.nav-item a.nav-link p {
    color: #6c757d; /* Color específico para este enlace */
}
.dark-mode .main-sidebar .sidebar nav ul li.nav-item ul.nav-treeview a.nav-link p {
    color: #444e58; /* Color específico para este enlace */
}
.dark-mode .list-group-item {
    color: white;
}
.list-group-item {
    color: black;
}
.list-group-item {
    background-color: transparent;
}
.dark-mode .list-group-item {
    border-color: rgb(44 44 44);
}
.text-light {
    color:#afe1ff !important;
}
.main-sidebar {
    font-size: 0.9rem;
    z-index: 1040;
}
/**------------------------------------------------------------------------------------------- ESTILOS MENSAJES ---------------------------------------------------------------*/
:root {
    --success-bg: oklch(0.982 0.018 155.826);
    --success-text: oklch(0.448 0.119 151.328);
    --success-icon: oklch(0.792 0.209 151.711);
    --success-hover: oklch(0.962 0.044 156.743);
    --success-focus: oklch(0.627 0.194 149.214);

    --info-bg: oklch(0.97 0.014 254.604);
    --info-text: oklch(0.488 0.243 264.376);
    --info-icon: oklch(0.707 0.165 254.624);
    --info-hover: oklch(0.95 0.03 233.38);
    --info-focus: oklch(0.51 0.12 254.25);

    --warning-bg: oklch(0.987 0.026 102.212);
    --warning-text: oklch(0.554 0.135 66.442);
    --warning-icon: oklch(0.852 0.199 91.936);
    --warning-hover: oklch(0.97 0.07 99.9);
    --warning-focus: oklch(0.9 0.18 91.91);

    --error-bg: oklch(0.971 0.013 17.38);
    --error-text: oklch(0.505 0.213 27.518);
    --error-icon: oklch(0.704 0.191 22.216);
    --error-hover: oklch(0.93 0.04 16.47);
    --error-focus: oklch(0.52 0.16 22.54);
}
/* Contenedor de los mensajes */
#messages-container {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 400px;
    z-index: 9999;
}
/* Estilos generales de los mensajes */
.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: .375rem;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: translateY(10px);
}
/* Colores basados en Tailwind */
.success {
    background-color: oklch(0.982 0.018 155.826); /* Verde claro */
    color: oklch(0.448 0.119 151.328);
}
.info {
    background-color: oklch(0.97 0.014 254.604); /* Azul claro */
    color: oklch(0.488 0.243 264.376);
    border-left: 4px solid oklch(0.707 0.165 254.624);
}
.warning {
    background-color: oklch(0.987 0.026 102.212); /* Amarillo claro */
    color: oklch(0.554 0.135 66.442);
}
.error, .danger {
    background-color: oklch(0.971 0.013 17.38); /* Rojo claro */
    color: oklch(0.505 0.213 27.518);
}
/* Botón de cerrar */
.close-btn {
    display: inline-flex;
    font-size: 18px;
    padding: .375rem;
    transition: opacity 0.3s;
    border-radius: .375rem;
    border: 0 solid;
}
.success .close-btn {
    background-color: oklch(0.982 0.018 155.826);
    color: oklch(0.723 0.219 149.579);
}
.success .close-btn:hover {
    background-color: oklch(0.962 0.044 156.743);
}
.success .close-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 2px oklch(0.627 0.194 149.214), 0 0 #0000;
}
.info .close-btn {
    background-color: oklch(0.97 0.014 254.604);
    color: oklch(0.707 0.165 254.624);
}
.info .close-btn:hover {
    background-color: oklch(0.95 0.03 233.38);
}
.info .close-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 2px oklch(0.51 0.12 254.25), 0 0 #0000;
}
.warning .close-btn {
    background-color: oklch(0.987 0.026 102.212);
    color: oklch(0.852 0.199 91.936);
}
.warning .close-btn:hover {
    background-color: oklch(0.97 0.07 99.9);
}
.warning .close-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 2px oklch(0.9 0.18 91.91), 0 0 #0000;
}
.error .close-btn, .danger .close-btn {
    background-color: oklch(0.971 0.013 17.38);
    color: oklch(0.704 0.191 22.216);
}
.error .close-btn:hover, .danger .close-btn:hover {
    background-color: oklch(0.93 0.04 16.47);
}
.error .close-btn:focus, .danger .close-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 2px oklch(0.52 0.16 22.54), 0 0 #0000;
}
/* Icono de estado */
.alert-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}
.success .alert-icon {
    color: oklch(0.792 0.209 151.711);
}
.info .alert-icon {
    color: oklch(0.707 0.165 254.624);
}
.warning .alert-icon {
    color: oklch(0.852 0.199 91.936);
}
.error .alert-icon, .danger .alert-icon {
    color: oklch(0.704 0.191 22.216);
}
/* Texto del mensaje */
.alert-text {
    font-size: .875rem;
    line-height: 1.428571;
    font-weight: 400;
}
.success .alert-text {
    font-weight: 500;
}
.success.morning {
    background-color: oklch(0.95 0.14 85); /* Amarillo claro */
    color: oklch(0.45 0.1 85); /* Amarillo oscuro */
}
.success.morning .close-btn {
    background-color: oklch(0.95 0.14 85);
    color: oklch(0.65 0.2 85);
}
.success.morning .close-btn:hover {
    background-color: oklch(0.92 0.16 85);
}
.success.morning .close-btn:focus {
    box-shadow: 0 0 0 2px oklch(0.7 0.15 85);
}
.success.morning .alert-icon {
    color: oklch(0.75 0.18 85);
}

.success.afternoon {
    background-color: oklch(0.85 0.2 50); /* Naranja */
    color: oklch(0.4 0.12 50);
}
.success.afternoon .close-btn {
    background-color: oklch(0.85 0.2 50);
    color: oklch(0.65 0.22 50);
}
.success.afternoon .close-btn:hover {
    background-color: oklch(0.82 0.25 50);
}
.success.afternoon .close-btn:focus {
    box-shadow: 0 0 0 2px oklch(0.7 0.2 50);
}
.success.afternoon .alert-icon {
    color: oklch(0.75 0.23 50);
}

.success.night {
    background-color: oklch(0.3 0.15 270); /* Índigo oscuro */
    color: oklch(0.85 0.1 270);
}
.success.night .close-btn {
    background-color: oklch(0.3 0.15 270);
    color: oklch(0.6 0.2 270);
}
.success.night .close-btn:hover {
    background-color: oklch(0.35 0.2 270);
}
.success.night .close-btn:focus {
    box-shadow: 0 0 0 2px oklch(0.5 0.2 270);
}
.success.night .alert-icon {
    color: oklch(0.6 0.22 270);
}
/* Animación de aparición */
.alert.show {
    opacity: 1;
    transform: translateY(0);
}
/* Efecto de apariciónsfsjdfshdfjkdhjklhsdkjshadfkjlshdfjkhdsfkjshdfkjshdfjkhsdfkjshfjkhsdfjkshdfjklshfkjshdfklj */
.modal-content {
    border-radius: 12px;
}
.dark-mode .modal-content {
    border-color: #181818;
}
.dark-mode .modal-content, .dark-mode .modal-header, .dark-mode .modal-body {
    color: white;
    background-color: #1e1e1f;
}
.dark-mode .modal-footer, .dark-mode .modal-header {
    border-color:#424244;
}
/**------------------------------------------------------------------------------------------- INPUTSSSSSSS ---------------------------------------------------------------*/
/* Estilos para inputs válidos en modo claro */
.wis-validated .form-control:valid,
.form-control.is-valid {
    border-color: #28a745; /* Verde */
    background-color: #d1e7dd; /* Fondo verde claro */
}
/* Estilos para inputs inválidos en modo claro */
.wis-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545 ; /* Rojo */
    background-color: #f8d7da; /* Fondo rojo claro */
}
.wis-validated .form-control:invalid, .form-control.is-invalid:hover {
    border-color: #ae2d39;
}
/* Estilos para inputs válidos en modo oscuro */
.dark-mode .wis-validated .form-control:valid,
.dark-mode .form-control.is-valid {
    border-color: #28a745; /* Verde oscuro */
    background-color: #1e5128; /* Fondo verde oscuro */
    color: #ffffff; /* Texto blanco */
}
/* Estilos para inputs inválidos en modo oscuro */
.dark-mode .wis-validated .form-control:invalid,
.dark-mode .form-control.is-invalid {
    border-color: #dc3545; /* Rojo oscuro */
    background-color: #3c0e0e; /* Fondo rojo oscuro */
    color: #ffffff; /* Texto blanco */
}
/* Estilos para hover y focus en modo claro */
.form-control:hover,
.form-select:hover {
    border-color: #636363; /* Gris oscuro */
}
/* Estilos para hover y focus en modo oscuro */
.dark-mode .form-control:hover,
.dark-mode .form-select:hover,
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    border-color: #5b5b5b; /* Gris medio */
}
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: #2c2c2e; /* Fondo oscuro */
    color: #afafaf; /* Texto gris claro */
    border-color: #3a3a3c; /* Borde gris oscuro */
}
.dark-mode input.form-control:focus,
.dark-mode select.form-control:focus,
.dark-mode textarea.form-control:focus {
    color: #e0e0e0; /* Texto gris claro cuando enfocado */
}
/* Estilos para inputs inválidos en modo oscuro */
.dark-mode .is-invalid,
.dark-mode .is-invalid:focus {
    border-color: #ff6b6b; /* Rojo más claro para errores */
}
/* Estilos para mensajes de error en modo oscuro */
.dark-mode .invalid-feedback,
.dark-mode .invalid-feedback:hover {
    color: #ff6b6b !important; /* Rojo más claro */
}
/* Estilos de autocompletado en modo claro */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #000000; /* Texto negro */
    -webkit-box-shadow: 0 0 0px 1000px #d8f0ff inset; /* Fondo azul */
    border-color: #49a0ff; /* Borde azul */
    transition: background-color 5000s ease-in-out 0s;
}
/* Estilos de autocompletado en modo oscuro */
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill,
.dark-mode textarea:-webkit-autofill:hover,
.dark-mode textarea:-webkit-autofill:focus,
.dark-mode select:-webkit-autofill,
.dark-mode select:-webkit-autofill:hover,
.dark-mode select:-webkit-autofill:focus {
    -webkit-text-fill-color: #e0e0e0; /* Texto gris claro */
    -webkit-box-shadow: 0 0 0px 1000px #2c3e50 inset; /* Fondo azul oscuro */
    border-color: #2980b9; /* Borde azul más oscuro */
    transition: background-color 5000s ease-in-out 0s;
}
.form-group textarea {
    height: 8rem;
}
/* Estilos para campos autocompletados válidos en modo claro */
.was-validated .form-control:valid:-webkit-autofill,
.form-control.is-valid:-webkit-autofill {
    border-color: #198754 !important; /* Verde */
    -webkit-text-fill-color: #000000 !important; /* Texto negro */
    -webkit-box-shadow: 0 0 0px 1000px #d1e7dd inset !important; /* Fondo verde claro */
    transition: background-color 5000s ease-in-out 0s !important;
}
/* Estilos para campos autocompletados inválidos en modo claro */
.was-validated .form-control:invalid:-webkit-autofill,
.form-control.is-invalid:-webkit-autofill {
    border-color: #dc3545 !important; /* Rojo */
    -webkit-text-fill-color: #000000 !important; /* Texto negro */
    -webkit-box-shadow: 0 0 0px 1000px #f8d7da inset !important; /* Fondo rojo claro */
    transition: background-color 5000s ease-in-out 0s !important;
}
/* Estilos para campos autocompletados válidos en modo oscuro */
.dark-mode .was-validated .form-control:valid:-webkit-autofill,
.dark-mode .form-control.is-valid:-webkit-autofill {
    border-color: #28a745 !important; /* Verde oscuro */
    -webkit-text-fill-color: #ffffff !important; /* Texto blanco */
    -webkit-box-shadow: 0 0 0px 1000px #1e5128 inset !important; /* Fondo verde muy oscuro */
    transition: background-color 5000s ease-in-out 0s !important;
}
/* Estilos para campos autocompletados inválidos en modo oscuro */
.dark-mode .was-validated .form-control:invalid:-webkit-autofill,
.dark-mode .form-control.is-invalid:-webkit-autofill {
    border-color: #dc3545 !important; /* Rojo oscuro */
    -webkit-text-fill-color: #ffffff !important; /* Texto blanco */
    -webkit-box-shadow: 0 0 0px 1000px #3c0e0e inset !important; /* Fondo rojo muy oscuro */
    transition: background-color 5000s ease-in-out 0s !important;
}
/**------------------------------------------------------------------------------------------- BOTONES ---------------------------------------------------------------*/
/* Estilos para el modo oscuro */
.dark-mode .btn-add, 
.dark-mode .btn-add:hover,
.dark-mode .btn-add:hover:after, 
.dark-mode .btn-add:after, 
.dark-mode .btn-add:active, 
.dark-mode .btn-add:active::after {
    color: #fff !important; /* Color del texto */
    background: #4caf50 !important; /* Verde oscuro */
    align-content: center;
}
.dark-mode .btn-add {
    box-shadow: 0 5px #357a3e !important; /* Sombra en verde más oscuro */
}
.dark-mode .btn-add:hover {
    box-shadow: 0 3px #357a3e !important; /* Sombra más oscura */
}
.dark-mode .btn-add:active {
    box-shadow: 0 0 #357a3e !important; /* Sombra al hacer clic */
}
.btn-ver {
    background-color: #28a745;
    color: #ffffff;
    border: 1px solid #218838;
}
.btn-ver:hover,
.btn-ver:focus,
.btn-ver:active {
    background-color: #218838;
}
.btn-editar, .btn-editar:focus {
    background-color: #f0ad4e;
    color: #ffffff !important;
    border: 1px solid #f0ad4e;
    padding: 0;
    border-radius: 1rem;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    transition: background-color 0.3s ease;
    font-size: .8rem;
}
.btn-editar:hover {
    background-color: #ec971f;
    color: #f9f9f9 !important;
}
.btn-editar:active {
    background-color: #d58512 !important;
    border-color: #d58512 !important;
}
.btn-eliminar {
    background-color: #dc3545;
    color: #ffffff;
    border: 1px solid #c82333;
}
.btn-eliminar:hover,
.btn-eliminar:focus,
.btn-eliminar:active {
    background-color: #c82333;
}
/* !!DARK MODE */
.dark-mode .btn-ver {
    background-color: #20c997;
    color: #ffffff;
    border: 1px solid #17a2b8;
}
.dark-mode .btn-ver:hover,
.dark-mode .btn-ver:focus,
.dark-mode .btn-ver:active {
    background-color: #17a2b8;
}
.dark-mode .btn-editar, .dark-mode .btn-editar:focus{
    background-color: #ffc107;
    color: #121212 !important;
    border: 1px solid #ffc107;
}
.dark-mode .btn-editar:hover {
    background-color: #e0a800;
    color: #0d0d0d !important;
}
.dark-mode .btn-editar:active {
    background-color: #c69500;
    border-color: #d58512;
}
.dark-mode .btn-eliminar {
    background-color: #dc3545;
    color: #ffffff;
    border: 1px solid #c82333;
}
.dark-mode .btn-eliminar:hover,
.dark-mode .btn-eliminar:focus,
.dark-mode .btn-eliminar:active {
    background-color: #c82333;
}
.btn-success {
    border: 0.2rem solid #0f1114 !important;
    background-color: #4177b1 !important;
    color: #0f1114 !important;
    border-radius: 5px;
    transition: background-color 0.3s, border 0.3s;
}
/* Botón en estado hover */
.btn-success:hover {
    border: 0.2rem solid #31363c !important;
    background-color: #3976b9 !important;
    color: #0f1114 !important;
}
/* Botón en estado active */
.btn-success:active {
    border: 0.2rem solid #464e55 !important;
    background-color: #464e55 !important;
    color: #0f1114 !important;
}
.dark-mode .btn-success {
    border: 0.2rem solid #4177b1 !important;
    background-color: #0f1114 !important;
    color: #a8b9be !important;
    border-radius: 5px;
    transition: background-color 0.3s, border 0.3s;
}
/* Botón en estado hover */
.dark-mode .btn-success:hover {
    border: 0.2rem solid #3976b9 !important;
    background-color: #31363c !important;
    color: #afe1ff !important;
}
/* Botón en estado active */
.dark-mode .btn-success:active {
    border: 0.2rem solid #464e55 !important;
    background-color: #464e55 !important;
    color: #ffffff !important;
}
.btn-cancelar {
    color: #1e1f21;
    border-color:#cfcbcb;
    font-weight: normal;
}
.btn-cancelar:hover {
    color: #1e1f21;
    background-color: #f9f8f8;
    border-color: #afabac;
}
.btn-cancelar:active {
    background-color: #f5f3f3;
    border-color: #6d6e6f;
}
.dark-mode .btn-cancelar {
    color: #f5f4f3;
    border-color:#565557;
}
.dark-mode .btn-cancelar:hover {
    background-color: rgba(255,255,255,.06);
    border-color: #6a696a;
}
.dark-mode .btn-cancelar:active {
    background-color: rgba(255,255,255,.11);
    border-color: #a2a0a2;
}
/**------------------------------------------------------------------------------------------- TABLAS ---------------------------------------------------------------*/
@media screen and (max-width: 1300px) {
    .table-responsive tbody {
        font-size: 0.9rem;
    }
    .table-responsive th {
        font-size: 1rem;
    }
}
/* Media Query para dispositivos móviles */
@media screen and (max-width: 801px) {
    .table-responsive {
        margin-right: 0; /* Elimina margen a la derecha */
        padding-left: 0; /* Elimina relleno a la izquierda */
        margin-top: 1rem; /* Elimina margen a la derecha */
        width: 100%;
        padding: 0; /* Ajusta el relleno según sea necesario */
        flex: auto;
    }
}
@media screen and (max-width: 531px) and (min-width: 486px){
    .table-responsive tbody {
        font-size: 0.8rem;
    }
    .table-responsive th {
        font-size: 0.9rem;
    }
}
@media screen and (max-width: 485px) {
    .table-responsive tbody {
        font-size: 0.7rem;
    }
    .table-responsive th {
        font-size: 0.8rem;
    }
}
/* Personalización de la barra de desplazamiento */
.table-responsive::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar {
    background: #fff;
}
.dark-mode .table-responsive::-webkit-scrollbar-track, .dark-mode .table-responsive::-webkit-scrollbar {
    background: #181818;
}
.dark-mode .table-responsive::-webkit-scrollbar-thumb {
    background-color: #121212;
    border: 1px solid #1e1e1e;
}
.table-responsive::-webkit-scrollbar-thumb {
    background-color: #eeeeee;
    border: #eeeeee;
}
.table-responsive td, .table-responsive th {
    vertical-align: middle !important;
}
td i {
    display: flex !important;
    justify-content: center;
}
/* Estilos para modo oscuro */
.registro-row {
    cursor: pointer;
}
.table-bordered tbody td:not(:first-child) {
    color: oklch(0.551 0.027 264.364); /* Color del texto */
}
.dark-mode .table-bordered thead th, .dark-mode .table-bordered tbody td:first-child {
    color: #fff; /* Color del texto */
}
.dark-mode .table-bordered tbody td:not(:first-child) {
    color: oklch(0.707 0.022 261.325); /* Color del texto */
}
.table-striped>tbody>tr:nth-of-type(odd)>*, table.table.table-bordered.table-striped.table-hover tbody td {
    --bs-table-bg-type: #fff;
}
.dark-mode table.table.table-bordered.table-striped.table-hover tbody td, .dark-mode .table-striped>tbody>tr:nth-of-type(odd)>*{
    --bs-table-bg-type: #151414;
}
.table-responsive table {
    width: 100%;
    border-collapse: collapse;
}
.table-responsive thead th {
    text-align: left !important; /* Centrar texto horizontalmente */
    vertical-align: middle !important;
}
.table-bordered.table-striped.table-hover thead tr th, .table-bordered.table-striped.table-hover tbody tr:first-child {
    border-width:0 !important;
}
.table tbody, .table-responsive thead th, .table-head {
    border-color: #F0F0F0 !important; /* Color de fondo blanco para las filas */
}
.dark-mode .table tbody, .dark-mode .table-responsive thead th, .dark-mode .table-head{
    border-color: #1c1c1c !important; /* Color de fondo blanco para las filas */
}
.table-head{
    border:none;
    user-select: none;
}
table thead tr th{
    top:-.3px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: sticky;
    background-color:color-mix(in oklab, #fafafa 75%, transparent)!important;
    box-shadow: inset 0px -1px 0px #F0F0F0 !important; /* Simula un borde rojo de 1rem */
}
.dark-mode table thead tr th{
    box-shadow: inset 0px -1px 0px #272727 !important; /* Simula un borde rojo de 1rem */
    background-color:color-mix(in oklab, #0a0a0acc 75%, #2b2b2bd1) !important;
}
.table-hover tbody tr:hover {
    --bs-table-hover-bg: #f5f5f5;
}
.dark-mode .table-hover tbody tr:hover {
    --bs-table-hover-bg: #191919;
}
.table-responsive tbody {
    font-size: .807rem;
}
.table-responsive th {
    font-size: .688rem;
    font-weight: 500;
    z-index: 1;
}
.dark-mode .table-responsive thead th {
    border-bottom: 1px solid #232323 !important; /* Añadir borde inferior */
}
.table-responsive {
    flex: 1;
    max-width: 100%;
    max-height: calc(-8rem + 100vh);
    overflow-y: auto;
    margin-bottom: 1rem;
    margin-right: 1rem;
    padding-left: 2rem;
}
.table th, .table td {
    border: none; /* Eliminar los bordes internos */
}
.page-link {
    padding: .4rem .4rem;
    --bs-pagination-font-size: .8rem
}
ul.pagination{
    margin:.3rem;
}
.dark-mode .page-item:not(.active) .page-link {
    background-color: #181818;
    border-color: #212121;
}
.dark-mode .page-item.disabled .page-link, .dark-mode .page-item.disabled a {
    background-color: #181818 !important;
    border-color: #212121 !important;
    color: #c5c5c5;
}
.dark-mode .page-item:not(.active) .page-link:focus, .dark-mode .page-item:not(.active) .page-link:hover {
    color: #4774a3;
    background-color: #212121;
}
/**------------------------------------------------------------------------------------------- TARJETAS ---------------------------------------------------------------*/
.card-title {
    margin-bottom: 0;
    font-size:17px;
}
.dark-mode  .card-footer {
    border-color:#272727;
}
/**------------------------------------------------------------------------------------------- MODALES ---------------------------------------------------------------*/
.modal-header h2.modal-title, .card-header h2.modal-title, h2.modal-title {
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    color: #1e1f21;
}
.dark-mode .modal-header h2.modal-title, .dark-mode .card-header h2.modal-title, .dark-mode h2.modal-title {
    color: #e8eef0;
}
.wp-btn-close {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    border-radius: 6px;
    flex-grow: 0;
    margin: 0 0 0 16px;
    box-sizing: border-box;
    border: 1px solid transparent;
    justify-content: center;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    background: 0 0;
    outline: none;
    box-shadow: none;
    color: #626262;
    transition-property: background, border, fill;
    transition-duration: .2s;
}
.wp-btn-close i {
    font-size: 24px;
    transition: transform 0.1s ease-in-out;
    line-height: 0;
}
.dark-mode .wp-btn-close {
    color: #a2a0a2;
}
.wp-btn-close:hover {
    color: #1e1f21;
    background: rgba(55,23,23,.03);
}
.dark-mode .wp-btn-close:hover {
    color: #f5f4f3;
    background: rgba(255,255,255,.06);
}
.wp-btn-close:active {
    background: rgba(55,23,23,.05);
    color: #1e1f21;
}
.dark-mode .wp-btn-close:active {
    background: rgba(255,255,255,.11);
    color: #f5f4f3;
}
.modal-footer .btn {
    margin:.25rem; /* Espacio entre los botones */
}
.modal-footer .btn:first-child {
    margin:0 .25rem 0 0;
}
.modal-footer>:not(:first-child) {
    margin:0 0 0 13px;
}
.modal-footer>:first-child {
    margin: 0;
}
@media (min-width: 992px) {
    .col-md-6 {
        -ms-flex: 0 0 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}
@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
}
@media (max-width: 455px) {
    .modal .modal-body form {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}
.pdb-5 {
    padding-block: 2.5rem
}
.pdi-3 {
    padding-block: 1.5rem
}
.top-radius-1 {
    border-end-end-radius: .25rem;
    border-end-start-radius: .25rem;
}
.radius-2 {
    border-radius: .5rem;
}
.image-icon {
    color: oklch(87.2% 0.01 258.338); /* Gris azulado */
}
.text-icon {
    color: oklch(44.6% 0.03 256.802); /* Gris azulado */
}
.line-title {
    align-items:center;
    display:flex;
    inset:0;
    position:absolute;
}
.line-line {
    border-color: #e9ecef;
    border-top-style: solid;
    border-top-width:1px;
    width:100%;
}
.dark-mode .line-line {
    border-color: #242424;
}
.title-title {
    justify-content:flex-start;
    display:flex;
    position:relative;
}
.text-title {
    font-size:.875rem;
    background:#fff;
    font-weight: 600;
    border-style: none;
    border-color: oklch(87.2% 0.01 258.338);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, inset 0 0 0 calc(1px + 0px) oklch(87.2% 0.01 258.338), 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    color: oklch(21% 0.034 264.665);
    padding-block: .375rem;
    padding-inline: .75rem;
    border-start-end-radius: calc(infinity * 1px);
    border-end-end-radius: calc(infinity * 1px);
    column-gap: .375rem;
    display: inline-flex;
    align-items: center;
}
.dark-mode .text-title {
    background:#171616;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, inset 0 0 0 calc(1px + 0px) oklch(0.34 0.01 0), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.text-title-icon {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
    margin-right: -.25rem;
    margin-left: -.125rem;
}
.btn-group button.btn-sm.btn.btn-ellipsis, .btn-group button:active.btn-sm.btn.btn-ellipsis {
    background-color:#fbfbfb;
    border-radius:13px;
    border-color:#F0f0f0;
    transition:none;
}
.dark-mode .btn-group button.btn-sm.btn.btn-ellipsis, .dark-mode btn-group button:active.btn-sm.btn.btn-ellipsis {
    background-color:#181818;
    border-color:#212121;
    color: grey;
}
.btn-group button.btn-sm.btn.btn-ellipsis:hover{
    background-color:#eee;
}
.dark-mode .btn-group button.btn-sm.btn.btn-ellipsis:hover{
    background-color:#212121;
}
/* TOGGLEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE */
.switch-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    --switch-bg: oklch(92.8% 0.006 264.531);
    --switch-bg-checked: oklch(51.1% 0.262 276.966);
    --icon-off-color: oklch(70.7% 0.022 261.325);
    --icon-on-color: oklch(51.1% 0.262 276.966);
}
.switch-green-red {
    --switch-bg:oklch(70.4% 0.191 22.216);
    --switch-bg-checked:oklch(79.2% 0.209 151.711);
    --icon-off-color:oklch(70.4% 0.191 22.216);
    --icon-on-color:oklch(79.2% 0.209 151.711);
}
.dark-mode .switch-container {
    --switch-bg: oklch(0.32 0 0);
    --switch-bg-checked: oklch(0.33 0.16 277.76);
    --icon-off-color: oklch(0.41 0 0);
    --icon-on-color: oklch(0.33 0.16 277.76);
    --thumb-bg: rgb(0, 0, 0);
}
.dark-mode .switch-green-red {
    --switch-bg: oklch(0.36 0.09 22.06);
    --switch-bg-checked: oklch(0.38 0.08 152.48);
    --icon-off-color: oklch(0.36 0.09 22.06);
    --icon-on-color: oklch(0.38 0.08 152.48);
}
.switch-input {
    display: none;
}
.switch {
    width: 2.75rem;
    height: 1.5rem;
    background-color: var(--switch-bg);
    border-radius: calc(infinity * 1px);
    position: relative;
    transition: background-color 0.3s;
    user-select: none;
}
.switch-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--thumb-bg, white); /* blanco por defecto */
    border-radius: calc(infinity * 1px);
    position: absolute;
    top: .125rem;
    left: .125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    font-size: 0.75rem;
}
.switch-input:checked + .switch {
    background-color: var(--switch-bg-checked);
}
.switch-input:checked + .switch .switch-thumb {
    transform: translateX(1.25rem);
}
.icon {
    width: 0.75rem;
    height: 0.75rem;
    display: none;
    color: var(--icon-off-color);
}
.icon-on {
    color: var(--icon-on-color);
}
.icon svg {
    width: 100%;
    height: 100%;
    display: block;
    vertical-align: middle;
}
.switch-input:not(:checked) + .switch .icon-off {
    display: block;
}
.switch-input:checked + .switch .icon-on {
    display: block;
}
/*NMMS*/
.footer-container {
    margin: 0 auto;
}
.social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.social-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    color: #4a5054;
    transition: color 0.3s ease;
}
.dark-mode .social-icon {
    color: #869099;
}
.social-icon svg {
    width: 100%;
    height: 100%;
}
a.social-icon:hover {
    color: #1f1f1f; /* Azul al hacer hover */
}
.dark-mode a.social-icon:hover {
    color: #dbdbdb; /* Azul al hacer hover */
}
.footer-text {
    font-size: 0.875rem;
    line-height: 2.3;
    margin: 0;
    text-align: center;
    margin-top: 1rem;
}
@media (width >= 73rem) {
    .footer-container {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }
    .social-links {
        order: 2;
    }
    .footer-text {
        margin: 0;
    }
}
/* ESTADOSSSSSSSSSSSSSSSSSSSSsssss */
.circle-state{
    width: 8px;
    height: 8px;
    background: transparent;
    border-radius: calc(infinity* 1px);
}
.states{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: #fff;
    border-radius: 4px;
    height: 20px;
    font-size: 12px;
    padding: 0 4px;
    width: max-content;
    user-select: none;
}
.completed-state{
    background: #58a182;
}
.dark-mode .completed-state{
    background: #5da283;
}
.expired-state{
    background: #fef0f1;
    color: #c92f54;
}
.expired-icon{
    background: #de5f73;
}
.dark-mode .expired-state{
    background: #581e28;
    color: #eb7586;
}
.dark-mode .expired-icon{
    background: #d1395a;
}
.open-state{
    background: #fff6ee;
    color: #986516;
}
.open-icon{
    background: #f1bd6c;
}
.dark-mode .open-state{
    background: #3d3120;
    color: #f1bd6c;
}
.dark.mode .open-icon{
    background: #f1bd6c;
}
.in-process-state{
    background: #f1f2fc;
    color: #3f6ac4;
}
.in-process-icon{
    background: #3f6ac4;
}
.dark-mode .in-process-state{
    background: #172237;
    color: #689af3;
}
.dark-mode .in-process-icon{
    background: #4573d2;
}
.bg-success{
    background: #58a182 !important;
    user-select: none;
}
.dark-mode .bg-success{
    background: #5da283 !important;
}
.bg-danger{
    background: #fef0f1 !important;
    color: #c92f54 !important;
    user-select: none;
}
.dark-mode .bg-danger{
    background: #581e28 !important;
    color: #eb7586 !important;
}