/* ============================================================================
   Juicy — Dashboard Design System · FUNDAMENTOS
   ----------------------------------------------------------------------------
   Lo que NO viene de las variables de Figma. Las colecciones space/radius/
   font-size existen allá (36/12/30) pero los componentes NO las usan — están
   dibujados a mano y salieron consistentes por disciplina, no por sistema.

   Así que estos valores se extraen del RENDER, uno por uno, conforme cada
   componente los necesita. Nada especulativo: si algo está aquí es porque un
   componente ya lo usa y su valor se leyó de Figma.
   ============================================================================ */

:root {

  /* Única familia del sistema. */
  --font-sans:     'Montserrat', system-ui, -apple-system, sans-serif;

  /* Radios. `round` = 999px, NO 50%: en un elemento no cuadrado el 50% daría una
     elipse y rompería el pill del Button. 999 sirve para círculo y píldora.
     Figma usa 99px en Button y 999px en Icon Chip para lo mismo; aquí uno solo. */
  --radius-sm:     3px;   /* Badge */
  --radius-md:     5px;   /* Button, Icon Button */
  --radius-round:  999px;

  /* Trazo. Dos pesos, y la distinción SÍ es real:
       thin (1px) = borde de contenedor de campo (input, select, textarea)
       normal (2px) = trazo de énfasis (outline de Button e Icon Button)
     Figma usa 1.5px en Button y 2px en Icon Chip para lo mismo. Unificado en 2
     porque 1.5px NO es un píxel real: Chrome redondea `border-width:1.5px` a 1
     (medido). 2px se dibuja igual en DPR 1 y en retina. */
  --stroke-thin:   1px;
  --stroke:        2px;

  /* Altura de los controles. Figma: Button 40 (fijo), Icon Chip 40 y 30. */
  --control-md:    40px;
  --control-sm:    30px;

  /* Iconos. Figma dibuja 20px en el Button y 21px en el Icon Chip (viewBox
     21x21 — dedazo en el asset). Normalizado a la escala 16/20. */
  --icon-md:       20px;
  --icon-sm:       16px;

}

/* ============================================================================
   LOS ICONOS DE ESTE PRODUCTO SON UNA TIPOGRAFÍA, NO SVG
   ----------------------------------------------------------------------------
   Contado en el markup real (2026-07-17):
     <i class="fi fi-rr-…"> de uicons ....... 320
     <svg> ................................... 4   (y los 4 son el ojito del
                                                    login, dibujado a mano — o
                                                    sea CERO en componentes)
   El DS venía escrito al revés, SVG-first, y eso no era cosmética: eran bugs.
   Un `<i>` pinta con `color` y se dimensiona con `font-size`; `fill`, `width` y
   `height` no le hacen NADA (salvo que sea flex item — ver abajo). Lo que dejó:
     · `.input__icon` declaraba `fill: var(--icon-field)` y NUNCA se aplicó: el
       `$` de los campos de precio salía en `--text-primary`, o sea tan oscuro
       como el valor. Justo lo contrario de lo que su propia nota prometía.
     · Sin `font-size`, cada glifo heredaba el de su contenedor: los chips a 16
       en vez de 20, y los de la tabla a 13 (¡el font-size de la celda!).

   LA REGLA, medida por píxeles (desvío de la TINTA, no de la caja):

     Por defecto — el padre tiene alto FIJO (icon-chip, search__btn):
       font-size: <tamaño>; line-height: 1;   y NADA de caja.
       Medido:  sin caja −0.5 · con caja +4.5 · con caja + parches −3.5
       Darle `width/height` a un `<i>` que es flex item lo DESCENTRA: la caja
       mide lo que le pides, pero el glifo sigue pintándose dentro del line-box
       del `::before`, que uicons trae a 1.5em. Sin caja no hay pelea: el flex
       del padre centra el line-box y el glifo cae en su sitio.

     Excepción — el padre crece con su contenido (`.bubble__item`):
       ahí SÍ necesita caja, o el line-box de 1.5em estira la fila (medido: 42
       → 51). En ese caso la caja va CON `display:flex` en el propio `<i>`, para
       que el `::before` se centre dentro de ella. Ver ds/bubble.css nota 6.

     Color — SIEMPRE `color`. `fill: currentColor` se pone solo si el componente
     acepta un `<svg>`: ata el svg al mismo `color`, así que un token pinta los
     dos medios. Nunca `fill: <token>`.
   ============================================================================ */