body{background-color: #81bf6f;}
/* Estilos Generales del Menú */
.menu ul {
  list-style-type: none; /* Quita viñetas */
padding: 0;
 margin: 0;
width: 100vw; /* 100% del ancho de la ventana */
 justify-content: center; 
align-items: center; /
transition: 0.3s; /* Transición suave */
background-color: #FFB5E8; /* Fondo del menú principal */
  display: flex; /* Alinea elementos horizontalmente */
}

.menu li {
  position: relative; /* Clave para posicionar el submenú */
}
.menu a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: white;
  background-color: #333;
}
.menu > ul > li {
  display: inline-block; /* Elementos principales en horizontal */
  float: left; /* Alternativa para alinear horizontalmente */
}

.menu li ul {
  position: absolute; /* Posicionamiento flotante bajo el ítem */
  top: 100%; /* Justo debajo del li padre */
  left: 0;
  display: none; /* Oculto por defecto */
  min-width: 150px;
}
.menu li ul li {
  display: block; /* Elementos del submenú en vertical */
}

.menu li:hover > ul {
  display: block; /* Aparece el menú vertical */
}
.menu a:hover {
  background-color: #FFBEBC;
}

/****************************************
.tabla-container {
  display: table; /* Simula la etiqueta <table> */
  width:100%;
  border-collapse: collapse; /* Para que los bordes de las celdas se fusionen */
  box-sizing: border-box;
  table-layout: fixed; /* Opcional: fija el ancho de celdas */

}
.encabezado{caption-side:top;
text-align:center;
font-weight:bold;}  
 
/* Estilo para filas */
.fila-header, .fila-datos {
  display: table-row; /* Simula la etiqueta <tr> */
  box-sizing: border-box;
}
 
/* Estilo para celdas (encabezados y datos) */
.celda {
  display: table-cell; /* Simula la etiqueta <td> o <th> */
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  box-sizing: border-box;
}
 
/* Estilos específicos para el encabezado */
.fila-header .celda {
  background-color: #f2f2f2;
  font-weight: bold;
}
 
/* Estilos para filas alternas (opcional) */
.fila-datos:nth-child(even) {
  background-color: #f9f9f9;
}
 
/* Estilos para la responsividad (opcional) */
@media (max-width: 600px) {
  .tabla-container {
    display: block; /* Cambia a block en móviles para mejor manejo */
  }
  .fila-header, .fila-datos {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #ccc;
  }
  .celda {
    display: block;
    width: 100%;
    text-align: right;
    padding-left: 50%; /* Espacio para la etiqueta del dato */
    position: relative;
  }
  .celda::before {
    content: attr(data-label); /* Usa el atributo data-label para mostrar el nombre de la columna */
    position: absolute;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    font-weight: bold;
    text-align: left;  }