/*
 * Secciones del contenido migrado (lib/secciones-legacy.ts).
 *
 * Una página del constructor es una pila de secciones, y su aire es el de
 * ellas: medido en seom.org, 40px arriba y abajo (30 en `xsmall`, 20 en
 * `small`, 140 en `large`, 180 en `xlarge`), nada por el lado que la maqueta
 * quitaba, y las secciones pegadas unas a otras. Dentro, cada elemento lleva
 * 30px encima del anterior (`uk-margin`) y cada fila 40px (`uk-grid-margin`);
 * el primero y el último, ninguno. Eso es lo que se replica aquí, con más
 * peso que los márgenes por defecto de `.legacy` (los párrafos a 30px, los
 * encabezados a 2,4em…), que dentro de una sección no pintaban nada.
 *
 * La imagen de fondo, su tamaño y su posición llegan en variables.
 *
 * Lo carga la web pública (globals.css), el panel (gestion.css) y el documento
 * aislado del contenido UIkit (/legacy/<coll>/<id>).
 */

[data-seom-seccion] {
  --seccion-relleno: 40px;
  margin: 0;
  padding: var(--seccion-relleno) 0;
  background-image: var(--seccion-fondo, none);
  background-size: var(--seccion-tamano, auto);
  background-position: var(--seccion-posicion, center);
  background-repeat: no-repeat;
}

/* Con fondo (imagen o color), el contenido no puede ir pegado al borde. */
[data-seom-seccion][style*='--seccion-fondo'],
[data-seom-seccion][data-seccion-estilo] {
  padding-left: 20px;
  padding-right: 20px;
}

[data-seom-seccion][data-seccion-relleno='xsmall'] {
  --seccion-relleno: 30px;
}

[data-seom-seccion][data-seccion-relleno='small'] {
  --seccion-relleno: 20px;
}

[data-seom-seccion][data-seccion-relleno='large'] {
  --seccion-relleno: clamp(70px, 10vw, 140px);
}

[data-seom-seccion][data-seccion-relleno='xlarge'] {
  --seccion-relleno: clamp(90px, 13vw, 180px);
}

[data-seom-seccion][data-seccion-sin-arriba] {
  padding-top: 0;
}

[data-seom-seccion][data-seccion-sin-abajo] {
  padding-bottom: 0;
}

/* Los fondos del tema (`style` de la sección), medidos en seom.org. */
[data-seom-seccion][data-seccion-estilo='muted'] {
  background-color: #f2f2f2;
}

[data-seom-seccion][data-seccion-estilo='secondary'] {
  background-color: #f1f1f1;
}

[data-seom-seccion][data-seccion-estilo='primary'] {
  background-color: #000;
  color: rgba(255, 255, 255, 0.7);
}

/* Contenedor estrecho (`width: small`, 900px; `xsmall`, 750px). */
[data-seom-seccion][data-seccion-ancho='small'] > * {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

[data-seom-seccion][data-seccion-ancho='xsmall'] > * {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

/* Una fila vacía que no es la primera de su sección: en el original era una
   rejilla sin nada y aun así sumaba sus 40px de separación. */
[data-seom-seccion][data-seom-seccion] > * + [data-seom-fila-vacia] {
  margin-top: 40px;
}

/* ---- el aire entre elementos, dentro de una sección y dentro de sus columnas.
   El atributo repetido sube el peso por encima de las reglas de `.legacy`. */
[data-seom-seccion][data-seom-seccion] > *,
[data-seom-seccion] [data-seom-columna][data-seom-columna] > * {
  margin-top: 0;
  margin-bottom: 0;
}

[data-seom-seccion][data-seom-seccion] > * + *,
[data-seom-seccion] [data-seom-columna][data-seom-columna] > * + * {
  margin-top: 30px;
}

[data-seom-seccion][data-seom-seccion] > * + [data-seom-fila],
[data-seom-seccion][data-seom-seccion] > [data-seom-fila] + * {
  margin-top: 40px;
}

/* La separación propia de la fila (`row_gap`): 10px la pequeña, 70px la
   grande, ninguna en `collapse`. */
[data-seom-seccion][data-seom-seccion] > * + [data-seom-fila][data-fila-separacion='collapse'] {
  margin-top: 0;
}

[data-seom-seccion][data-seom-seccion] > * + [data-seom-fila][data-fila-separacion='small'] {
  margin-top: 10px;
}

[data-seom-seccion][data-seom-seccion] > * + [data-seom-fila][data-fila-separacion='large'] {
  margin-top: 40px;
}

@media (min-width: 1200px) {
  [data-seom-seccion][data-seom-seccion] > * + [data-seom-fila][data-fila-separacion='large'] {
    margin-top: 70px;
  }
}

/* Lo que no se ve no separa: un ancla, un <style>, un <script>. */
[data-seom-seccion][data-seom-seccion] > :is(style, script, [data-seom-ancla]) + *,
[data-seom-seccion] [data-seom-columna][data-seom-columna] > :is(style, script, [data-seom-ancla]) + * {
  margin-top: 0;
}

/* Y dentro de cada elemento, como en el tema: lo primero no suma margen por
   arriba, y los párrafos y las listas llevan 30px por DEBAJO y ninguno por
   encima (medido: `p { margin: 0 0 30px }`). El elemento es `flow-root`, como
   el `uk-panel` del original, así que el margen del último párrafo se queda
   dentro y separa del elemento siguiente igual que allí. */
[data-seom-seccion] > div:not([data-seom-fila]),
[data-seom-seccion] [data-seom-columna] > div {
  display: flow-root;
}

[data-seom-seccion] > * > :first-child,
[data-seom-seccion] [data-seom-columna] > * > :first-child {
  margin-top: 0;
}

[data-seom-seccion] :is(p, ol, ul:not([data-seom-acordeon]), table, blockquote) {
  margin: 0 0 30px;
}

/* Destino de los enlaces `#id` a una sección sin fondo: no ocupa sitio, pero
   deja aire por encima para que la cabecera fija no tape el título. */
[data-seom-ancla] {
  height: 0;
  scroll-margin-top: 100px;
}

[data-seom-seccion][id] {
  scroll-margin-top: 100px;
}

/* ---------------------------------------------------------------- titulares
 *
 * Los `headline` del constructor (lib/titulares-legacy.ts) con el tamaño y el
 * peso que les daba el tema antiguo, medidos sobre seom.org: h1 45px, h2 36px,
 * h3 22px… y sin negrita (la negrita, si la había, la trae el propio texto con
 * un `<strong>`). En pantallas estrechas los dos grandes se reducen.
 */
[data-seom-titular] {
  font-weight: 400;
  line-height: 1.3;
  /* El margen del tema: 20px. El de los encabezados de la web nueva (2,4em)
     dejaba un h2 de 36px con 86px de aire encima. */
  margin: 20px 0;
}

h1[data-seom-titular] {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8125rem);
  line-height: 1.2;
}

h2[data-seom-titular] {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
}

h3[data-seom-titular] {
  font-size: 1.375rem;
}

h4[data-seom-titular] {
  font-size: 1.25rem;
  line-height: 1.4;
}

h5[data-seom-titular] {
  font-size: 1.125rem;
  line-height: 1.4;
}

h6[data-seom-titular] {
  font-size: 1rem;
  line-height: 1.4;
}

[data-seom-titular][data-titular-estilo='small'] {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.25rem);
}

