/* --------------------------------------------------------------------------------------

Estilos:        xForm
Descripción:    Estilos para aplicaciones web
Versión:        3.4
Última edición: 2024-11-11

-------------------------------------------------------------------------------------- */




@font-face {
    font-family: freestyle;
    src: url(../font/demca/FREESCPT.TTF);
}
@font-face {
    font-family: abadi;
    src: url(../font/demca/abadi-mt.ttf);
}

@font-face {
    font-family: textoB;
    src: url(../font/LTWave-Bold.ttf);
}
@font-face {
    font-family: textoR;
    src: url(../font/LTWave-Regular.ttf);
}
@font-face {
    font-family: textoL;
    src: url(../font/LTWave-Light.ttf);
}




/*
variables: colores
*/
:root
{
    /* ---------- Colores Demca ---------- */
    --cl-pri0: #154b90;
    --cl-pri1: #2f61a1;
    --cl-pri2: #749acc;
    --cl-pri25: #85c1e9;
    --cl-pri3: #D6EAF8;
    --cl-pri4: #ebf5fb;
    --cl-negro1: #151515;
    --cl-negro2: #424242;
    --cl-gris1: #656870;
    --cl-gris2: #a4aeb9;
    --cl-gris3: #d9dadb;
    --cl-gris4: #eaecee;
    --cl-blanco: #FAFAFA;
    /* --- */
    /* --cl-cubierta-fondo: rgba(0, 0, 0, 0.6); */
    /* --cl-cubierta-fondo: rgba(214, 234, 248, 0.5); */
    --cl-cubierta-fondo: rgba(250, 250, 250, 0.3);
    /* --- */
    --cl-error: #dc3545;
    --cl-ok: #01DFA5;
    --cl-cuidado: #ffc107;
    --cl-info: #0dcaf0;
    /* --- */
    --cl-popup-ok: #1abc9c;
    --cl-popup-error: #cd6155;
    --cl-popup-info: #3498db;
    --cl-porup-cuidado: #f1c40f;
    /* --- */
    --md-texto: 1rem;
    /* aspect-ratio: 16 / 9; // Ancho  */
    /* mix-blend-mode: difference; // color diferente de su base */
}




/*
Área de reset básico - estilos por defecto
*/
* {
    font-family: textoR; font-size: var(--md-texto); margin: 0; padding: 0;
    color: var(--cl-negro2); box-sizing: border-box;
}
input{-webkit-appearance: none; -moz-appearance: none; appearance: none;}




#sub-body
{
    position: absolute; top: 0; left: 0; width: 100%; min-width: 360px;
    max-width: 1920px; min-height: 100%; display: flex; flex-direction: column;
}

.enCentro {justify-content: center; align-items: center;}




/*
Contenedores: para label-input o label-textarea
*/
.contput-flex {display: flex; align-items: center; gap: 5px;}
.contputA-flex {display: flex; gap: 5px;} /* no alinea en vertical (uso con textarea) */
.contput-block {display: flex; flex-direction: column; gap: 3px;}

/* 
Herramienta para busquedas
*/
.contbus-flex {display: flex; align-items: center; gap: 5px; position: relative; width: 300px;}
.contbus-flex > svg {fill: var(--cl-pri1); width: 16px; height: 16px;}
.contbus-flex .icono-busqueda {position: absolute; left: 5px;}
.contbus-flex input {padding-inline: 22px; width: calc(100% - 23px);}
.contbus-flex button:nth-of-type(1) {position: absolute; right: 27px;}

.verBorde {border: solid 1px var(--cl-gris2);}
.verFondo {background-color: var(--cl-pri3);}

/* 
Posición de contenedores
*/
.posicionR {position: relative;}
.posicionA {position: absolute;}




/* ----------------------------------------------------------------------------
z-index en uso:
Menú desplegable:                   100.000.000
Contenedor notificaciones:           99.500.000
Formulario login:                    99.000.000     // main-app
Formulario Cambio contra:            98.999.900     // main-app
Contenedor menú apps:                98.500.000     // main-app
Imagen de fondo:                           -100
---------------------------------------------------------------------------- */




/* 
No mostrar
*/
div[display="off"] {display: none;}
section[display="off"] {display: none;}
svg[display="off"] {display: none;}
button[display="off"] {display: none;}
input[display="off"] {display: none;}
label[display="off"] {display: none;}
div[blur="on"] {filter: blur(3px); transform: scale(0.9); opacity: 5;}
main[blur="on"] {filter: blur(3px); transform: scale(0.9); opacity: 5;}




