/* PIXO — estilos del widget. Personaliza con variables CSS en :root (o en el contenedor). */
:root {
  --pixo-accent: #141413;
  --pixo-accent-2: #141413;
  --pixo-bg: #ffffff;
  --pixo-bg-2: #f0eee6;
  --pixo-ink: #141413;
  --pixo-muted: #77756d;
  --pixo-line: rgba(20, 20, 19, .10);
  --pixo-right: 14px;       /* separación lateral */
  --pixo-bottom: 16px;      /* súbelo si tienes un footer o barra inferior fija */
  --pixo-z: 250;
}
.pixo-mascot { display: block; width: 100%; height: 100%; overflow: visible; color: var(--pixo-line, #0d2b73); }
.pixo-mascot .p-face, .pixo-mascot .p-eye { transform-box: fill-box; transform-origin: center; }
.pixo-mascot .p-face { animation: pxBreath 4s ease-in-out infinite; }
.pixo-mascot .p-eye { animation: pxBlink 4.6s infinite; }
.pixo-mascot .p-eyes, .pixo-mascot .p-mouth { transform-box: fill-box; transform-origin: center; }
.pixo-mascot .p-eyes { animation: pxSleepEye 18s infinite; }
.pixo-mascot .p-mouth { animation: pxMouth 18s infinite; }
.pixo-mascot .p-z text { opacity: 0; animation: pxZ 18s infinite; }
.pixo-mascot .p-z .z2 { animation-delay: .5s; } .pixo-mascot .p-z .z3 { animation-delay: 1s; }
.pixo-fab-w:hover .p-eyes, .pixo-fab-w:focus-visible .p-eyes { animation: none; transform: none; }
.pixo-fab-w:hover .p-z text, .pixo-fab-w:hover .p-mouth { animation: none; opacity: 0; transform: none; }
@keyframes pxBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes pxBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes pxSleepEye { 0%, 52% { transform: scaleY(1); } 58%, 90% { transform: scaleY(.07); } 95%, 100% { transform: scaleY(1); } }
@keyframes pxMouth { 0%, 52% { transform: scale(1); } 58%, 90% { transform: scale(.55, 1.5) translateY(.5px); } 95%, 100% { transform: scale(1); } }
@keyframes pxZ { 0%, 58% { opacity: 0; transform: translate(-3px, 4px); } 66% { opacity: 1; } 84% { opacity: .9; transform: translate(2px, -3px); } 90%, 100% { opacity: 0; transform: translate(3px, -5px); } }

/* Botón flotante: resplandor muy tenue, sin anillos animados */
.pixo-fab-w { position: fixed; right: var(--pixo-right); bottom: var(--pixo-bottom); z-index: var(--pixo-z); width: 58px; height: 58px; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .2s; }
.pixo-fab-w::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, .5), rgba(29, 78, 216, .2) 45%, transparent 72%); filter: blur(10px); z-index: -1; pointer-events: none; animation: pxAura 3.2s ease-in-out infinite; }
@keyframes pxAura { 0%, 100% { opacity: .6; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
.pixo-fab-w:hover { transform: translateY(-3px) scale(1.06); }
.px-tip { position: fixed; right: var(--pixo-right); bottom: calc(var(--pixo-bottom) + 68px); z-index: var(--pixo-z); max-width: 240px; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #fff; color: #201628; font: 13px/1.4 system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .3s; }
.px-tip.show { opacity: 1; transform: none; }

.pixo-panel-w { position: fixed; right: var(--pixo-right); bottom: calc(var(--pixo-bottom) + 68px); z-index: var(--pixo-z); width: min(380px, calc(100vw - 28px)); height: min(560px, calc(100dvh - var(--pixo-bottom) - 90px)); display: flex; flex-direction: column; background: var(--pixo-bg); color: var(--pixo-ink); border: 1px solid rgba(20, 20, 19, .12); border-radius: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .28); overflow: hidden; opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; transition: .25s; font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pixo-panel-w.on { opacity: 1; transform: none; pointer-events: auto; }
.px-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, var(--pixo-accent), var(--pixo-accent-2)); color: #fff; }
.px-id { display: flex; align-items: center; gap: 10px; } .px-av { width: 36px; height: 36px; flex: none; } .px-av .pixo-mascot { color: #fff; }
.px-head b { display: block; font-size: 16px; line-height: 1.1; } .px-head small { opacity: .9; font-size: 11.5px; }
.px-x { border: 0; background: rgba(255, 255, 255, .2); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.px-head b, .px-head small { color: #fff; }
.px-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 88%; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; }
.msg.bot { align-self: flex-start; background: var(--pixo-bg-2); border-radius: 16px 16px 16px 4px; }
.msg.me { align-self: flex-end; background: var(--pixo-accent); color: #fff; border-radius: 16px 16px 4px 16px; }
.msg.act { align-self: center; background: rgba(34, 197, 94, .14); color: #15803d; font-size: 12.5px; border-radius: 99px; padding: 5px 12px; }
.msg.typing { display: flex; gap: 4px; padding: 12px 14px; } .msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #77756d; animation: pxDot 1s infinite; } .msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pxDot { 50% { transform: translateY(-4px); background: var(--pixo-accent); } }
.px-quick { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; } .px-quick[hidden] { display: none; }
.px-quick button { flex: none; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(20, 20, 19, .18); background: rgba(20, 20, 19, .06); color: #141413; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.px-left { padding: 0 14px 6px; font-size: 11px; color: #77756d; } .px-left:empty { display: none; }
.px-form { display: flex; gap: 8px; padding: 0 12px 12px; }
.px-form input { flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--pixo-line); border-radius: 12px; background: #faf9f5; color: var(--pixo-ink); font: inherit; }
.px-form input:focus { outline: none; border-color: var(--pixo-accent); }
.px-form button { width: 46px; border: 0; border-radius: 12px; background: var(--pixo-accent); color: #fff; cursor: pointer; }
.px-foot { border-top: 1px solid var(--pixo-line); padding: 10px; display: grid; gap: 8px; background: #ffffff; }
.px-pick { display: flex; flex-direction: column; gap: 6px; max-height: 170px; overflow-y: auto; } .px-pick[hidden] { display: none; }
.px-pick button { text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--pixo-line); background: #faf9f5; color: var(--pixo-ink); font: inherit; font-size: 13px; cursor: pointer; }
.px-pick button:hover { border-color: var(--pixo-accent); } .px-none { color: var(--pixo-muted); font-size: 12px; padding: 6px; }
.px-toggle { height: 38px; border-radius: 12px; border: 0; background: var(--pixo-bg-2); color: #141413; font-weight: 700; font-size: 13px; cursor: pointer; }
.px-wa { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin: 0 12px 12px; border-radius: 12px; background: #25d366; color: #06280f; font-weight: 800; font-size: 14px; text-decoration: none; }
.px-foot .px-wa { margin: 0; }

/* Barra "Completar con Pixo" para formularios */
.pixo-bar { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 45, 180, .14), rgba(139, 92, 246, .14)); border: 1px solid rgba(255, 45, 180, .25); margin-bottom: 12px; }
.pixo-bar input { flex: 1; min-width: 0; padding: 8px 12px; border: 1.5px solid var(--pixo-line, #2b2136); border-radius: 12px; background: #0e0a13; color: var(--pixo-ink); font: inherit; }
.pixo-bar button { padding: 9px 14px; border: 0; border-radius: 99px; background: linear-gradient(135deg, var(--pixo-accent), var(--pixo-accent-2)); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pixo-bar button:disabled { opacity: .6; }
@media (max-width: 560px) { .pixo-bar { flex-wrap: wrap; } .pixo-bar button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pixo-mascot *, .pixo-panel-w, .px-tip { animation: none !important; transition: none !important; } }

:root { --pixo-line: #fff; }