*{
    padding: 0px;
    margin: 0px;
}

header {
  width: 100%;
  height: 50px;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(25, 52, 65);
  color: rgb(255, 255, 255);
  font-size: 18pt;

    padding: 10px 20px;
}

.titulo {
  font-size: 24px;
  font-weight: bold;

  display: flex;
    align-items: center;
    color: #ffffff;
}

.icons {
  display: flex;
  align-items: center;
  color: #ffffff;
  
}

.ayuda {
  font-size: 16px;
  cursor: pointer;
  padding-right: 10px;
  position: relative;
  color: #ffffff;
}

header .icons svg {
  fill: white; /* Cambia el color de relleno a blanco */
}

header .icons svg:hover {
  fill: #007bff;
}

.ayuda:hover {
  color: #007bff;
  text-decoration: none;
}

.submenu {
  display: none;
  position: absolute;
  right: 0; /* Alinea el submenú a la derecha */
  top: 20px; /* Ajusta la distancia hacia abajo del icono */
  background-color: rgb(255, 255, 255);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
}

.submenu a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 5px 10px;
  white-space: nowrap;
}

.submenu a:hover {
  background-color: #f1f1f1;
}

.ayuda:hover .submenu {
  display: block;
  /* Animación opcional */
  animation: slideDown 0.3s ease-out;
}



@keyframes slideDown {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

nav{
    
}

.accordion-body input {
    margin-bottom: 10px;  /* Añadir espacio debajo de cada input */
  }
  
  /* También puedes ajustar el margin de los labels si es necesario 
  .accordion-body label {
    margin-bottom: 5px;
    display: block;  /* Esto asegurará que el label esté en su propia línea */
  /*}*/

  .accordion-button {
    background-color: #f5f5f5;  /* Gris suave */
    color: #000;  /* Color del texto en negro (puedes cambiarlo si lo prefieres) */
  }

  .accordion-body {
    background-color: #f9f9f9;  /* Otro gris suave */
    color: #000;  /* Color del texto en negro */
  }

  nav .btns{
    text-align: center;
    padding: 20px;
    align-items: center;
  }

  nav .btns .btncal{
    padding: 10px;
    border-radius: 10px;
    background-color: rgb(29, 239, 239);
    font-weight: bold;
  }

  nav .btns .btncal:hover{
    background-color: aqua;
  }

  nav .btns .btnlim{
    padding: 10px;
    border-radius: 10px;
  }

  nav .btns .btnlim:hover{
    background-color: rgb(250, 255, 255);
  }


 main{
    padding: 20px;
 }


 main article {
    display: flex;
    flex-wrap: wrap;  /* Permite que las secciones se "envuelvan" a la siguiente línea si no hay suficiente espacio */
    justify-content: space-between;  /* Espacia las secciones uniformemente cuando están en una fila */
  }
  
  main section {
    flex: 1 1 30%;  /* Cada sección ocupará el 30% del ancho disponible */
    margin: 10px;   /* Espacio entre las secciones */
    border-style: solid;
    border-color: rgb(180, 180, 180);
    border-radius: 10px;
    padding: 15px;
  }

  
  
  /* Ajustes para pantallas más pequeñas */
  @media (max-width: 768px) {
    main section {
      flex: 1 1 100%;  /* En pantallas pequeñas, cada sección ocupa el 100% del ancho */
    }
  }


          /* Estilo para el contenedor de ayuda */
          .help-icon {
            cursor: pointer;
            font-size: 18px;
            color: #007bff;
            margin-left: 5px;
        }

        /* Estilo del cuadro de texto de ayuda */
        .help-box {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            border: 1px solid #ddd;
            padding: 8px;
            width: 200px;
            border-radius: 5px;
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }