/*GENERALES*/
:root{
    --color50:#f4f6fb;
    --color100:#e8edf6;
    --color200: #cddaea;
    --color300: #a0bad9;
    --color400: #6d96c3;
    --color500: #4b79ac;
    --color600: #365b8a;
    --color700: #2f4d75;
    --color800: #2a4262;
    --color900: #273953;
    --color950: #1a2537;
    --colordeg950: rgba(2, 2, 2, 0.5);

    --bginput: rgb(238, 238, 238);

    --cwhite: white;
    --cblack: black;
    --cgray: gray;

    --cactivo: #0c5f0cd2;
    --cinactivo: #a70a0ad2;

    --cinputfocusback: #e1e2ee;

    --cerror: #8c3636;
    --cerrorshadow: #f9e7e7;

    --cexito: #275435;
    --cexitoshadow: #e3f5e8;

    --cwarning: #d3d348;
    --cwarningshadow: #eff3ce;
    --color:var(--color950);

    --cinfo: #1b8386;
    --cinfoshadow: #d1f6f3;

    --cdisabled: #5b6667;
    --cdisabledshadow: #ced3d2;

    --cspan:#2d547f;

    --clogin: dodgerblue;
    --cloginshadow: #adcdda;

    --cfreetrial: #269c17;
    --cfreetrialshadow: #e3f5e8;

    --cpendiente: #cfdb23b0;
    --cecho: #a4e9a4b6;

    --ctransparente: rgba(0, 0, 0, 0.5);
    --ctransparenteshadow: rgba(175, 174, 238, 0.712);
}

/*==INPUT / LABEL==*/
.cont-input {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0.5em 0;
}

label {
    width: 40%;
    text-align: end;
    margin: 0 0.25em;
    height: 40px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: medium;
    font-weight: bold;
    transition: color 0.5s ease-in-out;
}

