/* ============================================================================
Estructura básica de la plataforma
Versión: 1.0
2025-09-15
============================================================================ */



/* ------------------------------------------------------------------------- */
:root
{
    --cl-negro1:  #151515;
    --cl-negro2:  #424242;
    --cl-gris1:   #656870;
    --cl-gris2:   #a4aeb9;
    --cl-gris3:   #d9dadb;
    --cl-gris4:   #eaecee;
    --cl-blanco:  #FAFAFA;

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

    --cl-cubierta-fondo: rgba(250, 250, 250, 0.3);

    --zi-menu:      100000000;      /* Menú desplegable */
    --zi-popups:    99500000;       /* Contenedor notificaciones */
    --zi-login:     99000000;       /* Formulario login */
    --zi-c-contra:  98999900;       /* Formulario Cambio contra */
    --zi-menu-apps: 98500000;       /* Formulario Cambio contra */
    --zi-img-fondo: -100;           /* Imagen de fondo */
}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Fuentes */
@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);
}
@font-face {
    font-family: textoM;
    src: url(../font/LTWave-Mono.ttf);
}
.textoB {font-family: textoB;}
.textoR {font-family: textoR;}
.textoL {font-family: textoL;}
.textoM {font-family: textoM;}

/* Tamaños */
:root    {--tm-texto: 1rem;}
.tm-ft-1 {font-size: 0.6rem;}
.tm-ft-2 {font-size: 0.7rem;}
.tm-ft-3 {font-size: 0.8rem;}
.tm-ft-4 {font-size: 0.9rem;}
.tm-ft-5 {font-size: 1rem;}
.tm-ft-6 {font-size: 1.1rem;}
.tm-ft-7 {font-size: 1.2rem;}
.tm-ft-8 {font-size: 1.3rem;}
.tm-ft-9 {font-size: 1.4rem;}

/* Alineaciones */
.t-izq {text-align: left;}
.t-cen {text-align: center;}
.t-der {text-align: right;}
.t-jus {text-align: justify;}

.t-desborde {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Contenedores label-input */
.contput-flex  {display: flex; align-items: center; gap: 0.5rem;}
.contputA-flex {display: flex; gap: 0.5rem;} /* (uso con textarea) */
.contput-block {display: flex; flex-direction: column; gap: 0.1rem;}

/* Herramienta de busqueda */
.contbus-flex {display: flex; align-items: center; gap: 0.5rem; position: relative; width: 100%;}
.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;}

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

