/*
|--------------------------------------------------------------------------
| SIMÓN - ASISTENTE VIRTUAL SIMONA
| Interfaz compacta y aislada v0.5
|--------------------------------------------------------------------------
*/

#simon-app,
#simon-app *,
#simon-app *::before,
#simon-app *::after {
    box-sizing: border-box !important;
}

#simon-app {
    position: relative;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    z-index: 999999;
    font-family: Arial, Helvetica, sans-serif;
}


/*
|--------------------------------------------------------------------------
| BOTÓN FLOTANTE
|--------------------------------------------------------------------------
*/

#simon-app button.simon-floating-button {
    position: fixed !important;
    right: 24px !important;
    bottom: 25px !important;

    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 3px solid #ffffff !important;
    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at 35% 25%,
            #62ff8a 0%,
            #24ba4f 48%,
            #08752e 100%
        ) !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.25),
        0 0 0 7px rgba(31,181,70,.13),
        0 0 25px rgba(55,255,105,.18) !important;

    color: #ffffff !important;

    cursor: grab !important;

    overflow: visible !important;

    z-index: 1000002 !important;

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;

    animation:
        simon-float 3.6s ease-in-out infinite !important;
}

#simon-app button.simon-floating-button:active {
    cursor: grabbing !important;
}


/*
|--------------------------------------------------------------------------
| ROBOT
|--------------------------------------------------------------------------
*/

#simon-app .simon-avatar {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: none !important;
}

#simon-app .simon-head {
    position: absolute !important;

    width: 53px !important;
    height: 44px !important;

    top: 12px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    border: 2px solid #ffffff !important;

    border-radius:
        46% 46% 40% 40% !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #dce8df 60%,
            #aebeb3
        ) !important;

    box-shadow:
        inset -4px -5px 8px rgba(0,0,0,.10),
        0 3px 8px rgba(0,0,0,.16) !important;

    z-index: 4 !important;
}

#simon-app .simon-face {
    position: absolute !important;

    left: 6px !important;
    right: 6px !important;
    top: 8px !important;
    bottom: 7px !important;

    border-radius: 44% !important;

    border:
        1px solid rgba(78,255,127,.55) !important;

    background:
        linear-gradient(
            160deg,
            #102b1b,
            #03150b
        ) !important;

    box-shadow:
        inset 0 0 12px rgba(48,255,103,.16) !important;
}

#simon-app .simon-eye {
    position: absolute !important;

    width: 7px !important;
    height: 9px !important;

    top: 8px !important;

    border-radius: 50% !important;

    background: #69ff8c !important;

    box-shadow:
        0 0 7px rgba(78,255,125,.95) !important;

    animation:
        simon-blink 5s infinite !important;
}

#simon-app .simon-eye-left {
    left: 10px !important;
}

#simon-app .simon-eye-right {
    right: 10px !important;
}

#simon-app .simon-mouth {
    position: absolute !important;

    width: 15px !important;
    height: 7px !important;

    left: 50% !important;
    bottom: 5px !important;

    transform: translateX(-50%) !important;

    border: 0 !important;
    border-bottom:
        2px solid #69ff8c !important;

    border-radius:
        0 0 15px 15px !important;
}

#simon-app .simon-ear {
    position: absolute !important;

    width: 8px !important;
    height: 17px !important;

    top: 15px !important;

    border:
        1px solid #ffffff !important;

    border-radius: 5px !important;

    background: #d2ddd5 !important;
}

#simon-app .simon-ear-left {
    left: -6px !important;
}

#simon-app .simon-ear-right {
    right: -6px !important;
}

#simon-app .simon-body {
    position: absolute !important;

    width: 44px !important;
    height: 28px !important;

    left: 50% !important;
    bottom: 4px !important;

    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border:
        2px solid rgba(255,255,255,.9) !important;

    border-radius:
        13px 13px 18px 18px !important;

    background:
        linear-gradient(
            145deg,
            #28c657,
            #08752e
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    z-index: 3 !important;
}

#simon-app .simon-status-dot {
    position: absolute !important;

    right: 1px !important;
    bottom: 5px !important;

    width: 15px !important;
    height: 15px !important;

    border:
        3px solid #ffffff !important;

    border-radius: 50% !important;

    background: #48ff77 !important;

    box-shadow:
        0 0 9px rgba(72,255,119,.85) !important;

    z-index: 10 !important;
}


