/* ============================================================================
   EL AUTOCOMPLETAR DE VARIABLES · assets/variables.css (CEO, 21 oct 2026)
   ============================================================================
   Su JS: assets/variables.js (la cabecera dice cómo se usa). Va después de
   componentes.css: usa .caja y los aros --filo-* de marca.css.

   COPIA de las sugerencias del editor de bloques (`.blq-sug*` de
   panel/assets/bloques.css), que a su vez copian el desplegable de marca
   (assets/desplegable.css): caja opaca de capa doble que no se desliza (se
   desliza la lista de dentro), filas de 36 px (escalón 31–36 →
   --bevel-compacto y su aro), la activa con aro amarillo. Si cambian allí,
   cambian aquí. Prefijo `.vr-`.
   ========================================================================== */
.vr-sug[hidden]{display:none!important}
.vr-sug{
  position:fixed;left:0;top:0;
  /* Encima del asistente a pantalla completa (1000) y de los diálogos, como
     la lista de los emojis (.blq-emo): también se escribe en ellos. */
  z-index:1100;
  width:min(20rem,calc(100vw - 2 * var(--esp-4,1rem)));max-height:min(20rem,70dvh);
  overflow:hidden;display:flex;flex-direction:column;
  /* Los tokens del panel y del Dashboard, con su valor de reserva para la
     web (marca.css no los tiene). */
  --caja-fondo:var(--sup-2,var(--surface-2));--filo-color:var(--borde-vivo,rgba(255,198,33,.45));
}
.vr-sug-lista{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  list-style:none;margin:0;padding:var(--esp-2,.5rem);scroll-padding-block:var(--esp-2,.5rem);
}
.vr-sug-op{
  position:relative;display:flex;align-items:center;gap:var(--esp-3,.75rem);min-height:2.25rem;padding:var(--esp-1,.25rem) var(--esp-3,.75rem);
  cursor:pointer;font-size:var(--tipo-descripcion);color:var(--texto-1);
  clip-path:var(--bevel-compacto);--filo-color:transparent;
}
.vr-sug-op.es-activa{background:rgba(255,198,33,.16);--filo-color:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .vr-sug-op::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-compacto);background:var(--filo-color)}
}
/* Lo que no cabe en el campo: igual que lo activo, con baja opacidad (CEO,
   21 oct 2026). La fila «ninguna con…» es una nota, en letra pequeña. */
.vr-sug-op.es-apagada{cursor:default;opacity:var(--opacidad-apagado,.45)}
.vr-sug-op.es-apagada:not(:has(.vr-glifo)){opacity:1;color:var(--texto-3);font-size:var(--tipo-leyenda)}
.vr-sug-textos{display:flex;flex-direction:column;min-width:0;flex:1}
.vr-sug-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em}
.vr-sug-op.es-apagada:not(:has(.vr-glifo)) .vr-sug-nombre{font-family:inherit;white-space:normal}
.vr-sug-ayuda{font-size:var(--tipo-leyenda);color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El glifo «{ }», el mismo de las variables en el «/» del editor (.blq-glifo). */
.vr-glifo{
  flex:none;display:inline-grid;place-items:center;min-width:2rem;height:1.75rem;padding:0 var(--esp-1,.25rem);
  font-size:var(--tipo-leyenda);color:var(--yellow);background:var(--velo-1,rgba(242,232,220,.045));border:1px solid var(--linea-suave,rgba(74,54,43,.6));
}
.vr-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}