/*----------Archivo de estilos usado en las páginas web del Sistema Gestora Roja----------*/
/*----------Variables gloables de la paleta de colores usada en el sistema----------*/
:root{
  --colorPrincipal: #1068A7;
  --colorFondo: #D7E4F3;
  --colorFondoGris: /*#f0f0f0*/ #E8E8E8;
  --colorFondoAzulLigero: /*#e6fff5*/ #BEDAEC;
  --colorPrincipalOscuro: #1482D1;
  --colorAzulLigero: #E5F1FA;
}
/*---------- Estilos de las etiquetas generales en el sistema----------*/
html {
  box-sizing: border-box;
  font-size: 65%;   /** TYPICAL 1 rem = 10 px **/
  font-family: 'PT-Sans', sans-serif;
}
*, *:before,*:after {
  box-sizing: inherit;
}
* {
  margin: 0;
  padding: 0;
}
body{
  background-color: var(--colorAzulLigero);
  overflow: auto;
}
/*----------Clases para la página de Login----------*/
.login-contenedor{
  width: 90vw;
  height: 90vh;
  max-width: 60rem;
  margin: auto;
  border-radius: 2rem;
}
.login-contenedor h3{
  font-size: 3rem;
  text-align: center;
  text-shadow: 2px 2px 5px #1482D1;
}
.login{
  margin: 3rem;
}
.login label{
  font-size: 2.5rem;
  margin: 1rem;
  padding: 1rem 0;
  width: 50%;
  border-radius: 5px;
  background-color: #ffffff;
  opacity: 0.4;
}
.login input{
  height: 3.2rem;
  margin: 1rem;
  padding: 1rem 0;
  font-size: 2rem;
  width: 50%;
  border: 2px solid #000000;
  border-radius: 5px;
  background-color: #ffffff;
  opacity: 1;
}
.loginBotones{
  display: flex;
}
.login button{
  font-size: 2.5rem;
  border: 2px solid #000000;
  border-radius: 5px;
  width: 60%;
}
/*----------Clases globales de estilo para elementos comunes----------*/
.pagina{
  display: grid;
  grid-template-columns: minmax(13rem, 18rem) minmax(25rem, 1fr);
}
.botonSalir{
  display: block;
  text-align: center;
  background-color: var(--colorPrincipal);
  color: #ffffff;
  padding: .5rem;
  border: none;
}
/*----------Estilos del menu de navegación y cabecero----------*/
.menu-nav{
  background-color: var(--colorPrincipalOscuro);
  color: #ffffff;
  height: 100%;
}
/*----------Estilo menu de navegacion modulos----------*/
.navegacion ul{
  list-style: none;
  transition-delay: 200ms;
}
.navegacion li{
  padding: 1rem;
}
.navegacion li:hover{
  background-color: #0091ea;
}
.navegacion li:hover a .icono-mod{
  color: #ffffff;
  transform: scale(1.2);
  transition: color 1s linear, transform 1s;
}
.navegacion li.activo,
.navegacion li.activo:hover{
  background-color: var(--colorFondo);
}
/*Estilo para links del menu principal
.navegacion li.activo>a,
.navegacion li.activo>a:hover{
  color: var(--colorPrincipalOscuro);
  font-weight: bold;
}*/

.navegacion li.activo>button,
.navegacion li.activo>button:hover{
  color: var(--colorPrincipalOscuro);
  font-weight: bold;
}
.navegacion li.activo .icono-mod,
.navegacion li.activo .icono-mod:hover{
  background-color: var(--colorPrincipalOscuro);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.1rem;
  padding: .5rem;
}
/*----------Estilos de los links y botones del menu principal----------*/
.navegacion a{
  color: #000000;
  font-size: 1.6rem;
  text-decoration: none;
  display: flex;
  justify-content: flex-start;
}
.navegacion a:hover{
  color: #ffffff;
}
.navegacion a i{
  margin-right: .5rem;
  font-size: 2rem;
}
.navegacion button{
  color: #000000;
  font-size: 1.6rem;
  text-decoration: none;
  display: flex;
  justify-content: flex-start;
  background: none;
  border: none;
  padding: 0;
}
.navegacion button:hover{
  color: #ffffff;
}
.navegacion button i{
  margin-right: .5rem;
  font-size: 2rem;
}

.niv1 li{
  position: relative;
}
.niv1 li:hover .niv2{
  visibility: visible;
}
.nav-sub{
  font-size: 2rem;
  position: absolute;
  left: 94%;
  margin: auto 0;
}
.niv2{
  position: absolute;
  top: 0;
  left: 100%;
  width: 85%;
  z-index: 10;
  background-color: var(--colorPrincipalOscuro);
  visibility: hidden;
/*  transform-origin: left top;
  transform: scale(0.85);*/
}