/*
|--------------------------------------------------------------------------
| ETIQUETA
|--------------------------------------------------------------------------
*/

#simon-app .simon-floating-label {
    position: fixed !important;

    right: 25px !important;
    bottom: 113px !important;

    margin: 0 !important;
    padding: 7px 12px !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: #ffffff !important;

    color: #08752e !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.16) !important;

    z-index: 1000000 !important;
}

#simon-app .simon-floating-label::after {
    content: "";

    position: absolute;

    right: 24px;
    bottom: -6px;

    width: 12px;
    height: 12px;

    background: #ffffff;

    transform: rotate(45deg);
}


/*
|--------------------------------------------------------------------------
| SALUDO
|--------------------------------------------------------------------------
*/

#simon-app .simon-greeting {
    position: fixed !important;

    right: 24px !important;
    bottom: 128px !important;

    width: 270px !important;
    max-width: calc(100vw - 30px) !important;

    margin: 0 !important;

    padding:
        14px 37px 14px 16px !important;

    border:
        1px solid rgba(20,135,52,.14) !important;

    border-radius: 15px !important;

    background: #ffffff !important;

    color: #173a21 !important;

    box-shadow:
        0 14px 38px rgba(0,0,0,.20) !important;

    z-index: 1000003 !important;
}

#simon-app .simon-greeting strong {
    display: block !important;

    margin: 0 0 3px !important;

    color: #08752e !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}

#simon-app .simon-greeting span {
    display: block !important;

    margin: 0 !important;

    color: #59685e !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
}

#simon-app .simon-greeting::after {
    content: "";

    position: absolute;

    right: 28px;
    bottom: -7px;

    width: 14px;
    height: 14px;

    background: #ffffff;

    transform: rotate(45deg);
}


/*
|--------------------------------------------------------------------------
| X SALUDO
|--------------------------------------------------------------------------
*/

#simon-app button.simon-greeting-close {
    position: absolute !important;

    right: 8px !important;
    top: 7px !important;

    width: 25px !important;
    height: 25px !important;

    min-width: 25px !important;
    min-height: 25px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #eaf4ed !important;

    color: #08752e !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    box-shadow: none !important;

    cursor: pointer !important;
}


/*
|--------------------------------------------------------------------------
| PANEL PRINCIPAL
|--------------------------------------------------------------------------
*/

#simon-app .simon-panel {
    position: fixed !important;

    right: 22px !important;
    bottom: 116px !important;

    width: 410px !important;
    max-width: calc(100vw - 30px) !important;

    max-height:
        min(540px, calc(100vh - 145px)) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    border:
        1px solid rgba(22,137,54,.18) !important;

    border-radius: 21px !important;

    background: #ffffff !important;

    box-shadow:
        0 24px 65px rgba(0,0,0,.27) !important;

    overflow: hidden !important;

    z-index: 1000004 !important;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(16px)
        scale(.97);

    transform-origin: bottom right;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease !important;
}


/*
|--------------------------------------------------------------------------
| CABECERA
|--------------------------------------------------------------------------
*/

#simon-app .simon-panel-header {
    width: 100% !important;

    min-height: 66px !important;

    margin: 0 !important;
    padding: 10px 13px !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(80,255,127,.18),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #042811,
            #08752e
        ) !important;

    color: #ffffff !important;
}

#simon-app .simon-mini-avatar {
    flex: 0 0 42px !important;

    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border:
        2px solid #ffffff !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #4bea73,
            #12943c
        ) !important;

    color: #ffffff !important;

    font-size: 18px !important;
    font-weight: 900 !important;

    box-shadow:
        0 0 0 4px rgba(70,255,119,.11) !important;
}

#simon-app .simon-panel-identity {
    flex: 1 !important;
    min-width: 0 !important;
}

#simon-app .simon-panel-identity strong {
    display: block !important;

    margin: 0 !important;

    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

#simon-app .simon-panel-identity small {
    display: block !important;

    margin: 3px 0 0 !important;

    color:
        rgba(255,255,255,.80) !important;

    font-size: 10px !important;
}


/*
|--------------------------------------------------------------------------
| X PANEL
|--------------------------------------------------------------------------
*/

