/**
 * SERVICIOS PROYECTO - CSS MÓVIL v5.0
 * - Header BLANCO con badge pequeño en UNA línea
 * - Opciones en POPUP (controlado por JS con CTA)
 * - Mensajes ancho completo
 * - Chat oscuro
 */

@media (max-width: 768px) {
    
    /* BASE */
    body.sp-body {
        margin: 0 !important;
        padding: 0 !important;
        background: #0d0d12 !important;
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    
    .sp-main, .sp-layout {
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        background: #0d0d12 !important;
    }
    
    /* ========== HEADER BLANCO ========== */
    .sp-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e0e0e0 !important;
        padding: 0 12px !important;
        height: 52px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    .sp-header-inner {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        gap: 10px !important;
    }
    
    .sp-logo { flex-shrink: 0 !important; }
    .sp-logo img { height: 26px !important; width: auto !important; }
    
    .sp-header-center {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Badge pequeño EN UNA LÍNEA */
    .sp-header-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        background: linear-gradient(135deg, #90439e 0%, #702f7a 100%) !important;
        color: white !important;
        padding: 6px 12px !important;
        border-radius: 16px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    
    .sp-header-badge i { font-size: 11px !important; }
    .sp-header-title { display: none !important; }
    
    .sp-header-close {
        width: 34px !important;
        height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f0f0f0 !important;
        border: none !important;
        border-radius: 50% !important;
        color: #666 !important;
        font-size: 16px !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
    }
    
    /* OCULTAR SIDEBARS */
    .sp-sidebar, .sp-sidebar-left, .sp-sidebar-right { display: none !important; }
    
    /* CHAT SECTION */
    /* CHAT SECTION - ver definición más abajo con margin-bottom para input fixed */
    
    /* MENSAJES - SIN MÁRGENES PERDIDOS */
    .sp-chat-container {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 10px 8px !important; /* ✅ Menos padding lateral */
        -webkit-overflow-scrolling: touch !important;
        background: #0d0d12 !important;
    }
    
    .sp-chat-messages {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .sp-message {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .sp-message-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
    }
    
    /* Mensaje del usuario - morado */
    .sp-message.user .sp-message-content,
    .sp-message-user .sp-message-content,
    .sp-message.user .sp-message-bubble,
    .sp-message-user .sp-message-bubble {
        background: linear-gradient(135deg, #90439e 0%, #6d2d78 100%) !important;
        color: white !important;
    }
    
    /* Mensaje del asistente - BLANCO con texto NEGRO */
    .sp-message.assistant .sp-message-content,
    .sp-message-assistant .sp-message-content,
    .sp-message.assistant .sp-message-bubble,
    .sp-message-assistant .sp-message-bubble {
        background: #ffffff !important;
        color: #1a1a1a !important;
        border: none !important;
    }
    
    .sp-message-text {
        color: inherit !important;
    }
    
    .sp-message.assistant .sp-message-text,
    .sp-message-assistant .sp-message-text {
        color: #1a1a1a !important;
    }
    
    .sp-message-time {
        font-size: 10px !important;
        color: #555 !important;
        margin-top: 6px !important;
    }
    
    /* ========== BOTÓN CTA PARA VER OPCIONES ========== */
    .sp-options-cta {
        display: flex !important;
        justify-content: center !important;
        margin: 16px 0 !important;
        padding: 0 8px !important;
    }
    
    .sp-options-cta-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 16px 28px !important;
        background: linear-gradient(135deg, #90439e 0%, #6d2d78 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 30px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-shadow: 0 4px 20px rgba(144, 67, 158, 0.5) !important;
        animation: pulseGlow 2s infinite !important;
    }
    
    .sp-options-cta-btn:active {
        transform: scale(0.96) !important;
    }
    
    @keyframes pulseGlow {
        0%, 100% { box-shadow: 0 4px 20px rgba(144, 67, 158, 0.5); }
        50% { box-shadow: 0 6px 30px rgba(144, 67, 158, 0.7); }
    }
    
    /* INPUT AREA */
    .sp-input-area {
        background: #16161e !important;
        border-top: 1px solid #252530 !important;
        padding: 10px 12px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 600 !important;
        min-height: 70px !important; /* ✅ Altura mínima */
    }
    
    /* Ajustar chat section para dejar espacio al input fixed */
    .sp-chat-section {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 52px !important;
        margin-bottom: 75px !important; /* ✅ Más espacio para input */
        height: calc(100vh - 127px) !important;
        height: calc(100dvh - 127px) !important;
        background: #0d0d12 !important;
        overflow: hidden !important;
    }
    
    .sp-input-row {
        display: flex !important;
        align-items: center !important; /* ✅ Centrar verticalmente */
        gap: 8px !important;
    }
    
    .sp-input-field { flex: 1 !important; }
    
    .sp-input, #sp-input {
        width: 100% !important;
        min-height: 46px !important;
        max-height: 100px !important;
        padding: 12px 16px !important;
        background: #1e1e28 !important;
        border: 1px solid #2a2a38 !important;
        border-radius: 23px !important;
        color: #e8e8ed !important;
        font-size: 16px !important;
        resize: none !important;
        outline: none !important;
        line-height: 1.4 !important;
    }
    
    .sp-input:focus, #sp-input:focus { border-color: #90439e !important; }
    .sp-input::placeholder, #sp-input::placeholder { color: #666 !important; }
    
    .sp-btn-attach, .sp-btn-send {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: none !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        font-size: 18px !important;
    }
    
    .sp-btn-attach {
        background: #1e1e28 !important;
        color: #888 !important;
        border: 1px solid #2a2a38 !important;
    }
    
    .sp-btn-send {
        background: #90439e !important;
        color: white !important;
    }
    
    .sp-btn-send:disabled { opacity: 0.4 !important; }
    .sp-input-help { display: none !important; }
    
    /* ========== OPCIONES - POPUP MODAL ========== */
    .sp-options-wrapper {
        position: fixed !important;
        top: 52px !important; /* Debajo del header */
        left: 0 !important;
        right: 0 !important;
        bottom: 75px !important; /* ✅ Encima del input (más espacio) */
        background: rgba(0, 0, 0, 0.85) !important;
        z-index: 500 !important;
        display: none !important;
        align-items: flex-end !important;
        justify-content: center !important;
        backdrop-filter: blur(4px) !important;
    }
    
    .sp-options-wrapper.sp-popup-visible {
        display: flex !important;
    }
    
    .sp-options-container {
        background: #1a1a24 !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        width: 100% !important;
        max-height: 100% !important; /* ✅ Usar todo el espacio disponible */
        overflow-y: auto !important;
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        animation: slideUpModal 0.25s ease-out !important;
    }
    
    /* Handle del popup */
    .sp-options-container::before {
        content: '' !important;
        display: block !important;
        width: 36px !important;
        height: 4px !important;
        background: #3a3a48 !important;
        border-radius: 2px !important;
        margin: 0 auto 10px auto !important;
    }
    
    .sp-option-btn {
        width: 100% !important;
        padding: 12px 16px !important; /* ✅ Más compacto */
        background: #252530 !important;
        border: 1px solid #353545 !important;
        border-radius: 10px !important;
        color: #e8e8ed !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-align: center !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
    }
    
    .sp-option-btn:active {
        background: #90439e !important;
        border-color: #90439e !important;
        transform: scale(0.98) !important;
    }
    
    .sp-multi-btn.selected {
        background: rgba(144, 67, 158, 0.25) !important;
        border-color: #90439e !important;
    }
    
    .sp-continue-btn {
        width: 100% !important;
        padding: 16px !important;
        background: linear-gradient(135deg, #90439e 0%, #6d2d78 100%) !important;
        border: none !important;
        border-radius: 14px !important;
        color: white !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        margin-top: 8px !important;
    }
    
    .sp-continue-btn:disabled { opacity: 0.5 !important; }
    
    .sp-multi-help {
        font-size: 12px !important;
        color: #666 !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }
    
    /* GALERÍA */
    .sp-gallery-wrapper {
        position: fixed !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 75px !important; /* ✅ Encima del input (más espacio) */
        background: rgba(0, 0, 0, 0.85) !important;
        z-index: 500 !important;
        display: none !important;
        align-items: flex-end !important;
        backdrop-filter: blur(4px) !important;
    }
    
    .sp-gallery-wrapper[style*="block"] { display: flex !important; }
    
    .sp-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        background: #1a1a24 !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        width: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }
    
    .sp-gallery-title {
        grid-column: 1 / -1 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #e8e8ed !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }
    
    .sp-gallery-item, .sp-fachada-item {
        aspect-ratio: 1 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        cursor: pointer !important;
        border: 2px solid transparent !important;
    }
    
    .sp-gallery-item.selected, .sp-fachada-item.selected { border-color: #90439e !important; }
    .sp-gallery-item img, .sp-fachada-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .sp-gallery-actions { grid-column: 1 / -1 !important; margin-top: 12px !important; }
    
    /* COLORES */
    .sp-color-options-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
        padding: 8px 0 !important;
    }
    
    .sp-color-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        background: #252530 !important;
        border: 2px solid #353545 !important;
        border-radius: 25px !important;
        color: #e8e8ed !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }
    
    .sp-color-btn.selected {
        border-color: #90439e !important;
        background: rgba(144, 67, 158, 0.2) !important;
    }
    
    .sp-color-circle {
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255,255,255,0.25) !important;
    }
    
    /* MODALES */
    .sp-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1000 !important;
        display: none !important;
    }
    
    .sp-modal.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }
    
    .sp-modal-backdrop {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.9) !important;
    }
    
    .sp-modal-dialog {
        position: relative !important;
        width: 100% !important;
        max-width: 380px !important;
        max-height: 85vh !important;
        background: #1a1a24 !important;
        border-radius: 20px !important;
        padding: 24px 20px !important;
        overflow-y: auto !important;
        border: 1px solid #2a2a38 !important;
    }
    
    .sp-modal-header { text-align: center !important; margin-bottom: 20px !important; }
    .sp-modal-header h2 { font-size: 18px !important; color: #e8e8ed !important; margin: 14px 0 6px 0 !important; }
    .sp-modal-header p { font-size: 13px !important; color: #888 !important; margin: 0 !important; }
    
    .sp-modal-icon {
        width: 56px !important;
        height: 56px !important;
        margin: 0 auto !important;
        background: linear-gradient(135deg, #90439e 0%, #6d2d78 100%) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 24px !important;
    }
    
    .sp-modal-close {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #252530 !important;
        border: none !important;
        border-radius: 50% !important;
        color: #888 !important;
        cursor: pointer !important;
    }
    
    .sp-upload-zone {
        border: 2px dashed #353545 !important;
        border-radius: 14px !important;
        padding: 32px 20px !important;
        text-align: center !important;
        cursor: pointer !important;
        background: #1e1e28 !important;
    }
    
    .sp-upload-placeholder i { font-size: 40px !important; color: #90439e !important; margin-bottom: 12px !important; display: block !important; }
    .sp-upload-placeholder p { color: #e8e8ed !important; margin: 0 0 4px 0 !important; }
    .sp-upload-placeholder span, .sp-upload-placeholder small { color: #666 !important; font-size: 12px !important; }
    
    .sp-form-group { margin-bottom: 16px !important; }
    .sp-form-group label { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; color: #888 !important; margin-bottom: 8px !important; }
    
    .sp-form-group input[type="text"],
    .sp-form-group input[type="email"],
    .sp-form-group input[type="tel"] {
        width: 100% !important;
        padding: 14px 16px !important;
        background: #1e1e28 !important;
        border: 1px solid #353545 !important;
        border-radius: 12px !important;
        color: #e8e8ed !important;
        font-size: 16px !important;
        outline: none !important;
    }
    
    .sp-form-group input:focus { border-color: #90439e !important; }
    
    .sp-form-checkbox { display: flex !important; align-items: flex-start !important; gap: 10px !important; }
    .sp-form-checkbox input[type="checkbox"] { width: 18px !important; height: 18px !important; accent-color: #90439e !important; }
    .sp-form-checkbox label { margin: 0 !important; font-size: 12px !important; color: #888 !important; }
    .sp-form-checkbox label a { color: #90439e !important; }
    
    .sp-modal-footer { display: flex !important; gap: 10px !important; margin-top: 20px !important; }
    
    .sp-btn {
        padding: 14px 20px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        border: none !important;
    }
    
    .sp-btn-primary {
        background: linear-gradient(135deg, #90439e 0%, #6d2d78 100%) !important;
        color: white !important;
        flex: 1 !important;
    }
    
    .sp-btn-secondary {
        background: #252530 !important;
        color: #e8e8ed !important;
        border: 1px solid #353545 !important;
    }
    
    .sp-btn-block { width: 100% !important; }
    
    .sp-success-info { background: #1e1e28 !important; border-radius: 12px !important; padding: 14px !important; }
    .sp-success-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 0 !important; color: #e8e8ed !important; font-size: 13px !important; }
    .sp-success-item:not(:last-child) { border-bottom: 1px solid #2a2a38 !important; }
    .sp-success-item i { color: #10b981 !important; }
    
    /* TYPING */
    .sp-typing-indicator {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 14px 18px !important;
        background: #1a1a24 !important;
        border-radius: 14px !important;
        border: 1px solid #2a2a38 !important;
    }
    
    .sp-typing-dot {
        width: 8px !important;
        height: 8px !important;
        background: #90439e !important;
        border-radius: 50% !important;
        animation: typingBounce 1.4s ease-in-out infinite !important;
    }
    
    .sp-typing-dot:nth-child(2) { animation-delay: 0.2s !important; }
    .sp-typing-dot:nth-child(3) { animation-delay: 0.4s !important; }
    
    /* LOADING */
    .sp-loading {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(10, 10, 15, 0.95) !important;
        display: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2000 !important;
        gap: 20px !important;
    }
    
    .sp-loading[style*="block"], .sp-loading.active { display: flex !important; }
    
    .sp-loading-spinner {
        width: 48px !important;
        height: 48px !important;
        border: 3px solid #2a2a38 !important;
        border-top-color: #90439e !important;
        border-radius: 50% !important;
        animation: spin 1s linear infinite !important;
    }
    
    .sp-loading p { color: #888 !important; }
    
    /* UPLOAD FACHADA */
    .sp-upload-fachada-prompt {
        background: #1a1a24 !important;
        border-radius: 14px !important;
        padding: 20px !important;
        margin: 8px 0 !important;
        border: 1px solid #2a2a38 !important;
        width: 100% !important;
    }
    
    .sp-upload-fachada-content { text-align: center !important; }
    .sp-upload-fachada-icon { font-size: 36px !important; color: #90439e !important; margin-bottom: 12px !important; }
    .sp-upload-fachada-text p { color: #e8e8ed !important; margin: 0 0 4px 0 !important; }
    .sp-upload-fachada-text small { color: #666 !important; }
    .sp-upload-fachada-buttons { display: flex !important; gap: 10px !important; margin-top: 16px !important; }
    
    .sp-cta-btn {
        flex: 1 !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    .sp-cta-primary {
        background: linear-gradient(135deg, #90439e 0%, #6d2d78 100%) !important;
        color: white !important;
    }
    
    .sp-cta-secondary {
        background: #252530 !important;
        color: #e8e8ed !important;
        border: 1px solid #353545 !important;
    }
    
    /* ANIMACIONES */
    @keyframes slideUpModal {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes typingBounce {
        0%, 60%, 100% { transform: translateY(0); }
        30% { transform: translateY(-6px); }
    }
    
    @keyframes spin { to { transform: rotate(360deg); } }
    
    /* SCROLLBARS */
    .sp-chat-container::-webkit-scrollbar { width: 3px !important; }
    .sp-chat-container::-webkit-scrollbar-thumb { background: #2a2a38 !important; border-radius: 2px !important; }
}

@media (max-width: 768px) {
    /* ========== FORZAR ESTILOS DE MENSAJES ========== */
    .sp-message-bubble {
        background: inherit !important;
        color: inherit !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    /* Asistente: BLANCO con texto NEGRO */
    .sp-message.assistant .sp-message-bubble,
    .sp-message-assistant .sp-message-bubble,
    [class*="assistant"] .sp-message-bubble {
        background: #ffffff !important;
        color: #1a1a1a !important;
    }
    
    /* Usuario: Morado */
    .sp-message.user .sp-message-bubble,
    .sp-message-user .sp-message-bubble,
    [class*="user"] .sp-message-bubble {
        background: linear-gradient(135deg, #90439e 0%, #6d2d78 100%) !important;
        color: white !important;
    }
    
    /* Avatar del asistente - más pequeño */
    .sp-message-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
        margin-right: 8px !important;
    }
    
    /* Contenedor de mensaje - usar todo el ancho */
    .sp-chat-messages .sp-message {
        display: flex !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    
    .sp-chat-messages .sp-message .sp-message-content {
        flex: 1 !important;
        max-width: calc(100% - 40px) !important;
    }
    
    .sp-chat-messages .sp-message.user .sp-message-content {
        max-width: 100% !important;
    }
}