:root{
    /*Definir la paleta de colores del documento*/
    --girs: #484951;
    --negro: #0a0b0f;
    --blanco:#ffffff;
    --aprob: #11ca0b;
    --non: #ca0b0b;
    --waiting: #ca7c0b;
    --enlaces:  #6b3bd7;
    --botones:  #007bff;
    --tabla: #1395B0;
    --hover: #BAD7D9;
    --focus: #6FBF83;
    --nav: #007bff; 
}

html{
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-snap-type: y mandatory;
}

body:not(.not){
    font-size: 16px;
    font-family: "Fira Sans", sans-serif;
    background-color: var(--negro);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.not{
    font-size: 16px;
    font-family: "Fira Sans", sans-serif;
    background-color: var(--negro);
}

.contenedor{
    background-color: var(--blanco);
    width: 100%;
    max-width: 35rem;
    border-radius: 2rem;
    padding: 2rem;
}

.contenedor-admin{
    min-height: 100vh;
    min-width: min-content;
    background-color: var(--blanco);
    border-radius: 2rem;
    padding: 2rem;
}

fieldset{
    border: none;
}

fieldset h1{
    text-align: center;
    color: var();
}

h1 span{
    text-transform: capitalize;
}

.primera-mayuscula{
    text-align: left;
    display: block;
    font-weight: bold;
    font-size: 1.8rem;
    padding-right: 1rem;
    padding-top: 1rem;
}

.primera-mayuscula span{
    text-transform: capitalize;
}

.una-palabra{
    text-align: left;
    text-transform: capitalize;
    display: block;
    font-weight: bold;
    font-size: 1.8rem;
    padding-right: 1rem;
    padding-top: 1rem;
}

span{
    text-transform: capitalize;
}

.selectOption{
    text-transform: uppercase;
    width: 32.4rem;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 1.6rem;
    background-color: var(--blanco);
    cursor:pointer;
}

.selectOption:hover{
    border-color: var(--botones);
}

.selectOption:focus{
    outline: none;
    border-color: var(--botones);
    box-shadow: 0px 0px 5px #007bff;
}
.select{
    text-transform: uppercase;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 1.6rem;
    background-color: var(--blanco);
    cursor:pointer;
}

.tamano{
    width: 30rem;
    padding: 1rem;
    font-size: 1.6rem;
    font-weight: normal;
    font-family: "Fira Sans", sans-serif;
}

.input{
    width: 65%;
    padding: 0.5rem;
    font-size: 1.6rem;
    font-weight: normal;
    font-family: "Fira Sans", sans-serif;
    box-sizing: border-box;
}

.boton{
    padding: 1rem;
    background-color: var(--botones);
    text-transform: capitalize;
    color: var(--blanco);
    width: 32.4rem;
    font-size: 1.8rem;
    font-weight: bold;
    border: none;
    text-decoration: none;
}
.boton--delete{
    background-color: var(--botones);
    text-transform: capitalize;
    color: var(--blanco);
    width: 95%;
    padding: 0.5rem;
    font-size: 1.8rem;
    font-weight: bold;
    border: none;
    text-decoration: none;
    text-align: center;
}
.boton-ajustes{
    background-color: var(--botones);
    text-transform: capitalize;
    color: var(--blanco);
    width: 100%;
    padding: 0.5rem;
    font-size: 1.8rem;
    font-weight: bold;
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
    border-radius: 1rem;
    box-shadow: 0 0.2rem 0.5rem var(--girs);
    margin-bottom: 1rem;
}


.boton:hover,
.boton-ajustes:hover,
.boton--delete:hover{
    cursor: pointer;
    transition: 1s;
    background-color: var(--enlaces);
}

.boton--a{
    display: block;
    width: 90%;
    text-align: center;
}

.pv{
    text-align: end;
}

.pv a{
    color: var(--botones);
}

.pv a:hover{
    color: var(--enlaces);
}

.txt-area{
    width: 30rem;
    padding: 1rem;
    resize: none;
    font-size: 1.6rem;
    font-weight: normal;
    font-family: "Fira Sans", sans-serif;
}

.txt-area_reporte{
    width: 30rem;
    height: 30rem;
    resize: none;
    font-size: 1.6rem;
    font-weight: normal;
    font-family: "Fira Sans", sans-serif;
}

.nav{
    display: flex;
    padding: 1rem;
    justify-content: space-evenly;
    gap: 1rem;
}

.nav a.activo {
    display: inline;
    background-color: var(--nav);     /* Fondo negro */
    color: var(--blanco);                /* Texto blanco */
    font-weight: bold;           /* Negrita */
    border-radius: 0.5rem;       /* Opcional para redondear bordes */
}

.nav a {
    text-decoration: none;
    color: var(--negro);
    padding-left: 1rem;
    padding-right: 1rem;
    text-transform: capitalize;
    font-weight: normal;
    font-size: 1.8rem;
}


.contenido{
    display: none;
}

.activo{
    display: block;
}


.epsacio-abajo{
    margin-bottom: 1rem;
}

.espacio-arriba{
    margin-top: 1rem;
}

.centrar{
    text-align: center;
}

.ajustes{
    background-color: var(--blanco);
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.2rem 0.5rem rgba(4, 0, 255, 0.842);
}

.ajustes a{
    display: block;
    padding: 1rem;
    text-decoration: underline;
    color: var(--negro);
    box-shadow: 0 0.2rem 0.5rem;
}

.contenedor-vales{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.vale{
    width: 100%;
    max-width: 350px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    box-shadow: 0 0.2rem 0.5rem var(--botones);
    box-sizing: border-box;
}

.izquierda{
    text-align: left;
}

.dos{
    display: flex;
    
}
.item{
    flex: 1;
}

.estados {
    display: block;
    text-align: end;
    text-transform: uppercase;
}

.estado-aprobado {
    color: var(--aprob); 
    font-weight: bold;/* Verde para "Aprobado" */
    text-transform: uppercase;
}

.estado-rechazado {
    color: var(--non); 
    font-weight: bold;/* Rojo para "Rechazado" */
}

.estado-pendiente {
    color: var(--waiting); 
    font-weight: bold;/* Naranja para "Pendiente" */
}

.estado-despachado {
    color: var(--girs); 
    font-weight: bold;/* Azul para "Despachado" */
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filtros input {
    width: 90%;
    padding: 1rem;
    font-weight: normal;
    font-family: "Fira Sans", sans-serif;
}

.filtros select{
    width: 47%;
    padding: 1rem;
}

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

.cont_ojo{
    position: relative;
    width:fit-content;
}
.ojo{
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}



.toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #323232;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: 30px;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s;
}
.toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 60px;
}
.toast.error {
    background-color: #d32f2f;
}
.toast.success {
    background-color: #388e3c;
}
.toast.info{
    background-color: var(--waiting);
}
.toast.desp{
    background-color: var(--girs);
}


.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal.show{
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: var(--blanco);
    padding: 20px 30px;
    border-radius: 10px;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    font-size: 1.5rem;
    animation: modalFadeIn 0.3s ease forwards;
}
.content{
    background: var(--blanco);
    text-align: center;
}

.modal-buttons {
    margin-top: 15px;
}

.modal-buttons .button {
    margin: 0 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.modal-btn{
    padding: 0.5rem 1rem;
    background-color: var(--botones);
    color: var(--blanco);
    border:none;
    border-radius: 0.4rem;
    cursor: pointer;
}
.modal-btn:hover,
.button:hover{
    cursor: pointer;
    background-color: var(--enlaces);
}

.modal-tamano{
    flex: 1;
    width: 100%;
    padding: 1rem;
    font-size: 1.6rem;
    font-weight: normal;
    font-family: "Fira Sans", sans-serif;
}

#btnConfirmYes {
    padding: 1rem 5rem;
    background-color: #4CAF50;
    color: white;
}

#btnConfirmNo {
    padding: 1rem 5rem;
    background-color: #f44336;
    color: white;
}

