/* Componente insignia (shell, #53): etiqueta corta de estado («badge»).
 * Solo tokens de style.css. Fondo: paso 3 de la escala; texto e icono:
 * paso 11 (≥ 4,5:1 sobre los pasos 1 a 5 en los dos temas, PLANTILLAS §4.2);
 * punto: paso 9 (decorativo, el texto ya informa). */

.pf-insignia {
    --pf-insignia-fondo: var(--pf-neutro-3);
    --pf-insignia-texto: var(--pf-neutro-11);
    --pf-insignia-punto: var(--pf-neutro-9);

    display: inline-flex;
    align-items: center;
    gap: var(--pf-space-3xs);
    min-height: 1.5rem;
    padding: 0.125rem var(--pf-space-2xs);
    font-family: var(--pf-font-sans);
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    color: var(--pf-insignia-texto);
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--pf-insignia-fondo);
    border-radius: var(--pf-radius-pill);
}

.pf-insignia__icono {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
}

.pf-insignia__punto {
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    background-color: var(--pf-insignia-punto);
    border-radius: var(--pf-radius-round);
}

.pf-insignia--verde { --pf-insignia-fondo: var(--pf-verde-3); --pf-insignia-texto: var(--pf-verde-11); --pf-insignia-punto: var(--pf-verde-9); }
.pf-insignia--petroleo { --pf-insignia-fondo: var(--pf-petroleo-3); --pf-insignia-texto: var(--pf-petroleo-11); --pf-insignia-punto: var(--pf-petroleo-9); }
.pf-insignia--ocre { --pf-insignia-fondo: var(--pf-ocre-3); --pf-insignia-texto: var(--pf-ocre-11); --pf-insignia-punto: var(--pf-ocre-9); }
.pf-insignia--info { --pf-insignia-fondo: var(--pf-info-3); --pf-insignia-texto: var(--pf-info-11); --pf-insignia-punto: var(--pf-info-9); }
.pf-insignia--exito { --pf-insignia-fondo: var(--pf-exito-3); --pf-insignia-texto: var(--pf-exito-11); --pf-insignia-punto: var(--pf-exito-9); }
.pf-insignia--aviso { --pf-insignia-fondo: var(--pf-aviso-3); --pf-insignia-texto: var(--pf-aviso-11); --pf-insignia-punto: var(--pf-aviso-9); }
.pf-insignia--error { --pf-insignia-fondo: var(--pf-error-3); --pf-insignia-texto: var(--pf-error-11); --pf-insignia-punto: var(--pf-error-9); }