body, html {
  height: 100%;
  margin: 0;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  font-size: 18px;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  overflow-y: auto;
}
.contenedor1 {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  line-height: 1.3;
}

.ini {
	font-weight: bold;
	color: blue;
}

.cuadro {
  width: 90%; /* Deja un 20% de espacio a cada lado */
  margin: 1%;
  padding: 20px;
  background-image: url("./fondo.gif");
  border: 3px solid #000;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  text-align: justify;
  box-sizing: border-box; /* Incluye el padding en el tamaño total */
  border-radius: 8px; /* Bordes redondeados opcionales */
  max-height: calc(100vh - 40px); /* respeta el padding de .contenedor1 */
  overflow-y: auto;               /* si es grande, scroll dentro del cuadro */
}

.cuadro li {
	margin-left: 5%;
	margin-right: 15%;
	margin-bottom: 5px;
}

.cuadro h1 {
	color : blue;
	text-align: center;
	font-size: 24px;
	font-weight: bolder;
}

/* NUEVO: contenedor flex para las tarjetas */
.contenedor-tarjetas {
  display: flex;
  gap: 20px;              /* Espacio entre las tarjetas (puedes ajustar) */
  margin-top: 30px;       /* Espacio encima de las tarjetas (opcional) */
  justify-content: center; /* Centra las tarjetas dentro del cuadro */
}

/* Tarjetas con flexbox */
.tarjeta {
  flex: 1;                    /* Cada una ocupa el mismo espacio disponible */
  max-width: 50%;             /* Máximo 50% para que sean dos por línea */
  padding: 20px;
  text-align: justify;
  box-sizing: border-box;
  border: 2px solid #000;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.8); /* Opcional: fondo semi-transparente si el gif es muy cargado */
}

.tarjeta h2 {
	text-align: center;
	color: green;
	margin-top: 3px;
}

.tarjeta a, .tarjeta a:visited {
	text-decoration: none;
	color: blue;
}
 
.tarjeta a:hover {
	text-decoration: underline;
	color: lightblue;
	font-style: italic;
} 

.destacado {
	color : darkorange;
	font-weight: bold;
}

.acronimo{
	color: green;
	font-style: italic;
}

/* Contenedor de las tarjetas: 3 por fila */
.contenedor-3tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* Siempre 3 columnas iguales */
  gap: 20px;                              /* Espacio uniforme entre tarjetas (horizontal y vertical) */
  margin-top: 30px;                       /* Espacio encima del bloque de tarjetas */
  justify-items: stretch;                 /* Las tarjetas ocupan todo el ancho de su celda */
}

/* Cada tarjeta ocupa aproximadamente 1/3 del ancho, menos el gap */
.tarjetaDe3 {
  padding: 20px;
  text-align: justify;
  box-sizing: border-box;
  border: 2px solid #000;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente para legibilidad */
  /* Ya no necesitas flex ni calc aquí */
  font-size: 11px;
  transition: transform 120ms ease; /* opcional, para que se note suave */
  cursor: pointer;
}

.tarjetaDe3.seleccionada{
  padding: 20px;
  text-align: justify;
  box-sizing: border-box;
  border: 2px solid #000;
  border-radius: 8px;
  background-color: rgba(230, 255, 230, 0.9); /* Fondo semi-transparente para legibilidad */
  /* Ya no necesitas flex ni calc aquí */
  font-size: 11px;
  transform: translate(-4px, -4px); /* izquierda, arriba */
}

.tarjetaDe3 h2 {
	text-align: center;
}

.checkbox-group label {
  display: flex;              /* Usamos flex para alinear checkbox y texto */
  align-items: center;       /* Centra verticalmente el checkbox con el texto */
  gap: 8px;                  /* Espacio entre el cuadradito y el texto */
  margin-bottom: 12px;       /* Espacio entre cada par de checkbox + texto */
  cursor: pointer;           /* Mejora la experiencia al hacer clic */
}

/* Opcional: un poco más de control sobre el input */
.checkbox-group input[type="checkbox"] {
  margin: 0;                 /* Quita el margen por defecto que a veces añade el navegador */
  flex-shrink: 0;            /* Evita que el checkbox se encoja */
}

.tarjetaDe3 .chk input{
  margin-right: 6px;
  vertical-align: middle;
}

.marcado {
	font-weight: bold;
	color: green;
}
.titulo {
	font-style: italic;
	color: red;
}
.label_1 {
	font-size: 20px;
	font-weight: bold;
	color: black;
}
.selector_1 {
	font-weight: bold;
	color: green;
	font-size: 20px;
	width: max-content;
}
.miRecuadro {
  position: fixed;          /* se centra respecto a la ventana */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 30vw;              /* 30% del ancho de la pantalla */
  height: 17vh;             /* 17% del alto de la pantalla */

  background: #cfe8ff;      /* azul clarito */
  border: 2px solid #7bb6ff;
  border-radius: 12px;

  display: flex;            /* por si quieres centrar contenido */
  align-items: center;
  justify-content: center;

  padding: 16px;
  box-sizing: border-box;
  visibility : hidden;
}

.dialogo {
	margin: 0 0 0.2em 2em;
	line-height: 1.2;
}

.enlaceBoton, .enlaceBoton:visited {
	display: inline-block;
	margin: 10px auto 0;
	padding: 6px 12px;
	box-sizing: border-box;
  	border: 2px solid #000;
   border-radius: 8px;
   text-align: center;
   text-decoration: none;
   color: black;
   background-color: rgba(150, 150, 150, 0.2);
}

.enlaceBoton:hover {
	display: inline-block;
	margin: 10px auto 0;
	padding: 6px 12px;
	box-sizing: border-box;
  	border: 2px solid #000;
   border-radius: 8px;
   text-align: center;
   text-decoration: none;
   color: black;
  	background-color: rgba(153, 25, 75, 0.2);
}

.cuadro p:last-child{
  text-align: center; /* centra lo inline dentro del p */
  margin-top: 10px;
}