#simon-app button.simon-close {
    flex: 0 0 30px !important;

    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border:
        1px solid rgba(255,255,255,.32) !important;

    border-radius: 50% !important;

    background:
        rgba(255,255,255,.12) !important;

    color: #ffffff !important;

    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    box-shadow: none !important;

    cursor: pointer !important;
}


/*
|--------------------------------------------------------------------------
| CONTENIDO
|--------------------------------------------------------------------------
*/

#simon-app .simon-panel-content {
    width: 100% !important;

    margin: 0 !important;
    padding: 12px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background:
        linear-gradient(
            180deg,
            #f5faf6,
            #ffffff
        ) !important;
}

#simon-app .simon-message {
    width: 100% !important;

    margin: 0 0 10px !important;
    padding: 9px 11px !important;

    border:
        1px solid #d6ebdc !important;

    border-radius:
        6px 13px 13px 13px !important;

    background: #eaf7ee !important;

    color: #294333 !important;
}

#simon-app .simon-message strong {
    display: block !important;

    margin: 0 0 3px !important;

    color: #08752e !important;

    font-size: 12px !important;
    font-weight: 800 !important;
}

#simon-app .simon-message p {
    margin: 0 !important;

    color: #506057 !important;

    font-size: 10px !important;
    line-height: 1.4 !important;
}

#simon-app .simon-panel-content h3 {
    margin: 0 0 8px !important;

    color: #173520 !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}


/*
|--------------------------------------------------------------------------
| CUADRÍCULA DE ACCIONES
|--------------------------------------------------------------------------
*/

#simon-app .simon-main-actions {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr) !important;

    gap: 7px !important;

    overflow: visible !important;
}


/*
|--------------------------------------------------------------------------
| TODAS LAS TARJETAS
|--------------------------------------------------------------------------
*/

#simon-app button.simon-action,
#simon-app button.simon-action:not(.simon-action-primary),
#simon-app button.simon-action:hover,
#simon-app button.simon-action:focus,
#simon-app button.simon-action:active,
body #simon-app button.simon-action {

    appearance: none !important;
    -webkit-appearance: none !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 6px 8px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 7px !important;

    border:
        1px solid #b9ddc3 !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f3faf5
        ) !important;

    background-color:
        #ffffff !important;

    color: #075d27 !important;

    text-align: left !important;

    text-decoration: none !important;

    box-shadow:
        0 3px 8px rgba(7,91,38,.05) !important;

    cursor: pointer !important;

    overflow: hidden !important;

    transform: none;

    opacity: 1 !important;
}

#simon-app button.simon-action:hover {
    border-color:
        #55bd72 !important;

    background:
        #edf8f0 !important;

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 6px 12px rgba(7,91,38,.09) !important;
}


/*
|--------------------------------------------------------------------------
| HABLAR CON SIMÓN
|--------------------------------------------------------------------------
*/

#simon-app button.simon-action.simon-action-primary,
#simon-app button.simon-action.simon-action-primary:hover,
#simon-app button.simon-action.simon-action-primary:focus,
#simon-app button.simon-action.simon-action-primary:active {

    border-color:
        #08752e !important;

    background:
        linear-gradient(
            135deg,
            #24b94f,
            #08752e
        ) !important;

    background-color:
        #08752e !important;

    color:
        #ffffff !important;

    box-shadow:
        0 5px 12px rgba(8,117,46,.18) !important;
}


/*
|--------------------------------------------------------------------------
| ICONOS
|--------------------------------------------------------------------------
*/

#simon-app .simon-action-icon {
    flex: 0 0 27px !important;

    width: 27px !important;
    height: 27px !important;

    min-width: 27px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 8px !important;

    background:
        #e5f5e9 !important;

    color: #08752e !important;

    font-size: 14px !important;
    line-height: 1 !important;
}

