/* Componente marca (shell). Solo tokens de style.css.
 * Logotipo vectorial de ACANDA en línea (colores del tema activo), logos
 * subidos en la configuración o marcas socias (claro u oscuro según el tema). */

.pf-marca {
    --pf-marca-alto: 2.5rem;

    display: inline-flex;
    align-items: center;
    min-height: var(--pf-marca-alto);
    color: var(--pf-color-heading);
    text-decoration: none;
}

.pf-marca--sm {
    --pf-marca-alto: 2rem;
}

.pf-marca--lg {
    --pf-marca-alto: 3.5rem;
}

/* Apilada: la palabra mide 0,22 del alto total; más alto para que se lea. */
.pf-marca--apilada {
    --pf-marca-alto: 6rem;
}

.pf-marca--apilada.pf-marca--sm {
    --pf-marca-alto: 4.5rem;
}

.pf-marca--apilada.pf-marca--lg {
    --pf-marca-alto: 9rem;
}

/* SVG en línea: alto fijo y ancho por su viewBox. */
.pf-marca__svg {
    display: block;
    width: auto;
    height: var(--pf-marca-alto);
}

.pf-marca__luz {
    stop-color: var(--pf-color-logo-luz);
}

.pf-marca__sombra {
    stop-color: var(--pf-color-logo-sombra);
}

.pf-marca__pliegue {
    stop-color: var(--pf-color-logo-pliegue);
}

.pf-marca__palabra {
    fill: var(--pf-color-heading);
}

/* Respaldo si faltara el SVG: la marca textual. */
.pf-marca__texto {
    font-family: var(--pf-font-sans);
    font-size: calc(var(--pf-marca-alto) * 0.7);
    font-weight: var(--pf-weight-black);
    line-height: 1;
    letter-spacing: -0.01em;
}

/* Logos subidos y marcas socias: imagen del alto de la marca. */
.pf-marca__logo {
    display: block;
    width: auto;
    height: var(--pf-marca-alto);
}

/* Enlace externo (`externo`): icono pequeño detrás del logotipo. */
.pf-marca__externo {
    flex: none;
    margin-inline-start: var(--pf-space-2xs);
    color: var(--pf-color-text-muted);
}

/* Dos logotipos: se ve el del tema activo (sistema o data-pf-theme). */
.pf-marca__logo--oscuro {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-pf-theme="light"]) .pf-marca__logo--claro {
        display: none;
    }

    :root:not([data-pf-theme="light"]) .pf-marca__logo--oscuro {
        display: block;
    }
}

:root[data-pf-theme="dark"] .pf-marca__logo--claro,
:root [data-pf-theme="dark"] .pf-marca__logo--claro {
    display: none;
}

:root[data-pf-theme="dark"] .pf-marca__logo--oscuro,
:root [data-pf-theme="dark"] .pf-marca__logo--oscuro {
    display: block;
}

:root [data-pf-theme="light"] .pf-marca__logo--claro {
    display: block;
}

:root [data-pf-theme="light"] .pf-marca__logo--oscuro {
    display: none;
}