/*
 * Botones del contenido migrado.
 *
 * Los colores y la forma son los del tema antiguo, medidos sobre seom.org: la
 * píldora de 40 px de alto, el rojo del botón de aviso, el teal apagado del
 * principal. Se copian y no se derivan de la paleta nueva porque lo que se está
 * reproduciendo es una página concreta que ya existía, no un componente del
 * sistema de diseño.
 *
 * El marcador lo pone lib/botones-legacy.ts al importar. Es CSS y nada más: sin
 * JavaScript, funciona en el primer pintado y dentro del panel.
 */

.legacy [data-seom-boton],
.article__body [data-seom-boton] {
  display: inline-block;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 25px;
  border: 0;
  border-radius: 500px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.legacy [data-seom-boton]:hover,
.article__body [data-seom-boton]:hover {
  filter: brightness(1.06);
  text-decoration: none;
}

/* Doble clase para ganarle al `.legacy a { color: … }` del contenido migrado,
   que si no le quitaría el blanco al texto. */
.legacy [data-seom-boton='primary'],
.article__body [data-seom-boton='primary'] {
  background: #92b4b8;
  color: #fff;
}

.legacy [data-seom-boton='secondary'],
.article__body [data-seom-boton='secondary'] {
  background: #f1f1f1;
  color: #000;
}

.legacy [data-seom-boton='danger'],
.article__body [data-seom-boton='danger'] {
  background: #e44e56;
  color: #fff;
}

.legacy [data-seom-boton='default'],
.article__body [data-seom-boton='default'] {
  background: transparent;
  color: var(--color-primary, #007078);
  box-shadow: inset 0 0 0 1px currentColor;
}

/* `text` no era un botón, era un enlace con aire. Se deja como enlace. */
.legacy [data-seom-boton='text'],
.article__body [data-seom-boton='text'] {
  padding: 0;
  min-height: 0;
  line-height: inherit;
  border-radius: 0;
  background: none;
}

/* ---------------------------------------------------------------------------
   LOS BOTONES ESCRITOS A MANO CON LAS CLASES DE UIKIT

   Los de arriba llevan `data-seom-boton` porque salieron del page builder de
   YOOtheme y el importador supo reconocerlos. Pero hay muchos escritos a mano
   en el editor de Joomla, con `class="uk-button uk-button-primary"` y nada más:
   ahí no hay maqueta que consultar, así que llegan tal cual.

   Dentro del iframe del contenido migrado no se notaba —ahí se carga UIkit de
   verdad—, pero en el listado de últimas noticias, que se pinta en línea, se
   quedaban en un enlace de texto suelto. Mismo aspecto que los de arriba, que
   es el que tenían en seom.org.
   --------------------------------------------------------------------------- */

.legacy a.uk-button,
.article__body a.uk-button,
.legacy button.uk-button,
.article__body button.uk-button {
  display: inline-block;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 25px;
  border: 0;
  border-radius: 500px;
  background: #f1f1f1;
  color: #000;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.legacy a.uk-button:hover,
.article__body a.uk-button:hover {
  filter: brightness(1.06);
  text-decoration: none;
}

.legacy a.uk-button-primary,
.article__body a.uk-button-primary {
  background: #92b4b8;
  color: #fff;
}

.legacy a.uk-button-danger,
.article__body a.uk-button-danger {
  background: #e44e56;
  color: #fff;
}

.legacy a.uk-button-text,
.article__body a.uk-button-text,
.legacy a.uk-button-link,
.article__body a.uk-button-link {
  padding: 0;
  min-height: 0;
  background: transparent;
  color: var(--color-primary, #007078);
  line-height: inherit;
}