/*
 * Plantilla de artículo.
 * El prototipo aprobado no incluye página de artículo: la jerarquía se deriva de los
 * patrones de portada y de los tokens del sistema.
 */

/* La rejilla de lectura: el texto a 720px —la medida de línea que aguanta un reportaje
   largo— y el lateral a 300, el mismo ancho que la columna de portada. */
.exxi-articulo-layout {
  max-width: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-8);
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .exxi-articulo-layout {
    grid-template-columns: minmax(0, var(--width-article)) 300px;
    gap: 60px;
    justify-content: center;
    align-items: start;
    padding-inline: var(--gutter-lg);
    padding-block: var(--space-10);
  }
}

.exxi-articulo { min-width: 0; }

.exxi-articulo-aside {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.exxi-articulo-aside .exxi-publi .exxi-container {
  max-width: none;
  padding: 0;
}

/* ---------------------------------------------------------------- Cabecera */

.exxi-articulo__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.exxi-articulo__title {
  font-size: var(--size-4xl);
  line-height: var(--leading-tight);
  margin: 0;
}

@media (min-width: 900px) {
  .exxi-articulo__title { font-size: var(--size-5xl); }
}

.exxi-articulo__deck {
  font-family: var(--font-serif);
  font-size: var(--size-xl);
  font-weight: 400;
  line-height: var(--leading-base);
  color: var(--color-text-mid);
  margin-top: var(--space-4);
  text-wrap: pretty;
}

.exxi-articulo__media { margin: var(--space-6) 0 0; }

.exxi-articulo__img {
  display: block;
  width: 100%;
  height: auto;
}

.exxi-articulo__pie {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  line-height: var(--leading-base);
  color: var(--color-text-muted);
  padding-top: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  padding-bottom: var(--space-3);
}

.exxi-articulo__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
}

.exxi-articulo__author {
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

/* Separador discreto entre metadatos, sin pintar HTML extra. */
.exxi-articulo__byline > * + *::before {
  content: "·";
  margin-right: var(--space-3);
  color: var(--color-text-subtle);
}

/* Contenido patrocinado: marco permanente, para que el lector nunca dude. */
.exxi-articulo--branded {
  border-left: var(--border-width-strong) solid var(--color-branded-content);
  padding-left: var(--space-4);
}

/* ---------------------------------------------------- Entidades mencionadas */

.exxi-articulo__entities {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 3px solid var(--color-ink);
}

.exxi-entity-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}

.exxi-entity-group__label {
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex: 0 0 100%;
}

@media (min-width: 600px) {
  .exxi-entity-group__label { flex: 0 0 110px; }
}

.exxi-entity-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.exxi-entity-group__list a {
  display: inline-block;
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.exxi-entity-group__list a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ------------------------------------------------------------ Relacionadas */

.exxi-relacionadas { margin-top: var(--space-10); }

.exxi-relacionadas__grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-5);
}

@media (min-width: 600px) {
  .exxi-relacionadas__grid { grid-template-columns: repeat(3, 1fr); }
}

.exxi-relacionada { display: block; color: inherit; text-decoration: none; }

.exxi-relacionada__img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: var(--space-3);
}

.exxi-relacionada__kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

.exxi-relacionada__titular {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-top: var(--space-1);
  text-wrap: pretty;
}

.exxi-relacionada:hover .exxi-relacionada__titular { color: var(--color-accent); }

/* --------------------------------------------------------- Compartir */

.exxi-compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

.exxi-compartir--pie {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 3px solid var(--color-ink);
}

.exxi-compartir__rotulo {
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.exxi-compartir__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Botón y enlace se pintan igual: para el lector son la misma acción. */
.exxi-compartir__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.exxi-compartir__enlace svg { flex-shrink: 0; }

/* Al copiar, el eslabón deja paso al visto: la confirmación se ve sin leer nada. */
.exxi-compartir__icono { display: inline-flex; }
.exxi-compartir__icono--hecho { display: none; color: var(--color-accent); }
.exxi-compartir__enlace.is-copiado .exxi-compartir__icono--normal { display: none; }
.exxi-compartir__enlace.is-copiado .exxi-compartir__icono--hecho { display: inline-flex; }
.exxi-compartir__enlace.is-copiado { border-color: var(--color-accent); color: var(--color-accent); }

/* El color de cada casa solo aparece al pasar por encima: en reposo la fila es del
   periódico, no de las redes. */
.exxi-compartir__enlace:hover { border-color: var(--color-accent); color: var(--color-accent); }
.exxi-compartir__enlace--whatsapp:hover { border-color: #25d366; color: #128c4a; }
.exxi-compartir__enlace--linkedin:hover { border-color: #0a66c2; color: #0a66c2; }
.exxi-compartir__enlace--x:hover { border-color: var(--color-ink); color: var(--color-ink); }

.exxi-compartir__aviso {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.exxi-compartir__aviso.is-visible { opacity: 1; }

/* En una pantalla estrecha manda el icono: los cinco caben en una fila. */
@media (max-width: 599px) {
  .exxi-compartir__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Sin etiqueta, el icono es todo el objetivo: 44x44, que es lo que pide un dedo. */
  .exxi-compartir__enlace { min-width: 44px; min-height: 44px; justify-content: center; }
  .exxi-compartir__enlace--sistema .exxi-compartir__texto { position: static; width: auto; height: auto; clip-path: none; }
}