/* --- ARREGLO TOTAL DEL PIE DE PÁGINA (FOOTER) --- */

/* 1. Fondo Verde Oscuro Punto Hego */
footer, 
.theme-footer-area, 
.footer-section, 
[data-zp-footer-container] {
    background-color: #0A241B !important; /* Tu nuevo verde */
    color: #ffffff !important;
    padding-top: 50px !important;
    padding-bottom: 20px !important;
}

/* 2. Forzar que todos los textos sean blancos */
footer h1, footer h2, footer h3, footer h4, 
footer p, footer span, footer div, footer li {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
}

/* 3. Estilo de los enlaces (Menú de abajo) */
footer a, .theme-footer-area a {
    color: #cbd5e1 !important; /* Gris claro para que no canse la vista */
    text-decoration: none !important;
    transition: 0.3s;
}

footer a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* 4. Línea divisoria sutil */
.footer-bottom-area, .theme-footer-copyright-area {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
}

/* 5. Asegurar que el logo de Zoho en el footer no arruine el diseño */
.zoho-commerce-logo {
    filter: brightness(0) invert(1) !important;
    opacity: 0.6 !important;
}
<!-- Asistente IA Punto Hego -->
<style>
  #ph-chat-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 99999;
    width: 56px; height: 56px; border-radius: 50%;
    background: #2d7a4f; color: white; border: none; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    transition: transform 0.2s;
  }
  #ph-chat-btn:hover { transform: scale(1.1); }
  #ph-chat-box {
    position: fixed; bottom: 90px; right: 24px; z-index: 99999;
    width: 360px; max-height: 520px;
    background: white; border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: none; flex-direction: column; overflow: hidden;
    font-family: 'Inter', sans-serif;
  }
  #ph-chat-box.open { display: flex; }
  #ph-chat-header {
    background: #2d7a4f; color: white; padding: 14px 16px;
    display: flex; align-items: center; gap: 10px; font-weight: 600;
  }
  #ph-chat-header span { font-size: 13px; opacity: 0.85; font-weight: 400; }
  #ph-chat-close { margin-left: auto; cursor: pointer; font-size: 18px; opacity: 0.8; }
  #ph-chat-messages {
    flex: 1; overflow-y: auto; padding: 14px; display: flex;
    flex-direction: column; gap: 10px; min-height: 200px; max-height: 340px;
  }
  .ph-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
  .ph-msg.bot { background: #f0f4f0; color: #1a2e1a; border-bottom-left-radius: 4px; align-self: flex-start; }
  .ph-msg.user { background: #2d7a4f; color: white; border-bottom-right-radius: 4px; align-self: flex-end; }
  .ph-msg a { color: #2d7a4f; text-decoration: underline; }
  .ph-msg.user a { color: #b8f0c8; }
  #ph-chat-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #eee; }
  #ph-chat-input {
    flex: 1; border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px;
    font-size: 13px; outline: none;
  }
  #ph-chat-send {
    background: #2d7a4f; color: white; border: none; border-radius: 8px;
    padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
  }
  #ph-chat-send:disabled { opacity: 0.5; cursor: default; }
  .ph-typing { color: #999; font-size: 12px; font-style: italic; align-self: flex-start; }
</style>

<button id="ph-chat-btn" title="Asistente IA">🤖</button>

<div id="ph-chat-box">
  <div id="ph-chat-header">
    🛍️ Asistente Punto Hego
    <span>· En línea</span>
    <div id="ph-chat-close">✕</div>
  </div>
  <div id="ph-chat-messages">
    <div class="ph-msg bot">¡Hola! 👋 Soy el asistente de <strong>Punto Hego</strong>. Estoy aquí para ayudarte a encontrar la bolsa ideal y guiarte en tu compra. ¿En qué te puedo ayudar?</div>
  </div>
  <div id="ph-chat-input-row">
    <input id="ph-chat-input" type="text" placeholder="Escribe tu pregunta..." maxlength="300" />
    <button id="ph-chat-send">Enviar</button>
  </div>
</div>

<script>
(function() {
  // ⚠️ Reemplaza esta URL con la URL de tu función backend de Base44
  var API_URL = 'https://api.base44.com/api/apps/TU_APP_ID/functions/tiendaAssistant';

  var messages = [];
  var btn = document.getElementById('ph-chat-btn');
  var box = document.getElementById('ph-chat-box');
  var closeBtn = document.getElementById('ph-chat-close');
  var input = document.getElementById('ph-chat-input');
  var send = document.getElementById('ph-chat-send');
  var msgContainer = document.getElementById('ph-chat-messages');

  btn.addEventListener('click', function() {
    box.classList.toggle('open');
    if (box.classList.contains('open')) input.focus();
  });
  closeBtn.addEventListener('click', function() { box.classList.remove('open'); });

  function appendMsg(role, text) {
    var div = document.createElement('div');
    div.className = 'ph-msg ' + (role === 'user' ? 'user' : 'bot');
    // Convertir URLs y texto en negrita básico
    var safe = text
      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
      .replace(/(https?:\/\/[^\s\)]+)/g, '<a href__="$1" target="_blank">$1</a>')
      .replace(/\n/g, '<br>');
    div.innerHTML = safe;
    msgContainer.appendChild(div);
    msgContainer.scrollTop = msgContainer.scrollHeight;
  }

  function setLoading(on) {
    send.disabled = on;
    input.disabled = on;
    var typing = document.getElementById('ph-typing');
    if (on && !typing) {
      var t = document.createElement('div');
      t.className = 'ph-typing'; t.id = 'ph-typing'; t.textContent = 'Escribiendo...';
      msgContainer.appendChild(t);
      msgContainer.scrollTop = msgContainer.scrollHeight;
    } else if (!on && typing) { typing.remove(); }
  }

  async function sendMessage() {
    var text = input.value.trim();
    if (!text) return;
    input.value = '';
    appendMsg('user', text);
    messages.push({ role: 'user', content: text });
    setLoading(true);
    try {
      var res = await fetch(API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ messages: messages })
      });
      var data = await res.json();
      var reply = data.reply || 'Lo siento, hubo un problema. Intenta de nuevo.';
      messages.push({ role: 'assistant', content: reply });
      appendMsg('bot', reply);
    } catch(e) {
      appendMsg('bot', 'Error de conexión. Por favor intenta de nuevo.');
    }
    setLoading(false);
    input.focus();
  }

  send.addEventListener('click', sendMessage);
  input.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) sendMessage();
  });
})();
</script>
<!-- Fin Asistente IA Punto Hego -->