/* 
Transisiones
*/
.transicion-1s {transition: 1s;}
.transicion-03s {transition: .3s;}
.transicion-05s {transition: .5s;}



/* 
Colores del proyecto
*/
.cl-texto-pri0 {color: var(--cl-pri0);}
.cl-texto-pri1 {color: var(--cl-pri1);}
.cl-texto-pri2 {color: var(--cl-pri2);}
.cl-texto-pri3 {color: var(--cl-pri3);}
.cl-texto-error {color: var(--cl-error);}
.cl-texto-cuidado {color: var(--cl-cuidado);}
.cl-texto-info {color: var(--cl-info);}
.cl-texto-ok {color: var(--cl-ok);}
.cl-texto-block {color: var(--cl-gris2);}

.cl-fill-pri0 {fill: var(--cl-pri0);}
.cl-fill-pri1 {fill: var(--cl-pri1);}
.cl-fill-pri2 {fill: var(--cl-pri2);}
.cl-fill-pri3 {fill: var(--cl-pri3);}
.cl-fill-error {fill: var(--cl-error);}
.cl-fill-cuidado {fill: var(--cl-cuidado);}
.cl-fill-info {fill: var(--cl-info);}
.cl-fill-ok {fill: var(--cl-ok);}
.cl-fill-block {fill: var(--cl-gris2);}

.cl-fondo-pri0 {background-color: var(--cl-pri0);}
.cl-fondo-pri1 {background-color: var(--cl-pri1);}
.cl-fondo-pri2 {background-color: var(--cl-pri2);}
.cl-fondo-pri3 {background-color: var(--cl-pri3);}
.cl-fondo-error {background-color: var(--cl-error);}
.cl-fondo-cuidado {background-color: var(--cl-cuidado);}
.cl-fondo-info {background-color: var(--cl-info);}
.cl-fondo-ok {background-color: var(--cl-ok);}
.cl-fondo-block {background-color: var(--cl-gris2);}





