:root {
    --blanco: #ffffff;
    --negro: #000000;
    --rojo: #ff0000;
    --verde: #00ff00;
    --naranja: #ffaa00;
    --primario: #e3eba5;
    --secundario: #5383d5;
    --gris: #757575;
    --grisClaro: #DFE9F3;
    --azuloscuro: #456fbd;
    --azul: #2196F3;
    --azulclaro: #d6f3fb;
    --tabs-border-color: #ABCDEF;
    --tabs-border-size: 3px;
    --tabs-width: 120px;
    --tabs-height: 40px;
            }

/*  Globales **/
html {
    font-size: 62.5%;
    box-sizing: border-box; /* Hack para Box Model **/
    
}
body {
    font-size: 16px; /* 1rem = 10px */
    font-family: 'Krub', sans-serif;
}


a {
    color: var(--negro);
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    padding: 0rem;
}

a:hover {
    background-color: var(--tabs-border-color);
}
/*CABECERA DE TODAS LAS PAGINAS
/*Barra de Enlaces*/
.menu_ppal {
    margin-left: 3rem ;
    text-decoration: none;
    font-size: 4 rem;
    background-color: var(--grisClaro);
    -webkit-text-fill-color: var(--negro);
    transition: background-color 0.3s ease;
}

/* Navegacion Principal */
.nav-bg {
    display: block;
    font-size: 4 rem;
    background-color: var(--grisClaro);
    text-decoration-line: none;
    padding: 0.5rem;
}

/* Titulo h1 */
h1 {
  text-align: center;
    font-size: 7rem;
    font-weight: 100; /* 100 es el valor más fino */
    background: #2196F3;  /* fallback for old browsers */
    background: linear-gradient(to right, #4467b9, #2196F3, #4467b9);  /* Chrome 10-25, Safari 5.1-6 */
    font-family: Edwardian Script ITC, cursive;
    -webkit-text-fill-color: #e3eba5;
    margin: 0%;
   
}

/*FIN CABECERA DE TODAS LAS PAGINAS*/

h2 {
   font-size: 2.8rem;
}

h3 {font-size: 1.8rem;}

.DIV1, .nav-bg {
 scroll-snap-align: left;
 scroll-snap-stop: always;
}

.DIV1 {
 display:Grid;
 grid-template-columns: 19% 81%;
 background-color: var(--grisClaro);
 overflow: auto;

 
}


#empleados {font-weight: 800;}
.Selector_Empleados {
  background-color: var(--grisClaro);
  margin: 3px;
  padding: 0.1rem;
  border: 1px solid var(--blanco);
}


#fecha_ppal {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem;
  background-color: var(--blanco);
  cursor: pointer;
  border: 3px solid var(--azuloscuro);
  border-radius: 10px;
  padding: 1rem;
}

.empleado {
  font-size: 2rem;
  font-weight: 700;
  margin: 0,5rem;
  background-color: var(--blanco);
  border: 3px solid var(--azuloscuro);
  border-radius: 10px;
  padding: 1rem;
}

/*Tablas*/

table {
    border: 1px solid var(--gris);
    border-collapse: collapse;
    margin: 1rem;
    width: 50%;

}
table tr:nth-child(odd) {
    background-color: var(--azulclaro);
}
th {
  border: 1px solid var(--gris);
  border-collapse: collapse;
  width:max-content;
  background-color: var(--tabs-border-color);}
td {
  border: 1px solid var(--gris);
  border-collapse: collapse;
  width:max-content;
  text-align: center;
 }

 #tabla_empleados {
  border: 1px solid var(--gris);
  border-collapse: collapse;
  margin: 1rem;
  width: 90%;
  text-align: left;
}

#tabla_empleados  :hover {
    background-color:var(--tabs-border-color);
    cursor: pointer; 
}

#tabla_empleados_emp  :hover {
    background-color:var(--tabs-border-color); 
    cursor: pointer;
}

#tabla_incidencias  :hover {
    background-color:var(--tabs-border-color); 
    cursor: pointer;
}

/*********************Sistema de pestañas******************************/
 
.tabs * {
  box-sizing: border-box;
}

/* funcionamiento básico del sistema de pestañas */
.tab-content {
  display: none;
}
.tab:target .tab-content, .tab:last-of-type .tab-content {
 display: block;
}
.tab:target ~ .tab:last-of-type .tab-content {
  display: none;
}
/* esto es para posicionar las pestañas correctamente */
.tab-container {
  width: 180rem; /* ancho total de las pestañas  */
  position: relative;
  padding-top: var(--tabs-height); /* en esta zona colocaremos las pestañas */
} 

