/* ============================================================================
   DimensIAn · ROBOYIYO — el asistente guía
   ----------------------------------------------------------------------------
   Un ayudante flotante abajo a la izquierda. Explica cada control paso a paso,
   lo resalta, se minimiza y trae un manual. Archivo ÚNICO de estilos: nada
   inline, para que funcione también donde la seguridad (CSP) prohíbe estilos
   incrustados. Todo cuelga de #roboyiyo, así que no pisa nada de la página.
   ============================================================================ */

#roboyiyo, #roboyiyo *{ box-sizing:border-box; }
#roboyiyo{
  position:fixed; right:18px; bottom:18px; left:auto; top:auto; z-index:2147483000;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,system-ui,sans-serif;
  --rb-cian:#7fd6e3; --rb-ambar:#ffb347; --rb-panel:rgba(6,14,20,.96);
  --rb-linea:rgba(127,214,227,.22); --rb-texto:#cfe0e5;
}

/* ── el robot ── */
#rb-avatar{
  width:88px; height:auto; display:block; cursor:pointer; user-select:none;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55));
  animation:rb-flota 3.6s ease-in-out infinite; transition:transform .2s;
}
#rb-avatar:hover{ transform:scale(1.05); }
@keyframes rb-flota{ 50%{ transform:translateY(-7px); } }

/* burbujita de "¿te ayudo?" cuando está minimizado */
#rb-llamada{
  position:absolute; right:78px; left:auto; bottom:52px; white-space:nowrap;
  background:var(--rb-ambar); color:#1a1206; font-weight:700;
  font-size:12px; letter-spacing:.02em; padding:7px 12px; border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:pointer;
  animation:rb-pulso 2.4s ease-in-out infinite;
}
#rb-llamada::after{
  content:""; position:absolute; right:-6px; bottom:9px;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:7px solid var(--rb-ambar); border-right:0;
}
@keyframes rb-pulso{ 50%{ transform:translateY(-3px); } }

/* ── el panel de diálogo ── */
#rb-panel{
  position:absolute; right:0; left:auto; bottom:96px; width:340px; max-width:calc(100vw - 36px);
  background:var(--rb-panel); border:1px solid var(--rb-linea); border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.6); overflow:hidden;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#rb-cab{
  display:flex; align-items:center; gap:9px; padding:11px 12px;
  border-bottom:1px solid var(--rb-linea); background:rgba(127,214,227,.05);
}
#rb-cab .rb-mini{ width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:center/120% no-repeat; background-color:#0a1620; }
#rb-cab b{ color:#eef6f8; font-size:13px; letter-spacing:.06em; flex:1; font-weight:700; }
#rb-cab .rb-x{ background:transparent; border:0; color:var(--rb-texto); cursor:pointer;
  font-size:16px; opacity:.6; padding:2px 6px; line-height:1; }
#rb-cab .rb-x:hover{ opacity:1; color:#fff; }

#rb-cuerpo{ padding:13px 14px 4px; color:var(--rb-texto); font-size:13px; line-height:1.62; }
#rb-cuerpo .rb-titulo{ color:var(--rb-cian); font-weight:700; font-size:13px;
  letter-spacing:.04em; display:block; margin-bottom:6px; }
#rb-cuerpo p{ margin:0 0 6px; }

/* la lista del manual */
#rb-cuerpo .rb-lista{ max-height:46vh; overflow:auto; margin:2px -4px 0; }
#rb-cuerpo .rb-item{ padding:9px 8px; border-radius:9px; cursor:pointer; transition:.12s; }
#rb-cuerpo .rb-item:hover{ background:rgba(127,214,227,.08); }
#rb-cuerpo .rb-item b{ color:var(--rb-cian); display:block; font-size:12.5px; margin-bottom:2px; }
#rb-cuerpo .rb-item span{ opacity:.75; font-size:12px; }
#rb-cuerpo .rb-sub{ color:var(--rb-ambar); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  margin:13px 0 5px; padding:0 8px; opacity:.9; }
#rb-cuerpo .rb-sub:first-child{ margin-top:2px; }

