@import 'Tga.Client.jxlj7zlbfh.bundle.scp.css';
@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.mnccjmrpdk.bundle.scp.css';

/* /Components/Account/Pages/ChatFormF.razor.rz.scp.css */
html[b-8xyqvl2aso], body[b-8xyqvl2aso] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a[b-8xyqvl2aso], .btn-link[b-8xyqvl2aso] {
    color: #006bb7;
}

.btn-primary[b-8xyqvl2aso] {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus[b-8xyqvl2aso], .btn:active:focus[b-8xyqvl2aso], .btn-link.nav-link:focus[b-8xyqvl2aso], .form-control:focus[b-8xyqvl2aso], .form-check-input:focus[b-8xyqvl2aso] {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content[b-8xyqvl2aso] {
    padding-top: 1.1rem;
}

h1:focus[b-8xyqvl2aso] {
    outline: none;
}

.valid.modified:not([type=checkbox])[b-8xyqvl2aso] {
    outline: 1px solid #26b050;
}

.invalid[b-8xyqvl2aso] {
    outline: 1px solid #e50000;
}

.validation-message[b-8xyqvl2aso] {
    color: #e50000;
}

.blazor-error-boundary[b-8xyqvl2aso] {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary[b-8xyqvl2aso]::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input[b-8xyqvl2aso] {
    border-color: #929292;
}

.form-floating > .form-control-plaintext[b-8xyqvl2aso]::placeholder, .form-floating > .form-control[b-8xyqvl2aso]::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus[b-8xyqvl2aso]::placeholder, .form-floating > .form-control:focus[b-8xyqvl2aso]::placeholder {
    text-align: start;
}

.chat-page[b-8xyqvl2aso] {
    display: flex;
    justify-content: center;
    padding: 28px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.chat-card[b-8xyqvl2aso] {
    width: 100%;
    max-width: 820px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,252,0.95));
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(20,25,35,0.08);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(20,25,35,0.04);
}

.title[b-8xyqvl2aso] {
    margin: 0;
    font-size: 1.25rem;
    color: #0f1724;
}

.messages[b-8xyqvl2aso] {
    min-height: 160px;
    max-height: 360px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(250,250,255,0.6), rgba(245,247,250,0.4));
    border-radius: 10px;
}

.placeholder[b-8xyqvl2aso] {
    color: #6b7280;
    font-size: 0.95rem;
    padding: 16px;
    text-align: center;
}

.bubble[b-8xyqvl2aso] {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    position: relative;
    display: inline-block;
    animation: pop-b-8xyqvl2aso .12s ease-out;
}

    .bubble.bot[b-8xyqvl2aso] {
        align-self: flex-start;
        background: #f1f5f9;
        color: #0f1724;
        border-bottom-left-radius: 6px;
    }

    .bubble.user[b-8xyqvl2aso] {
        align-self: flex-end;
        background: linear-gradient(90deg,#0ea5a4,#06b6d4);
        color: white;
        border-bottom-right-radius: 6px;
    }

.bubble-text[b-8xyqvl2aso] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.98rem;
}

.bubble-meta[b-8xyqvl2aso] {
    font-size: 0.72rem;
    opacity: 0.7;
    margin-top: 6px;
    text-align: right;
}

.form-row[b-8xyqvl2aso] {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 12px;
    align-items: stretch;
}

.textarea[b-8xyqvl2aso] {
    width: 100%;
    resize: vertical;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(15,23,36,0.08);
    background: white;
    font-size: 0.98rem;
    min-height: 110px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

    .textarea:focus[b-8xyqvl2aso] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(59,130,246,0.06);
        border-color: rgba(59,130,246,0.6);
    }

.controls[b-8xyqvl2aso] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.meta[b-8xyqvl2aso] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #6b7280;
}

.char-count[b-8xyqvl2aso] {
    font-weight: 600;
    color: #111827;
}

.buttons[b-8xyqvl2aso] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn[b-8xyqvl2aso] {
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
}

    .btn:disabled[b-8xyqvl2aso] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-primary[b-8xyqvl2aso] {
    background: linear-gradient(90deg,#06b6d4,#0ea5a4);
    color: white;
    box-shadow: 0 6px 18px rgba(6,182,212,0.14);
}

.btn-ghost[b-8xyqvl2aso] {
    background: transparent;
    border: 1px solid rgba(15,23,36,0.06);
    color: #0f1724;
}

.status[b-8xyqvl2aso] {
    margin-top: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg,#fff6f6,#fff);
    color: #b91c1c;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 1px solid rgba(185,28,28,0.06);
}

.spinner[b-8xyqvl2aso] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.6);
    border-top-color: rgba(255,255,255,1);
    border-radius: 50%;
    margin-right: 8px;
    animation: spin-b-8xyqvl2aso 0.9s linear infinite;
    vertical-align: middle;
}

