@charset "utf-8";
/* CSS Document */
/*.recuadro {
  width: 97%;
  height: 5%;
  margin: 10px auto;
  padding: 10px;
  background-color: rgba(40, 40, 40, 0.6);  Gris oscuro y transparente 
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}*/
.recuadro table {
  width: 90%;
  border-collapse: collapse;
}
table {
  width: 60%;
  border-collapse: collapse;
  margin: 30px auto;
}
th, td {
  border: 1px solid #888;
  padding: 10px;
  text-align: center;
}
.header-img {
  padding: 0;
  border: none;
  background: none;
}
.header-img img {
  width: 100%;
  height: auto;
  display: block;
}
.contenedor-texto {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;     /* Centra verticalmente */
  height: 150px;           /* Altura del contenedor, ajusta según necesidad */
  background: url('tu-fondo.jpg') no-repeat center center;
  background-size: cover;
}
.elemento {
  text-align: justify;
}
.texto-estilizado {
	font-size: 2em;    /* 2 veces el tamaño de la fuente base */
  /* o */
  font-size: 150%;   /* 150% del tamaño de fuente del elemento padre */
  font-style: italic; /* Texto en cursiva */
  background-color: rgba(128, 128, 128, 0.3); /* Fondo gris transparente */
  padding: 8px 16px;
  border-radius: 6px;
  color: #000; /* Color del texto, ajusta si es necesario */
  max-width: 80%; /* Opcional, para que el texto no ocupe todo el ancho */
  text-align: center; /* Centra el texto dentro del párrafo */
}
a {
  color: #fff;
}
.pie-pagina {
  width: 100%;
  color: #666;           /* Color blanco para el texto */
  text-align: center;    /* Centrar el texto */
  padding: 12px 0;       /* Espacio arriba y abajo */
  position: fixed;       /* Fija el pie de página abajo */
  bottom: 0;
  left: 0;
  background: transparent; /* Sin fondo ni recuadro */
  font-size: 1rem;
  font-family: sans-serif;
  z-index: 100;
}
.recuadro td {
 
  padding: 12px;
  text-align: center;
  background: rgba(60,60,60,0.4);
  color: #fff;
  transition: background 0.3s, transform 0.3s; /* Suaviza la animación */
}

.recuadro td:hover {
  background: rgba(120,120,120,0.8); /* Cambia a un gris más claro y menos transparente */
  color: #222;
  transform: scale(1.12); /* Hace la celda un poco más grande */
  cursor: pointer;
}