/* 💬 CHAT DE SOPORTE DE LA TIENDA — el diseño de la ventanita del chat del cliente.
   ⚡ Ronda 304 (R5-I08): antes este diseño iba escrito dentro de CADA página de la tienda (~14 KB en cada clic); ahora vive en
   este archivo, que el celular guarda y no vuelve a bajar (lo carga renderChatWidget() en config.php). Es EXACTAMENTE el mismo. */
        /* 🔒 Ventanita flotante fija (mismo lugar y tamaño que la del robot, bottom:90px
           derecha:20px, ~350px de ancho) — ya NO es una pantalla completa con fondo oscurecido
           como antes: en el celular eso dejaba la caja de escribir y el botón de enviar fuera de
           lo que se alcanzaba a ver, y en pc no se parecía en nada a la ventana del robot. */
        /* 🔒 Ronda 255: antes el chat (ventanita, burbujita y avisito) estaba en la capa más alta de
           todas (z-index 100000) y quedaba ENCIMA de cualquier ventana que difumina la página (carrito,
           menú de perfil, avisos...), dejándose tocar aunque hubiera otra ventana abierta. Ahora queda
           en la misma "altura" que el robot: por encima de la página, pero DETRÁS de esas ventanas
           (que van de 9998 para arriba). Única excepción: si el chat se abre DESDE una ventana que ya
           está abierta (p. ej. "Abrir el chat" dentro de un aviso), pasa adelante con .al-frente para
           no quedar escondido, y vuelve a su lugar apenas se abre otra ventana o se cierra esa. */
        .chat-sop-overlay { display: none; position: fixed; bottom: 90px; right: 20px; z-index: 1502; }
        .chat-sop-overlay.al-frente { z-index: 100000; }
        .chat-sop-overlay.activo { display: block; }
        .chat-sop-panel { width: 350px; max-width: calc(100vw - 40px); height: min(520px, 75vh); height: min(520px, 75dvh); background: #fff; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35); display: flex; flex-direction: column; overflow: hidden; font-family: 'Inter', sans-serif; animation: chatSopPop 0.25s ease; }
        @keyframes chatSopPop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        /* 🔒 Todas las variables de color llevan un valor de respaldo (el verde/gris de siempre) — en las
           pantallas de Mantenimiento (index, checkout, Mis Pedidos) no existen las variables --primary,
           --border-color, etc. del resto del sitio, y sin respaldo el chat se veía sin ningún color. */
        .chat-sop-header { background: linear-gradient(135deg, var(--primary, #1b5e20), var(--accent, var(--primary, #2e7d32))); color: #fff; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
        .chat-sop-header-tit { font-weight: 900; font-size: 14px; display: flex; align-items: center; gap: 8px; }
        .chat-sop-header-sub { font-size: 11px; opacity: 0.85; font-weight: 600; margin-top: 2px; }
        .chat-sop-cerrar { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.15); color: var(--text-muted, #6b7280); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; transition: 0.2s; }
        .chat-sop-cerrar:hover, .chat-sop-cerrar:active { background: #fee2e2; color: var(--error-red, #ef4444); } /* 🔒 Ronda 253: la X de siempre (blanca; rojo clarito al pasar el mouse o tocarla). */
        .chat-sop-correo-wrap { padding: 16px; border-bottom: 1px solid var(--border-color, #e5e7eb); display: none; flex-direction: column; gap: 10px; flex-shrink: 0; }
        .chat-sop-correo-wrap.activo { display: flex; }
        .chat-sop-correo-wrap p { margin: 0; font-size: 12.5px; color: var(--text-muted, #6b7280); font-weight: 600; line-height: 1.4; }
        .chat-sop-correo-wrap label { font-size: 11px; font-weight: 800; color: var(--text-muted, #6b7280); text-transform: uppercase; margin: 4px 0 -4px 0; }
        .chat-sop-correo-wrap input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 2px solid var(--border-color, #e5e7eb); border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #111827; background: #fff; }
        .chat-sop-correo-wrap button { background: var(--primary, #1b5e20); color: #fff; border: none; padding: 10px; border-radius: 10px; font-weight: 800; font-size: 12.5px; cursor: pointer; text-transform: uppercase; font-family: 'Inter', sans-serif; }
        .chat-sop-correo-wrap .chat-sop-campo-error { display: none; color: #b91c1c; font-size: 11px; font-weight: 700; margin: -6px 0 0 0; }
        /* 🔧 Ronda 314 (R7-C05): en celulares de pantalla baja (iPhone 8/SE con las barras de Safari, Android de 360×640) los datos del
           chat sin sesión no cabían y el botón "Continuar" quedaba cortado, sin cómo bajar. Ahora esa parte se desplaza con el dedo. En
           pantallas grandes no cambia nada (cabe sin desplazarse). */
        .chat-sop-correo-wrap { flex-shrink: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
        .chat-sop-correo-wrap > * { flex-shrink: 0; }
        .chat-sop-aviso-portal { margin: 12px 16px 0 16px; padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; font-size: 11px; font-weight: 600; color: #92400e; line-height: 1.4; flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
        .chat-sop-aviso-portal-btn { flex-shrink: 0; background: #92400e; color: #fff; border: none; padding: 7px 12px; border-radius: 8px; font-weight: 800; font-size: 10.5px; cursor: pointer; text-transform: uppercase; font-family: 'Inter', sans-serif; }
        /* Mientras se pide nombre/correo/WhatsApp, se oculta el hilo y la caja de escribir — no hay
           nada que mostrar ahí todavía, y mostrarlos igual solo apretujaba el formulario. */
        .chat-sop-zona-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
        .chat-sop-correo-wrap.activo ~ .chat-sop-zona-chat { display: none; }
        .chat-sop-turno { text-align: center; font-size: 11px; font-weight: 800; color: var(--primary, #1b5e20); background: var(--primary-light, #f0fdf4); border: 1px solid #bbf7d0; border-radius: 10px; padding: 6px; margin: 10px 16px 0 16px; flex-shrink: 0; }
        .chat-sop-hilo { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f9fafb; }
        .chat-sop-vacio { text-align: center; color: var(--text-muted, #6b7280); font-size: 12.5px; font-weight: 600; margin: auto 0; padding: 20px; line-height: 1.5; }
        .chat-sop-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 1.4; word-wrap: break-word; }
        .chat-sop-msg.cliente { align-self: flex-end; background: var(--primary, #1b5e20); color: #fff; border-bottom-right-radius: 4px; }
        .chat-sop-msg.admin { align-self: flex-start; background: #fff; color: var(--text-main, #111827); border: 1px solid var(--border-color, #e5e7eb); border-bottom-left-radius: 4px; }
        .chat-sop-msg img { max-width: 100%; border-radius: 10px; display: block; margin-top: 4px; cursor: pointer; }
        .chat-sop-msg .chat-sop-hora { display: block; font-size: 9.5px; opacity: 0.7; margin-top: 3px; font-weight: 700; }
        .chat-sop-cerrada-aviso { text-align: center; font-size: 11.5px; color: var(--text-muted, #6b7280); font-weight: 700; padding: 8px; background: #f3f4f6; border-radius: 10px; }
        .chat-sop-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-color, #e5e7eb); flex-shrink: 0; background: #fff; align-items: center; }
        .chat-sop-input-row input[type=text] { flex: 1; min-width: 0; padding: 11px 14px; border: 2px solid var(--border-color, #e5e7eb); border-radius: 22px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; outline: none; color: #111827; background: #fff; }
        .chat-sop-input-row input[type=text]:focus { border-color: var(--primary, #1b5e20); }
        .chat-sop-adjuntar { background: #f3f4f6; color: var(--text-muted, #6b7280); border: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
        .chat-sop-enviar { background: var(--primary, #1b5e20); color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; }
        .chat-sop-enviar:disabled { opacity: 0.5; cursor: not-allowed; }
        .chat-sop-adjunto-preview { display: none; align-items: center; gap: 8px; padding: 8px 16px; font-size: 11.5px; font-weight: 700; color: var(--text-muted, #6b7280); background: #f9fafb; border-top: 1px solid var(--border-color, #e5e7eb); flex-shrink: 0; }
        .chat-sop-adjunto-preview.activo { display: flex; }
        .chat-sop-adjunto-preview img { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; }
        .chat-sop-adjunto-quitar { margin-left: auto; background: #fee2e2; color: #b91c1c; border: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 11px; }
        .chat-sop-msg.sistema { align-self: center; background: #f3f4f6; color: var(--text-muted, #6b7280); border: 1px dashed var(--border-color, #e5e7eb); font-size: 11.5px; text-align: center; max-width: 92%; }
        .chat-sop-error-inline { display: none; margin: 0 16px 10px 16px; padding: 10px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: #b91c1c; line-height: 1.4; flex-shrink: 0; }
        .chat-sop-error-inline.activo { display: block; }
        /* ⏳ Ronda 259: reloj de espera (el mismo del checkout) cuando el cliente escribió muchos mensajes seguidos. */
        .chat-sop-espera { display: none; align-items: center; gap: 10px; margin: 0 16px 10px 16px; padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: #b45309; line-height: 1.4; flex-shrink: 0; }
        .chat-sop-espera.activo { display: flex; }
        .chat-sop-espera.listo { background: #ecfdf5; border-color: #a7f3d0; color: #166534; }
        .chat-sop-reloj { width: 30px; height: 30px; flex-shrink: 0; }
        .chat-sop-reloj svg { width: 100%; height: 100%; transform: rotate(-90deg); }
        .chat-sop-reloj .chat-sop-reloj-fondo { fill: none; stroke: #fde68a; stroke-width: 3; }
        .chat-sop-reloj .chat-sop-reloj-progreso { fill: none; stroke: #b45309; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
        /* 🔔 Avisito flotante (fuera del panel del chat, que puede estar cerrado) */
        /* 🔔 Burbujita fija: mismo tamaño y lugar que el botón del robot (60px, abajo:20px
           derecha:20px) — se apila justo encima de él en las páginas donde el robot existe, y
           baja a su mismo puesto en las páginas que no lo tienen (chatSopActualizarBurbuja lo
           detecta solo). Aparece en cuanto el cliente ya tiene una conversación (así no haya
           mensaje nuevo), para que siempre tenga cómo volver a abrirla sin reenviar el mensaje. */
        .chat-sop-burbuja { display: none; position: fixed; right: 20px; bottom: 88px; z-index: 1500; width: 60px; height: 60px; border-radius: 50%; background: var(--primary, #1b5e20); color: #fff; border: none; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.4); cursor: pointer; align-items: center; justify-content: center; font-size: 24px; transition: transform 0.2s; }
        .chat-sop-burbuja:hover { transform: scale(1.08); }
        .chat-sop-burbuja.activo { display: flex; }
        .chat-sop-burbuja.sola { bottom: 20px; }
        /* Mientras haya una respuesta sin ver, el botón "late" bien marcado (cambia de tamaño y
           tira un anillo rojo) para que la urgencia se note de verdad, no solo un detalle sutil. */
        @keyframes chatSopLatido {
            0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); transform: scale(1); }
            50% { box-shadow: 0 0 0 20px rgba(239,68,68,0); transform: scale(1.15); }
            100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); transform: scale(1); }
        }
        .chat-sop-burbuja.urgente { animation: chatSopLatido 1.1s infinite; }
        .chat-sop-burbuja-punto { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; display: none; }
        .chat-sop-burbuja-punto.activo { display: block; }
        /* 🔔 Avisito flotante: al lado IZQUIERDO de la burbujita (no debajo, para no montarse
           sobre el botón del robot que queda justo abajo). */
        /* 🎨 Ronda 312 (a pedido): el fondo gris de las ventanas del portal (antes blanco). */
        .chat-sop-toast { display: none; position: fixed; right: 92px; bottom: 92px; z-index: 1501; max-width: 270px; background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(229,231,235,0.92)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 16px; box-shadow: 0 15px 35px -8px rgba(0,0,0,0.35); padding: 14px; align-items: center; gap: 10px; cursor: pointer; font-family: 'Inter', sans-serif; border: 1.5px solid rgba(150,165,155,0.85); animation: chatSopPop 0.25s ease; }
        .chat-sop-toast.activo { display: flex; }
        /* 🔔 Ronda 311 (a pedido: "en las páginas sin robot la burbuja queda más abajo y la notificación más arriba"): en esas páginas
           el avisito baja junto con la burbujita (la misma clase "sola", la pone chatSopActualizarBurbuja). */
        .chat-sop-toast.sola { bottom: 24px; }
        .chat-sop-toast-icon { background: var(--primary, #1b5e20); color: #fff; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
        .chat-sop-toast-texto { min-width: 0; flex: 1; }
        .chat-sop-toast-texto strong { display: block; font-size: 12.5px; color: var(--text-main, #111827); margin-bottom: 2px; }
        .chat-sop-toast-texto span { display: block; font-size: 11.5px; color: var(--text-muted, #6b7280); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* 🎨 Ronda 312 (a pedido): la X de siempre (blanca con borde y sombra; rojo clarito al pasar el mouse o tocarla), un poco más chica que la del chat porque el aviso es pequeño. */
        .chat-sop-toast-cerrar { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.15); color: var(--text-muted, #6b7280); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0; transition: 0.2s; flex-shrink: 0; position: relative; }
        .chat-sop-toast-cerrar:hover, .chat-sop-toast-cerrar:active { background: #fee2e2; color: var(--error-red, #ef4444); }
        /* Ronda 311 (revisión final, T-21): además de lo que se ve, se puede tocar en un área un poco más grande (en el celular se tocaba el aviso por error) */
        .chat-sop-toast-cerrar::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
        @media (max-width: 768px) {
            .chat-sop-overlay { bottom: 85px; right: 15px; }
            .chat-sop-panel { width: calc(100vw - 30px); }
            .chat-sop-burbuja { bottom: 148px; right: 15px; width: 55px; height: 55px; font-size: 22px; }
            .chat-sop-burbuja.sola { bottom: 85px; }
            /* Al lado izquierdo del botón, en la misma línea — no arriba ni en una franja aparte. */
            .chat-sop-toast { right: 78px; left: 12px; bottom: 148px; max-width: none; }
            .chat-sop-toast.sola { bottom: 85px; } /* Ronda 311: a la altura de la burbujita sola */
        }
        /* 🔒 Mientras la ventana del robot está abierta, la burbujita y el avisito del chat se
           esconden — antes se montaban encima de la tarjeta del robot. */
        body:has(.chatbot-window.active) .chat-sop-burbuja,
        body:has(.chatbot-window.active) .chat-sop-toast { display: none !important; }
    
        /* ✍️ Ronda 321 (a pedido): "Soporte está escribiendo…" — burbujita con 3 puntos que saltan, como en WhatsApp. */
        .chat-sop-msg.chat-sop-escribiendo { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; animation: chatSopPop .2s ease-out both; }
        .chat-sop-escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; display: block; animation: chatSopPunto 1.2s infinite ease-in-out; }
        .chat-sop-escribiendo span:nth-child(2) { animation-delay: .15s; }
        .chat-sop-escribiendo span:nth-child(3) { animation-delay: .3s; }
        @keyframes chatSopPunto { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
        .chat-sop-header-sub.chat-sop-sub-escribiendo { opacity: 1; font-style: italic; }
        @media (prefers-reduced-motion: reduce) { .chat-sop-escribiendo span { animation: none; opacity: .7; } }