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%;
}

/* Tablet: entre 768px y 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .offcanvas-end {
        width: 70%;
    }
}

/* Móvil: menos de 768px */
@media (max-width: 767px) {
    .offcanvas-end {
        width: 100%;
    }
}

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

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

/* Por defecto (móvil + tablet): 100% */
#verEditarTareaOffcanvas.offcanvas-end {
    width: 100%;
}

/* En pantallas grandes (>= 992px): 75% */
@media (min-width: 992px) {
    #verEditarTareaOffcanvas.offcanvas-end {
        width: 75%;
    }
}

/*  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;
}

.swal-html-izquierda {
    text-align: left; /* justifica el texto */
    text-align-last: left; /* asegura que la última línea quede alineada a la izquierda */
    margin-left: 0 !important;
}

#wndCreditos a {
    color: var(--wc-violeta-500, #8F2FFF) !important;
    font-weight: bold;
    text-decoration: none;
}

#wndCreditos a:hover {
    text-decoration: underline;
}



/* ----- MOBILE RULES, las pongo al final para que sobrescriban a las posibles reglas CSS que tengamos por encima ----- */
@media (max-width: 768px) {

    /* El sidebar se comporta como menú deslizante */
    /* El sidebar se esconde fuera de la pantalla por la izquierda */
    #sidebar-wrapper,
    #sidebar-wrapper.collapsed {
        width: 70%; /* puedes ajustar: 260px o 70% como prefieras */
        height: calc(100vh - 68px);
        position: fixed;
        top: 68px; /* debajo de la navbar fija */
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1050;
    }

        /* Clase que indica "sidebar abierto" en móvil */
        #sidebar-wrapper.sidebar-open {
            transform: translateX(0);
        }

        /* El botón redondo de flecha no tiene sentido en móvil, lo ocultamos */
        #sidebar-wrapper .toogle {
            display: none;
        }

        /* Mostramos los textos de los items */
        #sidebar-wrapper.collapsed .menu-text {
            display: inline-block;
        }

    /* Asegurar que el contenido ocupe todo el ancho */
    #page-content-wrapper {
        margin-left: 0px !important;
        padding-left: 0px !important;
    }

        /* Quitar el padding-left del container interno sólo en móvil, ya que no tenemos el sidebar */
        #page-content-wrapper > .container-fluid {
            padding-left: 5px !important;
        }

    /* Overlay oscuro cuando el menú está abierto */
    #sidebar-overlay {
        display: none;
        position: fixed;
        top: 68px;
        left: 0;
        width: 100%;
        height: calc(100vh - 68px);
        background: rgba(0, 0, 0, 0.4);
        z-index: 1040;
    }

        #sidebar-overlay.visible {
            display: block;
        }

    /* --- FIX FOOTER: evitar que provoque desbordamiento horizontal. Pasaba que el texto sobresalía del tamaño de la ventana. --- */

    /* El footer nunca debe ser más ancho que la ventana */
    footer.border-top.footer.text-muted {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

        /* La .container del footer tampoco puede ser más ancha que el viewport */
        footer.border-top.footer.text-muted .container {
            width: 100%;
            max-width: 100%;
            padding-left: 8px;
            padding-right: 8px;
            white-space: nowrap; /* no se parte en varias líneas */
            overflow: hidden; /* lo que sobre, se oculta */
            text-overflow: ellipsis; /* muestra "..." al final si no cabe */
        }

    /* Oculto el panel lateral del resumen en la vista móvil*/
    #resumen-cliente {
        display: none !important;
    }
}
/* ------------------------------------------------------------------------------------------------ */


/* Estilos para el contador parpadeante en el numericbox de minutos al crear tarea */
/* Aplicado al wrapper del NumericTextBox */
.k-numerictextbox.contador-activo-minutos {
    box-shadow: 0 0 0.25rem var(--wc-violeta-100, #E2CDFF) !important;
}

    /* Efecto sobre el input interno (según versión: k-input-inner o k-input) */
    .k-numerictextbox.contador-activo-minutos .k-input-inner,
    .k-numerictextbox.contador-activo-minutos .k-input {
        animation: parpadeo-minutos 1s infinite; /* le decimos que use la animación llamada parpadeo-minutos, que dura 1s y se repite infinite veces. */
        background-color: var(--wc-violeta-100, #E2CDFF);
    }

/* define una animación CSS con ese nombre.*/
@keyframes parpadeo-minutos {
    /*al comienzo y al final del ciclo la animación pone el fondo en #e9f7ef (verde clarito).*/
    0%, 100% {
        background-color: var(--wc-violeta-100, #E2CDFF);
    }

    /*a mitad del ciclo lo pone en #ffffff (blanco).*/
    50% {
        background-color: #ffffff;
    }
}