/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · TECLA — GEMELO VANILLA (hoja autocontenida) ▓
   Ficha: design-system/COMPONENTE_TECLA.md
   Nace el 2026-09-03.

   ⛔ POR QUÉ NACE HOY, y no es una pieza inventada: es una que ya existía DOS VECES.
   `.exds-sb-searchkbd` vivía dentro de `componentes/shell/shell.css` (el «⌘K» del buscador de
   la lateral) y `.bo-cmdk-kbd` vivía a mano en `admin/css/backoffice.css` (el «esc» de la
   paleta de comandos) — la MISMA anatomía, copiada a un palmo de distancia, sin gemelo propio
   contra el que medirlas. `gate_procedencia.js` la marcó como pieza NUEVA (FAMILIA:bo-cmdk-kbd)
   porque no tenía dónde reclamar; una tabla de homologación de ojos frescos ya la había
   triageado como COSECHAR (fila B27).

   QUÉ ES: la marca visual de UNA TECLA de atajo de teclado — un carácter o abreviatura corta
   dentro de una caja con borde, para indicar «pulsa esto». No es un botón, no se pulsa: es
   TIPOGRAFÍA con marco, informativa.

   ELEMENTO: `<kbd>`, nunca `<span>`. Es el elemento semántico que HTML ya reserva para esto —
   un lector de pantalla lo anuncia como «tecla», que un `<span>` nunca dice (fila B29 de la
   misma tabla de homologación).

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`): `--fs-eyebrow`, `--font-mono`, `--fg3`,
        `--color-surface`, `--color-border-subtle`, `--radius-sm`.
     2. `box-sizing: border-box`.

   ⛔ LO QUE ESTA HOJA NO TRAE, A PROPÓSITO: ninguna transición de aparecer/desaparecer. La que
   tenía `.exds-sb-searchkbd` (opacity + max-width) es del PLEGADO de la barra lateral — del
   contenedor que la aloja, no de la tecla — y se queda en `componentes/shell/shell.css` como
   una regla local de Shell sobre esta misma clase. Es el mismo patrón que ya usa `.exds-badge`
   dentro del Shell: la pieza pone la anatomía, el marco pone cómo se esconde en su riel.
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-tecla {
  font: 500 var(--fs-eyebrow, 11px)/1 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--fg3, #5C6B7A);
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 6px);
  padding: 3px 5px;
  flex-shrink: 0;
}