@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
/*-----------*/
/*-----------*/
/*-----------*/
/*Estilo Colores*/
body div.sidebar div.subBotones.visible {
  opacity: 1;
  transform: translateY(0%) translateX(0%);
  transition: opacity 0.5s, ease-in-out, transform 0.5s linear;
}

/*Estilos BG (Background)*/
.estilo1BG {
  background-color: rgb(255, 215, 223);
}

.estilo2BG {
  background-color: rgb(255, 223, 205);
}

.estilo3BG {
  background-color: rgb(212, 245, 201);
}

.estilo4BG {
  background-color: rgb(225, 223, 250);
}

.estilo5BG {
  background-color: rgb(201, 241, 245);
}

.estilo6BG {
  background-color: rgb(252, 199, 249);
}

.estilo7BG {
  background-color: rgb(204, 230, 255);
}

/*Estilos FG (Foreground)*/
.estilo1FG {
  color: rgb(255, 53, 94) !important;
}

.estilo2FG {
  color: rgb(255, 145, 83) !important;
}

.estilo3FG {
  color: rgb(104, 204, 69) !important;
}

.estilo4FG {
  color: rgb(135, 127, 237) !important;
}

.estilo5FG {
  color: rgb(7, 162, 173) !important;
}

.estilo6FG {
  color: rgb(206, 95, 200) !important;
}

.estilo7FG {
  color: rgb(71, 167, 255) !important;
}

