/**
 * La pregunta del grado con selectWoo, en /registro/ y en el pago (decisión de César, 08-10-2026): la caja, como los
 * demás campos del sitio (gris redondeado, 52 px, foco teal, la flecha de los desplegables en gris), y la lista, con
 * su buscador y CINCO filas a la vista (5 × 44 px = 220 px) y el resto con scroll.
 *
 * La carga `WooGradeChoice` con `front-grade-choice.js`, detrás de la hoja de Select2 de WooCommerce (`select2`).
 * Solo toca lo que está dentro de `.gca-grade-choice` (la caja) o lleva la clase `gca-grado-s2` (la lista, que
 * selectWoo cuelga de <body>): el país y la provincia del pago no cambian. Cada regla pesa más que la suya en la hoja
 * de Select2.
 *
 * En el pago, `front-checkout.css` viste todas las cajas de Select2 como sus campos (borde gris, radio 12 px), con
 * `!important`, y allí manda ella: la caja del grado queda igual que la del país. La lista manda aquí en las dos
 * páginas; la fila resaltada lleva `!important` para pasar por encima del teal que el pago pone a todas las listas.
 */

/* ------------------------------------------------------------------------------ La caja */

.gca-grade-choice .select2-container {
  max-width: 100%;
}

.gca-grade-choice .select2-container--default .select2-selection--single {
  height: 52px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f7f8f9;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.gca-grade-choice .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 44px 0 18px;
  font-size: 16px;
  line-height: 50px;
  color: #1d2b36;
}

.gca-grade-choice .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6b7982;
}

/* La flecha de selectWoo, con la forma de la de los desplegables del sitio y en gris; al abrir, da la vuelta. */
.gca-grade-choice .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: 8px;
  width: 32px;
  height: 50px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7982' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .15s;
}

.gca-grade-choice .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.gca-grade-choice .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
  transform: rotate(180deg);
}

.gca-grade-choice .select2-container--default.select2-container--focus .select2-selection--single,
.gca-grade-choice .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #2DA89F;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(45, 168, 159, .15);
}

/* Abierta, la caja conserva sus esquinas: la lista va aparte, a 6 px. */
.gca-grade-choice .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.gca-grade-choice .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
  border-radius: 10px;
}

/* Hasta que se elige «Grado único» o «Doble grado». */
.gca-grade-choice .select2-container--disabled {
  opacity: .55;
}

.gca-grade-choice .select2-container--default.select2-container--disabled .select2-selection--single {
  background: #f7f8f9;
  cursor: not-allowed;
}

/* ------------------------------------------------------------- La lista (cuelga de <body>) */

.select2-container--default .select2-dropdown.gca-grado-s2 {
  border: 1px solid #dfe6ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(22, 35, 44, .12);
  overflow: hidden;
}

.select2-container--default .select2-dropdown--below.gca-grado-s2 {
  margin-top: 6px;
}

.select2-container--default .select2-dropdown--above.gca-grado-s2 {
  margin-top: -6px;
}

.select2-container--default .select2-dropdown.gca-grado-s2 .select2-search--dropdown {
  padding: 8px;
}

.select2-container--default .select2-dropdown.gca-grado-s2 .select2-search--dropdown .select2-search__field {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f7f8f9;
  font-size: 16px; /* 16 px: el iPhone no amplía la página al escribir */
  color: #1d2b36;
  box-shadow: none;
  box-sizing: border-box;
  outline: none;
}

.select2-container--default .select2-dropdown.gca-grado-s2 .select2-search--dropdown .select2-search__field:focus {
  border-color: #2DA89F;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(45, 168, 159, .15);
}

.select2-container--default .select2-dropdown.gca-grado-s2 .select2-search--dropdown .select2-search__field::placeholder {
  color: #6b7982;
  opacity: 1;
}

/* Cinco filas en total: el buscador y cuatro de la lista (4 × 44 px); el resto va con scroll (decisión de César, 08-10-2026). */
.select2-container--default .select2-dropdown.gca-grado-s2 .select2-results > .select2-results__options {
  max-height: 176px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.select2-container--default .select2-dropdown.gca-grado-s2 .select2-results__option {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 6px 16px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.3;
  color: #1d2b36;
}

.select2-container--default .select2-dropdown.gca-grado-s2 .select2-results__message {
  color: #6b7982;
}

/* La fila resaltada (ratón o teclado), en teal muy claro. */
.select2-container--default .select2-dropdown.gca-grado-s2 .select2-results__option--highlighted,
.select2-container--default .select2-dropdown.gca-grado-s2 .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-dropdown.gca-grado-s2 .select2-results__option--highlighted[data-selected] {
  background: #f4fbfa !important;
  color: #1d2b36 !important;
}

/* El grado elegido, en teal (selectWoo lo marca con `data-selected`; su `aria-selected` es la fila resaltada). Va
   después: cuando está resaltado, sigue en teal. */
.select2-container--default .select2-dropdown.gca-grado-s2 .select2-results__option[data-selected="true"],
.select2-container--default .select2-dropdown.gca-grado-s2 .select2-results__option--highlighted[data-selected="true"] {
  background: #2DA89F !important;
  color: #fff !important;
  font-weight: 600;
}