#simon-app
button.simon-action-primary
.simon-action-icon {

    background:
        rgba(255,255,255,.17) !important;

    color:
        #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| TEXTO TARJETAS
|--------------------------------------------------------------------------
*/

#simon-app
button.simon-action
> span:last-child {

    flex: 1 !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

#simon-app
button.simon-action strong {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    line-height: 1.15 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}

#simon-app
button.simon-action small {

    display: block !important;

    width: 100% !important;

    margin: 2px 0 0 !important;
    padding: 0 !important;

    color: #718078 !important;

    font-size: 7.5px !important;
    font-weight: 500 !important;

    line-height: 1.15 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}

#simon-app
button.simon-action-primary small {

    color:
        rgba(255,255,255,.78) !important;
}


/*
|--------------------------------------------------------------------------
| COMPRA AUTÓNOMA
|--------------------------------------------------------------------------
*/

#simon-app button.simon-autonomous,
#simon-app button.simon-autonomous:hover,
#simon-app button.simon-autonomous:focus,
#simon-app button.simon-autonomous:active {

    appearance: none !important;
    -webkit-appearance: none !important;

    width: 100% !important;

    min-height: 34px !important;

    margin: 8px 0 0 !important;
    padding: 7px 10px !important;

    border:
        1px solid #b9ddc3 !important;

    border-radius: 9px !important;

    background:
        #edf8f0 !important;

    color:
        #08752e !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    text-align: center !important;

    box-shadow: none !important;

    cursor: pointer !important;
}


/*
|--------------------------------------------------------------------------
| PIE
|--------------------------------------------------------------------------
*/

#simon-app .simon-panel-footer {
    width: 100% !important;

    min-height: 34px !important;

    margin: 0 !important;
    padding: 7px 11px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    border-top:
        1px solid #e0e9e2 !important;

    background:
        #f2f7f3 !important;

    color:
        #657269 !important;

    font-size:
        9px !important;
}

#simon-app .simon-online-dot {
    width: 7px !important;
    height: 7px !important;

    border-radius:
        50% !important;

    background:
        #25c653 !important;

    box-shadow:
        0 0 6px rgba(37,198,83,.55) !important;
}


/*
|--------------------------------------------------------------------------
| ANIMACIONES
|--------------------------------------------------------------------------
*/

@keyframes simon-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes simon-blink {

    0%,
    44%,
    48%,
    100% {
        transform: scaleY(1);
    }

    46% {
        transform: scaleY(.12);
    }
}


/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    #simon-app button.simon-floating-button {
        right: 14px !important;
        bottom: 16px !important;

        width: 70px !important;
        height: 70px !important;

        min-width: 70px !important;
        min-height: 70px !important;
    }

    #simon-app .simon-head {
        width: 46px !important;
        height: 39px !important;

        top: 10px !important;
    }

    #simon-app .simon-body {
        width: 38px !important;
        height: 25px !important;

        bottom: 3px !important;
    }

    #simon-app .simon-floating-label {
        right: 15px !important;
        bottom: 96px !important;
    }

    #simon-app .simon-greeting {
        right: 14px !important;
        bottom: 108px !important;

        width:
            min(265px, calc(100vw - 28px)) !important;
    }

    #simon-app .simon-panel {
        left: 8px !important;
        right: 8px !important;

        bottom: 92px !important;

        width: auto !important;

        max-width: none !important;

        max-height:
            calc(100vh - 110px) !important;

        border-radius:
            18px !important;
    }

    #simon-app .simon-main-actions {
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        gap: 6px !important;
    }

    #simon-app button.simon-action {
        height: 46px !important;
        min-height: 46px !important;

        padding: 5px 6px !important;
    }

    #simon-app .simon-action-icon {
        flex-basis: 25px !important;

        width: 25px !important;
        height: 25px !important;

        min-width: 25px !important;

        font-size: 13px !important;
    }

    #simon-app
    button.simon-action strong {
        font-size: 9px !important;
    }

    #simon-app
    button.simon-action small {
        font-size: 7px !important;
    }
}


/*
|--------------------------------------------------------------------------
| ACCESIBILIDAD
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    #simon-app .simon-floating-button,
    #simon-app .simon-eye {
        animation: none !important;
    }
}
/* ==========================================================
   SIMÓN OFICIAL - PERSONAJE FLOTANTE v1
   ========================================================== */

#simon-app button.simon-floating-button.simon-character-button {
    width: 112px !important;
    height: 128px !important;
    min-width: 112px !important;
    min-height: 128px !important;

    right: 20px !important;
    bottom: 18px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;

    overflow: visible !important;

    cursor: grab !important;

    transform-origin: center bottom;

    animation:
        simon-character-float 3.2s ease-in-out infinite !important;
}