main{
  display: block;
}
/*----------Estilos del cabecero de la página----------*/
.cabecero{
  background-color: var(--colorPrincipal);
}
.avatar-cabecero{
  color: #ffffff;
  font-size: 2rem;
  display: flex;
  justify-content: flex-end;
  text-decoration: none;
}
.avatar-cabecero>img{
  width: 5rem;
  margin-right: 1rem;
}
.avatar-cabecero>a{
  text-decoration: none;
  margin-left: 1rem;
  margin-right: 2rem;
}
.avatar-cabecero>a i{
  margin: 0 1rem;
}
.avatar-cabecero>p{
  padding: 1rem;
}
/*----------Estilos para los formularios de captura----------*/
.altaForm1c{
  width: 98%;
  height: 98%;
  background-color: var(--colorFondoAzulLigero);
  margin: 0 auto;
  padding: 0.7rem;
  border-radius: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: .5rem;
}
.altaForm2c{
  width: 98%;
  height: 98%;
  background-color: var(--colorFondoAzulLigero);
  margin: 0 auto;
  padding: 0.7rem;
  border-radius: 1rem;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: .5rem;
}
.altaForm3c{
  width: 98%;
  height: 98%;
  background-color: var(--colorFondoAzulLigero);
  margin: 0 auto;
  padding: 0.7rem;
  border-radius: 1rem;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: .5rem;
}
.altaForm1c label,
.altaForm2c label,
.altaForm3c label{
  font-size: 1.5rem;
  font-weight: bold;
  display: block;
}
.altaForm1c input,
.altaForm1c select,
.altaForm1c textarea,
.altaForm2c input,
.altaForm2c select,
.altaForm2c textarea,
.altaForm3c input,
.altaForm3c select,
.altaForm3c textarea{
  margin: 0 .7rem;
  padding: 0 0 0 .5rem;
  height: 3rem;
  width: 96%;
  border-width: 2px;
  border-style: none solid solid none;
  border-radius: .5rem;
}
.altaForm1c textarea,
.altaForm2c textarea,
.altaForm3c textarea{
  height: 12rem;
  resize: none;
}
.selector{
  padding: 2rem .5rem 2rem 0rem;
}
.altaForm1c label.checkbox,
.altaForm2c label.checkbox,
.altaForm3c label.checkbox{
  font-size: 1.5rem;
  display: inline-block;
}
.altaForm1c input[type='checkbox'],input[type='radio'],
.altaForm2c input[type='checkbox'],input[type='radio'],
.altaForm3c input[type='checkbox'],input[type='radio']{
  font-size: 3rem;
  height: 1.5rem;
  transform: scale(1.5);
  display: inline-block;
  width: auto;
}
input.requerido,
textarea.requerido,
select.requerido{
  border-left: solid red;
  border-width: 2px 2px 2px 5px;  
}
.errorDatos{
  color: #dc143c;
}
input.errorDatos,
textarea.errorDatos,
select.errorDatos{
  border-color: #dc143c;
}
.mostrar{
  display: block;
}
.ocultar{
  display: none;
}
.expandeUltimo3{
  grid-column: span 3;
}
.expandeUltimo2{
  grid-column: span 2;
}
.expandeUltimo2 input,
.expandeUltimo3 input,
.expandeUltimo2 textarea,
.expandeUltimo3 textarea{
  width: 98.5%;
}
.expandeUltimo2 textarea,
.expandeUltimo3 textarea{
  height: 8rem;
  resize: none;
}
/*----------Estilos de tablas de contenidos----------*/
.tabla-contenidos{
  width: 100%;
  table-layout: auto;
  padding: 1.5rem .5rem;
  background-color: var(--colorFondoVerdeLigero);
  border-radius: 0 0 2rem 2rem;
}
/*.tabla-fija{
  table-layout: fixed;
}
.tabla-fija td{
  overflow-wrap: anywhere;
  word-break: break-word;
}*/
.tabla-contenidos th{
  text-align: center;
  padding: 1rem 0;
  border-width: 2px;
  border-style: none solid solid none;
  border-radius: 0 0 .7rem 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.tabla-contenidos td{
  text-align: center;
  padding: .7rem .5rem;
  border-width: 1px;
  border-style: none solid solid none;
  border-radius: 0 .5rem .7rem 0;
  font-size: 1.7rem;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: break-word;
}
div.editar-acc,
div.borrar-acc,
div.upload{
  display: inline-block;
}
a.editar-acc,
button.editar-acc,
button.borrar-acc,
a.ver,a.upload,
button.upload{
  margin: 0 auto;
  padding: .5rem;
  border-radius: 20%;
  color: #FFFFFF;
}
a.editar-acc,
button.editar-acc{
 background-color: #ff4500;
}
a.editar-acc:hover,
button.editar-acc:hover{
 background-color: #ff5b1f;
}
button.borrar-acc{
  background-color: #dc143c;
  border: none;
}
button.borrar-acc:hover{
  background-color: #ff0000;
}
a.ver{
 background-color: #00bfff;
}
a.ver:hover{
 background-color: #1e90ff;
}
a.upload{
 background-color: #008000;
}
a.upload:hover{
 background-color: #006400;
}
button.upload{
 background-color: #008000;
}
button.upload:hover{
 background-color: #006400;
}
.tooltip{
  position: relative;
}
.tooltipText{
  background-color: var(--colorFondoGris);
  color: var(--colorPrincipal);
  padding: .5rem;
  border: 1px solid #000000;
  border-radius: .5rem;
  text-align: center;
  position: absolute;
  bottom: 65%;
  left: 10%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-out;
}
.tooltip:hover .tooltipText{
  visibility: visible;
  opacity: 1;
  transition-delay: 1.5s;
  z-index: 1;
}
/*----------Estilo para botones de trabajo (en todas las páginas)----------*/
.boton{
  display: block;
  text-align: center;
  background-color: var(--colorPrincipal);
  color: #ffffff;
  padding: 1rem;
  border: none;
}
.boton:hover{
  background-color: var(--colorPrincipalOscuro);
  transition: background-color 1s ease-in;
}
.boton.cancelar{
  background-color: #dc143c;
  color: #ffffff;
  margin: 0 1.5rem;
}
.boton.cancelar:hover{
  background-color: #ff0000;
}
.boton-izq-fondo{
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
  margin: .5rem;
}
.boton-trabajo{
  padding: 1.5rem;
  border-radius: 1rem;
}
.area-trabajo{
  background-color: #f5f5ff;
  font-size: 1.7rem;
  padding: .7rem;
  border-radius: 1rem;
}
/*.contenedor-col4-col8{
  display: grid;
  grid-template-columns: minmax(150px,20%) minmax(300px,78%);
  width: 97%;
  margin: 1.5rem;
  grid-gap: 1rem;
}*/
/*----------Estilo del pie de página----------*/
.piePag{
  background-color: var(--colorPrincipal);
  font-size: 1.2rem;
  text-align: center;
  color: #ffffff;
  padding: 1rem;
  margin:0;
  grid-column: 1 / 3;
  height: 100%;
}
/*----------Media Query para cambiar el menú de nagevación en móvil intermedio----------*/
@media screen and (max-width:850px){
  .pagina{
    grid-template-columns: 16rem minmax(10rem, 1fr);
  }
/*--Cambio de layout para dispositivos medianos a dos columnas--*/
  .altaForm3c{
    padding: 1rem;
    grid-template-columns: repeat(2,1fr);
  }
  .boton{
    padding: .7rem;
  }
  .boton-izq-fondo{
    padding: .7rem;
  }
  .boton-trabajo{
    padding: 1.2rem;
    border-radius: .8rem;
  }
  .espaciador{
    display: none;
  }
  div:where(.swal2-container) div:where(.swal2-popup) {
    font-size: 1.2rem;
  }
  .expandeUltimo3{
    grid-column: span 2;
  }
  .colPresc1{
    display: none;
  }
/*--Cambio en los botones de listas--*/
  div.editar-acc,
  div.borrar-acc{
    font-size: 1.6rem;
  }
}
/*----------Media Query para cambiar el menú de nagevación en móvil chico----------*/
@media screen and (max-width:600px){
  html {
    font-size: 57%;
  }
  .login-contenedor h3{
    font-size: 2rem;
    text-align: center;
    text-shadow: 2px 2px 5px #1482D1;
  }
  .login label{
    font-size: 1.7rem;
    margin: .7rem;
    padding: .7rem 0;
  }
  .login input{
    height: 2.5rem;
    margin: .7rem;
    padding: .7rem 0;
    font-size: 1.7rem;
  }
  .login button{
    font-size: 1.7rem;
    width: 75%;
  }
  .pagina{
    grid-template-columns: 5rem minmax(10rem, 1fr);
  }
  .botonSalir{
    padding: .5rem;
    font-size: 3.2rem;
  }
  .salir,.navName{
    display: none;
  }
  .niv1 li.hover .niv2{
    visibility: visible;
  }
  .niv1 li .niv2{
    visibility: hidden;
  }
  .navegacion li a i{
    font-size: 2rem;
  }
  .nav-sub{
    left: 75%;
  }
  .navegacion button i{
    font-size: 19px;
  }
  .altaForm2c,
  .altaForm3c{
    padding: 1rem;
    grid-template-columns: 1fr;
  }
  .boton{
    padding: .2rem;
  }
  .boton-izq-fondo{
    padding: .5rem;
  }
  .boton-trabajo{
    padding: 1rem;
    border-radius: .5rem;
  }
  .piePag{
    font-size: 1rem;
    padding: .5rem;
    grid-column: 1 / 3;
  }
  div:where(.swal2-container) div:where(.swal2-popup) {
    width: var(--swal2-width);
    font-size: 1rem;
  }
  .expandeUltimo2,.expandeUltimo3{
    grid-column: span 1;
  }
  .colPresc2{
    display: none;
  }
/*--Cambio en los botones de páginas de listas--*/
  div.editar-acc,
  div.borrar-acc{
    font-size: 1.5rem;
  }
}