@import "./animate.css";

/*Color principal var(--azul)*/
/*******************************************************************************
*                                  [Principal]                                 *
*******************************************************************************/
* {
    font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif !important;
}
:root{
    --azul:rgb(3, 94, 177);
    --verde:#02814a;
}
:root,
:hover,
:focus,
:active {
    accent-color: rgb(3 94 177 / 80%);
}

::selection {
    background-color: var(--azul);
    color: rgb(228, 228, 228);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #eee;
    min-height: 90vh;
    overflow-x: hidden;
}
abbr {
    cursor: help;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.5rem;
}

a:where(:hover,:focus){
    text-decoration: underline !important;
}

/*******************************************************************************
*                                   [Header]                                   *
*******************************************************************************/
header#menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: white;
    position: absolute;
    top: 0;
    width: 100%;
    height: 8rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}

#sectionima img {
    width: 38vh;
}

#enlacesmenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

header#menu a, .enlaces {
    color: var(--azul);
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
    margin-left: 1rem;
}
header#menu a:where(:hover,:focus) {
    color: var(--verde);
}
.enlaces{
    color:var(--azul);
}

/*******************************************************************************
*                                  [Cuerpo]                                 *
*******************************************************************************/
main,
#cuerpo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: white;
    padding: 2rem 1rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    margin-top: 8rem;
}

.blanco {
    color: #f9f9f9;
    fill: #f9f9f9;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

label svg {
    font-size: 1.6rem;
}


button.borrar,
.borde {
    filter: drop-shadow(.1px .1px 0 black) drop-shadow(-.1px -.1px 0 black);
    transition: .2s;
}
a svg,
button.borrar{
    transition: .3s;
}
a svg:hover,
button.borrar:hover {
    transform: scale(1.2);
}

.modificar,
.azul {
    color: cornflowerblue;
    transition: .3s;
}
.modificar{
    background-color: white;
    padding: .2rem;
    border-radius: .3rem;
}

.modificar:where(:focus,:hover){
    background-color: #dfdfdf;
}
.dorado {
    color: #F4B400;
}

.eliminar,
.rojo {
    color: var(--azul);
    fill: #b40000;
}

.negro {
    color: rgba(32, 32, 32, .8);
}

.verde {
    color: #167c02;
    fill: #167c02;
}

#mensaje,
#notificar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 6rem;
    /* left: 1rem; */
    opacity: 0;
    left: -20rem;
    padding: .5rem .8rem;
    border: 2px solid #202020;
    border-radius: .4rem;
    color: white;
    animation-name: notificar;
    animation-duration: 10s;
    z-index: 2;
}

#mensaje svg {
    margin-right: .5rem;
}

.fichado {
    background-color: darkolivegreen;
}

.fallo {
    background-color: brown;
}

.verificado {
    background-color: blueviolet;
}

@keyframes notificar {
    0% {}

    10%,
    70% {
        left: 2rem;
        opacity: 1;
    }

    75%,
    100% {
        left: -5rem;
        opacity: 0;
    }

}

#nada {
    background-color: #1a73e8;
    border: 2px solid black;
    border-radius: .4rem;
    padding: .1rem 1rem;
    margin-top: 2rem;
    color: white;
}

#modoimpr {
    display: flex;
    width: 50%;
    flex-direction: row;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
}

#modoimpr a {
    color: var(--azul);
    font-size: 1.3rem;
    text-decoration: none;
    text-align: right;
    transition: 1s;
}

#modoimpr a:hover {
    color: #b40000;
    text-decoration: underline;
}

.pre {
    display: none !important;
}

.no-seleccionable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*Ficha cada empleado beta 0.13*/
table,
tr,
td {
    empty-cells: hide;
}

