/* ============================================================================
   EL SELECTOR DE EMOJI · assets/selector-emoji.js (16 oct 2026, CEO)
   ============================================================================
   En su hoja y no en componentes.css: hoy solo lo usa el dashboard del bot
   (regla de la skill: un componente va a componentes.css si se ve igual en
   los sitios; si solo existe en uno, en su hoja). Va después de
   componentes.css: usa .caja, .btn, .estado-centro y el aro --filo-sm.

   · La ventana es una .caja (capa doble, contorno completo) de 22rem.
   · Cada emoji, una celda de 44 px: escalón de 31–60 px → --bevel-sm y aro
     --filo-sm. En reposo sin aro (una rejilla de 40 marcos es ruido); sale
     al pasar (crema), al enfocar (amarillo, --filo-foco-sm) y en el
     elegido (amarillo y fondo tibio).
   · «De serie»: la Trufacoin ocupa dos celdas y lleva la etiqueta al lado.
   · En ≤520 px, hoja abajo a todo el ancho.
   ========================================================================== */
.se-pop{
  position:fixed;z-index:80;width:min(22rem, calc(100vw - 16px));
  --caja-fondo:var(--surface-2);--filo-color:rgba(255,198,33,.45);
  display:flex;flex-direction:column;max-height:min(26rem, calc(100dvh - 16px));
}
.se-pop.se-hoja{left:0;right:0;bottom:0;top:auto;width:100%;max-height:70dvh}
.se-cabeza{position:relative;padding:.75rem .75rem .5rem}
.se-lupa{position:absolute;z-index:1;left:1.5rem;top:50%;translate:0 -30%;width:1rem;height:1rem;color:var(--texto-3);pointer-events:none}
.se-lupa svg{display:block;width:100%;height:100%}
.se-buscar{
  width:100%;box-sizing:border-box;height:2.5rem;padding:0 .75rem 0 2.25rem;
  font:inherit;font-size:var(--tipo-descripcion);color:var(--texto-1);
  background:var(--ink);border:0;clip-path:var(--bevel-sm);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--line));
}
.se-buscar::placeholder{color:var(--texto-3)}
.se-buscar:focus{outline:none;box-shadow:inset 0 0 0 1px var(--filo-borde, var(--yellow))}
.se-buscar::-webkit-search-cancel-button{filter:grayscale(1) brightness(1.4)}
.se-cabeza{--anillo:var(--line)}
.se-cabeza:focus-within{--anillo:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .se-cabeza::after{content:'';position:absolute;inset:.75rem .75rem .5rem;pointer-events:none;
    clip-path:var(--filo-sm);background:var(--anillo)}
}
.se-lista[hidden]{display:none}
.se-lista{overflow:auto;padding:0 .75rem .5rem;overscroll-behavior:contain;flex:1 1 auto}
.se-bloque + .se-bloque{margin-top:.75rem}
.se-grupo{margin:.25rem 0 .5rem;font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-3)}
.se-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.75rem,1fr));gap:.25rem}
.se-op{
  position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:2.75rem;padding:0;
  background:transparent;border:0;cursor:pointer;clip-path:var(--bevel-sm);
  --filo-color:transparent;transition:background .12s ease;
}
.se-op[hidden]{display:none}
.se-op img{width:70%;height:70%;object-fit:contain;pointer-events:none;transition:transform .12s ease}
.se-op:hover{background:rgba(242,232,220,.07);--filo-color:rgba(242,232,220,.25)}
.se-op:hover img{transform:scale(1.12)}
.se-op[aria-selected="true"]{background:rgba(255,198,33,.12);--filo-color:var(--yellow)}
.se-op:focus-visible{outline:none;--filo-color:var(--yellow);background:rgba(242,232,220,.1)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .se-op::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .se-op:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
/* «De serie»: la Trufacoin ocupa dos celdas, con la etiqueta al lado (en
   una celda de 44 px no cabe a 10 px, y por debajo de 10 no se escribe).
   «GIF»: etiqueta en la esquina del emoji animado. */
.se-op.es-serie{grid-column:span 2;aspect-ratio:auto;grid-template-columns:1.75rem auto;justify-content:center;gap:.4rem;padding:0 .4rem}
.se-op.es-serie img{flex:none;width:1.75rem;height:1.75rem}
.se-serie,.se-gif{
  position:relative;white-space:nowrap;padding:.15rem .35rem;
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.08em;line-height:1.2;
  text-transform:uppercase;clip-path:var(--bevel-xs);pointer-events:none;
  background:var(--yellow);color:var(--sobre-amarillo);
}
.se-gif{position:absolute;right:1px;top:1px;padding:0 .25rem;background:var(--surface);color:var(--texto-2)}
.se-vacio{gap:.75rem}
.se-pie{margin:0;padding:.5rem .75rem .75rem;min-height:1.5em;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:var(--tipo-leyenda);color:var(--texto-3);border-top:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Sin nombre que enseñar (la búsqueda no encontró nada) no queda una franja
   vacía con su filete: el pie se va entero (16 oct 2026). */
.se-pie:empty{display:none}
@media (prefers-reduced-motion: reduce){ .se-op img,.se-op{transition:none} .se-op:hover img{transform:none} }