/* Halo tecnológico detrás de Simón */

#simon-app button.simon-character-button::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 88px;
    height: 88px;

    transform: translate(-50%, -44%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(74,255,121,.28) 0%,
            rgba(30,194,76,.13) 43%,
            rgba(8,117,46,.05) 62%,
            transparent 72%
        );

    box-shadow:
        0 0 22px rgba(57,255,108,.25),
        0 0 48px rgba(8,117,46,.13);

    pointer-events: none;

    z-index: 0;

    animation:
        simon-character-energy 2.8s ease-in-out infinite;
}


/* Imagen oficial */

#simon-app .simon-character-image {
    position: relative !important;

    display: block !important;

    width: 108px !important;
    height: 124px !important;

    max-width: none !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    filter:
        drop-shadow(0 9px 8px rgba(0,0,0,.20))
        drop-shadow(0 0 9px rgba(50,255,104,.18));

    pointer-events: none !important;

    user-select: none !important;
    -webkit-user-select: none !important;

    z-index: 2 !important;

    transition:
        transform .22s ease,
        filter .22s ease;
}


/* Reacción al pasar el mouse */

#simon-app button.simon-character-button:hover
.simon-character-image {
    transform:
        translateY(-3px)
        scale(1.07);

    filter:
        drop-shadow(0 11px 9px rgba(0,0,0,.22))
        drop-shadow(0 0 15px rgba(50,255,104,.38));
}


/* Indicador disponible */

#simon-app button.simon-character-button
.simon-status-dot {
    right: 6px !important;
    bottom: 12px !important;

    width: 15px !important;
    height: 15px !important;

    border: 3px solid #ffffff !important;

    background: #42f56f !important;

    box-shadow:
        0 0 0 3px rgba(66,245,111,.13),
        0 0 11px rgba(66,245,111,.85) !important;

    z-index: 5 !important;

    animation:
        simon-status-pulse 2s ease-in-out infinite;
}


/* Mini Simón del encabezado */

#simon-app .simon-mini-avatar-character {
    overflow: hidden !important;

    background:
        radial-gradient(
            circle,
            #35cf60,
            #08752e
        ) !important;
}

#simon-app .simon-mini-avatar-character img {
    width: 40px !important;
    height: 40px !important;

    max-width: none !important;

    object-fit: contain !important;

    transform: scale(1.08);

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.18));
}


/* Movimiento natural */

@keyframes simon-character-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


/* Respiración del halo */

@keyframes simon-character-energy {

    0%,
    100% {
        opacity: .72;
        transform:
            translate(-50%, -44%)
            scale(.94);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -44%)
            scale(1.08);
    }
}


/* Punto online */

@keyframes simon-status-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.16);
    }
}


/* Ajuste del texto ¿Te ayudo? */

#simon-app .simon-floating-label {
    right: 30px !important;
    bottom: 142px !important;
}


/* Ajuste del saludo */

#simon-app .simon-greeting {
    right: 26px !important;
    bottom: 158px !important;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    #simon-app button.simon-floating-button.simon-character-button {
        width: 92px !important;
        height: 106px !important;

        min-width: 92px !important;
        min-height: 106px !important;

        right: 10px !important;
        bottom: 12px !important;
    }

    #simon-app .simon-character-image {
        width: 90px !important;
        height: 104px !important;
    }

    #simon-app button.simon-character-button::before {
        width: 74px;
        height: 74px;
    }

    #simon-app .simon-floating-label {
        right: 18px !important;
        bottom: 118px !important;
    }

    #simon-app .simon-greeting {
        right: 12px !important;
        bottom: 132px !important;
    }
}


/* Respeta usuarios con animaciones reducidas */

@media (prefers-reduced-motion: reduce) {

    #simon-app button.simon-character-button,
    #simon-app button.simon-character-button::before,
    #simon-app button.simon-character-button
    .simon-status-dot {
        animation: none !important;
    }
}
/* ==========================================================
   SIMÓN - POSICIÓN CUANDO EL PANEL ESTÁ ABIERTO
   ========================================================== */

/* Un poco más de presencia al personaje */

#simon-app button.simon-floating-button.simon-character-button {
    width: 128px !important;
    height: 144px !important;
    min-width: 128px !important;
    min-height: 144px !important;

    transition:
        right .35s cubic-bezier(.22,.61,.36,1),
        bottom .35s cubic-bezier(.22,.61,.36,1) !important;
}

