/* DIMACEA | Extraído de index.html | bloque CSS 21 */

/* Dimi en footer: botón pequeño y funcional para que no tape información en teléfonos */
        #stickyFooter {
            --dimiFooterSize: 30px;
            min-height: var(--stickyFooterH, 32px);
        }

        #stickyFooter .sf-wrap {
            max-width: 1200px;
            margin: 0 auto;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 8px !important;
            text-align: left !important;
            min-height: 30px;
        }

        #stickyFooter .sf-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 1px;
            line-height: 1.05;
        }

        #stickyFooter .sf-dimi-slot {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            min-width: var(--dimiFooterSize);
            height: var(--dimiFooterSize);
        }

        /* Estado minimizado: Dimi vive dentro del footer y ya no flota sobre las tarjetas */
        #stickyFooter #dimiBubble.minimized {
            position: static !important;
            inset: auto !important;
            right: auto !important;
            bottom: auto !important;
            width: var(--dimiFooterSize) !important;
            height: var(--dimiFooterSize) !important;
            min-width: var(--dimiFooterSize) !important;
            min-height: var(--dimiFooterSize) !important;
            max-width: var(--dimiFooterSize) !important;
            max-height: var(--dimiFooterSize) !important;
            border-radius: 999px !important;
            padding: 0 !important;
            margin: 0 !important;
            z-index: 81 !important;
            box-shadow: 0 2px 10px rgba(168, 85, 247, 0.28) !important;
            animation: none !important;
            transform: none !important;
        }

        #stickyFooter #dimiBubble.minimized .dimi-icon-min img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        /* Al tocar Dimi, el chat se abre sobre el footer para conservar funcionalidad. */
        #stickyFooter #dimiBubble:not(.minimized):not(.hero-mode) {
            position: fixed !important;
            right: 10px !important;
            bottom: calc(var(--stickyFooterH, 32px) + 10px) !important;
            width: min(360px, 92vw) !important;
            height: min(480px, 68dvh) !important;
            max-width: 92vw !important;
            max-height: 68dvh !important;
            z-index: 999 !important;
            transform: none !important;
        }

        body.dark #stickyFooter {
            background: rgba(15, 23, 42, 0.94) !important;
            border-top-color: rgba(51, 65, 85, 0.9) !important;
        }

        @media (max-width: 520px) {
            :root { --stickyFooterH: 34px; }
            #stickyFooter { --dimiFooterSize: 28px; padding: 2px 8px !important; }
            #stickyFooter .sf-wrap { gap: 6px !important; min-height: 30px; }
            #stickyFooter .sf-line1 { font-size: 9px !important; letter-spacing: .06em !important; }
            #stickyFooter .sf-line2 { font-size: 9px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 56px); }
            #stickyFooter #dimiBubble:not(.minimized):not(.hero-mode) {
                right: 6px !important;
                bottom: calc(var(--stickyFooterH, 34px) + 8px) !important;
                width: calc(100vw - 12px) !important;
                height: min(420px, 62dvh) !important;
                max-height: 62dvh !important;
            }
        }


        /* Etiqueta visible al lado izquierdo del botón para que los vendedores identifiquen a Dimi */
        #stickyFooter .sf-dimi-label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 6px;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(168, 85, 247, 0.10);
            border: 1px solid rgba(168, 85, 247, 0.22);
            color: #7e22ce;
            font-size: 10px;
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
        }

        #stickyFooter .sf-dimi-slot {
            cursor: pointer;
        }

        body.dark #stickyFooter .sf-dimi-label {
            background: rgba(168, 85, 247, 0.18) !important;
            border-color: rgba(216, 180, 254, 0.26) !important;
            color: #e9d5ff !important;
        }

        @media (max-width: 520px) {
            #stickyFooter .sf-dimi-label {
                margin-right: 4px;
                padding: 2px 5px;
                font-size: 8px;
                letter-spacing: .05em;
            }
        }