/* ==========================================================================
   «Recomendada por» (tema#107) — bajo el cartel de la ficha de obra.
   Sustituye a .pf-redes-obra-header__recomendaciones / __star-icon: el
   contador sin nombres conserva su aspecto (xs, gris, estrella ámbar de 14px).
   ========================================================================== */

.pf-redes-obra-recomendadores {
    margin-top: var(--pf-redes-spacing-sm);
    font-size: var(--pf-redes-font-size-xs);
    color: var(--pf-redes-text-light);
}

/* Anónimo / beneficiario: solo el contador, como antes. */
.pf-redes-obra-recomendadores--count {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pf-redes-obra-recomendadores__star {
    color: var(--pf-redes-warning);
    font-size: 14px;
}

/* «★ N recomendaciones» con sesión: botón que despliega/pliega los nombres.
   Sin fondo ni borde: se lee como el contador de siempre más un chevron. */
.pf-redes-obra-recomendadores__toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
}

.pf-redes-obra-recomendadores__toggle:hover .pf-redes-obra-recomendadores__count {
    color: var(--pf-redes-text);
    text-decoration: underline;
}

.pf-redes-obra-recomendadores__toggle:focus-visible,
.pf-redes-obra-recomendadores__more:focus-visible,
.pf-redes-obra-recomendadores__next:focus-visible {
    outline: 2px solid var(--pf-redes-text);
    outline-offset: 2px;
}

.pf-redes-obra-recomendadores__chevron {
    margin-left: 4px;
    font-size: 10px;
    transition: transform var(--pf-redes-transition);
}

.pf-redes-obra-recomendadores__toggle[aria-expanded="true"] .pf-redes-obra-recomendadores__chevron {
    transform: rotate(180deg);
}

/* `hidden` se reafirma: las listas son flex y ganarían al atributo. */
.pf-redes-obra-recomendadores__panel[hidden],
.pf-redes-obra-recomendadores__full[hidden],
.pf-redes-obra-recomendadores__list[hidden],
.pf-redes-obra-recomendadores__next[hidden] {
    display: none;
}

.pf-redes-obra-recomendadores__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: var(--pf-redes-spacing-sm) 0 0;
    padding: 0;
    list-style: none;
}

/* Lista completa: scroll interno para que 40 nombres no estiren la columna
   del cartel. */
.pf-redes-obra-recomendadores__list--full {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.pf-redes-obra-recomendadores__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Foto en RECTÁNGULO con `contain` (DEC-067: la mitad de las fotos de Contact
   son logos apaisados que un círculo recortaría). Sin foto, fa-user en la
   misma caja. */
.pf-redes-obra-recomendadores__avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--pf-redes-border-light);
    border-radius: var(--pf-redes-radius, 0);
    background: var(--pf-redes-bg-alt);
    color: var(--pf-redes-text-light);
    font-size: 16px;
    line-height: 1;
}

.pf-redes-obra-recomendadores__avatar picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pf-redes-obra-recomendadores__avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.pf-redes-obra-recomendadores__names {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.pf-redes-obra-recomendadores__person {
    font-size: var(--pf-redes-font-size-sm);
    font-weight: 600;
    color: var(--pf-redes-text);
    overflow-wrap: anywhere;
}

/* Desde tema#122 el nombre NO es un enlace (norma de atribución: se nombra la
   entidad, nunca la persona, y sin enlace a su ficha), así que se retiran el
   `:hover`/`:focus` del `<a>` —que daban sensación de elemento pulsable— y la
   segunda línea `__entity`, que ya no se emite. */

/* «y M más» / «Ver menos» y «Mostrar más»: enlaces-botón discretos. */
.pf-redes-obra-recomendadores__more,
.pf-redes-obra-recomendadores__next {
    margin-top: var(--pf-redes-spacing-sm);
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--pf-redes-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pf-redes-obra-recomendadores__more:hover,
.pf-redes-obra-recomendadores__next:hover {
    text-decoration: underline;
}

.pf-redes-obra-recomendadores__more:disabled,
.pf-redes-obra-recomendadores__next:disabled {
    opacity: 0.6;
    cursor: progress;
}

.pf-redes-obra-recomendadores__status {
    margin: var(--pf-redes-spacing-sm) 0 0;
    color: var(--pf-redes-text-light);
}

.pf-redes-obra-recomendadores__status:empty {
    margin: 0;
}