/*******************************************************************************
 *                             [Formulario fichar]                             *
 *******************************************************************************/
 html{
    overflow-x: hidden;
 }

#fichaje{
    margin-top: 1.5rem;
    flex-wrap: wrap;
    gap:2rem;
}
.empleado{
    display: flex;
    flex-direction: row;
    gap: .5rem;
    background-color: rgba(200 200 200 /.3);
    border-radius: .3rem;
    padding: .5rem;
    font-size: 1.5rem;
    align-items: center;
    
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    transition: .3s;
}



.iempleado:checked~.label-empleado {
    background-color: light-dark(var(--principal), var(--negro));
    color: white;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    pointer-events: none;
    cursor: default;
}


.horafichador{
    margin-top: -3.5rem;
    margin-left: -1.8rem;
    margin-right: -2rem;
    height: fit-content;
    background-color: rgb(255 255 255 /.6);
    border-radius: .3rem;
    padding: .2rem;
    box-shadow: rgb(100 100 111 / 0.2) 0px 7px 29px 0px;
    font-size: 1.2rem;
    font-style: italic;
    color: rgb(50 50 50 / 0.9)
}

.empleado~label{
    display: flex;
    flex-direction: row;
}

#buscador_fichaje{
    width: 12rem;
    height: 2.52rem;
}

#mostrarcontra {
    box-shadow: none;
    background: var(--principal);
    width: 3.5rem;
    border-radius: 0 .3rem .3rem 0;
    height: 2.53rem;
    fill: whitesmoke;
    border: none;
    padding-top: 0;
    margin-top: 0;
    margin-left: -.4rem;
}