/** ==========================================================================
 * Componente «Acordeon» — preguntas que se abren y se cierran
 *
 *   <div class="Acordeon">
 *     <details class="Acordeon-item">
 *       <summary class="Acordeon-titulo Global-h3">  la pregunta
 *       <div class="Acordeon-cuerpo">                la respuesta
 *
 * Nacio en /bolsa-de-trabajo/, que tiene once preguntas frecuentes: en una
 * rejilla ocupaban tres pantallas y para leer una habia que pasar por delante
 * de las diez restantes (Eduardo, 09/09/2026).
 *
 * NO ES EL ACORDEON VIEJO DEL TEMA. Aquel («.acordeon-container», style.css)
 * era HTML sin semantica movido con JavaScript, y su flecha llevaba tiempo sin
 * pintarse porque una regla de mas abajo la borraba. Este usa <details> y
 * <summary>, que son de serie:
 *
 *   · sin una linea de JavaScript;
 *   · el teclado lo abre y lo cierra solo, y los lectores de pantalla anuncian
 *     si esta abierto o cerrado, sin ARIA a mano;
 *   · el texto esta en el DOM aunque este cerrado, asi que los buscadores lo
 *     leen y el buscar-en-la-pagina del navegador lo encuentra y lo abre.
 *
 * La flecha es la del sistema —el glifo de Inter girado— y gira al abrirse.
 * Lo encola cei_bloque_css( 'acordeon' ).
 * ========================================================================== */

.Acordeon {
  margin: 0;
  border-top: 1px solid var(--Global-Filete);
}

.Acordeon-item {
  border-bottom: 1px solid var(--Global-Filete);
}

/*
 * El triangulito por defecto se quita por las dos vias que existen: `list-style`
 * en los navegadores que tratan el <summary> como un elemento de lista, y el
 * pseudoelemento propio de WebKit.
 */
.Acordeon-titulo {
  display: flex;
  align-items: baseline;
  gap: var(--Global-Espacio-TituloContenido);
  padding: var(--Global-Espacio-TituloContenido) 0;
  list-style: none;
  cursor: pointer;
}

.Acordeon-titulo::-webkit-details-marker {
  display: none;
}

.Acordeon-titulo:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La flecha, al final de la linea; girada hacia abajo, y hacia arriba al abrir. */
.Acordeon-titulo::after {
  content: "\2193\FE0E";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--Font-Family-Primary);
  font-weight: var(--Font-Weight-400);
  line-height: inherit;
  color: inherit;
  /* El valor de partida se declara: sin el, la transicion arranca desde `none`
     y el giro no se anima. */
  rotate: 0deg;
  transition: rotate 0.2s ease;
}

.Acordeon-item[open] > .Acordeon-titulo::after {
  rotate: 180deg;
}

.Acordeon-cuerpo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  max-width: 70ch;
  padding-bottom: var(--Global-Espacio-TituloContenido);
}

.Acordeon-cuerpo > * {
  margin: 0;
}

/*
 * El texto del cuerpo va al tamaño del parrafo, listas incluidas: la regla de
 * la casa es que dentro de un acordeon todo se lee como un Global-p, igual que
 * en el acordeon viejo del tema («.acordeon-content > p» y «ul.ul_acordeon > li»
 * en style.css). Se pone aqui y no con una clase en cada <li> porque el cuerpo
 * lo escribe el editor y no siempre las lleva (Eduardo, 10/09/2026).
 */
.Acordeon-cuerpo :is(p, li) {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}

/* El foco se ve: el <summary> es lo que se tabula. */
.Acordeon-titulo:focus-visible {
  outline: 2px solid var(--Global-Color-Black);
  outline-offset: 4px;
}