main[display="off"]     {display: none;}
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;}
p[display="off"]        {display: none;}
span[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;}
section[blur="on"]  {filter: blur(3px); transform: scale(0.9); opacity: 5;}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
input
{
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

/* Campos: inputs, selects, textareas */
.camput
{
    border: solid 0.1rem var(--cl-pri2);
    border-radius: 0.1rem;
    padding: 0.1rem 0.2rem;
    background-color: var(--cl-blanco);
    color: var(--cl-negro2);
    transition: 0.3s;
    font-family: textoL;
    font-size: var(--tm-texto);
}
.camput:hover{border: solid 0.1rem var(--cl-pri2);}
.camput:focus
{
    outline: none;
    border: solid 0.1rem var(--cl-pri2);
    background-color: var(--cl-pri3);
}
.camput:disabled {border: solid 0.1rem var(--cl-gris2);}

.camput [type="date"]     {height: 1rem;}
.camput [type="time"]     {height: 1rem;}
.camput [type="datetime"] {height: 1rem;}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Textarea auto extensible de forma vertical */
.tx-area-aut
{
    border: solid 1px transparent;
    background-color: transparent;
    border-radius: 0.1rem;
    padding: 1px 3px;
    min-height: 22px;
    overflow: hidden;
    resize: none;
    height: 22px;
    max-height: max-content;
    font-family: textoL;
}
.tx-area-aut:hover {border: solid 0.1rem var(--cl-gris3);}
.tx-area-aut:focus {outline: none; border: solid 0.1rem var(--cl-pri2);}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Input checkbox */
.checkput
{
    background-color: var(--cl-blanco);
    accent-color: var(--cl-pri2);
    border: 0.1rem solid var(--cl-pri2);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.1rem;
    display: flex;
    cursor: pointer;
}
.checkput:hover {border: 0.1rem solid var(--cl-pri2);}
.checkput:focus {outline: none; border: 0.1rem 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: 0.1rem solid var(--cl-pri2);
    background-color: var(--cl-pri3);
}
.checkput:checked::before {transform: scale(1);}
.checkput:disabled
{
    border: solid 0.1rem var(--cl_gris2);
    background-color: var(--cl-blanco);
}
.checkput:disabled::before {background-color: var(--cl-gris2);}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Input checkbox-radio */
.radioput
{
    background-color: var(--cl-blanco);
    border: solid 0.1rem var(--cl-pri2);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    accent-color: var(--cl-pri2);
    display: flex;
    cursor: pointer;
}
.radioput:hover {border: solid 0.1rem var(--cl-pri2);}
.radioput:focus {outline: none; border: solid 0.1rem 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 0.1rem var(--cl-pri2);
    background-color: var(--cl-pri3);
}
.radioput:disabled
{
    border: solid 0.1rem var(--cl-gris2);
    background-color: var(--cl-blanco);
}
.radioput:disabled::before {background-color: var(--cl-gris2);}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Input checkbox-suiche */
.suitput
{
    background-color: var(--cl-blanco);
    border: solid 0.1rem var(--cl-pri2);
    width: 2.1rem;
    height: 1.2rem;
    border-radius: 10px;
    display: flex; align-items: center;
    padding-inline: 0.1rem;
    cursor: pointer;
}
.suitput:hover {border: solid 0.1rem var(--cl-pri2);}
.suitput:focus {outline: none; border: solid 0.1rem var(--cl-pri2);}
.suitput::before
{
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    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 0.1rem var(--cl-pri2);
    background-color: var(--cl-pri3);
}
.suitput:disabled
{
    border: solid 0.1rem var(--cl-gris2);
    background-color: var(--cl-blanco);
}
.suitput:disabled::before {background-color: var(--cl-gris2);}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Botón común y label-input-file */
.btn
{
    border: solid 0.1rem var(--cl-pri1);
    border-radius: 0.2rem;
    background-color: var(--cl-pri1);
    color: var(--cl-blanco);
    transition: 0.3s;
    padding: 0.1rem 0.3rem;
    font-family: textoR;
    cursor: pointer;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    font-size: var(--tm-texto);
    text-decoration: none;
    width: max-content;

    svg {fill: var(--cl-blanco); width: 1rem; height: 1rem;}
}
/* .btn > svg {fill: var(--cl-blanco); width: 1rem; height: 1rem;} */
.btn:hover
{
    border: solid 0.1rem var(--cl-pri2);
    background-color: var(--cl-pri2);
}
.btn:focus
{
    outline: none;
    border: solid 0.1rem var(--cl-pri2);
    background-color: var(--cl-pri2);
}
.btn:active {background-color: var(--cl-pri3);}
.btn:disabled
{
    border: solid 0.1rem var(--cl-gris3);
    background-color: var(--cl-gris3);
    color: var(--cl-gris1);
    svg {fill: var(--cl-gris1);}
}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
.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: 0.5rem;
    color: var(--cl-pri1);

    svg {fill: var(--cl-pri1);}
}

.btn-null:hover, .btn-null:focus
{
    outline: none;
    transform: scale(1.1);
    svg {fill: var(--cl-pri2);}
}

.btn-null:disabled
{
    color: var(--cl-gris2);
    transform: scale(1);
    svg {fill: var(--cl-gris2);}
}

.icono-p  {width: 1.1rem; height: 1.1rem;}
.icono-m  {width: 1.3rem; height: 1.3rem;}
.icono-g  {width: 1.5rem; height: 1.5rem;}
.icono-mg {width: 1.7rem; height: 1.7rem;}
/* ------------------------------------------------------------------------- */



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



/* ------------------------------------------------------------------------- */
/* Lineas */
.lineaH {height: 0.4rem; background-color: var(--cl-gris2);}
.lineaV {width: 0.4rem; background-color: var(--cl-gris2);}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Ancho relativo */
.wMcont {width: max-content;}

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