.modal.hide .modal-content{
    animation: modalFadeOut 0.3s ease forwards;
}

.hidden {
    display: none;

}

.ajustes_label{
    display: block;
    width: 35%;
    text-align: right;
    font-weight: bold;
    font-size: 1.6rem;
}

.precios-flex{
    display: flex;
    align-items: center;
    column-gap: 1rem;
    margin-bottom: 1rem;
}

.tabla{
    margin: auto;
    width: 95%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: "Fira Sans", sans-serif;
}

.tabla th, .tabla td{
    border: 0.2rem solid var(--tabla);
    padding: 1rem 1.5rem;
    text-align: left;
}

.tabla thead{
    background-color: var(--tabla);
    color: var(--blanco);
}

.tabla tr:hover{
    background-color: var(--hover);
}

.tabla td:focus{
    background-color: var(--focus);
}

.seleccionada{
    background-color: yellow;
}

.botones{
    display: flex;
    justify-content: space-between;
}

.botones .boton-aprobar,
.botones .boton-rechazar{
    /*display: block;*/
    width: 40%;
    padding: 1rem;
    color: var(--blanco);
    text-transform: uppercase;
    text-align: center;
}

.boton-aprobar{
    background-color: var(--aprob);
}

.boton-rechazar{
    background-color: var(--non);
}

.boton-aprobar:hover,
.boton-rechazar:hover{
    cursor: pointer;
}

#usuarios{
    align-items: center;
    justify-content: center;
}

.alert{
    color: var(--blanco);
    font-size: 10px;
}

.input-con-boton{
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.input-con-boton input {
    padding: 1rem;
    width: 21.6rem;
    /* padding-right: 2rem; */
    font-size: 16px;
    box-sizing: border-box;
}

.input-con-boton button{
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    height: 99%;
    width: 3.5rem;
    border: none;
    background: var(--botones);
    border-right: 1px solid var(--negro);
    border-top: 1px solid var(--negro);
    border-bottom: 1px solid var(--negro);
    color: var(--blanco);
    /* padding: 0 1rem; */
    cursor: pointer;
    font-size: 16px;
}

.input-con-boton button:hover{
    background-color: var(--enlaces);
}

.box{
    padding-right: 0;
}

@keyframes modalFadeIn{
    from{
        opacity: 0;
        transform: scale(0.9);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalFadeOut{
    from{
        opacity: 1;
        transform: scale(1);
    }
    to{
        opacity: 0;
        transform: scale(0.9);
    }
}