/* Cuestionario.css */
body { 
  font-family: "Open Sans", sans-serif;
  background: #f5f7fa;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.Prueba_container {
  width: 90%;
  max-width: 600px;
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  margin: 0 auto; /* auto centra horizontalmente */
}

h1 {
  text-align: center;
  color: #11296E;
  font-family: "Poppins", sans-serif;
  margin-bottom: 20px;  
}

.progress-bar {
  width: 100%;
  height: 12px;
  background-color: #DEDEDE;
  border-radius: 8px;
  overflow: hidden;
}

#progress {
  height: 100%;
  width: 0;
  background-color: #B18BFD;
  transition: width 0.3s ease;
}

.preguntas {
  margin-bottom: 20px;
  padding: 10px 15px;
  border-radius: 18px;
  border: 1px solid rgba(247, 247, 247, 0.23);
  background: #FFFFFF;
  box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.18);
}

.preguntas h4 {
  margin-bottom: 10px;
  font-weight: 400;
  font-style: "Open Sans", sans-serif;
  text-align: center;
}

.opciones {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  font-family: "Poppins", sans-serif;
  margin-top: 20px;
}

/* === BOTONES DE OPCIÓN === */
.opcion button {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s ease;
  background-color: transparent;
}

/* === COLORES BASE (contorno 50% = 80, relleno 30% = 4D) === */
.ellipse-8, .opcion:nth-child(1) button {
  border: 3px solid rgba(17, 41, 110, 0.9);
  background: rgba(17, 41, 110, 0.3);
}
.ellipse-9, .opcion:nth-child(2) button {
  border: 3px solid rgba(22, 52, 140, 0.9);
  background: rgba(22, 52, 140, 0.3);
}
.ellipse-10, .opcion:nth-child(3) button {
  border: 3px solid rgba(130, 130, 130, 0.9);
  background: rgba(130, 130, 130, 0.3);
}
.ellipse-11, .opcion:nth-child(4) button {
  border: 3px solid rgba(204, 128, 54, 0.9);
  background: rgba(204, 128, 54, 0.3);
}
.ellipse-12, .opcion:nth-child(5) button {
  border: 3px solid rgba(255, 128, 0, 0.9);
  background: rgba(255, 128, 0, 0.3);
}

/* === HOVER (contorno 75% = BF, relleno 60% = 99) === */
.opcion:nth-child(1) button:hover {
  border-color: #11296EBF;
  background-color: #11296E99;
}
.opcion:nth-child(2) button:hover {
  border-color: #16348CBF;
  background-color: #16348C99;
}
.opcion:nth-child(3) button:hover {
  border-color: #828282BF;
  background-color: #82828299;
}
.opcion:nth-child(4) button:hover {
  border-color: #CC8036BF;
  background-color: #CC803699;
}
.opcion:nth-child(5) button:hover {
  border-color: #FF8000BF;
  background-color: #FF800099;
}

/* === SELECCIONADO (contorno 100% = FF, relleno 30% = 4D) === */
.opcion button.selected {
  transform: scale(1.15);
}
.opcion:nth-child(1) button.selected {
  border-color: #11296EFF;
  background-color: #11296E4D;
}
.opcion:nth-child(2) button.selected {
  border-color: #16348CFF;
  background-color: #16348C4D;
}
.opcion:nth-child(3) button.selected {
  border-color: #828282FF;
  background-color: #8282824D;
}
.opcion:nth-child(4) button.selected {
  border-color: #CC8036FF;
  background-color: #CC80364D;
}
.opcion:nth-child(5) button.selected {
  border-color: #FF8000FF;
  background-color: #FF80004D;
}