/* pie con botones */
#rb-pie{ display:flex; align-items:center; gap:8px; padding:10px 12px 12px; }
#rb-pie .rb-cuenta{ flex:1; font-size:11px; opacity:.55; letter-spacing:.08em; }
#rb-panel button.rb-btn{
  background:transparent; border:1px solid var(--rb-linea); color:var(--rb-texto);
  font-family:inherit; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 12px; border-radius:8px; cursor:pointer; transition:.14s; white-space:nowrap;
}
#rb-panel button.rb-btn:hover{ background:rgba(127,214,227,.12); color:#fff; border-color:var(--rb-cian); }
#rb-panel button.rb-btn.rb-cta{ background:var(--rb-cian); color:#03212a; border-color:var(--rb-cian); font-weight:700; }
#rb-panel button.rb-btn.rb-cta:hover{ filter:brightness(1.1); }
#rb-panel button.rb-btn:disabled{ opacity:.3; cursor:default; }
#rb-enlaces{ display:flex; gap:14px; padding:0 14px 12px; }
#rb-enlaces a{ color:var(--rb-cian); font-size:11px; letter-spacing:.06em; cursor:pointer;
  text-decoration:none; opacity:.8; }
#rb-enlaces a:hover{ opacity:1; text-decoration:underline; }

/* ── el foco: resalta el control del que se habla ── */
#rb-foco{
  position:fixed; z-index:2147482000; pointer-events:none; border-radius:10px;
  box-shadow:0 0 0 3px var(--rb-cian), 0 0 0 9999px rgba(2,6,10,.62);
  transition:all .28s cubic-bezier(.4,0,.2,1);
  animation:rb-latido 1.4s ease-in-out infinite;
}
@keyframes rb-latido{ 50%{ box-shadow:0 0 0 4px var(--rb-ambar), 0 0 22px 3px rgba(255,179,71,.35), 0 0 0 9999px rgba(2,6,10,.62); } }

/* estado minimizado: se oculta el panel, queda el robot */
#roboyiyo.rb-min #rb-panel{ display:none; }
#roboyiyo:not(.rb-min) #rb-llamada{ display:none; }
#roboyiyo.rb-oculto{ display:none; }

/* ── el asa para moverlo: agárrala y arrastra el robot a donde quieras ── */
#rb-mover{
  position:absolute; z-index:3; right:0; top:-6px;
  width:28px; height:28px; padding:0; border-radius:50%;
  border:1px solid var(--rb-linea); background:var(--rb-panel); color:var(--rb-cian);
  display:flex; align-items:center; justify-content:center; cursor:grab;
  box-shadow:0 3px 10px rgba(0,0,0,.5); touch-action:none;
  opacity:.85; transition:opacity .15s, transform .15s;
}
#rb-mover:hover{ opacity:1; transform:scale(1.1); }
#rb-mover svg{ display:block; }
#roboyiyo.rb-arrastrando #rb-mover{ cursor:grabbing; }
#roboyiyo.rb-arrastrando #rb-avatar{ animation:none; }

/* según el lado en que esté, el panel y el globito se abren hacia dentro */
#roboyiyo.rb-lado-i #rb-panel{ left:0; right:auto; }
#roboyiyo.rb-lado-i #rb-llamada{ left:78px; right:auto; }
#roboyiyo.rb-lado-i #rb-llamada::after{
  left:-6px; right:auto;
  border-left:0; border-right:7px solid var(--rb-ambar);
}
#roboyiyo.rb-arriba #rb-panel{ bottom:auto; top:calc(100% + 12px); }

@media (max-width:560px){
  #roboyiyo{ right:10px; left:auto; bottom:10px; }
  #rb-avatar{ width:64px; }
  #rb-panel{ width:min(88vw,320px); bottom:78px; }
  #rb-llamada{ right:58px; left:auto; bottom:38px; font-size:11px; }
  #roboyiyo.rb-lado-i #rb-llamada{ left:58px; right:auto; }
}