/* Artículo (T-07, contenidos, v2 #60). Solo tokens de style.css.
 * Arriba, la barra de progreso de lectura (fija, decorativa). La cabecera va
 * en una banda suave con anillos (`seccion`); la imagen destacada o la
 * portada del tema monta sobre su borde inferior. Todo el artículo va en una
 * columna de 720px (--pf-container-narrow) y el cuerpo, a la medida de
 * lectura (--pf-measure). Con índice, desde 1025px la columna se ensancha y el
 * índice queda fijo a la derecha del cuerpo (`.pf-con-toc`, de common/toc);
 * la cabecera, la imagen y el pie siguen alineados con el cuerpo. Los bloques
 * del editor (tablas, listas, citas) los pinta la hoja de bloques de las
 * páginas (templates/page/bloques.css). */

/* -------------------------------------------------------------------------
 * Barra de progreso de lectura
 * ---------------------------------------------------------------------- */

/* script.js escribe --pf-progreso (0 a 1) al desplazarse: sigue al dedo, sin
 * transición, como una barra de desplazamiento. Sin JS sigue oculta. Va justo
 * debajo de la cabecera fija (--pf-header-fija, de shell; sin ella, arriba). */
.pf-articulo__progreso {
    position: fixed;
    top: var(--pf-header-fija, 0px);
    right: 0;
    left: 0;
    z-index: var(--pf-z-header);
    height: 0.25rem;
    pointer-events: none;
}

/* Con la barra de administración de WordPress, debajo de ella (en móvil se va con la página). */
.admin-bar .pf-articulo__progreso {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--pf-header-fija, 0px));
}

@media screen and (max-width: 600px) {
    .admin-bar .pf-articulo__progreso {
        top: var(--pf-header-fija, 0px);
    }
}

.pf-articulo__progreso[hidden] {
    display: none;
}

.pf-articulo__progreso-barra {
    display: block;
    height: 100%;
    background-color: var(--pf-color-brand);
    transform: scaleX(var(--pf-progreso, 0));
    transform-origin: left center;
}

/* -------------------------------------------------------------------------
 * Banda de la cabecera
 * ---------------------------------------------------------------------- */

.pf-seccion.pf-articulo__banda {
    padding-block: var(--pf-space-xl);
    border-bottom: var(--pf-rule);
}

/* Con imagen o portada, la banda deja sitio para que monte sobre ella. */
.pf-articulo__entrada--con-cubierta .pf-seccion.pf-articulo__banda {
    padding-bottom: calc(var(--pf-space-xl) + var(--pf-space-2xl));
}

/* La columna del artículo dentro del contenedor ancho de la banda. */
.pf-articulo__columna {
    max-width: var(--pf-container-narrow);
    margin-inline: auto;
}

.pf-articulo__pilar {
    margin-bottom: var(--pf-space-sm);
}

/* El nombre del tema es largo: se parte en dos líneas antes que desbordar. */
.pf-articulo__pilar .pf-chip {
    max-width: 100%;
    white-space: normal;
}

.pf-articulo__titulo {
    margin-bottom: var(--pf-space-sm);
}

.pf-articulo__entradilla {
    margin-bottom: var(--pf-space-md);
    font-size: var(--pf-text-lg);
    line-height: var(--pf-leading-normal);
    color: var(--pf-color-text-soft);
}

.pf-articulo__firma {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pf-space-xs);
    padding-top: var(--pf-space-sm);
    border-top: var(--pf-rule);
}

/* Foto en un círculo blanco con sombra, como los nodos del ERP. */
.pf-articulo__foto {
    flex: none;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    background-color: var(--pf-color-bg-inset);
    border: 2px solid var(--pf-color-surface);
    border-radius: var(--pf-radius-round);
    box-shadow: var(--pf-shadow-md);
}

.pf-articulo__foto--iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--pf-weight-black);
    color: var(--pf-color-brand-strong);
    background-color: var(--pf-color-brand-soft);
}

.pf-articulo__firma-texto {
    flex: 1 1 12rem;
    min-width: 0;
}

.pf-articulo__autor {
    margin: 0;
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
}

/* Enlace a la página de autor con objetivo de 24px de alto sin cambiar cómo se ve. */
.pf-articulo__autor a {
    display: inline-block;
    min-height: 1.5rem;
}

.pf-articulo__datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-3xs) var(--pf-space-2xs);
    margin: 0;
    font-size: var(--pf-text-sm);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-text-muted);
}

/* El separador va con el dato que lo sigue: al partirse la línea no queda colgando. */
.pf-articulo__datos > * + *::before {
    content: "·";
    content: "·" / "";
    margin-inline-end: var(--pf-space-2xs);
}

.pf-articulo__lectura-tiempo {
    flex: none;
    margin: 0;
}

/* -------------------------------------------------------------------------
 * Imagen destacada o portada del tema: monta sobre la banda
 * ---------------------------------------------------------------------- */

.pf-articulo__marco {
    max-width: calc(var(--pf-container-narrow) + 2 * var(--pf-gutter));
}

.pf-articulo__imagen {
    position: relative;
    margin: calc(-1 * var(--pf-space-2xl)) 0 0;
}

/* Con sus medidas, la imagen reserva su hueco (CLS 0). */
.pf-articulo__imagen img,
.pf-articulo__imagen .pf-ilustracion {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--pf-color-bg-inset);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
    box-shadow: var(--pf-shadow-lg);
}

.pf-articulo__leyenda {
    margin-top: var(--pf-space-2xs);
    font-size: var(--pf-text-sm);
    line-height: var(--pf-leading-normal);
    color: var(--pf-color-text-muted);
}

/* -------------------------------------------------------------------------
 * Índice y cuerpo
 * ---------------------------------------------------------------------- */

.pf-articulo__lectura {
    margin-top: var(--pf-space-xl);
}

/* La hoja de bloques centra cada hijo a su propio ancho; aquí manda el marco. */
.pf-articulo__cuerpo.pf-bloques {
    --pf-bloques-ancho: 100%;
    --pf-bloques-ancho-amplio: 100%;

    max-width: var(--pf-measure);
}

/* -------------------------------------------------------------------------
 * Pie: quien firma y la llamada a la acción
 * ---------------------------------------------------------------------- */

.pf-articulo__pie {
    display: grid;
    gap: var(--pf-space-xl);
    margin-block: var(--pf-space-xl) var(--pf-space-section);
}

/* -------------------------------------------------------------------------
 * Sigue leyendo
 * ---------------------------------------------------------------------- */

.pf-seccion.pf-articulo__relacionados {
    border-top: var(--pf-rule);
}

.pf-articulo__tarjetas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .pf-articulo__tarjetas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1025px) {
    .pf-articulo__entrada--con-indice .pf-articulo__marco {
        max-width: calc(var(--pf-container-narrow) + var(--pf-space-xl) + 16rem + 2 * var(--pf-gutter));
    }

    .pf-articulo__entrada--con-indice .pf-articulo__columna {
        max-width: calc(var(--pf-container-narrow) + var(--pf-space-xl) + 16rem);
    }

    .pf-articulo__entrada--con-indice :is(.pf-articulo__cabecera, .pf-articulo__imagen, .pf-articulo__pie) {
        max-width: var(--pf-container-narrow);
    }

    .pf-articulo__tarjetas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--pf-space-lg);
    }
}

@media print {
    .pf-articulo__progreso {
        display: none;
    }
}