/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · Stepper — gemelo vanilla ▓
   v1.0 · 2026-08-24. Ficha: `design-system/COMPONENTE_STEPPER.md`
   Kit React: `catalogo-cd/components/Stepper.jsx`

   Control de CANTIDAD compacto: − valor +. Para números pequeños con incremento de a uno
   (cantidad de vehículos, unidades). No es para montos (input con `$`) ni para rangos (Slider).

   ⛔ COMPONE EL `Button` DEL CATÁLOGO — NO REDIBUJA UN BOTÓN. Los dos círculos ± son el MISMO
   `<button>` de `button.css` (ghost, solo-ícono, círculo, `sm`); esta hoja SOLO pisa su relleno
   (ver abajo, con `!important` porque `button.css` pinta variantes con su misma especificidad)
   y el color del ícono apagado. Todo lo demás —foco, tamaño del círculo, `disabled` base— es
   de `button.css`.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `../button/button.css` cargada ANTES de esta hoja.
     3. `box-sizing: border-box`.
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-stepper { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--color-border-default, #D1D5DB);
  border-radius:var(--radius-md, 10px); background:var(--color-surface, #FFFFFF); padding:0 8px; height:40px; box-sizing:border-box; }  /* 40 = alto del Input del catálogo (homologado 2026-07-31) */
/* ⛔ LA CAJA RECONOCE QUE LA ESTÁS OPERANDO · 2026-09-05
   `DECISION-FUENTE: Ricardo, 2026-09-05 — «Los botones nunca llegan a tener estado focus más
   que, en caso de que lleguen por teclado. Cuando el usuario está llenando el formulario y
   modifica cantidad a través del mouse (…) nunca se activa ningún estado focus, y el sistema
   nunca le dice al usuario qué es lo que está modificando además del movimiento de la cifra.»`

   ⚠ Y MI PRIMERA RESPUESTA FUE QUE NO, CITANDO EL CANON — mal citado. El canon prohíbe **dos
   ANILLOS DE FOCO** a la vez (`gate_render` R3: el anillo marca dónde está el teclado, y dos
   marcas son dos respuestas a una pregunta). Esto no es un anillo de foco: es que el
   CONTENEDOR reconozca que se le está operando. *Yo colapsé las dos cosas en una y contesté a
   la que no me habían preguntado.*

   Y LA PRUEBA DE QUE NO ES UNA PIEZA NUEVA: el campo de texto YA HACE EXACTAMENTE ESTO desde
   siempre — `.exds-input-wrap:focus-within { border-color: var(--color-border-focus) }`. Su
   caja se oscurece al operarla, con ratón igual que con teclado, y nadie lo llamó nunca «un
   segundo foco». El selector de cantidad era el único control con caja del formulario que NO
   lo hacía: medido el 2026-09-05, su hoja entera tenía UN estado —`:hover`— y ninguno que
   sobreviviera al clic. *La incoherencia no estaba en lo que se proponía añadir: estaba en que
   dos cajas hermanas del mismo formulario contestaban distinto a la misma pregunta.*

   ⛔ POR QUÉ HACE FALTA ADEMÁS UNA LÍNEA DE JS, y no basta el `:focus-within`: al pulsar un
   `<button>` con el ratón, macOS/Safari NO le da el foco (es convención del sistema, no un
   fallo). Sin foco no hay `:focus-within`, y el reconocimiento existiría en un navegador y no
   en otro — justo en el caso que Ricardo describe, que es el del ratón. El motor enfoca el
   botón pulsado, que además es lo correcto: después de pulsar «+», el tabulador debe seguir
   desde ahí. Enfocar tras un clic NO enciende `:focus-visible` (la heurística del navegador
   mira la ÚLTIMA interacción, y fue de puntero), así que la línea del botón sigue apareciendo
   sólo con teclado. */
/* GATE-ALLOW: la caja se marca a la vez que el botón · el contenedor dice «estás en el selector» y
   el botón «sobre el +, no sobre el −» — dos niveles de la misma respuesta, no dos respuestas.
   `DECISION-FUENTE: Ricardo, 2026-09-05 — «Lo marcamos como una excepción declarada para no
   "romper" la regla de no poner 2 focus en un solo componente, que es correcta».`

   ⚠ Y AL IR A DECLARARLA APARECIÓ ALGO PEOR: la regla no tenía quién la midiera. `gate_render`
   R3 buscaba el foco por su GEOMETRÍA (`box-shadow: 0 0 0 2px|3px`), y esa misma mañana el canon
   retiró el anillo y lo cambió por una línea de 1px. **Desde ese commit R3 no cazaba nada**, y
   nadie se enteró porque un gate sin hallazgos y un gate ciego imprimen lo mismo. Medido
   inyectando el defecto exacto con el vocabulario de hoy: 0 detectados; con el viejo: 2.
   *Declarar una excepción a una regla que nadie mide es teatro* — así que primero se arregló R3.

   ⛔ Y con R3 reescrito, ESTO DEJA DE SER UNA EXCEPCIÓN: la regla, bien enunciada, dice que la
   marca de foco puede vivir en el elemento enfocado **o en un contenedor suyo**, y persigue la
   marca encendida donde ni hay foco ni se contiene al que lo tiene. El campo de texto lleva años
   haciendo esto mismo. La declaración se conserva porque Ricardo la pidió y porque explica el
   porqué a quien lea la hoja — no porque haga falta para callar a nadie. */
.exds-stepper:focus-within { border-color: var(--color-border-focus, #6E7378); }

.exds-stepper-val { flex:1; text-align:center; min-width:36px; font:var(--fw-semibold, 600) var(--fs-body, 14px) var(--font-sans, Inter, sans-serif);
  font-variant-numeric:tabular-nums; color:var(--fg1, #0F1419); }

/* El relleno del ± (v0.2 · Ricardo 2026-08-12 · COMPONENTE_BOTON.md §321). Va con !important A
   PROPÓSITO: `button.css` pinta su relleno con la misma especificidad para cada variante, y una
   declaración !important de ESTA hoja (que se carga después) es la única vía. El apagado se
   excluye: su relleno lo pone `button.css` (ya es `--color-bg-subtle`, el que pide la ficha). */
.exds-stepper > button:not(:disabled) { background: var(--color-bg-subtle, #F2F4F6) !important; color: var(--fg1, #0F1419) !important; }
.exds-stepper > button:not(:disabled):hover { background: var(--color-bg-sunken, #E6E8EA) !important; }
/* v0.3 · el ícono apagado a --fg3 (un escalón más oscuro que el apagado de un TEXTO).
   El relleno sigue siendo el del Button; aquí SOLO se pisa el color del trazo. */
.exds-stepper > button:disabled { color: var(--fg3, #5C6B7A) !important; }