[data-seom-titular][data-titular-estilo='medium'] {
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1.1;
}

[data-seom-titular][data-titular-estilo='large'] {
  font-size: clamp(3rem, 1.4rem + 5.5vw, 6rem);
  line-height: 1.1;
}

[data-seom-titular][data-titular-estilo='primary'],
[data-seom-titular][data-titular-estilo='hero'] {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8125rem);
}

[data-seom-titular][data-titular-alinear='centro'] {
  text-align: center;
}

[data-seom-titular][data-titular-alinear='derecha'] {
  text-align: right;
}

/*
 * Paneles «tarjeta» (lib/paneles-legacy.ts): el `panel` con `card-default`
 * del tema. Fondo blanco, 40px de relleno, la sombra suave de UIkit y el ancho
 * de su columna. Con `panel_link` la tarjeta entera es el enlace: el enlace
 * vacío del final se estira por encima.
 */
[data-seom-panel] {
  position: relative;
  box-sizing: border-box;
  background: #fff;
  color: #666;
  padding: 40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.1s ease-in-out;
}

[data-seom-panel='primary'] {
  background: var(--color-primary, #007078);
  color: #fff;
}

[data-seom-panel='secondary'] {
  background: #222;
  color: #fff;
}

[data-seom-panel][data-panel-ancho] {
  width: 100%;
}

@media (min-width: 960px) {
  [data-seom-panel][data-panel-ancho] {
    width: calc(var(--panel-ancho) - 20px);
  }
}

[data-seom-panel] > :first-child,
[data-seom-panel] > :first-child > :first-child {
  margin-top: 0;
}

[data-seom-panel] > :last-child,
[data-seom-panel] > :last-child > :last-child {
  margin-bottom: 0;
}

[data-seom-panel] :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 15px;
  color: #222;
}

[data-seom-panel] p {
  margin: 0;
}

[data-seom-panel][data-panel-enlazado] a:empty::after {
  content: '';
  position: absolute;
  inset: 0;
}

[data-seom-panel][data-panel-enlazado]:has(a:empty):hover {
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

/* Entraba deslizándose desde la izquierda (`animation: slide-left` de la
   sección en la maqueta), y se levanta al pasar el ratón. */
@keyframes seom-panel-entra {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-seom-panel] {
  animation: seom-panel-entra 0.7s ease-out 0.2s backwards;
}

[data-seom-panel][data-panel-enlazado]:has(a:empty):hover {
  transform: translateY(-4px);
}

[data-seom-panel] {
  transition:
    box-shadow 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  [data-seom-panel] {
    animation: none;
    transition: none;
  }
}

/* El titular de la tarjeta (`title_style: h5` del tema): 16px, sin negrita. */
[data-seom-panel] :is(h1, h2, h3, h4, h5, h6) {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
}

/* Una sección sin nada que pintar (un texto vacío, un módulo que no se
   migró) no existía en la web antigua: YOOtheme no saca las secciones cuyos
   elementos están vacíos. Aquí dejaba un hueco con su relleno y su fondo
   (en «Webinars del Campus», 280px en blanco bajo la tarjeta). */
[data-seom-seccion][data-seccion-vacia] {
  display: none;
}

/* Subnavegación de YOOtheme (lib/subnavs-legacy.ts): el enlace en una caja
   gris pequeña, como en la web antigua. */
p[data-seom-subnav] {
  margin: 0 0 8px;
}

p[data-seom-subnav] > a {
  display: inline-block;
  padding: 6px 10px;
  background: #ececec;
  color: #333 !important;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

p[data-seom-subnav] > a:hover {
  background: #e0e0e0;
}

/* Sin el aire de 30px entre elementos: en la maqueta, la subnavegación y el
   hueco que la sigue llevaban los márgenes quitados. */
[data-seom-subnav],
[data-seom-subnav] + * {
  margin-top: 0 !important;
}