/* Ancho fijo */
.w5   {width: 0.5rem;}   .w10 {width: 1rem;}
.w15  {width: 1.5rem;}   .w20 {width: 2rem;}
.w25  {width: 2.5rem;}   .w30 {width: 3rem;}
.w35  {width: 3.5rem;}   .w40 {width: 4rem;}
.w45  {width: 4.5rem;}   .w50 {width: 5rem;}
.w55  {width: 5.5rem;}   .w60 {width: 6rem;}
.w65  {width: 6.5rem;}   .w70 {width: 7rem;}
.w75  {width: 7.5rem;}   .w80 {width: 8rem;}
.w85  {width: 8.5rem;}   .w90 {width: 9rem;}
.w95  {width: 9.5rem;}   .w100 {width: 10rem;}
.w105 {width: 10.5rem;}  .w110 {width: 11rem;}
.w115 {width: 11.5rem;}  .w120 {width: 12rem;}
.w125 {width: 12.5rem;}  .w130 {width: 13rem;}
.w135 {width: 13.5rem;}  .w140 {width: 14rem;}
.w145 {width: 14.5rem;}  .w150 {width: 15rem;}
.w155 {width: 15.5rem;}  .w160 {width: 16rem;}
.w165 {width: 16.5rem;}  .w170 {width: 17rem;}
.w175 {width: 17.5rem;}  .w180 {width: 18rem;}
.w185 {width: 18.5rem;}  .w190 {width: 19rem;}
.w195 {width: 19.5rem;}  .w200 {width: 20rem;}
.w205 {width: 20.5rem;}  .w210 {width: 21rem;}
.w215 {width: 21.5rem;}  .w220 {width: 22rem;}
.w225 {width: 22.5rem;}  .w230 {width: 23rem;}
.w235 {width: 23.5rem;}  .w240 {width: 24rem;}
.w245 {width: 24.5rem;}  .w250 {width: 25rem;}
.w255 {width: 25.5rem;}  .w260 {width: 26rem;}
.w265 {width: 26.5rem;}  .w270 {width: 27rem;}
.w275 {width: 27.5rem;}  .w280 {width: 28rem;}
.w285 {width: 28.5rem;}  .w290 {width: 29rem;}
.w295 {width: 29.5rem;}  .w300 {width: 30rem;}
.w305 {width: 30.5rem;}  .w310 {width: 31rem;}
.w315 {width: 31.5rem;}  .w320 {width: 32rem;}
.w325 {width: 32.5rem;}  .w330 {width: 33rem;}
.w335 {width: 33.5rem;}  .w340 {width: 34rem;}
.w345 {width: 34.5rem;}  .w350 {width: 35rem;}
.w355 {width: 35.5rem;}  .w360 {width: 36rem;}
.w365 {width: 36.5rem;}  .w370 {width: 37rem;}
.w375 {width: 37.5rem;}  .w380 {width: 38rem;}
.w385 {width: 38.5rem;}  .w390 {width: 39rem;}
.w395 {width: 39.5rem;}  .w400 {width: 40rem;}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Altura relativa */
.hMcont {height: max-content;}

.hp5  {height: 5%;}  .hp10  {height: 10%;}
.hp15 {height: 15%;} .hp20  {height: 20%;}
.hp25 {height: 25%;} .hp30  {height: 30%;}
.hp35 {height: 35%;} .hp40  {height: 40%;}
.hp45 {height: 45%;} .hp50  {height: 50%;}
.hp55 {height: 55%;} .hp60  {height: 60%;}
.hp65 {height: 65%;} .hp70  {height: 70%;}
.hp75 {height: 75%;} .hp80  {height: 80%;}
.hp85 {height: 85%;} .hp90  {height: 90%;}
.hp95 {height: 95%;} .hp100 {height: 100%;}

