html,
body {
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto; /* Hace que el contenido ocupe el espacio disponible y el footer se mantenga abajo */
  width: auto;
}

/* Contenedor principal para empujar el footer hacia abajo */
.main-content {
  flex: 1; /* Hace que este contenedor ocupe el espacio disponible */
}

.center {
  text-align: center !important;
}

.flex-boxes {
  display: flex;
  gap: 30px;
  justify-content: flex-start;
  align-items: stretch;
}

/* Primer recuadro (imagen) */
.custom-box {
  padding: 0;
  border: 20px solid #002f6c;
  background-color: white;
  width: 350px;
  height: 1050px;
  border-radius: 20px; /* Bordes redondeados SOLO en el azul */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra solo en el azul */
  overflow: hidden; /* Asegura que los elementos internos no sobresalgan */
}

/* Segundo recuadro (texto "Bienvenidos") */
.custom-box_2d {
  padding: 0;
  border: 20px solid #002f6c;
  background-color: white;
  width: 950px;
  height: 1050px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.custom-box-encuesta {
  margin: auto;
  padding: 0;
  border: 20px solid #002f6c;
  background-color: white;
  width: 800px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  overflow: auto;
}

/* Bordes interiores para ambos */
.custom-box-inner {
  padding: 5px;
  border: 15px solid #ff632d;
  height: 100%;
  /* SIN border-radius */
}

/* Recuadro interior del segundo bloque */
.custom-box-inner_2d {
  padding: 5px;
  border: none;
  background-color: #ff855a;
  height: 100%;
  color: white;
  background-color: rgba(255, 99, 45, 0.5);
  /* SIN border-radius */
}

/* Imagen centrada dentro del primer recuadro */
.img_2d {
  width: 100%; /* se adapta al ancho del recuadro */
  max-width: 300px; /* evita que se deforme si el contenedor es más ancho */
  margin: 375px auto 90px;
  display: block;
}

.segment_header {
  background: #002c6c;
  width: auto;
  text-align: Center;
  margin-top: 10px;
  border-radius: 10px;
}

.font-txt {
  font-size: 22px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: bold;
  padding-bottom: 10px;
  padding-top: 10px;
}

.txt-s {
  font-weight: bold;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.txt-sm {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.btn-gs1 {
  background-color: #002c6c;
  width: 200px;
  text-align: Center;
  border-radius: 20px;
  color: white;
  font-size: 16px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: bold;
}

.btn-gs1:hover {
  background-color: #ff632d;
  width: 200px;
  text-align: Center;
  border-radius: 20px;
  color: white;
  font-size: 20px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: bold;
}

.glosario {
  background-color: #002c6cd1;
  color: white;
}

.glosario img {
  height: 60px;
}

.btn-close {
  background-color: ghostwhite;
}

/* Cada ítem del glosario */
.glosario-item {
  list-style: none;
  padding: 0;
  margin: 0 0 5px 0;
}

/* El enlace ocupa todo el ancho y altura */
.glosario-item a {
  display: block;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  color: #002c6c;
  font-weight: bold;
  transition: background-color 0.2s, color 0.2s;
}

.glosario-item a:hover {
  background-color: #ff632d;
  color: white;
}

/* El collapse con descripción */
.glosario-descripcion {
  padding: 10px;
  margin: 0;
  background-color: #f8f9fa;
  border-left: 3px solid #ff632d;
  font-size: 14px;
  color: #333;
  border-radius: 4px;
}

/* Forzar que el collapse siempre ocupe ancho completo debajo */
.collapse {
  width: 100%;
}