/* 
Estilos para texto
*/
h1 {font-size: 2.1rem; font-family: textoB;}
h2 {font-size: 1.8rem; font-family: textoB;}
h3 {font-size: 1.6rem; font-family: textoB;}
.titulo-xform {font-family: textoB; font-size: 1.3rem;}
.textoBold {font-family: textoB;}
.textoLight {font-family: textoL;}
.labelText {font-size: var(--md-texto); font-family: textoB;}
.texto-logo
{
    font-family: abadi; font-size: 13px; font-weight: bold; color: var(--cl-pri0);
    span {font-family: freestyle; font-weight: 100; font-size: 22px; color: var(--cl-pri1);}
}
.textoFreestyle {font-size: 18px; font-weight: bold; font-family: freestyle;}
.textoDesbordado {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.tIzq {text-align: left;}               /* Texto alineado a la izquierda */
.tCen {text-align: center;}             /* Texto alineado al centro */
.tDer {text-align: right;}              /* Texto alineado a la derecha */
.tJus {text-align: justify;}            /* Texto justificado */
.fIzq {justify-content: flex-start;}
.fCen {justify-content: center;}
.fDer {justify-content: flex-end;}





/*
Campos: inputs, selects, textareas
*/
.camput
{
    border: solid 1.5px var(--cl-pri2);                     /* Tipo y color de borde */
    border-radius: 2px;                                     /* Angulo en equinas */
    padding: 1px 3px;                                       /* Espacio entre borde y texto */
    background-color: var(--cl-blanco);                     /* Color de fondo */
    color: var(--cl-negro2);                                 /* Color del texto */
    transition: 0.3s;                                       /* Duración de transisión */
    font-family: textoL;
    font-size: var(--md-texto);
}
.cambus {padding: 1px 3px 1px 27px; width: 100%;}
.camput:hover{border: solid 1.5px var(--cl-pri2);}
.camput:focus
{
    outline: none;
    border: solid 1.5px var(--cl-pri2);
    background-color: var(--cl-pri3);
}
.camput:disabled {border: solid 1.5px var(--cl-gris2);}





.texto-editable-1
{
    border: solid 1px transparent; background-color: transparent; border-radius: 3px;
    transition: .3s; padding-inline: 3px; font-family: textoL;
}
.texto-editable-2
{
    border: solid 1px transparent; background-color: transparent; border-radius: 3px;
    padding-inline: 3px; min-height: 22px; overflow: hidden;
    resize: none; height: 22px; max-height: max-content; font-family: textoL;
}
.texto-editable-1:hover, .texto-editable-2:hover {border: solid 1px var(--cl-gris3);}
.texto-editable-1:focus, .texto-editable-2:focus {outline: none; border: solid 1px var(--cl-pri2);}





/*
Checkbox: Casillas de verificación con chulo (input: bool)
Selección de una o varias opciones
*/
.checkput
{
    background-color: var(--cl-blanco);
    accent-color: var(--cl-pri2);
    border: 1.5px solid var(--cl-pri2);
    width: 18px;
    height: 18px;
    border-radius: 2px;
    display: flex;
    cursor: pointer;
}
.checkput:hover {border: 1.5px solid var(--cl-pri2);}
.checkput:focus {outline: none; border: 1.5px solid var(--cl-pri2);}
.checkput::before
{
    content: "";
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    width: 12px;
    height: 12px;
    margin: auto;
    transform: scale(0);
    transition: 0.3s transform ease-in-out;
    background-color: var(--cl-pri2);
}
.checkput:checked
{
    border: 1.5px solid var(--cl-pri2);
    background-color: var(--cl-pri3);
}
.checkput:checked::before {transform: scale(1);}
.checkput:disabled
{
    border: solid 1px var(--cl_gris2);
    background-color: var(--cl-blanco);
}
.checkput:disabled::before {background-color: var(--cl-gris2);}





/*
Radius: Selector de opciones (input: bool)
Selector una de entre varias opciones
*/
.radioput
{
    background-color: var(--cl-blanco);
    border: solid 1.5px var(--cl-pri2);
    width: 19px;
    height: 19px;
    border-radius: 50%;
    accent-color: var(--cl-pri2);
    display: flex;
    cursor: pointer;
}
.radioput:hover {border: solid 1.5px var(--cl-pri2);}
.radioput:focus {outline: none; border: solid 1.5px var(--cl-pri2);}
.radioput::before
{
    content: "";
    margin: auto;
    width: 11px;
    height: 11px;
    background-color: var(--cl-pri2);
    border-radius: 50%;
    transform: scale(0);
    transition: 0.3s transform ease-in-out;
}
.radioput:checked::before {transform: scale(1);}
.radioput:checked
{
    border: solid 1.5px var(--cl-pri2);
    background-color: var(--cl-pri3);
}
.radioput:disabled
{
    border: solid 1.5px var(--cl-gris2);
    background-color: var(--cl-blanco);
}
.radioput:disabled::before {background-color: var(--cl-gris2);}




/*
Suiche: input: bool
Habilitar o deshabilitar algo
*/
.suitput
{
    background-color: var(--cl-blanco);
    border: solid 1.5px var(--cl-pri2);
    width: 34px;
    height: 19px;
    border-radius: 10px;
    display: flex; align-items: center;
    padding-inline: 1.5px;
    cursor: pointer;
}
.suitput:hover {border: solid 1.5px var(--cl-pri2);}
.suitput:focus {outline: none; border: solid 1.5px var(--cl-pri2);}
.suitput::before
{
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--cl-pri2);
    transition: 1.5s transform ease-in-out;
}
.suitput:hover::before {background-color: var(--cl-pri2);}
.suitput:checked::before
{
    background-color: var(--cl-pri2);
    margin-left: auto;
}
.suitput:checked
{
    border: solid 1.5px var(--cl-pri2);
    background-color: var(--cl-pri3);
}
.suitput:disabled
{
    border: solid 1.5px var(--cl-gris2);
    background-color: var(--cl-blanco);
}
.suitput:disabled::before {background-color: var(--cl-gris2);}




