/* Componente ilustracion (shell, #52): colores de los SVG del tema.
 * Los ficheros de assets/svg/{vectores,ilustraciones,portadas}/ no llevan un
 * solo color: cada forma lleva una clase pf-il-* y aquí recibe su token, así
 * que todo cambia con el tema. Solo tokens de style.css.
 *
 * Contraste (1.4.11) de lo que informa: barras y anillo de ejecución (verde-9)
 * sobre su pista (bg-inset) ≥ 3:1 en los dos temas; rótulos de estado con el
 * paso 11 de su escala sobre el 3 (≥ 4,5:1). El resto es decoración. */

.pf-ilustracion {
    position: relative;
    line-height: 0;
}

.pf-ilustracion__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Puntos y rejilla llenan su contenedor (sin viewBox: el punto no cambia de tamaño). */
.pf-ilustracion--puntos,
.pf-ilustracion--rejilla {
    width: 100%;
    height: 100%;
}

.pf-ilustracion--puntos .pf-ilustracion__svg,
.pf-ilustracion--rejilla .pf-ilustracion__svg {
    height: 100%;
}

/* Superficies y fondos */
.pf-il-fondo { fill: var(--pf-color-bg-alt); }
.pf-il-superficie { fill: var(--pf-color-surface); }
.pf-il-borde { stroke: var(--pf-color-border); stroke-width: 1; }
.pf-il-control { stroke: var(--pf-color-border-control); stroke-width: 1.5; }
.pf-il-filete { fill: none; stroke: var(--pf-color-border); stroke-width: 1; }
.pf-il-sombra { filter: var(--pf-drop-md); }
.pf-il-tenue { opacity: 0.55; }

/* Texto (glifos de Comfortaa en trazados) */
.pf-il-texto { fill: var(--pf-color-text); }
.pf-il-texto-suave { fill: var(--pf-color-text-muted); }
.pf-il-titulo { fill: var(--pf-color-heading); }

/* Marca */
.pf-il-marca { fill: var(--pf-color-brand); }
.pf-il-marca-suave { fill: var(--pf-color-brand-soft); }
.pf-il-marca-trazo { fill: none; stroke: var(--pf-color-brand); stroke-linecap: round; }
.pf-il-sobre-marca { fill: none; stroke: var(--pf-color-on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-il-hoja { fill: var(--pf-color-brand-soft); }

/* Datos: pista, esqueleto de texto, conectores */
.pf-il-pista { fill: var(--pf-color-bg-inset); }
.pf-il-pista-trazo { fill: none; stroke: var(--pf-color-bg-inset); }
.pf-il-esqueleto { fill: var(--pf-neutro-4); }
.pf-il-conector { fill: none; stroke: var(--pf-verde-7); stroke-width: 1.5; stroke-linecap: round; }

/* Anillos, puntos y rejilla de fondo */
.pf-il-anillo { fill: none; stroke: var(--pf-color-border); stroke-width: 1; }
.pf-il-anillo--discontinuo { stroke-dasharray: 2 7; }
.pf-il-punto { fill: var(--pf-neutro-6); }
.pf-il-rejilla { fill: none; stroke: var(--pf-color-border); stroke-width: 1; opacity: 0.6; }

/* Iconos (trazados de Lucide; el grosor va en el SVG) */
.pf-il-icono { fill: none; stroke: var(--pf-color-heading); stroke-linecap: round; stroke-linejoin: round; }
.pf-il-icono-suave { stroke: var(--pf-color-text-muted); }
.pf-il-icono-marca,
.pf-il-icono-verde { stroke: var(--pf-color-brand-strong); }
.pf-il-icono-exito { stroke: var(--pf-exito-11); }
.pf-il-icono-info { stroke: var(--pf-info-11); }
.pf-il-icono-ocre { stroke: var(--pf-ocre-11); }
.pf-il-icono-petroleo { stroke: var(--pf-petroleo-11); }

/* Pasos de escala: estados (3 fondo · 9 punto · 11 rótulo) y anillos de acento */
.pf-il-verde-1 { fill: var(--pf-verde-1); }
.pf-il-verde-9 { fill: var(--pf-verde-9); }
.pf-il-ocre-9 { fill: var(--pf-ocre-9); }
.pf-il-petroleo-9 { fill: var(--pf-petroleo-9); }
.pf-il-exito-3 { fill: var(--pf-exito-3); }
.pf-il-exito-9 { fill: var(--pf-exito-9); }
.pf-il-exito-11 { fill: var(--pf-exito-11); }
.pf-il-info-3 { fill: var(--pf-info-3); }
.pf-il-info-9 { fill: var(--pf-info-9); }
.pf-il-info-11 { fill: var(--pf-info-11); }
.pf-il-aviso-3 { fill: var(--pf-aviso-3); }
.pf-il-aviso-9 { fill: var(--pf-aviso-9); }
.pf-il-aviso-11 { fill: var(--pf-aviso-11); }
.pf-il-verde-trazo { fill: none; stroke: var(--pf-verde-9); }
.pf-il-ocre-trazo { fill: none; stroke: var(--pf-ocre-9); }
.pf-il-info-trazo { fill: none; stroke: var(--pf-info-9); }
.pf-il-petroleo-trazo { fill: none; stroke: var(--pf-petroleo-9); }

/* Animada: con el arranque del motor en el <head> (html.pf-movimiento), las
 * partes esperan ocultas a que script.js tome el relevo; sin JS, sin motor o
 * pasados 3 s (el motor quita la marca), se ven enteras. */
html.pf-movimiento .pf-ilustracion--animada [data-pf-animar] {
    opacity: 0;
}

/* Al imprimir, nada a medio entrar: cada parte, entera y en su sitio. */
@media print {
    .pf-ilustracion--animada [data-pf-animar] {
        opacity: 1 !important;
        transform: none !important;
    }

    .pf-ilustracion--animada [data-pf-animar="dibujar"] {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }
}