:root {
    /* Paleta "Light Breeze" - Limpia, luminosa y basada en el logo */
    --bg-p: #f0f2f5;       /* Fondo Principal: Gris muy suave (tipo nube) */
    --bg-s: #ffffff;       /* Superficies: Blanco puro (Tarjetas/Sidebar) */
    --bg-h: #e4e6eb;       /* Highlights: Gris claro para hovers y bordes */
    --txt-p: #050505;      /* Texto: Casi negro para máxima legibilidad */
    --txt-s: #65676b;      /* Texto Secundario: Gris medio */
    --azul: #2d88ff;       /* Acento: Azul original del Logo */
}

/* --- MODO OSCURO --- */
body.dark-mode {
    --bg-p: #18191a;
    --bg-s: #242526;
    --bg-h: #3a3b3c;
    --txt-p: #e4e6eb;
    --txt-s: #b0b3b8;
}

body {
    font-family: 'Segoe UI', Tahoma, Helvetica, Arial, sans-serif;
    background-color: var(--bg-p);
    color: var(--txt-p);
    margin: 0;
    display: flex;
}

/* --- LOGO ESTILO SOLICITADO --- */
.logo-container {
    background: rgb(255 235 235);
    padding: 20px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    width: auto;
    height: 100px;    
}

.main-logo {
    width: 100%;
    height: 100%;
    /*border-radius: 50%;*/
}



/* --- SIDEBAR MÓVIL --- */
.sidebar-mobile {
    width: 320px;
    height: auto;
    padding: 15px;
    position: fixed;
    background: none;
    border-right: none;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.171);
    overflow-y: auto;
    z-index: 100;
}

.sidebar-mobile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(19, 7, 73);
    background-size: cover;
    filter: blur(0) brightness(0.9);
    z-index: -1;
}

.sidebar-mobile > * {
    position: static;
    z-index: 1;
}

/* Estilo del scrollbar para la barra de navegación móvil */
.sidebar-mobile::-webkit-scrollbar { width: 8px; }
.sidebar-mobile::-webkit-scrollbar-track { background: var(--bg-p); }
.sidebar-mobile::-webkit-scrollbar-thumb { background: var(--bg-h); border-radius: 4px; }
.sidebar-mobile::-webkit-scrollbar-thumb:hover { background: var(--txt-s); }

/* --- SIDEBAR ESCRITORIO --- */
.sidebar-desktop {
    width: 100%;
    height: auto;
    padding: 15px;
    position: relative;
    background: none;
    border-right: none;
    box-shadow: none;
    overflow-y: visible;
    z-index: 100;
}

.sidebar-desktop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./img/logo2.jpeg') no-repeat center;
    background-size: cover;
    filter: blur(10px) brightness(0.9);
    z-index: -1;
}

.sidebar-desktop > * {
    position: static;
    z-index: 1;
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-direction: column;
    padding-top: 10px;
}

.brand-name { font-size: 20px; 
    font-weight: bold; 
    color: #ffffff; }

.search-box {
    background: #ffffffed;
    padding: 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.search-box input {
    background: transparent;
    border: none;
    color: #000000;
    margin-left: 10px;
    outline: none;
    width: 100%;
}

.nav-option {
    padding: 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s;
    font-weight: 600;
}

.nav-option:hover, .nav-option.active { 
    background: var(--bg-h); 
    color: var(--azul);
    
 }

/* --- SUBMENU LOCALIDADES --- */
/* Ajustes para lista horizontal en main-content */
#lista-localidades, #lista-localidades-web {
    display: flex;
    gap: 10px;
    overflow: visible;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 20px;
    align-items: flex-start;
}

#lista-localidades .nav-option, #lista-localidades-web .nav-option {
    background: var(--bg-h);
    width: auto;
    white-space: nowrap;
}

.nav-item-wrapper {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    bottom: auto;
    width: 280px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-s);
    border: 1px solid var(--bg-h);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 10px;
    z-index: 2000;
}

.sector-wrapper {
    position: relative;
}