/*
Botones: Boton común
Se puede acompañar de una imagen SVG
*/
.btn
{
    border: solid 1.5px var(--cl-pri1);
    border-radius: 3px;
    background-color: var(--cl-pri1);
    color: var(--cl-blanco);
    transition: 0.3s;
    padding: 2px 5px;
    font-family: textoB;
    cursor: pointer;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    font-size: var(--md-texto);
    text-decoration: none;
}
.btn > svg {fill: var(--cl-blanco); width: 18px; height: 18px;}
.btn:hover
{
    border: solid 1.5px var(--cl-pri2);
    background-color: var(--cl-pri2);
}
.btn:focus
{
    outline: none;
    border: solid 1.5px var(--cl-pri2);
    background-color: var(--cl-pri2);
}
.btn:active {background-color: var(--cl-pri3);}
.btn:disabled
{
    border: solid 1.5px var(--cl-gris2);
    background-color: var(--cl-gris2);
    color: var(--cl-negro2);
}
.btn:disabled svg {fill: var(--cl-gris2);}




/*
Botones: Boton común
Se puede acompañar de una imagen SVG
*/
.btn-label
{
    border: solid 1.5px var(--cl-pri1);
    border-radius: 3px;
    background-color: var(--cl-pri1);
    color: var(--cl-blanco);
    transition: 0.3s;
    padding: 2px 5px;
    font-family: textoB;
    cursor: pointer;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    font-size: var(--md-texto);
}
.btn-label > svg {fill: var(--cl-blanco); width: 18px; height: 18px;}
.btn-label:hover
{
    border: solid 1.5px var(--cl-pri2);
    background-color: var(--cl-pri2);
}
.btn-label:focus
{
    outline: none;
    border: solid 1.5px var(--cl-pri2);
    background-color: var(--cl-pri2);
}
.btn-label:active {background-color: var(--cl-pri3);}
.btn-label:disabled
{
    border: solid 1.5px var(--cl-gris2);
    background-color: var(--cl-gris2);
    color: var(--cl-negro2);
}
.btn-label:disabled svg {fill: var(--cl-gris2);}




/*
Boton sin relleno
Sirve para listas
*/
.btn-null
{
    border: none;
    border-radius: 25%;
    background-color: transparent;
    transition: 0.3s;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: var(--cl-pri1);
}
.btn-null > svg {fill: var(--cl-pri1);}
.btn-null:hover, .btn-null:focus {outline: none; transform: scale(1.1);}
.icono-p {width: 18px; height: 18px;}
.icono-m {width: 24px; height: 24px;}
.icono-g {width: 28px; height: 28px;}
.icono-mg {width: 32px; height: 32px;}
/* .icono-p:hover, .icono-m:hover, .icono-g:hover, .icono-mg:hover
{
    fill: var(--cl-pri2); transform: scale(1.1);
} */




.btn-null1
{
    border: none;
    border-radius: 3px;
    background-color: var(--cl-pri1);
    transition: 0.3s;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: var(--cl-blanco);
}
.btn-null1 > svg {fill: var(--cl-blanco);}
.btn-null1:hover, .btn-null1:focus {outline: none; transform: scale(1.1);}




/* Enlaces - Links */
.enlace-texto
{
    text-decoration: none; color: var(--cl-pri1); font-family: textoR;
}
.enlace-texto:hover {color: var(--cl-pri2); transform: scale(1.1);}

.enlace-null
{
    transition: 0.3s; padding: 0; cursor: pointer; display: flex;
    justify-content: center; align-items: center; text-decoration: none;
}




