.tecla{--e: var(--elevado);--e-losa: var(--losa);--e-tinte: var(--elevado);--e-texto: var(--tinta);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;flex:none;height:1.5rem;padding:0 .625rem;border:1px solid var(--borde);border-radius:var(--r-chico);font:500 .75rem/1 var(--f-texto);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--hundido);box-shadow:inset 0 1px 0 0 var(--hundido-filo);color:var(--apoyo)}.tecla[data-evento="030"]{--e: var(--ambar);--e-losa: var(--ambar-losa);--e-tinte: var(--ambar-tinte);--e-texto: var(--ambar-texto)}.tecla[data-evento="032"]{--e: var(--cian);--e-losa: var(--cian-losa);--e-tinte: var(--cian-tinte);--e-texto: var(--cian-texto)}.tecla[data-evento="033"],.tecla[data-evento="034"]{--e: var(--verde);--e-losa: var(--verde-losa);--e-tinte: var(--verde-tinte);--e-texto: var(--verde-texto)}.tecla[data-evento="031"]{--e: var(--rojo);--e-losa: var(--rojo-losa);--e-tinte: var(--rojo-tinte);--e-texto: var(--rojo-texto)}.tecla[data-estado=hecho],.tecla[data-estado=fallido]{--alto-tecla: 1px;border-color:var(--e-losa);background:var(--e);color:var(--tinta-tecla);box-shadow:0 var(--alto-tecla) 0 0 var(--e-losa);transform:translateY(calc(-1 * var(--alto-tecla)))}.tecla[data-estado=hecho][data-evento="031"],.tecla[data-estado=fallido]{--e: var(--rojo);--e-losa: var(--rojo-losa);color:#fff}.tecla[data-estado=tacita]{border:1px dashed var(--e-losa);background:var(--e-tinte);color:var(--e-texto);box-shadow:none}.tecla-codigo{font:700 1.04em/1 var(--f-titulo);letter-spacing:-.01em}.tecla--g{height:2.5rem;padding:0 .875rem;border-radius:9px;font-size:1rem;font-weight:600;gap:.5rem}.tecla--g[data-estado=hecho],.tecla--g[data-estado=fallido]{--alto-tecla: 2px}.tecla--g[data-estado=pendiente]{box-shadow:inset 0 2px 0 0 var(--hundido-filo)}.tecla--xl{flex-direction:column;gap:.375rem;height:auto;min-width:6.25rem;padding:.875rem 1rem .75rem;border-radius:var(--r-tarjeta);font-size:.875rem;font-weight:600}.tecla--xl .tecla-codigo{font-size:1.875rem;letter-spacing:-.035em}.tecla--xl[data-estado=hecho],.tecla--xl[data-estado=fallido]{--alto-tecla: 4px}.tecla--xl[data-estado=pendiente]{box-shadow:inset 0 3px 0 0 var(--hundido-filo)}.tecla--xl[data-estado=tacita]{border-width:2px}@keyframes tecla-entra{0%,55%{background:var(--hundido);border-color:var(--borde);box-shadow:inset 0 1px 0 0 var(--hundido-filo);color:var(--apoyo);transform:none}70%{transform:translateY(1px)}}.tecla[data-anima]{animation:tecla-entra .9s var(--curva-relieve) both;animation-delay:var(--espera, 0ms)}
