/* ============================================================================
   Juicy — Dashboard Design System · RESET
   ----------------------------------------------------------------------------
   El PRIMER archivo de elementos de la cadena. Hasta 0.9.12 no existía: el
   producto corría sobre los defaults del navegador + un mini-reset DISPERSO en
   main.css (líneas 94-165) + el `box-sizing` global que aportaba `bootstrap-grid`.
   Aquí se consolida ese reset en UN sitio, con dueño. Para qué:
     · main.css puede morir sin llevarse el reset (contrato del strangler).
     · se puede tirar `bootstrap-grid` sin perder el `box-sizing` global —
       resulta que main.css:109 (`*{box-sizing}`) YA lo daba, así que hoy está
       por partida triple; esto lo deja en UN dueño (ver el plan, fase Bootstrap).
     · el DS queda portable (Electron, contrato D2): no hereda reset de ningún
       framework externo.

   Carga en la cadena de TOKENS, al final (tras `foundation`, que define
   `--font-sans`, y `primitives`, que define los neutrales) y ANTES de `main`.
   Mientras main.css conserve su copia de estas reglas, GANA (misma
   especificidad, carga después) → añadir este archivo no mueve un pixel. El día
   que se borra la copia de main.css, este toma el relevo. Igual que los tokens.

   ⚠️ REGLA DE ESTA FASE (decisión del dueño, 2026-07-17): reset MODERNO, pero
   CALIBRADO PARA NO CAMBIAR EL RENDER DE HOY. Las ideas del reset moderno que SÍ
   cambiarían el aspecto actual NO se aplican: quedan listadas abajo como
   "ideales diferidos", para decidirse a propósito y no de contrabando.
   ============================================================================ */

/* `box-sizing` heredable en TODO, pseudo-elementos incluidos. main.css hacía
   `*{box-sizing}` (sin `::before/::after`); `bootstrap-grid` sí los cubría. Se
   conserva la conducta de bootstrap (con pseudos) para no depender de él. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Sin márgenes ni paddings heredados del navegador en la raíz. */
html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;   /* iOS no infla el texto al girar. No mueve layout. */
  -moz-tab-size: 4;
  tab-size: 4;
}

/* body: los mismos valores que traía main.css. La fuente sale del token del DS
   (`--font-sans`) en vez del alias `--primaryFont` de main.css — mismo primario
   (Montserrat), solo cambia la lista de respaldo, que no se ve porque Montserrat
   carga. OJO `line-height: 100%` (=1) es inusual —el reset moderno usaría 1.5—
   pero el producto lo fija a 1 y lo sube por elemento (h 130%, p/ul 150%);
   cambiarlo movería TODO. Se conserva; el 1.5 es IDEAL DIFERIDO. */
body {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 100%;
  color: var(--neutral-500);
  background: var(--neutral-100);
}

/* Medios fluidos. NO se añade `display: block` (que el reset moderno pone):
   volvería BLOQUE a las imágenes inline y podría mover layout → IDEAL DIFERIDO. */
img,
picture,
svg,
video,
canvas {
  max-width: 100%;
}

img {
  border: none;
}
img,svg,video{
	display: block;
}

/* Enlaces del dashboard: heredan color (currentColor) y van sin subrayado. */
a {
  color: currentColor;
  text-decoration: none;
}

/* Los controles heredan la tipografía. Solo la FAMILIA, como hoy: el reset
   moderno usa `font: inherit` (tamaño + peso + interlineado), que cambiaría el
   tamaño de todo input/button crudo que no pase por el DS → IDEAL DIFERIDO.
   `outline: none` se CONSERVA para no cambiar la conducta (ver deuda abajo). */
input,
select,
textarea,
button {
  font-family: inherit;
  outline: none;
}

button {
  cursor: pointer;
}

/* Interlineado por elemento (main.css lo fijaba suelto en su bloque MISC). */
h1, h2, h3, h4, h5, h6 {
  line-height: 100%;
  margin: 0;
}

p,
ul,
ol {
  line-height: 150%;
  margin: 0 0 25px;
}

p:last-child {
  margin-bottom: 0;
}

/* Los ICONOS son una tipografía (uicons): el glifo lo pinta un `::before`, y su caja la
   decide el `line-height` de ese pseudo-elemento, no el tamaño de la fuente. Vino de
   main.css (2026-07-27), tal cual.

   Por qué es RESET y no decoración: sin esta línea el glifo hereda el `line-height` del
   contexto y la caja del icono cambia de alto según dónde esté. Vivía en el CSS legacy,
   que el front nuevo no importa a propósito, así que allá TODOS los iconos median distinto
   — medido en la campana del header: 20 de alto contra los 27 del dashboard PHP. No se
   veía en el espejo porque los componentes con caja fija (icon-chip, botones) la tapan;
   asoma justo donde el icono va suelto. */
/* Los cuatro selectores son los de main.css, LETRA POR LETRA: el último es
   `span[class*="fi-rr-"]` SIN espacio delante, a diferencia de su hermano `i`. Parece un
   descuido del original y lo es, pero "arreglarlo" aquí estrecharía lo que casa y este
   movimiento no puede cambiar el render. Si algún día se normaliza, se mide aparte. */
i[class^="fi-rr-"]::before,
i[class*=" fi-rr-"]::before,
span[class^="fi-rr-"]::before,
span[class*="fi-rr-"]::before {
  line-height: 1.5;
}