/* === CÍRCULO INTERIOR 100% COLOR === */
.opcion button.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.opcion:nth-child(1) button.selected::after { background-color: #11296E; }
.opcion:nth-child(2) button.selected::after { background-color: #16348C; }
.opcion:nth-child(3) button.selected::after { background-color: #828282; }
.opcion:nth-child(4) button.selected::after { background-color: #CC8036; }
.opcion:nth-child(5) button.selected::after { background-color: #FF8000; }


.controls {
  display: flex;
  justify-content: space-between;
}

button#prev{
  background: white;
  color: #11296E;
  border: #11296E solid 2px;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}
 button#next {
  background: #11296E;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.instrucciones {
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra el contenido horizontalmente */
  text-align: center;
  width: 100%;
  box-sizing: border-box; /* evita que padding o gap expandan el ancho */
  overflow-x: hidden; 
  margin: 50px auto; /* margen lateral para separar del borde */
}

.grado_afirmacion {
  display: flex;
  flex-direction: column; /* primero los círculos, luego los textos */
  align-items: center;
  gap: 10px;
  width: 100%;
}

.eleccion_grado {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 20px;
  
}

.etiquetas_grado {
  display: flex;
  justify-content: space-between;
  width: 90%; /* puedes ajustar este ancho según tu diseño */
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  margin-top: 5px;
}

.etiquetas_grado p {
  margin: 0;
}

.etiquetas_grado .izquierda {
  text-align: left;
}

.etiquetas_grado .derecha {
  text-align: right;
} 

.ellipse-8,
.ellipse-9,
.ellipse-10,
.ellipse-11,
.ellipse-12 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;               /* <-- centra el texto */
  align-items: center;         /* centra verticalmente */
  justify-content: center;     /* centra horizontalmente */
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
}



/* === RESPONSIVE DESIGN === */
/* === TABLET Y MÓVIL PEQUEÑO (menos de 700px) === */
@media (max-width: 700px) {
  .Prueba_container {
    width: 95%;
    padding: 20px;
  }

  .opciones {
    gap: 25px; /* reduce un poco el espacio entre los botones */
    flex-wrap: wrap;
    justify-content: center;
  }

  .opcion button {
    width: 42px;
    height: 42px;
  }

  .opcion button.selected::after {
    width: 26px;
    height: 26px;
  }

  .eleccion_grado {
    gap: 25px; /* espacio entre los círculos de grado */
  }

  .ellipse-8,
  .ellipse-9,
  .ellipse-10,
  .ellipse-11,
  .ellipse-12 {
    width: 42px;
    height: 42px;
    font-size: 13px;
  }

  .etiquetas_grado {
    width: 90%;
    font-size: 13px;
  }

  .preguntas h4 {
    font-size: 15px;
  }
}

/* === AJUSTE ADICIONAL para pantallas menores de 540px (donde se te dañaba) === */
@media (max-width: 540px) {
  .opciones {
    gap: 18px;
  }

  .opcion button {
    width: 36px;
    height: 36px;
  }

  .opcion button.selected::after {
    width: 22px;
    height: 22px;
  }

  .eleccion_grado {
    gap: 18px;
  }

  .ellipse-8,
  .ellipse-9,
  .ellipse-10,
  .ellipse-11,
  .ellipse-12 {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .etiquetas_grado {
    width: 95%;
    font-size: 12px;
  }

  .preguntas h4 {
    font-size: 14px;
  }
}

/* === EXTRA SMALL (menos de 420px) === */
@media (max-width: 420px) {
  .Prueba_container {
    width: 100%;
    margin-top: 40px;
  }

  .opciones {
    gap: 12px;
  }

  .opcion button {
    width: 35px;
    height: 35px;
  }

  .opcion button.selected::after {
    width: 18px;
    height: 18px;
  }

  .eleccion_grado {
    gap: 12px;
  }

  .ellipse-8,
  .ellipse-9,
  .ellipse-10,
  .ellipse-11,
  .ellipse-12 {
    width: 35px;
    height: 35px;
    font-size: 11px;
  }

  .etiquetas_grado {
    font-size: 11px;
  }
}