/* ===========================================================================
   Sofy, la asistente del sitio (#sfy-asistente)
   ---------------------------------------------------------------------------
   Portado del widget de Tesy sobre la paleta de sofihacloud.com (azul 700 de
   Tailwind). Vive abajo a la derecha, encima del botón "subir" (que mide 64px
   y está a 25px del borde), por eso el bottom de 100px. El botón de WhatsApp
   está a la izquierda.
   =========================================================================== */

#sfy-asistente { position: fixed; right: 24px; bottom: 100px; z-index: 9990; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

#sfy-asistente .sfy-toggle {
    display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 18px;
    background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer;
    box-shadow: 0 10px 25px rgba(29, 78, 216, .35); transition: transform .2s;
}
#sfy-asistente .sfy-toggle svg { display: block; }
#sfy-asistente .sfy-toggle:hover { transform: translateY(-2px); }
#sfy-asistente .sfy-toggle.is-open span { display: none; }

#sfy-asistente .sfy-panel {
    position: absolute; right: 0; bottom: 64px; width: 370px; max-width: calc(100vw - 40px);
    height: 540px; max-height: calc(100vh - 160px);
    display: flex; flex-direction: column; background: #fff; border-radius: 16px;
    overflow: hidden; box-shadow: 0 20px 60px rgba(17, 24, 39, .22); border: 1px solid #e5e7eb;
}
/* El panel arranca con el atributo hidden. La regla de arriba fija display:flex y,
   por ser más específica que la del navegador para [hidden], lo dejaba visible al
   cargar la página: el chat aparecía abierto sin que nadie tocara el botón.
   Esta regla gana por especificidad (id + clase + atributo) y lo mantiene cerrado. */
#sfy-asistente .sfy-panel[hidden] { display: none; }

#sfy-asistente .sfy-header {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
    background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%); color: #fff;
}
#sfy-asistente .sfy-header strong { display: block; font-size: 15px; }
#sfy-asistente .sfy-header small { display: block; opacity: .88; font-size: 12px; }
#sfy-asistente .sfy-close { border: 0; background: none; color: #fff; cursor: pointer; line-height: 1; padding: 2px; }
#sfy-asistente .sfy-close svg { display: block; }

#sfy-asistente .sfy-messages {
    flex: 1; overflow-y: auto; padding: 16px; background: #f8fafc;
    display: flex; flex-direction: column; gap: 10px;
}
#sfy-asistente .sfy-msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
#sfy-asistente .sfy-msg-bot { align-self: flex-start; background: #fff; color: #111827; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(17, 24, 39, .08); }
#sfy-asistente .sfy-msg-user { align-self: flex-end; background: #1d4ed8; color: #fff; border-bottom-right-radius: 4px; }
#sfy-asistente .sfy-msg a { color: inherit; text-decoration: underline; }

#sfy-asistente .sfy-typing span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #6b7280; animation: sfy-bounce 1.2s infinite; }
#sfy-asistente .sfy-typing span:nth-child(2) { animation-delay: .2s; }
#sfy-asistente .sfy-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes sfy-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }

#sfy-asistente .sfy-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e5e7eb; background: #fff; }
#sfy-asistente .sfy-form input { flex: 1; min-width: 0; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; }
#sfy-asistente .sfy-form input:focus { border-color: #1d4ed8; }
#sfy-asistente .sfy-form button { border: 0; border-radius: 10px; width: 44px; flex: 0 0 44px; background: #1d4ed8; color: #fff; cursor: pointer; display: grid; place-items: center; }
#sfy-asistente .sfy-form button:disabled { opacity: .5; cursor: default; }

#sfy-asistente .sfy-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 8px 12px 10px; background: #fff; font-size: 12.5px; }
#sfy-asistente .sfy-footer a { color: #4b5563; text-decoration: none; font-weight: 500; }
#sfy-asistente .sfy-footer a:hover { color: #1d4ed8; }

@media (max-width: 575px) {
    #sfy-asistente { right: 12px; bottom: 92px; }
    #sfy-asistente .sfy-panel { width: calc(100vw - 24px); height: 70vh; }
    /* En el celular el globo va sin texto para no tapar los botones de la página. */
    #sfy-asistente .sfy-toggle { padding: 12px; }
    #sfy-asistente .sfy-toggle span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #sfy-asistente .sfy-typing span { animation: none; opacity: .7; }
    #sfy-asistente .sfy-toggle, #sfy-asistente .sfy-toggle:hover { transition: none; transform: none; }
}