#simon-app .simon-character-image {
    width: 124px !important;
    height: 142px !important;
}


/* ----------------------------------------------------------
   CUANDO EL PANEL ESTÁ ABIERTO
   El panel usa la clase .is-open
   ---------------------------------------------------------- */

#simon-app:has(.simon-panel.is-open)
.simon-floating-button.simon-character-button {

    /*
     * Panel: ~440 px
     * Separación: 22 px
     * Simón queda inmediatamente a su izquierda.
     */

    right: 475px !important;
    bottom: 22px !important;
}


/* La etiqueta acompaña a Simón */

#simon-app:has(.simon-panel.is-open)
.simon-floating-label {
    right: 490px !important;
    bottom: 158px !important;
}


/* Si todavía estuviera visible el saludo,
   también acompaña al personaje */

#simon-app:has(.simon-panel.is-open)
.simon-greeting {
    right: 486px !important;
    bottom: 176px !important;
}


/* Halo ligeramente más intenso cuando Simón está activo */

#simon-app:has(.simon-panel.is-open)
.simon-character-button::before {
    opacity: 1;
    box-shadow:
        0 0 28px rgba(57,255,108,.34),
        0 0 60px rgba(8,117,46,.20);
}


/* ==========================================================
   PANTALLAS INTERMEDIAS
   ========================================================== */

@media (max-width: 1050px) {

    #simon-app:has(.simon-panel.is-open)
    .simon-floating-button.simon-character-button {

        right: 430px !important;
    }

    #simon-app:has(.simon-panel.is-open)
    .simon-floating-label {

        right: 445px !important;
    }

}


/* ==========================================================
   MÓVIL
   No ponemos a Simón al lado porque no hay espacio.
   Se mantiene pequeño en la parte inferior.
   ========================================================== */

@media (max-width: 600px) {

    #simon-app button.simon-floating-button.simon-character-button {
        width: 94px !important;
        height: 108px !important;

        min-width: 94px !important;
        min-height: 108px !important;
    }

    #simon-app .simon-character-image {
        width: 92px !important;
        height: 106px !important;
    }

    #simon-app:has(.simon-panel.is-open)
    .simon-floating-button.simon-character-button {

        right: 8px !important;
        bottom: 8px !important;
    }

    #simon-app:has(.simon-panel.is-open)
    .simon-floating-label {

        display: none !important;
    }

}
/* ==========================================================
   SIMONA - AJUSTE FINAL DE TAMAÑO DEL PERSONAJE
   ========================================================== */

/* Personaje flotante */
#simon-app .simon-character-image {
    width: 180px !important;
    height: 190px !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: scale(1.38) !important;
    transform-origin: center bottom !important;
}

/* Mantener el efecto al pasar el mouse */
#simon-app button.simon-character-button:hover .simon-character-image {
    transform: scale(1.45) translateY(-2px) !important;
}

/* Avatar pequeño dentro de la cabecera */
#simon-app .simon-mini-avatar-character img {
    width: 52px !important;
    height: 52px !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: scale(1.25) !important;
}

/* Ajuste para celular */
@media (max-width: 600px) {

    #simon-app .simon-character-image {
        width: 145px !important;
        height: 155px !important;
        transform: scale(1.30) !important;
    }

    #simon-app button.simon-character-button:hover .simon-character-image {
        transform: scale(1.34) !important;
    }
}

/* ==========================================================
   SIMONA - VISTA CONVERSACIONAL v0.6
   Preparada para activarse desde "Escribir a SIMONA"
   ========================================================== */

#simon-app .simon-view[hidden] {
    display: none !important;
}

#simon-app .simon-view-chat {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background:
        linear-gradient(
            180deg,
            #f3faf5 0%,
            #ffffff 100%
        ) !important;
}

#simon-app .simon-chat-topbar {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 8px 11px 6px !important;
    border-bottom: 1px solid #e1eee5 !important;
    background: rgba(255,255,255,.94) !important;
}

#simon-app button.simon-chat-back {
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #edf8f0 !important;
    color: #08752e !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#simon-app button.simon-chat-back:hover,
#simon-app button.simon-chat-back:focus {
    background: #dff2e5 !important;
}

