/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · IconButton — GEMELO VANILLA ▓
   v0.1 · 2026-08-19. Ficha: `design-system/COMPONENTE_ICONBUTTON.md`.
   Kit React hermano: `design-system/catalogo-cd/components/IconButton.jsx`.

   ⛔ POR QUÉ EXISTE, y es la misma razón que parió el gemelo del `Menu` el 2026-08-17:
   el `IconButton` **sólo vivía en React**, dentro de una plantilla de cadena del propio
   `.jsx`, y **las tres apps de producción son HTML y CSS a secas**. Ninguna podía
   montarlo. *Un componente que tu producto no puede usar no está canonizado: está
   documentado.*

   ⛔ Y SE CONSTRUYE AHORA POR UNA RAZÓN CONCRETA, no por completitud: el `BotonCopiar`
   **monta un `IconButton` ghost** (así lo declara su ficha, § Composición). Sin este
   archivo, el gemelo vanilla del botón de copiar tendría que dibujar por dentro un
   botón-ícono a mano — que es exactamente el Frankenstein un nivel más abajo que
   `gate_composicion.js` persigue, y que cada pantalla que lo use heredaría sin poder
   verlo (CLAUDE.md §5-bis paso 7).

   ⛔ EL CSS ES **VERBATIM** DEL KIT. Se copió carácter a carácter de la constante `CSS`
   de `IconButton.jsx`, sin reordenar ni "mejorar" una sola declaración. *Un gemelo que
   se reescribe con criterio propio deja de ser un gemelo el primer día.*

   QUÉ ES. El botón de ícono **compacto** — el que ABRAZA el ícono. Es distinto del
   `Button` sólo-ícono, que es una caja cuadrada de 32 px mínimo. Se usa denso: composers,
   acciones de mensaje, barras, chips y **celdas de tabla**, donde una caja de 32 pesaría
   de más.

   DOS VARIANTES, 1:1 con el kit:
     · `--ghost`   (por defecto) — color `--fg3`, hover a `--color-bg-subtle` + `--fg1`.
                   Autónomo: se ve solo, sin que quien monta le ponga nada.
     · `--control` — SIN color ni hover de clase (su apariencia la compone el `style` de
                   cada uso); añade el press del sistema (`scale(.97)`) y el `disabled`.

   REQUISITOS DEL ANFITRIÓN — los dos, o se ve mal en silencio:
     1. Los tokens del canon (`design-system/colors_and_type.css`).
     2. Un reinicio con `box-sizing: border-box`.

   ⛔ `aria-label` ES OBLIGATORIO en cada instancia: no hay texto visible que leer.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* radio en la BASE: el relleno de hover/press del ícono NUNCA sale con esquinas cuadradas
   (Ricardo cazó el chevron del Combobox con hover cuadrado · 2026-08-02). Consistente con la
   lógica de radio del sistema para un control chico. */
.exds-iconbtn { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border-radius:var(--radius-sm); }
/* ⛔ LA GUARDA EN LA BASE, y va aquí y no en cada uso: `[hidden] { display:none }` es de la
   hoja del NAVEGADOR y la regla de arriba, al ser de autor, le gana — un `.exds-iconbtn`
   escrito con `hidden` se queda pintado. Hoy la × del buscador del Asistente se salva porque
   `asistente.css` guarda su clase propia (`.exds-dk-srch-x[hidden]`), pero eso obliga a que
   cada uso se acuerde. Guardando la BASE, no hay uso que se pueda olvidar (2026-08-25). */
.exds-iconbtn[hidden] { display: none; }
/* ghost (= .exds-btn-ghost-icon): botón fantasma autónomo. Padding chico = el relleno de hover
   respira alrededor del ícono y se lee como control redondeado, no como cuadro pegado al glifo. */
.exds-iconbtn--ghost { border:0; background:none; color:var(--fg3); padding:4px;
  transition: background-color var(--motion-fast,120ms) var(--ease-out), color var(--motion-fast,120ms) var(--ease-out); }
.exds-iconbtn--ghost:hover { background:var(--color-bg-subtle); color:var(--fg1); }
/* control (= .exds-dk-ct): apariencia compuesta por el style de cada uso; añade el press */
.exds-iconbtn--control { transition: background-color var(--motion-fast,120ms) var(--ease-out), color var(--motion-fast,120ms) var(--ease-out), transform var(--motion-fast,120ms) var(--ease-out); }
.exds-iconbtn--control:active:not(:disabled) { transform: scale(.97); }
.exds-iconbtn--control:disabled { cursor:not-allowed; }
/* foco compartido — el mismo anillo del sistema */
.exds-iconbtn:focus-visible { outline:2px solid var(--color-border-focus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .exds-iconbtn{ transition-duration:.01ms; } }
/* == SOBRE SUPERFICIE OSCURA · data-superficie="oscura" en un ANTEPASADO =============
   DECISION-FUENTE: Ricardo, 2026-08-28 — decision 1 de
   plans/decisiones/_decision_nav_cotizador_2026-08-27.html: «si a tus recomendaciones».
   Misma mecanica y mismo porque que en el boton y en la pestana: la condicion se DECLARA en
   el contenedor, nunca se adivina del color de fondo (COMPONENTE_SUPERFICIE_OSCURA.md).

   Solo alcanza a la variante FANTASMA, y no es una omision: es toda la superficie de
   contacto que esta pieza tiene con el suelo.
     · fantasma — no pinta fondo propio, asi que depende entero del suelo. Cambia.
     · control  — su apariencia la compone el style de cada uso, por diseno. Si le pusieramos
                  color aqui le estariamos quitando a su dueno lo unico que esa variante le da.
   *Una variante que existe para que el uso decida no puede tener una opinion sobre el suelo.*

   La tinta en reposo es la MEDIA, no la fuerte: en claro el fantasma reposa en --fg3 (el
   tercer escalon) y sube a --fg1 al apuntarlo. Se conserva la relacion, no el numero — sobre
   oscuro el tercer escalon (--color-ink-on-dark-hint) da 5,93:1 y el segundo 9,82:1, y para
   un icono de 20px el segundo es el que se lee sin esfuerzo. */
[data-superficie="oscura"] .exds-iconbtn--ghost { color:var(--color-ink-on-dark-muted, #B8BDC7); }
[data-superficie="oscura"] .exds-iconbtn--ghost:hover { background:var(--color-bg-subtle-on-dark, rgba(255, 255, 255, 0.10)); color:var(--color-ink-on-dark, #FFFFFF); }
/* Foco · misma subida a tinta blanca que en el boton, y por el mismo motivo: el anillo es lo
   unico que ve quien navega con teclado, y el gris neutro sobre negro se lee como cromo. */
[data-superficie="oscura"] .exds-iconbtn:focus-visible { outline-color:var(--color-ink-on-dark, #FFFFFF); }
/* La vuelta atras · data-superficie="clara". Mismo porque que en el boton: un suelo oscuro
   se hereda a todos sus descendientes, y de una barra negra pueden colgar paneles blancos.
   Va despues para que gane el suelo mas cercano. Ver COMPONENTE_SUPERFICIE_OSCURA.md. */
[data-superficie="clara"] .exds-iconbtn--ghost { color:var(--fg3); }
[data-superficie="clara"] .exds-iconbtn--ghost:hover { background:var(--color-bg-subtle); color:var(--fg1); }
[data-superficie="clara"] .exds-iconbtn:focus-visible { outline-color:var(--color-border-focus); }