@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    --main-color-theme1: #DF0831;
    --main-color-theme2: #BB7F0E;
    --main-color-theme3: #555555;
    --main-color-theme4: #990621;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Para navegadores basados en WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 6px; /* Ajusta el ancho del scrollbar */
}

/* Color del track (fondo del scrollbar) */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color del fondo */
    border-radius: 10px; /* Bordes redondeados */
}

/* Color y estilo del thumb (barra que se mueve) */
::-webkit-scrollbar-thumb {
    background: #888; /* Color de la barra */
    border-radius: 10px; /* Bordes redondeados */
}

    /* Cambia el color del thumb al pasar el mouse */
    ::-webkit-scrollbar-thumb:hover {
        background: #555; /* Color más oscuro al pasar el mouse */
    }

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ----- Typography ----- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    overflow-y: auto;
    line-height: 1.625;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: "Nunito", sans-serif;
    font-size: 1rem;
    background: rgb(240, 243, 249);
    background-image: url(../img/img_bg_pattern.png);
    background-size: 10px 10px;
}

a {
    color: var(--main-color-theme1);
    text-decoration: none;
}

    a:hover {
        color: var(--main-color-theme4);
        text-decoration: none;
    }

/*--------------------------------------------------------------
# GENERALES
--------------------------------------------------------------*/
.text-grey-m2 {
    color: #888a8d !important;
}

.font-bolder, .text-600 {
    font-weight: 600 !important;
}

.text-110 {
    font-size: 110% !important;
}

.text-blue {
    color: var(--main-color-theme3) !important;
}

.btn-plantilla {
    background-color: var(--main-color-theme1) !important;
    border-color: var(--main-color-theme1) !important;
    color: #fff !important;
}

    .btn-plantilla:hover {
        background-color: var(--main-color-theme4) !important;
        border-color: var(--main-color-theme4) !important;
    }

    .btn-plantilla:active {
        background-color: var(--main-color-theme4) !important;
        border-color: var(--main-color-theme4) !important;
    }

    .btn-plantilla:disabled {
        background-color: #ccc !important; /* Color de fondo apagado */
        border-color: #ccc !important; /* Borde apagado */
        color: #999 !important; /* Texto gris claro */
        cursor: not-allowed !important; /* Cursor indicando estado no interactivo */
        opacity: 0.7; /* Apariencia desactivada */
    }

    .btn-plantilla.disabled {
        background-color: #ccc !important; /* Color de fondo apagado */
        border-color: #ccc !important; /* Borde apagado */
        color: #999 !important; /* Texto gris claro */
        cursor: not-allowed !important; /* Cursor indicando estado no interactivo */
        opacity: 0.7; /* Apariencia desactivada */
    }

.colorPlantilla {
    color: var(--main-color-theme1);
}

.colorSecundarioPlantilla {
    color: var(--main-color-theme2);
}

.active > .page-link, .page-link.active {
    background-color: var(--main-color-theme1);
    border-color: var(--main-color-theme1)
}

.page-link {
    color: var(--main-color-theme1);
}

.dataTable thead tr th,
.dataTable tbody tr td {
    text-align: center;
}

.textoPlantilla {
    font-family: "Roboto Mono", monospace;
}

.popoverEliminar {
    z-index: 99;
}

.bgPlantilla {
    background-color: var(--main-color-theme1);
}

.popover-header {
    text-align: center;
}

.tableFixHead {
    overflow: auto;
    height: 80vh;
}

    .tableFixHead thead {
        position: sticky;
        top: 0;
        z-index: 1;
    }

.dataTables_scrollBody {
    overflow: hidden !important;
    overflow-y: auto !important;
}

.bgPlantillaFull {
    background-color: var(--main-color-theme1);
    border-color: var(--main-color-theme1);
}

.btnGrande {
    background-color: var(--main-color-theme1);
    border-color: var(--main-color-theme1);
    color: #fff !important;
}

    .btnGrande:hover {
        background-color: var(--main-color-theme2) !important;
        border-color: var(--main-color-theme2) !important;
    }

.btnGrandeDanger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff !important;
}

    .btnGrandeDanger:hover {
        background-color: #bb2d3b !important;
        border-color: #b02a37 !important;
    }

.ocultar {
    display: none;
}

.mostrar {
    display: block;
}
/*--------------------------------------------------------------
# END GENERALES
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
    padding: 30px;
}

    .error-404 h1 {
        font-size: 180px;
        font-weight: 700;
        color: var(--main-color-theme);
        margin-bottom: 0;
        line-height: 150px;
    }

    .error-404 h2 {
        font-size: 24px;
        font-weight: 700;
        color: var(--main-color-subtheme);
        margin-bottom: 30px;
    }

    .error-404 .btn {
        background: var(--main-color-theme1);
        color: #fff;
        padding: 8px 30px;
    }

        .error-404 .btn:hover {
            background: var(--main-color-theme4);
        }

    .error-404 img {
        max-height: 400px;
    }
/*--------------------------------------------------------------
# End Error 404
--------------------------------------------------------------*/

.estante {
    padding: 0.75rem 0 0 0;
}