/* Altura fija */
.h5   {height: 0.5rem;}   .h10 {height: 1rem;}
.h15  {height: 1.5rem;}   .h20 {height: 2rem;}
.h25  {height: 2.5rem;}   .h30 {height: 3rem;}
.h35  {height: 3.5rem;}   .h40 {height: 4rem;}
.h45  {height: 4.5rem;}   .h50 {height: 5rem;}
.h55  {height: 5.5rem;}   .h60 {height: 6rem;}
.h65  {height: 6.5rem;}   .h70 {height: 7rem;}
.h75  {height: 7.5rem;}   .h80 {height: 8rem;}
.h85  {height: 8.5rem;}   .h90 {height: 9rem;}
.h95  {height: 9.5rem;}   .h100 {height: 10rem;}
.h105 {height: 10.5rem;}  .h110 {height: 11rem;}
.h115 {height: 11.5rem;}  .h120 {height: 12rem;}
.h125 {height: 12.5rem;}  .h130 {height: 13rem;}
.h135 {height: 13.5rem;}  .h140 {height: 14rem;}
.h145 {height: 14.5rem;}  .h150 {height: 15rem;}
.h155 {height: 15.5rem;}  .h160 {height: 16rem;}
.h165 {height: 16.5rem;}  .h170 {height: 17rem;}
.h175 {height: 17.5rem;}  .h180 {height: 18rem;}
.h185 {height: 18.5rem;}  .h190 {height: 19rem;}
.h195 {height: 19.5rem;}  .h200 {height: 20rem;}
.h205 {height: 20.5rem;}  .h210 {height: 21rem;}
.h215 {height: 21.5rem;}  .h220 {height: 22rem;}
.h225 {height: 22.5rem;}  .h230 {height: 23rem;}
.h235 {height: 23.5rem;}  .h240 {height: 24rem;}
.h245 {height: 24.5rem;}  .h250 {height: 25rem;}
.h255 {height: 25.5rem;}  .h260 {height: 26rem;}
.h265 {height: 26.5rem;}  .h270 {height: 27rem;}
.h275 {height: 27.5rem;}  .h280 {height: 28rem;}
.h285 {height: 28.5rem;}  .h290 {height: 29rem;}
.h295 {height: 29.5rem;}  .h300 {height: 30rem;}
.h305 {height: 30.5rem;}  .h310 {height: 31rem;}
.h315 {height: 31.5rem;}  .h320 {height: 32rem;}
.h325 {height: 32.5rem;}  .h330 {height: 33rem;}
.h335 {height: 33.5rem;}  .h340 {height: 34rem;}
.h345 {height: 34.5rem;}  .h350 {height: 35rem;}
.h355 {height: 35.5rem;}  .h360 {height: 36rem;}
.h365 {height: 36.5rem;}  .h370 {height: 37rem;}
.h375 {height: 37.5rem;}  .h380 {height: 38rem;}
.h385 {height: 38.5rem;}  .h390 {height: 39rem;}
.h395 {height: 39.5rem;}  .h400 {height: 40rem;}
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* 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: 0.5rem;}  .sepVT5  {margin-top: 0.5rem;}
.sepVB10 {margin-bottom: 1rem;}    .sepVT10 {margin-top: 1rem;}
.sepVB15 {margin-bottom: 1.5rem;}  .sepVT15 {margin-top: 1.5rem;}
.sepVB20 {margin-bottom: 2rem;}    .sepVT20 {margin-top: 2rem;}
.sepVB25 {margin-bottom: 2.5rem;}  .sepVT25 {margin-top: 2.5rem;}
.sepVB30 {margin-bottom: 3rem;}    .sepVT30 {margin-top: 3rem;}
.sepVB35 {margin-bottom: 3.5rem;}  .sepVT35 {margin-top: 3.5rem;}
.sepVB40 {margin-bottom: 4rem;}    .sepVT40 {margin-top: 4rem;}
.sepVB45 {margin-bottom: 4.5rem;}  .sepVT45 {margin-top: 4.5rem;}
.sepVB50 {margin-bottom: 5rem;}    .sepVT50 {margin-top: 5rem;}

.sepHLA  {margin-left: auto;}      .sepHRA  {margin-right: auto;}
.sepHL5  {margin-left: 0.5rem;}    .sepHR5  {margin-right: 0.5rem;}
.sepHL10 {margin-left: 1rem;}      .sepHR10 {margin-right: 1rem;}
.sepHL15 {margin-left: 1.5rem;}    .sepHR15 {margin-right: 1.5rem;}
.sepHL20 {margin-left: 2rem;}      .sepHR20 {margin-right: 2rem;}
.sepHL25 {margin-left: 2.5rem;}    .sepHR25 {margin-right: 2.5rem;}
.sepHL30 {margin-left: 3rem;}      .sepHR30 {margin-right: 3rem;}
.sepHL35 {margin-left: 3.5rem;}    .sepHR35 {margin-right: 3.5rem;}
.sepHL40 {margin-left: 4rem;}      .sepHR40 {margin-right: 4rem;}
.sepHL45 {margin-left: 4.5rem;}    .sepHR45 {margin-right: 4.5rem;}
.sepHL50 {margin-left: 5rem;}      .sepHR50 {margin-right: 5rem;}
/* ------------------------------------------------------------------------- */



*
{
    font-family: textoR;
    font-size:   var(--tm-texto);
    margin:      0;
    padding:     0;
    color:       var(--cl-negro2);
    box-sizing:  border-box;
}