/*
 * Acordeones del contenido migrado.
 *
 * El marcado es `<details>` y `<summary>` —un acordeón nativo, sin JavaScript—
 * y lo genera lib/acordeones-legacy.ts al importar. Aquí solo se le quita al
 * navegador su aspecto de fábrica y se le pone el del tema antiguo: una fila con
 * el título, un `+` a la derecha y una línea fina entre paneles.
 *
 * Lo carga la web pública (globals.css), el panel (gestion.css) y el iframe de
 * UIkit (public/vendor/legacy, ver scripts/copy-vendor.mjs).
 */

/*
 * El aire de arriba lo ponía, sin querer, el `h3` del primer panel: en el
 * respaldo era un encabezado normal y `.legacy h3` le cuelga 2,4em de margen.
 * Al meterlo en el `<summary>` ese margen se anula a propósito —chocaría con el
 * `+`— y el acordeón se quedó pegado al párrafo de encima. Se pone aquí, en el
 * elemento que de verdad separa los bloques: 1,5em + los 14px del `<summary>`
 * dan los 40px que hay en seom.org entre el texto y el primer título.
 */
ul[data-seom-acordeon],
ul[uk-accordion],
ul.uk-accordion {
  list-style: none;
  margin: 1.5em 0 1.15em;
  padding: 0;
  border-top: 1px solid #e5e5e5;
}

/* `:is(...) > li` en vez de listar los tres selectores: suma la especificidad
   del padre a la del `li` y así gana a `.legacy li`, que en globals.css va
   detrás del @import y con esta misma forma empataría —y ganaría— devolviendo
   a cada panel un margen que aquí sobra. */
:is(ul[data-seom-acordeon], ul[uk-accordion], ul.uk-accordion) > li {
  margin: 0;
  border-bottom: 1px solid #e5e5e5;
}

/* UIkit separa sus paneles con 20px sueltos; aquí los separa la línea. */
ul.uk-accordion > :nth-child(n + 2) {
  margin-top: 0;
}

ul[data-seom-acordeon] summary {
  position: relative;
  display: block;
  padding: 14px 34px 14px 0;
  cursor: pointer;
  /* El triángulo de fábrica sobra: el `+` de la derecha es el del original. */
  list-style: none;
}

ul[data-seom-acordeon] summary::-webkit-details-marker {
  display: none;
}

ul[data-seom-acordeon] summary:focus-visible {
  outline: 2px solid var(--color-accent, #ec6608);
  outline-offset: -2px;
}

/**
 * El encabezado se conserva dentro del `<summary>` —es el índice de la página—
 * pero deja de comportarse como tal: sin el margen enorme de `.legacy h3` ni la
 * rayita que ese estilo le cuelga al lado, que aquí chocaría con el `+`.
 */
ul[data-seom-acordeon] summary > :is(h2, h3, h4, h5, h6),
ul[uk-accordion] .uk-accordion-title > :is(h2, h3, h4, h5, h6) {
  display: inline;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: #1c1c1c;
}

ul[data-seom-acordeon] summary > :is(h2, h3, h4, h5, h6)::after,
ul[uk-accordion] .uk-accordion-title > :is(h2, h3, h4, h5, h6)::after {
  content: none;
}

ul[data-seom-acordeon] summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-primary, #007078);
}

ul[data-seom-acordeon] details[open] > summary::after {
  content: '−';
}

ul[data-seom-acordeon] summary:hover > :is(h2, h3, h4, h5, h6) {
  color: var(--color-primary, #007078);
}

/* El contenido del panel, con su aire, y sin que el primer y el último elemento
   arrastren márgenes que abran huecos al plegar. */
ul[data-seom-acordeon] details > :not(summary) {
  padding: 0 0 18px;
}

ul[data-seom-acordeon] details > :not(summary) > :first-child {
  margin-top: 0;
}

ul[data-seom-acordeon] details > :not(summary) > :last-child {
  margin-bottom: 0;
}

/*
 * La otra forma de acordeón: la de UIkit.
 *
 * Los acordeones llegan por dos caminos. Los que se reconstruyen desde la
 * maqueta (lib/acordeones-legacy.ts) son `<details>` nativos, y los de las
 * páginas que conservaron su marcado —`<ul uk-accordion>` con
 * `<a class="uk-accordion-title">`— los pliega UIkit por su cuenta dentro del
 * iframe. Ahí no hay nada que arreglar: funcionan. Lo que no cuadraba era el
 * dibujo —sin líneas entre paneles, con la tipografía de UIkit y con su propio
 * icono— y era el mismo elemento con dos aspectos distintos en la misma web.
 * El marcado se deja en paz y el aspecto se unifica aquí.
 */

ul[uk-accordion] > li > .uk-accordion-title,
ul.uk-accordion > li > .uk-accordion-title {
  position: relative;
  display: block;
  margin: 0;
  padding: 14px 34px 14px 0;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: #1c1c1c;
  text-decoration: none;
}

/* El `+` de UIkit es una imagen de fondo flotada a la derecha; el nuestro va
   en el `::after`, como en la otra forma, y son incompatibles. */
ul[uk-accordion] > li > .uk-accordion-title::before,
ul.uk-accordion > li > .uk-accordion-title::before {
  display: none;
}

ul[uk-accordion] > li > .uk-accordion-title::after,
ul.uk-accordion > li > .uk-accordion-title::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-primary, #007078);
}

ul[uk-accordion] > li.uk-open > .uk-accordion-title::after,
ul.uk-accordion > li.uk-open > .uk-accordion-title::after {
  content: '\2212';
}

ul[uk-accordion] > li > .uk-accordion-title:hover,
ul.uk-accordion > li > .uk-accordion-title:hover {
  color: var(--color-primary, #007078);
}

ul[uk-accordion] > li > .uk-accordion-content,
ul.uk-accordion > li > .uk-accordion-content {
  margin: 0;
  padding: 0 0 18px;
}

ul[uk-accordion] > li > .uk-accordion-content > :first-child,
ul.uk-accordion > li > .uk-accordion-content > :first-child {
  margin-top: 0;
}

ul[uk-accordion] > li > .uk-accordion-content > :last-child,
ul.uk-accordion > li > .uk-accordion-content > :last-child {
  margin-bottom: 0;
}

/*
 * Un acordeón dentro de otro es continuación, no un bloque nuevo: sin aire
 * propio, sin línea de arriba —la del panel que lo abre ya está justo encima—
 * y sin línea al final, que la pone el panel al cerrarse. Sin esto la columna
 * con paneles anidados va suelta y desalineada con las de al lado.
 */
.uk-accordion-content ul[uk-accordion],
ul[data-seom-acordeon] details > :not(summary) ul[data-seom-acordeon] {
  margin: 0;
  border-top: 0;
}

.uk-accordion-content ul[uk-accordion] > li:last-child,
ul[data-seom-acordeon] details > :not(summary) ul[data-seom-acordeon] > li:last-child {
  border-bottom: 0;
}