:root {
    --color-primario: #1e3c72;    /* Azul oscuro */
    --color-secundario: #2a5298;  /* Azul medio */
    --color-acento: #f39c12;       /* Naranja */
    --color-exito: #27ae60;        /* Verde */
    --color-peligro: #e74c3c;       /* Rojo */
    --color-fondo: #f5f7fa;
    --color-texto: #333;
    --color-borde: #dde2e7;
    --color-warning-hover: #ebd991; /* Amarillo oscuro */
    --sombra: 0 4px 12px rgba(0,0,0,0.05);
}

body.tqa-body-page{
    background-color: #DCF4EF;
} 

div.tqa-headerMenuContainer{
    height: 7.5rem;
}

div.tqa-PageTitle{
    font-size: 2rem !important;
    font-weight: bolder !important;
}

.tqa-footer{
    background-color: #108844;
    width: 100%;
    color: #f1a83e;
    text-align: center;

}

.tqa-main-gradient{
    background-image: linear-gradient(to bottom right, #104d88, #f1a83e);
}

/*TQA Index starts*/
html {
    height: 100%; /* <------------ */
}

.tqa-index-body{
    height: 100%;
    background-image: linear-gradient(to bottom right, #104d88, #f1a83e, #104d88);
    /*
    vertical-align: middle;
    text-align: center;*/
    display: flex; /* establish flex container */
    justify-content: center; /* center flex items horizontally, in this case */
    align-items: center; /* center flex items vertically, in this case */
}
/*TQA Index ends*/

.tqa-icon-menu-color{
    color: #f1a83e;
}

/*general starts*/

.validation-message{
    margin-top: 0.5rem;
    background-color: transparent;    
    border-radius: 1rem;
    position: relative;
    text-align: center;
}

.validation-message.invalid{
    background-color: red;    
}

.validation-message > label{
    color: whitesmoke;    
}

.validation-message > label{
    background-color: transparent;
    font-weight: bold;
}

.validation-message.invalid{
    color: red;
}

#tqhMessage.modal-header{
    background-color: #104d88 !important;
}

.tqh-invalid-field{
    border: 0.2rem solid rgb(244, 36, 36) !important;
}

.b-hidden{
    display: none !important;
}

a.a-button
{
    display: flex;
    justify-content: center;
    border: 0.1rem solid #f1a83e;
    border-radius: 0.5rem;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
    color: #104d88;    
    
}

a.a-button.disabled{
    color: lightgray;
}

a.a-button:hover{
    border: 0.1rem solid #104d88;
    color: #f1a83e;    
    text-decoration: none !important;
}

a.a-button.disabled:hover{
    pointer-events: none;
    text-decoration: none !important;
    text-decoration: none !important;
}

a.a-button-righ-margin-2{
    margin-right: 2rem;
}
/*tooltip tqa-custom-tooltip bs-tooltip-auto fade show*/
div.tooltip.tqa-custom-tooltip {
    --bs-tooltip-bg: #104d88;
    --bs-tooltip-color: #f1a83e;
    border-radius: var(--bs-tooltip-border-radius);
    border: 0.1rem solid #f1a83e;

    /*
    --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
    */
  }

  div.offcanvas.tqa-offcanvas-profile {
    top: 7.8rem !important;
    width: 30rem;
    height: 30rem;
    border: 0.3rem solid #f1a83e;
    background-color: #104d88;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-header {
    background-color: #1681F5;
    color: #f1a83e;
    font-weight: bold;
    border-top-left-radius: 1rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-header > div.tqa-offcanvas-title {
    color: #f1a83e;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating > label,
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body *> div.form-floating > label {
    color: #f1a83e;
    font-weight: bold;
    background-color: transparent;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating > label::after,
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body *> div.form-floating > label::after {
    display: none;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating-2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating-2 > div.form-floating {
    width: 48%;
  }

  
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating > input,
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body *> div.form-floating > input {
    font-weight: bold;
    font-size: 1.2rem;
  }

  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body > div.form-floating > input[disabled],
  div.offcanvas.tqa-offcanvas-profile > div.offcanvas-body *> div.form-floating > input[disabled] {
    background-color: #0366D0;

  }
/*general ends*/

/* TQA Login starts*/

.tqa-login-main-div{
    
    width: 20rem;
    height: 28rem;
    border-radius: 1rem;
    /*display: inline-block;*/
    background-image: linear-gradient(to bottom right, #f1a83e, #104d88);
    border: 0.2rem solid #104d88;
}

.tqa-login-main-div > div.card{
    width: 100% !important;        
    background-color: transparent;
}

.tqa-login-main-div > div.card > div.card-header{
    width: 100%;
    display:flex; 
    justify-content:center
}

.tqa-login-main-div > div.card > div.card-header > img.card-img-top{
    width: 4.5rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: start;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-icon,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-icon,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-icon{
    display:flex;
    justify-content: center;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-type,
.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-confirm,
.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-policies-state,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-username,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-code,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-password,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-username{
    width: 100%; 
    margin-top: 1rem; 
    position: relative;  
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-type > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-confirm > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-username > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-code > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-password > input,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-username > input{
    width: 100%;
    padding-left: 1.7rem;  
    border-radius: 0.7rem;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-type > i.fa-key,
.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-confirm > i.fa-key,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-username > i.fa-envelope,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-code > i.fa-spell-check,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-password > i.fa-key,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-username > i.fa-envelope{
    position: absolute;
    top: 0.5rem; 
    left: 0.5rem;   
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-set-password > div.tqa-set-password-buttons,
.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-buttons,
.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-button-login{
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content:center
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-forgot-link{
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f1a83e;
    border-radius: 1rem;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-forgot-link > a.tqa-login-forgot-link.a-link{
    font-weight: bold;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-login > div.tqa-login-forgot-link > a.tqa-login-forgot-link.a-link:hover{
    color: #1681F5;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-options{
    margin-top: 1rem;
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #104d88;
    background-color: #f1a83e;
    border-radius: 1rem;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-options > div.btn-group{
    height:1.8rem;
}

.tqa-login-main-div > div.card > div.card-body > div.tqa-forgot-password > div.tqa-forgot-options > div.btn-group > label{
    padding-top: 0rem;
    padding-bottom: 0rem;
    height: 1.7rem;
    color: #f1a83e;
    margin-bottom: 0;
}

div.tqa-set-password-policies-state{
    background-color: #104d88;
    width: 100px;
    text-align: center;
    border-radius: 1rem;
    min-height: 1.5rem;
    max-height: 2.2;
}

div.tqa-set-password-policies-state.invalid{
    background-color: red;
}

div.tqa-set-password-policies-state > label{
    font-size: 0.75rem;
    color:whitesmoke;
}

li.tqa-password-validator > span{
    display:none;
}

li.tqa-password-validator.tqa-valid > span.tqa-valid{
    display: inline;
}


li.tqa-password-validator.tqa-invalid > span.tqa-invalid{
    display: inline;
}

span.tqa-valid{
    color:green;
}

span.tqa-invalid{
    color:red;
}

div.tqa-new-user-form{
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;    
}

div.tqa-new-user-form > form{
    width: 47%;
}

div.tqa-new-user-form label::after{    
    display:none;
}

div.tqa-modal-gradient-bg {
    background-image: linear-gradient(to bottom right, #717469, #867D62);
}

div.tqa-modal-gradient-bg select,
div.tqa-modal-gradient-bg input{
    background-color: rgb(184, 182, 182);
}


/* TQA login ends*/

/* TQA Users */
/*
--tqa-main-color: #104d88;
--tqa-secondary-color: #f1a83e;
--tqa-third-color: whitesmoke;

*/
div.alert{
    margin-bottom: 0 !important;
}

button:hover{
    cursor: pointer;
}

div.form-floating > span#req{
    display: none;
}

div.form-floating[required] > span#req{
    display: block;
    color: red;
    position: absolute;
    top: 0.2rem;
    right: 0.5rem;
}

div.offcanvas.offcanvas-end.tqa-offcanvas-user-data{    
    top: 7.8rem !important;
    width: 60rem;
    height: 22rem;
    border: 0.3rem solid #104d88;
    background-color: aliceblue;
    /*
    border: 0.3rem solid #f1a83e;
    background-color: #104d88;
    */
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;     
    
    div.offcanvas-header{
        background-color: lightblue;
        border-top-left-radius: 1rem;
        border-bottom: 0.3rem solid #104d88;

        h5.tqa-offcanvas-title{
            color: #104d88;
            font-weight: bold;
        }
    }

    
    

    div.form-add-new-user{
        
        div.tqh-field-invalid > input,
        div.tqh-field-invalid > select {
            border-color: red !important;
        }

        div.form-floating{
            select,
            input{
                background-color: #edf3f9;
                border: 0.1rem solid #f1a83e;
                color: black;
                font-size: 1rem;
            }
            
            select[disabled],
            input[disabled]{
                background-color: #d1d6db;
                border: 1px solid #f1a83a;
            }
            
            .btn-close{
                color: whitesmoke;  
            }

            label{
              color: #104d88;
              font-size: 0.8rem;
            }
            
            label:after{
                background-color: transparent;            
            }
        }
        
        div.user-identifiers{
            display: flex;
            flex-direction: row;                    
            margin-bottom: 0.5rem;
            column-gap: 1%;

            div.field-user-names{
                width: 18%;                
            }

            div.field-user-lastNames{
                width: 18%;
            }
            
            div.field-user-dob{
                width: 16%;
            }
            
            div.field-user-email{
                width: 30%;
            }
            
            div.field-user-username{
                width: 18%;
            }
        }

        div.user-job-desc{
            display: flex;
            flex-direction: row;                    
            margin-bottom: 0.5rem;
            column-gap: 1%;
            div.field-user-rol{
                width: 25%;
            }
            
            div.field-user-area{
                width: 25%;
            }            

            div.field-user-position{
                width: 25%;
            }
            
            div.field-user-depto{
                width: 25%;
            }
        }

        div.user-boss-and-actions{
            display: flex;
            flex-direction: row;                    
            margin-bottom: 0.5rem;
            column-gap: 1%;
            div.field-user-location{
                width: 25%;
            }

            div.field-user-job{
                width: 50%;                
            }
            
            div.field-user-last-access{
                width: 24.5%;
                margin-right: 1%;
            }
            
            div.field-user-status{
                width: 24.5%;
            }
        }

        div.user-actions{
            display: flex;
            flex-direction: row;                    
            margin-bottom: 0.5rem;
            justify-content: end;
            column-gap: 0.3rem;
            
            button{
                width: fit-content;
                height: fit-content;
                border: 0.1rem solid black;
                border-radius: 0.5rem;
            }
            
            button.btn-user-block{
                border-color: red;
                
                color: red;
            }
            
            button.btn-user-edit{
                border-color: #104d88;
                color: #104d88;
            }

            button.btn-user-cancel{
                border-color: #f1a83a;
                color: #f1a83a;
            }

            button[disabled]{
                color: darkgray !important;
            }
        }
    }    
}

.tqa-tooltip{
    --bs-tooltip-bg: var(--bd-violet-bg);
    --bs-tooltip-color: var(--bs-white);
}

.tqa-login-message-invalid {
    color: red;
}

#tbUsers .tqhTableRowCol.tqh-table-users-actions > button{
    background-color: transparent;
}

#tbUsers .tqhTableRowCol.tqh-table-users-actions > button[data-field-id-name="IsActive"]{
    background-color: transparent;
}

#tbUsers .tqhTableRowCol.tqh-table-users-actions > button[data-field-id-name="IsActive"][data-field-id-value="0"]{
    background-color: lightpink;
}

#tbUsers .tqhTableRowCol.tqh-table-users-actions > button[data-field-id-name="IsActive"][data-field-id-value="2"]{
    background-color: orange;
}

#tbUsers .tqhTableRowCol.tqh-table-users-actions > button[data-field-id-name="IsActive"][data-field-id-value="4"]{
    background-color: yellow;
}
div.myPlantContainer{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1rem;
    row-gap: 1rem;
    z-index: -1;
    div.mpFooter{
        width: 100%;
        display: flex;
        justify-content: end;
    }
}

.myPlantNew{
    display: none;
    & > div.modal-dialog{
        width: 30rem;
        & > div.modal-content{
            border: 3px solid var(--bs-primary);
            background-color: aliceblue;            
        }
    }

    & > .modal-content{
        border: 3px solid var(--bs-primary);
        display: none;
    }
    
    & > .card-header {
        background-color: var(--bs-primary-border-subtle) !important;
    }    

    & > .modal-footer{
        display: flex;
        justify-content: flex-end;
        
        & > a.tqa-btn.save{
            border-color: var(--bs-succes-border-subtlse);
            background-color: var(--bs-success-bg-subtle); 
            color: var(--bs-success);       
        }
        
        & > a.tqa-btn.save:hover{
            border-color: var(--bs-succes-border-subtlse);
            background-color: var(--bs-success-bg-subtle); 
            color: var(--bs-success-text-emphasis);       
        }
        
        & > a.tqa-btn.cancel{
            border-color: var(--bs-succes-border-subtlse);
            background-color: var(--bs-danger-bg-subtle); 
            color: var(--bs-danger);
        }
        
        & > a.tqa-btn.cancel:hover{
            border-color: var(--bs-succes-border-subtlse);
            background-color: var(--bs-danger-bg-subtle); 
            color: var(--bs-danger-text-emphasis);       
        }
    }
}

div.tqh-input-frame{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    border: 0.1rem solid var(--bs-info);
    border-radius: 0.5rem;

    & > label{
        font-size: 0.6rem;
        font-weight: bold;
        color: var(--bs-tertiary-color);
        margin-left: 0.5rem;
    }

    & > input{
        border: 0.05rem solid lightblue;
        border-radius: 0.5rem;
        padding: 0.1rem;
        font-size: 0.8rem;
        margin: 0 0.5rem 0.2rem 0.5rem;
        color: black;
    }

    & > select{
        border: 0.05rem solid lightblue;
        border-radius: 0.5rem;
        padding: 0.1rem;
        font-size: 0.8rem;
        margin: 0 0.5rem 0.2rem 0.5rem;
    }
}

a.tqa-btn{
    border: 3px solid black;
    border-radius: 0.5rem;
    height: 32px;
    width: 32px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
}

a.tqa-btn.new{
    border-color: var(--bs-primary-border-subtlse);
    background-color: var(--bs-primary-bg-subtle); 
    color: var(--bs-primary-text-emphasis);       
}

a.tqa-btn.edit{
    border-color: var(--bs-primary-border-subtlse);
    background-color: var(--bs-primary-bg-subtle); 
    color: var(--bs-primary-text-emphasis);       
}

a.tqa-btn.edit:hover{
    border-color: var(--bs-primary-border-subtlse);
    background-color: var(--bs-primary-text-emphasis); 
    color: var(--bs-primary-bg-subtle);       
}

a.tqa-btn.delete{
    border-color: var(--bs-danger-border-subtlse);
    background-color: var(--bs-danger-bg-subtle); 
    color: var(--bs-danger-text-emphasis);       
}

a.tqa-btn.delete:hover{
    border-color: var(--bs-danger-border-subtlse);
    background-color: var(--bs-danger-text-emphasis); 
    color: var(--bs-danger-bg-subtle);       
}

a.tqa-btn.action{
    border-color: var(--bs-succes-border-subtlse);
    background-color: var(--bs-success-bg-subtle); 
    color: var(--bs-success-text-emphasis);       
}

a.tqa-btn.action:hover{
    border-color: var(--bs-success-border-subtle);
    background-color: var(--bs-success-text-emphasis); 
    color: var(--bs-success-bg-subtle);       
}

a.tqa-btn.save{
    border-color: var(--bs-succes-border-subtlse);
    background-color: var(--bs-success-bg-subtle); 
    color: var(--bs-success);       
}

a.tqa-btn.save:hover{
    border-color: var(--bs-succes-border-subtlse);
    background-color: var(--bs-success-bg-subtle); 
    color: var(--bs-success-text-emphasis);       
}

a.tqa-btn.cancel{
    border-color: var(--bs-succes-border-subtlse);
    background-color: var(--bs-danger-bg-subtle); 
    color: var(--bs-danger);
}

a.tqa-btn.cancel:hover{
    border-color: var(--bs-succes-border-subtlse);
    background-color: var(--bs-danger-bg-subtle); 
    color: var(--bs-danger-text-emphasis);       
}

a.tqa-btn.medium{
    height: 28px;
    width: 28px;
}

a.tqa-btn >i{
    width: 100%;
    height: 100%;
    width: fit-content;
    height: fit-content;

    font-size: 1.1em;
    line-height: .04167em;
    vertical-align: -.125em
}

div.card-myPlant{ 
    width: 20rem;
    border: 3px solid var(--bs-primary);
    border-radius: 0.5rem;    
    & > .card-header {
        background-color: var(--bs-primary-border-subtle) !important;
        border-bottom: 0.1rem solid var(--bs-primary-border-subtle);
        padding: 0.2rem;
        border-radius: 0.3rem 0.3rem 0 0;   
    }

    & > .card-body {
        background-color: var(--bs-primary-bg-subtle);
        padding: 0.2rem;
    }
    div.myPlantRow{
        display: flex;
        flex-direction: row;

        div{
            padding: 0.1rem;
        }

        div.full{
            width: 100%;
        }

        div.half{
            width: calc(50% - 0.25rem);            
        }

        div.half.left{
            margin-right: 0.25rem;
        }

        div.half.right{
            margin-left: 0.25rem;
        }        

        div.tqaInputWithLabel{
            border: 0.1rem solid var(--bs-info);
            border-radius: 0.5rem;
            height: fit-content;
            position: relative;
            display: flex;
            flex-direction: column;
            margin-bottom: 0.1rem;
            label{
                font-size: 0.75rem;
                font-weight: bold;
                color: var(--bs-tertiary-color);
            }
             
            input, select{
                border-width: 0.05rem;
                border-radius: 0.5rem;
                border-color: rgb(118, 118, 118);
                font-weight: normal !important;
            }

            > div.select-autocomplete{
                * > span.select2-selection {
                    border-color: rgb(118, 118, 118);
                }        
            }

            > div.select-autocomplete[readonly]{
                * > span.select2-selection {
                    border-radius: 0.5rem;
                    background-color: transparent;
                    border-color: transparent;
                }        
            }
            
            input[readonly]{
                background-color: transparent;
                border-color: transparent;
                
                width: 100%;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            select[disabled]{
                background-color: transparent;
                border-color: transparent;
                width: 100%;
                -webkit-appearance: none; /* Safari/Chrome */
                -moz-appearance: none;    /* Firefox */
                appearance: none;         /* Estándar */
            }
        }
    }
    
    div.mpFooter{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        column-gap: 0.5rem;
        padding-top: 0.5rem;
        padding: 0.2rem;
        border-radius: 0 0 0.3rem 0.3rem;
    }
}

.btn-mint {
    background-color: #4FFFB0 !important; /* Un tono menta más fuerte para el botón */
    color: #333;
    border: 0.1rem solid #1f6951 !important;
    font-size: 1.4rem;
}
.btn-mint:hover {
    background-color: #336957 !important; /* Color más oscuro al pasar el mouse */
    border: 0.1rem solid #084228 !important;
    color: #4FFFB0 !important; /* Mantener el color del texto al pasar el mouse */
}

.btn-quest{
    background-color: #b7daf0; /* Un tono menta más fuerte para el botón */
    border: none;
    color: #333;
    border: 0.1rem solid #3A7CA5;
    font-size: 1.4rem;
}

.btn-quest:hover {
    background-color: #3A7CA5; /* Color más oscuro al pasar el mouse */
    border: 0.1rem solid #b7daf0;
}




div.row-form-field{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding-right: 1rem !important;
    column-gap: 0.5rem;
}

span.field-label-value {
    font-size: 1.4rem;
}

div.row-form-field span.field-label{
    color: blue;
    font-size: 1.4rem;
    
}

div.row-form-field span.field-value {
    color: black;
    font-size: 1.4rem;
    font-weight: bold;
}


div.row-form-field .field-input-value {
    color: black;
    font-size: 1.4rem;
    border: 0.1rem solid #233f23;
    border-radius: 0.5rem;
}

div.row-form-body-questions{
    margin-top: 0.5rem;
    background-color: #E3F2FD;
    padding: 0.1rem;
    border: 0.1rem solid #233f23;
    border-radius: 1rem;    
}

div.row-form-body-questions div.row-form-body-questions-item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: aliceblue;
    border: 0.1rem solid #233f23;
    border-radius: 1rem;
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
}

div.row-form-body-questions div.row-form-body-questions-item-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
}

div.row-form-body-questions div.row-form-body-questions-item-header div.row-form-field.question-item-promt{
    width: 60%;
}

div.row-form-body-questions div.row-form-body-questions-item-header div.row-form-field.question-item-type{
    width: 20%;
}

div.row-form-body-questions div.row-form-body-questions-item-header div.row-form-field.question-item-status{
    width: 20%;
}

div.row-form-body-questions div.row-form-body-questions-item-header div.row-form-field.question-item-type-multiple-options {
    margin-left: 60% !important;
    width: 40% !important;
}


div.question-item-type-multiple-options{
    span.tagOption{
        font-size: 1.2rem;
        font-weight: normal;
        padding: 0.1rem 0.1rem 0.1rem 0.1rem;
        border-radius: 0.5rem;
        border: 0.1rem solid black;
        color: black;
        background-color: #95dcf3;
        width: fit-content;
        margin: 0.15rem;

        span.pencil,
        span.cross{
            font-size: 1.5rem;
            margin-left: 0.5rem;
            cursor: pointer;
            font-weight: bold;
            display: none;
        }
    }

    button#btnAddNewOption{
        margin: 0;
        padding: 5px;
        border: 1px solid black;
        border-radius: 2px;
        background-color: transparent  ;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
    }

    span.tagOption.editable{
        cursor: pointer;

        span.pencil,
        span.cross{
            display: block;
        }
    }

    input.qmo-code{
        width: 3.5rem;
    }

    input.qmo-text{
        width: 15rem;
    }
}

/*Question Multiple Options*/
div.question-multiple-options{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;

    span.tagOption{
        font-size: 1.2rem;
        font-weight: normal;
        padding: 0.1rem 0.1rem 0.1rem 0.1rem;
        border-radius: 0.5rem;
        border: 0.1rem solid black;
        color: black;
        background-color: #95dcf3;
        width: fit-content;
        margin: 0.15rem;
    
        span.pencil,
        span.cross{
            font-size: 1.5rem;
            margin-left: 0.5rem;
            cursor: pointer;
            font-weight: bold;
            display: none;
        }
    }

    button#btnAddNewOption{
        margin: 0;
        padding: 5px;
        border: 1px solid black;
        border-radius: 2px;
        background-color: transparent  ;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
    }

    span.tagOption.editable{
        cursor: pointer;

        span.pencil,
        span.cross{
            display: block;
        }
    }

    input.qmo-code{
        width: 3.5rem;
    }

    input.qmo-text{
        width: 15rem;
    }
}

div.question-multiple-options-add{
    span{
        font-size: 1.2rem;
        font-weight: normal;
        padding: 0.1rem 0.1rem 0.1rem 0.1rem;
        border-radius: 0.5rem;
        border: 0.1rem solid black;
        color: black;
        background-color: #f3f395;
        width: fit-content;
        margin: 0.15rem;
        cursor: pointer;
    }

    input[type=text]{
        font-size: 1.2rem;
        font-weight: normal;
        padding: 0.1rem 0.1rem 0.1rem 0.1rem;
        border-radius: 0.5rem;
        border: 0.1rem solid black;
        margin: 0.15rem;
        width: fit-content;
    }

    input.qmo-code{
        width: 5rem;
    }

    button.btn.btn-quest.btn-sm.qmo-btnAdd,
    button.btn.btn-quest.btn-sm.qmo-btnClean{
        background-color: #30bcea;
        border: 0.1rem solid #f1a83e;
        font-size: 1.2rem;
        font-weight: bold;
        margin-left: 0.5rem;
    }
}

.question-multiple-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

div.question-multiple-options:has(> span.tagOption.draggable) {
    span.multipleOptionsEmptyData{
        display: none;
    }
}

.tagOption {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #e0e0e0;
    border-radius: 4px;
    user-select: none;
    position: relative;

    button{
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent  ;
        cursor: pointer;
    }
}

.tagOption.draggable {
    cursor: move;
}

.tagOption.option-add{
    cursor: normal !important;
}


.tagOption.dragging {
    opacity: 0.5;
    background-color: #b0b0b0;
}

.tagOption.over {
    border: 2px dashed #007bff;
}

.cross {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
    color: #666;
}

.cross:hover {
    color: #ff0000;
}

/*Question Multiple Options Ends*/
div.row-form-body-questions-item-body{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0.5rem;
    column-gap: 0.5rem;
}

div.row-form-body-questions-item-body div.row-form-field{
    width: 50%;
}

div.row-form-body-questions div.row-form-body-questions-item-footer{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    column-gap: 0.5rem;
    margin-top: 0.5rem;
}

div.row-form-body-questions-item.row-collapsed div.row-form-body-questions-item-footer,
div.row-form-body-questions-item.row-collapsed div.row-form-body-questions-item-body{
    display: none;
}


div.row-form-body-questions-item:not(.row-collapsed) div.expand-collapse-icon i.fa-chevron-up{
    display: inline-block !important;
}

div.row-form-body-questions-item:not(.row-collapsed) div.expand-collapse-icon i.fa-chevron-down{
    display:  none!important;
}

div.row-form-body-questions-item.row-collapsed div.expand-collapse-icon i.fa-chevron-up{
    display: none !important;
}

div.row-form-body-questions-item.row-collapsed div.expand-collapse-icon i.fa-chevron-down{
    display: inline-block !important;
}

div.row-form-body-questions *> .field-label-value{
    display: block;
}

div.row-form-body-questions .field-input-value{
    display: none;    
}

div.row-form-body-questions.tqa-on-edit-mode .field-label-value{
    display: none !important;
}

div.row-form-body-questions.tqa-on-edit-mode .field-input-value{
    display: block !important;
}


button.btn{
    background-color: #30bcea;
    border: 0.1rem solid #f1a83e;
    font-size: 1.4rem;
    font-weight: bold;
}

button.btn.btn-quest.tqa-btn-delete{
    border: 0.1rem solid rgb(187, 63, 63);
    color: rgb(187, 63, 63) !important;
}

button.btn.btn-quest.tqa-btn-save{
    border: 0.1rem solid rgb(91, 189, 91);
    color: rgb(91, 189, 91) !important;
}

button.btn.btn-quest.tqa-btn-edit{
    border: 0.1rem solid dodgerblue;
    color: dodgerblue !important;
}

div.row-form-body-questions{
    position: relative;
}

div.delete-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(63, 44, 44, .8); /* Opacidad del 50% */
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center; /* Centraliza verticalmente */
    flex-direction: column; /* Asegura que los elementos estén en columna */
    row-gap: 2rem;
}

div.delete-backdrop span{
    font-size: 1.6rem;
    font-weight: bold;
    color: whitesmoke;
}

div.delete-backdrop div.delete-confirmation-buttons{
    display: flex;
    justify-content: center;
    column-gap: 2rem;
}

div.delete-backdrop div.delete-confirmation-buttons .btn-danger{
    background-color: whitesmoke;
    color: red;
}

div.delete-backdrop div.delete-confirmation-buttons .cancel-delete{
    background-color: whitesmoke;
    color: dodgerblue;
}

div.row-form-body-questions_new{
    margin-top: 0.5rem;
    background-color: #9fcbcc;
    padding: 0.1rem;
    border: 0.1rem solid #233f23;
    border-radius: 1rem;    
    position: relative;

    div.row-form-body-questions-item-new_body{
        width: 100%;
        display: flex;
        flex-direction: column;

        div.row-form-body-questions-item-new-body-row{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            
            div.row-form-field.question-item-promt {
                width: 60%;
            }

            div.row-form-field.question-item-type {
                width: 40%;
            }

            div.row-form-field.question-item-description {
                width: 50%;
            }

            div.row-form-field.question-item-instructions {
                width: 50%;
            }

            
        }
    }

    div.row-form-body-questions-item-footer{
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-right: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: end;
        column-gap: 0.5rem;

        button.tqa-btn-save{
            color: #124112 !important;
        }
    }
}

div.update-backdrop,
div.newQuestion-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(63, 44, 44, .8); /* Opacidad del 50% */
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center; /* Centraliza verticalmente */
    flex-direction: column; /* Asegura que los elementos estén en columna */
    row-gap: 2rem;

    span{
        font-size: 1.6rem;
        font-weight: bold;
        color: whitesmoke;
    }

    div.created-confirmation-buttons{
        display: flex;
        justify-content: center;
        column-gap: 2rem;
    }
}

footer.app_blade_footer{
    position: sticky;
    bottom: 0;
    width: 100%;
}

#alertMessage{
    position: fixed;
    top: 9rem;
    left: 0;
    width: 100%;
    z-index: 9999;
    text-align: center;
    padding: 1rem;
    font-size: 2rem;
    font-weight: bold;
    background-color: whitesmoke; /* Color de fondo */
}

#alertMessage.alert-success{
    color: green; /* Color del texto */
}

#alertMessage.alert-danger{
    color: red; /* Color del texto */
}

/* Tarjetas de la landing page */
.tqa-card {
    border: 2px solid #f1a83e;
    border-radius: 1rem;
    transition: all 0.3s ease;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.tqa-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-color: #104d88;
}

.tqa-card .card-body i {
    transition: color 0.3s ease;
}

.tqa-card:hover .card-body i {
    color: #f1a83e !important;
}

.tqa-box.container{
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: var(--sombra);
    overflow: hidden;
    padding: 0rem;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3.2rem;
        flex-wrap: wrap;
        gap: 1.6rem;
    }

    .header h1 {
        font-size: 3.2rem;
        font-weight: 600;
        color: var(--color-primario);
        position: relative;
        padding-bottom: 0.8rem;
    }

    .header h1::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 4px;
        background: var(--color-acento);
        border-radius: 2px;
    }

    /* Botones */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        padding: 0.96rem 1.92rem;
        border: none;
        border-radius: 30px;
        font-size: 1.52rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        background: white;
        color: var(--color-texto);
        border: 1px solid var(--color-borde);
        text-decoration: none;
    }

    .btn i {
        font-size: 1.6rem;
    }

    .btn-primary {
        background: var(--color-primario) !important;
        color: white;
        border: none;
        box-shadow: 0 4px 10px rgba(30, 60, 114, 0.3);
    }

    .btn-primary:hover {
        background: var(--color-secundario) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(30, 60, 114, 0.4);
    }

    .btn-danger {
        background: var(--color-peligro);
        color: white;
    }

    .btn-danger:hover {
        background: #c0392b;
    }

    .btn-icon {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        background: transparent !important;
        border: 1px solid var(--color-borde) !important;
        color: var(--color-texto) !important;
    }

    .btn-icon:hover {
        background: var(--color-primario) !important;
        color: white !important;
        border-color: var(--color-primario) !important;
        transform: scale(1.05);
    }

    .btn-mint {
        background-color: #20c997 !important;
        color: #fff;
        border: none;
    }
    .btn-mint:hover {
        background-color: #1aa179 !important;
    }

    /* Tabla de usuarios */
    .user-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 2.4rem;

    }

    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .pagination-controls {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    /* Estilo para el select de cantidad de registros */
    select.form-select-sm {
        width: auto;
        display: inline-block;
        border-radius: 30px;
        border: 1px solid var(--color-borde);
        padding: 0.5rem 2rem 0.5rem 1rem;
        font-size: 1.4rem;
    }

    .page-btn {
        min-width: 40px;
        height: 40px;
        border-radius: 40px;
        border: 1px solid var(--color-borde);
        background: white;
        color: var(--color-primario);
        font-weight: 500;
        transition: 0.1s;
    }

    .page-btn.active {
        background: var(--color-primario);
        color: white;
        border-color: var(--color-primario);
    }

    .page-btn:disabled {
        opacity: 0.25;
        cursor: not-allowed;
        pointer-events: none; 
    }

    .page-btn:not(.active):hover {
        background: var(--color-fondo);
    }

    .user-table th {
        text-align: left;
        padding: 1.6rem 1.28rem;
        background: var(--color-fondo);
        color: var(--color-primario);
        font-weight: 600;
        font-size: 1.44rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid var(--color-borde);
    }

    .user-table td {
        padding: 1.6rem 1.28rem;
        border-bottom: 1px solid var(--color-borde);
        vertical-align: middle;
        font-size: 1.6rem;
    }

    .user-table tbody tr:hover {
        background: #f9fafc;
    }

    /* Badges para estado */
    .badge {
        display: inline-block;
        padding: 0.48rem 1.6rem;
        border-radius: 50px;
        font-size: 1.28rem;
        font-weight: 500;
        text-align: center;
        min-width: 85px;
    }

    .badge.active {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .badge.blocked {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .fa-toggle-on{
        color: #27ae60 !important;
    }

    .fa-toggle-off{
        color: #e74c3c !important;
    }

    /* Columna de acciones */
    .actions-cell {
        display: flex;
        gap: 0.8rem;
        flex-wrap: wrap;
    }

    /* Búsqueda (opcional) */
    .search-box {
        display: flex;
        align-items: center;
        background: white;
        border: 1px solid var(--color-borde);
        border-radius: 40px;
        padding: 0.48rem 0.48rem 0.48rem 19.2rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }

    .search-box input {
        border: none;
        outline: none;
        padding: 0.8rem 0;
        width: 220px;
        font-size: 1.52rem;
    }

    .search-box button {
        background: var(--color-primario);
        color: white;
        border: none;
        border-radius: 40px;
        padding: 0.8rem 1.92rem;
        cursor: pointer;
        transition: 0.2s;
    }

    .search-box button:hover {
        background: var(--color-secundario);
    }

    /* Responsive */
    @media (max-width: 768px) {
        body { padding: 1.6rem; }
        .container { padding: 2.4rem; }
        .header { flex-direction: column; align-items: stretch; }
        .user-table thead { display: none; }
        .user-table, .user-table tbody, .user-table tr, .user-table td { display: block; width: 100%; }
        .user-table tr { margin-bottom: 2.4rem; border: 1px solid var(--color-borde); border-radius: 12px; padding: 1.6rem; background: white; }
        .user-table td { display: flex; justify-content: space-between; align-items: center; border: none; padding: 0.8rem 0; }
        .user-table td::before { content: attr(data-label); font-weight: 600; width: 40%; color: var(--color-primario); }
        .actions-cell { justify-content: flex-end; }
    }

    @media (max-width: 600px) {
        .detalle-grid {
            grid-template-columns: 1fr;
        }
    }

    /* MODAL */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        backdrop-filter: blur(3px);
    }

    .modal-container {
        background: white;
        border-radius: 24px;
        width: 90%;
        max-width: 500px;
        box-shadow: var(--sombra);
        overflow: hidden;
        animation: modalFadeIn 0.3s;
    }

    .modal-container.user-detail-modal{
        max-width: 1200px;
        max-height: 90vh;
        overflow-y: auto;
    }

    @keyframes modalFadeIn {
        from { opacity: 0; transform: translateY(-30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .modal-header {
        padding: 20px 25px;
        background: var(--color-primario);
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .modal-header h2 {
        font-size: 2.4rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .modal-header h2 i {
        color: var(--color-acento);
    }

    .modal-close {
        background: none;
        border: none;
        color: white;
        font-size: 2.4rem;
        cursor: pointer;
        transition: 0.2s;
    }

    .modal-close:hover {
        color: var(--color-acento);
        transform: scale(1.1);
    }

    .modal-body {
        padding: 25px;
    }

    .info-usuario {
        background: #f8f9fa;
        border-radius: 16px;
        padding: 15px;
        margin-bottom: 20px;
        border-left: 4px solid var(--color-acento);
    }

    .info-usuario p {
        margin: 5px 0;
        font-size: 1.6rem;
    }

    .info-usuario strong {
        color: var(--color-primario);
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        font-weight: 600;
        color: var(--color-primario);
        margin-bottom: 8px;
        font-size: 1.52rem;
    }

    .form-group label i {
        color: var(--color-acento);
        margin-right: 6px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid var(--color-borde);
        border-radius: 12px;
        font-size: 1.6rem;
        background: #fafbfc;
        transition: 0.2s;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
        outline: none;
        border-color: var(--color-primario);
        box-shadow: 0 0 0 3px rgba(30,60,114,0.1);
    }

    .form-group textarea {
        resize: vertical;
        min-height: 100px;
    }

    .razon-requerida {
        color: var(--color-peligro);
        font-size: 1.36rem;
        margin-top: 5px;
        display: none;
    }

    .razon-requerida.mostrar {
        display: block;
    }

    /* Sección de detalles en dos columnas */
    .detalle-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 30px;
    }

    .detalle-item {
        border-bottom: 1px solid var(--color-borde);
        padding-bottom: 10px;
    }

    .detalle-item .etiqueta {
        font-size: 1.36rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-primario);
        font-weight: 600;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .detalle-item .etiqueta i {
        color: var(--color-acento);
        width: 18px;
    }

    .detalle-item .valor {
        font-size: 1.76rem;
        font-weight: 500;
        color: var(--color-texto);
        word-break: break-word;
    }

    .badge-estado {
        display: inline-block;
        padding: 0.3rem 1rem;
        border-radius: 50px;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .badge-activo {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .badge-inactivo {
        background: #e2e3e5;
        color: #383d41;
        border: 1px solid #d6d8db;
    }

    .badge-bloqueado {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    

    .modal-footer {
        padding: 15px 25px 25px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        border-top: 1px solid var(--color-borde);
    }

    .modal-footer .btn {
        padding: 10px 25px;
    }

    .mensaje-adicional {
        background: #fff3cd;
        border: 1px solid #ffeeba;
        border-radius: 12px;
        padding: 12px 15px;
        margin: 15px 0;
        color: #856404;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mensaje-adicional i {
        font-size: 1.92rem;
        color: #f39c12;
    }

    btn-cerrar {
        background: var(--color-primario);
        color: white;
        border: none;
        padding: 10px 30px;
        border-radius: 30px;
        cursor: pointer;
        font-weight: 600;
        transition: 0.2s;
    }

    .btn-cerrar:hover {
        background: var(--color-secundario);
    }

    .header {
        flex-direction: column;
        align-items: stretch;
    }
    .detail-row {
        flex-direction: column;
    }
    .detail-label {
        width: auto;
    }
}

.tqa-box.audit.container {
    .audit-list {
        list-style: none;
        padding: 0;
        margin: 0;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--color-borde);
    }

    .audit-item {
        display: flex;
        flex-direction: column;
        padding: 1.6rem 2rem;
        background: white;
        border-bottom: 1px solid var(--color-borde);
        cursor: pointer;
        transition: background 0.15s;
    }

    .audit-item:last-child {
        border-bottom: none;
    }

    .audit-item:hover {
        background: #f9fafc;
    }

    .audit-item.active {
        background: #e8f0fe;
        border-left: 6px solid var(--color-acento);
    }

    .audit-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.4rem;
    }

    .audit-name {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--color-primario);
    }

    .badge {
        display: inline-block;
        padding: 0.48rem 1.6rem;
        border-radius: 50px;
        font-size: 1.28rem;
        font-weight: 500;
        text-align: center;
        min-width: 85px;
    }

    .badge-active {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .badge-inactive {
        background: #e2e3e5;
        color: #383d41;
        border: 1px solid #d6d8db;
    }

    .audit-description {
        font-size: 1.4rem;
        color: #555;
        margin-bottom: 0.4rem;
    }

    .audit-meta {
        font-size: 1.3rem;
        color: #777;
        display: flex;
        gap: 2rem;
    }

    /* Panel de detalles */
    .detail-panel {
        background: white;
        border-radius: 24px;
        padding: 2.4rem;
        box-shadow: var(--sombra);
        border: 1px solid var(--color-borde);
        height: 100%;
    }

    div.title-bar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        
        h3 {
            font-size: 2.4rem;
            color: var(--color-primario);
            margin-bottom: 1.6rem;
            border-bottom: 2px solid var(--color-acento);
            padding-bottom: 0.8rem;
        }
    } 

    .detail-row {
        display: flex;
        margin-bottom: 1.2rem;
        font-size: 1.6rem;
    }

    .detail-label {
        width: 140px;
        font-weight: 600;
        color: var(--color-primario);
    }

    .detail-value {
        flex: 1;
        color: var(--color-texto);
    }

    /*Preguntas*/
    div.questionsListContainer{
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    
        div.questions-list{
            overflow-y: auto;

            .card-auditQuestion {
                border: 1px solid var(--color-borde);
                border-radius: 12px;
                overflow: hidden;
                background: white;
                box-shadow: 0 2px 8px rgba(0,0,0,0.03);
                margin-bottom: 1.5rem;
            }
    
            .card-auditQuestion .card-header {
                background-color: var(--color-fondo);
                padding: 12px 16px;
                border-bottom: 1px solid var(--color-borde);
            }
    
            .card-auditQuestion .card-header p {
                margin: 0;
                font-weight: 600;
                font-size: 1.6rem;
                color: var(--color-primario);
            }
    
            .card-auditQuestion .card-body {
                padding: 16px;
                font-size: 1.4rem;
            }
    
            .badge-info {
                background-color: #17a2b8;
                color: white;
                padding: 4px 8px;
                border-radius: 12px;
                font-size: 1.2rem;
                margin-right: 4px;
            }
    
            .text-muted {
                color: #6c757d;
            }
    
            /* Botón volver */
            .btn-sm {
                padding: 0.5rem 1rem;
                font-size: 1.2rem;
            }
        }
    }

    
}

.tqa-create.container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: var(--sombra);
    overflow: hidden;
    padding: 3.2rem; /* antes 2rem * 1.6 */

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3.2rem; /* antes 2rem * 1.6 */
        flex-wrap: wrap;
        gap: 1.6rem; /* antes 1rem * 1.6 */
    }

    .header h1 {
        font-size: 3.2rem; /* antes 2rem * 1.6 */
        font-weight: 600;
        color: var(--color-primario);
        position: relative;
        padding-bottom: 0.8rem; /* antes 0.5rem * 1.6 */
    }

    .header h1::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 4px;
        background: var(--color-acento);
        border-radius: 2px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem; /* antes 0.5rem * 1.6 */
        padding: 0.96rem 1.92rem; /* antes 0.6rem 1.2rem * 1.6 */
        border: none;
        border-radius: 30px;
        font-size: 1.52rem; /* antes 0.95rem * 1.6 */
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        background: white;
        color: var(--color-texto);
        border: 1px solid var(--color-borde);
        text-decoration: none;
    }

    .btn i {
        font-size: 1.6rem; /* antes 1rem * 1.6 */
    }

    .btn-primary {
        background: var(--color-primario);
        color: white;
        border: none;
        box-shadow: 0 4px 10px rgba(30, 60, 114, 0.3);
    }

    .btn-primary:hover {
        background: var(--color-secundario);
        transform: translateY(-2px);
    }

    .btn-secondary {
        background: transparent;
        border: 1px solid var(--color-borde);
    }

    .btn-secondary:hover {
        background: #e2e6ea;
    }

    .btn-warning {
        background: var(--color-acento);
        color: white;
    }

    .btn-warning:hover {
        background: var(--color-warning-hover);
    }

    .btn-group {
        display: flex;
        gap: 10px;
    }

    /* Formulario */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem; /* antes 1.5rem * 1.6 */
        margin-top: 1.6rem; /* antes 1rem * 1.6 */
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.8rem; /* antes 0.5rem * 1.6 */
    }

    .form-group.error {
        label{
            color: var(--color-peligro);
            i{
                color: var(--color-peligro);
            }
        }
    }

    .form-group.full-width {
        grid-column: span 2;
    }
    
    label {
        font-weight: 600;
        color: var(--color-primario);
        font-size: 1.52rem; /* antes 0.95rem * 1.6 */
        display: flex;
        align-items: center;
        gap: 0.8rem; /* antes 0.5rem * 1.6 */
    }

    label i {
        color: var(--color-acento);
        width: 18px;
    }

    input, select, textarea {
        padding: 1.2rem 1.6rem; /* antes 0.75rem 1rem * 1.6 */
        border: 1px solid var(--color-borde);
        border-radius: 12px;
        font-size: 1.6rem; /* antes 1rem * 1.6 */
        transition: 0.2s;
        background: #fafbfc;
    }

    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--color-primario);
        box-shadow: 0 0 0 3px rgba(30,60,114,0.1);
    }

    /* Fecha de activación (solo lectura en edición) */
    input[readonly] {
        background: #e9ecef;
        cursor: not-allowed;
    }

    /* Estado con badge */
    .estado-selector {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .badge-preview {
        display: inline-block;
        padding: 0.48rem 1.6rem; /* antes 0.3rem 1rem * 1.6 */
        border-radius: 50px;
        font-size: 1.44rem; /* antes 0.9rem * 1.6 */
        font-weight: 500;
    }

    .badge-activo { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
    .badge-inactivo { background: #e2e3e5; color: #383d41; border: 1px solid #d6d8db; }
    .badge-bloqueado { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

    /* Acciones del formulario */
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 1.6rem; /* antes 1rem * 1.6 */
        margin-top: 3.2rem; /* antes 2rem * 1.6 */
        padding-top: 2.4rem; /* antes 1.5rem * 1.6 */
        border-top: 1px solid var(--color-borde);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
        }
        .form-group.full-width {
            grid-column: span 1;
        }
    }

    /* Modal overlay */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .modal-overlay.show {
        opacity: 1;
    }

    .modal-container {
        background: white;
        border-radius: 20px;
        box-shadow: var(--sombra, 0 10px 30px rgba(0,0,0,0.2));
        width: 90%;
        max-width: 500px;
        overflow: hidden;
        animation: modalSlideIn 0.3s ease;
    }

    @keyframes modalSlideIn {
        from {
            transform: translateY(-30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-header {
        padding: 2.4rem 2.4rem 1.6rem;
        text-align: center;
    }

    .modal-icon {
        font-size: 6rem;
        margin-bottom: 1.6rem;
    }

    .modal-icon .fa-check-circle {
        color: #28a745;
    }

    .modal-icon .fa-exclamation-circle {
        color: var(--color-peligro, #dc3545);
    }

    .modal-header h2 {
        font-size: 2.8rem;
        font-weight: 600;
        color: var(--color-primario, #1e3c72);
        margin: 0;
    }

    .modal-body {
        padding: 0 2.4rem 2.4rem;
        text-align: center;
    }

    .modal-body p {
        font-size: 1.8rem;
        color: var(--color-texto, #333);
        line-height: 1.5;
        margin: 0;
    }

    .modal-footer {
        padding: 1.6rem 2.4rem 2.4rem;
        display: flex;
        gap: 1.6rem;
        justify-content: center;
        border-top: 1px solid var(--color-borde, #dee2e6);
    }

    .modal-footer .btn {
        min-width: 180px;
        padding: 1.2rem 2rem;
        font-size: 1.6rem;
    }
}

div.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background-color: #f9fafb;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    max-width: 400px;
    margin: 2rem auto;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    text-align: center;
    color: #1f2937;

    .empty-state-icon {
        font-size: 4rem;
        line-height: 1;
        margin-bottom: 1rem;
        filter: drop-shadow(0 4px 2px rgba(0,0,0,0.05));
    }

    .empty-state-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #111827;
    }
    
    .empty-state-message {
        font-size: 1rem;
        color: #6b7280;
        margin-bottom: 1.5rem;
    }
    
    .empty-state-btn {
        display: inline-block;
        background-color: #3b82f6;
        color: white;
        font-weight: 500;
        padding: 0.6rem 1.5rem;
        border-radius: 9999px;
        text-decoration: none;
        transition: background-color 0.2s;
        border: none;
        cursor: pointer;
        font-size: 0.95rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }
    
    .empty-state-btn:hover {
        background-color: #2563eb;
    }
}





/* ============================================ */
/* Popup de confirmación de cierre de sesión    */
/* Reutiliza la misma estructura que el de expiración */
/* ============================================ */
#logoutPopup.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 100000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#logoutPopup.popup-overlay.show {
    display: flex;
}

#logoutPopup .popup-card {
    background-color: var(--color-text-light);
    width: 400px;
    max-width: 90%;
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

#logoutPopup .popup-header {
    background-color: var(--color-primary);
    color: white;
    padding: 20px 25px;
    text-align: center;
    position: relative;
}

#logoutPopup .popup-header i {
    font-size: 40px;
    color: var(--color-accent);
    margin-bottom: 10px;
}

#logoutPopup .popup-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: white;
}

#logoutPopup .popup-body {
    padding: 25px;
    text-align: center;
}

#logoutPopup .popup-body .message {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 500;
}

#logoutPopup .popup-actions {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    padding: 0 25px 25px;
}

#logoutPopup .btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

#logoutPopup .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-accent);
}

#logoutPopup .btn-primary:hover {
    background-color: #0a3b5e;
    color: #f9a826;
}

#logoutPopup .btn-secondary {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

#logoutPopup .btn-secondary:hover {
    background-color: #d48c1f;
    color: #0a3b5e;
}

/* Animación */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Responsive */
@media (max-width: 480px) {
    #logoutPopup .popup-card {
        width: 95%;
    }
    #logoutPopup .popup-actions {
        flex-direction: column;
    }
}