/*
Boton cerrar
Sirve para cerrar y otras acciones
*/
.btn-x
{
    border: none;
    border-radius: 50%;
    background-color: transparent;
    transition: 0.3s;
    padding: 2px;
    transition: 0.5s;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-x > svg {fill: var(--cl-pri1); width: 18px; height: 18px;}
.btn-x:hover svg {transform: scale(1.2); fill: var(--cl-pri2);}





/*
Lineas: linea horizontal y vertical de 1 y 2 pixeles de ancho
H: horizontal, V: vertical
*/
.lineaH {height: 1px; background-color: var(--cl-gris2);}
.lineaV {width: 1px; background-color: var(--cl-gris2);}
.lineaH2 {height: 2px; background-color: var(--cl-gris2);}
.lineaV2 {width: 2px; background-color: var(--cl-gris2);}





/*
Ancho en pixeles
w: width
*/
.wMcont {width: max-content;} /* Ancho según su contenido */
.w5 {width: 5px;} .w10 {width: 10px;} .w15 {width: 15px;}
.w20 {width: 20px;} .w25 {width: 25px;} .w30 {width: 30px;}
.w35 {width: 35px;} .w40 {width: 40px;} .w45 {width: 45px;}
.w50 {width: 50px;} .w55 {width: 55px;} .w60 {width: 60px;}
.w65 {width: 65px;} .w70 {width: 70px;} .w75 {width: 75px;}
.w80 {width: 80px;} .w85 {width: 85px;} .w90 {width: 90px;}
.w95 {width: 95px;} .w100 {width: 100px;} .w105 {width: 105px;}
.w110 {width: 110px;} .w115 {width: 115px;} .w120 {width: 120px;}
.w125 {width: 125px;} .w130 {width: 130px;} .w135 {width: 135px;}
.w140 {width: 140px;} .w145 {width: 145px;}
.w150 {width: 150px;} .w180 {width: 180px;} .w200 {width: 200px;}
.w225 {width: 225px;} .w250 {width: 250px;} .w280 {width: 280px;}
.w300 {width: 300px;} .w340 {width: 340px;}

/*
Ancho en porcentajes
w: width, p: porcentaje
*/
.ttareawp100 {min-width: 100%; width: 100%; max-width: 100%;}
.wp5 {width: 5%;} .wp10 {width: 10%;} .wp15 {width: 15%;}
.wp20 {width: 20%;} .wp25 {width: 25%;} .wp30 {width: 30%;}
.wp35 {width: 35%;} .wp40 {width: 40%;} .wp45 {width: 45%;}
.wp50 {width: 50%;} .wp55 {width: 55%;} .wp60 {width: 60%;}
.wp65 {width: 65%;} .wp70 {width: 70%;} .wp75 {width: 75%;}
.wp80 {width: 80%;} .wp85 {width: 85%;} .wp90 {width: 90%;}
.wp95 {width: 95%;} .wp100 {width: 100%;}

/*
Separaciones (Espacio en blanco)
V: vertical, H: horizontal, T:top, B:botton, L:left, R:rigth
*/
.sepVBA {margin-bottom: auto;} .sepVTA {margin-top: auto;}
.sepVB5 {margin-bottom: 5px;} .sepVT5 {margin-top: 5px;}
.sepVB10 {margin-bottom: 10px;} .sepVT10 {margin-top: 10px;}
.sepVB15 {margin-bottom: 15px;} .sepVT15 {margin-top: 15px;}
.sepVB20 {margin-bottom: 20px;} .sepVT20 {margin-top: 20px;}
.sepHLA {margin-left: auto;} .sepHRA {margin-right: auto;}
.sepHL5 {margin-left: 5px;} .sepHR5 {margin-right: 5px;}
.sepHL10 {margin-left: 10px;} .sepHR10 {margin-right: 10px;}
.sepHL15 {margin-left: 15px;} .sepHR15 {margin-right: 15px;}
.sepHL20 {margin-left: 20px;} .sepHR20 {margin-right: 20px;}

/*
Separación de contenedores flex
*/
.gap2 {gap: 2px;} .gap3 {gap: 3px;} .gap5 {gap: 5px;} .gap10 {gap: 10px;}

/*
Border Radius
*/
.borR1 {border-radius: 1px;} .borR2 {border-radius: 2px;} .borR3 {border-radius: 3px;}





/*
Ubucación absoluta en esquina: Top, Left y Right
T:top, B:botton, L:left, R:rigth
*/
.uAbsoluteTL0 {position: absolute; top: 0; left: 0;} .uAbsoluteTR0 {position: absolute; top: 0; right: 0;}
.uAbsoluteTL5 {position: absolute; top: 5px; left: 5px;} .uAbsoluteTR5 {position: absolute; top: 5px; right: 5px;}
.uAbsoluteTL10 {position: absolute; top: 10px; left: 10px;} .uAbsoluteTR10 {position: absolute; top: 10px; right: 10px;}
.uAbsoluteTL15 {position: absolute; top: 15px; left: 15px;} .uAbsoluteTR15 {position: absolute; top: 15px; right: 15px;}
.uAbsoluteTL20 {position: absolute; top: 20px; left: 20px;} .uAbsoluteTR20 {position: absolute; top: 20px; right: 20px;}
.uAbsoluteBL0 {position: absolute; bottom: 0; left: 0;} .uAbsoluteBR0 {position: absolute; bottom: 0; right: 0;}
.uAbsoluteBL5 {position: absolute; bottom: 5px; left: 5px;} .uAbsoluteBR5 {position: absolute; bottom: 5px; right: 5px;}
.uAbsoluteBL10 {position: absolute; bottom: 10px; left: 10px;} .uAbsoluteBR10 {position: absolute; bottom: 10px; right: 10px;}
.uAbsoluteBL15 {position: absolute; bottom: 15px; left: 15px;} .uAbsoluteBR15 {position: absolute; bottom: 15px; right: 15px;}
.uAbsoluteBL20 {position: absolute; bottom: 20px; left: 20px;} .uAbsoluteBR20 {position: absolute; bottom: 20px; right: 20px;}




/* ========================================================================= */

.cubierta_fondo
{
    display: flex; justify-content: center; align-items: center; position: absolute;
    left: 0; top: 0; width: 100%; height: 100%; background-color: var(--cl-cubierta-fondo);
    overflow-y: auto;
}

@media screen and (min-width: 480px) {
    .cubierta_fondo {min-height: 680px;}
}

/* Contenedor para notificaciones */
.cont-notificacion
{
    display: flex; gap: 10px; padding: 5px; border: solid 1px var(--cl-gris1);
    border-radius: 3px; background-color: var(--cl-blanco); width: 320px;
    box-shadow: 0 0 2px 3px var(--cl-gris3); position: absolute; top: 50px;
    right: -320px; animation: popup_animacion 12s ease 0s 1 normal forwards;
    z-index: 99500000;
}

@keyframes popup_animacion {
    0%    {right: -320px;}
    5%      {right: 15px;}
    95%     {right: 15px;}
    100%    {right: -320px;}
}

/* Contenedor para preguntas */
.cont-pregunta
{
    display: flex; gap: 5px; padding: 5px; border: solid 1px var(--cl-gris1);
    border-radius: 3px; flex-direction: column; background-color: var(--cl-blanco);
    width: 320px; box-shadow: 0 0 2px 3px var(--cl-gris3); position: absolute;
    left: calc(50% - 160px); top: 30%; z-index: 99500000;
}

/* Contenedor para informe subida */
.cont-subida
{
    display: flex; gap: 5px; padding: 5px; border: solid 1px var(--cl-gris1);
    border-radius: 3px; flex-direction: column; background-color: var(--cl-blanco);
    width: 320px; box-shadow: 0 0 2px 3px var(--cl-gris3); position: absolute;
    right: -320px; top: 50px; z-index: 99500000;
    animation: popup_subida_on 1s ease 0s 1 normal forwards;
}

@keyframes popup_subida_on {
    from    {right: -320px;}
    to      {right: 15px;}
}

/* ------------------------------------------------------------------------- */

/* Tamaño para el icono de una notificación */
.icono-notificacion {width: 36px; height: 36px;}

/* Colores para personalizar notificaciones */
.icono-noti-ok {fill: var(--cl-popup-ok);}
.icono-noti-er {fill: var(--cl-popup-error);}
.icono-noti-in {fill: var(--cl-popup-info);}
.icono-noti-cu {fill: var(--cl-porup-cuidado);}
.icono-noti-pr {fill: var(--cl-pri1);}

/* ------------------------------------------------------------------------- */

/* Estructura párrafos en una notificación */
.lista-parrafos-noti {display: flex; flex-direction: column; gap: 5px; width: 248px;}

/* Estructura párrafos en una pregunta */
.lista-parrafos-preg
{
    display: flex; flex-direction: column; gap: 5px; width: 100%; padding-inline: 5px;
}

.cont-cuerpo-subida {display: flex; gap: 7px;}

/* Estilo para los párrafos */
.lista-parrafos-noti p, .lista-parrafos-preg p, .cont-cuerpo-subida p, span
{font-family: textoL; font-size: 16px;}

/* ------------------------------------------------------------------------- */

/* Estilos para el boton que cierra las notificaciones */
.btn-cerrar-notificacion
{
    background-color: transparent; border: none; width: 18px; height: 18px;
    display: flex; justify-content: center; align-items: center; cursor: pointer;
}
.btn-cerrar-notificacion > svg {width: 18px; height: 18px;}
.btn-cerrar-notificacion:hover svg {transform: scale(1.3);}

/* ------------------------------------------------------------------------- */

/* Estructura para la lista de botones en una pregunta */
.cont-lista-btn-noti {display: flex; gap: 5px; margin-top: 7px;}
.cont-lista-btn-noti button {width: calc(50% - 2.5px);}

/* ========================================================================= */




/* 
Estilos para animación Loader
*/
#base_loader {
    display: flex; justify-content: center; align-items: center;
    position: fixed; left: calc(50% - 8.75px); top: 50%;
}
.loader, .loader:before, .loader:after {
    border-radius: 50%; width: 2.5em; height: 2.5em; animation-fill-mode: both;
    animation: bblFadInOut 1.8s infinite ease-in-out;
}        
.loader {
    color: var(--cl-pri1); font-size: 7px; position: relative;
    text-indent: -9999em; transform: translateZ(0); animation-delay: -0.16s;
}        
.loader:before, .loader:after {content: ''; position: absolute; top: 0;}        
.loader:before {left: -3.5em; animation-delay: -0.32s;}        
.loader:after {left: 3.5em;}          
@keyframes bblFadInOut {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
    40% { box-shadow: 0 2.5em 0 0 }
}

