/**
 * Componente común: pictograma
 *
 * La hoja hace tres cosas y ninguna más: dar tamaño, dar tinta y remapear la
 * tinta de guía. El dibujo se ve bien SIN esta hoja —los atributos de
 * presentación viajan en el `<g>` del fichero—, así que lo de aquí es mejora,
 * no requisito.
 *
 * Tamaños (issue #148, punto 5): sm 24 · md 32 · lg 40 · full 100 %.
 * Una sola regla sirve para los dos formatos porque el alto va en `auto` y la
 * proporción la fija el `viewBox`: los iconos son 24×24 y las ilustraciones
 * 320×240. Para una ilustración a 240 px, el consumidor pone `full` y limita
 * su contenedor; así no hace falta un tamaño por cada medida que pida una
 * plantilla.
 *
 * @package pfuture
 * @subpackage common/pictograma
 * @module core
 */

.pf-pictograma {
    display: block;
    block-size: auto;
    /* En una fila flex un icono no se encoge: se lee o no está. */
    flex: 0 0 auto;
    /* Tinta principal. `currentColor` dentro del fichero cuelga de aquí, así
     * que un consumidor puede cambiar la tinta declarando `color` en el
     * contenedor sin tocar el SVG. */
    color: var(--pf-color-brand);
}

.pf-pictograma--sm   { inline-size: 24px; }
.pf-pictograma--md   { inline-size: 32px; }
.pf-pictograma--lg   { inline-size: 40px; }
.pf-pictograma--full { inline-size: 100%; }

/* Tinta de guía: el segundo tono del sistema. Es lo que sustituye al relleno
 * tintado al 12 % que la crítica descartó —un solo mecanismo de profundidad, y
 * es el trazo—. El token vive en `style.css` y sigue al modo solo, porque
 * apunta a `--pf-color-border-strong`.
 *
 * El respaldo `currentColor` no sobra: sin esta hoja la guía se pinta con la
 * tinta principal, que es peor pero se ve. */
.pf-pictograma .pf-svg-guia {
    stroke: var(--pf-icon-guide, currentColor);
}

/* En alto contraste el sistema fija las tintas y un segundo tono a 2,98:1
 * desaparece. Todo a `currentColor`, que ahí es el color del sistema. */
@media (forced-colors: active) {
    .pf-pictograma .pf-svg-guia {
        stroke: currentColor;
    }
}