#simon-app .simon-chat-messages {
    flex: 1 1 auto !important;
    min-height: 235px !important;
    max-height: 350px !important;
    width: 100% !important;
    padding: 13px 12px 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: smooth;
}

#simon-app .simon-chat-message {
    width: 100% !important;
    margin: 0 0 11px !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
}

#simon-app .simon-chat-message-assistant {
    justify-content: flex-start !important;
}

#simon-app .simon-chat-message-user {
    justify-content: flex-end !important;
}

#simon-app .simon-chat-avatar {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    background: radial-gradient(circle,#35cf60,#08752e) !important;
    box-shadow:
        0 2px 8px rgba(8,117,46,.16),
        0 0 0 2px rgba(36,185,79,.08) !important;
}

#simon-app .simon-chat-avatar img {
    width: 38px !important;
    height: 38px !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: scale(1.12) !important;
}

#simon-app .simon-chat-bubble {
    max-width: 78% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #d3ead9 !important;
    border-radius: 7px 15px 15px 15px !important;
    background: #eaf7ee !important;
    color: #294333 !important;
    box-shadow: 0 3px 10px rgba(7,91,38,.06) !important;
}

#simon-app .simon-chat-message-user .simon-chat-bubble {
    border-color: #08752e !important;
    border-radius: 15px 7px 15px 15px !important;
    background: linear-gradient(135deg,#24b94f,#08752e) !important;
    color: #ffffff !important;
}

#simon-app .simon-chat-bubble strong {
    display: block !important;
    margin: 0 0 4px !important;
    color: #08752e !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

#simon-app .simon-chat-message-user .simon-chat-bubble strong {
    color: #ffffff !important;
}

#simon-app .simon-chat-bubble p {
    margin: 0 !important;
    color: inherit !important;
    font-size: 11px !important;
    line-height: 1.48 !important;
}

#simon-app .simon-chat-form {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 10px 10px !important;
    border-top: 1px solid #dcebe0 !important;
    background: #ffffff !important;
}

#simon-app .simon-chat-input-wrap {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 4px 5px 4px 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: 1px solid #b9ddc3 !important;
    border-radius: 14px !important;
    background: #f8fcf9 !important;
    box-shadow: inset 0 1px 2px rgba(7,91,38,.03) !important;
}

#simon-app .simon-chat-input-wrap:focus-within {
    border-color: #39ad5b !important;
    box-shadow:
        0 0 0 3px rgba(36,185,79,.10),
        inset 0 1px 2px rgba(7,91,38,.03) !important;
}

#simon-app input.simon-chat-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #263c2d !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 34px !important;
    box-shadow: none !important;
}

#simon-app input.simon-chat-input::placeholder {
    color: #7c8980 !important;
    opacity: 1 !important;
}

#simon-app button.simon-chat-voice,
#simon-app button.simon-chat-send {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

#simon-app button.simon-chat-voice {
    border: 1px solid #cbe5d2 !important;
    background: #edf8f0 !important;
    color: #08752e !important;
    font-size: 14px !important;
}

#simon-app button.simon-chat-send {
    border: 1px solid #08752e !important;
    background: linear-gradient(135deg,#24b94f,#08752e) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

#simon-app button.simon-chat-voice:hover,
#simon-app button.simon-chat-voice:focus {
    background: #dff2e5 !important;
}

#simon-app button.simon-chat-send:hover,
#simon-app button.simon-chat-send:focus {
    filter: brightness(1.04);
}

@media (max-width: 600px) {

    #simon-app .simon-chat-messages {
        min-height: 220px !important;
        max-height: calc(100vh - 285px) !important;
        padding: 12px 10px 9px !important;
    }

    #simon-app .simon-chat-bubble {
        max-width: 82% !important;
        padding: 9px 10px !important;
    }

    #simon-app .simon-chat-bubble p {
        font-size: 10.5px !important;
    }

    #simon-app .simon-chat-form {
        padding: 8px !important;
    }
}

/* ==========================================================
   SIMONA - TARJETAS TECNOLÓGICAS DE PRODUCTOS v1
   Solo presentación visual de resultados del catálogo
   ========================================================== */

