/* CSS para Pedro Chat Desktop - Versión de pantalla completa */

    /* Variables CSS para colores de Pedro/Sodimac */
    :root {
        --sodimac-orange: #FF6B35;
        --sodimac-blue: #0066CC;
        --sodimac-darkblue: #004499;
        --sodimac-gray: #F5F5F5;
        --sodimac-darkgray: #333333;
        --sodimac-lightgray: #E0E0E0;
        --pedro-primary: #FF6B35;
        --pedro-secondary: #0066CC;
        --chat-bg: #FFFFFF;
        --message-user-bg: #0066CC;
        --message-bot-bg: #F8F9FA;
        --border-color: #E1E5E9;
        --text-primary: #2C3E50;
        --text-secondary: #7F8C8D;
        --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
        --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Reset y estilos base */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    body {
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        color: var(--text-primary);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Contenedor principal que reemplaza el div de Laura */
    .pedro-chat-container {
        width: 100%;
        height: 100vh;
        margin: 0;
        background: white;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        max-width: none;
    }

    .contenedor {
        display: flex;
        width: 100%;
        height: 100vh;
        min-height: 100vh;
    }

    /* Sección de productos (izquierda) */
    .products-section {
        flex: 0 0 70%;
        background: linear-gradient(180deg, #ffffff 0%, var(--sodimac-gray) 100%);
        border-right: 2px solid var(--border-color);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100vh;
        min-height: 100vh;
        position: relative;
    }

    .products-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--sodimac-blue) 50%, transparent 100%);
        opacity: 0.3;
    }

    .products-header {
        padding: 12px 20px; /* Reducido de 16px a 12px */
        background: var(--sodimac-blue);
        border-bottom: 1px solid var(--border-color);
        text-align: center;
        box-shadow: var(--shadow-light);
        position: relative;
        z-index: 1;
    }

    .products-header .sodimac-logo {
        height: 35px;
        margin-bottom: 8px;
        margin-right: 12px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        transition: var(--transition-smooth);
    }

    .products-header .sodimac-logo:hover {
        transform: scale(1.05);
    }

    .products-header .header-logo {
        height: 35px;
        margin-bottom: 8px;
        margin-right: 16px;
        filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
        transition: var(--transition-smooth);
    }

    .products-header .header-logo:hover {
        transform: scale(1.05);
    }

    .products-header h2 {
        color: var(--sodimac-lightgray);
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 4px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .products-header p {
        color: var(--sodimac-lightgray);
        font-size: 0.85rem;
        font-weight: 400;
    }

    #products-container {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(245, 245, 245, 0.9) 100%);
    }

    /* Estilos para las pestañas del historial de carruseles */
    .product-history-tabs {
        padding: 15px 20px 0 20px;
        border-bottom: 1px solid var(--border-color);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        position: relative;
        z-index: 2;
    }

    .history-tabs-container {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 15px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
    }

    .history-tabs-container::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

    .history-tab {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 20px;
        border: 1px solid var(--border-color);
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        color: var(--text-primary);
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-smooth);
        white-space: nowrap;
        min-width: fit-content;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-light);
    }

    .history-tab::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.5s ease;
    }

    .history-tab.active {
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        color: white;
        border-color: var(--sodimac-blue);
        box-shadow: var(--shadow-medium);
        transform: translateY(-1px);
    }

    .history-tab.active .tab-icon {
        filter: brightness(1.2);
    }
    
    /* Hover específico para pestaña activa */
    .history-tab.active:hover {
        background: linear-gradient(135deg, var(--sodimac-darkblue) 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: var(--shadow-medium);
    }

    .history-tab:hover:not(.active) {
        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        border-color: var(--sodimac-blue);
        transform: translateY(-1px);
        box-shadow: var(--shadow-medium);
    }

    .history-tab:hover::before {
        left: 100%;
    }

    .history-tab:active:not(.active) {
        transform: translateY(0);
        box-shadow: var(--shadow-light);
    }

    .tab-icon {
        font-size: 1rem;
        line-height: 1;
        filter: grayscale(20%);
        transition: var(--transition-smooth);
    }

    .tab-text {
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    .tab-counter {
        background: rgba(255, 255, 255, 0.9);
        color: var(--text-primary);
        font-size: 0.7rem;
        font-weight: 600;
        padding: 1px 5px;
        border-radius: 8px;
        margin-left: 4px;
        min-width: 16px;
        text-align: center;
    }

    .history-tab.active .tab-counter {
        background: rgba(255, 255, 255, 0.95);
        color: var(--sodimac-blue);
    }

    .tab-close {
        background: rgba(255, 255, 255, 0.8);
        color: var(--text-secondary);
        border: none;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        opacity: 0;
        transition: var(--transition-smooth);
        line-height: 1;
    }

    .history-tab:hover .tab-close {
        opacity: 1;
    }

    .history-tab.active .tab-close {
        background: rgba(255, 255, 255, 0.9);
        color: var(--sodimac-blue);
        opacity: 1;
    }

    .tab-close:hover {
        background: #ff4757;
        color: white;
        transform: scale(1.1);
    }

    .tab-close:active {
        transform: scale(0.95);
    }

    /* Ocultar botón de cierre en pestaña "Actual" */
    .history-tab[data-category="actual"] .tab-close {
        display: none;
    }

    .history-tab.loading {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .history-tab.loading .tab-text::after {
        content: '...';
        animation: loadingDots 1.5s infinite;
    }

    /* Animación suave para la aparición de nuevas pestañas */
    @keyframes tabSlideIn {
        from {
            opacity: 0;
            transform: translateX(20px) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

    .history-tab.new-tab {
        animation: tabSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* Indicador de scroll para las pestañas */
    .history-tabs-container::after {
        content: '';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
        pointer-events: none;
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .history-tabs-container.scrollable::after {
        opacity: 1;
    }

    /* Ajuste del contenedor de productos cuando hay pestañas */
    .products-section.has-history #products-container {
        padding-top: 10px;
    }

    .no-products-message {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-secondary);
    }

    .no-products-placeholder {
        margin-bottom: 24px;
        display: flex;
        justify-content: center;
    }

    .placeholder-icon {
        opacity: 0.8;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.05));
    }

    .no-products-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 12px 0;
        line-height: 1.3;
    }

    .no-products-subtitle {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin: 0 0 24px 0;
        line-height: 1.5;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .suggestions-intro {
        text-align: center;
        margin-top: 16px;
        margin-bottom: 8px;
        opacity: 0.7;
    }

    .suggestions-intro small {
        font-size: 0.75rem;
        color: var(--text-secondary);
        font-weight: 400;
        letter-spacing: 0.3px;
    }

    .suggestion-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-top: 12px;
    }

    .pill-btn {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        transition: var(--transition-smooth);
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        overflow: visible;
    }

    .bot-message .project-option-pill.pill-btn {
        display: inline-flex;
        vertical-align: baseline;
        white-space: normal;
        max-width: 100%;
        padding: 6px 12px;
        border-radius: 9999px;
        gap: 0;
        margin: 0 6px 2px 0;
        line-height: 1.2;
        background: rgba(0, 0, 0, 0.03);
        border-color: rgba(0, 0, 0, 0.08);
        box-shadow: none;
        transform: none;
    }

    body.experimental-desktop-project-inline-list .bot-message .project-option-pill.pill-btn {
        display: flex;
        width: fit-content;
        max-width: 100%;
        justify-content: flex-start;
        text-align: left;
        margin: 6px 0 0 0;
        padding: 6px 10px;
        min-height: 32px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.03);
        border-color: rgba(0, 0, 0, 0.10);
        box-shadow: none;
    }

    body.experimental-desktop-project-inline-list .bot-message .project-option-pill.pill-btn:hover {
        background: rgba(0, 102, 204, 0.08);
        border-color: rgba(0, 102, 204, 0.22);
        color: var(--sodimac-blue);
        box-shadow: none;
    }

    .bot-message .project-option-pill.pill-btn:hover {
        background: rgba(0, 102, 204, 0.10);
        border-color: rgba(0, 102, 204, 0.25);
        box-shadow: none;
        transform: none;
        color: var(--sodimac-blue);
    }

    .bot-message .project-option-quickreplies {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .bot-message .project-option-quickreplies2 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 2px 0 6px 0;
        scrollbar-width: none;
    }

    .bot-message .project-option-quickreplies2::-webkit-scrollbar {
        display: none;
    }

    .bot-message .project-option-inline-muted {
        font-weight: inherit !important;
        color: inherit !important;
        cursor: default !important;
        text-decoration: none !important;
        background: transparent !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.experimental-desktop-project-quickreplies-only .bot-message .message-content .project-option,
    body.experimental-desktop-project-quickreplies-only .project-option {
        font-weight: inherit !important;
        color: inherit !important;
        cursor: default !important;
        padding: 0 !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        text-decoration-color: transparent !important;
        border: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        margin: 0 !important;
        box-shadow: none !important;
        white-space: normal !important;
        user-select: text !important;
        pointer-events: none !important;
    }

    .bot-message .project-option-pill2.pill-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 6px 12px;
        min-height: 32px;
        border-radius: 9999px;
        background: rgba(0, 0, 0, 0.03);
        border-color: rgba(0, 0, 0, 0.10);
        box-shadow: none;
        color: var(--text-primary);
        flex: 0 0 auto;
        max-width: 260px;
    }

    .bot-message .project-option-pill2.pill-btn .pill-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

    .bot-message .project-option-pill2.pill-btn:hover {
        background: rgba(0, 102, 204, 0.08);
        border-color: rgba(0, 102, 204, 0.22);
        color: var(--sodimac-blue);
        box-shadow: 0 4px 14px rgba(0, 102, 204, 0.10);
    }

    .bot-message .project-option-pill2.pill-btn::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background: rgba(0, 102, 204, 0.25);
        margin-right: 10px;
        flex: 0 0 auto;
    }

    .bot-message .project-option-pill.pill-btn:active {
        transform: none;
        box-shadow: none;
    }

    .pill-btn .pill-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .pill-btn .pill-icon svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

    .pill-btn .pill-text {
        white-space: nowrap;
    }

    .bot-message .project-option-pill.pill-btn .pill-text {
        white-space: normal;
    }

    body.experimental-desktop-project-inline-list .bot-message .project-option-pill.pill-btn .pill-text {
        white-space: normal;
        line-height: 1.25;
    }

    /* Animaciones para las sugerencias */
    @keyframes pillFadeInScale {
        0% {
            opacity: 0;
            transform: scale(0.7) translateY(10px);
            filter: blur(2px);
        }
        50% {
            opacity: 0.8;
            transform: scale(1.05) translateY(-2px);
            filter: blur(0.5px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
            filter: blur(0);
        }
    }

    @keyframes pillFadeOut {
        0% {
            opacity: 1;
            transform: scale(1) translateY(0);
            filter: blur(0);
        }
        100% {
            opacity: 0;
            transform: scale(0.8) translateY(-8px);
            filter: blur(1px);
        }
    }

    .pill-btn.animate-in {
        animation: pillFadeInScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .pill-btn.animate-out {
        animation: pillFadeOut 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    /* Estados iniciales para las animaciones */
    .pill-btn.preparing {
        opacity: 0;
        transform: scale(0.7) translateY(10px);
        filter: blur(2px);
    }

    /* Efectos de stagger para que aparezcan una por una */
    .pill-btn.animate-in:nth-child(1) {
        animation-delay: 0ms;
    }

    .pill-btn.animate-in:nth-child(2) {
        animation-delay: 150ms;
    }

    .pill-btn.animate-in:nth-child(3) {
        animation-delay: 300ms;
    }

    .pill-btn:hover {
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        color: white;
        border-color: var(--sodimac-blue);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    }

    .pill-btn:active {
        transform: translateY(0);
    }

    /* Pills en el chat: más compactas y horizontales */
    #chat-suggestions-wrapper {
        padding: 0;
        background: rgba(248, 249, 250, 0.5);
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        transition: background 0.25s ease, border-bottom-color 0.25s ease;
    }

    #chat-suggestions-wrapper[data-collapsed="true"] {
        background: transparent;
        border-bottom: none;
        padding: 0;
    }

    #chat-suggestions-wrapper .chat-suggestions-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 2px 12px;
    }

    #chat-suggestions-wrapper .suggestions-toggle-btn {
        background: rgba(0, 102, 204, 0.1);
        border: 1px solid rgba(0, 102, 204, 0.3);
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0;
        flex-shrink: 0;
    }

    #chat-suggestions-wrapper .suggestions-toggle-btn:hover {
        background: rgba(0, 102, 204, 0.2);
        border-color: rgba(0, 102, 204, 0.5);
        transform: scale(1.05);
    }

    #chat-suggestions-wrapper .suggestions-toggle-btn:active {
        transform: scale(0.95);
    }

    #chat-suggestions-wrapper .suggestions-toggle-btn svg {
        color: #0066cc;
    }

    #chat-suggestions-wrapper .chat-suggestions-title {
        color: #666;
        font-size: 0.82rem;
        line-height: 1.2;
    }

    #chat-suggestions-wrapper #chat-suggestions-container {
        overflow: hidden;
        max-height: 180px;
        opacity: 1;
        padding: 0 12px 6px 12px;
        transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #chat-suggestions-wrapper[data-collapsed="true"] #chat-suggestions-container {
        max-height: 0px;
        opacity: 0;
        padding: 0 12px 0 12px;
        pointer-events: none;
    }

    #chat-suggestions-wrapper[data-collapsed="true"] .chat-suggestions-title {
        display: none;
    }

    #chat-suggestions-wrapper[data-collapsed="true"] .chat-suggestions-header {
        justify-content: flex-end;
        gap: 0;
        padding: 4px 12px;
    }

    #chat-suggestions-wrapper .suggestion-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        margin: 0;
        transition: all 0.3s ease;
    }

    #chat-suggestions-wrapper .pill-btn {
        padding: 5px 12px;
        font-size: 0.75rem;
        border-radius: 16px;
        gap: 6px;
    }

    #chat-suggestions-wrapper .pill-btn .pill-icon {
        width: 12px;
        height: 12px;
    }

    #chat-suggestions-wrapper .pill-btn .pill-icon svg {
        width: 12px;
        height: 12px;
    }

    #chat-suggestions-wrapper .pill-btn .pill-text {
        transition: opacity 0.2s ease, width 0.2s ease;
    }

    /* Responsividad: cuando el chat es estrecho, solo mostrar iconos verticalmente */
    @media (max-width: 500px) {
        #chat-suggestions-wrapper .suggestion-pills {
            flex-direction: column;
            align-items: center;
        }

        #chat-suggestions-wrapper .pill-btn .pill-text {
            display: none;
        }

        #chat-suggestions-wrapper .pill-btn {
            padding: 8px;
            min-width: auto;
            width: 40px;
            height: 40px;
            justify-content: center;
        }
    }

    /* Sparkles Effect para pills */
    .pill-btn .star-1,
    .pill-btn .star-2,
    .pill-btn .star-3,
    .pill-btn .star-4 {
        position: absolute;
        width: 12px;
        height: 12px;
        opacity: 0;
        pointer-events: none;
        z-index: 10;
    }

    .pill-btn .star-1 svg,
    .pill-btn .star-2 svg,
    .pill-btn .star-3 svg,
    .pill-btn .star-4 svg {
        width: 100%;
        height: 100%;
        fill: #ffdd83;
    }

    /* Posiciones de las estrellas alrededor de la pill */
    .pill-btn .star-1 {
        top: -8px;
        left: 20%;
    }

    .pill-btn .star-2 {
        top: -6px;
        right: 20%;
    }

    .pill-btn .star-3 {
        bottom: -8px;
        left: 25%;
    }

    .pill-btn .star-4 {
        bottom: -6px;
        right: 25%;
    }

    /* Animación de sparkles */
    @keyframes sparkleEffect {
        0% {
            opacity: 0;
            transform: scale(0) rotate(0deg);
        }
        20% {
            opacity: 1;
            transform: scale(1.2) rotate(90deg);
        }
        40% {
            opacity: 0.8;
            transform: scale(0.8) rotate(180deg);
        }
        60% {
            opacity: 1;
            transform: scale(1.1) rotate(270deg);
        }
        80% {
            opacity: 0.6;
            transform: scale(0.9) rotate(360deg);
        }
        100% {
            opacity: 0;
            transform: scale(0) rotate(450deg);
        }
    }

    /* Aplicar animación de sparkles cuando la pill aparece */
    .pill-btn.animate-in .star-1 {
        animation: sparkleEffect 1.2s ease-out 0.3s;
    }

    .pill-btn.animate-in .star-2 {
        animation: sparkleEffect 1.2s ease-out 0.4s;
    }

    .pill-btn.animate-in .star-3 {
        animation: sparkleEffect 1.2s ease-out 0.5s;
    }

    .pill-btn.animate-in .star-4 {
        animation: sparkleEffect 1.2s ease-out 0.6s;
    }

    /* Sección de chat (derecha) */
    .chat-section {
        flex: 0 0 30%; /* Ancho del 30% */
        min-width: 320px; /* Ancho mínimo para mantener usabilidad */
        max-width: 80%; /* Ancho máximo para no dominar toda la pantalla */
        background: var(--chat-bg);
        display: flex;
        flex-direction: column;
        height: 100vh;
        min-height: 100vh;
        position: relative;
        box-shadow: var(--shadow-medium);
        transition: none; /* Removemos transición para un redimensionamiento suave */
    }

    /* Handle de redimensionamiento horizontal (izquierda del chat) */
    .chat-section::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 8px; /* Área de 8px para facilitar el agarre */
        background: transparent; /* Invisible por defecto */
        cursor: col-resize;
        opacity: 0;
        transition: var(--transition-smooth);
        z-index: 10;
    }

    .chat-section:hover::before {
        opacity: 0.4; /* Más visible para mejor UX */
        background: linear-gradient(180deg, 
            rgba(0, 102, 204, 0.2) 0%, 
            rgba(0, 102, 204, 0.3) 50%, 
            rgba(0, 102, 204, 0.2) 100%);
    }

    .chat-section.resizing::before {
        opacity: 0.6; /* Más visible durante resize */
        background: linear-gradient(180deg, 
            rgba(0, 102, 204, 0.3) 0%, 
            rgba(0, 102, 204, 0.5) 50%, 
            rgba(0, 102, 204, 0.3) 100%);
        width: 6px; /* Ligeramente más fino durante resize */
    }

    /* Handle de redimensionamiento vertical (parte superior del área de mensajes) */
    .chat-messages-container {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 200px; /* Altura mínima para el área de mensajes */
    }

    /* Overlay durante el redimensionamiento - MÁS SUTIL */
    .resize-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        cursor: col-resize;
        background: rgba(0, 102, 204, 0.01); /* Casi transparente */
        display: none;
    }

    /* Indicador visual de dimensiones - MÁS DISCRETO */
    .resize-indicator {
        position: fixed;
        top: 20px;
        right: 20px;
        background: rgba(0, 102, 204, 0.85); /* Menos opaco */
        color: white;
        padding: 6px 12px; /* Más pequeño */
        border-radius: 6px; /* Menos redondeado */
        font-size: 0.8rem; /* Más pequeño */
        font-weight: 500; /* Menos bold */
        box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15); /* Sombra más sutil */
        z-index: 10000;
        opacity: 0;
        transform: translateY(-5px); /* Movimiento más sutil */
        transition: var(--transition-smooth);
        pointer-events: none;
        backdrop-filter: blur(5px); /* Menos blur */
        border: 1px solid rgba(255, 255, 255, 0.1); /* Borde más sutil */
    }

    .resize-indicator.active {
        opacity: 0.9; /* No completamente opaco */
        transform: translateY(0);
    }

    /* Indicador más pequeño - sin flecha */
    .resize-indicator::before {
        display: none; /* Removemos la flecha decorativa */
    }

    /* Mejoras sutiles durante el redimensionamiento */
    .contenedor.resizing {
        user-select: none;
    }

    .contenedor.resizing * {
        pointer-events: none;
    }

    /* Animaciones más sutiles */
    @keyframes resizeStart {
        from {
            box-shadow: var(--shadow-medium);
        }
        to {
            box-shadow: 0 4px 16px rgba(0, 102, 204, 0.12); /* Más sutil */
        }
    }

    @keyframes resizeEnd {
        from {
            box-shadow: 0 4px 16px rgba(0, 102, 204, 0.12);
        }
        to {
            box-shadow: var(--shadow-medium);
        }
    }

    .chat-section.resize-start {
        animation: resizeStart 0.2s ease-out forwards;
    }

    .chat-section.resize-end {
        animation: resizeEnd 0.3s ease-out forwards;
    }

    /* Header del chat */
    .chat-header {
        display: flex;
        align-items: center;
        padding: 18px 24px;
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        color: white;
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-medium);
        position: relative;
        overflow: hidden;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .chat-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: none;
        pointer-events: none;
    }

    .pedro-video-container {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 18px;
        border: 3px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transition: var(--transition-smooth);
        position: relative;
        z-index: 1;
    }

    .pedro-video-container:hover {
        transform: scale(1.05);
        border-color: rgba(255, 255, 255, 0.6);
    }

    .pedro-video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        image-rendering: auto;
        transform: scale(1.4);
        transform-origin: center center;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .chat-header-info {
        flex: 1;
        position: relative;
        z-index: 1;
    }

    .chat-header-info h3 {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 4px;
        text-shadow: none;
    }

    .chat-header-info p {
        font-size: 0.9rem;
        opacity: 0.95;
        font-weight: 300;
    }

    .chat-header-logo {
        height: 38px;
        position: relative;
        z-index: 1;
    }

    .returns-options-mobile {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 100%;
        max-width: 95%;
        margin: 0 auto;
    }

    .returns-option-card {
        display: flex;
        align-items: center;
        background-color: #EAF5FF;
        border-radius: 8px;
        padding: 6px 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        width: 100%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 114, 206, 0.1);
        height: auto;
        min-height: unset;
        margin-bottom: 0;
    }

    .returns-option-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .returns-option-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        background-color: rgba(0, 114, 206, 0.08);
        border-radius: 4px;
        padding: 4px;
    }

    .returns-option-icon img {
        width: 16px;
        height: 16px;
        fill: #0072CE;
        object-fit: contain;
    }

    .returns-option-text {
        flex: 1;
        padding: 2px 0;
    }

    .returns-option-text p {
        margin: 0;
        color: #333;
        font-weight: 500;
        font-size: 11px;
        line-height: 1.1;
    }

    .advisor-contact-buttons {
        padding: 0;
    }

    .advisor-contact-buttons.message {
        width: auto !important;
        max-width: 85% !important;
        margin-left: 0;
        margin-right: auto;
        display: block !important;
        overflow: visible;
    }

    .advisor-contact-buttons .returns-options-mobile {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: space-between;
        overflow: visible;
        padding-top: 3px;
    }

    .advisor-contact-buttons .returns-option-card {
        width: calc(33.333% - 7px) !important;
        justify-content: center;
    }

    @media (max-width: 520px) {
        .advisor-contact-buttons .returns-options-mobile {
            flex-direction: column;
            gap: 6px;
        }

        .advisor-contact-buttons .returns-option-card {
            width: 100% !important;
            justify-content: flex-start;
        }
    }

    .header-logo {
        height: 100%;
        filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
        transition: var(--transition-smooth);
    }

    .header-logo:hover {
        transform: scale(1.1);
    }

    /* Popup de mejoras - Estilo Desktop */
    .maintenance-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .maintenance-popup-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .maintenance-popup {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 250, 255, 0.84) 100%);
        backdrop-filter: blur(22px) saturate(155%);
        -webkit-backdrop-filter: blur(22px) saturate(155%);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 18px;
        padding: 24px 28px;
        max-width: 400px;
        width: 90%;
        box-shadow: 
            0 10px 40px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 0 0 1px rgba(0, 102, 204, 0.05);
        transform: translateY(20px) scale(0.95);
        transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
    }

    .maintenance-popup-overlay.active .maintenance-popup {
        transform: translateY(0) scale(1);
    }

    .maintenance-popup-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 30px;
        height: 30px;
        background: rgba(0, 102, 204, 0.08);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--sodimac-blue);
        font-size: 16px;
        font-weight: 400;
        transition: all 0.2s ease;
        line-height: 1;
    }

    .maintenance-popup-close:hover {
        background: rgba(0, 102, 204, 0.15);
        transform: scale(1.1);
    }

    .maintenance-popup-icon {
        text-align: center;
        margin-bottom: 14px;
    }

    .maintenance-popup-icon svg {
        width: 40px;
        height: 40px;
        fill: var(--sodimac-blue);
    }

    .maintenance-popup-message {
        color: var(--text-primary);
        font-size: 0.92rem;
        line-height: 1.55;
        text-align: center;
        margin-bottom: 18px;
        font-weight: 400;
    }

    .maintenance-popup-btn {
        display: block;
        width: 100%;
        padding: 12px 24px;
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        border: none;
        border-radius: 10px;
        color: white;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
        box-shadow: 0 3px 10px rgba(0, 102, 204, 0.2);
    }

    .maintenance-popup-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
    }

    .maintenance-popup-btn:active {
        transform: translateY(0);
    }

    body.maintenance-popup-open {
        overflow: hidden;
    }

    /* Área de mensajes */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.9) 100%);
        display: flex;
        flex-direction: column;
        gap: 16px;
        scroll-behavior: smooth;
        position: relative;
        max-height: calc(100vh - 200px);
        min-height: 0; /* Importante para flexbox */
        overflow-x: hidden;
    }

    .chat-messages::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }

    /* Panel experimental de acciones sugeridas (estilo moderno pills) */
    .chat-suggested-actions-panel {
        display: none;
        padding: 12px 20px;
        background: rgba(248, 249, 250, 0.8);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        animation: slideDown 0.3s ease-out;
    }

    body.experimental-desktop-project-panel .chat-suggested-actions-panel {
        display: block;
    }

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

    .chat-suggested-actions-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
        cursor: pointer;
        padding: 4px 0;
        transition: color 0.2s ease;
    }

    .chat-suggested-actions-header:hover {
        color: #374151;
    }

    .chat-suggested-actions-header svg {
        transition: transform 0.2s ease;
    }

    .chat-suggested-actions-panel.collapsed .chat-suggested-actions-header svg {
        transform: rotate(180deg);
    }

    .chat-suggested-actions-panel.collapsed .chat-suggested-actions-grid {
        display: none;
    }

    .chat-suggested-actions-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .chat-suggested-action-item {
        border-radius: 20px;
        border: 1px solid rgba(0, 102, 204, 0.2);
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        padding: 8px 16px;
        font-size: 0.85rem;
        font-weight: 500;
        color: #1e40af;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        white-space: nowrap;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        position: relative;
        overflow: hidden;
    }

    .chat-suggested-action-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.5s ease;
    }

    .chat-suggested-action-item:hover {
        background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
        border-color: #0066cc;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    }

    .chat-suggested-action-item:hover::before {
        left: 100%;
    }

    .chat-suggested-action-item:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 102, 204, 0.2);
    }

    /* Estilos de mensajes */
    .message {
        max-width: 85%;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        animation: slideInMessage 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        width: fit-content;
        min-width: 120px;
        margin-bottom: 12px;
    }

    /* Formato de texto en negrita para mensajes de Pedro */
    .bot-message .message-content strong,
    .bot-message .message-content b {
        font-weight: 600;
        color: var(--sodimac-blue);
    }

    body.experimental-desktop-project-quickreplies-only .bot-message .message-content strong,
    body.experimental-desktop-project-quickreplies-only .bot-message .message-content b {
        font-weight: inherit !important;
        color: inherit !important;
    }

    /* Estilo para texto entre ** en mensajes de Pedro */
    .bot-message .message-content .bold-text {
        font-weight: 600;
        color: var(--sodimac-blue);
        background: rgba(0, 102, 204, 0.05);
        padding: 1px 3px;
        border-radius: 3px;
        transition: background-color 0.2s ease;
    }

    body.experimental-desktop-project-quickreplies-only .bot-message .message-content .bold-text {
        font-weight: inherit !important;
        color: inherit !important;
        background: transparent !important;
        background-color: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        text-decoration: none !important;
    }

    .bot-message .message-content .bold-text:hover {
        background: rgba(0, 102, 204, 0.1);
    }

    .bot-message .message-content .bold-text.project-option,
    .bot-message .message-content .project-option.bold-text,
    .project-option.bold-text {
        padding: 1px 4px !important;
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 3px !important;
        text-decoration: underline !important;
        text-decoration-color: rgba(0, 102, 204, 0.3) !important;
        font-weight: bold !important;
        color: #0066cc !important;
    }
    
    .bot-message .message-content .bold-text.project-option:hover,
    .bot-message .message-content .project-option.bold-text:hover,
    .project-option.bold-text:hover {
        background: rgba(0, 102, 204, 0.1) !important;
        background-color: rgba(0, 102, 204, 0.1) !important;
        text-decoration: underline !important;
    }

    /* Estilos para opciones de proyecto clickeables - ALTA ESPECIFICIDAD para anular .bold-text */
    .bot-message .message-content .project-option,
    .project-option {
        font-weight: bold !important;
        color: #0066cc !important;
        cursor: pointer;
        padding: 1px 4px !important;
        border-radius: 3px !important;
        transition: all 0.2s ease !important;
        display: inline !important;
        text-decoration: underline !important;
        text-decoration-color: rgba(0, 102, 204, 0.3) !important;
        border: none !important;
        background: transparent !important;
        margin: 0 1px !important;
        white-space: nowrap !important;
        font-size: inherit !important;
        line-height: inherit !important;
        /* Anular explícitamente cualquier fondo de .bold-text */
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .bot-message .message-content .project-option:hover,
    .project-option:hover {
        background: rgba(0, 102, 204, 0.1) !important;
        background-color: rgba(0, 102, 204, 0.1) !important;
        text-decoration-color: rgba(0, 102, 204, 0.8) !important;
        transform: none !important;
        box-shadow: none !important;
        text-decoration: underline !important;
        color: #0052a3 !important;
    }

    .bot-message .message-content .project-option:active,
    .project-option:active {
        background: rgba(0, 102, 204, 0.2) !important;
        background-color: rgba(0, 102, 204, 0.2) !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* Asegurar que las opciones no se rompan en líneas nuevas y mantengan el flujo del texto */
    .bot-message .message-content {
        word-break: normal;
        overflow-wrap: normal;
        line-height: 1.5;
    }

    .project-option {
        word-break: keep-all;
        overflow-wrap: normal;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        vertical-align: baseline;
        white-space: nowrap !important;
        display: inline !important;
    }

    body.experimental-project-ui .bot-message .message-content .project-option,
    body.experimental-project-ui .project-option {
        display: block !important;
        width: 100%;
        padding: 10px 14px !important;
        margin: 6px 0 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        text-decoration: none !important;
        color: #0066cc !important;
        font-weight: 600 !important;
    }

    body.experimental-project-ui .bot-message .message-content .project-option::before,
    body.experimental-project-ui .project-option::before {
        content: none;
    }

    /* Asegurar que el contenido de los mensajes mantenga un flujo natural */
    .bot-message .message-content * {
        display: inline-block;
    }

    /* Excepciones para elementos que sí deben hacer salto de línea o mantener su display */
    .bot-message .message-content br,
    .bot-message .message-content .product-card,
    .bot-message .message-content .audio-message,
    .bot-message .message-content .audio-controls,
    .bot-message .message-content .audio-waveform,
    .bot-message .message-content .waveform-bars,
    .bot-message .message-content .waveform-bar,
    .bot-message .message-content .audio-play-btn,
    .bot-message .message-content .audio-duration,
    .bot-message .message-content .audio-waveform-timeline {
        display: block !important;
    }

    /* Para elementos específicos del audio que necesitan flex */
    .bot-message .message-content .audio-controls {
        display: flex !important;
    }

    .bot-message .message-content .waveform-bars {
        display: flex !important;
    }

    /* Excepciones para la animación de "Pedro está escribiendo" */
    .loading-message .loading-dots {
        display: flex !important;
    }

    .loading-message .loading-dots span {
        display: block !important;
    }

    /* Efecto de feedback visual al hacer click */
    .project-option:focus {
        outline: 1px solid rgba(0, 102, 204, 0.5);
        outline-offset: 1px;
    }

    @keyframes slideInMessage {
        from {
            opacity: 0;
            transform: translateY(15px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Animación blop REMOVIDA - ahora usamos efecto de texto progresivo */

    .message-content {
        padding: 14px 18px;
        border-radius: 20px;
        font-size: 0.95rem;
        line-height: 1.5;
        box-shadow: var(--shadow-light);
        transition: var(--transition-smooth);
        position: relative;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }



    .user-message {
        align-self: flex-end;
    }

    .user-message .message-content {
        background: var(--sodimac-blue);
        color: white;
        border-radius: 20px;
        border-bottom-right-radius: 4px;
        position: relative;
        max-width: none;
        width: auto;
        min-width: 60px;
    }

    .bot-message {
        align-self: flex-start;
    }

    .bot-message .message-content {
        background: linear-gradient(135deg, var(--message-bot-bg) 0%, #ffffff 100%);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        border-bottom-left-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        max-width: none;
        width: auto;
        min-width: 120px;
    }

    /* Input del chat */
    .chat-input {
        padding: 24px;
        background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
        pointer-events: auto !important;
        flex-shrink: 0;
        position: relative;
    }

    .input-container {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 2px solid var(--border-color);
        border-radius: 28px;
        padding: 10px 16px;
        transition: var(--transition-smooth);
        box-shadow: var(--shadow-light);
        position: relative;
        overflow: hidden;
        pointer-events: auto !important;
    }

    .input-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(0, 102, 204, 0.02) 0%, transparent 50%);
        opacity: 0;
        transition: var(--transition-smooth);
    }

    .input-container:focus-within {
        border-color: var(--sodimac-blue);
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1), var(--shadow-medium);
        transform: translateY(-1px);
    }

    .input-container:focus-within::before {
        opacity: 1;
    }

    .message-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 10px 14px;
        font-size: 0.95rem;
        outline: none;
        color: var(--text-primary);
        resize: none;
        min-height: 20px;
        max-height: 120px;
        font-family: inherit;
        line-height: 1.4;
        pointer-events: auto !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        position: relative;
        z-index: 1000;
        cursor: text !important;
    }

    .message-input::placeholder {
        color: var(--text-secondary);
        font-weight: 300;
    }

    .left-buttons {
        display: flex;
        gap: 8px;
        margin-right: 12px;
    }

    .right-buttons {
        display: flex;
        margin-left: 12px;
    }

    .input-btn-flat {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-smooth);
        position: relative;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 102, 204, 0.1);
    }

    .input-btn-flat::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 102, 204, 0.05) 100%);
        border-radius: 12px;
        opacity: 0;
        transition: var(--transition-smooth);
    }

    .input-btn-flat:hover {
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        color: white;
        transform: scale(1.08) translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
        border-color: var(--sodimac-blue);
    }

    .input-btn-flat:hover::before {
        opacity: 1;
    }

    .input-btn-flat:active {
        transform: scale(0.95) translateY(0);
    }

    .input-btn-flat.recording {
        background: linear-gradient(135deg, #E74C3C 0%, #c0392b 100%);
        color: white;
        animation: pulseRecordFlat 1.5s infinite;
        border-color: #E74C3C;
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    }

    .input-btn-flat.recording svg {
        color: white;
        fill: white;
    }

    @keyframes pulseRecordFlat {
        0% {
            box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6), 0 4px 12px rgba(231, 76, 60, 0.4);
            transform: scale(1);
        }
        50% {
            box-shadow: 0 0 0 6px rgba(231, 76, 60, 0.2), 0 6px 16px rgba(231, 76, 60, 0.6);
            transform: scale(1.05);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(231, 76, 60, 0), 0 4px 12px rgba(231, 76, 60, 0.4);
            transform: scale(1);
        }
    }

    /* Mejoras adicionales para los iconos */
    .input-btn-flat svg {
        transition: var(--transition-smooth);
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }

    .input-btn svg {
        transition: var(--transition-smooth);
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    }

    /* Estados de focus para accesibilidad */
    .input-btn-flat:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3), 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .input-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3), 0 3px 10px rgba(0, 102, 204, 0.35);
    }

    .input-btn {
        width: 46px;
        height: 46px;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-smooth);
        box-shadow: 0 3px 10px rgba(0, 102, 204, 0.35);
        position: relative;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .input-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
        opacity: 0;
        transition: var(--transition-smooth);
    }

    .input-btn:hover {
        background: linear-gradient(135deg, var(--sodimac-darkblue) 0%, #003366 100%);
        transform: scale(1.12) translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 204, 0.5);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .input-btn:hover::before {
        opacity: 1;
    }

    .input-btn:active {
        transform: scale(0.95) translateY(0);
    }

    .voice-btn.recording {
        background: linear-gradient(135deg, #E74C3C 0%, #c0392b 100%);
        animation: pulseRecord 1.5s infinite;
    }

    @keyframes pulseRecord {
        0% {
            box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
        }
        70% {
            box-shadow: 0 0 0 12px rgba(231, 76, 60, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
        }
    }

    .send-btn {
        background: linear-gradient(135deg, var(--pedro-primary) 0%, #e55a2b 100%);
    }

    .send-btn:hover {
        background: linear-gradient(135deg, #e55a2b 0%, #d14d1f 100%);
    }

    /* Preview de imagen */
    .image-preview {
        margin-top: 16px;
        position: relative;
        max-width: 100%;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        border-radius: 16px;
        padding: 16px;
        box-shadow: 
            0 8px 32px rgba(0, 102, 204, 0.08),
            0 4px 16px rgba(0, 0, 0, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 102, 204, 0.12);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        animation: slideInPreview 0.5s ease-out;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    @keyframes slideInPreview {
        0% {
            opacity: 0;
            transform: translateY(10px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .image-preview.hidden {
        display: none;
    }

    .image-preview:hover {
        transform: translateY(-2px);
        box-shadow: 
            0 12px 40px rgba(0, 102, 204, 0.12),
            0 8px 24px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border-color: rgba(0, 102, 204, 0.2);
    }

    .preview-content {
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
    }

    .preview-image {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: 12px;
        border: 2px solid rgba(0, 102, 204, 0.1);
        flex-shrink: 0;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }

    .preview-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s ease;
    }

    .preview-content:hover .preview-image::before {
        left: 100%;
    }

    .preview-content:hover .preview-image {
        transform: scale(1.05);
        border-color: rgba(0, 102, 204, 0.3);
        box-shadow: 0 6px 20px rgba(0, 102, 204, 0.15);
    }

    .preview-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .preview-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .preview-icon {
        color: var(--sodimac-blue);
        flex-shrink: 0;
        padding: 6px;
        background: rgba(0, 102, 204, 0.1);
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .preview-content:hover .preview-icon {
        background: rgba(0, 102, 204, 0.15);
        transform: scale(1.1);
    }

    .preview-filename {
        font-size: 0.9rem;
        color: var(--text-primary);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.3;
    }

    .preview-details {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.75rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .preview-size {
        background: rgba(0, 102, 204, 0.08);
        padding: 2px 8px;
        border-radius: 6px;
        font-weight: 600;
    }

    .preview-status {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #10b981;
        font-weight: 600;
    }

    .preview-status::before {
        content: '✓';
        font-size: 0.7rem;
        width: 14px;
        height: 14px;
        background: #10b981;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .cancel-image-btn {
        position: absolute;
        top: -12px;
        right: -12px;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff4757 0%, #ff3838 100%);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        box-shadow: 
            0 4px 16px rgba(255, 71, 87, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        line-height: 1;
        z-index: 10;
        border: 2px solid white;
    }

    .cancel-image-btn::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .cancel-image-btn:hover {
        transform: scale(1.15) rotate(90deg);
        background: linear-gradient(135deg, #ff3838 0%, #ff2f2f 100%);
        box-shadow: 
            0 6px 24px rgba(255, 71, 87, 0.5),
            0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .cancel-image-btn:hover::before {
        opacity: 1;
    }

    .cancel-image-btn:active {
        transform: scale(1.05) rotate(90deg);
    }

    /* Animación de pulso para indicar que se puede eliminar */
    @keyframes pulseRemove {
        0% {
            box-shadow: 
                0 4px 16px rgba(255, 71, 87, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.1);
        }
        50% {
            box-shadow: 
                0 4px 20px rgba(255, 71, 87, 0.5),
                0 2px 8px rgba(0, 0, 0, 0.1);
        }
        100% {
            box-shadow: 
                0 4px 16px rgba(255, 71, 87, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.1);
        }
    }

    .image-preview:hover .cancel-image-btn {
        animation: pulseRemove 2s infinite;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .image-preview {
            margin-top: 12px;
            padding: 12px;
        }
        
        .preview-image {
            width: 60px;
            height: 60px;
        }
        
        .preview-content {
            gap: 12px;
        }
        
        .cancel-image-btn {
            width: 28px;
            height: 28px;
            top: -10px;
            right: -10px;
            font-size: 16px;
        }
    }

    /* Animaciones */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
        }
    }

    /* Estilos para carruseles de productos en el chat */
    .chat-messages .related-products-section {
        max-width: 100%;
        margin: 12px 0;
        padding: 16px;
        background: linear-gradient(135deg, rgba(0, 102, 204, 0.02) 0%, rgba(255, 255, 255, 0.8) 100%);
        border-radius: 16px;
        border: 1px solid rgba(0, 102, 204, 0.1);
    }

    .chat-messages .product-carousel {
        margin: 0;
    }

    .chat-messages .product-card {
        min-width: 190px;
        margin-right: 14px;
        transition: var(--transition-smooth);
        border-radius: 12px;
        overflow: hidden;
    }

    .chat-messages .product-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
    }

    /* Responsividad */
    @media (max-width: 1024px) {
        .contenedor {
            flex-direction: column;
            height: 100vh;
        }
        
        .products-section {
            border-right: none;
            border-bottom: 2px solid var(--border-color);
            max-height: 40vh;
            min-height: auto;
            height: auto;
        }
        
        .chat-section {
            min-height: 60vh;
            height: 60vh;
        }
        
        /* Ajustes para pestañas en tablets */
        .product-history-tabs {
            padding: 12px 15px 0 15px;
        }
        
        .history-tab {
            padding: 8px 14px;
            font-size: 0.8rem;
        }
        
        .tab-icon {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 768px) {
        .pedro-chat-container {
            border-radius: 0;
            height: 100vh;
        }
        
        .contenedor {
            height: 100vh;
        }
        
        .products-section {
            max-height: 35vh;
        }
        
        .chat-header {
            padding: 14px 18px;
        }
        
        .pedro-video-container {
            width: 55px;
            height: 55px;
        }
        
        .chat-header-info h3 {
            font-size: 1.15rem;
        }
        
        .chat-messages {
            padding: 18px;
        }
        
        .message {
            max-width: 90%;
        }
        
        .chat-input {
            padding: 18px;
        }
        
        .input-btn {
            width: 40px;
            height: 40px;
        }
        
        /* Ajustes para pestañas en móviles */
        .product-history-tabs {
            padding: 10px 12px 0 12px;
        }
        
        .history-tabs-container {
            gap: 6px;
            padding-bottom: 12px;
        }
        
        .history-tab {
            padding: 6px 12px;
            font-size: 0.75rem;
            gap: 6px;
            min-width: auto;
        }
        
        .tab-icon {
            font-size: 0.85rem;
        }
        
        .tab-text {
            display: inline; /* Mostrar nombres de pestañas siempre */
        }
    }

    @media (max-width: 480px) {
        .products-header {
            padding: 18px 15px;
        }
        
        .products-header h2 {
            font-size: 1.3rem;
        }
        
        .chat-header-info h3 {
            font-size: 1.05rem;
        }
        
        .chat-header-info p {
            font-size: 0.85rem;
        }
        
        .message-content {
            padding: 12px 16px;
            font-size: 0.9rem;
        }
        
        .input-container {
            padding: 8px 12px;
        }
        
        .message-input {
            padding: 8px 12px;
            font-size: 0.9rem;
        }
        
        .input-btn {
            width: 36px;
            height: 36px;
        }
        
        /* Pestañas ultra-compactas para pantallas muy pequeñas */
        .product-history-tabs {
            padding: 8px 10px 0 10px;
        }
        
        .history-tab {
            padding: 4px 8px;
            font-size: 0.7rem;
        }
        
        .tab-icon {
            font-size: 0.8rem;
        }
    }

    /* Scrollbar personalizado */
    .chat-messages::-webkit-scrollbar,
    #products-container::-webkit-scrollbar {
        width: 8px;
    }

    .chat-messages::-webkit-scrollbar-track,
    #products-container::-webkit-scrollbar-track {
        background: linear-gradient(180deg, #f1f1f1 0%, #e9ecef 100%);
        border-radius: 4px;
    }

    .chat-messages::-webkit-scrollbar-thumb,
    #products-container::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        border-radius: 4px;
        transition: var(--transition-smooth);
    }

    .chat-messages::-webkit-scrollbar-thumb:hover,
    #products-container::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--sodimac-darkblue) 0%, #003366 100%);
    }

    /* Mejoras para el scroll en Firefox */
    .chat-messages {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 102, 204, 0.5) rgba(241, 241, 241, 0.5);
    }

    /* Correcciones adicionales para prevenir corte de mensajes */
    .chat-messages * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .user-message {
        align-self: flex-end;
        display: flex;
        flex-direction: column;
        width: fit-content;
        max-width: 85%;
        margin-left: auto;
        margin-right: 0;
    }

    .bot-message {
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        width: fit-content;
        max-width: 85%;
        margin-left: 0;
        margin-right: auto;
    }

    /* Estados de carga */
    .loading-message {
        display: flex;
        align-items: center;
        gap: 8px;
        font-style: italic;
        color: var(--text-secondary);
        animation: fadeInLoading 0.3s ease-in;
        font-size: 0.9rem;
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
        border-radius: 16px;
        border: 1px solid rgba(0, 102, 204, 0.1);
    }

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

    .loading-dots {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .loading-dots span {
        width: 6px;
        height: 6px;
        background: var(--sodimac-blue);
        border-radius: 50%;
        animation: loadingDots 1.4s infinite ease-in-out;
        box-shadow: 0 2px 4px rgba(0, 102, 204, 0.3);
    }

    .loading-dots span:nth-child(1) {
        animation-delay: -0.32s;
    }

    .loading-dots span:nth-child(2) {
        animation-delay: -0.16s;
    }

    .loading-dots span:nth-child(3) {
        animation-delay: 0s;
    }

    @keyframes loadingDots {
        0%, 80%, 100% {
            transform: scale(0.6) translateY(0);
            opacity: 0.4;
        }
        40% {
            transform: scale(1.2) translateY(-4px);
            opacity: 1;
        }
    }

    /* Estilo especial para el indicador de escritura */
    .typing-indicator .message-content {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 1px solid var(--border-color);
        animation: typingPulse 2s infinite ease-in-out;
    }

    @keyframes typingPulse {
        0%, 100% {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }
        50% {
            box-shadow: 0 4px 16px rgba(0, 102, 204, 0.15);
        }
    }

    /* Mejoras de accesibilidad */
    .input-btn:focus {
        outline: 3px solid rgba(0, 102, 204, 0.3);
        outline-offset: 2px;
    }

    .message-input:focus {
        outline: none;
        pointer-events: auto !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        cursor: text !important;
    }

    /* Ocultar elementos cuando no hay productos */
    .products-section.has-products .no-products-message {
        display: none;
    }

    .products-section:not(.has-products) #products-container {
        display: none;
    }

    /* Efectos adicionales para mejorar la experiencia */
    .chat-header {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .products-header {
        backdrop-filter: blur(5px);
    }

    /* Animación sutil para el contenedor principal */
    .pedro-chat-container {
        animation: fadeInContainer 0.6s ease-out;
    }

    @keyframes fadeInContainer {
        from {
            opacity: 0;
            transform: scale(0.98);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* ============================================
    ESTILOS PARA GRABACIÓN Y REPRODUCCIÓN DE AUDIO
    Basado en audio-recording.css del chat móvil
    ============================================ */

    /* Estilos para la funcionalidad de grabación de audio en el chat */
    .audio-recording-container {
    position: absolute;
    bottom: 70px;
    left: 10px;
        display: flex;
        align-items: center;
    background-color: rgba(0, 86, 154, 0.9);
        border-radius: 20px;
    padding: 8px 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    max-width: 240px;
    z-index: 10000;
    animation: slideUp 0.3s ease-out forwards;
    transform: translateY(0);
    transition: transform 0.3s ease;
    }

    .audio-recording-container.recording {
    background-color: rgba(231, 76, 60, 0.85);
    border-color: rgba(255, 255, 255, 0.6);
    }

    .recording-indicator {
    display: flex;
    align-items: center;
    }

    .recording-timer {
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin-left: 10px;
    margin-right: 15px;
    }

    .recording-dot {
    width: 12px;
    height: 12px;
    background-color: #e74c3c;
    border-radius: 50%;
    margin-right: 10px;
    animation: pulse 1.2s infinite;
    }

    .recording-controls {
    display: flex;
    gap: 12px;
    }

    .recording-cancel, .recording-send {
    background: none;
        border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    transition: all 0.2s ease;
    }

    .recording-cancel {
    background-color: rgba(255, 255, 255, 0.15);
        color: white;
    }

    .recording-send {
    background-color: #00cc44;
    color: white;
    }

    .recording-cancel:hover, .recording-send:hover {
    transform: scale(1.1);
    }

    /* Estilos para los mensajes de audio en el chat - estilo similar a la captura */
    .audio-message {
    padding: 8px 12px;
    margin: 6px 0;
    background: #E8E8E8;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
        width: 100%;
    max-width: 320px;
        position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* Los mensajes de bot mantienen el estilo de la captura */
    .bot-message .audio-message {
    background: #E8E8E8;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    align-self: flex-start;
    }


    /* Para mensajes del usuario, mantener el estilo azul */
    .user-message .audio-message {
    background: #007AFF;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    align-self: flex-end;
    }

    /* Estilos para audio corto vs largo */
    .audio-message.short-audio {
    max-width: 200px;
    }

    .audio-message.long-audio {
    max-width: 280px;
    }

    .audio-controls {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
        padding: 0;
    margin-bottom: 4px;
    }

    /* Contenedor para las formas de onda de audio */
    .audio-waveform {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    pointer-events: none;
    padding: 0 50px 0 40px; /* Espacio para los botones y tiempo */
    overflow: hidden;
    }

    /* Botón de reproducción estilo captura */
    .audio-play-btn {
    background-color: #007AFF;
        color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 2;
    }

    .audio-play-btn svg {
    width: 14px;
    height: 14px;
    margin-left: 1px; /* Centra visualmente el triángulo de play */
    }


    .audio-play-btn:active {
    transform: scale(0.95);
    }

    /* Para mensajes del usuario, botón blanco */
    .user-message .audio-play-btn {
    background-color: rgba(255, 255, 255, 0.9);
    color: #007AFF;
    }

    /* Ocultar la línea de tiempo original */
    .audio-timeline {
    display: none;
    }

    /* Nueva línea de tiempo con forma de onda estilo captura */
    .audio-waveform-timeline {
    flex-grow: 1;
    height: 32px;
        position: relative;
    cursor: pointer;
        overflow: hidden;
    margin: 0 6px;
    display: flex;
    align-items: center;
    z-index: 1;
    background: transparent;
    }

    /* Crear las barras de la forma de onda estilo captura */
    .waveform-bars {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 2px;
    justify-content: space-between;
    }

    .waveform-bar {
    width: 3px;
    background-color: #C7C7CC;
    border-radius: 1.5px;
    transition: all 0.2s ease;
    min-height: 4px;
    }

    /* Barras reproducidas en rojo */
    .waveform-bar.played {
    background-color: #007AFF;
    }

    /* Variaciones en altura para simular ondas de audio reales */
    .waveform-bar:nth-child(1) { height: 8px; }
    .waveform-bar:nth-child(2) { height: 16px; }
    .waveform-bar:nth-child(3) { height: 12px; }
    .waveform-bar:nth-child(4) { height: 24px; }
    .waveform-bar:nth-child(5) { height: 6px; }
    .waveform-bar:nth-child(6) { height: 18px; }
    .waveform-bar:nth-child(7) { height: 28px; }
    .waveform-bar:nth-child(8) { height: 14px; }
    .waveform-bar:nth-child(9) { height: 32px; }
    .waveform-bar:nth-child(10) { height: 10px; }
    .waveform-bar:nth-child(11) { height: 20px; }
    .waveform-bar:nth-child(12) { height: 16px; }
    .waveform-bar:nth-child(13) { height: 26px; }
    .waveform-bar:nth-child(14) { height: 8px; }
    .waveform-bar:nth-child(15) { height: 22px; }
    .waveform-bar:nth-child(16) { height: 12px; }
    .waveform-bar:nth-child(17) { height: 30px; }
    .waveform-bar:nth-child(18) { height: 18px; }
    .waveform-bar:nth-child(19) { height: 14px; }
    .waveform-bar:nth-child(20) { height: 24px; }
    .waveform-bar:nth-child(21) { height: 10px; }
    .waveform-bar:nth-child(22) { height: 28px; }
    .waveform-bar:nth-child(23) { height: 16px; }
    .waveform-bar:nth-child(24) { height: 20px; }
    .waveform-bar:nth-child(25) { height: 8px; }
    .waveform-bar:nth-child(26) { height: 26px; }
    .waveform-bar:nth-child(27) { height: 12px; }
    .waveform-bar:nth-child(28) { height: 22px; }
    .waveform-bar:nth-child(29) { height: 18px; }
    .waveform-bar:nth-child(30) { height: 14px; }

    /* Para mensajes del usuario, barras en blanco/azul */
    .user-message .waveform-bar {
    background-color: rgba(255, 255, 255, 0.5);
    }

    .user-message .waveform-bar.played {
    background-color: rgba(255, 255, 255, 0.9);
    }

    .audio-duration {
    color: #8E8E93;
    font-size: 11px;
    margin-left: 6px;
    min-width: 32px;
    }

    /* Indicador circular de progreso tipo WhatsApp */
    .audio-progress-indicator {
        position: absolute;
        width: 12px;
        height: 12px;
        background: #007AFF;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        opacity: 0;
        pointer-events: none;
    }

    .audio-waveform-timeline:hover .audio-progress-indicator {
        opacity: 1;
        pointer-events: all;
    }

    .audio-message.playing .audio-progress-indicator {
        opacity: 1;
        pointer-events: all;
    }

    .audio-progress-indicator:hover {
        transform: translateY(-50%) scale(1.2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    .user-message .audio-progress-indicator {
        background: rgba(255, 255, 255, 0.9);
    text-align: right;
    font-weight: 400;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    }

    /* Para mensajes del usuario, texto en blanco */
    .user-message .audio-duration {
    color: rgba(255, 255, 255, 0.8);
    }

    /* Contenedor para el texto del mensaje debajo del audio */
    .audio-message-text {
    color: #2C2C2E;
    font-size: 15px;
    line-height: 1.4;
    margin-top: 4px;
    word-wrap: break-word;
    }

    /* Para mensajes del usuario, texto en blanco */
    .user-message .audio-message-text {
    color: white;
    }

    /* Estilo para el botón de micrófono durante grabación */
    #voice-btn.recording-active,
    .voice-btn.recording-active {
    background: linear-gradient(135deg, #E74C3C 0%, #c0392b 100%) !important;
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
    border-color: #E74C3C !important;
    }

    #voice-btn.recording-active svg,
    .voice-btn.recording-active svg {
    color: white !important;
    fill: white !important;
    filter: brightness(1) !important;
    }

    /* Animación pulsante para el botón de grabación */
    @keyframes pulse-recording-new {
    0% { transform: scale(1.1); box-shadow: 0 0 15px rgba(231, 76, 60, 0.6); }
    50% { transform: scale(1.15); box-shadow: 0 0 20px rgba(231, 76, 60, 0.8); }
    100% { transform: scale(1.1); box-shadow: 0 0 15px rgba(231, 76, 60, 0.6); }
    }

    #voice-btn.recording-active,
    .voice-btn.recording-active {
    animation: pulse-recording-new 1.5s infinite;
    }

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

    /* ============================================
    ESTILOS DE AUDIO LEGACY COMPATIBLES
    ============================================ */

    /* Estilos para los mensajes de audio estilo WhatsApp - exactamente como audio-recording.css */
    .audio-message {
    padding: 12px 16px;
    margin: 8px 0;
    background: #E8E8E8;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* Los mensajes de bot mantienen el estilo de la captura */
    .bot-message .audio-message {
    background: #E8E8E8;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    align-self: flex-start;
    }


    /* Para mensajes del usuario, mantener el estilo azul */
    .user-message .audio-message {
    background: #007AFF;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    align-self: flex-end;
    }

    /* Estilos para audio corto vs largo */
    .audio-message.short-audio {
    max-width: 250px;
    }

    .audio-message.long-audio {
    max-width: 320px;
    }

    .audio-controls {
        display: flex;
        align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 0;
    margin-bottom: 8px;
    }

    /* Botón de reproducción estilo captura */
    .audio-play-btn {
    background-color: #007AFF;
    color: white;
    border: none;
        border-radius: 50%;
    width: 40px;
    height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    margin-right: 12px;
        cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    flex-shrink: 0;
    z-index: 2;
    }

    .audio-play-btn svg {
    width: 18px;
    height: 18px;
    margin-left: 2px; /* Centra visualmente el triángulo de play */
    }


    .audio-play-btn:active {
    transform: scale(0.95);
    }

    /* Para mensajes del usuario, botón blanco */
    .user-message .audio-play-btn {
    background-color: rgba(255, 255, 255, 0.9);
    color: #007AFF;
    }

    /* Nueva línea de tiempo con forma de onda estilo captura */
    .audio-waveform-timeline {
        flex-grow: 1;
    height: 40px;
        position: relative;
    cursor: pointer;
    overflow: hidden;
    margin: 0 8px;
        display: flex;
    align-items: center;
    z-index: 1;
    background: transparent;
    }

    /* Crear las barras de la forma de onda estilo captura */
    .waveform-bars {
        display: flex;
        align-items: center;
        width: 100%;
    height: 100%;
    gap: 2px;
    justify-content: space-between;
    }

    .waveform-bar {
    width: 3px;
    background-color: #C7C7CC;
    border-radius: 1.5px;
        transition: all 0.2s ease;
        min-height: 4px;
    }

    /* Barras reproducidas en rojo */
    .waveform-bar.played {
    background-color: #007AFF;
    }

    /* Para mensajes del usuario, barras en blanco/azul */
    .user-message .waveform-bar {
    background-color: rgba(255, 255, 255, 0.5);
    }

    .user-message .waveform-bar.played {
    background-color: rgba(255, 255, 255, 0.9);
    }

    .audio-duration {
    color: #8E8E93;
    font-size: 13px;
    margin-left: 8px;
    min-width: 35px;
    text-align: right;
    font-weight: 400;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    }

    /* Para mensajes del usuario, texto en blanco */
    .user-message .audio-duration {
    color: rgba(255, 255, 255, 0.8);
    }

    /* Variaciones en altura para simular ondas de audio reales */
    .waveform-bar:nth-child(1) { height: 8px; }
    .waveform-bar:nth-child(2) { height: 16px; }
    .waveform-bar:nth-child(3) { height: 12px; }
    .waveform-bar:nth-child(4) { height: 24px; }
    .waveform-bar:nth-child(5) { height: 6px; }
    .waveform-bar:nth-child(6) { height: 18px; }
    .waveform-bar:nth-child(7) { height: 28px; }
    .waveform-bar:nth-child(8) { height: 14px; }
    .waveform-bar:nth-child(9) { height: 32px; }
    .waveform-bar:nth-child(10) { height: 10px; }
    .waveform-bar:nth-child(11) { height: 20px; }
    .waveform-bar:nth-child(12) { height: 16px; }
    .waveform-bar:nth-child(13) { height: 26px; }
    .waveform-bar:nth-child(14) { height: 8px; }
    .waveform-bar:nth-child(15) { height: 22px; }
    .waveform-bar:nth-child(16) { height: 12px; }
    .waveform-bar:nth-child(17) { height: 30px; }
    .waveform-bar:nth-child(18) { height: 18px; }
    .waveform-bar:nth-child(19) { height: 14px; }
    .waveform-bar:nth-child(20) { height: 24px; }
    .waveform-bar:nth-child(21) { height: 10px; }
    .waveform-bar:nth-child(22) { height: 28px; }
    .waveform-bar:nth-child(23) { height: 16px; }
    .waveform-bar:nth-child(24) { height: 20px; }
    .waveform-bar:nth-child(25) { height: 8px; }
    .waveform-bar:nth-child(26) { height: 26px; }
    .waveform-bar:nth-child(27) { height: 12px; }
    .waveform-bar:nth-child(28) { height: 22px; }
    .waveform-bar:nth-child(29) { height: 18px; }
    .waveform-bar:nth-child(30) { height: 14px; }

    /* Ocultar la línea de tiempo original */
    .audio-timeline {
    display: none;
    }

    /* Contenedor para el texto del mensaje debajo del audio */
    .audio-message-text {
    color: #2C2C2E;
    font-size: 15px;
    line-height: 1.4;
    margin-top: 4px;
    word-wrap: break-word;
    }

    /* Para mensajes del usuario, texto en blanco */
    .user-message .audio-message-text {
    color: white;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        }
    }

    /* Animación para el botón de grabación */
    .voice-btn.recording {
        background: #ff4444 !important;
        animation: recording-pulse 1.5s infinite;
    }

    @keyframes recording-pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(255, 68, 68, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
        }
    }

    /* Contenedor para los botones de feedback */
    .audio-feedback-buttons {
    display: flex;
    gap: 12px;
        margin-top: 8px;
    align-items: center;
    }

    .feedback-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #8E8E93;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .feedback-btn:hover {
    color: #007AFF;
    transform: scale(1.1);
    }

    .feedback-btn svg {
    width: 18px;
    height: 18px;
    }

    .feedback-btn.active {
    color: #007AFF;
    }

    .feedback-btn.active.dislike {
    color: #007AFF;
    }

    /* Avatar del bot */
    .bot-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

    /* Mejoras responsivas para audio */
    @media (max-width: 768px) {
        .audio-container {
            min-width: 180px;
            max-width: 250px;
            gap: 8px;
            padding: 8px;
        }
        
        .audio-play-btn {
            width: 35px;
            height: 35px;
        }
        
        .audio-time {
            font-size: 11px;
            min-width: 30px;
        }
    }

    @keyframes pulse-audio {
        0% { 
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(15, 105, 177, 0.7);
        }
        70% { 
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(15, 105, 177, 0.3);
        }
        100% { 
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(15, 105, 177, 0);
        }
    }

    /* Animación de ondas de sonido */
    @keyframes sound-waves {
        0% {
            box-shadow: 0 0 0 0 rgba(15, 105, 177, 0.8);
            opacity: 0.8;
        }
        100% {
            box-shadow: 0 0 0 10px rgba(15, 105, 177, 0),
                    0 0 0 20px rgba(15, 105, 177, 0),
                    0 0 0 30px rgba(15, 105, 177, 0);
            opacity: 0;
        }
    }

    .audio-message-container.playing .audio-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: sound-waves 1.5s infinite;
        z-index: -1;
    }

    /* Ajustes para el contenedor de contenido del mensaje */
    .message-content-container {
        display: flex;
        flex-direction: column;
    }

    /* Estilos mejorados para botones y elementos interactivos */
    .option-card {
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        border-radius: 0.75rem;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
    }

    .option-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.7s ease;
        z-index: 1;
    }

    .option-card:hover::before {
        left: 100%;
    }

    .option-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 58, 112, 0.12);
    }

    /* Efectos de enfoque mejorados para accesibilidad */
    *:focus {
        outline: 2px solid rgba(0, 86, 154, 0.5);
        outline-offset: 2px;
    }

    /* Animación de carga sutil */
    @keyframes shimmer {
        0% {
            background-position: -1000px 0;
        }
        100% {
            background-position: 1000px 0;
        }
    }

    .loading {
        position: relative;
        overflow: hidden;
    }

    .loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        background-size: 1000px 100%;
        /* ELIMINADO shimmer - causa flashes */
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .audio-message-container {
            max-width: 250px;
            padding: 10px 12px;
        }
        
        .audio-icon {
            width: 32px;
            height: 32px;
            margin-right: 12px;
        }
        
        .audio-icon svg {
            width: 18px;
            height: 18px;
        }
        
        .audio-time {
            font-size: 9px;
        }
    }

    /* Estilos para botones de voz mejorados */
    .voice-button {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
    }

    .voice-button::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(0,132,255,0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .voice-button:hover::before {
        opacity: 1;
    }

    .voice-button.recording {
        animation: pulse-recording 2s infinite;
        box-shadow: 0 0 20px rgba(187, 0, 0, 0.5);
        background-color: #b30000 !important;
    }

    .voice-button.recording::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px solid #b30000;
        border-radius: 50%;
        animation: ripple 1.5s infinite;
    }

    @keyframes pulse-recording {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(179, 0, 0, 0.7);
        }
        70% {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(179, 0, 0, 0.3);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(179, 0, 0, 0);
        }
    }

    @keyframes ripple {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(1.5);
            opacity: 0;
        }
    }

    /* Animación de ondas de voz */
    .voice-waves {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 2px;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .voice-waves.active {
        opacity: 1;
        bottom: -30px;
    }

    .wave {
        width: 3px;
        height: 20px;
        background: #0084ff;
        border-radius: 3px;
    }

    .wave:nth-child(1) { animation: wave 1s ease-in-out infinite; }
    .wave:nth-child(2) { animation: wave 1s ease-in-out infinite -0.2s; }
    .wave:nth-child(3) { animation: wave 1s ease-in-out infinite -0.4s; }
    .wave:nth-child(4) { animation: wave 1s ease-in-out infinite -0.6s; }
    .wave:nth-child(5) { animation: wave 1s ease-in-out infinite -0.8s; }

    @keyframes wave {
        0%, 100% { transform: scaleY(0.5); }
        50% { transform: scaleY(1); }
    }

    /* Estilos mejorados para mensajes */
    .message {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }





    .user-message {
        transform: translateX(0);
    }


    .bot-message {
        transform: translateX(0);
    }



    /* Efectos de entrada para mensajes */
    @keyframes slideInFromRight {
        0% {
            transform: translateX(100%);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideInFromLeft {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .user-message.new {
        animation: slideInFromRight 0.5s ease-out;
    }

    .bot-message.new {
        animation: slideInFromLeft 0.5s ease-out;
    }

    /* Indicador de escritura mejorado */
    .thinking-indicator {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        margin: 8px 0;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .thinking-dots {
        display: flex;
        gap: 4px;
    }

    .thinking-dots span {
        width: 8px;
        height: 8px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        animation: thinking-pulse 1.4s infinite ease-in-out;
    }

    .thinking-dots span:nth-child(1) { animation-delay: 0s; }
    .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
    .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

    @keyframes thinking-pulse {
        0%, 80%, 100% {
            transform: scale(0.8);
            opacity: 0.5;
        }
        40% {
            transform: scale(1.2);
            opacity: 1;
        }
    }

    /* Mejoras en la imagen de perfil */
    .profile-image {
        transition: all 0.5s ease;
        position: relative;
    }

    .profile-image::after {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border-radius: 50%;
        background: linear-gradient(45deg, #00569a, #0084ff);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .profile-image:hover::after {
        opacity: 0.7;
    }

    /* Sombras de texto mejoradas */
    h1, h2, .subtitle {
        transition: text-shadow 0.3s ease;
    }

    h1:hover, h2:hover, .subtitle:hover {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    /* Estilos responsive para el sistema de redimensionamiento */
    @media (max-width: 1024px) {
        .contenedor {
            flex-direction: column;
        }
        
        .chat-section {
            flex: 1 1 auto !important;
            min-width: 100% !important;
            max-width: 100% !important;
            height: 60vh;
            min-height: 400px;
        }
        
        .products-section {
            flex: 0 0 40vh;
            border-right: none;
            border-bottom: 2px solid var(--border-color);
        }
        
        /* Deshabilitar redimensionamiento horizontal en móvil */
        .chat-section::before {
            display: none;
        }
        
        /* COMENTADO - Para implementación futura del redimensionamiento vertical
        .chat-messages-container::before {
            display: block;
        }
        */
    }

    @media (max-width: 768px) {
        .resize-indicator {
            top: 10px;
            right: 10px;
            font-size: 0.8rem;
            padding: 6px 12px;
        }
        
        .chat-section {
            min-height: 300px;
        }
        
        /* COMENTADO - Para implementación futura
        .chat-messages-container {
            min-height: 150px;
        }
        */
    }

    /* Mejoras de accesibilidad para el redimensionamiento */
    .chat-section:focus-within::before {
        opacity: 0.8;
    }

    /* COMENTADO - Para implementación futura
    .chat-messages-container:focus-within::before {
        opacity: 0.8;
    }
    */

    /* Indicador de redimensionamiento mejorado para diferentes estados */
    .resize-indicator.horizontal {
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
    }

    /* COMENTADO - Para implementación futura
    .resize-indicator.vertical {
        background: linear-gradient(135deg, var(--sodimac-orange) 0%, #e55c2b 100%);
    }
    */

    /* Animación mejorada para handles de redimensionamiento */
    @keyframes handlePulse {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 1; }
    }

    .chat-section.resize-hint::before {
        animation: handlePulse 2s infinite;
    }

    /* COMENTADO - Para implementación futura
    .chat-messages-container.resize-hint::before {
        animation: handlePulse 2s infinite;
    }
    */

    /* Tooltip para ayudar al usuario - MÁS SUTIL */
    .resize-tooltip {
        position: absolute;
        background: rgba(0, 102, 204, 0.8); /* Menos opaco */
        color: white;
        padding: 3px 6px; /* Más pequeño */
        border-radius: 3px; /* Más pequeño */
        font-size: 0.7rem; /* Más pequeño */
        font-weight: 400; /* Normal weight */
        pointer-events: none;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.15s ease; /* Más rápido */
        white-space: nowrap;
    }

    .resize-tooltip.show {
        opacity: 0.8; /* No completamente opaco */
    }

    /* Animaciones para notificaciones */
    @keyframes slideInNotification {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideOutNotification {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }

    /* Disclaimer de IA sutil - Inspirado en Gemini, ChatGPT y Claude */
    .ai-disclaimer-subtle {
        display: none; /* Oculto por defecto */
        position: static;
        margin: 8px auto 8px auto; /* Reducido de 20px auto 16px auto */
        color: #9ca3af;
        font-size: 9px; /* Reducido de 10px */
        font-weight: 400;
        opacity: 0.6;
        transition: all 0.3s ease;
        text-align: center;
        line-height: 1.1; /* Reducido de 1.2 */
        padding: 0 12px; /* Reducido de 0 20px */
        width: 100%;
        box-sizing: border-box;
        animation: fadeInDisclaimer 0.5s ease-in-out;
    }

    /* Mostrar disclaimer solo después del primer mensaje de Pedro */
    .ai-disclaimer-subtle.show-after-first-response {
        display: block;
    }

    @keyframes fadeInDisclaimer {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 0.6;
            transform: translateY(0);
        }
    }

    .ai-disclaimer-subtle:hover {
        opacity: 0.8;
    }

    .ai-disclaimer-subtle small {
        font-size: inherit;
        color: inherit;
        font-weight: inherit;
    }

    /* Responsive para el disclaimer sutil */
    @media (max-width: 768px) {
        .ai-disclaimer-subtle {
            margin: 6px auto 6px auto; /* Reducido de 16px auto 12px auto */
            font-size: 8px; /* Reducido de 9px */
            padding: 0 8px; /* Reducido de 0 16px */
        }
    }

    /* Tema oscuro automático */
    @media (prefers-color-scheme: dark) {
        .ai-disclaimer-subtle {
            color: #6b7280;
        }
    }

    /* Estilos para el Aviso Importante */
    .important-disclaimer {
        display: block; /* Visible por defecto */
        position: absolute;
        bottom: 36px; /* Aumentado de 30px para mayor separación con créditos */
        left: 50%;
        transform: translateX(-50%);
        margin: 0; /* Sin margen para posición absoluta */
        width: 90%;
        color: #6b7280; /* Color más oscuro (era del hover) */
        font-size: 9px; /* Reducido de 10px */
        font-weight: 400;
        opacity: 0.8; /* Aumentado de 0.6 a 0.8 (era del hover) */
        transition: none; /* Sin transición */
        text-align: center;
        line-height: 1.1; /* Reducido de 1.2 */
        padding: 0 12px; /* Reducido de 0 20px */
        width: 100%;
        box-sizing: border-box;
        animation: fadeInImportantDisclaimer 0.5s ease-in-out;
    }

    .important-disclaimer small {
        font-size: inherit;
        color: inherit;
        font-weight: inherit;
        display: block;
        line-height: 1.3;
    }

    .important-disclaimer strong {
        color: #4b5563;
        font-weight: 600;
    }

    /* Animación de entrada para el aviso importante */
    @keyframes fadeInImportantDisclaimer {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 0.6;
            transform: translateY(0);
        }
    }

    /* Animación de salida para el aviso importante */
    @keyframes fadeOutImportantDisclaimer {
        from {
            opacity: 0.6;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-10px);
        }
    }

    .important-disclaimer.fade-out {
        animation: fadeOutImportantDisclaimer 0.4s ease-in-out forwards;
    }

    .important-disclaimer:hover {
        opacity: 0.8; /* Sin cambio en hover */
        transform: translateX(-50%); /* Sin animación */
    }

    /* Responsive para el aviso importante */
    @media (max-width: 768px) {
        .important-disclaimer {
            bottom: 32px; /* Aumentado de 28px para mantener separación */
            font-size: 8px; /* Reducido de 9px */
            padding: 0 8px; /* Reducido de 0 16px */
            width: 95%;
        }
    }

    /* Tema oscuro automático para aviso importante */
    @media (prefers-color-scheme: dark) {
        .important-disclaimer {
            color: #6b7280; /* Mismo color oscuro que ai-disclaimer-subtle */
        }
        
        .important-disclaimer strong {
            color: #9ca3af;
        }
    }

    /* Estilos para el selector de imagen modal */
    .image-selector-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .image-selector-modal.show {
        opacity: 1;
        visibility: visible;
    }

    .image-selector-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
    }

    .image-selector-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 24px 24px 0 0;
        padding: 0;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.3), 0 -8px 25px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .image-selector-modal.show .image-selector-content {
        transform: translateY(0);
    }

    .image-selector-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 28px 20px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
        background: rgba(255, 255, 255, 0.95);
        border-radius: 24px 24px 0 0;
    }

    .image-selector-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
        font-family: 'Roboto', sans-serif;
        letter-spacing: -0.025em;
    }

    .image-selector-close {
        background: rgba(248, 250, 252, 0.8);
        border: 1px solid rgba(226, 232, 240, 0.6);
        font-size: 20px;
        color: #64748b;
        cursor: pointer;
        padding: 8px;
        border-radius: 12px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        font-weight: 300;
    }

    .image-selector-close:hover {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.2);
        color: #ef4444;
        transform: scale(1.05);
    }

    .image-selector-options {
        padding: 12px 20px 36px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: rgba(248, 250, 252, 0.5);
    }

    .image-selector-option {
        display: flex;
        align-items: center;
        padding: 20px 24px;
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid rgba(226, 232, 240, 0.6);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-align: left;
        width: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        backdrop-filter: blur(10px);
    }

    .image-selector-option:hover {
        background: rgba(255, 255, 255, 1);
        border-color: #3b82f6;
        transform: translateY(-2px); /* scale eliminado para evitar style recalculation */
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .image-selector-option:active {
        transform: translateY(-1px); /* scale eliminado para evitar style recalculation */
    }

    .image-selector-modal .option-icon {
         width: 56px;
         height: 56px;
         background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
         border-radius: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-right: 20px;
         flex-shrink: 0;
         box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
         transition: all 0.3s ease;
     }
 
     .image-selector-modal .option-icon svg {
         width: 28px;
         height: 28px;
         color: white;
         filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
     }
 
     .image-selector-modal .option-text {
         display: flex;
         flex-direction: column;
         flex: 1;
     }
 
     .image-selector-modal .option-title {
         font-size: 18px;
         font-weight: 600;
         color: #1e293b;
         margin-bottom: 4px;
         font-family: 'Roboto', sans-serif;
         letter-spacing: -0.025em;
     }
 
     .image-selector-modal .option-subtitle {
         font-size: 15px;
         color: #64748b;
         font-weight: 400;
         line-height: 1.4;
     }
 
     .image-selector-modal .camera-option:hover .option-icon {
         background: linear-gradient(135deg, #10b981 0%, #059669 100%);
         /* transform: scale(1.05); ELIMINADO - causa style recalculation */
         box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
     }
 
     .image-selector-modal .gallery-option:hover .option-icon {
         background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
         /* transform: scale(1.05); ELIMINADO - causa style recalculation */
         box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
     }

    /* Animación de entrada para las opciones */
    .image-selector-modal.show .image-selector-option:nth-child(1) {
        animation: slideInUp 0.4s ease 0.1s both;
    }

    .image-selector-modal.show .image-selector-option:nth-child(2) {
        animation: slideInUp 0.4s ease 0.2s both;
    }

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

    /* Responsive para tablets */
    @media (min-width: 768px) {
        .image-selector-content {
            max-width: 480px;
            left: 50%;
            transform: translateX(-50%) translateY(100%);
            border-radius: 24px;
            bottom: 20px;
        }
        
        .image-selector-modal.show .image-selector-content {
            transform: translateX(-50%) translateY(0);
        }
    }


    
    .tab-counter {
        font-size: 0.6rem;
        padding: 0 3px;
        min-width: 12px;
    }
    
    .tab-close {
        width: 14px;
        height: 14px;
        font-size: 10px;
    }

    .tab-icon {
        font-size: 0.8rem;
    }
    
    .tab-counter {
        font-size: 0.55rem;
        padding: 0 2px;
        min-width: 10px;
    }
    
    .tab-close {
        width: 12px;
        height: 12px;
        font-size: 9px;
    }

    /* Estilos para vista agrupada */
    .grouped-products-view {
        padding: 20px;
        background: white;
        border-radius: 12px;
        margin-bottom: 20px;
    }
    
    .grouped-view-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 24px 0;
        text-align: center;
        border-bottom: 2px solid var(--sodimac-blue);
        padding-bottom: 12px;
    }
    
    .back-to-specific-view {
        background: var(--sodimac-blue);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 20px;
        transition: var(--transition-smooth);
        font-size: 0.9rem;
    }
    
    .back-to-specific-view:hover {
        background: var(--sodimac-darkblue);
        transform: translateY(-1px);
    }
    
    .grouped-category-section {
        margin-bottom: 32px;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        overflow: hidden;
        background: #fafbfc;
    }
    
    .grouped-category-header {
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        color: white;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .grouped-category-header .category-icon {
        font-size: 1.2rem;
        filter: brightness(1.2);
    }
    
    .grouped-category-header h4 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        flex: 1;
    }
    
    .grouped-category-header .category-count {
        background: rgba(255, 255, 255, 0.2);
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .grouped-category-header .category-contexts {
        background: rgba(255, 255, 255, 0.15);
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 0.75rem;
        font-style: italic;
        opacity: 0.9;
    }
    
    .grouped-category-section .product-carousel {
        margin: 0;
        padding: 20px;
        background: white;
    }
    
    /* Estilos para pestaña de vista agrupada */
    .grouped-view-tab {
        background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        color: white;
        border-color: #6c757d;
    }
    
    .grouped-view-tab:hover {
        background: linear-gradient(135deg, #495057 0%, #343a40 100%);
        border-color: #495057;
        transform: translateY(-1px);
        box-shadow: var(--shadow-medium);
    }
    
    .grouped-view-tab.active {
        background: linear-gradient(135deg, #495057 0%, #343a40 100%);
        box-shadow: var(--shadow-medium);
    }

    /* Responsividad para vista agrupada */
    @media (max-width: 768px) {
        .grouped-products-view {
            padding: 16px;
            margin-bottom: 16px;
        }
        
        .grouped-view-title {
            font-size: 1.25rem;
            margin-bottom: 20px;
        }
        
        .grouped-category-header {
            padding: 12px 16px;
            font-size: 0.9rem;
        }
        
        .grouped-category-header h4 {
            font-size: 1rem;
        }
        
        .grouped-category-section .product-carousel {
            padding: 16px;
        }
        
        .back-to-specific-view {
            padding: 8px 16px;
            font-size: 0.85rem;
        }
    }

    /* ============================
    SISTEMA DE COMPARACIÓN DE PRODUCTOS
    ============================ */

    /* Botón de comparar en productos */
    .compare-button {
        background-color: var(--sodimac-blue);
        color: white;
        border: none;
        border-radius: 5px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        text-align: center;
        margin-top: 5px;
        position: relative;
        overflow: hidden;
    }

    .compare-button:hover {
        background-color: var(--sodimac-darkblue);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 86, 154, 0.3);
    }

    .compare-button:active {
        transform: translateY(0);
    }

    .compare-button.selected {
        background-color: #28a745;
        animation: pulse 2s infinite;
    }

    .compare-button.selected:hover {
        background-color: #218838;
    }

    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
        100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
    }

    /* Animación shake para error de límite de comparación */
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
        20%, 40%, 60%, 80% { transform: translateX(2px); }
    }

    .compare-button.error {
        background-color: #dc3545;
        animation: shake 0.5s ease-in-out;
    }

    .compare-button.error:hover {
        background-color: #c82333;
    }

    /* Badge contador flotante */
    .compare-floating-badge {
        position: fixed;
        bottom: 30px;
        left: 30px;
        display: none;
        align-items: center;
        gap: 8px;
        z-index: 1000;
        user-select: none;
    }

    .compare-badge-main {
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        color: white;
        padding: 12px 20px;
        border-radius: 50px 25px 25px 50px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0 8px 25px rgba(0, 86, 154, 0.4);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .compare-badge-main:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(0, 86, 154, 0.6);
    }

    .compare-badge-clear {
        background: #dc2626;
        color: white;
        padding: 8px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
    }

    .compare-badge-clear:hover {
        background: #b91c1c;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
    }

    .compare-badge-clear svg {
        width: 16px;
        height: 16px;
    }

    .compare-floating-badge.show {
        display: flex;
        animation: slideInUp 0.4s ease-out;
    }

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

    .compare-badge-icon {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }

    .compare-badge-count {
        background: rgba(255, 255, 255, 0.2);
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
        min-width: 24px;
        text-align: center;
    }

    /* ===== MODAL DE COMPARACIÓN - DISEÑO MEJORADO ===== */
    .comparison-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 86, 154, 0.2) 100%);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        /* backdrop-filter: blur(12px); ELIMINADO - causa style recalculation storm */
        /* -webkit-backdrop-filter: blur(12px); ELIMINADO - causa style recalculation storm */
        /* Fix específico para motores Chromium (Chrome/Brave) */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .comparison-modal.show {
        display: flex;
    }

    /* Animación optimizada con will-change y contain para evitar layout thrashing */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Clase específica para el loader para optimizar GPU */
    .pedro-loading-icon {
        will-change: transform;
        contain: layout style paint;
        backface-visibility: hidden;
    }

    .comparison-content {
        background: white;
        border-radius: 24px;
        width: 95%;
        max-width: 1400px;
        max-height: 92vh;
        overflow: hidden;
        box-shadow: 
            0 32px 64px rgba(0, 0, 0, 0.12),
            0 16px 32px rgba(0, 0, 0, 0.08),
            0 8px 16px rgba(0, 0, 0, 0.04);
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.15);
        /* Fix específico para parpadeos en Chromium */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* will-change: contents; ELIMINADO - puede causar excessive style recalc */
    }

    /* Animaciones modalSlide eliminadas - ahora usamos transiciones CSS simples */

    .comparison-header {
        background: linear-gradient(135deg, #00569A 0%, #003A70 100%);
        color: white;
        padding: 32px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 24px 24px 0 0;
        position: relative;
        overflow: hidden;
    }

    .comparison-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
        pointer-events: none;
    }



    .comparison-title {
        font-size: 28px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 16px;
        letter-spacing: -0.5px;
        position: relative;
        z-index: 1;
    }

    .comparison-title svg {
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    }

    .comparison-close {
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: white;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 20px;
        font-weight: bold;
        position: relative;
        z-index: 1;
        backdrop-filter: blur(8px);
    }

    .comparison-close:hover {
        background: rgba(255, 255, 255, 0.25);
        /* transform: scale(1.05); ELIMINADO - puede causar style recalc ocasional */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .comparison-close:active {
        /* transform: scale(0.98); ELIMINADO - causa style recalculation */
        opacity: 0.8;
    }

    .comparison-body {
        padding: 40px;
        overflow-y: auto;
        max-height: calc(92vh - 120px);
        scroll-behavior: smooth;
        /* Fix anti-parpadeo específico para Chrome/Brave */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        contain: layout style paint;
        overflow: auto; /* Fix mencionado en Chakra UI issue */
    }

    /* Custom scrollbar moderno */
    .comparison-body::-webkit-scrollbar {
        width: 8px;
    }

    .comparison-body::-webkit-scrollbar-track {
        background: #f1f3f4;
        border-radius: 4px;
    }

    .comparison-body::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #00569A 0%, #003A70 100%);
        border-radius: 4px;
        transition: background 0.3s ease;
    }

    .comparison-body::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #003A70 0%, #00569A 100%);
    }

    .comparison-table-container {
        overflow-x: auto;
        margin-bottom: 20px;
    }

    .comparison-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* Estilos mejorados para análisis con Pedro */
    .pedro-analysis-loading {
        text-align: center;
        padding: 80px 40px;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border-radius: 20px;
        margin: 20px 0;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 86, 154, 0.1);
    }

    .pedro-analysis-loading::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--sodimac-blue), transparent);
        /* Animación removida para evitar flickering */
    }

    .pedro-analysis-loading .loading-header {
        margin-bottom: 40px;
        position: relative;
        z-index: 2;
    }

    .pedro-analysis-loading .pedro-icon {
        font-size: 64px;
        margin-bottom: 25px;
        display: block;
        /* Animación removida para evitar flickering */
        filter: drop-shadow(0 4px 8px rgba(0, 86, 154, 0.2));
    }

    .pedro-analysis-loading h3 {
        color: var(--sodimac-darkblue);
        font-size: 28px;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(135deg, var(--sodimac-blue), var(--sodimac-darkblue));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .loading-animation {
        margin: 40px 0;
        position: relative;
    }

    .pedro-analysis-loading .loading-dots {
        display: inline-flex;
        gap: 12px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    /* Estilos para modo fallback */
    .pedro-badge.fallback-mode {
        background: linear-gradient(135deg, #ff9800, #f57c00);
        border: 2px solid #e65100;
    }

    .pedro-badge.fallback-mode .pedro-text {
        font-weight: 600;
    }

    .fallback-note {
        display: block;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 2px;
        font-style: italic;
    }

    /* Botón de reintentar */
    .btn-regenerate {
        background: linear-gradient(135deg, #2196F3, #1976D2);
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        margin: 0 auto;
    }

    .btn-regenerate:hover {
        background: linear-gradient(135deg, #1976D2, #1565C0);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
    }

    .btn-regenerate svg {
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease;
    }

    .btn-regenerate:hover svg {
        transform: rotate(180deg);
    }

    /* Mensaje de procesamiento fallback */
    .processing-fallback {
        text-align: center;
        padding: 40px 20px;
        color: #666;
        font-style: italic;
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        border-radius: 12px;
        margin: 20px 0;
        border: 1px dashed #ccc;
    }

    .processing-fallback::before {
        content: '⏳ ';
        font-size: 20px;
        margin-right: 8px;
    }

    .pedro-analysis-loading .loading-dots span {
        width: 16px;
        height: 16px;
        background: linear-gradient(135deg, var(--sodimac-blue), var(--sodimac-darkblue));
        border-radius: 50%;
        /* Animación removida para evitar flickering */
        box-shadow: 0 2px 8px rgba(0, 86, 154, 0.3);
    }

    .pedro-analysis-loading p {
        color: #666;
        font-size: 18px;
        margin: 0;
        font-weight: 500;
        position: relative;
        z-index: 2;
    }

    /* Header de análisis por Pedro */
    .pedro-analysis-header {
        margin-bottom: 25px;
        display: flex;
        justify-content: center;
    }

    .pedro-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #FF6B35 0%, #E55A2B 100%);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
    }

    .pedro-badge .pedro-icon {
        font-size: 16px;
    }

    /* Contenedor con análisis de Pedro */
    .comparison-container.pedro-powered {
        background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
        border: 2px solid #FFE8E0;
        border-radius: 16px;
        padding: 30px;
    }

    /* Estilos mejorados para tabla de especificaciones */
    .spec-value-empty {
        color: #9ca3af !important;
        font-style: italic;
        opacity: 0.7;
    }

    .no-spec-text {
        color: #9ca3af;
        font-size: 0.9em;
        font-weight: 400;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 16px;
        text-align: center;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
        transition: background-color 0.2s ease;
    }

    .comparison-table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .spec-label {
        font-weight: 600;
        color: var(--sodimac-darkblue);
        text-align: left !important;
        background-color: #f8f9fa;
        position: sticky;
        left: 0;
        z-index: 2;
    }

    .product-comparison-button {
        background: linear-gradient(135deg, var(--sodimac-orange) 0%, #E55A2B 100%);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .product-comparison-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
        background: linear-gradient(135deg, #E55A2B 0%, #D14A1F 100%);
    }

    /* Estilos para separador de secciones */
    .specs-separator {
        display: flex;
        align-items: center;
        margin: 30px 0 25px 0;
        gap: 15px;
    }

    .separator-line {
        flex: 1;
        height: 2px;
        background: linear-gradient(to right, transparent, var(--sodimac-blue), transparent);
    }

    .separator-text {
        font-size: 14px;
        font-weight: 700;
        color: var(--sodimac-darkblue);
        background: white;
        padding: 8px 16px;
        border-radius: 20px;
        border: 2px solid var(--sodimac-blue);
        white-space: nowrap;
    }

    /* ===== SECCIÓN DE PRODUCTOS SELECCIONADOS MEJORADA ===== */
    .product-action-cards {
        margin: 0 0 40px 0;
        padding: 32px;
        background: linear-gradient(135deg, #f8fffe 0%, #f0fcfc 100%);
        border-radius: 20px;
        border: 1px solid rgba(0, 86, 154, 0.08);
        box-shadow: 0 8px 32px rgba(0, 86, 154, 0.04);
        position: relative;
        overflow: hidden;
    }

    .product-action-cards::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #00569A 0%, #FF6B35 100%);
    }

    .product-action-cards h4 {
        color: #1a365d;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        letter-spacing: -0.3px;
    }

    .action-cards-carousel {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        padding: 12px 8px 20px 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 86, 154, 0.3) rgba(0, 0, 0, 0.05);
        scroll-snap-type: x mandatory;
    }

    .action-cards-carousel::-webkit-scrollbar {
        height: 8px;
    }

    .action-cards-carousel::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }

    .action-cards-carousel::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, rgba(0, 86, 154, 0.4) 0%, rgba(255, 107, 53, 0.4) 100%);
        border-radius: 4px;
        transition: background 0.3s ease;
    }

    .action-cards-carousel::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg, rgba(0, 86, 154, 0.6) 0%, rgba(255, 107, 53, 0.6) 100%);
    }

    .comparison-product-card {
        min-width: 180px;
        max-width: 180px;
        min-height: 260px;
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.06),
            0 4px 10px rgba(0, 0, 0, 0.04);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        position: relative;
        flex-shrink: 0;
        animation: cardSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: calc(var(--index) * 0.1s);
        opacity: 0;
        border: 1px solid rgba(0, 86, 154, 0.08);
        scroll-snap-align: start;
    }

    .comparison-product-card:hover {
        /* transform: translateY(-8px) scale(1.02); ELIMINADO - causa style recalc ocasional */
        transform: translateY(-4px); /* Solo translateY sin scale */
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.12),
            0 8px 16px rgba(0, 0, 0, 0.08);
        border-color: rgba(0, 86, 154, 0.2);
    }

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

    .comparison-product-image-container {
        height: 140px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        position: relative;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .comparison-product-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 12px;
    }

    .comparison-product-card:hover .comparison-product-image {
        /* transform: scale(1.08); ELIMINADO - causa style recalc ocasional */
        /* opacity: 0.9; ELIMINADO TAMBIÉN - evitar cualquier transform en hover */
        transform: none;
        opacity: 1;
    }

    .comparison-product-info {
        padding: 16px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: space-between;
        gap: 8px;
    }

    .comparison-product-name {
        font-size: 14px;
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 8px;
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 48px;
        line-height: 1.4;
        letter-spacing: -0.2px;
    }

    .comparison-product-price {
        font-size: 18px;
        font-weight: 800;
        color: #00569A;
        margin-bottom: 12px;
        letter-spacing: -0.3px;
    }

    .comparison-buy-button {
        background: linear-gradient(135deg, #00569A 0%, #003A70 100%);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        width: 100%;
        text-align: center;
        margin-top: auto;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        position: relative;
        overflow: hidden;
    }

    .comparison-buy-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .comparison-buy-button:hover::before {
        left: 100%;
    }

    .comparison-buy-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 86, 154, 0.4);
        background: linear-gradient(135deg, #003A70 0%, #00569A 100%);
    }

    .comparison-buy-button:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(0, 86, 154, 0.3);
    }

    @keyframes slideIn {
        from {
            transform: translateX(30px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Footer del modal de comparación */
    .comparison-footer {
        margin-top: 30px;
        padding-top: 25px;
        border-top: 2px solid #e9ecef;
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-regenerate {
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-regenerate:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 86, 154, 0.4);
    }



    /* Estilos para contenido generado por Pedro */
    .pedro-comparison-result {
        background: white;
        border-radius: 12px;
        padding: 25px;
        margin: 20px 0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .pedro-comparison-result h1,
    .pedro-comparison-result h2,
    .pedro-comparison-result h3,
    .pedro-comparison-result h4 {
        color: var(--sodimac-darkblue);
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .pedro-comparison-result h1:first-child,
    .pedro-comparison-result h2:first-child,
    .pedro-comparison-result h3:first-child,
    .pedro-comparison-result h4:first-child {
        margin-top: 0;
    }

    .pedro-comparison-result ul,
    .pedro-comparison-result ol {
        padding-left: 20px;
        margin: 15px 0;
    }

    .pedro-comparison-result li {
        margin: 8px 0;
        line-height: 1.5;
    }

    .pedro-comparison-result table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .pedro-comparison-result th,
    .pedro-comparison-result td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid #e9ecef;
    }

    .pedro-comparison-result th {
        background: #f8f9fa;
        font-weight: 700;
        color: var(--sodimac-darkblue);
    }

    .ai-recommendation {
        background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
        border-left: 4px solid #4CAF50;
        border-radius: 8px;
        padding: 20px;
        margin: 25px 0;
    }

    .ai-recommendation h4 {
        color: #2e7d32;
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 18px;
    }

    /* Estilos para contenido de texto plano de IA */
    .ai-text-content {
        line-height: 1.6;
        color: #333;
    }

    .ai-text-content p {
        margin: 12px 0;
        text-align: justify;
    }

    .ai-text-content p:first-child {
        margin-top: 0;
    }

    .ai-text-content p:last-child {
        margin-bottom: 0;
    }

    /* Estilos para formato inteligente de respuesta IA */
    .ai-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        padding: 15px;
        background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);
        border-radius: 12px;
        border-left: 4px solid var(--sodimac-blue);
    }

    .ai-header .ai-icon {
        font-size: 24px;
    }

    .ai-header h3 {
        margin: 0;
        color: var(--sodimac-blue);
        font-size: 20px;
        font-weight: 600;
    }

    .section-title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin: 20px 0;
        padding: 15px;
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, #1565c0 100%);
        color: white;
        border-radius: 12px;
    }

    .section-header {
        font-size: 18px;
        font-weight: 600;
        margin: 20px 0 15px 0;
        padding: 10px 15px;
        background: #f5f5f5;
        border-left: 4px solid var(--sodimac-orange);
        border-radius: 0 8px 8px 0;
        color: #333;
    }

    .pros-cons-section {
        margin: 15px 0;
        padding: 15px;
        background: #fafafa;
        border-radius: 12px;
        border: 1px solid #e0e0e0;
    }

    .pro-item {
        margin: 8px 0;
        padding: 10px 15px;
        background: #e8f5e8;
        border-left: 4px solid #4caf50;
        border-radius: 0 8px 8px 0;
        color: #2e7d32;
    }

    /* COMENTADO - conflicto con modal de comparación
    .con-item {
        margin: 8px 0;
        padding: 10px 15px;
        background: #fff3e0;
        border-left: 4px solid #ff9800;
        border-radius: 0 8px 8px 0;
        color: #f57c00;
    } */

    .product-description {
        margin: 12px 0;
        padding: 15px;
        background: #ffffff;
        border: 1px solid #e1e5e9;
        border-radius: 10px;
        font-weight: 500;
        color: #2c3e50;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .recommendation-section {
        margin-top: 20px;
        padding: 20px;
        background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
        border: 2px solid #4caf50;
        border-radius: 15px;
    }

    .recommendation-text {
        font-size: 16px;
        line-height: 1.7;
        color: #2e7d32;
        font-weight: 500;
        text-align: justify;
    }

    /* Separador de secciones */
    .specs-separator {
        display: flex;
        align-items: center;
        margin: 30px 0 20px 0;
        gap: 15px;
    }

    .separator-line {
        flex: 1;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--sodimac-blue) 50%, transparent 100%);
    }

    .separator-text {
        font-weight: 600;
        font-size: 14px;
        color: var(--sodimac-blue);
        padding: 8px 15px;
        background: #f8f9fa;
        border: 2px solid var(--sodimac-blue);
        border-radius: 20px;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    /* Sección de especificaciones técnicas */
    .technical-specs-section {
        margin-top: 25px;
        padding: 20px;
        background: #fafafa;
        border-radius: 15px;
        border: 1px solid #e0e0e0;
    }

    .mixed-category-note {
        background: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        color: #856404;
        text-align: center;
    }

    .mixed-category-note p {
        margin: 0;
        font-weight: 500;
    }





    /* Error de Pedro */
    .pedro-error {
        background: #ffebee;
        border-left: 4px solid #f44336;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
        color: #c62828;
        text-align: center;
    }

    /* Modo fallback */
    .comparison-container.fallback-mode {
        border: 2px solid #ff9800;
        background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
    }

    .fallback-notice {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #856404;
    }

    .fallback-icon {
        font-size: 18px;
    }

    /* Tooltip de comparación */
    .comparison-tooltip {
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 10000;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* Tooltips para sistema de comparación */
    .compare-tooltip {
        position: absolute;
        z-index: 1001;
        pointer-events: none;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .compare-tooltip.success {
        background: #28a745 !important;
        color: white !important;
    }

    .compare-tooltip.error {
        background: #dc3545 !important;
        color: white !important;
    }

    /* Animaciones para tooltips */
    @keyframes tooltipFadeIn {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    @keyframes tooltipShake {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-52%) translateY(0); }
        20%, 40%, 60%, 80% { transform: translateX(-48%) translateY(0); }
    }

    /* Responsive para nuevos elementos */
    @media (max-width: 768px) {
        .action-cards-grid {
            grid-template-columns: 1fr;
        }

        .comparison-footer {
            flex-direction: column;
            align-items: center;
        }

        .btn-regenerate {
            width: 100%;
            max-width: 300px;
            justify-content: center;
        }

        .pedro-analysis-loading {
            padding: 40px 20px;
        }

        .pedro-analysis-loading h3 {
            font-size: 20px;
        }

        .product-action-cards {
            padding: 20px 15px;
        }
    }

    .comparison-table th,
    .comparison-table td {
        padding: 16px;
        text-align: center;
        border-bottom: 1px solid #eee;
        vertical-align: top;
    }

    .comparison-table th {
        background-color: #f8f9fa;
        font-weight: 700;
        color: var(--sodimac-darkblue);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .product-comparison-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px 16px;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border-radius: 12px;
        border: 2px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .product-comparison-card:hover {
        border-color: var(--sodimac-blue);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 86, 154, 0.15);
    }

    .product-comparison-image {
        width: 100px;
        height: 100px;
        object-fit: contain;
        border-radius: 8px;
        background: white;
        padding: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .product-comparison-name {
        font-size: 12px;
        font-weight: 600;
        color: #333;
        text-align: center;
        line-height: 1.3;
        max-height: 40px;
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .product-comparison-price {
        font-size: 18px;
        font-weight: 700;
        color: var(--sodimac-blue);
        margin: 8px 0;
    }

    .product-comparison-button {
        background-color: var(--sodimac-blue);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
    }

    .product-comparison-button:hover {
        background-color: var(--sodimac-darkblue);
        transform: translateY(-1px);
    }

    .spec-row {
        background: #fafafa;
    }

    .spec-row:nth-child(even) {
        background: white;
    }

    .spec-label {
        font-weight: 600;
        color: var(--sodimac-darkblue);
        text-align: left;
        background: #f1f3f4 !important;
        border-right: 2px solid #e9ecef;
    }

    .spec-value {
        font-weight: 500;
        color: #333;
        font-size: 14px;
    }

    .spec-value.highlight {
        background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
        color: #28a745;
        font-weight: 700;
    }

    /* Nuevos estilos para análisis inteligente */
    .spec-value.highlight-best {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
        font-weight: 700;
        border-left: 4px solid #28a745;
        position: relative;
        animation: highlightPulse 2s ease-in-out;
    }

    .spec-value.highlight-good {
        background: linear-gradient(135deg, #e2f3ff 0%, #cce7ff 100%);
        color: #004085;
        font-weight: 600;
        border-left: 3px solid #007bff;
    }

    .spec-value.highlight-average {
        background: #f8f9fa;
        color: #495057;
        font-weight: 500;
    }

    .spec-value.highlight-poor {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        color: #856404;
        font-weight: 500;
        border-left: 3px solid #ffc107;
    }

    .spec-value.highlight-worst {
        background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
        color: #721c24;
        font-weight: 600;
        border-left: 4px solid #dc3545;
    }

    .spec-value.no-data {
        background: #f1f3f4;
        color: #6c757d;
        font-style: italic;
        opacity: 0.7;
    }

    /* Indicadores de especificaciones */
    .spec-indicator {
        display: inline-block;
        margin-left: 8px;
        font-weight: bold;
        font-size: 14px;
        animation: indicatorFadeIn 0.5s ease-in-out;
    }

    .spec-indicator.best {
        color: #ffd700;
        text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
    }

    .spec-indicator.good {
        color: #28a745;
    }

    .spec-indicator.poor {
        color: #ffc107;
    }

    .spec-indicator.worst {
        color: #dc3545;
    }

    /* Tooltips para especificaciones */
    .spec-value[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        opacity: 0;
        animation: tooltipFadeIn 0.3s ease-in-out forwards;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .spec-value[data-tooltip]:hover::before {
        content: '';
        position: absolute;
        bottom: 94%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #333;
        z-index: 1001;
        opacity: 0;
        animation: tooltipFadeIn 0.3s ease-in-out forwards;
    }

    .spec-value {
        position: relative;
        transition: all 0.3s ease;
    }

    .spec-value:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .no-spec-value {
        color: #999;
        font-style: italic;
    }

    .remove-product-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #dc3545;
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    }

    .remove-product-btn:hover {
        background: #c82333;
        transform: scale(1.1);
    }

    /* Responsividad */
    /* ===== RESPONSIVE DESIGN MEJORADO ===== */
    @media (max-width: 1200px) {
        .comparison-content {
            width: 98%;
            max-width: 1200px;
        }
        
        .comparison-body {
            padding: 32px;
        }
        
        .products-comparison-grid {
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        }
        
        .products-comparison-grid-three {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
    }

    @media (max-width: 768px) {
        .comparison-content {
            width: 98%;
            margin: 10px;
            max-height: 95vh;
            border-radius: 16px;
        }
        
        .comparison-header {
            padding: 24px;
            border-radius: 16px 16px 0 0;
        }
        
        .comparison-title {
            font-size: 22px;
        }
        
        .comparison-body {
            padding: 24px;
        }
        
        .product-action-cards {
            padding: 24px;
        }
        
        .comparison-product-card {
            min-width: 160px;
            max-width: 160px;
            min-height: 240px;
        }
        
        .comparison-table th,
        .comparison-table td {
            padding: 12px 8px;
            font-size: 13px;
        }
        
        .spec-label {
            padding-left: 16px !important;
        }
        
        .products-comparison-grid,
        .products-comparison-grid-three {
            grid-template-columns: 1fr;
            gap: 16px;
        }
        
        .product-pros-cons {
            padding: 20px;
        }
        
        .analysis-section,
        .pros-cons-main-section,
        .recommendation-section {
            padding: 24px;
        }
        
        .compare-floating-badge {
            bottom: 20px;
            left: 20px;
            padding: 10px 16px;
            font-size: 13px;
        }
    }

    @media (max-width: 480px) {
        .comparison-header {
            padding: 20px;
        }
        
        .comparison-title {
            font-size: 20px;
            gap: 12px;
        }
        
        .comparison-body {
            padding: 20px;
        }
        
        .comparison-table {
            font-size: 12px;
        }
        
        .comparison-product-card {
            min-width: 140px;
            max-width: 140px;
        }
        
        .comparison-product-image-container {
            height: 120px;
        }
        
        .comparison-product-name {
            font-size: 13px;
        }
        
        .comparison-product-price {
            font-size: 16px;
        }
        
        .product-action-cards {
            padding: 20px;
        }
        
        .analysis-section,
        .pros-cons-main-section,
        .recommendation-section {
            padding: 20px;
        }
    }

    /* Estilos para la sección de análisis inteligente - Optimizado para scroll */
    .comparison-container {
        max-height: 85vh;
        overflow-y: auto;
        padding: 20px;
        transform: translateZ(0);
        backface-visibility: hidden;
        scroll-behavior: smooth;
        will-change: scroll-position;
        contain: layout style paint;
    }
    
    /* ===== MICROINTERACCIONES Y EFECTOS DE ACCESIBILIDAD ===== */
    
    /* Efectos de focus para accesibilidad */
    .comparison-close:focus,
    .comparison-buy-button:focus,
    .product-comparison-button:focus {
        outline: 3px solid rgba(0, 86, 154, 0.5);
        outline-offset: 2px;
    }

    /* Animación de carga suave */
    .comparison-modal.loading .comparison-content {
        animation: contentPulse 1.5s ease-in-out infinite;
    }

    @keyframes contentPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.95; }
    }

    /* Estados de loading mejorados */
    .comparison-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 40px;
        text-align: center;
    }

    .comparison-loading .loading-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid rgba(0, 86, 154, 0.1);
        border-left: 4px solid #00569A;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 24px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .comparison-loading h3 {
        color: #1a365d;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 12px;
        letter-spacing: -0.3px;
    }

    .comparison-loading p {
        color: #4a5568;
        font-size: 16px;
        line-height: 1.6;
        max-width: 400px;
    }

    .pedro-loading-spinner {
        display: inline-block;
        margin-bottom: 20px;
    }
    .pedro-loading-spinner .svg-spinner {
        width: 56px;
        height: 56px;
        transform-origin: 50% 50%;
        animation: spin 1s linear infinite;
    }
    .pedro-loading-spinner .svg-spinner .path {
        stroke: var(--sodimac-blue, #00569A);
        stroke-linecap: round;
    }

    /* Elemento sin animación para evitar parpadeos */
    .fade-in {
        opacity: 1;
        transform: translateY(0);
    }

    /* Indicadores visuales para scroll */
    .comparison-body::before {
        content: '';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgba(0, 86, 154, 0.3) 50%, transparent 100%);
        z-index: 10;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .comparison-body.scrolled::before {
        opacity: 1;
    }

    /* Estilos para detección de categorías */
    .category-context {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 25px;
        border-left: 4px solid #007bff;
    }
    
    .category-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
        color: #495057;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 10px;
    }
    
    .category-badge.herramientas_electricas { border-left: 3px solid #ffc107; }
    .category-badge.herramientas_manuales { border-left: 3px solid #6c757d; }
    .category-badge.pintura { border-left: 3px solid #e83e8c; }
    .category-badge.jardin { border-left: 3px solid #28a745; }
    .category-badge.construccion { border-left: 3px solid #fd7e14; }
    .category-badge.iluminacion { border-left: 3px solid #ffc107; }
    .category-badge.plomeria { border-left: 3px solid #17a2b8; }
    
    .category-description {
        margin: 0;
        color: #6c757d;
        font-size: 14px;
        line-height: 1.5;
    }

    .pros-cons-section {
        margin-bottom: 30px;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
    }

    .pros-cons-title {
        font-size: 24px;
        font-weight: 700;
        color: var(--sodimac-darkblue);
        margin-bottom: 20px;
        text-align: center;
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .pros-cons-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 20px;
    }

    .product-analysis-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        border: 2px solid #e9ecef;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .product-analysis-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--sodimac-blue) 0%, var(--sodimac-orange) 100%);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .product-analysis-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 86, 154, 0.15);
        border-color: var(--sodimac-blue);
    }

    .product-analysis-card:hover::before {
        transform: scaleX(1);
    }

    .product-analysis-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 2px solid #f1f3f4;
    }

    .analysis-product-image {
        width: 60px;
        height: 60px;
        object-fit: contain;
        border-radius: 8px;
        background: #f8f9fa;
        padding: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .analysis-product-name {
        font-size: 18px;
        font-weight: 600;
        color: var(--sodimac-darkblue);
        margin: 0;
        line-height: 1.3;
    }

    .analysis-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .pros-section, .cons-section {
        flex: 1;
    }

    .pros-title, .cons-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pros-title {
        color: #28a745;
    }

    .cons-title {
        color: #ffc107;
    }

    .pros-list, .cons-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pro-item, .con-item {
        padding: 8px 12px;
        margin-bottom: 6px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.4;
        transition: all 0.2s ease;
    }

    .pro-item {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
        border-left: 4px solid #28a745;
    }

    /* ELIMINADO DEFINITIVAMENTE - conflicto con modal de comparación */

    .pro-item:hover, .con-item:hover {
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .recommendation-section {
        margin-top: 16px;
        text-align: center;
    }

    .recommendation-badge {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }

    .recommendation-badge.excellent {
        background: linear-gradient(135deg, #6f42c1 0%, #495057 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
    }

    .recommendation-badge.recommended {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .recommendation-badge.best-value {
        background: linear-gradient(135deg, var(--sodimac-orange) 0%, #fd7e14 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    }

    .recommendation-badge.consider {
        background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
    }

    .recommendation-badge.neutral {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .recommendation-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    /* Animaciones */
    @keyframes highlightPulse {
        0%, 100% { 
            box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
        }
        50% { 
            box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
        }
    }

    @keyframes indicatorFadeIn {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes tooltipFadeIn {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(5px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    /* Mejoras en el header de la tabla */
    .spec-header {
        background: linear-gradient(135deg, var(--sodimac-blue) 0%, var(--sodimac-darkblue) 100%);
        color: white !important;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    /* Responsividad para análisis */
    @media (max-width: 768px) {
        .pros-cons-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }
        
        .product-analysis-card {
            padding: 16px;
        }
        
        .pros-cons-title {
            font-size: 20px;
        }
        
        .analysis-product-name {
            font-size: 16px;
        }
        
        .analysis-product-image {
            width: 50px;
            height: 50px;
        }
        
        .comparison-container {
            padding: 16px;
        }
        
        .pros-cons-section {
            padding: 20px;
        }
    }
    
    /* Estilos para el resumen final */
    .final-recommendation-section {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        border-radius: 15px;
        padding: 25px;
        margin-top: 30px;
        border: 2px solid #ffc107;
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
    }
    
    .final-recommendation-title {
        color: #856404;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        text-align: center;
    }
    
    /* Estilos para diferentes tipos de recomendaciones */
    .winner-recommendation {
        text-align: center;
        padding: 20px;
    }
    
    .winner-badge {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 25px;
        font-weight: 700;
        font-size: 16px;
        display: inline-block;
        margin-bottom: 15px;
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    }
    
    .balanced-recommendation {
        text-align: center;
        padding: 20px;
    }
    
    .balanced-badge {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 25px;
        font-weight: 700;
        font-size: 16px;
        display: inline-block;
        margin-bottom: 15px;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }
    
    .general-recommendation {
        text-align: center;
        padding: 20px;
    }
    
    .general-badge {
        background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 25px;
        font-weight: 700;
        font-size: 16px;
        display: inline-block;
        margin-bottom: 15px;
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    }
    
    .neutral-recommendation {
        text-align: center;
        padding: 20px;
    }
    
    .neutral-badge {
        background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 25px;
        font-weight: 700;
        font-size: 16px;
        display: inline-block;
        margin-bottom: 15px;
        box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    }
    
    /* Estilos para desempate */
    .tiebreaker-recommendation {
        padding: 20px;
    }
    
    .tiebreaker-badge {
        background: linear-gradient(135deg, #fd7e14 0%, #e55a4f 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 25px;
        font-weight: 700;
        font-size: 16px;
        display: block;
        text-align: center;
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(253, 126, 20, 0.3);
    }
    
    .tiebreaker-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .tiebreaker-option {
        background: white;
        border-radius: 12px;
        padding: 20px;
        border: 2px solid #e9ecef;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .tiebreaker-option:hover {
        border-color: #007bff;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    
    .tiebreaker-product {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .tiebreaker-image {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 8px;
        margin-right: 12px;
    }
    
    .tiebreaker-name {
        font-size: 16px;
        font-weight: 600;
        color: #495057;
        margin: 0;
    }
    
    .tiebreaker-reason p {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: #6c757d;
    }
    
    .tiebreaker-strength {
        color: #007bff !important;
        font-weight: 600 !important;
        font-size: 15px !important;
    }
    
    .category-advice {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        padding: 15px;
        margin-top: 20px;
        border-left: 4px solid #17a2b8;
    }
    
    .category-advice p {
        margin: 0 0 8px 0;
        font-size: 14px;
    }
    
    .category-advice p:last-child {
        margin-bottom: 0;
    }
    
    /* Responsividad para el resumen final */
    @media (max-width: 768px) {
        .final-recommendation-section {
            padding: 20px;
            margin-top: 20px;
        }
        
        .final-recommendation-title {
            font-size: 18px;
        }
        
        .tiebreaker-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }
        
        .tiebreaker-option {
            padding: 15px;
        }
        
                 .winner-badge, .balanced-badge, .general-badge, .neutral-badge, .tiebreaker-badge {
             font-size: 14px;
             padding: 10px 20px;
         }
     }
     
     /* Estilos para categorías mixtas */
     .mixed-category-warning {
         background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
         border: 2px solid #ffc107;
         border-radius: 15px;
         padding: 25px;
         margin-bottom: 25px;
         text-align: center;
     }
     
     .warning-header {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 15px;
         margin-bottom: 15px;
     }
     
     .warning-icon {
         font-size: 32px;
         animation: pulse 2s infinite;
     }
     
     .warning-title {
         color: #856404;
         font-size: 22px;
         font-weight: 700;
         margin: 0;
     }
     
     .warning-message p {
         color: #856404;
         font-size: 16px;
         margin: 8px 0;
         line-height: 1.5;
     }
     
     /* Grid de productos individuales */
     .individual-products-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 20px;
         margin-top: 20px;
     }
     
     .individual-product-card {
         background: white;
         border-radius: 15px;
         padding: 20px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         border: 2px solid #e9ecef;
         transition: all 0.3s ease;
     }
     
     .individual-product-card:hover {
         border-color: #007bff;
         transform: translateY(-3px);
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
     }
     
     .product-category-badge {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         background: #f8f9fa;
         padding: 6px 12px;
         border-radius: 20px;
         font-size: 12px;
         font-weight: 600;
         margin-bottom: 15px;
         border: 1px solid #dee2e6;
     }
     
     .product-card-header {
         text-align: center;
         margin-bottom: 20px;
     }
     
     .individual-product-image {
         width: 80px;
         height: 80px;
         object-fit: cover;
         border-radius: 10px;
         margin-bottom: 10px;
     }
     
     .individual-product-name {
         font-size: 16px;
         font-weight: 600;
         color: #495057;
         margin: 0 0 8px 0;
         line-height: 1.3;
     }
     
     .individual-product-price {
         font-size: 18px;
         font-weight: 700;
         color: var(--sodimac-orange);
     }
     
     .product-specifications h5 {
         color: #495057;
         font-size: 14px;
         font-weight: 600;
         margin-bottom: 12px;
         border-bottom: 1px solid #e9ecef;
         padding-bottom: 5px;
     }
     
     .individual-specs-list {
         list-style: none;
         padding: 0;
         margin: 0;
     }
     
     .spec-item {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 6px 0;
         border-bottom: 1px solid #f8f9fa;
         font-size: 13px;
     }
     
     .spec-item:last-child {
         border-bottom: none;
     }
     
     .spec-name {
         font-weight: 600;
         color: #6c757d;
         flex: 1;
     }
     
     .spec-item .spec-value {
         color: #495057;
         text-align: right;
         font-weight: 500;
         max-width: 150px;
         word-break: break-word;
     }
     
     .product-actions {
         display: flex;
         gap: 10px;
         margin-top: 20px;
     }
     
     .product-select-button {
         flex: 1;
         background: linear-gradient(135deg, var(--sodimac-orange) 0%, #e55a4f 100%);
         color: white;
         border: none;
         padding: 10px 16px;
         border-radius: 8px;
         font-weight: 600;
         font-size: 14px;
         cursor: pointer;
         transition: all 0.3s ease;
     }
     
     .product-select-button:hover {
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
     }
     
     .product-remove-button {
         background: #6c757d;
         color: white;
         border: none;
         padding: 10px 16px;
         border-radius: 8px;
         font-weight: 600;
         font-size: 14px;
         cursor: pointer;
         transition: all 0.3s ease;
     }
     
     .product-remove-button:hover {
         background: #5a6268;
         transform: translateY(-1px);
     }
     
     /* Responsividad para categorías mixtas */
     @media (max-width: 768px) {
         .individual-products-grid {
             grid-template-columns: 1fr;
             gap: 15px;
         }
         
         .individual-product-card {
             padding: 15px;
         }
         
         .warning-title {
             font-size: 18px;
         }
         
         .warning-message p {
             font-size: 14px;
         }
         
         .individual-product-image {
             width: 60px;
             height: 60px;
         }
         
         .product-actions {
             flex-direction: column;
             gap: 8px;
         }
     }
 
          /* ====================================
        VIDEOLLAMADA MODAL STYLES
        ==================================== */
     
     /* Modal de videollamada */
     .videollamada-modal {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(4px);
         z-index: 9999;
         opacity: 0;
         transition: var(--transition-smooth);
     }
     
     .videollamada-modal.show {
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 1;
     }
     
     .videollamada-modal-content {
         background: white;
         border-radius: 16px;
         width: 90%;
         max-width: 480px;
         max-height: 90vh;
         overflow: hidden;
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
         transform: scale(0.8);
         transition: var(--transition-smooth);
     }
     
     .videollamada-modal.show .videollamada-modal-content {
         transform: scale(1);
     }
     
     .videollamada-modal-header {
         background: var(--sodimac-blue);
         padding: 24px;
         color: white;
         position: relative;
         text-align: center;
     }
     
     .videollamada-logo {
         width: 100px;
         height: auto;
         margin-bottom: 16px;
         filter: brightness(1.2);
     }
     
     .videollamada-close {
         position: absolute;
         top: 16px;
         right: 16px;
         width: 36px;
         height: 36px;
         border: none;
         background: rgba(255, 255, 255, 0.2);
         color: white;
         border-radius: 50%;
         cursor: pointer;
         font-size: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: var(--transition-smooth);
     }
     
     .videollamada-close:hover {
         background: rgba(255, 255, 255, 0.3);
         transform: scale(1.1);
     }
     
     .videollamada-modal-header h2 {
         font-size: 28px;
         font-weight: 700;
         margin-bottom: 12px;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     }
     
     .videollamada-modal-header p {
         font-size: 16px;
         line-height: 1.5;
         margin-bottom: 16px;
         opacity: 0.95;
     }
     
     .horarios-info {
         background: rgba(255, 255, 255, 0.15);
         padding: 12px;
         border-radius: 8px;
         margin-top: 8px;
     }
     
     .horarios-info small {
         font-size: 13px;
         opacity: 0.9;
         display: block;
         line-height: 1.4;
     }
     
     .videollamada-modal-body {
         padding: 24px;
     }
     
     .videollamada-modal-body h3 {
         font-size: 20px;
         font-weight: 600;
         color: var(--text-primary);
         margin-bottom: 20px;
         text-align: center;
     }
     
     .videollamada-services {
         display: flex;
         flex-direction: column;
         gap: 16px;
         margin-bottom: 20px;
     }
     
     .videollamada-service-btn {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 16px 20px;
         background: var(--sodimac-blue);
         color: white;
         border: none;
         border-radius: 50px;
         font-size: 16px;
         font-weight: 600;
         cursor: pointer;
         transition: var(--transition-smooth);
         justify-content: center;
         position: relative;
         overflow: hidden;
     }
     
     .videollamada-service-btn::before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
         transition: left 0.5s ease;
     }
     
     .videollamada-service-btn:hover {
         background: var(--sodimac-darkblue);
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
     }
     
     .videollamada-service-btn:hover::before {
         left: 100%;
     }
     
     .videollamada-service-btn:active {
         transform: translateY(0);
     }
     
     .service-icon {
         width: 20px;
         height: 20px;
         color: currentColor;
     }
     
     .videsk-footer {
         text-align: center;
         padding-top: 16px;
         border-top: 1px solid var(--border-color);
     }
     
     .videsk-footer small {
         color: var(--text-secondary);
         font-size: 12px;
     }
     
     /* Responsive para videollamada */
     @media (max-width: 768px) {
         .videollamada-floating-button {
             bottom: 100px;
             right: 20px;
         }
         
         .videollamada-floating-button button {
             width: 50px;
             height: 50px;
         }
         
         .videollamada-icon {
             width: 20px;
             height: 20px;
         }
         
         .videollamada-modal-content {
             width: 95%;
             margin: 20px;
         }
         
         .videollamada-modal-header {
             padding: 20px;
         }
         
         .videollamada-modal-header h2 {
             font-size: 24px;
         }
         
         .videollamada-modal-header p {
             font-size: 14px;
         }
         
         .videollamada-modal-body {
             padding: 20px;
         }
         
         .videollamada-service-btn {
             padding: 14px 18px;
             font-size: 15px;
         }
     }
     
     @media (max-width: 480px) {
         .videollamada-floating-button {
             bottom: 80px;
             right: 16px;
         }
         
         .videollamada-floating-button button {
             width: 48px;
             height: 48px;
         }
         
         .videollamada-icon {
             width: 18px;
             height: 18px;
         }
         
         .videollamada-modal-content {
             width: calc(100% - 20px);
             margin: 10px;
         }
         
         .videollamada-modal-header {
             padding: 16px;
         }
         
         .videollamada-logo {
             width: 80px;
         }
         
         .videollamada-modal-header h2 {
             font-size: 22px;
         }
         
         .videollamada-modal-body {
             padding: 16px;
         }
         
         .videollamada-service-btn {
             padding: 12px 16px;
             font-size: 14px;
         }
     }

     /* ====================================
        VIDEOLLAMADA MODAL STYLES
        ==================================== */

     /* Ocultar el botón original de Videsk (mismo método que 1_retail_new_format.css) */
     .videsk-top-container {
         z-index: 9999 !important;
     }
     
     .videsk-button-iframe {
         visibility: hidden !important;
         display: none !important;
     }

     /* ====================================
        MODAL DE RUT STYLES
        ==================================== */

     /* Estilos para el modal de RUT */
     .modal {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         z-index: 1050;
         overflow: hidden;
         outline: 0;
     }

     .modal.fade {
         transition: opacity 0.15s linear;
     }

     .modal.fade.show {
         display: block;
         opacity: 1;
     }

     .modal-dialog {
         position: relative;
         margin: 1.75rem auto;
         width: 95%;
         max-width: 330px;
         pointer-events: none;
     }

     .modal-dialog-centered {
         display: flex;
         align-items: center;
         min-height: calc(100% - 3.5rem);
     }

     .modal-content {
         position: relative;
         display: flex;
         flex-direction: column;
         width: 100%;
         pointer-events: auto;
         background-color: #fff;
         background-clip: padding-box;
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 0.5rem;
         outline: 0;
         box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
     }

     .modal-body {
         position: relative;
         flex: 1 1 auto;
         padding: 1.25rem;
     }

     .modal-footer {
         display: flex;
         align-items: center;
         justify-content: flex-end;
         padding: 1rem;
         border-top: 1px solid #e9ecef;
     }

     .card {
         position: relative;
         display: flex;
         flex-direction: column;
         min-width: 0;
         word-wrap: break-word;
         background-color: #fff;
         background-clip: border-box;
     }

     .card-plain {
         box-shadow: none;
         border: none;
     }

     .card-header {
         padding: 1.25rem 1.5rem;
         margin-bottom: 0;
         background-color: transparent;
         border-bottom: none;
     }

     .card-body {
         flex: 1 1 auto;
         padding: 1.5rem;
     }

     .text-left {
         text-align: left;
     }

     .font-weight-bolder {
         font-weight: 700;
     }

     .text-dark {
         color: #343a40;
     }

     .mb-0 {
         margin-bottom: 0;
     }

     .mb-3 {
         margin-bottom: 1rem;
     }

     .form-control {
         display: block;
         width: 100%;
         height: calc(1.5em + 0.75rem + 2px);
         padding: 0.375rem 0.75rem;
         font-size: 1rem;
         font-weight: 400;
         line-height: 1.5;
         color: #495057;
         background-color: #fff;
         background-clip: padding-box;
         border: 1px solid #ced4da;
         border-radius: 0.25rem;
         transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     }

     .btn {
         display: inline-block;
         font-weight: 400;
         text-align: center;
         vertical-align: middle;
         user-select: none;
         border: 1px solid transparent;
         padding: 0.375rem 0.75rem;
         font-size: 1rem;
         line-height: 1.5;
         border-radius: 0.25rem;
         transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     }

     .btn-light {
         color: #212529;
         background-color: #f8f9fa;
         border-color: #f8f9fa;
     }

     .btn-light:hover {
         color: #212529;
         background-color: #e2e6ea;
         border-color: #dae0e5;
     }

     /* Estilos específicos del RUT */
     .rut-input-wrap {
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 10px auto;
         position: relative;
         max-width: 220px;
         width: 100%;
     }

     .rut-input-digits {
         width: 130px;
         height: 44px;
         border-radius: 4px;
         font-size: 1.1rem;
         transition: all 0.2s ease;
     }

     .rut-input-verifier {
         width: 50px;
         height: 44px;
         border-radius: 4px;
         font-size: 1.1rem;
         text-align: center;
         transition: all 0.2s ease;
     }

     .rut-input-wrap input:focus {
         border-color: #0f69b1;
         box-shadow: 0 0 0 0.15rem rgba(15, 105, 177, 0.2);
         z-index: 1;
     }

     .rut-separator {
         font-weight: bold;
         font-size: 1.25rem;
         color: #555;
         margin: 0 5px;
         display: inline-block;
     }

     .btn-sodimac {
         background-color: #0f69b1;
         color: white;
         border-color: #0f69b1;
         min-width: 100px;
         padding: 8px 16px;
         font-weight: 500;
     }

     .btn-sodimac:hover {
         background-color: #0d5a98;
         color: white;
         border-color: #0d5a98;
     }

     .btn-sodimac:active, .btn-sodimac:focus {
         background-color: #0b4d82;
         color: white;
         border-color: #0b4d82;
         box-shadow: 0 0 0 0.15rem rgba(15, 105, 177, 0.3);
     }

     .modal-footer .btn {
         min-width: 100px;
         padding: 8px 16px;
     }

     #rutFeedback {
         color: #dc3545;
         font-size: 14px;
         font-weight: 500;
     }

     /* Animación para el modal */
     @keyframes fadeIn {
         from { opacity: 0; }
         to { opacity: 1; }
     }

     .modal.show {
         animation: fadeIn 0.3s;
     }

     /* Nuestro botón personalizado de videollamada */
     .custom-videollamada-btn {
         position: fixed !important;
         left: 20px !important;
         bottom: 20px !important;
         width: 40px !important;
         height: 40px !important;
         border-radius: 50% !important;
         background: linear-gradient(135deg, #0066cc 0%, #004499 100%) !important;
         border: none !important;
         cursor: pointer !important;
         z-index: 1000 !important;
         opacity: 0.85 !important;
         transition: all 0.3s ease !important;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
         color: white !important;
     }
     
     .custom-videollamada-btn:hover {
         opacity: 1 !important;
         transform: scale(1.05) !important;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
     }
     
     .custom-videollamada-btn svg {
         width: 20px !important;
         height: 20px !important;
         fill: white !important;
     }
     
     /* Responsive para el botón personalizado */
     @media (max-width: 768px) {
         .custom-videollamada-btn {
             left: 15px !important;
             bottom: 15px !important;
             width: 36px !important;
             height: 36px !important;
         }
         
         .custom-videollamada-btn svg {
             width: 18px !important;
             height: 18px !important;
         }
     }

      /* Botón de limpiar conversación */
      .clear-conversation-btn {
          position: absolute;
          top: 50%;
          right: 15px;
          transform: translateY(-50%);
          width: 32px;
          height: 32px;
          background: rgba(255, 255, 255, 0.9);
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 16px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          opacity: 0.7;
      }

      .clear-conversation-btn:hover {
          opacity: 1;
          background: rgba(255, 255, 255, 1);
          border-color: rgba(0, 0, 0, 0.2);
      }

      .clear-conversation-btn svg {
          width: 14px;
          height: 14px;
          color: #666;
      }

      .clear-conversation-btn:hover svg {
          color: #333;
      }

      .clear-conversation-btn:active {
          transform: translateY(-50%) scale(0.95);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      }

      /* Tooltip personalizado para el botón limpiar - posicionado a la izquierda */
      .clear-conversation-btn::before {
          content: "Limpiar conversación";
          position: absolute;
          top: 50%;
          right: 100%;
          transform: translateY(-50%);
          margin-right: 8px;
          padding: 4px 8px;
          background: rgba(0, 0, 0, 0.9);
          color: white;
          font-size: 10px;
          font-weight: 500;
          border-radius: 4px;
          white-space: nowrap;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.2s ease, visibility 0.2s ease;
          z-index: 1001;
          pointer-events: none;
      }

      .clear-conversation-btn::after {
          content: "";
          position: absolute;
          top: 50%;
          right: 100%;
          transform: translateY(-50%);
          margin-right: 2px;
          width: 0;
          height: 0;
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;
          border-left: 4px solid rgba(0, 0, 0, 0.9);
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.2s ease, visibility 0.2s ease;
          z-index: 1001;
          pointer-events: none;
      }

      .clear-conversation-btn:hover::before,
      .clear-conversation-btn:hover::after {
          opacity: 1;
          visibility: visible;
      }



      @media (max-width: 768px) {
          .clear-conversation-btn {
              top: 50%;
              right: 12px;
              transform: translateY(-50%);
              width: 28px;
              height: 28px;
          }

          .clear-conversation-btn svg {
              width: 12px;
              height: 12px;
          }

          /* Tooltip responsive */
          .clear-conversation-btn::before {
              font-size: 9px;
              padding: 3px 6px;
              margin-right: 6px;
          }

          .clear-conversation-btn::after {
              border-top: 3px solid transparent;
              border-bottom: 3px solid transparent;
              border-left: 3px solid rgba(0, 0, 0, 0.9);
              margin-right: 1px;
          }
      }

      /* Estilos para iconos SVG personalizados */
      .pedro-icon svg {
          color: var(--sodimac-blue);
          animation: pedroIconFloat 2s ease-in-out infinite;
      }

      /* Estilo específico para el nuevo SVG de análisis en el header */
      .pedro-badge .pedro-icon svg {
          width: 20px;
          height: 20px;
          fill: white;
          animation: none;
      }

      .action-title-icon {
          vertical-align: middle;
          margin-right: 8px;
          color: var(--sodimac-blue);
      }

      .recommendation-icon {
          vertical-align: middle;
          margin-right: 8px;
          filter: drop-shadow(0 2px 4px rgba(255, 152, 0, 0.4));
          /* ELIMINADO pulse animation - causa flashes */
          color: #ff9800 !important;
          fill: #ff9800 !important;
      }

      .btn-regenerate svg {
          margin-right: 8px;
          vertical-align: middle;
      }

      @keyframes pulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.05); }
      }

      .specs-icon {
          vertical-align: middle;
          margin-right: 8px;
          color: var(--sodimac-blue);
      }

      /* Estilos para el GIF de carga de Pedro - FORZAR STOP COMPLETO */
      .pedro-loading-gif {
          width: 80px;
          height: 80px;
          margin: 0 auto 20px auto;
          display: block;
          animation: none !important;
          animation-play-state: paused !important;
          transform: none !important;
          transition: none !important;
          -webkit-animation: none !important;
          -moz-animation: none !important;
          -o-animation: none !important;
          -ms-animation: none !important;
      }
      
      /* Forzar detener cualquier animación CSS en la imagen */
      .pedro-loading-gif,
      .pedro-loading-gif *,
      .pedro-loading-gif::before,
      .pedro-loading-gif::after {
          animation: none !important;
          animation-play-state: paused !important;
          -webkit-animation: none !important;
          -moz-animation: none !important;
          -o-animation: none !important;
          -ms-animation: none !important;
      }

    /* Nuevos estilos para modal reorganizado */
    /* Nueva sección principal de pros y contras reorganizada */
    .pros-cons-main-section {
        background: linear-gradient(135deg, #f8fffe 0%, #f0fcfc 100%);
        border: 1px solid #e0f2f1;
        border-radius: 16px;
        padding: 25px;
        margin: 25px 0;
        box-shadow: 0 4px 20px rgba(46, 125, 50, 0.08);
    }

    .pros-cons-main-section .section-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 3px solid #e0e0e0;
        font-size: 20px;
        font-weight: 700;
        color: #333333; /* Cambiado a negro */
        text-align: center;
        justify-content: center;
    }

    .pros-cons-icon {
        flex-shrink: 0;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); /* Sombra neutral */
    }

    /* Grid de productos lado a lado - Producto 1 derecha, Producto 2 izquierda */
    .products-comparison-grid {
        display: flex;
        flex-direction: row-reverse;
        gap: 20px;
        margin-top: 20px;
        justify-content: space-between;
    }
    
    .product-pros-cons {
        flex: 1;
        max-width: calc(50% - 10px);
    }

    /* Grid especial para 3 productos */
    .products-comparison-grid-three {
        display: flex;
        flex-direction: row-reverse;
        gap: 15px;
        margin-top: 20px;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .products-comparison-grid-three .product-pros-cons {
        flex: 1;
        max-width: calc(33.33% - 10px);
        min-width: 300px;
    }

    /* Media query para tabletas - 3 productos en formato 2+1 */
    @media (max-width: 1200px) and (min-width: 969px) {
        .products-comparison-grid-three .product-pros-cons {
            max-width: calc(50% - 10px);
        }
        
        .products-comparison-grid-three .product-pros-cons:nth-child(1) {
            flex-basis: 100%;
            max-width: 100%;
        }
    }

    /* Contenedor de cada producto con sus pros y contras */
    .product-pros-cons {
        background: white;
        border: 2px solid #e8f5e8;
        border-radius: 16px;
        padding: 20px;
        position: relative;
        box-shadow: 0 6px 25px rgba(0,0,0,0.08);
        overflow: hidden;
        direction: ltr; /* Restaurar dirección del texto dentro de cada producto */
    }

    .product-pros-cons::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #4CAF50 0%, #2196f3 100%);
    }

    .product-title {
        font-size: 18px;
        font-weight: 700;
        color: #1565c0;
        margin-bottom: 16px;
        padding: 12px 16px;
        background: linear-gradient(135deg, #e3f2fd 0%, #f1f8ff 100%);
        border-radius: 12px;
        border-left: 6px solid #2196f3;
        text-align: center;
        position: relative;
    }

    .product-title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #2196f3, #4CAF50);
        border-radius: 2px;
    }

    /* Secciones de ventajas y desventajas */
    .pros-cons-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .pros-section, .cons-section {
        background: rgba(255,255,255,0.7);
        border-radius: 12px;
        padding: 16px;
    }

    .pros-section {
        border: 2px solid rgba(76, 175, 80, 0.2);
        background: linear-gradient(135deg, rgba(232, 245, 232, 0.6) 0%, rgba(240, 249, 240, 0.8) 100%);
    }

    .cons-section {
        border: 2px solid rgba(255, 152, 0, 0.3);
        background: linear-gradient(135deg, rgba(255, 243, 224, 0.8) 0%, rgba(255, 248, 225, 0.8) 100%);
    }

    .section-subtitle {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 14px;
        display: flex !important;
        align-items: center;
        gap: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pros-section .section-subtitle {
        color: #1b5e20;
    }

    .cons-section .section-subtitle {
        color: #e65100;
    }

    .pros-section .section-subtitle::before {
        content: "✅";
        font-size: 18px;
        filter: drop-shadow(0 1px 2px rgba(76, 175, 80, 0.4));
    }

    .cons-section .section-subtitle::before {
        content: "⚠️";
        font-size: 18px;
        filter: drop-shadow(0 1px 2px rgba(255, 152, 0, 0.4));
    }

    .product-pros-cons .pro-item {
        background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
        border: 1px solid #c8e6c9;
        border-left: 5px solid #4CAF50;
        padding: 14px 16px;
        border-radius: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 14px;
        line-height: 1.5;
        color: #2e7d32;
        position: relative;
    }



    .pro-icon {
        flex-shrink: 0;
        margin-top: 1px;
        filter: drop-shadow(0 1px 2px rgba(76, 175, 80, 0.3));
    }

    .product-pros-cons .con-item {
        background: linear-gradient(135deg, #fff3e0 0%, #ffeaa7 100%);
        border: 1px solid #ffc107;
        border-left: 5px solid #ff9800;
        padding: 14px 16px;
        border-radius: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 14px;
        line-height: 1.5;
        color: #e65100;
        position: relative;
        font-weight: 500;
    }



    .con-icon {
        flex-shrink: 0;
        margin-top: 1px;
        filter: drop-shadow(0 1px 2px rgba(255, 152, 0, 0.4));
    }

    .product-info {
        font-size: 14px;
        color: #666;
        margin: 10px 0;
        font-style: italic;
        text-align: center;
        padding: 8px 12px;
        background: rgba(0,0,0,0.03);
        border-radius: 8px;
    }

    /* Sección de análisis comparativo */
    .analysis-section {
        background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 20px;
        margin: 20px 0;
        text-align: center;
        width: 100%;
        transform: translateZ(0);
    }
    
    /* Sección de recomendación final centrada */
    .recommendation-section {
        background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
        border: 1px solid #ffc107;
        border-radius: 12px;
        padding: 20px;
        margin: 20px 0;
        text-align: center;
        width: 100%;
        transform: translateZ(0);
    }

    .analysis-section .section-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 2px solid #e5e7eb;
        font-size: 18px;
        font-weight: 600;
        color: #374151;
    }

    .analysis-icon {
        flex-shrink: 0;
    }

    .analysis-text {
        font-size: 15px;
        line-height: 1.6;
        color: #4b5563;
        margin-bottom: 12px;
    }

    /* Mejor presentación de productos centrados */
    .product-action-cards {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        border: 2px solid #e3f2fd;
        border-radius: 15px;
        padding: 20px;
        margin: 0 0 25px 0;
        text-align: center;
    }

    .product-action-cards h4 {
        color: #1565c0;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        text-align: center;
    }

    .action-cards-carousel {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
    }

    .comparison-product-card {
        background: white;
        border: 2px solid #e3f2fd;
        border-radius: 12px;
        padding: 16px;
        text-align: center;
        transition: all 0.3s ease;
        flex: 0 0 auto;
        min-width: 200px;
        max-width: 250px;
    }



    /* Responsive para la nueva estructura */
    @media (max-width: 968px) {
        .products-comparison-grid, .products-comparison-grid-three {
            flex-direction: column;
            gap: 16px;
        }
        
        .product-pros-cons, .products-comparison-grid-three .product-pros-cons {
            max-width: 100%;
            min-width: auto;
            margin-bottom: 20px;
        }
    }

    @media (max-width: 768px) {
        .pros-cons-main-section {
            padding: 18px;
            margin: 18px 0;
            border-radius: 12px;
        }

        .pros-cons-main-section .section-header {
            font-size: 18px;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 12px;
        }

        .products-comparison-grid {
            flex-direction: column;
            gap: 16px;
        }

        .product-pros-cons {
            padding: 16px;
            border-radius: 12px;
        }

        .product-title {
            font-size: 16px;
            padding: 10px 14px;
            margin-bottom: 14px;
        }

        .product-title::after {
            width: 40px;
            height: 2px;
        }

        .pros-section, .cons-section {
            padding: 14px;
            border-radius: 10px;
        }

        .section-subtitle {
            font-size: 15px;
            margin-bottom: 10px;
        }

        .product-pros-cons .pro-item,
        .product-pros-cons .con-item {
            padding: 12px 14px;
            font-size: 13px;
            margin-bottom: 8px;
            border-radius: 8px;
        }

        .product-pros-cons .pro-item:hover,
        .product-pros-cons .con-item:hover {
            transform: translateX(2px);
        }

        .analysis-section {
            padding: 16px;
            margin: 16px 0;
            border-radius: 12px;
        }

        .product-action-cards {
            padding: 16px;
            border-radius: 12px;
        }

        .product-action-cards h4 {
            font-size: 18px;
            margin-bottom: 16px;
        }

        .action-cards-carousel {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .comparison-product-card {
            min-width: auto;
            max-width: none;
            padding: 14px;
            border-radius: 10px;
        }
    }

    @media (max-width: 480px) {
        .pros-cons-main-section {
            padding: 16px;
            margin: 16px 0;
        }

        .pros-cons-main-section .section-header {
            font-size: 16px;
            flex-direction: column;
            gap: 8px;
            text-align: center;
        }

        .product-title {
            font-size: 15px;
            padding: 8px 12px;
        }

        .pros-section, .cons-section {
            padding: 12px;
        }

        .section-subtitle {
            font-size: 14px;
        }

        .product-pros-cons .pro-item,
        .product-pros-cons .con-item {
            padding: 10px 12px;
            font-size: 12px;
            gap: 8px;
        }
    }

    /* Estilos para el efecto de texto progresivo - Optimizado para Safari */
    .text-generate-container {
        position: relative;
        overflow: visible;
        /* Permitir crecimiento dinámico completo */
        width: auto;
        height: auto;
        min-height: auto;
        min-width: auto;
        display: block;
        word-wrap: break-word;
        line-height: 1.5;
    }

    .text-generate-word {
        /* Inicialmente oculto para crecimiento dinámico */
        display: none;
        opacity: 0;
        /* Remover filter blur que causa problemas en Safari */
        transition: opacity 0.3s ease;
        will-change: opacity;
        white-space: pre-wrap;
    }

    .text-generate-word.visible {
        /* Cuando se hace visible, usar inline para flujo natural */
        display: inline !important;
        opacity: 1;
    }

    /* Crecimiento dinámico del globo del mensaje - Simplificado para Safari */
    .message.text-generating {
        opacity: 1;
        /* Remover transform complejos que causan problemas en Safari */
    }

    .bot-message.text-generating .message-content {
        overflow: visible;
        /* Sin dimensiones fijas para permitir crecimiento orgánico */
        transition: none; /* Eliminar transiciones que interfieren */
        position: relative;
        /* Mantener comportamiento normal del globo */
        display: block;
        width: auto;
        height: auto;
        /* Asegurar que el contenido sea completamente visible en Safari */
        min-height: 20px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Animación inicial suave del contenedor - Simplificada */
    @keyframes initialMessageAppear {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    /* Efecto de fade-in más suave para las palabras - Simplificado para Safari */
    .text-generate-word.fade-in {
        animation: wordFadeIn 0.3s ease-out forwards;
    }

    @keyframes wordFadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    /* Preservar espaciado normal entre palabras - REMOVIDO para evitar doble espaciado */
    /* Las palabras se separan naturalmente con los espacios preservados */

    /* Estilos especiales para elementos clickeables en el texto progresivo */
    .text-generate-word .project-option,
    .text-generate-word .bold-text {
        transition: all 0.3s ease;
    }

    .text-generate-word .project-option {
        opacity: 0.9;
    }

    .text-generate-word.visible .project-option {
        opacity: 1;
    }

    /* Fixes específicos para Safari/WebKit */
    @supports (-webkit-appearance: none) {
        .text-generate-container {
            /* Forzar renderizado completo en Safari */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .bot-message.text-generating .message-content {
            /* Evitar truncamiento de texto en Safari */
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            overflow: visible;
            /* Forzar recálculo del layout en Safari */
            will-change: contents;
        }

        .welcome-message .message-content {
            /* Asegurar que el mensaje de bienvenida sea completamente visible */
            white-space: normal;
            word-break: normal;
            overflow-wrap: break-word;
            -webkit-hyphens: auto;
            hyphens: auto;
            /* Prevenir problemas de clipping en Safari */
            contain: layout;
        }
    }

    /* Asegurar que los saltos de línea funcionen correctamente */
    .text-generate-container br {
        display: block;
        content: "";
        margin-top: 0.5em;
    }

    /* Optimización para rendimiento */
    .text-generate-container {
        contain: layout style;
    }

    .text-generate-word {
        contain: layout style paint;
    }

    /* Estilos para el verificador de inactividad - REMOVIDO: Migrado a 1_retail_new_format.css */

    /*
    .inactivity-question {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 16px;
        text-align: left;
        line-height: 1.4;
    }

    .inactivity-options {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .inactivity-option {
        background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
        color: white;
        border: 1px solid #007AFF;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25);
        min-width: 60px;
        text-transform: none;
        letter-spacing: 0.2px;
        margin-top: 8px;
    }

    .inactivity-option:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35);
        background: linear-gradient(135deg, #0056CC 0%, #004499 100%);
        border-color: #0056CC;
    }

    .inactivity-option.no-option {
        background: linear-gradient(135deg, #8E8E93 0%, #6D6D70 100%);
        border-color: #8E8E93;
        box-shadow: 0 3px 8px rgba(142, 142, 147, 0.25);
    }

    .inactivity-option.no-option:hover {
        background: linear-gradient(135deg, #6D6D70 0%, #48484A 100%);
        box-shadow: 0 6px 16px rgba(142, 142, 147, 0.35);
        border-color: #6D6D70;
    }

    .discount-coupon {
        color: var(--text-primary);
        border: none;
        border-radius: 12px;
        border-bottom-left-radius: 12px;
        margin: 8px 0;
        animation: slideInFromLeft 0.5s ease-out;
        text-align: center;
        max-width: none;
        width: auto;
        min-width: 120px;
    }

    .coupon-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 16px;
        text-transform: none;
        letter-spacing: 0.5px;
    }

    .coupon-image {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        margin: 16px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }

    .coupon-image:hover {
        transform: scale(1.02);
    }

    .coupon-details {
        border-radius: 8px;
        text-align: left;
        border: none;
    }

    .coupon-details h4 {
        color: var(--text-primary);
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .coupon-details ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .coupon-details li {
        padding: 6px 0;
        color: var(--text-primary);
        font-size: 14px;
    }

    .coupon-details li:last-child {
        border-bottom: none;
    }

    .coupon-details li strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    .coupon-disclaimer {
        margin-top: 16px;
        border: none;
        border-radius: 8px;
        font-size: 12px;
        line-height: 1.4;
        text-align: left;
    }

    .coupon-disclaimer strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    @keyframes slideInFromTop {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideInFromBottom {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Estilos para el disclaimer de términos y condiciones en el área de productos */
    .coupon-terms-disclaimer {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 1px solid #dee2e6;
        border-radius: 8px; /* Reducido de 12px */
        padding: 8px 12px; /* Reducido de 16px 20px */
        margin: 8px 0; /* Reducido de 16px 0 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease-out;
        display: none;
    }

    .coupon-terms-disclaimer .disclaimer-content h4 {
        color: #495057;
        font-size: 12px; /* Reducido de 14px */
        font-weight: 600;
        margin: 0 0 4px 0; /* Reducido de 0 0 8px 0 */
        display: flex;
        align-items: center;
        gap: 4px; /* Reducido de 8px */
    }

    .coupon-terms-disclaimer .disclaimer-content h4::before {
        content: "⚠️";
        font-size: 16px;
    }

    .coupon-terms-disclaimer .disclaimer-content p {
        color: #6c757d;
        font-size: 10px; /* Reducido de 12px */
        line-height: 1.3; /* Reducido de 1.5 */
        margin: 0;
        text-align: justify;
    }

    /* Hover effect para el disclaimer */
    .coupon-terms-disclaimer:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    /* Responsive para el verificador de inactividad */
    @media (max-width: 768px) {
        .inactivity-options {
            flex-direction: column;
            align-items: center;
        }

        .inactivity-option {
            width: 100%;
            max-width: 200px;
        }

        .coupon-title {
            font-size: 18px;
        }

        .coupon-details {
            padding: 12px;
        }

        .coupon-details h4 {
            font-size: 14px;
        }

        .coupon-details li {
            font-size: 13px;
        }

        .coupon-disclaimer {
            font-size: 11px;
        }
        
        .coupon-terms-disclaimer {
            margin: 6px 0; /* Reducido de 12px 0 */
            padding: 6px 8px; /* Reducido de 12px 16px */
        }
        
        .coupon-terms-disclaimer .disclaimer-content h4 {
            font-size: 10px; /* Reducido de 13px */
        }
        
        .coupon-terms-disclaimer .disclaimer-content p {
            font-size: 9px; /* Reducido de 11px */
        }
    }

/* ===== SISTEMA DE FEEDBACK DESKTOP ===== */

/* Contenedor de feedback buttons */
.feedback-buttons-desktop {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.feedback-label-desktop {
    font-size: 13px;
    color: var(--text-secondary);
    margin-left: 4px;
    white-space: nowrap;
}

.feedback-buttons-desktop:hover {
    opacity: 1;
}

/* Botón de feedback individual */
.feedback-btn-desktop {
    background: transparent;
    border: 1px solid rgba(0, 102, 204, 0.15);
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #7F8C8D;
    width: 28px;
    height: 28px;
    position: relative;
}

.feedback-btn-desktop:hover {
    background: rgba(0, 102, 204, 0.05);
    border-color: rgba(0, 102, 204, 0.3);
    color: var(--sodimac-blue);
}

.feedback-btn-desktop.selected.thumbs-up-desktop {
    color: var(--sodimac-blue);
    background: rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.4);
}

.feedback-btn-desktop.selected.thumbs-up-desktop svg {
    animation: celebratePulseDesktop 0.6s ease;
}

.feedback-btn-desktop.selected.thumbs-down-desktop {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.4);
}

.feedback-btn-desktop svg {
    width: 16px;
    height: 16px;
}

.feedback-btn-desktop .thumb-outline-desktop {
    stroke-width: 1.6;
    transition: stroke-width 0.2s ease;
}

.feedback-btn-desktop.selected .thumb-outline-desktop {
    stroke-width: 2;
}

.feedback-btn-desktop .thumb-fill-desktop {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.feedback-btn-desktop.selected .thumb-fill-desktop {
    opacity: 1;
}

@keyframes celebratePulseDesktop {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    50% {
        transform: scale(1.05) rotate(5deg);
    }
    75% {
        transform: scale(1.08) rotate(-3deg);
    }
    100% {
        transform: scale(1);
    }
}

/* Modal de opciones de feedback negativo */
.feedback-modal-desktop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInDesktop 0.2s ease;
}

.feedback-modal-desktop.show {
    display: flex;
}

@keyframes fadeInDesktop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Contenido del modal */
.feedback-modal-content-desktop {
    background: linear-gradient(135deg, #004499 0%, #0066CC 100%);
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUpDesktop 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

/* Header del modal */
.feedback-modal-header-desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.feedback-modal-title-desktop {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.feedback-modal-close-desktop {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
}

.feedback-modal-close-desktop:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.feedback-modal-close-desktop svg {
    width: 20px;
    height: 20px;
}

/* Opciones de feedback */
.feedback-options-desktop {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.feedback-option-desktop {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 14px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
}

.feedback-option-desktop:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.feedback-option-desktop:active {
    transform: translateY(0);
}

/* Mensaje de agradecimiento */
.feedback-thank-you-desktop {
    color: #4ade80;
    font-size: 13px;
    text-align: left;
    padding: 6px 0;
    margin-top: 6px;
    display: none;
    animation: fadeInSlideDesktop 0.4s ease;
    font-weight: 500;
}

.feedback-thank-you-desktop.show {
    display: block;
}

@keyframes fadeInSlideDesktop {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Evolve Credits - Branding sutil y minimalista para desktop
   ============================================ */
.evolve-credits-desktop {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    max-width: fit-content;
    z-index: 11;
    font-size: 8px;
    color: rgba(0, 102, 204, 0.5);
    font-weight: 400;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.1); /* Box-shadow del hover */
    transition: none; /* Sin transición */
    opacity: 0.75; /* Opacidad del hover */
    border: 1px solid rgba(0, 102, 204, 0.1); /* Border del hover */
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-align: center;
}

.evolve-credits-desktop:hover {
    opacity: 0.75; /* Sin cambio */
    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.1); /* Sin cambio */
    transform: translateX(-50%); /* Sin animación */
    border-color: rgba(0, 102, 204, 0.1); /* Sin cambio */
}

.evolve-credits-desktop .evolve-text {
    display: inline-block;
    color: rgba(0, 102, 204, 0.5);
}

.evolve-credits-desktop .evolve-text strong {
    font-weight: 600;
    color: var(--sodimac-blue);
    letter-spacing: 0.6px;
}

/* Responsive para tablets y pantallas más pequeñas */
@media (max-width: 1024px) {
    .evolve-credits-desktop {
        font-size: 7px;
        padding: 3px 9px;
        bottom: 7px;
    }
}

@media (max-width: 768px) {
    .evolve-credits-desktop {
        font-size: 6px;
        padding: 3px 8px;
        bottom: 6px;
        opacity: 0.4;
    }
}

@media (max-width: 480px) {
    .evolve-credits-desktop {
        font-size: 6px;
        padding: 2px 7px;
        bottom: 5px;
    }
}