/* =====================================================================
   COMPONENTE · etiqueta de estado
   Qué hace:    marca un estado ("Pagado", "Por vencer", "Atrasado").
                Siempre lleva TEXTO, y si se puede un ícono: el color nunca
                es la única señal.
   Quién lo usa: pedidos, caja, clientes, agenda.
   Depende de:  tokens.css
   Requisitos:  R-GEN-07 · arquitectura.md §4.4 (estados)
   Uso:         <span class="etiqueta etiqueta--exito">Pagado</span>
   ===================================================================== */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: 0.125rem var(--espacio-2);
  border-radius: var(--radio-chico);
  background: var(--color-superficie-resaltada);
  color: var(--color-texto);
  font-size: var(--tamano-chico);
  font-weight: 600;
  line-height: 1.6;
}

.etiqueta--exito   { background: var(--color-exito-fondo);   color: var(--color-exito); }
.etiqueta--aviso   { background: var(--color-aviso-fondo);   color: var(--color-aviso); }
.etiqueta--peligro { background: var(--color-peligro-fondo); color: var(--color-peligro); }
.etiqueta--info    { background: var(--color-info-fondo);    color: var(--color-info); }