/* paco-widget.css — Widget flotante de PACO, asistente de ventas de PAC Limpieza.
   Cargado como <link> externo (no inline) para respetar CSP sin unsafe-inline. */

#paco-widget-root {
    position: fixed;
    z-index: 9990;
    right: 1.1rem;
    bottom: 1.1rem;
    font-family: inherit;
}

.paco-fab {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 130, 204, .12);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}
.paco-fab:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 130, 204, .18); }
.paco-fab svg { width: 62px; height: 68px; overflow: visible; }

/* Mascota PACO — micro-animaciones (transform/opacity únicamente, sin reflow).
   Calca el patrón de GiftBot (mascota de Betty/LovelyShop), ilustración propia. */
.paco-bot-halo { transform-box: fill-box; transform-origin: center; animation: paco-halo 2.9s ease-out infinite; }
.paco-bot-float {
    transform-box: fill-box;
    transform-origin: center;
    animation: paco-float 3.6s ease-in-out infinite;
}
.paco-bot-eye { transform-box: fill-box; transform-origin: center; animation: paco-blink 5.5s ease-in-out infinite; }
.paco-bot-spark { transform-box: fill-box; transform-origin: center; animation: paco-spark 2.8s ease-in-out infinite; }
.paco-bot-wave { transform-box: fill-box; transform-origin: 80% 85%; animation: paco-wave 2.3s ease-in-out infinite; }

@keyframes paco-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes paco-halo {
    0%   { transform: scale(0.85); opacity: 0.32; }
    70%  { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.15); opacity: 0; }
}
@keyframes paco-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes paco-spark { 0%, 100% { transform: scale(0.6); opacity: 0.2; } 50% { transform: scale(1); opacity: 1; } }
@keyframes paco-wave {
    0%, 55%, 100% { transform: rotate(4deg); }
    70%           { transform: rotate(-14deg); }
    85%           { transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .paco-bot-halo, .paco-bot-float, .paco-bot-eye, .paco-bot-spark, .paco-bot-wave { animation: none; }
    .paco-bot-halo { opacity: 0.25; }
}

.paco-bubble {
    position: absolute;
    right: 92px;
    bottom: 14px;
    max-width: 220px;
    background: #fff;
    color: #1a1a1a;
    padding: .6rem .8rem;
    border-radius: .8rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    font-size: .85rem;
    line-height: 1.35;
    animation: paco-bubble-in .25s ease;
}
.paco-bubble::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: 18px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
}
@keyframes paco-bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.paco-panel {
    position: fixed;
    right: 1.1rem;
    bottom: 5.6rem;
    width: min(370px, calc(100vw - 2.2rem));
    max-height: min(560px, calc(100vh - 7rem));
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9991;
}
.paco-panel[hidden] { display: none; }

.paco-panel__header {
    background: linear-gradient(135deg, #0082cc, #74bb20);
    color: #fff;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.paco-panel__header h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.paco-panel__header small { display: block; font-weight: 400; opacity: .9; font-size: .72rem; }
.paco-panel__close {
    background: rgba(255, 255, 255, .18);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.paco-panel__messages {
    flex: 1;
    overflow-y: auto;
    padding: .9rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: #f7f9fa;
}

.paco-msg {
    max-width: 85%;
    padding: .55rem .75rem;
    border-radius: .75rem;
    font-size: .88rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.paco-msg--bot {
    background: #fff;
    border: 1px solid #e4e8eb;
    align-self: flex-start;
    border-bottom-left-radius: .25rem;
}
.paco-msg--user {
    background: #0082cc;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: .25rem;
}
.paco-msg--typing { color: #888; font-style: italic; }

.paco-panel__handoff {
    padding: .5rem .9rem;
    border-top: 1px solid #eee;
}
.paco-btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: .6rem;
    padding: .55rem;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
}
.paco-btn-whatsapp:hover { background: #1ebe5b; }

.paco-panel__inputbar {
    display: flex;
    gap: .5rem;
    padding: .7rem .9rem;
    border-top: 1px solid #eee;
    background: #fff;
}
.paco-panel__inputbar input {
    flex: 1;
    border: 1px solid #dbe1e5;
    border-radius: 1.5rem;
    padding: .5rem .9rem;
    font-size: .88rem;
    outline: none;
}
.paco-panel__inputbar input:focus { border-color: #0082cc; }
.paco-panel__inputbar button {
    background: #0082cc;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.paco-panel__inputbar button:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
    .paco-panel { right: .6rem; bottom: 5rem; }
    #paco-widget-root { right: .6rem; bottom: .6rem; }
}