/* --- Fin: Estilos Loader --- */




/*
Script: ZoomIMG
Estilos visor de imagen ampliada o hacer zoom a una imagen
*/
#cont-img_zoom
{
    width: 100%; height: 100%; position: fixed; top: 0; left: 0; min-height: 600px;
    background-color: black; display: flex; justify-content: center; align-items: center;
    overflow: auto;
}

/* Imagen dentro del contenedor */
#cont-img_zoom > img {height: 100%;}

/* --- Fin: Estilos ZoomIMG --- */




/* --- Estilo tablas --- */

/* ........................................................
#id_tabla {ajustar ancho}
#id_tabla tbody {ajustar altura}
........................................................ */

/* table {overflow-x: auto; display: flex; flex-direction: column;} */

/* ------------------------------------------------------------------------- */

/* thead {width: max-content;}

tr {display: flex; width: max-content;}

thead tr {overflow-y: hidden;}

table thead tr th
{
    background-color: var(--cl-blanco); position: relative;
    font-size: var(--md-texto);
    &.resizing {
        & > div {
            border-right: solid 1px var(--cl-pri2);
        }
    }
    .grip {
        content: ' '; position: absolute; top: 0; bottom: 0; right: 0;
        cursor: col-resize; width: 8px; cursor: col-resize;
    }
} */

