/* ==========================================================================
   COMPONENTE: ETIQUETA DE ESTADO
   Capa: componentes (ver CLAUDE.md, "Arquitectura CSS"). Primer componente
   con nombres BEM (19/10/2026).

   Una sola etiqueta para todos los estados de la web (publicaciones,
   eventos, pagos, campañas y pedidos de la tienda, transporte, avisos).
   El color NO depende de qué cosa es, sino de lo que SIGNIFICA su estado:

     .etiqueta-estado--correcto   verde  — activo, publicado, confirmado, pagado
     .etiqueta-estado--atencion   ámbar  — pendiente, a revisar: alguien tiene que hacer algo
     .etiqueta-estado--info       azul   — información o en curso (hecho, programada, de pago)
     .etiqueta-estado--problema   rojo   — en papelera, urgente
     .etiqueta-estado--inactivo   gris   — borrador, terminado, sin efecto (no paga, finalizada, entregado)
     .etiqueta-estado--cancelado  negro  — cualquier cosa cancelada
     .etiqueta-estado--marca      morado — solo el aviso "institucional"

   Uso: <span class="etiqueta-estado etiqueta-estado--correcto">Publicado</span>
   Colores en theme.json (custom.estado; tonos claro y oscuro de la misma
   familia que los colores de acción de los botones).
   ========================================================================== */

.etiqueta-estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--wp--custom--radio--badge);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.etiqueta-estado--correcto {
    background-color: var(--wp--custom--estado--activo-fondo);
    color: var(--wp--custom--estado--activo-texto);
}
.etiqueta-estado--atencion {
    background-color: var(--wp--custom--estado--atencion-fondo);
    color: var(--wp--custom--estado--atencion-texto);
}
.etiqueta-estado--info {
    background-color: var(--wp--custom--estado--info-fondo);
    color: var(--wp--custom--estado--info-texto);
}
.etiqueta-estado--problema {
    background-color: var(--wp--custom--estado--problema-fondo);
    color: var(--wp--custom--estado--problema-texto);
}
.etiqueta-estado--inactivo {
    background-color: var(--wp--custom--estado--inactivo-fondo);
    color: var(--wp--custom--estado--inactivo-texto);
}
.etiqueta-estado--cancelado {
    background-color: var(--wp--custom--estado--cancelado-fondo);
    color: var(--wp--custom--estado--cancelado-texto);
}
.etiqueta-estado--marca {
    background-color: var(--wp--preset--color--morado-fondo);
    color: var(--wp--preset--color--morado-oscuro);
}