/* ==========================================================================
   Página de artículo (novedad y, más adelante, artículo de KB).
   Medidas de §2.7 del spec: una sola columna, sin sidebar ni tabla de contenidos.
   ========================================================================== */

.articulo {
  padding-block: var(--space-9) var(--space-10);
}

.articulo__head {
  margin-block: var(--space-7);
}

.articulo__title {
  /* 28px/700, como el h1 de la página de artículo del original. */
  color: var(--color-text);
  font-size: 28px;
  font-weight: var(--fw-bold);
  line-height: 32px;
}

.articulo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-4);
  color: var(--color-ink);
  font-size: var(--text-small);
  line-height: var(--lh-small);
}

.articulo__category {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  /* ADR-010: el naranja sobre blanco da 2.8:1 y nunca viaja sin subrayado. */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.articulo__media {
  width: 100%;
  margin-bottom: var(--space-9);
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.articulo__tools {
  margin-top: var(--space-5);
}

/* [CORRECCIÓN §11.10] El original pinta este botón de #1e73be, un azul que no pertenece
   a la paleta: es un default de EPKB sin tematizar. */
.articulo__print {
  font-size: var(--text-small);
  padding: var(--space-3) var(--space-5);
}

.articulo__footer {
  margin-top: var(--space-10);
  padding-top: var(--space-7);
  border-top: var(--border-card);
}

/* --- Artículos relacionados --------------------------------------------------
   834px · padding 40px · fondo #f5f5f5 · radio 20px, según §2.7 del spec. */

.relacionados {
  margin-top: var(--space-10);
  padding: 40px;
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
}

.relacionados__title {
  margin-bottom: var(--space-7);
  color: var(--color-text);
  font-size: var(--text-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-section);
}

.relacionados__list {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.relacionados__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 20px;
  text-decoration: none;
  transition: var(--transition-card);
}

.relacionados__link:hover,
.relacionados__link:focus-visible {
  box-shadow: var(--shadow-card);
  color: var(--color-link-hover);
  text-decoration: underline;
}

.relacionados__icon {
  flex: none;
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .relacionados {
    padding: var(--space-7);
  }
}

/* --- Impresión ----------------------------------------------------------------
   El botón «Descargar PDF» abre el diálogo del navegador: lo que se imprime tiene que
   ser el artículo, no la navegación. */

@media print {
  .site-header,
  .site-footer,
  .breadcrumbs,
  .articulo__tools,
  .articulo__footer,
  .relacionados,
  .skip-link {
    display: none;
  }

  .articulo {
    padding: 0;
  }

  .prosa a::after {
    /* En papel un enlace sin su destino es texto muerto. */
    content: " (" attr(href) ")";
    font-size: var(--text-small);
    word-break: break-all;
  }
}

/* --- Cuerpo importado -------------------------------------------------------
   Estilos para el HTML que viene de WordPress. No tiene clases propias, así que se
   apunta a los elementos dentro de .prosa y solo ahí. */

.prosa {
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--lh-prose);
  /* El contenido importado está lleno de rutas y URLs sin espacios —
     `mkte_services\clases\CIR\Imperatore\Importador.php` es una real— y la barra invertida
     no es una oportunidad de corte. Sin esto, un solo token desborda la página entera:
     medido, 71px de scroll horizontal a 375px. */
  overflow-wrap: break-word;
}

.prosa > * + * {
  margin-top: var(--space-6);
}

.prosa h2 {
  margin-top: var(--space-9);
  color: var(--color-text);
  font-size: var(--text-section);
  line-height: var(--lh-section);
}

.prosa h3 {
  margin-top: var(--space-7);
  color: var(--color-text);
  font-size: var(--text-subhead);
  line-height: var(--lh-subhead);
}

.prosa ul,
.prosa ol {
  padding-left: var(--space-8);
}

.prosa li + li {
  margin-top: var(--space-3);
}

.prosa img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.prosa table {
  /* Una tabla ancha del contenido importado no debe empujar la página entera. */
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.prosa th,
.prosa td {
  padding: var(--space-3) var(--space-4);
  border: var(--border-card);
  text-align: left;
}

.prosa pre {
  padding: var(--space-6);
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
  /* El original tiene ejemplos de código largos: que scrollee el bloque, no la página. */
  overflow-x: auto;
}

.prosa code {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: var(--text-meta);
}

.prosa blockquote {
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-primary);
  color: var(--color-slate);
}