input {
    width: 100%;
    text-align: start;
    margin: 0 0.25em;
    height: 40px;
    border: 0;
    border-bottom: 2px solid var(--cblack);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: large;
    font-weight: 200;
    outline: none;
    background-color: var(--bginput);
    transition: border-bottom 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

input:focus {
    border-bottom: 2px solid var(--color600);
    background-color: var(--cinputfocusback);
}

input:focus-within+label {
    color: var(--color600) !important;
    border-bottom: 2px solid var(--color600);
}

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

/*==SELECT==*/
select {
    text-align: center;
    width: 100%;
    height: 40px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: large;
    font-weight: 200;
    border: 2px solid var(--cblack);
    border-radius: 1%;
    transition: all 0.3s ease;
}

select:focus {
    border: 2px solid var(--color600);
    background-color: var(--cinputfocusback);
    outline: none;
}

select:focus+label {
    color: var(--color600) !important;
    border-bottom: 2px solid var(--color600);
}

select:focus option {
    background-color: var(--cinputfocusback);
    color: var(--color600);
}

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

/*==TEXTAREA==*/
textarea {
    width: 100%;
    height: 50px;
    /* Ajusta la altura según tus necesidades */
    text-align: start;
    margin: 0.5em 0;
    border-bottom: 2px solid var(--cblack);
    border-left: transparent;
    border-top: transparent;
    border-right: transparent;
    border-radius: 1%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: large;
    font-weight: 200;
    background-color: var(--bginput);
    resize: none;
    outline: none;
    transition: border 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

textarea:focus {
    border-bottom: 2px solid var(--color600);
    background-color: var(--cinputfocusback);
}

textarea:focus+label {
    color: var(--color600) !important;
    border-bottom: 2px solid var(--color600);
}

.textarea-sm{
    height: 75px;
}

.textarea-md{
    height: 100px;
}

.textarea-lg{
    height: 150px;
}

.textarea-xl{
    height: 200px;
}

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

/*==BOTONES==*/
button {
    width: auto;
    border: 1px solid;
    border-radius: 8%;
    box-shadow: 2px 2px 2px 1px var(--cblack);
    background-color: var(--color600);
    color: var(--cwhite);
    box-shadow: 2px 2px 2px 1px var(--color200);
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
    padding: 0.5em;
    vertical-align: center;
}

.button-sm {
    padding: 1px 6px;
}

.btn-main{
    color: var(--cwhite);
    background-color: var(--color600);
    box-shadow: 2px 2px 2px 1px var(--color200);
}

.btn-main:hover {
    background-color: var(--color200);
    box-shadow: 2px 2px 2px 1px var(--color600);
    color: var(--color600);
}

button:hover {
    background-color: var(--color200);
    box-shadow: 2px 2px 2px 1px var(--color600);
    color: var(--color600);
}

.btn-error {
    color: var(--cwhite);
    background-color: var(--cerror);
    box-shadow: 2px 2px 2px 1px var(--cerrorshadow);
}

.btn-error:hover {
    background-color: var(--cerrorshadow);
    box-shadow: 2px 2px 2px 1px var(--cerror);
    color: var(--cerror);
}


.btn-error-normal {
    color: var(--cwhite);
    box-shadow: none;
    background-color: var(--cerror);
}

.btn-error-normal:hover {
    background-color: var(--cerrorshadow);
    box-shadow: none;
    color: var(--cerror);
}

.btn-exito {
    color: var(--cwhite);
    background-color: var(--cexito);
    box-shadow: 2px 2px 2px 1px var(--cexitoshadow);
}

.btn-exito:hover {
    background-color: var(--cexitoshadow);
    box-shadow: 2px 2px 2px 1px var(--cexito);
    color: var(--cexito);
}

.btn-exito-normal {
    color: var(--cwhite);
    box-shadow: none;
    background-color: var(--cexito);
}

.btn-exito-normal:hover {
    background-color: var(--cexitoshadow);
    box-shadow: none;
    color: var(--cexito);
}

.btn-warning {
    color: var(--color950);
    background-color: var(--cwarning);
    box-shadow: 2px 2px 2px 1px var(--cwarningshadow);
}

.btn-warning:hover {
    background-color: var(--cwarningshadow);
    box-shadow: 2px 2px 2px 1px var(--cwarning);
    color: var(--cwarning);
}

.btn-info {
    color: var(--cwhite);
    background-color: var(--cinfo);
    box-shadow: 2px 2px 2px 1px var(--cinfoshadow);
}

.btn-info:hover {
    background-color: var(--cinfoshadow);
    box-shadow: 2px 2px 2px 1px var(--cinfo);
    color: var(--cinfo);
}

.btn-info-normal {
    color: var(--cwhite);
    box-shadow: none;
    background-color: var(--cinfo);
}

.btn-info-normal:hover {
    background-color: var(--cinfoshadow);
    box-shadow: none;
    color: var(--cinfo);
}

.btn-disabled {
    color: var(--cwhite);
    background-color: var(--cdisabled);
    box-shadow: 2px 2px 2px 1px var(--cdisabledshadow);
}

.btn-disabled:hover {
    background-color: var(--cdisabledshadow);
    box-shadow: 2px 2px 2px 1px var(--cdisabled);
    color: var(--cdisabled);
}

.btnLogin{
    
    color: var(--cloginshadow);
    background-color: var(--clogin);
    box-shadow: 2px 2px 2px 1px var(--clogin);
}

.btnLogin:hover{
    background-color: var(--cloginshadow);
    color: var(--clogin);
    box-shadow: 2px 2px 2px 1px var(--cloginshadow);
}

.btnFreeTrial{
    color: var(--cfreetrialshadow);
    background-color: var(--cfreetrial);
    box-shadow: 2px 2px 2px 1px var(--cfreetrial);
}

.btnFreeTrial:hover{
    background-color: var(--cfreetrialshadow);
    color: var(--cfreetrial);    
    box-shadow: 2px 2px 2px 1px var(--cfreetrialshadow);
}
/*==================*/

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

/*ESTILOS CHECKBOX*/
.cbx-personalizado {
    display: none
}

.span-cbxpersonalizado {
    display: inline-block;
    position: relative;
    height: 1.2em;
    width: 1.2em;
    background: var(--cspan);
    border-radius: 100%;
    transition: all 0.7s;
}

.lbl-cbxpersonalizado {
    font-size: 1.5em;
    cursor: pointer;
    justify-content: start;
}

.lbl-cbxpersonalizado~.span-cbxpersonalizado {
    box-shadow: 0px 0px 30px 0px var(--cspan);
}

.span-cbxpersonalizado:after {
    content: "";
    position: absolute;
    border: solid var(--cwhite);
    border-width: 0 0.25em 0.25em 0;
    transform: rotate(45deg);
    width: 0.50em;
    height: 1em;
    left: 0.30em;
    top: 0.05em;
    opacity: 0;
    transition: 0.3s ease;
}

.lbl-cbxpersonalizado .cbx-personalizado:checked~.span-cbxpersonalizado:after {
    opacity: 1;
}

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

.ui-dialog-titlebar {
    background-color: var(--color950) !important;
    color: #f4f6fb !important;
}

.ui-dialog-buttonpane {
    background-color: var(--color950) !important;
    color: #f4f6fb !important;
}

hr {
    border: 0;
    height: 3px;
    background-color: var(--color900);
    margin: 5px 0;
}

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

/*ICONO ACTIVO*/
#stsActivo {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.color-activo {
    background-color: var(--cactivo);
    border-radius: 100%;
}

.color-inactivo {
    background-color: var(--cinactivo);
}

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

.etiquetas{
    font-size: 1em;
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
    color: var(--color950);
    padding: 0.3rem;
    border-radius: 7%;
}

.new-msg {
    margin-left: 5px;
    color: red; /* Inicialmente establecido en rojo */
    animation: cambiar-color 0.6s infinite alternate;
}

@keyframes cambiar-color {
    0%, 100% {
        color: red; /* Color rojo */
        background-color: white;
    }
    50% {
        color: white; /* Color blanco */
        background-color: red;
    }
}

.frm-contenedor{
    padding: 2em;
    width: 70%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 5%;
    border-style: solid;
    border-color: var(--cblack);
    background-color: var(--color100);
}

.btn-transparent {
    background-color: transparent;
    border: none;
    color: var(--cblack);
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2em;
    box-shadow: none;
    margin: 0;
    padding: 0;
    transition: all 0.5s ease;
}

.btn-transparent:hover {
    color: var(--cblack);
    text-decoration: underline;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    margin: 0;
    font-size: 1.2em;
    background-color: var(--ctransparenteshadow);
    box-shadow: none;
    transition: all 0.5s ease;
}

.svgcentrado{
    vertical-align: baseline !important;
}