.tabla-menu-posts {
  width: 100%; /* O un ancho fijo si lo prefieres */
  display: flex; /* Para centrar el menu-posts */
  justify-content: center; /* Centra horizontalmente */
}

.menu-posts {
  position: relative;
  display: inline-block;
  margin-top: 30px;
  font-size: 20px;
  margin-bottom: 0px; /* Elimina el margen inferior innecesario */
}

.boton-menu-posts {
  background-color: #121212;
  color: white;
  border: 1px solid gray;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.boton-menu-posts:hover {
  color: #ff9b26;
}

.triangulo-boton-menu-posts {
  margin-left: 10px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #f8f8f0; /* Triángulo apuntando hacia abajo */
  border-top: none; /* Elimina el borde superior */
}

.menu-en-si-menu-posts {
  display: none;
  position: absolute;
  bottom: 100%; /* Se coloca justo encima del botón */
  left: 50%; /* Centrado horizontal */
  transform: translateX(-50%); /* Ajuste fino del centrado */
  background-color: #121212;
  padding: 15px 20px; /* Padding uniforme */
  z-index: 1;
  min-width: 250px;
  border-radius: 5px; /* Bordes redondeados opcionales */
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2); /* Sombra para mejor visibilidad */
}

.menu-en-si-menu-posts a {
  color: #f8f8f0;
  padding: 5px 0; /* Aumenta el padding vertical para mejor espaciado */
  text-decoration: none;
  display: block;
}

.menu-en-si-menu-posts a:hover {
  background-color: #353535;
}

.seccion-menu-posts {
  margin-bottom: 10px;
  border-bottom: 1px solid gray; /* Separador entre secciones */
  padding-bottom: 10px; /* Espacio debajo del separador */
}

.encabezado-seccion-menu-posts {
  font-family: "Orelega One", serif;
  font-weight: 400;
  cursor: pointer;
  padding: 5px 0;
}

.encabezado-seccion-menu-posts:hover {
  color: #ff9b26;
}

.contenido-seccion-menu-posts {
  display: none;
  padding-left: 10px;
  margin-top: 5px; /* Espacio entre el encabezado y el contenido */
}

.contenido-seccion-menu-posts a {
  display: block;
  padding: 3px 0; /* Aumenta el padding vertical para mejor espaciado */
  text-decoration: none;
  color: #f8f8f0;
}

.contenido-seccion-menu-posts a:hover {
  color: #ff9b26;
}

.fecha {
  text-align: center;
  font-style: italic;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #555555;
  padding: 10px;
  margin-bottom: 20px;
}

.tabla_navegacion {
  margin-top: 0px;
  margin-bottom: 20px;
  border-width: 0;
  border-spacing: 0;
  border-style: none;
  width: 100%;
  line-height: 1.3;
    width: 100%; /* Asegura que la tabla ocupe todo el ancho */
    table-layout: fixed; /* Evita que el contenido afecte el ancho de las celdas */
}

.tabla_navegacion td {
    padding: 10px; /* Añade un poco de espacio alrededor del texto */
    box-sizing: border-box; /* Incluye el padding en el ancho de la celda */
    vertical-align: top; /*Alinea el texto en la parte superior */
}

@media (max-width: 600px) { /* Ajusta 600px al ancho que consideres adecuado para móviles */
    .tabla_navegacion td {
        display: block; /* Apila las celdas verticalmente */
        width: 100%; /* Opcional: Ocupa todo el ancho disponible */
        text-align: center!important; /* Opcional: Centra el texto en móviles */
        margin-bottom: 10px; /* Opcional: Añade espacio entre las celdas */
        border-bottom: 1px solid #ccc; /* Opcional: Añade un borde inferior para separarlas */
    }
    .tabla_navegacion tr{
        display: block;
    }
}

@media (max-width: 600px) {
  .tabla_navegacion {
      flex-direction: column; /* Apila los elementos verticalmente en móviles */
  }

  .tabla_navegacion td {
      width: 100%; /* Ocupa todo el ancho en móviles */
      text-align: center;
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc; /* Opcional: Añade un borde inferior para separarlas */
  }
}