/* Animations */
@keyframes spin-b-8xyqvl2aso {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pop-b-8xyqvl2aso {
    from {
        transform: scale(.98);
        opacity: 0.6;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 740px) {
    .form-row[b-8xyqvl2aso] {
        grid-template-columns: 1fr;
    }

    .controls[b-8xyqvl2aso] {
        flex-direction: row-reverse;
        align-items: center;
        gap: 6px;
    }

        .controls .meta[b-8xyqvl2aso] {
            display: none;
        }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-l8zen8gciq] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-l8zen8gciq] {
    flex: 1;
}

.sidebar[b-l8zen8gciq] {
    width: 0;
    height: 100vh;
    flex-shrink: 0;
}

/* =========================================================================
   BARRA SUPERIOR
   Antes: background-color:#19182D fijo por style inline en MainLayout.razor
   (por eso se quedaba oscura aunque el tema estuviera en claro).
   Ahora usa los tokens de app.css, que cambian con data-bs-theme.
   ========================================================================= */
.app-topbar[b-l8zen8gciq] {
    background-color: var(--app-topbar-bg);
    color: var(--app-topbar-text);
    border-bottom: 1px solid var(--app-topbar-border);
    box-shadow: var(--app-topbar-shadow);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 56px;
    align-items: center;
    z-index: 10;
}

.top-row[b-l8zen8gciq] {
    background-color: var(--app-topbar-bg);
    border-bottom: 1px solid var(--app-topbar-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-l8zen8gciq]  a, .top-row[b-l8zen8gciq]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
        color: var(--app-topbar-text);
    }

        .top-row[b-l8zen8gciq]  a:hover, .top-row[b-l8zen8gciq]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-l8zen8gciq]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 440.98px) {
    .top-row[b-l8zen8gciq] {
        justify-content: space-between;
    }

        .top-row[b-l8zen8gciq]  a, .top-row[b-l8zen8gciq]  .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 441px) {
    .page[b-l8zen8gciq] {
        flex-direction: row;
    }

    .sidebar[b-l8zen8gciq] {
        width: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }

    .top-row[b-l8zen8gciq] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-l8zen8gciq]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-l8zen8gciq], article[b-l8zen8gciq] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-l8zen8gciq] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-l8zen8gciq] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-gm4qelvmno],
.components-reconnect-repeated-attempt-visible[b-gm4qelvmno],
.components-reconnect-failed-visible[b-gm4qelvmno],
.components-pause-visible[b-gm4qelvmno],
.components-resume-failed-visible[b-gm4qelvmno],
.components-rejoining-animation[b-gm4qelvmno] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-gm4qelvmno],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-gm4qelvmno],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-gm4qelvmno],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-gm4qelvmno],
#components-reconnect-modal.components-reconnect-retrying[b-gm4qelvmno],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-gm4qelvmno],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-gm4qelvmno],
#components-reconnect-modal.components-reconnect-failed[b-gm4qelvmno],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-gm4qelvmno] {
    display: block;
}


#components-reconnect-modal[b-gm4qelvmno] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-gm4qelvmno 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-gm4qelvmno 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-gm4qelvmno 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-gm4qelvmno]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-gm4qelvmno 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-gm4qelvmno {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-gm4qelvmno {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-gm4qelvmno {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-gm4qelvmno] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-gm4qelvmno] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-gm4qelvmno] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-gm4qelvmno] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-gm4qelvmno] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-gm4qelvmno] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-gm4qelvmno] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-gm4qelvmno 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-gm4qelvmno] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-gm4qelvmno {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SidebarTga.razor.rz.scp.css */
/*
    Antes: background-color:#19182D fijo + color:#fff fijo.
    Ahora: tokens de sidebar (app.css), que cambian entre light/dark
    manteniendo la identidad "navy" de marca pero con dos profundidades
    distintas y buen contraste en ambos temas.
*/
.auto-hiding-nav-menu[b-xkex62zsci] {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    background-color: var(--app-sidebar-bg);
    color: var(--app-sidebar-text);
    border-right: 1px solid var(--app-sidebar-border);
    padding: 0.1rem;
    margin-top: 0;
    /*
        IMPORTANTE:
        No animamos width.
        El ancho siempre es 250px.
        Solo desplazamos el sidebar.
    */
    transition: transform 0.25s ease, background-color 0.2s ease;
    z-index: 999;
}

    /*
        El <Accordion> de Blazor.Bootstrap trae sus propias variables de
        Bootstrap (--bs-accordion-bg, --bs-accordion-color, etc.), y desde
        que app.css también retematiza .accordion de forma global (para que
        el Home y otras páginas usen el mismo estilo), esa regla global
        gana por ser una declaración directa sobre el propio elemento
        .accordion, pisando lo que pusiéramos en el contenedor padre.
        Por eso acá apuntamos directo a ".auto-hiding-nav-menu ::deep
        .accordion" (más específico que ".accordion" a secas) para que el
        sidebar conserve su propio esquema de color (fondo transparente
        sobre el navy del sidebar) en vez del --app-surface genérico.
    */
    .auto-hiding-nav-menu[b-xkex62zsci]  .accordion {
        --bs-accordion-bg: transparent;
        --bs-accordion-color: var(--app-sidebar-text);
        --bs-accordion-border-color: var(--app-sidebar-border);
        --bs-accordion-btn-color: var(--app-sidebar-text);
        --bs-accordion-btn-bg: transparent;
        --bs-accordion-active-bg: var(--app-sidebar-bg-active);
        --bs-accordion-active-color: var(--app-sidebar-accent);
        box-shadow: none;
    }

    /*
        SIDEBAR OCULTO
        Dejamos 15px visibles como zona de activación para el mouse.
        250px - 235px = 15px
    */
    .auto-hiding-nav-menu.collapsed[b-xkex62zsci] {
        transform: translateX(-245px);
    }

    /*
        SIDEBAR DESPLEGADO
    */
    .auto-hiding-nav-menu.expanded[b-xkex62zsci] {
        transform: translateX(0);
    }

