/* Cargar las fuentes desde un archivo TTF */
@font-face {
    font-family: 'Montserrat';
    src: url('./fuentes/Montserrat-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-little';
    src: url('./fuentes/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-bold';
    src: url('./fuentes/Montserrat-Bold.ttf') format('truetype');
}



html,
body {

    font-family: 'Montserrat';
    font-size: 14px;
    /* Tamaño base */
    overflow: hidden;
    /* Evita el scroll en la ventana principal */
}

* {
    scroll-behavior: smooth;
    /*scrollbar-color: #e6e6e6 #4d4d4d90;*/
    /*scrollbar-width: thin;*/
}



/* @media(prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;        
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
} */

:root {
    --moderate-blue: hsl(238, 40%, 52%);
    /* #5457b6 */
    --soft-red: hsl(358, 79%, 66%);
    /* #ED6468 */
    --light-grayish-blue: hsl(239, 57%, 85%);
    --dark-blue: hsl(212, 24%, 26%);
    /* #324152 */
    --grayish-blue: hsl(211, 10%, 45%);
    /* #67727E */
    --light-gray: hsl(223, 19%, 93%);
    --very-light-gray: hsl(228, 33%, 97%);
    --white: hsl(0, 0%, 100%);
    --white-pale: white;
    --indent-color: hsl(0, 0%, 83%);
    --overlay: rgba(0, 0, 0, 0.3);

    --selection-color: #153354;
    /* color por defecto del checkbox relleno */
    --selection-label-color: white;
    /* color por defecto del label del checkbox */
    --selection-label-font-family: 'Montserrat-little';
    --selection-label-font-size: 0.875rem;
    /* 14 px */
}

section {
    /* para la apariencia del checkbox en modales */
    /*--selection-color: #62256f;*/
    --selection-label-color: #153354;
    --selection-label-font-family: 'Montserrat';
    --selection-label-font-size: 1rem;
    /* 16 px */
}


.borde-interno:hover {
    box-shadow: inset 0 0 0 2px dimgray;
    /* Crea un 'borde' interno */
}

.borde-interno div[aria-haspopup="menu"] {
    width: 100% !important;
}


/* Otros */

.oculto {
    display: none;
}

.no-visible {
    visibility: hidden;
    /* Oculta el elemento pero mantiene el espacio */
}

.deshabilitado {
    pointer-events: none;
    opacity: 0.5;
}




/***************************************/
/* Apariencia checkbox y radio buttons */
/***************************************/

/* Dash 4.0 */
/* ---------------------------------------------------
   1. Estilos del Label (Contenedor del input + texto)
   --------------------------------------------------- */
.custom-radio-label {
    cursor: pointer;
    color: var(--selection-label-color);
    font-family: var(--selection-label-font-family);
}

/* Bloquear cualquier cambio de color automático al pasar el ratón o al seleccionar */
.custom-radio-label:hover,
.custom-radio-label * {
    transition: none !important;
}

/* ---------------------------------------------------
   2. Estilos del Input (El cuadrado exterior)
   --------------------------------------------------- */
.custom-radio-input[type="radio"] {
    /* Ocultar el círculo nativo */
    /* -webkit-appearance: none;
    -moz-appearance: none; */
    appearance: none;

    /* Tu diseño personalizado del borde */
    width: 1.265rem;
    height: 1.265rem;
    border: 0.0715rem solid var(--selection-color);
    border-radius: 0.143rem;
    background-color: #fff;

    /* Posicionamiento */
    cursor: pointer;
    position: relative;
    margin: 0;
    margin-right: 0.5rem;
    /* Separación entre el cuadrado y el texto */
    flex-shrink: 0;

    /* Mueve la caja hacia abajo (valores positivos) o hacia arriba (valores negativos) */
    transform: translateY(0.2rem);
}

/* ---------------------------------------------------
   3. Estado Activo (El cuadradito interior relleno)
   --------------------------------------------------- */
.custom-radio-input[type="radio"]:checked::after {
    content: '';
    position: absolute;

    /* Centrado perfecto dentro del borde */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Tu diseño personalizado del relleno */
    width: 0.72rem;
    height: 0.72rem;
    background-color: var(--selection-color);
    border-radius: 0.143rem;
}



/***************************************************/
/* Apariencia iconos laterales y de los documentos */
/***************************************************/

.action-icon-disabled {
    pointer-events: none;
    /* Evita que el botón sea clickeable */
    cursor: default;
}



/*********************************/
/* Apariencia icono cerrar modal */
/*********************************/

/* Eliminar color de fondo cuando se pasa el cursor */

img:hover {
    background-color: transparent !important;
}



/*******************/
/* Visor iframe ****/
/*******************/

/* Estilos para el iframe */
.pdf-iframe {
    flex-grow: 1;
    height: 100%;
    overflow: auto;
    border: none;
    /* Elimina el borde del iframe */
}


/* Estilos para el Drawer */
.agarre {
    position: absolute;
    display: flex;
    width: 15px;
    background: transparent;
    border-left: 3px solid #004778;
    left: 0;
    top: 0;
    bottom: 100vh;
    cursor: col-resize;
    z-index: 10000;
    opacity: 0.5;
}

.drag-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}



/*************************************************************/
/* Modal arrastrable (opacidad gestionada en modales_drag.js) */
/*************************************************************/

/* Cursor de arrastre en la cabecera del modal */
.mantine-Modal-header {
    cursor: grab;
    user-select: none;
}

.mantine-Modal-header:active {
    cursor: grabbing;
}