/* ============================================================
   HUF — Componente: IconChip (.hd-icon-chip)
   ------------------------------------------------------------
   Vehículo: TagHelper <hd-icon-chip> (AdminPortal/TagHelpers/
   HdIconChipTagHelper.cs).

   Insignia circular de color detrás de un ícono "hero" — el que ES la
   información principal de ese punto de la pantalla (estado de una
   membresía, resultado de un pago, acceso rápido, numeral de un paso),
   no el que acompaña a un texto.

   POR QUÉ EXISTE. Nació como .cp-icon-chip dentro de un <style> de
   _ClienteLayout.cshtml al migrar el Portal Cliente Gimnasio: el usuario
   rechazó dos veces la migración por "plana", y la causa medida fue que
   los íconos Bootstrap *rellenos* a tamaño grande pasaron a Lucide en
   contorno delgado — correcto por sistema, más callado en pantalla. El
   chip devuelve el peso visual sin volver al set viejo. Con Portal Salón
   y Menú QR pidiendo lo mismo son tres superficies, así que por la ley de
   propiedad de componentes (HVL §11.1) su hogar es HUF, no un layout.

   NO CONTRADICE HVL §5.5/§6.11. La regla "sin fondo circular de color"
   está escrita en el docstring de HdEmptyStateTagHelper y es específica
   del estado vacío, que deliberadamente no debe llamar la atención.
   <hd-empty-state> sigue sin chip. No aplicarlo tampoco a íconos inline
   junto a texto ni dentro de un badge: ahí el ícono acompaña, no informa.

   El color no decora: hereda el acento del tema activo, o marca el
   desenlace de una operación (success/warning/danger) — que es color
   comunicando estado, justo lo que la ley de color permite (HVL §4.2).
   ============================================================ */

.hd-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    font-weight: 700;
    font-size: var(--hd-text-base);
    line-height: 1;
    background: rgba(var(--hd-theme-accent-rgb), .14);
    color: var(--hd-theme-accent);
}

/* xs existe para el numeral de paso de un embudo público ("1 Elige tu
   servicio"): mismo objeto —un disco de color con algo dentro— a la
   escala de un texto de encabezado, no a la de un ícono hero. */
.hd-icon-chip--xs { width: 28px; height: 28px; font-size: var(--hd-text-caption); }
.hd-icon-chip--sm { width: 40px; height: 40px; }
.hd-icon-chip--lg { width: 88px; height: 88px; margin: 0 auto; font-size: var(--hd-text-section); }

/* El tono sólido es para cuando el chip ES el elemento, no el fondo de un
   ícono: un numeral tiene que leerse de un vistazo y el 14% de opacidad no
   da contraste suficiente para texto (sí para una silueta de ícono). */
.hd-icon-chip--solid {
    background: var(--hd-theme-accent);
    color: var(--hd-color-accent-contrast);
}

.hd-icon-chip--success { background: rgba(34, 197, 94, .14);  color: var(--hd-color-success); }
.hd-icon-chip--warning { background: rgba(245, 158, 11, .14); color: var(--hd-color-warning); }
.hd-icon-chip--danger  { background: rgba(239, 68, 68, .14);  color: var(--hd-color-error); }