/* ------------------------------------------------------------------------- */

/* tbody {width: max-content; overflow-y: auto; background-color: #fff;}

table tbody tr:hover {background-color: var(--cl-pri3);} */

/* ------------------------------------------------------------------------- */

/* th {border: solid 1px var(--cl-gris3); padding: 5px 5px 2px 5px;}
td {border: solid 1px var(--cl-gris3); padding: 2px 5px; font-size: var(--md-texto);} */

/* ------------------------------------------------------------------------- */

/* td .td-input-text
{
    background-color: transparent; border: none; width: 100%;
}
td .td-input-text:focus {outline: none;} */

/* --- Fin: Estilos Tabla --- */



/* ========================================================================= */

/* Contenedor del menú desplagable */
.cont-menu-desp {position: relative; width: max-content; height: max-content;}

/* ------------------------------------------------------------------------- */

/* Contenedor lista de items */
.menu-desp
{
    position: absolute; width: max-content; max-width: 340px; min-width: 200px;
    padding: 0 5px; background-color: var(--cl-blanco); border: solid 1px var(--cl-gris3);
    border-radius: 3px; display: flex; flex-direction: column; z-index: 100000000;
}

/* ------------------------------------------------------------------------- */

/* Item */
.menu-desp-item {/* padding: 5px; */ display: flex; padding-block: 5px; border-top: solid 1px var(--cl-gris3);}

/* Para los textos comunes */
.menu-desp-item > p {/* padding-inline: 5px; */ padding: 0; font-size: var(--md-texto);}

/* Para los suitput y los checkput */
.menu-desp-item > div {width: 100%; justify-content: space-between; padding-inline: 5px;}

/* Para los botones */
.menu-desp-item > button, .menu-desp-item > .label-input-file
{
    border: transparent; border-radius: 3px; background-color: transparent;
    color: var(--cl-negro2); transition: 0.3s; padding: 0 5px; font-family: textoR;
    cursor: pointer; width: 100%; text-align: left; font-size: var(--md-texto);
}
.menu-desp-item > button:hover, .menu-desp-item > .label-input-file:hover {background-color: var(--cl-pri3);}
.menu-desp-item > button:focus, .menu-desp-item > .label-input-file:focus {outline: none; background-color: var(--cl-pri3);}