.ficha {
    padding: .5rem;
    margin: 1rem;
    background-color: rgba(221, 200, 200,.1);
    border-radius: .4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.ficha header{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.ficha form{
    border: none;
    padding: 0;
}
.ficha form button{
    font-size: 1rem !important;
    border: none;
    box-shadow: none;
    filter:none;
}
.encabezadoficha {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.encabezadoficha h3 {
    margin-left: 2rem;
}

.pin .pin1 {
    border-radius: .6rem;
    background-color: rgba(255, 255, 255, .6);
    padding: .4rem .8rem;
    box-shadow: 1px 1px 6px 1px rgb(100, 100, 100);
}

.modificadoresficha {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
}

.tablaficha {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.tablaficha table,
.tablaficha td {
    border: hidden !important;
}

.pin {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

/*******************************************************************************
*                                 [Formulario]                                 *
*******************************************************************************/


form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 3rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

form .form-row {
    position: relative;
}

form .form-row:last-child {
    margin-bottom: 0;
}

input {
    font-size: 1.5rem;
}

form .form-row input[type=text],
form .form-row input[type=password] {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    outline: 0;
}

form .form-row input[type=text]+label[data-placeholder],
form .form-row input[type=password]+label[data-placeholder] {
    pointer-events: none;
    font-size: 1.5rem;
}

form .form-row input[type=text]+label[data-placeholder]:after,
form .form-row input[type=password]+label[data-placeholder]:after {
    content: attr(data-placeholder);
    display: block;
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translate(0%, -50%);
    transition: all 0.3s ease-in-out;
    padding: 0 0.25rem;
}

form .form-row input[type=text]:focus,
form .form-row input[type=text]:valid,
form .form-row input[type=text]:hover,
form .form-row input[type=password]:focus {
    border: 1px solid #1a73e8;
}

form .form-row input[type=text]:focus+label[data-placeholder]:after,
form .form-row input[type=text]:valid+label[data-placeholder]:after,
form .form-row input[type=password]:focus+label[data-placeholder]:after {
    transform: translate(-15%, -200%) scale(0.9, 0.9);
    color: #202020;
}

#horario {
    padding-top: 3rem;
}

#horario,
.horas,
.opcioneshoras,
#formulariohoras,
#fichaje {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    margin-top: -2rem;
}

.column #fichaje {
    margin: 0 !important;
}

#horario,
.opcioneshoras {
    flex-direction: column !important;
}


.horas {
    margin-top: -1.5rem;
}

.horas label {
    color: #202020;
}

.opcioneshoras {
    margin: 2rem 1rem;
    gap: 1rem;
}

select::-ms-expand {
    display: none;
}

select {
    background: #f0f0f0;
}

select,
option {
    font-size: 1.5rem !important;
}

select:hover,
option:hover {
    background: #dfdfdf;
    cursor: pointer;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border-radius: .4rem;
}

option {
    text-align: center;

}

form button,
.btn {
    color: black !important;
    background-color: white;
    padding: .3rem;
    font-size: 1.2rem;
    border-radius: .5rem;
    transition: .5s;
    border: none;
    box-shadow: 2px 2px 5px rgb(109, 109, 109);
    font-size: 2rem;
}

form button:hover,
.btn:hover {
    cursor: pointer;
    background-color: #c4c4c4;
    box-shadow: none;
    margin-bottom: -.1rem;
    margin-top: .1rem;
}

.form-row:nth-of-type(2),
.form-row:nth-of-type(3) {
    margin-top: 2rem;
}


#campocontra,
#campocontra1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

#campocontra button,
#campocontra1 button {
    box-shadow: none;
    margin-left: -3rem;
    background: none !important;
}

#campocontra button:hover,
#campocontra1 button:hover {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: var(--azul) !important;
}

#campocontra1 button {
    margin-top: 0 !important;
    margin-left: -4rem;
}

#campocontra1 button:hover {
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}

.editarhoras {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.editarhoras span {
    font-size: 1.4rem !important;
}

#formulariohoras {
    margin-top: 2rem;
    text-align: center;
}

#formulariohoras form {
    flex-direction: row;
    gap: 2rem;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.wrap {
    flex-wrap: wrap;
}

#boton {
    margin-top: 2rem;
}

#boton:hover {
    margin-bottom: 1px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#pin {
    border-radius: .4rem;
}

.fa-arrow-right-from-bracket {
    transform: scaleX(-1);
}

/*******************************************************************************
*                                    [Tabla]                                   *
*******************************************************************************/
table,
tr,
td {
    border: 2px solid #202020;
    border-collapse: collapse;
    font-size: 1.2rem;
}

thead tr td {
    font-weight: bold;
}

td {
    text-align: center;
    padding: .4rem;
}

.gap {
    gap: .3rem;
}

td:hover {
    background-color: rgb(26 115 232 / .6);
}
thead tr{
    background-color: rgb(210 210 210 / .8) !important;
}
tr:nth-child(even) {
    background-color: rgb(3 94 177 / .2);
}

tr:nth-child(odd) {
    background-color: rgb(2 129 74 / .2);
}

.nuevo {
    background-color: rgba(47, 104, 1, 0.8);
    border: 4px solid rgba(255, 215, 0, .9);
    color: white;
}

td a svg {
    color: #F4B400;
}

.nopuntual {
    background-color: var(--azul);
    color: white;
    font-weight: bold;
    animation-name: vivo;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@keyframes vivo {
    0% {
        background-color: rgb(204, 46, 46);
    }

    50% {
        background-color: rgb(129, 24, 24);
    }

    100% {
        background-color: rgb(204, 46, 46);
    }
}

/*******************************************************************************
*                                  [Imprimir]                                  *
*******************************************************************************/
#cuerpo.impr {
    margin-top: 0 !important;
    box-shadow: none;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#cuerpo .pagina table tbody tr td {
    font-size: .8rem !important;
    padding: .1rem;
}

#imprbody,
.impr {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.impr {
    display: flex;
    justify-content: flex-start !important;
}

.pagina:first-child {
    display: none;
}

.pagina {
    height: 21cm !important;
}

.pagina table {
    /*margin-top: .5cm;*/
}

.encabezadopag {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.encabezadopag section:first-child {
    display: flex;
    justify-content: space-between;
}


/*******************************************************************************
*                                   [Versión]                                  *
*******************************************************************************/

#muestraversion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: .5rem;
    right: 1rem;
    background-color: ghostwhite;
    border-radius: .4rem;
    padding: .2rem .5rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#muestraversion span {
    color: #202020;
}

/*******************************************************************************
*                                 [Responsive]                                 *
*******************************************************************************/
@media (max-width:900px) {
    #cuerpo {
        margin-top: 9rem !important;
        width: auto;
        padding: 2rem 1rem;
    }
}

@media (max-width:700px) {

    h1,
    h2 {
        text-align: center;
    }

    #menu {
        height: 8rem;
        flex-direction: column;
    }

    #enlacesmenu {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        align-content: center;
        line-height: 2rem;
    }

    table,
    td,
    tr {
        font-size: .6rem;
    }

    td {
        padding: 0;
    }

    .horas {
        flex-direction: column;
        gap: 0;
    }

    .opcioneshoras {
        margin: .3rem 1rem;
    }
}