/* ===== Orbitaz · chatbot de la landing (widget flotante) =====
   Autocontenido: no depende de styles.css salvo por los tokens de color.
   Convive con .wa-float (desktop) y .wa-bar (movil): la burbuja se apila encima y,
   con el panel abierto, ambos se ocultan. */

.orb-chat{
  --oc-night:var(--night-900,#0B1033);
  --oc-panel:rgba(13,19,58,.92);
  --oc-line:rgba(255,255,255,.12);
  --oc-line-strong:rgba(255,255,255,.22);
  --oc-text:var(--text-on-dark,#EEF1FF);
  --oc-text-2:rgba(238,241,255,.72);
  --oc-text-3:rgba(238,241,255,.48);
  --oc-blue:var(--blue-500,#4055FF);
  --oc-sky:var(--accent-sky,#7DD3FC);
  --oc-wa:var(--wa,#25D366);
  --oc-wa-text:var(--wa-text,#0B1033);
  font-family:var(--font-body,'Urbanist',ui-sans-serif,system-ui,sans-serif);
}

/* el aspa de la marca como máscara: hereda el color del contenedor, sin duplicar el trazado */
.orb-chat .iso{
  display:inline-block;background:currentColor;
  -webkit-mask:url(isotipo.svg) center/contain no-repeat;
          mask:url(isotipo.svg) center/contain no-repeat;
}

/* ---------- burbuja ---------- */
.orb-chat__btn{
  position:fixed;right:22px;bottom:88px;z-index:80;
  width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;
  background:var(--oc-blue);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(11,16,51,.45);
  transform:scale(0);opacity:0;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s,background .25s;
}
.orb-chat__btn.is-on{transform:scale(1);opacity:1}
.orb-chat__btn:hover{background:#5468ff}
.orb-chat__btn:focus-visible{outline:2px solid var(--oc-sky);outline-offset:3px}
.orb-chat__btn .iso{width:26px;height:26px;display:block;transition:rotate .6s cubic-bezier(.22,1,.36,1)}
.orb-chat__btn:hover .iso{rotate:90deg}
.orb-chat__btn .orb-chat__x{display:none;width:20px;height:20px}
.orb-chat.is-open .orb-chat__btn .iso{display:none}
.orb-chat.is-open .orb-chat__btn .orb-chat__x{display:block}
.orb-chat__dot{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;
  background:var(--oc-wa);border:2px solid var(--oc-night)}
.orb-chat.is-open .orb-chat__dot{display:none}

/* con el panel abierto, fuera los flotantes del sitio */
.orb-chat-open .wa-float,.orb-chat-open .wa-bar{opacity:0;pointer-events:none}
@media (max-width:767px){.orb-chat__btn{bottom:calc(var(--wa-bar-h,56px) + 16px)}}

/* ---------- panel ---------- */
.orb-chat__panel{
  position:fixed;right:22px;bottom:154px;z-index:81;
  width:min(380px,calc(100vw - 44px));height:min(560px,calc(100vh - 200px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--oc-panel);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--oc-line);border-radius:22px;color:var(--oc-text);
  box-shadow:0 30px 80px rgba(4,7,25,.6);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transform-origin:100% 100%;
  transition:opacity .28s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility .28s;
}
.orb-chat.is-open .orb-chat__panel{opacity:1;visibility:visible;transform:none}
@media (max-width:767px){
  .orb-chat__panel{right:12px;left:12px;bottom:12px;width:auto;height:min(78svh,600px);border-radius:20px}
  .orb-chat__btn{right:16px}
}

.orb-chat__head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--oc-line)}
.orb-chat__head .iso{width:30px;height:30px;flex:0 0 auto}
.orb-chat__who{display:grid;gap:2px;min-width:0}
.orb-chat__name{font:600 15px/1.1 var(--font-body,inherit)}
.orb-chat__state{font-size:12px;color:var(--oc-sky);display:flex;align-items:center;gap:6px}
.orb-chat__state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oc-wa)}
.orb-chat__close{margin-left:auto;width:32px;height:32px;border:0;border-radius:8px;background:transparent;
  color:var(--oc-text-3);cursor:pointer;display:grid;place-items:center}
.orb-chat__close:hover{color:var(--oc-text);background:rgba(255,255,255,.06)}

.orb-chat__body{flex:1;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:18px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.orb-chat__body::-webkit-scrollbar{width:6px}
.orb-chat__body::-webkit-scrollbar-thumb{background:var(--oc-line-strong);border-radius:3px}

.orb-msg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.orb-msg--bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--oc-line);border-bottom-left-radius:6px}
.orb-msg--user{align-self:flex-end;background:var(--oc-blue);color:#fff;border-bottom-right-radius:6px}
.orb-msg--sys{align-self:center;max-width:100%;text-align:center;font-size:12.5px;color:var(--oc-text-3);background:none;border:0;padding:2px 0}
.orb-msg a{color:var(--oc-sky);text-decoration:underline;text-underline-offset:2px}
.orb-msg strong{font-weight:600}

.orb-chat__typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:rgba(255,255,255,.07);
  border:1px solid var(--oc-line);border-radius:16px;border-bottom-left-radius:6px}
.orb-chat__typing span{width:6px;height:6px;border-radius:50%;background:var(--oc-text-3);animation:orb-bounce 1.2s infinite}
.orb-chat__typing span:nth-child(2){animation-delay:.15s}
.orb-chat__typing span:nth-child(3){animation-delay:.3s}
@keyframes orb-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.orb-chat__chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.orb-chat__chip{border:1px solid var(--oc-line-strong);background:transparent;color:var(--oc-text-2);
  border-radius:999px;padding:8px 13px;font:500 13px/1 var(--font-body,inherit);cursor:pointer;transition:.2s}
.orb-chat__chip:hover{background:rgba(255,255,255,.08);color:var(--oc-text);border-color:var(--oc-sky)}

.orb-chat__foot{border-top:1px solid var(--oc-line);padding:12px 14px;display:grid;gap:10px}
.orb-chat__form{display:flex;align-items:flex-end;gap:8px}
.orb-chat__input{flex:1;resize:none;max-height:96px;min-height:42px;padding:11px 14px;border-radius:14px;
  border:1px solid var(--oc-line-strong);background:rgba(255,255,255,.05);color:var(--oc-text);
  font:400 14.5px/1.4 var(--font-body,inherit)}
.orb-chat__input::placeholder{color:var(--oc-text-3)}
.orb-chat__input:focus{outline:none;border-color:var(--oc-sky)}
.orb-chat__send{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:12px;background:var(--oc-blue);color:#fff;
  cursor:pointer;display:grid;place-items:center;transition:background .2s,opacity .2s}
.orb-chat__send:hover{background:#5468ff}
.orb-chat__send[disabled]{opacity:.4;cursor:not-allowed}
.orb-chat__wa{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:12px;
  background:var(--oc-wa);color:var(--oc-wa-text);font:600 13.5px/1 var(--font-body,inherit);text-decoration:none}
.orb-chat__wa:hover{background:var(--wa-hover,#1FB855)}
.orb-chat__note{font-size:11.5px;line-height:1.4;color:var(--oc-text-3);text-align:center}

@media (prefers-reduced-motion:reduce){
  .orb-chat__btn,.orb-chat__panel{transition:opacity .01ms}
  .orb-chat__btn .iso{transition:none}
  .orb-chat__typing span{animation:none}
}
.reduced .orb-chat__typing span{animation:none}