/* LA BARRA DE SCROLL. Vino de main.css (2026-08-09), tal cual: los tres selectores con sus tres
   valores, sin tocar uno. Es el mismo patrón que ya se llevó `.container`, `.page_header` y el
   `line-height` de los uicons — una regla BASE del navegador varada en el CSS legacy, que el
   front nuevo NO importa a propósito. Allá salían las barras por defecto del navegador: MEDIDO en
   Chromium con ventana, **15px de ancho contra los 5 del dashboard de PHP**. (Headless no pinta
   barras y da 0 en todos los casos: medir ahí el grosor no prueba nada.)

   Es RESET y no decoración por lo mismo que los uicons: no da forma a un componente, cambia lo que
   el navegador dibuja por su cuenta en CUALQUIER elemento que se desborde.

   ⚠️ SOLO `::-webkit-scrollbar`, y el motivo está medido: en Chromium, un scroller con
   `scrollbar-width` distinto de `auto` DEJA DE PINTAR el `::-webkit-scrollbar` y vuelve a la barra
   nativa. Medido en el mismo elemento: `width:5px` → 5px; `width:5px` + `scrollbar-width:thin` →
   11px. Un `scrollbar-width` global que alcanzara a los scrollers ENGORDARÍA las barras del
   dashboard de PHP, que está en producción. Por eso el equivalente de Firefox va encerrado abajo,
   donde Chromium no lo ve. (Y por eso `.checkout__methods`, que pide `scrollbar-width: thin`,
   mide hoy 11px en Chrome y no 5: es anterior a esto y no se toca aquí.)

   Sólo `width`: la barra HORIZONTAL se queda con la altura nativa, igual que hoy en PHP. Quien la
   quiere delgada la pide por componente (`.archive_table_wrapper`, ds/archive.css). */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}

/* EL EQUIVALENTE DE FIREFOX, que hasta hoy sólo existía suelto en dos componentes
   (`.checkout__methods` y `[data-hscroll]`) y en ninguna base: allí el producto entero salía con la
   barra del sistema, en los dos mundos. NO es "restaurar" nada —Firefox nunca tuvo las reglas de
   `main.css`, que son de WebKit—, así que esto SÍ cambia lo que ve un usuario de Firefox: de la
   barra del sistema (15px medidos) a `thin` (11px), con el mismo pulgar y la misma pista que Chrome
   lleva usando desde siempre. Firefox no admite un ancho arbitrario: `thin` es lo más fino que hay,
   y por eso aquí no hay 5px que valgan.

   La condición no es cosmética, es la guarda que protege producción: `selector(::-webkit-scrollbar)`
   es cierto en Chromium/Safari y falso en Firefox, así que esto no llega a los motores donde
   `scrollbar-width` apagaría las tres reglas de arriba (ver el aviso de allí). Medido en los dos:
   en Chromium, con y sin este bloque, 5px; en Firefox `CSS.supports('selector(::-webkit-scrollbar)')`
   da `false` y el bloque entra.

   ⚠️ LAS DOS DECLARACIONES VAN EN SELECTORES DISTINTOS, Y NO ES UN DESCUIDO: `scrollbar-width` NO
   se hereda y `scrollbar-color` SÍ (CSS Scrollbars Styling L1). Esto estuvo escrito con las dos en
   `html`, y medido en Firefox hacía justo lo contrario de lo que se quería: **recoloreaba TODAS las
   barras del producto por herencia y no adelgazaba ninguna salvo la del documento** — la caja de
   prueba seguía en 15px con el color nuevo ya puesto. Con `*`, el `thin` llega a cada scroller
   (11px medidos) y no pisa a quien pide otra cosa: `[data-hscroll]`, `.cart_items` y
   `.pos_product_archives` piden `none` por atributo o clase y siguen en 0px, porque `*` no le gana
   a nada.

   Cubierto en `e2e/tests/scrollbar-firefox.spec.ts`, que corre en el proyecto `firefox` de
   Playwright: el resto de la suite es sólo Chromium, y sin ese proyecto esta guarda no tendría ni
   una aserción en ningún navegador donde llegue a ejecutarse. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
  }

  html {
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.2);
  }
}

/* ============================================================================
   IDEALES DIFERIDOS — el reset moderno los trae; NO se aplican porque cambian el
   render de HOY. Se deciden con el dueño (ver el plan, §reset/Bootstrap):

     1. `line-height` del body a 1.5 (hoy 100%/=1, compensado elemento por
        elemento). Es lo correcto de raíz, pero re-fluiría cada bloque de texto.
     2. `img, svg, video { display: block }` (hoy inline). Quita el hueco
        fantasma bajo las imágenes, pero mueve las que hoy fluyen en línea.
     3. Controles con `font: inherit` completo (hoy solo `font-family`): unificaría
        el tamaño de los controles crudos con el del cuerpo.

   DEUDA CONOCIDA (no es un ideal, es un problema): `outline: none` en los
   controles MATA el anillo de foco nativo — un problema de accesibilidad. Se
   conserva aquí SOLO porque quitarlo cambiaría la conducta de foco de esta fase.
   El DS ya pinta foco propio en field.css/button.css; cuando se decida, este
   `outline: none` se va y los controles crudos recuperan su anillo.
   ============================================================================ */