/* todo
    @author: Carlos Amarilla
    @date: 2025-10-05
    @description: Codigo css para hacer responsive los bloques del dom
*/

:root{
    color-scheme: dark;
    --color-asfalto : #263238;
    --color-azul: #3498DB;
    --color-rojo: #E74C3C;
    --color-purpura: #8E44AD;
    --color-azure: #1de9b6;
    --color-verde : #00c853;
    --fuente-normal : 1em !important;
}

.modal{
    padding: 1%;
}

.item_tooltip, .ui-tooltip{
    background-color: #333;       /* fondo oscuro */
    color: #fff;                  /* texto blanco */
    font-size: 14px;              /* tamaño de fuente */
    font-weight: bold;            /* texto en negrita */
    border-radius: 6px;           /* bordes redondeados */
    padding: 8px 12px;            /* espacio interno */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* sombra */
}

/* Contenedor principal del select */
.select2-selection {
    height: 1% !important;
    padding: 1% !important;
    font-size: var(--fuente-normal);
    border-radius: 4px !important;
}

/* Texto seleccionado */
.select2-selection__rendered {
    padding-left: 1% !important;
    font-size: var(--fuente-normal);
    font-weight: bold;
}

/* Flecha */
.select2-selection__arrow {
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Opciones del dropdown */
.select2-results__option {
    padding: 1% 2% !important;
    font-size: var(--fuente-normal);
}

/* Select múltiple */
.select2-selection--multiple {
    padding: 2% !important;
}

/* Tags en select múltiple */
.select2-selection__choice {
    padding: 1% 2% !important;
    font-size: var(--fuente-normal);
}

.btnBlue:hover, .btnBlue:active, .btnBlue:focus {
    background: var(--color-azul);
    color: var(--color-asfalto);
}

.btnPurple:hover, .btnPurple:active, .btnPurple:focus {
    background: var(--color-purpura);
    color: var(--color-asfalto);
}

.btnRed:hover, .btnRed:active, .btnRed:focus {
    background: var(--color-rojo);
    color: var(--color-asfalto);
}

.btnAzure:hover, .btnAzure:active, .btnAzure:focus {
    background: var(--color-azure);
    color: var(--color-asfalto);
}