.negro {
    color: var(--color-texto-principal);
}

.rojo {
    color: var(--color-estado-rojo-texto);
}

.mayuscula {
    text-transform: uppercase;
}

body {
    margin: 0;
    padding: 0;
}

.full-height-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-height-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.form-container {
    margin: auto;
    padding: 40px;
    box-shadow: var(--shadow-panel);
    background: var(--color-fondo-panel);
    border-radius: var(--radius-2xl);
}

.avatar {
    width: 150px;
    height: 150px;
}

a {
    color: #333;
    text-decoration: none;
}

.btn-cliente {
    color: var(--color-texto-claro);
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

.btn-cliente:hover {
    background-color: var(--color-fondo-hover-oscuro);
    color: var(--color-texto-claro);
}

.bg-cliente {
    background-color: var(--color-primario);
}

.bg-cliente2 {
    background-color: var(--color-secundario);
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box.md {
    width: 50px;
    height: 50px;
}

.form-check-input:checked {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

.boton-dashboard {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-4xl);
    background-color: var(--color-fondo-panel);
    padding-top: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    height: 85%;
    cursor: pointer;
}

.boton-dashboard:hover {
    background-color: var(--color-primario);
    color: var(--color-texto-claro);
}

.boton-dashboard:hover a {
    color: var(--color-texto-claro);
}

.div_contenedor {
    background-color: var(--color-fondo-panel);
    border-radius: var(--radius-4xl);
    padding: 25px;
}

.muestra_contenido {
    background: var(--color-fondo-panel);
    border-radius: var(--radius-xl);
    border-style: solid;
    border-color: var(--color-borde-oscuro);
    border-width: 10px;
    margin-bottom: 10px;
}

.cuadro_texto2 {
    background: var(--color-fondo-input);
    border: 0;
    padding: 10px;
    color: var(--color-texto-principal);
    font-size: 15px;
    width: 100%;
    box-shadow: var(--shadow-input);
    border-radius: 0;
}

.img-referencia {
    width: 50px;
    height: 50px;
}

.oculto {
    display: none !important;
}

.mostrar {
    display: block !important;
}

.value-hidden::before {
    content: '********';
}

.value-visible::before {
    content: attr(data-value);
}

.cuadro_texto2:focus,
textarea:focus {
    background: var(--color-fondo-panel);
}

.select_formulario {
    background-color: var(--color-fondo-neutral-2);
    color: var(--color-texto-claro);
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-borde-medio);
    border-radius: var(--radius-sm);
    font-size: 15px;
    cursor: pointer;
}

.select_formulario:focus {
    background-color: var(--color-fondo-neutral-3);
    color: var(--color-texto-claro);
    outline: none;
    box-shadow: var(--shadow-md);
}

.my-checkbox-x2 {
    margin: 10px;
    transform: scale(2);
}

.status {
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-weight: 700;
}

.status-naranja {
    background: var(--color-estado-naranja-bg);
    color: var(--color-estado-naranja-texto);
}

.status-verde {
    background: var(--color-estado-verde-bg);
    color: var(--color-estado-verde-texto);
}

.status-rojo {
    background: var(--color-estado-rojo-bg);
    color: var(--color-estado-rojo-texto);
}

.dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
}

.dt-buttons {
    margin: 10px 20px;
    flex: 0 0 auto;
    width: auto;
}

.dt-button {
    padding: 8px 15px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
}

.dt-button:hover {
    background-color: var(--color-negro);
    color: var(--color-texto-claro);
    font-size: 17px;
}

.dataTables_filter {
    display: flex;
    justify-content: center;
    margin: 10px 20px;
    flex: 0 0 auto;
    width: auto;
}

.dataTables_filter input[type="search"] {
    background: var(--color-fondo-neutral);
    border: 0;
    padding: 10px;
    color: var(--color-texto-principal);
    font-size: 15px;
    width: 100%;
    border-radius: var(--radius-xs);
}

.dataTables_filter input[type="search"]:focus {
    background: var(--color-fondo-panel);
    outline: none;
    box-shadow: var(--shadow-lg);
}

.dataTables_length {
    display: flex;
    justify-content: center;
    margin: 10px 20px;
    flex: 0 0 auto;
    width: auto;
}

.dataTables_length select {
    background-color: var(--color-fondo-neutral-2);
    color: var(--color-texto-claro);
    width: 100%;
    padding: 10px 40px;
    border: 1px solid var(--color-borde-medio);
    border-radius: var(--radius-sm);
    font-size: 15px;
    cursor: pointer;
}

.dataTables_length select:focus {
    outline: none;
    box-shadow: var(--shadow-lg);
}

.dataTables_paginate a {
    color: var(--color-texto-principal);
}

.dataTables_paginate a:hover {
    color: var(--color-primario);
}

.page-wrapper.pinned .sidebar-wrapper {
    width: 80px;
}

.page-wrapper.pinned .main-container {
    padding-left: 80px;
}

.page-wrapper.pinned .app-container {
    width: calc(100% - 110px);
}

.page-wrapper.pinned .sidebar-wrapper .sidebar-menu .menu-text,
.page-wrapper.pinned .sidebar-wrapper .sidebar-menu .treeview.active .treeview-menu,
.page-wrapper.pinned .sidebar-wrapper .sidebar-menu li.treeview:after {
    display: none !important;
}

.page-wrapper.pinned .sidebar-wrapper:hover {
    width: 250px;
}

.page-wrapper.pinned .sidebar-wrapper:hover .sidebar-menu .menu-text,
.page-wrapper.pinned .sidebar-wrapper:hover .sidebar-menu .treeview.active .treeview-menu,
.page-wrapper.pinned .sidebar-wrapper:hover .sidebar-menu li.treeview:after {
    display: block !important;
}

.accordion-button:not(.collapsed),
button.accordion-button {
    background-color: var(--color-primario);
    color: var(--color-texto-claro);
}

.accordion-button:not(.collapsed) {
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

button.accordion-button {
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

button.accordion-button:hover {
    background-color: var(--color-fondo-hover-oscuro);
    color: var(--color-texto-claro);
}

.table-cliente {
    --bs-table-color: var(--color-letraTabla);
    --bs-table-bg: var(--color-primario);
    --bs-table-border-color: var(--color-primario);
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.form-control:focus {
    border-color: var(--color-primario);
    box-shadow: var(--shadow-sm) !important;
    outline: none !important;
}

@media (max-width: 990px) {
    .page-wrapper {
        margin: 0 !important;
        border: 0 !important;
    }

    .page-wrapper .sidebar-wrapper {
        margin: 0;
    }

    .page-wrapper .main-container {
        width: 100% !important;
    }

    .page-wrapper .app-container {
        width: 100%;
    }

    .main-container {
        padding: 0 !important;
    }

    .sidebar-wrapper {
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        display: none;
    }

    .app-header {
        min-height: auto;
        margin: 0 !important;
    }

    .app-body {
        padding: 0 20px 150px 0;
        margin: 0 0 50px 0;
    }

    .page-wrapper .sidebar-wrapper:hover {
        width: 250px;
    }

    .page-wrapper .sidebar-wrapper:hover .sidebar-menu .menu-text,
    .page-wrapper .sidebar-wrapper:hover .sidebar-menu .treeview.active .treeview-menu,
    .page-wrapper .sidebar-wrapper:hover .sidebar-menu li.treeview:after {
        display: block !important;
    }
}