.estilo1BG-SinConfirmar {
  background-color: rgba(255, 255, 255, 0);
  opacity: 1;
  background: repeating-linear-gradient(-45deg, rgb(255, 215, 223), rgb(255, 215, 223) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}

.estilo2BG-SinConfirmar {
  background-color: rgba(255, 255, 255, 0);
  opacity: 1;
  background: repeating-linear-gradient(-45deg, rgb(255, 223, 205), rgb(255, 223, 205) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}

.estilo3BG-SinConfirmar {
  background-color: rgba(255, 255, 255, 0);
  opacity: 1;
  background: repeating-linear-gradient(-45deg, rgb(212, 245, 201), rgb(212, 245, 201) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}

.estilo4BG-SinConfirmar {
  background-color: rgba(255, 255, 255, 0);
  opacity: 1;
  background: repeating-linear-gradient(-45deg, rgb(225, 223, 250), rgb(225, 223, 250) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}

.estilo5BG-SinConfirmar {
  background-color: rgba(255, 255, 255, 0);
  opacity: 1;
  background: repeating-linear-gradient(-45deg, rgb(201, 241, 245), rgb(201, 241, 245) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}

.estilo6BG-SinConfirmar {
  background-color: rgba(255, 255, 255, 0);
  opacity: 1;
  background: repeating-linear-gradient(-45deg, rgb(252, 199, 249), rgb(252, 199, 249) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}

.estilo7BG-SinConfirmar {
  background-color: rgba(255, 255, 255, 0);
  opacity: 1;
  background: repeating-linear-gradient(-45deg, rgb(204, 230, 255), rgb(204, 230, 255) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}

div.navGeneral .botonEntorno {
  font-size: 16px;
  margin: 5px;
  background: rgba(255, 192, 192, 0.568627451);
  border-radius: 7.5px;
  cursor: pointer;
}
div.navGeneral .botonEntorno.prod {
  background: rgba(255, 140, 128, 0.568627451);
}
div.navGeneral .botonEntorno.desa {
  background: rgba(140, 255, 128, 0.568627451);
}
div.navGeneral .perfilNav a {
  width: 100%;
  display: flex;
  gap: 20px;
}
div.navGeneral .estilos {
  border-radius: 5px;
  height: 25px;
  width: 25px;
}
div.navGeneral .estilos div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  height: 25px;
  width: 25px;
  font-size: 13px;
}

div.fondoPerfil {
  padding: 5px 4px;
  border-radius: 10px;
  font-weight: 600;
  margin: auto auto;
}
div.fondoPerfil.ampliacion {
  padding: 15px 25px !important;
}
div.fondoPerfil.estilo1 {
  background-color: rgb(255, 215, 223);
  color: rgb(255, 53, 94);
}
div.fondoPerfil.estilo2 {
  background-color: rgb(255, 223, 205);
  color: rgb(255, 145, 83);
}
div.fondoPerfil.estilo3 {
  background-color: rgb(212, 245, 201);
  color: rgb(104, 204, 69);
}
div.fondoPerfil.estilo4 {
  background-color: rgb(225, 223, 250);
  color: rgb(135, 127, 237);
}
div.fondoPerfil.estilo5 {
  background-color: rgb(201, 241, 245);
  color: rgb(7, 162, 173);
}
div.fondoPerfil.estilo6 {
  background-color: rgb(252, 199, 249);
  color: rgb(206, 95, 200);
}
div.fondoPerfil.estilo7 {
  background-color: rgb(204, 230, 255);
  color: rgb(71, 167, 255);
}

a {
  text-decoration: none;
  color: black;
}

body {
  /*Contenido informativo. */
  font-family: "Inter";
  background-color: rgb(255, 243, 227);
  display: grid;
}
body div.error {
  padding: 1%;
  border: 3px solid darkred;
  border-radius: 5px;
  background-color: #e4e4e4;
}
body div.error span {
  color: darkred;
  font-weight: 700;
}
body div.exito {
  padding: 1%;
  border: 3px solid rgb(0, 139, 19);
  border-radius: 5px;
  background-color: #e9f8e9;
}
body div.exito span {
  color: rgb(0, 139, 19);
  font-weight: 700;
}
body.inicio {
  grid-template-columns: 15% 85%;
}
body.inicioSinMenu {
  grid-template-columns: 0 100%;
}
body .tooltip {
  position: fixed;
  padding: 2px 5px;
  border: 1px solid #b3c9ce;
  border-radius: 4px;
  text-align: center;
  font: normal 14px/1.3 "Inter";
  color: #333;
  background: #fff;
}
body div.sidebar {
  background-color: rgb(255, 243, 227);
  padding-top: 12px;
  padding-bottom: 12px;
  display: block;
  overflow-y: auto;
  /*Jerarquía de subBotones (Para 'subcategorias' dentro de 'categorias'
  -subBotones
      -a
          -subBotonesNav
              -contenedorSubB

  - subBotones (Agrupa todos los subBotones de forma que queden compactos en una clase contenedora, y también crea una línea que contendrán todos los subBotones en gris)
  - a (Está inmediatamente después para que cada elemento sea un enlace y no su texto sino todo el div)
  - subBotonesNav (Añade un margen entre cada elemento y es el botón en si (junto a <a>) y además cuando tiene la clase active, se coloca una línea vertical del tamaño del botón para indicarnos que se encuentra en dicho botón, también permite añadir margin hacia arriba y hacia abajo (sin alterar la línea active))
  - contenedorSubB (Permite añadir margen y padding de izquierda a derecha), si añadimos hacia arriba o hacia abajo se tiene en cuenta en la linea de 'subBotonesNav.active'
  */
}
body div.sidebar div.botonesNav {
  padding: 6px;
  border-radius: 8px;
  margin: 0px 10px;
  display: flex;
  border: 0.5px solid transparent;
  /*Se pasa de div a span, para que semánticamente se mantenga más correcto*/
}
body div.sidebar div.botonesNav.especial {
  margin-top: 80px !important;
  margin: 0px 10px;
  height: 50px !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body div.sidebar div.botonesNav.especial div.imgPersonalizada {
  width: 28px;
  height: 28px;
  display: flex;
  border: 1px solid #F4F4F5;
  border-radius: 10px;
}
body div.sidebar div.botonesNav.especial div.imgPersonalizada span {
  margin: auto 0;
  font-weight: 550;
  padding: 0;
}
body div.sidebar div.botonesNav a {
  display: contents;
}
body div.sidebar div.botonesNav:hover, body div.sidebar div.botonesNav.active {
  background-color: #E3E4E5;
  border: 0.5px solid transparent;
}
body div.sidebar div.botonesNav img {
  padding: 1% 1% 1% 1%;
}
body div.sidebar div.botonesNav span,
body div.sidebar div.botonesNav div {
  padding: 1% 3%;
  width: 100%;
  font-weight: 500;
  font-size: 14px;
  color: rgb(30, 30, 49);
}
body div.sidebar div.botonesNav .expandirMenu {
  padding-right: 5%;
  display: flex;
  width: 30px;
}
body div.sidebar div.botonesNav .flecha {
  background-color: transparent;
  border: transparent 1px solid;
  border-radius: 4px;
}
body div.sidebar div.botonesNav .flecha:hover {
  background-color: #c9c9c9;
  cursor: pointer;
}
body div.sidebar div.botonesNav .flecha img {
  height: 12px;
  width: 12px;
  margin: auto auto;
}
body div.sidebar div.subBotones {
  border-left: 2px solid #E2E2E5;
  font-weight: 500;
  margin-left: 28px;
}
body div.sidebar div.subBotones.hidden {
  transform: translateY(0%) translateX(-120%);
  opacity: 0;
  height: 0px;
  transition: transform 0.5s linear, opacity 0.5s linear, height 0.5s linear;
}
body div.sidebar div.subBotones.visible.Bandeja {
  height: 82px;
}
body div.sidebar div.subBotones.visible.Perfil {
  height: 82px;
}
body div.sidebar div.subBotones.visible.Empleados {
  height: 82px;
}
body div.sidebar div.subBotones.visible.Calendario {
  height: 82px;
}
body div.sidebar div.subBotones a {
  border-radius: 8px;
  display: flex;
  font-weight: 400;
  font-size: 14px;
  color: rgb(30, 30, 49);
  width: 100%;
}
body div.sidebar div.subBotones a div.subBotonesNav {
  margin-top: 12px;
  margin-bottom: 12px;
}
body div.sidebar div.subBotones a div.subBotonesNav.active, body div.sidebar div.subBotones a div.subBotonesNav:hover {
  border-left: 2px solid #515164;
  margin-left: -2px;
}
body div.sidebar div.subBotones .contenedorSubB {
  margin-left: 20px;
}
body div.sidebar .tituloNav {
  margin-top: 25px;
  margin-bottom: 15px;
  margin-left: 1%;
}
body div.sidebar .navTexto {
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 700;
}
body .submain {
  background-color: white;
  border-radius: 18px;
  box-shadow: 0px 4px 12px -8px #F4F4F5, 0px 1px 3px #F4F4F5;
}
body div.paneles.inicio {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 35vh 35vh;
  overflow-y: auto;
  gap: 20px;
  padding: 0px 10px;
}
body div.paneles.inicio div.panel {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 4px 12px -8px #F4F4F5, 0px 1px 3px #F4F4F5;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  justify-content: center;
  margin: auto auto;
  transition: all 0.2s ease;
}
body div.paneles.inicio div.panel div.encabezado {
  font-weight: 600;
  font-size: 14px;
  color: rgb(81, 81, 100);
  border-bottom: 0.25px solid #F4F4F5;
  background-color: white;
  border-radius: 20px 20px 0px 0px;
}
body div.paneles.inicio div.panel div.encabezado p {
  margin: 3% 5%;
}
body div.paneles.inicio div.panel div.contenido {
  display: block;
  flex-direction: row;
  background-color: white;
  border-radius: 0px 0px 20px 20px;
  background-color: white;
  overflow-y: auto;
  height: 100%;
  margin-bottom: 3%;
  font-weight: 400;
  font-size: 14px;
  color: rgb(81, 81, 100);
}
body div.paneles.inicio div.panel div.contenido.eventos {
  padding-top: 25%;
  margin: auto auto;
  font-weight: 600;
  text-transform: uppercase;
}
body div.paneles.inicio div.panel div.contenido.enlaces .enlace {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid #c2c2c2;
  background-color: #fafafa;
  border-radius: 7.5px;
  margin: 5px 10px;
  display: block;
}
body div.paneles.inicio div.panel div.contenido.enlaces .enlace::before, body div.paneles.inicio div.panel div.contenido.enlaces .enlace::after {
  content: " [+] ";
}

div.main.empleados,
div.main.ingresos {
  margin: 10px 25px;
  padding: 10px 25px;
  font-size: 15px;
  font-family: "Inter";
  /* Tooltip container */
  /* Tooltip text */
  /* Show the tooltip text when you mouse over the tooltip container */
}
div.main.empleados a.botonEspcialCobros,
div.main.ingresos a.botonEspcialCobros {
  padding: 1px 5px;
  border-radius: 3.5px;
  border: 1px solid darkred;
  text-decoration: underline;
}
div.main.empleados a.botonEspcialCobros:hover,
div.main.ingresos a.botonEspcialCobros:hover {
  background-color: rgb(255, 224, 224);
  border: 1px solid black;
}
div.main.empleados .calendario,
div.main.ingresos .calendario {
  font-family: "Inter";
  padding: 20px;
  border: 1px solid rgba(128, 128, 128, 0.148);
  background-color: #f8f9fa;
}
div.main.empleados .calendario .calendar-wrapper,
div.main.ingresos .calendario .calendar-wrapper {
  display: flex;
  flex-direction: column;
  height: 90vh;
}
div.main.empleados .calendario .header-container,
div.main.ingresos .calendario .header-container {
  display: flex;
  margin-bottom: 0;
  border-bottom: 1px solid #ddd;
}
div.main.empleados .calendario .time-header,
div.main.ingresos .calendario .time-header {
  width: 60px;
  min-width: 60px;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}
div.main.empleados .calendario .days-header,
div.main.ingresos .calendario .days-header {
  display: flex;
  flex: 1;
}
div.main.empleados .calendario .day-header,
div.main.ingresos .calendario .day-header {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}
div.main.empleados .calendario .day-header:last-child,
div.main.ingresos .calendario .day-header:last-child {
  border-right: none;
}
div.main.empleados .calendario .calendar-body,
div.main.ingresos .calendario .calendar-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
div.main.empleados .calendario .time-column,
div.main.ingresos .calendario .time-column {
  width: 60px;
  min-width: 60px;
  border-right: 1px solid #ddd;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
div.main.empleados .calendario .time-marker,
div.main.ingresos .calendario .time-marker {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 5px;
  box-sizing: border-box;
  font-size: 12px;
  color: #666;
  height: 40px;
  border-bottom: 1px solid #eee;
}
div.main.empleados .calendario .days-container,
div.main.ingresos .calendario .days-container {
  flex: 1;
  overflow: auto;
  position: relative;
}
div.main.empleados .calendario .days-scroll-content,
div.main.ingresos .calendario .days-scroll-content {
  display: flex;
  min-height: 100%;
}
div.main.empleados .calendario .day-column,
div.main.ingresos .calendario .day-column {
  flex: 1;
  min-width: 120px;
  position: relative;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}
div.main.empleados .calendario .day-column:last-child,
div.main.ingresos .calendario .day-column:last-child {
  border-right: none;
}
div.main.empleados .calendario .day-content,
div.main.ingresos .calendario .day-content {
  position: relative;
  height: 600px;
  /* 7am a 10pm = 15 horas */
}
div.main.empleados .calendario .event,
div.main.ingresos .calendario .event {
  position: absolute;
  left: 5px;
  right: 5px;
  border-radius: 7.5px;
  padding: 2px 5px;
  font-size: 12px;
  overflow: hidden;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  border: 0px dashed transparent;
}
div.main.empleados .calendario .event span,
div.main.ingresos .calendario .event span {
  display: block;
  padding: 5px;
}
div.main.empleados .calendario .event span.alumno,
div.main.ingresos .calendario .event span.alumno {
  background-color: rgba(255, 255, 255, 0.562);
  border-radius: 7.5px;
  min-width: 75%;
  max-width: 75%;
  max-height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255, 177, 168);
}
div.main.empleados .calendario .event span.horario,
div.main.ingresos .calendario .event span.horario {
  border: 1px solid rgb(236, 236, 255);
  border-radius: 7.5px;
  background-color: rgb(215, 212, 255);
}
div.main.empleados .calendario .finalizadas,
div.main.ingresos .calendario .finalizadas {
  background-color: hsl(211, 100%, 87%);
  border: 1px solid white;
}
div.main.empleados .calendario .finalizadas:hover,
div.main.ingresos .calendario .finalizadas:hover {
  border: 1px dashed darkred;
  cursor: pointer;
  background-color: #e09dad;
}
div.main.empleados .calendario .pendiente,
div.main.ingresos .calendario .pendiente {
  background-color: #ffd9ba;
  border: 1px solid white;
}
div.main.empleados .calendario .pendiente:hover,
div.main.ingresos .calendario .pendiente:hover {
  border: 1px dashed darkred;
  background-color: #e09dad;
}
div.main.empleados .calendario .busy,
div.main.ingresos .calendario .busy {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}
div.main.empleados .calendario .controls,
div.main.ingresos .calendario .controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
div.main.empleados .calendario button,
div.main.ingresos .calendario button {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
div.main.empleados .calendario .current-time,
div.main.ingresos .calendario .current-time {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: red;
  z-index: 10;
}
div.main.empleados .calendario .week-title,
div.main.ingresos .calendario .week-title {
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: bold;
}
div.main.empleados .calendario .event-form,
div.main.ingresos .calendario .event-form {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 5px;
}
div.main.empleados .calendario .event-form input,
div.main.empleados .calendario .event-form select,
div.main.ingresos .calendario .event-form input,
div.main.ingresos .calendario .event-form select {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
div.main.empleados .calendario .event-form button,
div.main.ingresos .calendario .event-form button {
  padding: 8px 15px;
}
div.main.empleados .alertas,
div.main.ingresos .alertas {
  display: flex;
  /* Activar Flexbox */
  justify-content: center;
  /* Alinear horizontalmente al centro */
  align-items: center;
  /* Alinear verticalmente al centro */
  flex-wrap: wrap;
  /* Permitir que los elementos se envuelvan si no caben */
  gap: 20px;
  /* Espaciado entre los hijos */
}
div.main.empleados .alertas button,
div.main.ingresos .alertas button {
  border-radius: 7.5px;
  background-color: rgba(128, 78, 78, 0.548);
  border: 1px solid gray;
  color: rgb(255, 255, 255);
  padding: 12px;
}
div.main.empleados .alertas button:hover,
div.main.ingresos .alertas button:hover {
  cursor: pointer;
  background-color: darkred;
}
div.main.empleados .alertas table,
div.main.ingresos .alertas table {
  margin: auto auto;
  width: 95%;
  border: 1px solid gray;
  border-radius: 7.5px;
  padding: 15px;
  border-collapse: collapse;
}
div.main.empleados .alertas table thead,
div.main.empleados .alertas table tr,
div.main.ingresos .alertas table thead,
div.main.ingresos .alertas table tr {
  border: 1px solid gray;
}
div.main.empleados .alertas table thead th,
div.main.empleados .alertas table thead td,
div.main.empleados .alertas table tr th,
div.main.empleados .alertas table tr td,
div.main.ingresos .alertas table thead th,
div.main.ingresos .alertas table thead td,
div.main.ingresos .alertas table tr th,
div.main.ingresos .alertas table tr td {
  padding: 10px;
  text-align: center;
}
div.main.empleados .alertas table thead th,
div.main.empleados .alertas table tr th,
div.main.ingresos .alertas table thead th,
div.main.ingresos .alertas table tr th {
  text-transform: uppercase;
}
div.main.empleados .archivos,
div.main.ingresos .archivos {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 50px 25px;
  border: 1px solid rgba(128, 128, 128, 0.219);
  border-radius: 7.5px;
}
div.main.empleados .archivos .archivo,
div.main.ingresos .archivos .archivo {
  width: 350px;
  height: 70px;
  display: flex;
  border: 1px solid gray;
  border-radius: 7.5px;
  background-color: white;
}
div.main.empleados .archivos .archivo:hover,
div.main.ingresos .archivos .archivo:hover {
  background-color: cornsilk;
  cursor: pointer;
}
div.main.empleados .archivos .archivo .etiqueta,
div.main.ingresos .archivos .archivo .etiqueta {
  border-radius: 0px 7.5px 7.5px 0px;
  display: flex;
  flex-grow: 1;
}
div.main.empleados .archivos .archivo .etiqueta span,
div.main.ingresos .archivos .archivo .etiqueta span {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 0 10px;
}
div.main.empleados .archivos .archivo .descargarArchivos,
div.main.ingresos .archivos .archivo .descargarArchivos {
  background-color: rgb(255, 248, 146);
  border-radius: 7.5px;
  width: 25px;
  height: 25px;
  display: flex;
  margin: auto 10px;
  padding: 10px;
  border: 1px solid gray;
}
div.main.empleados .archivos .archivo .descargarArchivos:hover,
div.main.ingresos .archivos .archivo .descargarArchivos:hover {
  background-color: #F58F00;
  border: 1px solid black;
}
div.main.empleados .archivos .archivo img,
div.main.ingresos .archivos .archivo img {
  margin: auto auto;
  width: 50px;
  height: 50px;
  padding: 5px;
}
div.main.empleados .total,
div.main.ingresos .total {
  margin: auto auto;
  text-align: center;
  padding: 20px;
  padding: 10px;
}
div.main.empleados .total.estilo1,
div.main.ingresos .total.estilo1 {
  background-color: rgb(255, 195, 140);
}
div.main.empleados .total.estilo2,
div.main.ingresos .total.estilo2 {
  background-color: #8cabff;
}
div.main.empleados div.cuadriculaDe2,
div.main.ingresos div.cuadriculaDe2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}
div.main.empleados div.cuadriculaDe2 div.bloque,
div.main.ingresos div.cuadriculaDe2 div.bloque {
  display: block;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  margin: 5px;
}
div.main.empleados div.panel,
div.main.ingresos div.panel {
  display: flex;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 7.5px;
  gap: 10px;
  margin-bottom: 20px;
}
div.main.empleados div.panel .grabar,
div.main.ingresos div.panel .grabar {
  display: flex;
  align-items: center;
  justify-content: center;
}
div.main.empleados div.panel .grabar .iconoCliente,
div.main.ingresos div.panel .grabar .iconoCliente {
  height: 30px;
  width: 30px;
  padding: 4px;
  margin-left: 10px;
}
div.main.empleados div.panel .grabar .iconoCliente.iconoGrabar,
div.main.ingresos div.panel .grabar .iconoCliente.iconoGrabar {
  border: 1px solid gray;
  cursor: pointer;
}
div.main.empleados div.panel .grabar .iconoCliente.iconoEliminar,
div.main.ingresos div.panel .grabar .iconoCliente.iconoEliminar {
  border: 1px solid gray;
  cursor: pointer;
}
div.main.empleados div.panel .filaAlumnos,
div.main.ingresos div.panel .filaAlumnos {
  display: flex;
  margin: auto auto;
  gap: 10px;
}
div.main.empleados div.panel .filaAlumnos .alumno,
div.main.ingresos div.panel .filaAlumnos .alumno {
  padding: 10px;
  border: 1px solid gray;
  border-radius: 7.5px;
  background-color: white;
  cursor: pointer;
}
div.main.empleados div.panel input[type=checkbox],
div.main.ingresos div.panel input[type=checkbox] {
  display: none;
  /* Elimina el estilo predeterminado */
}
div.main.empleados .titulo,
div.main.ingresos .titulo {
  text-align: center;
  letter-spacing: 2px;
  font-size: large;
}
div.main.empleados .titulo .filaParametros,
div.main.ingresos .titulo .filaParametros {
  margin: auto auto;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 7.5px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
div.main.empleados .titulo .filaParametros label,
div.main.ingresos .titulo .filaParametros label {
  font-size: 15px;
  letter-spacing: 2px;
}
div.main.empleados .bloqueInformacionFinal,
div.main.ingresos .bloqueInformacionFinal {
  padding: 10px 2px;
  background-color: rgba(255, 255, 255, 0.185);
  margin: 10px 0px;
}
div.main.empleados .bloqueInformacionFinal span span,
div.main.ingresos .bloqueInformacionFinal span span {
  color: darkred;
}
div.main.empleados .clasesPadre,
div.main.ingresos .clasesPadre {
  margin: 2% 0;
  border-radius: 10px;
}
div.main.empleados .clasesPadre.color1,
div.main.ingresos .clasesPadre.color1 {
  background-color: rgb(245, 229, 204);
  border: 1px solid rgb(224, 224, 224);
}
div.main.empleados .clasesPadre.color2,
div.main.ingresos .clasesPadre.color2 {
  background-color: #ffe5d8;
  border: 1px solid rgb(224, 224, 224);
}
div.main.empleados .clasesPadre.colorFondo1,
div.main.ingresos .clasesPadre.colorFondo1 {
  background-color: #ffffff;
  opacity: 1;
  background-size: 40px 40px;
  background-image: repeating-linear-gradient(45deg, #ffce92 0, #ffce92 4px, #ffffff 0, #ffffff 50%);
}
div.main.empleados .clasesPadre h4,
div.main.ingresos .clasesPadre h4 {
  text-align: center;
  padding-top: 2%;
}
div.main.empleados .clasesPadre h4 span,
div.main.ingresos .clasesPadre h4 span {
  padding: 0.5%;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 17px;
  background-color: rgba(255, 255, 255, 0.808);
  border: 3px solid rgb(255, 211, 174);
  border-radius: 7.5px;
  border-style: solid;
  box-shadow: 7.5px 5px 0px 0px rgb(255, 211, 174);
}
div.main.empleados .tablaClases,
div.main.ingresos .tablaClases {
  padding: 15px;
  border-radius: 15px;
  width: 100%;
  border: 1px solid black;
  margin-top: 20px;
}
div.main.empleados .tablaClases td,
div.main.empleados .tablaClases tr,
div.main.ingresos .tablaClases td,
div.main.ingresos .tablaClases tr {
  padding: 2px;
  border: 2px solid white;
}
div.main.empleados .tablaClases tr:nth-child(even),
div.main.ingresos .tablaClases tr:nth-child(even) {
  background-color: #ffd9ae;
}
div.main.empleados .condiciones,
div.main.ingresos .condiciones {
  border: 2px solid rgba(167, 167, 167, 0.404);
  border-radius: 15px;
  background-color: rgba(255, 136, 0, 0.315);
  margin: 20px 0px;
  padding: 20px;
}
div.main.empleados .condiciones ul,
div.main.ingresos .condiciones ul {
  padding: 5px;
}
div.main.empleados .condiciones ul li,
div.main.ingresos .condiciones ul li {
  padding: 5px;
}
div.main.empleados .condiciones span.adicion,
div.main.ingresos .condiciones span.adicion {
  border: 1px solid orange;
  padding: 1.5px;
  background-color: rgba(255, 196, 0, 0.568);
}
div.main.empleados .clases,
div.main.ingresos .clases {
  display: flex;
  gap: 1%;
  padding: 2%;
  border-radius: 10px;
  overflow: auto;
}
div.main.empleados .clases.color1,
div.main.ingresos .clases.color1 {
  background-color: rgb(245, 204, 204);
}
div.main.empleados .clases.color2,
div.main.ingresos .clases.color2 {
  background-color: #ffe5d8;
}
div.main.empleados .clases.borde,
div.main.ingresos .clases.borde {
  border: 1px solid rgb(224, 224, 224);
}
div.main.empleados .clases.wrap,
div.main.ingresos .clases.wrap {
  flex-wrap: wrap;
}
div.main.empleados .clases.center,
div.main.ingresos .clases.center {
  align-items: center;
  justify-content: center;
}
div.main.empleados .clases.noWrap,
div.main.ingresos .clases.noWrap {
  flex-wrap: nowrap;
}
div.main.empleados .clases .bloqueCard,
div.main.ingresos .clases .bloqueCard {
  background-color: white;
  border-radius: 7.5px;
  border: 1px solid rgb(185, 185, 185);
  min-width: 375px;
  width: 200px;
  padding: 10px;
  padding-bottom: 0;
  margin-bottom: 1%;
}
div.main.empleados .clases .bloqueCard.amplio,
div.main.ingresos .clases .bloqueCard.amplio {
  width: 425px;
  border: 1px solid rgb(185, 185, 185);
}
div.main.empleados .clases .bloqueCard.amplio .bloqueSeccion,
div.main.ingresos .clases .bloqueCard.amplio .bloqueSeccion {
  padding-bottom: 2%;
  border-bottom: 1px solid rgb(226, 226, 229);
}
div.main.empleados .clases .bloqueCard.amplio .bloqueSeccion .bloqueSubseccion,
div.main.ingresos .clases .bloqueCard.amplio .bloqueSeccion .bloqueSubseccion {
  background-color: #fdecec;
  padding: 2%;
  max-height: 150px;
  min-height: 150px;
  overflow-y: auto;
  border-radius: 20px;
  font-size: 15px;
}
div.main.empleados .clases .bloqueCard.amplio .bloqueSeccion .bloqueSubseccion a,
div.main.ingresos .clases .bloqueCard.amplio .bloqueSeccion .bloqueSubseccion a {
  background-color: darkred;
  color: white;
  text-decoration: underline;
}
div.main.empleados .clases .bloqueCard.amplio .bloqueSeccion .tituloSeccion,
div.main.ingresos .clases .bloqueCard.amplio .bloqueSeccion .tituloSeccion {
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16.5px;
}
div.main.empleados .clases .bloqueCard.amplio .bloqueSeccion .tituloSeccion span,
div.main.ingresos .clases .bloqueCard.amplio .bloqueSeccion .tituloSeccion span {
  background-color: rgb(253, 225, 225);
  padding: 0.5%;
  text-decoration: underline;
}
div.main.empleados .clases .bloqueCard .tituloEmpl,
div.main.ingresos .clases .bloqueCard .tituloEmpl {
  text-align: center;
  letter-spacing: 1px;
  font-size: 17px;
  padding: 5%;
  border-bottom: 1px solid rgb(226, 226, 229);
}
div.main.empleados .clases .bloqueCard .tituloEmpl span,
div.main.ingresos .clases .bloqueCard .tituloEmpl span {
  font-weight: 700;
}
div.main.empleados .clases .bloqueCard .grid,
div.main.ingresos .clases .bloqueCard .grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 7.5px;
  padding: 10px 0px;
}
div.main.empleados .clases .bloqueCard .grid.amplio,
div.main.ingresos .clases .bloqueCard .grid.amplio {
  grid-template-columns: 20% 1fr;
}
div.main.empleados .clases .bloqueCard .grid .subtitulo2,
div.main.ingresos .clases .bloqueCard .grid .subtitulo2 {
  grid-column: 1/span 2;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1.5px;
}
div.main.empleados .clases .bloqueCard .grid.division,
div.main.ingresos .clases .bloqueCard .grid.division {
  border-top: 1px solid rgb(226, 226, 229);
  min-height: 120px;
}
div.main.empleados .clases .bloqueCard .grid span,
div.main.ingresos .clases .bloqueCard .grid span {
  display: block;
}
div.main.empleados .clases .bloqueCard .grid textarea,
div.main.ingresos .clases .bloqueCard .grid textarea {
  resize: none;
}
div.main.empleados .clases .bloqueCard .grid .subtitulo,
div.main.ingresos .clases .bloqueCard .grid .subtitulo {
  text-align: right;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
}
div.main.empleados .clases .bloqueCard .grid .subtitulo::after,
div.main.ingresos .clases .bloqueCard .grid .subtitulo::after {
  content: ":";
}
div.main.empleados .clases .bloqueCard .grid .subtitulo.extraInformacion,
div.main.ingresos .clases .bloqueCard .grid .subtitulo.extraInformacion {
  height: 100%;
  margin: auto 0px;
}
div.main.empleados .clases .bloqueCard .grid input,
div.main.empleados .clases .bloqueCard .grid textarea,
div.main.ingresos .clases .bloqueCard .grid input,
div.main.ingresos .clases .bloqueCard .grid textarea {
  background-color: rgb(243, 243, 243);
  border-radius: 7.5px;
  padding: 0 5px;
  font-family: "Inter";
}
div.main.empleados .clases .bloqueCard .grid .informacion,
div.main.ingresos .clases .bloqueCard .grid .informacion {
  text-align: left;
  font-size: 15px;
  border: 0px;
}
div.main.empleados .clases .bloqueCard .grid .informacion input,
div.main.ingresos .clases .bloqueCard .grid .informacion input {
  border: 0.1px solid gray !important;
  padding: 1%;
  text-align: center;
}
div.main.empleados .clases .bloqueCard .grid .informacion .grid-3,
div.main.ingresos .clases .bloqueCard .grid .informacion .grid-3 {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
}
div.main.empleados .clases .bloqueCard .grid .informacion .grid-3 div,
div.main.ingresos .clases .bloqueCard .grid .informacion .grid-3 div {
  text-align: center;
}
div.main.empleados .clases .bloqueCard .grid .informacion .grid-3 div input,
div.main.ingresos .clases .bloqueCard .grid .informacion .grid-3 div input {
  width: 95%;
  text-align: center;
}
div.main.empleados .clases .bloqueCard .grid .informacion.extraInformacion,
div.main.ingresos .clases .bloqueCard .grid .informacion.extraInformacion {
  height: 50px;
}
div.main.empleados .clases .bloqueCard .grid-botones,
div.main.ingresos .clases .bloqueCard .grid-botones {
  padding: 20px 0;
  border-top: 1px solid rgb(226, 226, 229);
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: rgb(253, 253, 255);
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton,
div.main.empleados .clases .bloqueCard .grid-botones a.boton,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton {
  color: rgb(0, 0, 0);
  border-color: transparent;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 15px;
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton:disabled,
div.main.empleados .clases .bloqueCard .grid-botones a.boton:disabled,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton:disabled,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton:disabled {
  background-color: #888 !important;
  color: white;
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton:disabled:hover,
div.main.empleados .clases .bloqueCard .grid-botones a.boton:disabled:hover,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton:disabled:hover,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton:disabled:hover {
  text-decoration: none !important;
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton.eliminar,
div.main.empleados .clases .bloqueCard .grid-botones a.boton.eliminar,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton.eliminar,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton.eliminar {
  background-color: rgb(252, 150, 150);
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton.eliminar:hover,
div.main.empleados .clases .bloqueCard .grid-botones a.boton.eliminar:hover,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton.eliminar:hover,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton.eliminar:hover {
  color: white;
  background-color: darkred;
  text-decoration: underline;
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton.editar,
div.main.empleados .clases .bloqueCard .grid-botones a.boton.editar,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton.editar,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton.editar {
  background-color: rgb(252, 216, 150);
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton.editar:hover,
div.main.empleados .clases .bloqueCard .grid-botones a.boton.editar:hover,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton.editar:hover,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton.editar:hover {
  color: white;
  background-color: rgb(219, 182, 16);
  text-decoration: underline;
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton.alta,
div.main.empleados .clases .bloqueCard .grid-botones a.boton.alta,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton.alta,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton.alta {
  background-color: rgb(250, 213, 255);
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton.alta:hover,
div.main.empleados .clases .bloqueCard .grid-botones a.boton.alta:hover,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton.alta:hover,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton.alta:hover {
  color: white;
  background-color: rgb(236, 92, 255);
  text-decoration: underline;
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton.baja,
div.main.empleados .clases .bloqueCard .grid-botones a.boton.baja,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton.baja,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton.baja {
  background-color: rgb(194, 231, 255);
}
div.main.empleados .clases .bloqueCard .grid-botones input[type=submit].boton.baja:hover,
div.main.empleados .clases .bloqueCard .grid-botones a.boton.baja:hover,
div.main.ingresos .clases .bloqueCard .grid-botones input[type=submit].boton.baja:hover,
div.main.ingresos .clases .bloqueCard .grid-botones a.boton.baja:hover {
  color: white;
  background-color: rgb(51, 174, 255);
  text-decoration: underline;
}
div.main.empleados .clases .bloqueCard .informacionConsulta,
div.main.ingresos .clases .bloqueCard .informacionConsulta {
  background-color: rgb(226, 146, 146);
  margin: 0 20px;
  padding: 10px;
  border-radius: 7.5px;
  font-size: 15px;
  min-height: 20px;
}
div.main.empleados .clases .bloqueCard .informacionConsulta:empty,
div.main.ingresos .clases .bloqueCard .informacionConsulta:empty {
  background-color: #F4F4F5;
}
div.main.empleados .bloqueCard-Completo,
div.main.ingresos .bloqueCard-Completo {
  background-color: rgba(255, 219, 201, 0.8784313725);
  border-radius: 7.5px;
  border: 1px solid rgb(185, 185, 185);
  min-width: 650px;
  max-width: 650px;
  min-height: 750px;
  max-height: 750px;
  padding: 10px;
  padding-bottom: 0;
  margin-bottom: 1%;
}
div.main.empleados .bloqueCard-Completo .grid-2,
div.main.ingresos .bloqueCard-Completo .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
div.main.empleados .bloqueCard-Completo .grid-2 .bloqueSeccion,
div.main.ingresos .bloqueCard-Completo .grid-2 .bloqueSeccion {
  padding-bottom: 2%;
  border-bottom: 1px solid rgb(226, 226, 229);
  min-height: 270px;
  max-height: 270px;
  overflow-y: auto;
  font-size: 15px;
  width: 100%;
}
div.main.empleados .bloqueCard-Completo .grid-2 .bloqueSeccion .bloqueSubseccion,
div.main.ingresos .bloqueCard-Completo .grid-2 .bloqueSeccion .bloqueSubseccion {
  background-color: rgb(255, 255, 255);
  padding: 2%;
  overflow-y: auto;
  border-radius: 5px;
  min-height: 200px;
  max-height: 200px;
  position: relative;
}
div.main.empleados .bloqueCard-Completo .grid-2 .bloqueSeccion .bloqueSubseccion:hover,
div.main.ingresos .bloqueCard-Completo .grid-2 .bloqueSeccion .bloqueSubseccion:hover {
  background-color: #fffafd;
}
div.main.empleados .bloqueCard-Completo .grid-2 .bloqueSeccion .bloqueSubseccion a,
div.main.ingresos .bloqueCard-Completo .grid-2 .bloqueSeccion .bloqueSubseccion a {
  background-color: darkred;
  color: white;
  text-decoration: underline;
}
div.main.empleados .bloqueCard-Completo .grid-2 .bloqueSeccion .bloqueSubseccion .tituloSeccion,
div.main.ingresos .bloqueCard-Completo .grid-2 .bloqueSeccion .bloqueSubseccion .tituloSeccion {
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16.5px;
}
div.main.empleados .bloqueCard-Completo .grid-2 .bloqueSeccion .tituloSeccion,
div.main.ingresos .bloqueCard-Completo .grid-2 .bloqueSeccion .tituloSeccion {
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16.5px;
}
div.main.empleados .bloqueCard-Completo .grid-2 .bloqueSeccion .tituloSeccion span,
div.main.ingresos .bloqueCard-Completo .grid-2 .bloqueSeccion .tituloSeccion span {
  padding: 0.5% 1%;
  background-color: white;
  border: 1px solid rgb(241, 241, 241);
  letter-spacing: 1px;
}
div.main.empleados .bloqueCard-Completo .tituloEmpl,
div.main.ingresos .bloqueCard-Completo .tituloEmpl {
  text-align: center;
  letter-spacing: 1px;
  font-size: 17px;
  padding: 5%;
  border-bottom: 1px solid rgb(226, 226, 229);
}
div.main.empleados .bloqueCard-Completo .tituloEmpl span,
div.main.ingresos .bloqueCard-Completo .tituloEmpl span {
  font-weight: 700;
}
div.main.empleados .bloqueCard-Completo .grid,
div.main.ingresos .bloqueCard-Completo .grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 7.5px;
  padding: 10px 0px;
}
div.main.empleados .bloqueCard-Completo .grid.amplio,
div.main.ingresos .bloqueCard-Completo .grid.amplio {
  grid-template-columns: 20% 1fr;
}
div.main.empleados .bloqueCard-Completo .grid .subtitulo2,
div.main.ingresos .bloqueCard-Completo .grid .subtitulo2 {
  grid-column: 1/span 2;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1.5px;
}
div.main.empleados .bloqueCard-Completo .grid.division,
div.main.ingresos .bloqueCard-Completo .grid.division {
  border-top: 1px solid rgb(226, 226, 229);
  min-height: 120px;
}
div.main.empleados .bloqueCard-Completo .grid span,
div.main.ingresos .bloqueCard-Completo .grid span {
  display: block;
}
div.main.empleados .bloqueCard-Completo .grid textarea,
div.main.ingresos .bloqueCard-Completo .grid textarea {
  resize: none;
}
div.main.empleados .bloqueCard-Completo .grid .subtitulo,
div.main.ingresos .bloqueCard-Completo .grid .subtitulo {
  text-align: right;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
}
div.main.empleados .bloqueCard-Completo .grid .subtitulo::after,
div.main.ingresos .bloqueCard-Completo .grid .subtitulo::after {
  content: ":";
}
div.main.empleados .bloqueCard-Completo .grid .subtitulo.extraInformacion,
div.main.ingresos .bloqueCard-Completo .grid .subtitulo.extraInformacion {
  height: 100%;
  margin: auto 0px;
}
div.main.empleados .bloqueCard-Completo .grid input,
div.main.empleados .bloqueCard-Completo .grid textarea,
div.main.ingresos .bloqueCard-Completo .grid input,
div.main.ingresos .bloqueCard-Completo .grid textarea {
  background-color: rgb(243, 243, 243);
  border-radius: 7.5px;
  padding: 0 5px;
  font-family: "Inter";
}
div.main.empleados .bloqueCard-Completo .grid .informacion,
div.main.ingresos .bloqueCard-Completo .grid .informacion {
  text-align: left;
  font-size: 15px;
  border: 0px;
}
div.main.empleados .bloqueCard-Completo .grid .informacion input,
div.main.ingresos .bloqueCard-Completo .grid .informacion input {
  border: 0.1px solid gray !important;
  padding: 1%;
  text-align: center;
}
div.main.empleados .bloqueCard-Completo .grid .informacion.extraInformacion,
div.main.ingresos .bloqueCard-Completo .grid .informacion.extraInformacion {
  height: 50px;
}
div.main.empleados .bloqueCard-Completo .grid-botones,
div.main.ingresos .bloqueCard-Completo .grid-botones {
  padding: 20px 0;
  border-top: 1px solid rgb(226, 226, 229);
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton {
  color: rgb(0, 0, 0);
  border-color: transparent;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 15px;
  border: 1px solid rgb(190, 190, 190);
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton:disabled,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton:disabled,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton:disabled,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton:disabled {
  background-color: #888 !important;
  color: white;
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton:disabled:hover,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton:disabled:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton:disabled:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton:disabled:hover {
  text-decoration: none !important;
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.eliminar,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.eliminar,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.eliminar,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.eliminar {
  background-color: rgb(252, 150, 150);
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.eliminar:hover,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.eliminar:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.eliminar:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.eliminar:hover {
  color: white;
  background-color: darkred;
  text-decoration: underline;
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.editar,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.editar,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.editar,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.editar {
  background-color: rgb(252, 216, 150);
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.editar:hover,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.editar:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.editar:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.editar:hover {
  color: white;
  background-color: rgb(219, 182, 16);
  text-decoration: underline;
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.alta,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.alta,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.alta,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.alta {
  background-color: rgb(250, 213, 255);
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.alta:hover,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.alta:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.alta:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.alta:hover {
  color: white;
  background-color: rgb(236, 92, 255);
  text-decoration: underline;
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.baja,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.baja,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.baja,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.baja {
  background-color: rgb(194, 231, 255);
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.baja:hover,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.baja:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.baja:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.baja:hover {
  color: white;
  background-color: rgb(51, 174, 255);
  text-decoration: underline;
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.azulClaro,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.azulClaro,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.azulClaro,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.azulClaro {
  background-color: rgb(225, 243, 255);
}
div.main.empleados .bloqueCard-Completo .grid-botones input[type=submit].boton.azulClaro:hover,
div.main.empleados .bloqueCard-Completo .grid-botones a.boton.azulClaro:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones input[type=submit].boton.azulClaro:hover,
div.main.ingresos .bloqueCard-Completo .grid-botones a.boton.azulClaro:hover {
  color: white;
  background-color: rgb(96, 191, 255);
  text-decoration: underline;
}
div.main.empleados .bloqueCard-Completo .informacionConsulta,
div.main.ingresos .bloqueCard-Completo .informacionConsulta {
  background-color: rgb(226, 146, 146);
  margin: 0 20px;
  padding: 10px;
  border-radius: 7.5px;
  font-size: 15px;
  min-height: 20px;
}
div.main.empleados .bloqueCard-Completo .informacionConsulta:empty,
div.main.ingresos .bloqueCard-Completo .informacionConsulta:empty {
  background-color: #F4F4F5;
}
div.main.empleados .empleados,
div.main.ingresos .empleados {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}
div.main.empleados .empleados .bloqueCard,
div.main.ingresos .empleados .bloqueCard {
  background-color: white;
  border-radius: 7.5px;
  border: 1px solid #F9F9FA;
  min-width: 375px;
  width: 400px;
  padding: 10px;
  padding-bottom: 0;
  position: relative;
}
div.main.empleados .empleados .bloqueCard:hover .icono.archivar, div.main.empleados .empleados .bloqueCard:hover .icono.archivado,
div.main.ingresos .empleados .bloqueCard:hover .icono.archivar,
div.main.ingresos .empleados .bloqueCard:hover .icono.archivado {
  display: flex;
  align-items: center;
  justify-content: center;
}
div.main.empleados .empleados .bloqueCard .icono,
div.main.ingresos .empleados .bloqueCard .icono {
  background-color: transparent;
  border: 0px;
}
div.main.empleados .empleados .bloqueCard .icono.archivar, div.main.empleados .empleados .bloqueCard .icono.archivado,
div.main.ingresos .empleados .bloqueCard .icono.archivar,
div.main.ingresos .empleados .bloqueCard .icono.archivado {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
}
div.main.empleados .empleados .bloqueCard .icono.archivar:hover, div.main.empleados .empleados .bloqueCard .icono.archivado:hover,
div.main.ingresos .empleados .bloqueCard .icono.archivar:hover,
div.main.ingresos .empleados .bloqueCard .icono.archivado:hover {
  cursor: pointer;
}
div.main.empleados .empleados .bloqueCard .icono.archivar img, div.main.empleados .empleados .bloqueCard .icono.archivado img,
div.main.ingresos .empleados .bloqueCard .icono.archivar img,
div.main.ingresos .empleados .bloqueCard .icono.archivado img {
  display: block;
  width: 50px;
  height: 50px;
}
div.main.empleados .empleados .bloqueCard .tituloEmpl,
div.main.ingresos .empleados .bloqueCard .tituloEmpl {
  text-align: center;
  letter-spacing: 1px;
  font-size: 17px;
  padding: 5%;
  border-bottom: 1px solid rgb(226, 226, 229);
}
div.main.empleados .empleados .bloqueCard .tituloEmpl span,
div.main.ingresos .empleados .bloqueCard .tituloEmpl span {
  font-weight: 700;
}
div.main.empleados .empleados .bloqueCard .grid-3,
div.main.ingresos .empleados .bloqueCard .grid-3 {
  display: grid;
  grid-template-columns: 35% 30% 20%;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 7.5px;
  padding: 10px 0px;
}
div.main.empleados .empleados .bloqueCard .grid-3 .subtitulo2,
div.main.ingresos .empleados .bloqueCard .grid-3 .subtitulo2 {
  grid-column: 1/span 3;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1.5px;
}
div.main.empleados .empleados .bloqueCard .grid-3.division,
div.main.ingresos .empleados .bloqueCard .grid-3.division {
  border-top: 1px solid rgb(226, 226, 229);
  min-height: 120px;
}
div.main.empleados .empleados .bloqueCard .grid-3 span,
div.main.ingresos .empleados .bloqueCard .grid-3 span {
  display: block;
}
div.main.empleados .empleados .bloqueCard .grid-3 textarea,
div.main.ingresos .empleados .bloqueCard .grid-3 textarea {
  resize: none;
}
div.main.empleados .empleados .bloqueCard .grid-3 .subtitulo,
div.main.ingresos .empleados .bloqueCard .grid-3 .subtitulo {
  text-align: right;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  padding: 1px;
}
div.main.empleados .empleados .bloqueCard .grid-3 .subtitulo.sinNada::after,
div.main.ingresos .empleados .bloqueCard .grid-3 .subtitulo.sinNada::after {
  content: "";
}
div.main.empleados .empleados .bloqueCard .grid-3 .subtitulo::after,
div.main.ingresos .empleados .bloqueCard .grid-3 .subtitulo::after {
  content: ":";
}
div.main.empleados .empleados .bloqueCard .grid-3 .subtitulo.extraInformacion,
div.main.ingresos .empleados .bloqueCard .grid-3 .subtitulo.extraInformacion {
  height: 100%;
  margin: auto 0px;
}
div.main.empleados .empleados .bloqueCard .grid-3 input,
div.main.empleados .empleados .bloqueCard .grid-3 textarea,
div.main.ingresos .empleados .bloqueCard .grid-3 input,
div.main.ingresos .empleados .bloqueCard .grid-3 textarea {
  background-color: rgb(243, 243, 243);
  border-radius: 7.5px;
  padding: 0 5px;
  font-family: "Inter";
}
div.main.empleados .empleados .bloqueCard .grid-3 .informacion,
div.main.ingresos .empleados .bloqueCard .grid-3 .informacion {
  text-align: left;
  font-size: 15px;
  border: 0px;
  padding: 1px;
}
div.main.empleados .empleados .bloqueCard .grid-3 .informacion.extraInformacion,
div.main.ingresos .empleados .bloqueCard .grid-3 .informacion.extraInformacion {
  height: 50px;
}
div.main.empleados .empleados .bloqueCard .grid-3 .informacion.separador-::before,
div.main.ingresos .empleados .bloqueCard .grid-3 .informacion.separador-::before {
  content: "-> ";
}
div.main.empleados .empleados .bloqueCard .grid-3 .informacion.separador-,
div.main.ingresos .empleados .bloqueCard .grid-3 .informacion.separador- {
  background-color: rgb(233, 233, 233);
  border-radius: 5px;
  padding: 1px;
  text-align: center;
}
div.main.empleados .empleados .bloqueCard .grid-3 .informacion.separador-:hover,
div.main.ingresos .empleados .bloqueCard .grid-3 .informacion.separador-:hover {
  background-color: #dfeeff;
}
div.main.empleados .empleados .bloqueCard .grid,
div.main.ingresos .empleados .bloqueCard .grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 7.5px;
  padding: 10px 0px;
}
div.main.empleados .empleados .bloqueCard .grid .subtitulo2,
div.main.ingresos .empleados .bloqueCard .grid .subtitulo2 {
  grid-column: 1/span 2;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1.5px;
}
div.main.empleados .empleados .bloqueCard .grid.division,
div.main.ingresos .empleados .bloqueCard .grid.division {
  border-top: 1px solid rgb(226, 226, 229);
  min-height: 120px;
}
div.main.empleados .empleados .bloqueCard .grid span,
div.main.ingresos .empleados .bloqueCard .grid span {
  display: block;
}
div.main.empleados .empleados .bloqueCard .grid textarea,
div.main.ingresos .empleados .bloqueCard .grid textarea {
  resize: none;
}
div.main.empleados .empleados .bloqueCard .grid .subtitulo,
div.main.ingresos .empleados .bloqueCard .grid .subtitulo {
  text-align: right;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
}
div.main.empleados .empleados .bloqueCard .grid .subtitulo::after,
div.main.ingresos .empleados .bloqueCard .grid .subtitulo::after {
  content: ":";
}
div.main.empleados .empleados .bloqueCard .grid .subtitulo.extraInformacion,
div.main.ingresos .empleados .bloqueCard .grid .subtitulo.extraInformacion {
  height: 100%;
  margin: auto 0px;
}
div.main.empleados .empleados .bloqueCard .grid input,
div.main.empleados .empleados .bloqueCard .grid textarea,
div.main.ingresos .empleados .bloqueCard .grid input,
div.main.ingresos .empleados .bloqueCard .grid textarea {
  background-color: rgb(243, 243, 243);
  border-radius: 7.5px;
  padding: 0 5px;
  font-family: "Inter";
}
div.main.empleados .empleados .bloqueCard .grid .informacion,
div.main.ingresos .empleados .bloqueCard .grid .informacion {
  text-align: left;
  font-size: 15px;
  border: 0px;
}
div.main.empleados .empleados .bloqueCard .grid .informacion.extraInformacion,
div.main.ingresos .empleados .bloqueCard .grid .informacion.extraInformacion {
  height: 50px;
}
div.main.empleados .empleados .bloqueCard .grid-botones,
div.main.ingresos .empleados .bloqueCard .grid-botones {
  padding: 20px 0;
  border-top: 1px solid rgb(226, 226, 229);
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: rgb(253, 253, 255);
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton {
  color: rgb(0, 0, 0);
  border-color: transparent;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 15px;
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton:disabled,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton:disabled,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton:disabled,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton:disabled {
  background-color: #888 !important;
  color: white;
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton:disabled:hover,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton:disabled:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton:disabled:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton:disabled:hover {
  text-decoration: none !important;
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton.eliminar,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton.eliminar,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton.eliminar,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton.eliminar {
  background-color: rgb(252, 150, 150);
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton.eliminar:hover,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton.eliminar:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton.eliminar:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton.eliminar:hover {
  color: white;
  background-color: darkred;
  text-decoration: underline;
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton.editar,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton.editar,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton.editar,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton.editar {
  background-color: rgb(252, 216, 150);
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton.editar:hover,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton.editar:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton.editar:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton.editar:hover {
  color: white;
  background-color: rgb(219, 182, 16);
  text-decoration: underline;
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton.alta,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton.alta,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton.alta,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton.alta {
  background-color: rgb(250, 213, 255);
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton.alta:hover,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton.alta:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton.alta:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton.alta:hover {
  color: white;
  background-color: rgb(236, 92, 255);
  text-decoration: underline;
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton.baja,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton.baja,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton.baja,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton.baja {
  background-color: rgb(194, 231, 255);
}
div.main.empleados .empleados .bloqueCard .grid-botones input[type=submit].boton.baja:hover,
div.main.empleados .empleados .bloqueCard .grid-botones a.boton.baja:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones input[type=submit].boton.baja:hover,
div.main.ingresos .empleados .bloqueCard .grid-botones a.boton.baja:hover {
  color: white;
  background-color: rgb(51, 174, 255);
  text-decoration: underline;
}
div.main.empleados .empleados .bloqueCard .informacionConsulta,
div.main.ingresos .empleados .bloqueCard .informacionConsulta {
  background-color: rgb(226, 146, 146);
  margin: 0 20px;
  padding: 10px;
  border-radius: 7.5px;
  font-size: 15px;
  min-height: 20px;
}
div.main.empleados .empleados .bloqueCard .informacionConsulta:empty,
div.main.ingresos .empleados .bloqueCard .informacionConsulta:empty {
  background-color: #F4F4F5;
}
div.main.empleados .bloqueNuevo,
div.main.ingresos .bloqueNuevo {
  padding: 2px;
  border-radius: 10px;
  display: flex;
  align-self: center;
  align-items: center;
  align-content: center;
  min-width: 250px;
}
div.main.empleados .bloqueNuevo a.boton-especial,
div.main.ingresos .bloqueNuevo a.boton-especial {
  padding: 5px;
  margin: auto auto;
  min-width: 70px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  border-color: #CC0132;
}
div.main.empleados .tooltip,
div.main.ingresos .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}
div.main.empleados .tooltip .tooltiptext,
div.main.ingresos .tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  width: 700px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
div.main.empleados .tooltip:hover .tooltiptext,
div.main.ingresos .tooltip:hover .tooltiptext {
  visibility: visible;
}/*# sourceMappingURL=style.css.map */