/* ============================================================================
   Juicy — Dashboard Design System · ICON CHIP
   ----------------------------------------------------------------------------
   Figma: "icon-chips" (9:3856). 100 variantes:
   El nombre sale del Figma a propósito (2026-07-16): antes el DS lo llamaba
   `.icon-btn` y el dashboard `.icon_button` — tres nombres para una cosa.
     Type (Fill|outline|single) × Color (10) × Shape (Square|Circle) × Size (Default|Small)
   `single` solo existe en Square — un icono pelón no tiene forma; la propiedad
   Shape queda muerta ahí.

   Los tonos NO viven aquí: se componen con .tone-* (ver tone.css).
     <button class="icon-chip tone-primary">
     <button class="icon-chip icon-chip--outline icon-chip--round tone-error">
     <button class="icon-chip icon-chip--ghost icon-chip--sm tone-neutral-lv2">

   El icono hereda color con currentColor — en Figma es white en Fill, el tono
   en outline/single, e inactive/text en Disabled: exactamente --tone-fg/--tone-line.
   ============================================================================ */

/* Tono por defecto en :where() — especificidad CERO, para que cualquier .tone-*
   lo gane sin depender del orden de carga de los archivos. Declararlo dentro de
   `.icon-chip` empata (0,1,0) con `.tone-error` y gana el que se cargue después. */
:where(.icon-chip) {
  --tone-fill: var(--action-primary-default);
  --tone-fg:   var(--action-primary-text);
  --tone-line: var(--tone-fill);
}

.icon-chip {
  --icon-chip-size: var(--control-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: var(--icon-chip-size);
  height: var(--icon-chip-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);

  background: var(--tone-fill);
  color: var(--tone-fg);

  cursor: pointer;
  transition: background-color .3s;
}

.icon-chip:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* El chip HEREDA su tipografía cuando es un `<button>`.
   El chip no declara `font-size` a propósito (el glifo trae el suyo, justo abajo),
   así que su valor sale de la herencia: 16 en el dashboard, 13 dentro de una celda
   de tabla. Un `<button>` rompe eso —el navegador le pone 13.3333px y `normal` de
   interlineado—, así que el MISMO chip medía distinto según el elemento: el
   dashboard PHP lo escribe como `<span>` y el front nuevo como `<button>`, para que
   se alcance con Tab. Medido con el espejo en el disparador del menú de fila.
   Se devuelve solo la HERENCIA; el tamaño del icono no se toca.
   Va en `button.icon-chip` y NO dentro de `.icon-chip`, y en ese orden importa el
   por qué: (0,1,1) le ganaría a cualquier clase que quiera fijar el tamaño de un
   chip concreto — la trampa que ya rompió dos veces el nombre de la cuenta en la
   cabecera, donde un reset con `font-size: inherit` le ganó a su 12px. Aquí no hay
   ninguna clase de chip que declare `font-size`, así que no pisa nada. */
button.icon-chip {
  font-size: inherit;
  line-height: inherit;
}

/* El glifo. Es TIPOGRAFÍA (uicons): lo dimensiona `font-size` — y sin esta
   regla heredaba el del contenedor: 16 en el dashboard y 13 dentro de una celda
   de tabla. Sin caja, que aquí la descentra (foundation.css). El color lo hereda
   del chip vía `--tone-fg`/`--tone-line`. */
.icon-chip > i {
  flex-shrink: 0;
  font-size: var(--icon-md);
  line-height: 1;
}

.icon-chip > svg,
.icon-chip__icon {
  display: block;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  fill: currentColor;
}

/* ---- Type ---------------------------------------------------------------- */

.icon-chip--outline {
  background: transparent;
  box-shadow: inset 0 0 0 var(--stroke) var(--tone-line);
  color: var(--tone-line);
}

/* `single` en Figma. "ghost" es el nombre de industria para un control sin
   contenedor, y deja de sugerir que hay un solo algo. */
.icon-chip--ghost {
  background: transparent;
  color: var(--tone-line);
}

/* NO existe en la sección icon-chips (que solo tiene Fill|outline|single), pero
   la Tabla lo usa: su chip de acción es fondo neutral/200 con icono neutral/300,
   que es exactamente --tone-soft + --tone-on-soft de neutral-lv3. Falta la
   variante allá. */
.icon-chip--soft {
  background: var(--tone-soft);
  color: var(--tone-on-soft);
}

/* ---- Shape --------------------------------------------------------------- */

.icon-chip--round {
  border-radius: var(--radius-round);
}

/* ---- Size ---------------------------------------------------------------- */

.icon-chip--sm {
  --icon-chip-size: var(--control-sm);
}

/* `--in-field` MURIÓ en F1 (2026-07-16). Era el posicionamiento absoluto del
   chip sobre el campo del layout viejo; con ds/field.css el chip vive EN FLUJO
   como último hijo de `.input` y la aritmética queda igual (30 en 40 = 5 arriba
   / 5 abajo; `.input:has(> .icon-chip)` baja el padding derecho a 5). */

.icon-chip--sm > i {
  font-size: var(--icon-sm);
}

.icon-chip--sm > svg,
.icon-chip--sm .icon-chip__icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* ---- Disabled ------------------------------------------------------------ */
.icon-chip.disabled,
.icon-chip:disabled,
.icon-chip[disabled] {
  --tone-fill: var(--action-inactive-default);
  --tone-fg:   var(--action-inactive-text);
  --tone-line: var(--action-inactive-text);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================================
   NOTAS

   1. NORMALIZADO respecto a Figma (con permiso explícito del dueño). Lo que
      cambié y por qué:
        · icono 21px → 20px. El viewBox del asset es 21x21; el Button usa 20.
          21 no está en ninguna escala. Small se queda en 16.
        · trazo 2px → se mantiene 2px, pero el Button sube de 1.5 a 2:
          `border-width:1.5px` lo redondea Chrome a 1px (medido). No era real.
        · radius Circle 999px = radius Pill del Button (99px) → un solo
          --radius-round: 999px.
      Ninguno cambia el aspecto de forma perceptible; todos cierran el pixel.

   2. Este componente SÍ bindea la capa semántica (`action/primary/default`),
      mientras el Button bindea el primitivo (`ui/500`). Dos convenciones en el
      mismo DS. Este está bien; el Button es el que hay que re-bindear allá.

   3. Tampoco hay hover/active aquí. Mismo hueco que el Button.

   4. Contraste: Fill hereda el problema de semantics.css. `warning` da 2.26:1
      con icono blanco — en un icono de 20px eso es peor que en texto.

   5. La propiedad Shape existe en las variantes `single` pero no hace nada.
      Vale la pena quitarla allá.
   ============================================================================ */