#simon-app .simon-chat-bubble.simon-product-result {
    position: relative !important;
    width: min(100%, 300px) !important;
    max-width: 88% !important;
    min-height: 92px !important;
    padding: 10px 12px 10px 94px !important;
    overflow: hidden !important;

    border: 1px solid rgba(37, 185, 79, .30) !important;
    border-radius: 17px !important;

    background:
        radial-gradient(circle at 12% 18%, rgba(70,255,126,.13), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,249,239,.98)) !important;

    box-shadow:
        0 8px 20px rgba(7,91,38,.10),
        inset 0 1px 0 rgba(255,255,255,.95),
        0 0 0 1px rgba(67,255,119,.04) !important;

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease !important;
}

#simon-app .simon-chat-bubble.simon-product-result::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 3px !important;
    border-radius: 0 4px 4px 0 !important;
    background: linear-gradient(180deg,#66ff91,#0b8d3c) !important;
    box-shadow: 0 0 11px rgba(63,255,116,.55) !important;
}

#simon-app .simon-chat-bubble.simon-product-result::after {
    content: "" !important;
    position: absolute !important;
    right: -24px !important;
    top: -30px !important;
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(36,185,79,.10) !important;
    box-shadow:
        0 0 0 12px rgba(36,185,79,.025),
        0 0 0 24px rgba(36,185,79,.018) !important;
    pointer-events: none !important;
}

#simon-app .simon-chat-bubble.simon-product-result:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(36,185,79,.55) !important;
    box-shadow:
        0 11px 24px rgba(7,91,38,.14),
        0 0 18px rgba(54,235,102,.08),
        inset 0 1px 0 rgba(255,255,255,.98) !important;
}

#simon-app .simon-chat-bubble.simon-product-result > img {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    float: none !important;
    margin: 0 !important;

    width: 70px !important;
    height: 70px !important;
    max-width: 70px !important;

    padding: 5px !important;
    object-fit: contain !important;

    border: 1px solid rgba(36,185,79,.18) !important;
    border-radius: 13px !important;

    background:
        linear-gradient(145deg,#ffffff,#f3faf5) !important;

    box-shadow:
        0 5px 13px rgba(7,91,38,.09),
        inset 0 0 0 1px rgba(255,255,255,.8) !important;

    z-index: 2 !important;
}

#simon-app .simon-chat-bubble.simon-product-result > strong {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;
    margin: 1px 0 6px !important;

    color: #075b26 !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
    letter-spacing: .15px !important;
    text-transform: uppercase !important;
}

#simon-app .simon-chat-bubble.simon-product-result > p {
    position: relative !important;
    z-index: 2 !important;

    margin: 0 0 4px !important;
    color: #314a39 !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
}

/* Primer párrafo después del nombre = precio */
#simon-app .simon-chat-bubble.simon-product-result > strong + p {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 0 6px !important;
    padding: 4px 8px !important;

    border: 1px solid rgba(36,185,79,.17) !important;
    border-radius: 9px !important;

    background: rgba(255,255,255,.78) !important;
    color: #08752e !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;

    box-shadow: 0 2px 7px rgba(7,91,38,.05) !important;
}

/* Segundo párrafo = disponibilidad */
#simon-app .simon-chat-bubble.simon-product-result > strong + p + p {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;

    color: #397049 !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
}

#simon-app .simon-chat-bubble.simon-product-result > strong + p + p::before {
    content: "" !important;
    flex: 0 0 7px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #37d966 !important;
    box-shadow:
        0 0 0 3px rgba(55,217,102,.10),
        0 0 7px rgba(55,217,102,.55) !important;
}

/* El clear que agrega JS no debe ocupar espacio visual */
#simon-app .simon-chat-bubble.simon-product-result > div[style*="clear"] {
    display: none !important;
}

@media (max-width: 600px) {

    #simon-app .simon-chat-bubble.simon-product-result {
        width: min(100%, 285px) !important;
        max-width: 94% !important;
        min-height: 86px !important;
        padding: 9px 10px 9px 86px !important;
        border-radius: 15px !important;
    }

    #simon-app .simon-chat-bubble.simon-product-result > img {
        left: 10px !important;
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
    }

    #simon-app .simon-chat-bubble.simon-product-result > strong {
        font-size: 10.8px !important;
    }

    #simon-app .simon-chat-bubble.simon-product-result > strong + p {
        font-size: 12px !important;
    }
}