/*
    El nav mantiene siempre su ancho.
    No utilizamos width: 0 aquí.
*/
.nav-menu[b-xkex62zsci] {
    overflow: hidden;
    height: 100%;
    width: 250px;
    margin-left: 0;
}

/*
    Texto de los elementos
*/
.nav-item-text[b-xkex62zsci] {
    visibility: hidden;
    position: absolute;
    margin-left: 0.5rem;
    margin-top: 4px;
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    transform-origin: left center;
}

/*
    Cuando el sidebar está desplegado, mostramos los textos.
*/
.auto-hiding-nav-menu.expanded .nav-item-text[b-xkex62zsci] {
    visibility: visible;
    opacity: 0.85;
    pointer-events: auto; /* para que el texto se seleccione */
}

/*
    Hover de los textos.
    Antes: color:#DAF7A6 (lima brillante) + transform: scale(1.1).
    Ahora: acento dorado apagado de marca, sin "salto" de escala.
*/
.nav-link:hover .nav-item-text[b-xkex62zsci] {
    opacity: 1;
    color: var(--app-sidebar-accent);
}

/*
    Contenedor de cada elemento
*/
.nav-item[b-xkex62zsci] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/*
    Iconos
*/
.nav-item-icon[b-xkex62zsci] {
    color: var(--app-sidebar-text);
    font-size: 20px;
    transition: color 0.2s ease;
    margin-bottom: 5px;
}

/*
    Hover de iconos (antes lima brillante)
*/
.nav-link:hover .nav-item-icon[b-xkex62zsci] {
    color: var(--app-sidebar-accent);
}

/*
    Fondo sutil al pasar el mouse sobre todo el link, para que el
    realce no dependa solo del color del texto/ícono.
*/
.nav-link:hover[b-xkex62zsci] {
    background-color: var(--app-sidebar-bg-active);
    border-radius: 0.4rem;
}

/*
    Alineación de elementos internos
*/
.nav-link > *[b-xkex62zsci] {
    align-self: flex-start;
}

.nav-link[b-xkex62zsci],
.nav-link .nav-item-text[b-xkex62zsci],
.nav-link .nav-item-icon[b-xkex62zsci] {
    cursor: pointer;
}


/*
    Antes: transform: scale(1.1) en hover del acordeón.
    Ahora: solo transición de color, coherente con el resto del sidebar.
*/
.custom-accordion-item[b-xkex62zsci]  .accordion-button {
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .custom-accordion-item[b-xkex62zsci]  .accordion-button:hover {
        color: var(--app-sidebar-accent) !important;
    }




.nav-link[b-xkex62zsci] {
    margin-bottom: 0px;
}


.expand .nav-link[b-xkex62zsci] {
    margin-bottom: 0px;
}


summary[b-xkex62zsci] {
    list-style-type: '⬇ ';
}


details[open] > summary[b-xkex62zsci] {
    list-style-type: '⬆ ';
}

/*
        Antes: background-color:#19182D fijo (no reaccionaba al tema).
        Ahora usa el token de sidebar, que cambia con data-bs-theme.
    */
[b-xkex62zsci] .custom-accordion-item {
    background-color: var(--app-sidebar-bg);
}

    /*
            Antes: color: yellow !important; transform: scale(1.1) !important;
            Un hover amarillo brillante + "salto" de escala es ruidoso.
            Ahora: solo un leve realce de fondo y el acento dorado apagado
            de marca, sin animaciones bruscas.
        */
    [b-xkex62zsci] .custom-accordion-item .accordion-button:hover {
        background-color: var(--app-sidebar-bg-active) !important;
        color: var(--app-sidebar-accent) !important;
    }