#tab1>a { --tabs-position: 0; }
#tab2>a { --tabs-position: 1; }
#tab3>a { --tabs-position: 2; }
#tab4>a { --tabs-position: 3; }
#tab5>a { --tabs-position: 4; }
#tab6>a { --tabs-position: 5; }
#tab7>a { --tabs-position: 6; }
#tab8>a { --tabs-position: 7; }
#tab9>a { --tabs-position: 8; }

.tab>a {
  text-align: center;
  position: absolute;
  width: calc(var(--tabs-width));
  height: calc(var(--tabs-height) + var(--tabs-border-size)); 
  top:0;
  left: calc(var(--tabs-width) * var(--tabs-position)); /* posición de cada pestaña */
  
}

/* más aspecto */
.tabs { 
  padding: 10px;
  color: var(--negro);
}
.tab-content {
  background-color: var(--blanco); 
  padding: 20px;
  border: var(--tabs-border-size) solid var(--tabs-border-color);
  border-radius: 0 0 10px 10px;
  position: relative;
  z-index: 100;
}
.tab>a {
  background-color: var(--secundario); 
  color: var(--primario);
  padding: 10px;
  border: var(--tabs-border-size) solid var(--tabs-border-color);
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
}
.tab:target>a, .tab:last-of-type>a {
  background-color: var(--secundario); 
  z-index: 200;
}
.tab:target ~ .tab:last-of-type>a {
  background-color: var(--secundario); 
  z-index: 0; 
}

.tab>a:hover {
      background-color:royalblue;
  }

/*************************************************************************/



.imgEditar:hover{
     background-color:var(--tabs-border-color); 
     cursor:pointer 
}
.imgEliminar:hover{
     background-color:var(--tabs-border-color); 
     cursor:pointer 
}
#fecha_ppal:hover{
     background-color:var(--tabs-border-color); 
     cursor:pointer 
}
#todos, #activos {
  cursor: pointer;
}

/*horas totales*/
.htrabajo {
  font-weight: bold;
  font-size: 3rem;
}

.hpresencia {
  font-weight: bold;
  -webkit-text-fill-color: var(--azul);
}

/*botons*/
.boton:hover{
      background-color:royalblue;
  }

.boton{
  font-size: 2rem;
  font-weight: 700;
  background-color: var(--secundario);
  -webkit-text-fill-color: var(--primario);
  border: 3px solid var(--tabs-border-color);
  border-radius: 10px;
  padding: 1rem;
  color: var(--negro);

 &.nuevo {
  border: 3px solid var(--tabs-border-color);
  color: var(--negro);
  }
 
 &.cancelar {
  -webkit-text-fill-color: var(--naranja);
  }
 
 &.guardar {
  -webkit-text-fill-color: var(--verde);
 
  }

&.editar {
  font-size: 1rem;
  background-color: var(--naranja);
  padding: 2px;
  border: 1px solid var(--naranja);
  border-radius: 5px;
  -webkit-text-fill-color: var(--blanco);
  }

&.eliminar{
  -webkit-text-fill-color: var(--rojo);
}

&.eliminarGran{
  font-size: 2rem;
  background-color: var(--rojo);
  -webkit-text-fill-color: var(--blanco);
}
}

.alerta {
   font-size: 2rem;
   font-weight: 700;
   position: top;
   
     &.error{
      -webkit-text-fill-color: var(--primario);
       background-color: var(--rojo);
      }

    &.exito {
      -webkit-text-fill-color: var(--negro);
      background-color: var(--verde);
    }
 
}

.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../img/crono.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
    position: relative;
    margin-bottom: 2rem;
    input{
      display: block;
      margin: 1rem;
      padding: 0.5rem;
      border-radius: 1rem;
    }
   
    fieldset{
      background-image: 
      linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
      margin-top: 2rem;
      padding: 2rem;
      position:relative;
      overflow:auto;
      border-radius:6px;
    }
}

/**********************************CONFIGURACION****************************/
section{
  display: flex;
}
  
fieldset{
      position:relative;
      overflow:auto;
      border-radius:6px;
  }


.hocamdi{
      width:300px;
      margin:0 8px;
}
.ajred{
      width:300px;
      margin:0 8px;
}
.cortesias{
      width:300px;
      margin:0 8px;
}

/**********************************TERMINAL****************************/

#crono {
    margin: 0.5rem;
    font-size: 4rem;
    font-family: 'Digital dream skew';
    -webkit-text-fill-color: var(--primario);
    border: 3px solid var(--azul);
    border-radius: 10px;
    background-color:var(--azuloscuro); 
    padding: 1rem;
}

#terminal {
    text-align: center; 
}

/**********************RECUPERACION DE CONTRASEÑA********************************/
#formulario_recuperacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../img/crono.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
    position: relative;
    margin-bottom: 2rem;
}