/* HyperForge · Weby en la app (v11, handoff componentes §23): botón fijo con el círculo de Weby abajo a la derecha y panel lateral
   de 360 px (esquinas 28/4) flotando con su margen. Solo tokens de tokens.css; archivo propio para reestilizar.
   Movimiento solo con transform/opacity y apagado con prefers-reduced-motion. */
.hf-weby-boton{position:fixed;z-index:var(--hf-z-hoja);right:calc(22px + env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:10px;height:48px;
  padding:0 18px 0 8px;border:0;border-radius:var(--hf-r-pildora);background:var(--hf-texto);color:var(--hf-fondo);
  font:600 14px var(--hf-f-display);word-spacing:var(--hf-ws-display);box-shadow:var(--hf-sombra-flotante);cursor:pointer;
  transition:transform var(--hf-dur) var(--hf-facil),opacity var(--hf-dur)}
.hf-weby-boton:hover{transform:translateY(-2px)}
.hf-weby-boton:focus-visible,.hf-weby-cerrar:focus-visible,.hf-weby-sugerencia:focus-visible,.hf-weby-entrada:focus-visible{
  outline:2px solid var(--hf-foco);outline-offset:2px}
.hf-weby-cara{width:34px;height:34px;flex:none}
.hf-weby-panel{position:fixed;z-index:var(--hf-z-hoja);right:12px;top:12px;bottom:12px;width:min(360px,calc(100% - 24px));display:flex;
  flex-direction:column;background:var(--hf-panel);color:var(--hf-texto);border:1px solid var(--hf-linea-2);border-radius:var(--hf-r-tarjeta);
  box-shadow:var(--hf-sombra-modal);overflow:hidden;animation:hf-weby-entra var(--hf-dur-lenta) var(--hf-facil)}
.hf-weby-panel[hidden]{display:none}
@keyframes hf-weby-entra{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.hf-weby-cabeza{display:flex;align-items:center;gap:12px;padding:16px 16px 6px 18px;min-height:76px}
.hf-weby-cara-grande{width:52px;height:52px;flex:none}
.hf-weby-cabeza h2{margin:0 auto 0 0;color:var(--hf-texto);font:700 18px var(--hf-f-display);text-transform:uppercase;letter-spacing:.01em}
.hf-weby-cerrar{width:34px;height:34px;display:grid;place-items:center;border:1px dotted var(--hf-linea-2);border-radius:50%;background:none;
  color:var(--hf-tenue);font-size:20px;line-height:1;cursor:pointer}
.hf-weby-cerrar:hover{color:var(--hf-texto);border-color:var(--hf-texto)}
.hf-weby-intro{margin:0;padding:0 18px 8px;color:var(--hf-tenue);font-size:var(--hf-t-sm)}
.hf-weby-log{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:4px 16px;display:flex;flex-direction:column;gap:8px}
.hf-weby-msj{max-width:88%;padding:10px 13px;border-radius:4px 16px 16px 16px;background:var(--hf-panel-2);font-size:14px;line-height:1.4}
.hf-weby-msj p{margin:0;white-space:pre-wrap}
.hf-weby-msj.tu{align-self:flex-end;background:var(--hf-texto);color:var(--hf-fondo);border:0;border-radius:16px 4px 16px 16px}
.hf-weby-msj.error p{color:var(--hf-alerta-texto)}
.hf-weby-aviso{margin-top:var(--hf-e2)!important;color:var(--hf-tenue);font-size:var(--hf-t-xs)}
.hf-weby-accion{margin-top:var(--hf-e3);display:inline-flex}
.hf-weby-sugerencias{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px}
.hf-weby-sugerencia{border:1px dotted var(--hf-linea-2);background:none;color:var(--hf-texto);border-radius:var(--hf-r-pildora);
  padding:7px 11px;font:500 12.5px var(--hf-f-texto);text-align:left;cursor:pointer}
.hf-weby-sugerencia:hover{border-color:var(--hf-texto)}
.hf-weby-forma{display:flex;gap:8px;align-items:center;padding:10px 16px 16px}
.hf-weby-entrada{flex:1;min-width:0;resize:none;height:44px;min-height:44px;padding:11px 16px;border:1px solid var(--hf-linea-2);
  border-radius:var(--hf-r-pildora);background:var(--hf-panel-2);color:var(--hf-texto);font:400 14px var(--hf-f-texto);line-height:20px}
.hf-weby-forma .btn{height:44px;min-height:44px}
body.hf-weby-abierto .hf-weby-boton{opacity:0;pointer-events:none}
/* escritorio medio: el botón deja solo el círculo para no tapar el contenido */
@media (min-width:821px) and (max-width:1280px){.hf-weby-etiqueta{display:none}.hf-weby-boton{padding:0 8px}}
/* móvil: el riel es un dock abajo; el botón sube por encima de él y deja solo el círculo */
@media (max-width:820px){
  .hf-weby-boton{right:calc(var(--hf-margen-movil) + env(safe-area-inset-right,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px));padding:0 8px}
  .hf-weby-etiqueta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hf-weby-panel{right:8px;left:8px;top:8px;bottom:8px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .hf-weby-panel{animation:none}
  .hf-weby-boton,.hf-weby-boton:hover{transition:none;transform:none}
}
@media print{.hf-weby-boton,.hf-weby-panel{display:none}}