.sector-btn {
    width: 100%;
    background: var(--bg-h);
    color: var(--txt-p);
    border: none;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 12px;
    transition: background 0.2s;
}

.sector-btn:hover { background: #4e4f50; }

.sector-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    bottom: auto;
    width: 250px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-s);
    border: 1px solid var(--bg-h);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 10px;
    z-index: 2100;
}

.sub-item {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--txt-p);
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
}

.sub-item:hover {
    background: var(--bg-h);
    color: var(--azul);
}

.submenu-header-mobile {
    display: none;
}

.sector-header-mobile {
    display: none;
}

/* --- GRID Y CARDS --- */
.main-content { 
    margin: 0 auto; /* Centrado y sin margen izquierdo */
    padding: 20px; 
    width: 100%; 
    max-width: 1200px; /* Ancho máximo para pantallas grandes */
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.product-card {
    background: var(--bg-s);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.2s;
    border: 1px solid var(--bg-h);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
}

.product-card:hover { transform: translateY(-5px); }

.card-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

.card-info { padding: 12px; }

.price { font-size: 18px; font-weight: bold; display: block; }

/* --- SKELETON SCREEN --- */
.skeleton-card {
    height: 300px;
    background: linear-gradient(90deg, #e4e6eb 25%, #f0f2f5 50%, #e4e6eb 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- UTILIDADES DE VISIBILIDAD --- */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* --- HEADER ESCRITORIO --- */
.desktop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 1px;
    padding-bottom: 1px;
}


/* --- MODAL --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
}

.modal-content {
    background: var(--bg-s);
    margin: 5% auto;
    width: 80%;
    max-width: 900px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.modal-body { display: flex; }

.modal-left { flex: 1.5; background: #000; }
.modal-left img { width: 100%; height: 100%; object-fit: contain; }

.modal-right { flex: 1; padding: 20px; }

.seller-card {
    background: var(--bg-h);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    cursor: pointer;
}

.seller-card img { width: 40px; height: 40px; border-radius: 50%; }

.btn-primary { background: var(--azul); color: white; border: none; padding: 10px; width: 100%; border-radius: 6px; font-weight: bold; cursor: pointer; }

.btn-secondary { background: var(--bg-h); color: white; border: none; padding: 10px; width: 100%; border-radius: 6px; margin-top: 10px; cursor: pointer; }

.error-msg { display: none; text-align: center; padding: 50px; font-size: 20px; color: var(--txt-s); }

.cover-photo {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background: var(--bg-s);
    border-radius: 8px;
    color: var(--txt-s);
}

footer p {
    margin: 0;
}

 /* AJUSTES VERSIÓN MÓVIL - ESTILO FACEBOOK MARKETPLACE */
        @media (max-width: 768px) {
            body {
                display: flex;
                flex-direction: column;
                background-color: var(--bg-p);
                margin: 0;
            }

            .mobile-only { display: block; }
            .desktop-only { display: none; }

            .cover-photo { 
            width: 100%; 
            height: 250px; 
            background: linear-gradient(to bottom, #444, #222);
            object-fit: cover; 
            border-bottom: 1px solid #333;
        }

            /* Sidebar transformado en Header Superior */
            .sidebar-mobile {
                position: sticky;
                top: 0;
                width: 100%;
                height: auto;
                max-height: 50vh;
                overflow-y: auto;
                padding: 0;
                background: none;
                background-image: none;
                border-right: none;
                /*border-bottom: 1px solid var(--bg-h);*/
                z-index: 1000;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .brand-section {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 10px;
                transition: all 0.3s ease;
            }

            .brand-name { font-size: 1.5rem; 
                font-weight: bold; 
                color: #ffffff; 
                line-height: 1; }

            #section-title, #section-title .brand-name {
                color: #000000 !important;
            }
            
            .logo-container {
                background: rgb(241, 239, 239);
                border-radius: 50%;
                display: inline-flex;
                justify-content: center;
                box-shadow: 0 0 15px rgba(45, 136, 255, 0.137);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                width: 70px;
                height: 70px;
                padding: 10px;
            }

            .logo-container img { 
                border-radius: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            /* Buscador estilo pill */
            .search-box {
                background-color: var(--bg-h);
                border-radius: 50px;
                padding: 8px 15px;
                width: 100%;
                box-sizing: border-box;
                margin: 0;
            }
            .search-box input { font-size: 16px; }

            /* Ocultar elementos de escritorio */
            .sidebar-mobile h3, .sidebar-mobile hr, .sidebar-mobile > .nav-option { display: none; }

            /* Filtros horizontales (Chips) */
            #lista-localidades {
                display: flex;
                flex-direction: row;
                overflow-x: auto;
                gap: 8px;
                padding-bottom: 5px;
                scrollbar-width: none;
                flex-wrap: nowrap;
            }
            #lista-localidades::-webkit-scrollbar { display: none; }

            #lista-localidades .nav-option {
                background-color: var(--bg-h);
                color: var(--txt-p);
                padding: 8px 16px;
                border-radius: 20px;
                font-size: 14px;
                font-weight: 600;
                white-space: nowrap;
                margin: 0;
                flex-shrink: 0;
                width: auto;
            }
            
            #lista-localidades .nav-item-wrapper {
                flex-shrink: 0;
            }

            /* Contenido Principal */
            .main-content {
                margin-left: 0;
                width: 100%;
                padding: 10px;
                box-sizing: border-box;
            }

            /* Grilla de 2 columnas */
            .product-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }

            .product-card {
                background-color: var(--bg-s);
                border-radius: 6px;
            }

            .card-img {
                aspect-ratio: 1 / 1;
                object-fit: cover;
            }
            
            .card-info { padding: 8px; }
            .card-info p { font-size: 14px; margin: 4px 0; }
            .price { font-size: 16px; }

            /* Ajuste Submenú Flotante en Móvil */
            .submenu {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                height: fit-content;
                width: 85%;
                max-width: 320px;
                max-height: 60vh;
                overflow-y: auto;
                box-shadow: 0 0 25px rgba(0,0,0,0.5);
                border: 1px solid var(--bg-h);
                z-index: 2000;
            }

            .sector-content {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                height: fit-content;
                width: 80%;
                max-width: 280px;
                max-height: 50vh;
                overflow-y: auto;
                box-shadow: 0 0 25px rgba(0,0,0,0.6);
                z-index: 2200;
            }

            .submenu-header-mobile {
                display: none;
            }

            .sector-header-mobile {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 15px;
                margin: -10px -10px 10px -10px;
                width: calc(100% + 20px);
                box-sizing: border-box;
                border-radius: 8px 8px 0 0;
                border-bottom: 1px solid var(--bg-h);
                color: var(--azul);
                font-weight: bold;
                cursor: pointer;
                position: sticky;
                top: 0;
                background-color: var(--bg-s);
                z-index: 100;
            }

            .cover-photo {
                height: auto;
            }
        }

        /* --- LOGO ESTILO SOLICITADO --- */
        @media (min-width: 769px) {
        .logo-container-web {
            background: rgb(241, 239, 239);
            padding: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 15px rgba(45, 136, 255, 0.137);
            transition: transform 0.3s ease;
            width: 150px;
            height: 150px;
            box-sizing: border-box;
        }

        .main-logo-web {
                    width: 75%;
        height: 100%;
        object-fit: contain;
        border-radius: 1%;
        } 
        
        /* Ajuste para que los sectores en versión web se desplieguen flotantes */
        @media (min-width: 769px) {
            body {
                background-color: transparent;
            }

            body::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url('./img/FONDO KK.JPG');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                filter: blur(9px);
                z-index: -1;
                transform: scale(1.0); /* Escala leve para evitar bordes blancos por el desenfoque */
            }

            .desktop-only .sector-wrapper {
                position: relative;
            }

            .desktop-only .sector-content {
                position: absolute;
                top: 0;
                left: 100%;
                width: 280px;
                background: var(--bg-s, #ffffff);
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                border-radius: 8px;
                padding: 10px;
                z-index: 1000;
                margin-left: 10px;
                border: 1px solid var(--bg-h, #e4e6eb);
            }

            .desktop-only .submenu {
                overflow: visible !important;
            }
        }
        
        }

        /* ========================================
           ESTILOS PARA BOTÓN FLOTANTE Y CHAT BOT
           ======================================== */

        /* Botón Flotante */
        .guia-flotante {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 999;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
        }

        .btn-guia-flotante {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 25%, #ffd93d 50%, #6bcf7f 75%, #4d96ff 100%);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 24px;
            box-shadow: 0 4px 12px rgba(45, 136, 255, 0.4), 0 0 20px rgba(255, 107, 107, 0.3);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            background-size: 200% 200%;
            animation: gradientShift 3s ease infinite;
        }

        /* Animación de cambio de gradiente */
        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .guia-flotante:hover .btn-guia-flotante,
        .guia-flotante:hover .guia-texto {
            transform: scale(1.15);
            box-shadow: 0 8px 20px rgba(45, 136, 255, 0.6), 0 0 30px rgba(255, 107, 107, 0.5);
        }

        .guia-flotante:active .btn-guia-flotante,
        .guia-flotante:active .guia-texto {
            transform: scale(0.95);
        }

        .guia-texto {
            padding: 10px 20px;
            border-radius: 25px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 25%, #ffd93d 50%, #6bcf7f 75%, #4d96ff 100%);
            color: white;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 4px 12px rgba(45, 136, 255, 0.4), 0 0 20px rgba(255, 107, 107, 0.3);
            transition: all 0.3s ease;
            background-size: 200% 200%;
            animation: gradientShift 3s ease infinite;
            white-space: nowrap;
        }

        /* Animación de zoom continuo para el icono robot */
        @keyframes robotZoom {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
        }

        .robot-icon {
            animation: robotZoom 1.5s ease-in-out infinite;
            display: inline-block;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
            width: 50px;
            height: 50px;
            object-fit: contain;
        }

        /* Overlay Modal */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 998;
        }

        .modal-overlay.active {
            display: block;
        }

        /* Modal Principal */
        .modal-guia {
            display: none;
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 400px;
            max-height: 70vh;
            background: var(--bg-s);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            z-index: 999;
            overflow-y: auto;
            overflow-x: hidden;
            flex-direction: column;
            animation: slideUp 0.3s ease;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }

        /* Scrollbar del modal */
        .modal-guia::-webkit-scrollbar {
            width: 6px;
        }

        .modal-guia::-webkit-scrollbar-track {
            background: transparent;
        }

        .modal-guia::-webkit-scrollbar-thumb {
            background: var(--bg-h);
            border-radius: 3px;
        }

        .modal-guia::-webkit-scrollbar-thumb:hover {
            background: var(--txt-s);
        }

        .modal-guia.active {
            display: flex;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Header Modal */
        .modal-guia-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid var(--bg-h);
            background: linear-gradient(135deg, var(--azul) 0%, #1e63d9 100%);
            color: white;
        }

        .header-info {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .modal-guia-header h2 {
            margin: 0;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .header-status {
            margin: 0;
            font-size: 11px;
            opacity: 0.9;
            color: #e0f2ff;
        }

        .btn-cerrar-modal {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .btn-cerrar-modal:hover {
            transform: rotate(90deg);
        }

        /* Chat Content */
        .chat-content {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .api-key-section {
            padding: 15px;
            background: #fff3cd;
            border-bottom: 1px solid #ffc107;
            font-size: 12px;
            line-height: 1.5;
            overflow-y: auto;
            flex-shrink: 0;
        }

        .api-key-section p {
            margin: 0 0 10px 0;
            color: #856404;
            font-weight: 500;
        }

        .api-key-section ol {
            margin: 0 0 10px 0;
            padding-left: 20px;
            color: #856404;
        }

        .api-key-section li {
            margin-bottom: 5px;
            font-size: 11px;
        }

        .api-key-section a {
            color: #0c5460;
            text-decoration: none;
        }

        .api-key-input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ffc107;
            border-radius: 4px;
            font-size: 12px;
            margin-bottom: 10px;
            box-sizing: border-box;
            font-family: monospace;
        }

        .btn-guardar-api {
            width: 100%;
            padding: 8px;
            background: #ffc107;
            color: #856404;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            font-size: 12px;
            transition: all 0.3s;
        }

        .btn-guardar-api:hover {
            background: #ffb300;
        }

        /* Chat Messages */
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: var(--bg-p);
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            min-height: 0;
        }

        /* Scrollbar personalizado */
        .chat-messages::-webkit-scrollbar {
            width: 6px;
        }

        .chat-messages::-webkit-scrollbar-track {
            background: transparent;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: var(--bg-h);
            border-radius: 3px;
        }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: var(--txt-s);
        }

        .message {
            display: flex;
            gap: 10px;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message i {
            font-size: 14px;
            min-width: 20px;
            padding-top: 3px;
            flex-shrink: 0;
        }

        .bot-message i {
            color: var(--azul);
        }

        .user-message i {
            color: #65676b;
        }

        .message-content {
            flex: 1;
            padding: 10px 12px;
            border-radius: 8px;
            word-wrap: break-word;
            font-size: 13px;
            line-height: 1.5;
        }

        .bot-message .message-content {
            background: var(--bg-h);
            color: var(--txt-p);
        }

        .user-message .message-content {
            background: var(--azul);
            color: white;
            text-align: right;
        }

        .message-content p {
            margin: 0 0 8px 0;
        }

        .message-content p:last-child {
            margin: 0;
        }

        .message-content ul {
            margin: 10px 0;
            padding-left: 20px;
        }

        .message-content li {
            margin-bottom: 4px;
        }

        .message-content strong {
            font-weight: 600;
        }

        .typing-indicator {
            display: flex;
            gap: 4px;
            align-items: center;
            padding: 10px 12px;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--txt-s);
            animation: typing 1.4s infinite;
        }

        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typing {
            0%, 60%, 100% {
                opacity: 0.5;
            }
            30% {
                opacity: 1;
            }
        }

        /* Chat Input Area */
        .chat-input-area {
            display: flex;
            gap: 8px;
            padding: 12px;
            border-top: 1px solid var(--bg-h);
            background: var(--bg-s);
            flex-shrink: 0;
        }

        .chat-input {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid var(--bg-h);
            border-radius: 6px;
            font-size: 13px;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s;
        }

        .chat-input:focus {
            border-color: var(--azul);
        }

        .btn-enviar-chat {
            width: 38px;
            height: 38px;
            border: none;
            border-radius: 6px;
            background: var(--azul);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .btn-enviar-chat:hover {
            background: #1e63d9;
            transform: scale(1.05);
        }

        .btn-enviar-chat:disabled {
            background: var(--bg-h);
            cursor: not-allowed;
            opacity: 0.5;
        }

        /* Chat Footer */
        .chat-footer-note {
            text-align: center;
            font-size: 10px;
            color: var(--txt-s);
            margin: 0;
            padding: 8px;
            border-top: 1px solid var(--bg-h);
            background: var(--bg-p);
        }

        /* Modo Oscuro */
        body.dark-mode .message-content {
            word-break: break-word;
        }

        body.dark-mode .bot-message .message-content {
            background: #3a3b3c;
            color: #e4e6eb;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .guia-flotante {
                bottom: 20px;
                right: 20px;
            }

            .btn-guia-flotante {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }

            .modal-guia {
                width: calc(100vw - 40px);
                right: 20px;
                bottom: 80px;
                height: 50vh;
            }
        }

        @media (max-width: 480px) {
            .modal-guia {
                width: calc(100vw - 20px);
                right: 10px;
                bottom: 70px;
                height: 40vh;
                max-height: 80vh;
            }

            .modal-guia-header {
                padding: 12px 15px;
            }

            .modal-guia-header h2 {
                font-size: 14px;
            }

            .chat-messages {
                padding: 12px;
            }

            .chat-input-area {
                padding: 10px;
                gap: 6px;
            }

            .chat-input {
                font-size: 12px;
                padding: 8px 10px;
            }

            .btn-enviar-chat {
                width: 36px;
                height: 36px;
            }
        }