/* ------------------------------------------------------------------------- */

/* Quitar borde al primer item */
.menu-desp > div:nth-of-type(1) {border-color: transparent; padding-inline: 32px; justify-content: center;}

/* ------------------------------------------------------------------------- */

/* Posición del contenedor de lista de items */
.uMenu-despBR-5 {position: absolute; top: calc(100% + 6px); right: -5px;}
.uMenu-despBR0 {position: absolute; top: calc(100% + 13px); right: 0px;}

/* ========================================================================= */





/* ------------------------------------------------------------------------- */
/* Menú desplegable x */

.cont-menu-x
{
    position: absolute; width: 250px; padding: 5px; border-radius: 3px;
    background-color: var(--cl-blanco); border: solid 1px var(--cl-gris2);
    gap: 5px;
}
.cont-menu-x div {display: flex; flex-direction: column; position: relative;}
.cont-menu-x div p {border-bottom: solid 1px var(--cl-gris3); padding-bottom: 4px;}
.cont-menu-x div .btn-menu-desp-2
{
    background-color: transparent; border: none; cursor: pointer; text-align: left;
    font-family: textoL; padding: 2px 5px;
}
.cont-menu-x div .btn-menu-desp-2:hover {background-color: var(--cl-pri3);}

/* ------------------------------------------------------------------------- */





/* ------------------------------------------------------------------------- */
/* Herramienta para firma digital */

.cont-area-firma    /* Está dentro de una cubierta */
{
    width: 350px; position: absolute; height: max-content; /* left: calc(50% - 175px); */
    border: solid 1px var(--cl-gris2); background-color: 000; border-radius: 3px;
    /* top: 5px; */ padding: 5px 4px; display: flex; flex-direction: column;
    gap: 5px; background-color: var(--cl-blanco);
}
.cont-area-firma > p:nth-of-type(1) {font-size: 20px;}
.cont-area-firma > div {display: flex; gap: 15px; align-items: center; padding-left: 12px;}
.canvas-firma {border: solid 1px var(--cl-gris3); border-radius: 3px;}
/* ------------------------------------------------------------------------- */




/* 
Ajustes para pantallas con achura mayor a 1024px
*/

@media screen and (min-width: 1024px) {
    :root {
        --md-texto: 1rem;
    }
    /* ----- */
    /* .contbus-flex > svg {width: 13px; height: 13px; top: calc(50% - 6.5px);} */
    /* --- Textos --- */
    h1 {font-size: 2rem; font-family: textoB;}
    h2 {font-size: 1.7rem; font-family: textoB;}
    h3 {font-size: 1.5rem; font-family: textoB;}
    .titulo-xform {font-size: 1.4rem;}
    /* ----- */
    .cambus {padding: 1px 3px 1px 22px;}
    /* ----- */
    .checkput {width: 15px; height: 15px;}
    .checkput::before {width: 11px; height: 11px;}
    /* ----- */
    .radioput {width: 16px; height: 16px;}
    .radioput::before {width: 7.5px; height:7.5px;}
    /* ----- */
    .suitput {
        width: 25px; height: 16px; border-radius: 8px;
        padding-inline: 2px;
    }
    .suitput::before {width: 10px; height: 10px;}
    /* ----- */
    .btn {font-size: 1rem;}
    .btn > svg {width: 18px; height: 18px;}
    /* ----- */
    .icono-p > svg {width: 16px; height: 16px;}
    .icono-m > svg {width: 20px; height: 20px;}
    .icono-g > svg {width: 24px; height: 24px;}
    .icono-mg > svg {width: 28px; height: 28px;}
    /* ----- */
    .btn-x > svg {width: 18px; height: 18px;}
    /* ----- */
    #btn-usuario > svg {width: 18px; height: 18px;}
    /* ----- */
    .btnES1 > svg {width: 14px; height: 14px;}
    /* ----- */
    .icosvg {width: 13px; height: 13px;}
    /* --- */
    thead tr th svg {width: 18px; height: 18px;}
    /* --- */
    .noti-lista-parrafos {margin-top: 0px;}
}

/* 
Ajustes para pantallas con achura mayor a 1920px
*/
@media screen and (min-width: 1920px) {
    #sub-body {left: calc(50% - 960px); overflow: hidden;}    
}



/* Fin */