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 {
    margin-bottom: 60px;
    background-color: var(--wc-gris-200, #F7F4FB);
}

body {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*Para las tipografías*/
.fuente-titulos {
    font-size: 24px;
    font-weight: bold;
}

.fuente-violeta {
    color: var(--wc-violeta-500, #8F2FFF);
}

.fuente-roja {
    font-size: smaller;
    color: crimson;
}

/*Para el menu lateral*/
body {
    overflow-x: hidden;
}

#sidebar-wrapper {
    width: 200px;
    height: calc(100vh - 68px); /*Ajustar la altura teniendo en cuenta el navbar */
    position: fixed; /*Fija el sidebar en su lugar */
    top: 68px; /*Altura de la navbar */
    left: 0;
    z-index: 1000; /*Asegúrate de que el sidebar esté por encima del contenido principal */
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    text-align: center;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
}

    #sidebar-wrapper.collapsed {
        width: 60px;
    }

    #sidebar-wrapper .list-group-item {
        padding: 15px 20px;
        white-space: nowrap;
        border: none;
    }

        #sidebar-wrapper .list-group-item .menu-text {
            margin-left: 10px;
            color: black;
        }

    #sidebar-wrapper.collapsed .menu-text {
        display: none;
    }

    #sidebar-wrapper .toogle {
        position: absolute;
        top: 25px;
        right: -15px;
        transform: translateY(-50%);
        height: 25px;
        width: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--wc-violeta-500, #8F2FFF);
        font-size: 23px;
        border-radius: 50%;
        z-index: 1000;
        cursor: pointer;
        color: white;
    }

    /* Rota el icono 180 grados solo cuando el sidebar está expandido (es decir, cuando no tiene la clase .collapsed). */
    #sidebar-wrapper:not(.collapsed) .toogle {
        transform: translateY(-50%) rotate(180deg);
    }


.sidebar-top-items,
.sidebar-bottom-items {
    display: flex;
    flex-direction: column;
}

.sidebar-bottom-items {
    margin-top: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
}

#page-content-wrapper {
    flex: 1;
    width: 100%;
    margin-left: 3em;
    transition: margin-left 0.3s ease;
    padding-top: 63px; /*Compensar la altura del navbar */
}

@media (max-width: 768px) {
    #sidebar-wrapper {
        width: 100%;
        height: auto;
        position: relative;
    }
}

.sidebar-item img.sidebar-icon {
    width: 24px; /*Ajusta este tamaño según sea necesario */
    height: 24px; /*Ajusta este tamaño según sea necesario*/
}

/* Estilos de offcanvas */
.offcanvas-end {
    width: 40%;
}

.offcanvas-header {
    background-color: var(--wc-violeta-500);
    color: white;
}

#verEditarTareaOffcanvas .offcanvas-body {
    background-color: var(--wc-gris-200, #F7F4FB);
}

/*  VARIABLES DE COLORES  */

:root {
    --wc-violeta-0: #F7F5FF;
    --wc-violeta-100: #E2CDFF;
    --wc-violeta-200: #CDA6FF;
    --wc-violeta-300: #B97EFF;
    --wc-violeta-400: #A457FF;
    --wc-violeta-500: #8F2FFF;
    --wc-violeta-600: #7223CD;
    --wc-violeta-700: #54189C;
    --wc-violeta-800: #370C6A;
    --wc-violeta-900: #190038;
    --wc-gris-0: #FDFBFF;
    --wc-gris-100: #FBF9FD;
    --wc-gris-200: #F7F4FB;
    --wc-gris-300: #EFEBF5;
    --wc-gris-400: #D5D2D8;
    --wc-gris-500: #B3B0B6;
    --wc-gris-600: #918E94;
    --wc-gris-700: #6F6B73;
    --wc-gris-800: #4D4951;
    --wc-gris-900: #2B262F;
    --wc-blanco-: #FFFFFF;
    --wc-negro-: #0F0021;
}

/*Loging*/
.text-danger ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.text-danger li {
    margin-left: 0;
}

.text-danger {
    font-weight: bold;
}

/* Botones de la columna de acciones del mismo tamaño */
.boton-grid-custom {
    min-width: 90px;
    display: inline-block;
    text-align: center;
}
/* Enlace LOPD */
.texto-link {
    cursor: pointer;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.texto-link:hover {
    text-decoration: underline;
}

/* Listado documentos sección Gestión */
.estado-circulo {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.estado-circulo.ok {
    background-color: green;
}

.estado-circulo.nok {
    background-color: red;
}

/* Estilo del spinner para la presentación de facturas con hacienda electrónicamente */

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

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

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* Color de fondo del spinner */
    border-top: 5px solid #8F2FFF; /* Color de la animación */
    border-radius: 50%; /* Hace que sea un círculo */
    animation: spin 1s linear infinite; /* Aplica la animación */
}

/* Estilo del overlay (fondo oscuro) */
#overlay-spinner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}