/* /Components/Layout/LegalLayout.razor.rz.scp.css */
/* Layout público de documentos legais — claro, centrado, sem app-shell. */
.legal-shell[b-abjc9vhwcj] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    color: var(--color-text);
}

.legal-topbar[b-abjc9vhwcj] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(150%) blur(8px);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--color-border);
}
.legal-topbar-in[b-abjc9vhwcj] {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.legal-brand[b-abjc9vhwcj] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-decoration: none;
}
.legal-brand:hover[b-abjc9vhwcj] { text-decoration: none; }
.legal-brand-accent[b-abjc9vhwcj] { color: var(--color-accent); }
.legal-back[b-abjc9vhwcj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.legal-back:hover[b-abjc9vhwcj] { color: var(--color-accent); text-decoration: none; }

.legal-main[b-abjc9vhwcj] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 44px 24px 72px;
}

.legal-footer[b-abjc9vhwcj] {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}
.legal-footer-in[b-abjc9vhwcj] {
    max-width: 880px;
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--color-text-subtle);
}
.legal-footer-nav[b-abjc9vhwcj] { display: flex; gap: 18px; flex-wrap: wrap; }
.legal-footer-nav a[b-abjc9vhwcj] { color: var(--color-text-muted); text-decoration: none; }
.legal-footer-nav a:hover[b-abjc9vhwcj] { color: var(--color-accent); }

@media (max-width: 560px) {
    .legal-main[b-abjc9vhwcj] { padding: 32px 18px 56px; }
    .legal-topbar-in[b-abjc9vhwcj] { padding: 0 18px; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =====================================================================
   App shell — sidebar fixa + main com topbar sticky
   --------------------------------------------------------------------- */
.sidebar-toggle-input[b-hmn16ig6js] {
    position: absolute;
    width: 0; height: 0;
    opacity: 0;
    pointer-events: none;
}

.app-shell[b-hmn16ig6js] {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar[b-hmn16ig6js] {
    background: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-sidebar-border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: var(--z-sidebar);
}

.app-main[b-hmn16ig6js] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-bg);
}

/* Topbar -------------------------------------------------------------- */
/* Em desktop NÃO existe barra superior global — o conteúdo começa no topo.
   A topbar só reaparece no mobile, contendo apenas o botão do drawer
   (ver media query < 768px abaixo). */
.app-topbar[b-hmn16ig6js] {
    display: none;
}

.topbar-toggle[b-hmn16ig6js] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.topbar-toggle:hover[b-hmn16ig6js] {
    background: var(--color-surface-hover);
    color: var(--color-text);
}
.topbar-toggle .icon[b-hmn16ig6js] {
    width: 18px; height: 18px;
}

/* Content ------------------------------------------------------------- */
.app-content[b-hmn16ig6js] {
    padding: var(--space-6) var(--space-6) var(--space-8);
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    box-sizing: border-box;
    flex: 1 1 auto;
}

/* Backdrop do drawer mobile (escondido em desktop) -------------------- */
.sidebar-backdrop[b-hmn16ig6js] {
    display: none;
}

/* =====================================================================
   Mobile (< 768px): sidebar vira drawer e a topbar reaparece só com o
   botão que o abre.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .app-shell[b-hmn16ig6js] {
        grid-template-columns: minmax(0, 1fr);
    }
    .app-sidebar[b-hmn16ig6js] {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--sidebar-width);
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform 200ms ease-out;
        z-index: var(--z-drawer);
        box-shadow: var(--shadow-lg);
    }
    .sidebar-backdrop[b-hmn16ig6js] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 17, 23, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease-out;
        z-index: calc(var(--z-drawer) - 1);
    }
    .app-topbar[b-hmn16ig6js] {
        display: flex;
        align-items: center;
        height: var(--topbar-height);
        padding: 0 var(--space-4);
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        position: sticky;
        top: 0;
        z-index: var(--z-topbar);
    }
    .topbar-toggle[b-hmn16ig6js]    { display: inline-flex; }
    .app-content[b-hmn16ig6js]      { padding: var(--space-4); }
}

/* Sibling selector (~) sobre o checkbox externo. */
.sidebar-toggle-input:checked ~ .app-shell .app-sidebar[b-hmn16ig6js] {
    transform: translateX(0);
}
.sidebar-toggle-input:checked ~ .app-shell .sidebar-backdrop[b-hmn16ig6js] {
    opacity: 1;
    pointer-events: auto;
}

/* =====================================================================
   Blazor error UI (sticky bottom)
   --------------------------------------------------------------------- */
#blazor-error-ui[b-hmn16ig6js] {
    color-scheme: light only;
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-top: 1px solid #fec84b;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(16, 24, 40, 0.08);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--space-3) var(--space-5);
    position: fixed;
    width: 100%;
    z-index: var(--z-modal);
    font-size: 0.875rem;
}
#blazor-error-ui .dismiss[b-hmn16ig6js] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.6rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-warning);
}
#blazor-error-ui .reload[b-hmn16ig6js] {
    color: var(--color-warning);
    text-decoration: underline;
    margin-left: var(--space-2);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =====================================================================
   Sidebar — navegação lateral profissional
   --------------------------------------------------------------------- */
.sidebar[b-v1fi7miwow] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    padding: var(--space-5) var(--space-3) var(--space-3);
    box-sizing: border-box;
    color: var(--color-sidebar-text);
}

/* Brand --------------------------------------------------------------- */
.brand[b-v1fi7miwow] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    margin: 0 0 var(--space-5);
    color: var(--color-sidebar-text-active);
    text-decoration: none;
    height: 36px;
}
.brand:hover[b-v1fi7miwow] { text-decoration: none; }
/* Marca "Route": chip teal com glifo de payload roteado (SVG inline).
   width/height vêm dos atributos do <svg>; aqui só travamos o flex. */
.brand-mark[b-v1fi7miwow] {
    flex: none;
    width: 28px; height: 28px;
    display: block;
}
/* Wordmark técnico em Geist Mono — substitui a serifa itálica.
   "rest" 600 · "fy" 500 · "." em teal (pop sobre a sidebar dark). */
.brand-text[b-v1fi7miwow] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    line-height: 1;
}
.brand-fy[b-v1fi7miwow] { font-weight: 500; }
.brand-dot[b-v1fi7miwow] { color: #2dd4bf; font-weight: 600; }

/* Lista de seções ---------------------------------------------------- */
.nav-list[b-v1fi7miwow] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    flex: 1 1 auto;
    min-height: 0;
}

.nav-section[b-v1fi7miwow] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-section-bottom[b-v1fi7miwow] {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-sidebar-border);
}
.nav-label[b-v1fi7miwow] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-sidebar-label);
    padding: 0 var(--space-3) var(--space-2);
}

/* Item — aplica a NavLink (que renderiza <a>) e a <button>.            */
[b-v1fi7miwow] .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.5rem var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-sidebar-text);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast);
    position: relative;
    box-sizing: border-box;
    line-height: 1.3;
}
[b-v1fi7miwow] .nav-item:hover {
    background: var(--color-sidebar-hover-bg);
    color: var(--color-sidebar-text-active);
    text-decoration: none;
}
[b-v1fi7miwow] .nav-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(103, 232, 168, 0.45);
}
[b-v1fi7miwow] .nav-item.active {
    background: var(--color-sidebar-active-bg);
    color: var(--color-sidebar-text-active);
}
/* Trilho ativo em phosphor — coerente com o "live system" narrative
   (cursor do terminal, dot do hero badge, ícone do IA card, etc.). */
[b-v1fi7miwow] .nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 2px;
    border-radius: 2px;
    background: var(--color-phosphor);
    box-shadow: 0 0 6px rgba(103, 232, 168, 0.55);
}

/* Botão Sair se mistura com a aparência de NavLink. */
.nav-form[b-v1fi7miwow] { margin: 0; }
[b-v1fi7miwow] .nav-item-button {
    font-family: inherit;
}

/* Ícones -------------------------------------------------------------- */
[b-v1fi7miwow] .nav-icon {
    flex: 0 0 18px;
    width: 18px; height: 18px;
    opacity: 0.78;
}
[b-v1fi7miwow] .nav-item:hover .nav-icon,
[b-v1fi7miwow] .nav-item.active .nav-icon {
    opacity: 1;
}

/* Texto truncado para email/nome longo. */
[b-v1fi7miwow] .nav-item-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Footer da sidebar -- versão e indicador discretos ------------------- */
.sidebar-footer[b-v1fi7miwow] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) 0;
    margin-top: var(--space-3);
    color: var(--color-sidebar-label);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-top: 1px solid var(--color-sidebar-border);
}
.sidebar-footer-text[b-v1fi7miwow] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-g3eqh7q01i],
.components-reconnect-repeated-attempt-visible[b-g3eqh7q01i],
.components-reconnect-failed-visible[b-g3eqh7q01i],
.components-pause-visible[b-g3eqh7q01i],
.components-resume-failed-visible[b-g3eqh7q01i],
.components-rejoining-animation[b-g3eqh7q01i] {
    display: none;
}

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


#components-reconnect-modal[b-g3eqh7q01i] {
    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-g3eqh7q01i 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-g3eqh7q01i {
    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/Pages/Admin/Confirmations/Index.razor.rz.scp.css */
/* =====================================================================
   Admin Confirmations — fila de confirmações por protocolo por tenant
   --------------------------------------------------------------------- */

/* ── Banner ──────────────────────────────────────────────── */
.admin-banner[b-16x53ehq3y] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
    background: var(--color-surface-raised, #222538);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #8b8fa3);
}
.admin-banner svg[b-16x53ehq3y] { flex: 0 0 16px; color: var(--color-accent, #6366f1); }

/* ── Legenda ─────────────────────────────────────────────── */
.queue-legend[b-16x53ehq3y] {
    margin-bottom: var(--space-4, 1rem);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface, #1a1d2e);
}
.queue-legend-toggle[b-16x53ehq3y] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted, #8b8fa3);
    cursor: pointer;
    list-style: none;
}
.queue-legend-toggle[b-16x53ehq3y]::-webkit-details-marker { display: none; }
.queue-legend-toggle svg[b-16x53ehq3y] { color: var(--color-accent, #6366f1); }
.queue-legend-body[b-16x53ehq3y] {
    padding: 0 var(--space-3, 0.75rem) var(--space-3, 0.75rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}
.legend-item[b-16x53ehq3y] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
    line-height: 1.4;
}
.legend-item code[b-16x53ehq3y] {
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--color-surface-raised, #222538);
    font-size: 0.6875rem;
}

/* ── Filtros ─────────────────────────────────────────────── */
.admin-filters[b-16x53ehq3y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
}
.filter-group[b-16x53ehq3y] { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.filter-label[b-16x53ehq3y] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #8b8fa3);
}
.filter-select[b-16x53ehq3y] {
    height: 34px;
    padding: 0 var(--space-2, 0.5rem);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface-raised, #222538);
    color: var(--color-text, #e1e2e8);
    font-size: 0.8125rem;
    font-family: inherit;
}
.filter-select:focus[b-16x53ehq3y] {
    outline: none;
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25);
}

/* ── Skeleton ────────────────────────────────────────────── */
.queue-skeleton[b-16x53ehq3y] { opacity: 0.5; }
.skeleton-block[b-16x53ehq3y] {
    background: var(--color-surface-raised, #222538);
    border-radius: var(--radius-md, 0.5rem);
    animation: c-pulse-b-16x53ehq3y 1.5s ease-in-out infinite;
}
.skeleton-table[b-16x53ehq3y] { min-height: 200px; }
@keyframes c-pulse-b-16x53ehq3y { 0%,100%{opacity:.4} 50%{opacity:.7} }

/* ── Summary bar ─────────────────────────────────────────── */
.queue-summary-bar[b-16x53ehq3y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
}
.qs-item[b-16x53ehq3y] { display: flex; flex-direction: column; gap: 2px; }
.qs-label[b-16x53ehq3y] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
}
.qs-value[b-16x53ehq3y] {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #e1e2e8);
}
.qs-warning[b-16x53ehq3y] { color: var(--color-warning, #f59e0b); }
.qs-danger[b-16x53ehq3y] { color: var(--color-danger, #ef4444); }

/* ── Empty state ─────────────────────────────────────────── */
.queue-empty[b-16x53ehq3y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-6, 2rem);
    color: var(--color-text-muted, #8b8fa3);
    font-size: 0.875rem;
}

/* ── Table ───────────────────────────────────────────────── */
.queue-table-wrap[b-16x53ehq3y] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--color-surface, #1a1d2e);
    margin-bottom: var(--space-4, 1rem);
}
.queue-table[b-16x53ehq3y] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.queue-table thead[b-16x53ehq3y] { position: sticky; top: 0; z-index: 1; }
.queue-table th[b-16x53ehq3y] {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
    background: var(--color-surface-raised, #222538);
    border-bottom: 1px solid var(--color-border, #2a2d3e);
    white-space: nowrap;
}
.queue-table th.num[b-16x53ehq3y] { text-align: right; }
.queue-table td[b-16x53ehq3y] {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-bottom: 1px solid var(--color-border, #2a2d3e);
    color: var(--color-text, #e1e2e8);
    vertical-align: middle;
}
.queue-table td.num[b-16x53ehq3y] { text-align: right; font-variant-numeric: tabular-nums; }
.queue-table tr:last-child td[b-16x53ehq3y] { border-bottom: none; }
.queue-table tr:hover td[b-16x53ehq3y] { background: rgba(16, 24, 40, 0.025); }

.row-warning td[b-16x53ehq3y] { background: rgba(245, 158, 11, 0.03); }
.row-warning:hover td[b-16x53ehq3y] { background: rgba(245, 158, 11, 0.06); }
.row-attention td[b-16x53ehq3y] { background: rgba(239, 68, 68, 0.02); }
.row-attention:hover td[b-16x53ehq3y] { background: rgba(239, 68, 68, 0.05); }

.num-success[b-16x53ehq3y] { color: var(--color-success, #22c55e); }
.num-danger[b-16x53ehq3y] { color: var(--color-danger, #ef4444); font-weight: 600; }

.tenant-cell[b-16x53ehq3y] { display: flex; flex-direction: column; }
.tenant-name[b-16x53ehq3y] { font-weight: 500; white-space: nowrap; }
.tenant-slug[b-16x53ehq3y] { font-size: 0.6875rem; color: var(--color-text-muted, #8b8fa3); }

.timestamp[b-16x53ehq3y] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.link-detail[b-16x53ehq3y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--color-text-muted, #8b8fa3);
    transition: color var(--motion-fast, 150ms), background var(--motion-fast, 150ms);
}
.link-detail:hover[b-16x53ehq3y] {
    color: var(--color-accent, #6366f1);
    background: rgba(13, 148, 136, 0.1);
}

/* ── Lista de ações manuais ─────────────────────────────── */
.actionable-panel[b-16x53ehq3y] {
    margin-bottom: var(--space-4, 1rem);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--color-surface, #1a1d2e);
    overflow: hidden;
}
.actionable-header[b-16x53ehq3y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-bottom: 1px solid var(--color-border, #2a2d3e);
}
.actionable-title[b-16x53ehq3y] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text, #e1e2e8);
    margin: 0;
}
.actionable-sub[b-16x53ehq3y] {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-muted, #8b8fa3);
    margin-top: 2px;
}
.actionable-empty[b-16x53ehq3y] {
    padding: var(--space-5, 1.25rem);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #8b8fa3);
}
.protocol-code[b-16x53ehq3y] {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--color-text, #e1e2e8);
    background: var(--color-surface-raised, #222538);
    padding: 1px 5px;
    border-radius: 3px;
}
.reason-cell[b-16x53ehq3y] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-pill[b-16x53ehq3y] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--color-surface-raised, #222538);
    color: var(--color-text, #e1e2e8);
}

/* ── Auto refresh ────────────────────────────────────────── */
.auto-refresh-bar[b-16x53ehq3y] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) 0;
    font-size: 0.6875rem;
    color: var(--color-text-muted, #8b8fa3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auto-refresh-dot[b-16x53ehq3y] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-success, #22c55e);
    animation: c-blink-b-16x53ehq3y 2s infinite;
}
@keyframes c-blink-b-16x53ehq3y { 0%,100%{opacity:1} 50%{opacity:.3} }

@media (max-width: 768px) {
    .admin-filters[b-16x53ehq3y] { flex-direction: column; }
    .queue-summary-bar[b-16x53ehq3y] { flex-direction: column; gap: var(--space-2, 0.5rem); }
}
/* /Components/Pages/Admin/Dashboard/Index.razor.rz.scp.css */
/* =====================================================================
   Admin Dashboard — KPIs, filtros e rankings cross-tenant
   --------------------------------------------------------------------- */

/* Banner informativo */
.admin-banner[b-sxt68e9yft] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
    background: var(--color-surface-raised, #222538);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #8b8fa3);
}
.admin-banner svg[b-sxt68e9yft] {
    flex: 0 0 16px;
    color: var(--color-accent, #6366f1);
}

/* ── Filtros ────────────────────────────────────────────── */
.admin-filters[b-sxt68e9yft] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-5, 1.25rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
}
.filter-group[b-sxt68e9yft] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}
.filter-label[b-sxt68e9yft] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #8b8fa3);
}
.filter-select[b-sxt68e9yft],
.filter-input[b-sxt68e9yft] {
    height: 34px;
    padding: 0 var(--space-2, 0.5rem);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface-raised, #222538);
    color: var(--color-text, #e1e2e8);
    font-size: 0.8125rem;
    font-family: inherit;
}
.filter-select:focus[b-sxt68e9yft],
.filter-input:focus[b-sxt68e9yft] {
    outline: none;
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25);
}

/* ── Skeleton ──────────────────────────────────────────── */
.admin-skeleton[b-sxt68e9yft] {
    opacity: 0.5;
}
.skeleton-block[b-sxt68e9yft] {
    background: var(--color-surface-raised, #222538);
    border-radius: var(--radius-md, 0.5rem);
    min-height: 100px;
    animation: admin-pulse-b-sxt68e9yft 1.5s ease-in-out infinite;
}
@keyframes admin-pulse-b-sxt68e9yft {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ── KPI Grid ──────────────────────────────────────────── */
.kpi-grid-admin[b-sxt68e9yft] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-5, 1.25rem);
}
.kpi-admin[b-sxt68e9yft] {
    padding: var(--space-4, 1rem);
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    transition: border-color var(--motion-fast, 150ms);
}
.kpi-admin:hover[b-sxt68e9yft] {
    border-color: var(--color-border-hover, #3a3d4e);
}
.kpi-admin-accent[b-sxt68e9yft] {
    border-color: var(--color-accent, #6366f1);
    background: linear-gradient(135deg,
        rgba(13, 148, 136, 0.06) 0%,
        var(--color-surface, #1a1d2e) 100%);
}
.kpi-admin-label[b-sxt68e9yft] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
    margin-bottom: var(--space-1, 0.25rem);
}
.kpi-admin-value[b-sxt68e9yft] {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #e1e2e8);
    line-height: 1.1;
    margin-bottom: 2px;
}
.kpi-success[b-sxt68e9yft] { color: var(--color-success, #22c55e); }
.kpi-danger[b-sxt68e9yft] { color: var(--color-danger, #ef4444); }
.kpi-warning[b-sxt68e9yft] { color: var(--color-warning, #f59e0b); }
.kpi-admin-detail[b-sxt68e9yft] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
    line-height: 1.4;
}
.dot-success[b-sxt68e9yft],
.dot-danger[b-sxt68e9yft] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 2px;
    vertical-align: middle;
}
.dot-success[b-sxt68e9yft] { background: var(--color-success, #22c55e); }
.dot-danger[b-sxt68e9yft] { background: var(--color-danger, #ef4444); }

/* ── Billing summary ───────────────────────────────────── */
.billing-summary[b-sxt68e9yft] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    margin-bottom: var(--space-5, 1.25rem);
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
}
.billing-label[b-sxt68e9yft] {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #8b8fa3);
}
.billing-value[b-sxt68e9yft] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-success, #22c55e);
    font-variant-numeric: tabular-nums;
}

/* ── Rankings Grid ─────────────────────────────────────── */
.rankings-grid[b-sxt68e9yft] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-5, 1.25rem);
}
.ranking-panel[b-sxt68e9yft] {
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    overflow: hidden;
}
.ranking-header[b-sxt68e9yft] {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-bottom: 1px solid var(--color-border, #2a2d3e);
}
.ranking-title[b-sxt68e9yft] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
    margin: 0;
}
.ranking-empty[b-sxt68e9yft] {
    padding: var(--space-5, 1.25rem) var(--space-4, 1rem);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #8b8fa3);
}
.ranking-list[b-sxt68e9yft] {
    list-style: none;
    margin: 0;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem) var(--space-3, 0.75rem);
}
.ranking-item[b-sxt68e9yft] {
    padding: var(--space-2, 0.5rem) 0;
}
.ranking-item + .ranking-item[b-sxt68e9yft] {
    border-top: 1px solid var(--color-border, #2a2d3e);
}
.ranking-item-header[b-sxt68e9yft] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.ranking-tenant[b-sxt68e9yft] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text, #e1e2e8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.ranking-count[b-sxt68e9yft] {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted, #8b8fa3);
    flex: 0 0 auto;
    margin-left: var(--space-2, 0.5rem);
}
.ranking-bar-track[b-sxt68e9yft] {
    height: 4px;
    background: var(--color-surface-raised, #222538);
    border-radius: 2px;
    overflow: hidden;
}
.ranking-bar-fill[b-sxt68e9yft] {
    height: 100%;
    background: var(--color-accent, #6366f1);
    border-radius: 2px;
    transition: width var(--motion-normal, 300ms) ease-out;
    min-width: 2px;
}

/* ── Section heading (entre blocos de KPIs) ──────────── */
.admin-section-title[b-sxt68e9yft] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #8b8fa3);
    margin: var(--space-5, 1.25rem) 0 var(--space-3, 0.75rem) 0;
}

.kpi-admin-alert[b-sxt68e9yft] {
    border-color: var(--color-danger, #ef4444);
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.06) 0%,
        var(--color-surface, #1a1d2e) 100%);
}

.confirm-actions[b-sxt68e9yft] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-5, 1.25rem);
}

/* ── Auto refresh ──────────────────────────────────────── */
.auto-refresh-bar[b-sxt68e9yft] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) 0;
    font-size: 0.6875rem;
    color: var(--color-text-muted, #8b8fa3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auto-refresh-dot[b-sxt68e9yft] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success, #22c55e);
    animation: admin-blink-b-sxt68e9yft 2s infinite;
}
@keyframes admin-blink-b-sxt68e9yft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .kpi-grid-admin[b-sxt68e9yft] {
        grid-template-columns: repeat(2, 1fr);
    }
    .rankings-grid[b-sxt68e9yft] {
        grid-template-columns: 1fr;
    }
    .admin-filters[b-sxt68e9yft] {
        flex-direction: column;
    }
}
/* /Components/Pages/Admin/Index.razor.rz.scp.css */
/* =====================================================================
   Admin Hub — cards de navegação da área administrativa
   --------------------------------------------------------------------- */
.admin-hub[b-b52g9nxapw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 1.5rem);
}

.admin-section-title[b-b52g9nxapw] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #8b8fa3);
    margin: 0 0 var(--space-3, 0.75rem);
}

.admin-cards[b-b52g9nxapw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-3, 0.75rem);
}

/* Card link — interactive */
.admin-card[b-b52g9nxapw] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem) var(--space-4, 1rem);
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    text-decoration: none;
    color: var(--color-text, #e1e2e8);
    transition: border-color var(--motion-fast, 150ms),
                box-shadow var(--motion-fast, 150ms),
                background var(--motion-fast, 150ms);
    cursor: pointer;
}
.admin-card:hover[b-b52g9nxapw] {
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 0 0 1px var(--color-accent, #6366f1);
    text-decoration: none;
    color: var(--color-text, #e1e2e8);
}

/* Disabled card — future features */
.admin-card-disabled[b-b52g9nxapw] {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* Icon container */
.admin-card-icon[b-b52g9nxapw] {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-raised, #222538);
    border-radius: var(--radius-md, 0.5rem);
}
.admin-card-icon svg[b-b52g9nxapw] {
    width: 20px;
    height: 20px;
    color: var(--color-accent, #6366f1);
}

/* Text body */
.admin-card-body[b-b52g9nxapw] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-card-title[b-b52g9nxapw] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text, #e1e2e8);
}
.admin-card-desc[b-b52g9nxapw] {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #8b8fa3);
    line-height: 1.4;
}

/* Arrow indicator */
.admin-card-arrow[b-b52g9nxapw] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    opacity: 0.4;
    transition: opacity var(--motion-fast, 150ms),
                transform var(--motion-fast, 150ms);
}
.admin-card:hover .admin-card-arrow[b-b52g9nxapw] {
    opacity: 1;
    transform: translateX(2px);
}

/* "Soon" badge */
.admin-badge-soon[b-b52g9nxapw] {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 0.25rem);
    background: var(--color-surface-raised, #222538);
    color: var(--color-text-muted, #8b8fa3);
}
/* /Components/Pages/Admin/Logs/Index.razor.rz.scp.css */
/* ═══════════════ LOGS — ADMIN ═══════════════ */

/* ── Filtros ── */
.log-filters[b-yyx0fv3p0z] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0 0;
}

.log-filters-ids[b-yyx0fv3p0z] {
    padding-top: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.5rem;
}

.log-filters .filter-group[b-yyx0fv3p0z] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 140px;
}

.log-filters .filter-label[b-yyx0fv3p0z] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.log-filters .filter-select[b-yyx0fv3p0z],
.log-filters .filter-input[b-yyx0fv3p0z] {
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
    color: #111827;
    transition: border-color 0.15s;
}

.log-filters .filter-select:focus[b-yyx0fv3p0z],
.log-filters .filter-input:focus[b-yyx0fv3p0z] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.log-filters .filter-input[b-yyx0fv3p0z] {
    min-width: 200px;
}

.log-filters .filter-input-id[b-yyx0fv3p0z] {
    min-width: 180px;
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-size: 0.8rem;
}

/* ── Tabela ── */
.log-table-container[b-yyx0fv3p0z] {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.log-table[b-yyx0fv3p0z] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.log-table thead[b-yyx0fv3p0z] {
    background: #f9fafb;
}

.log-table th[b-yyx0fv3p0z] {
    padding: 0.65rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.log-table td[b-yyx0fv3p0z] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.log-row:hover[b-yyx0fv3p0z] {
    background: #f9fafb;
}

.col-time[b-yyx0fv3p0z] { width: 110px; }
.col-level[b-yyx0fv3p0z] { width: 90px; }
.col-area[b-yyx0fv3p0z] { width: 80px; }
.col-type[b-yyx0fv3p0z] { width: 160px; }
.col-summary[b-yyx0fv3p0z] { min-width: 200px; }
.col-context[b-yyx0fv3p0z] { width: 220px; }
.col-actions[b-yyx0fv3p0z] { width: 40px; text-align: center; }

.mono[b-yyx0fv3p0z] {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8rem;
}

/* ── Level Badges ── */
.level-badge[b-yyx0fv3p0z] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.level-information[b-yyx0fv3p0z] {
    background: #dbeafe;
    color: #1d4ed8;
}

.level-warning[b-yyx0fv3p0z] {
    background: #fef3c7;
    color: #92400e;
}

.level-error[b-yyx0fv3p0z] {
    background: #fee2e2;
    color: #991b1b;
}

.level-critical[b-yyx0fv3p0z] {
    background: #991b1b;
    color: #fff;
}

/* ── Area Badge ── */
.area-badge[b-yyx0fv3p0z] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
}

/* ── Context Tags ── */
.ctx-tag[b-yyx0fv3p0z] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    margin: 0.1rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.15s;
}

.ctx-tag:hover[b-yyx0fv3p0z] {
    filter: brightness(0.9);
    transform: scale(1.03);
}

.ctx-tenant[b-yyx0fv3p0z] {
    background: #dbeafe;
    color: #1e40af;
}

.ctx-message[b-yyx0fv3p0z] {
    background: #d1fae5;
    color: #065f46;
}

.ctx-worker[b-yyx0fv3p0z] {
    background: #ede9fe;
    color: #5b21b6;
}

.ctx-corr[b-yyx0fv3p0z] {
    background: #fef3c7;
    color: #92400e;
}

/* ── Row highlights ── */
.row-critical[b-yyx0fv3p0z] {
    background: rgba(153, 27, 27, 0.04) !important;
    border-left: 3px solid #991b1b;
}

.row-error[b-yyx0fv3p0z] {
    background: rgba(239, 68, 68, 0.03) !important;
    border-left: 3px solid #ef4444;
}

.row-warning[b-yyx0fv3p0z] {
    background: rgba(245, 158, 11, 0.03) !important;
    border-left: 3px solid #f59e0b;
}

/* ── Detail Expand ── */
.btn-detail[b-yyx0fv3p0z] {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s;
}

.btn-detail:hover[b-yyx0fv3p0z] {
    background: #f3f4f6;
    color: #111827;
}

.log-detail-row td[b-yyx0fv3p0z] {
    padding: 0 !important;
    border-bottom: 2px solid #e5e7eb;
}

.detail-panel[b-yyx0fv3p0z] {
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.detail-grid[b-yyx0fv3p0z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.detail-item[b-yyx0fv3p0z] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.detail-key[b-yyx0fv3p0z] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.detail-val[b-yyx0fv3p0z] {
    font-size: 0.8rem;
    color: #111827;
    word-break: break-all;
}

.detail-block[b-yyx0fv3p0z] {
    margin-top: 0.5rem;
}

.detail-pre[b-yyx0fv3p0z] {
    margin-top: 0.25rem;
    padding: 0.75rem;
    background: #1f2937;
    color: #e5e7eb;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
    max-height: 300px;
}

/* ── Paginação ── */
.log-pagination[b-yyx0fv3p0z] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.pagination-info[b-yyx0fv3p0z] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ── Empty State ── */
.logs-empty[b-yyx0fv3p0z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: #9ca3af;
    font-size: 0.9rem;
    text-align: center;
}

/* ── Skeleton ── */
.logs-skeleton[b-yyx0fv3p0z] {
    padding: 2rem 0;
}

.skeleton-block[b-yyx0fv3p0z] {
    height: 200px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yyx0fv3p0z 1.5s infinite;
    border-radius: 10px;
}

@keyframes skeleton-shimmer-b-yyx0fv3p0z {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Auto-refresh ── */
.auto-refresh-bar[b-yyx0fv3p0z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.75rem;
    color: #9ca3af;
}

.auto-refresh-dot[b-yyx0fv3p0z] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse-dot-b-yyx0fv3p0z 2s infinite;
}

@keyframes pulse-dot-b-yyx0fv3p0z {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
/* /Components/Pages/Admin/Queues/Index.razor.rz.scp.css */
/* =====================================================================
   Admin Queues — Monitoramento de filas por tenant
   --------------------------------------------------------------------- */

/* ── Banner (reusa padrão do dashboard admin) ──────────── */
.admin-banner[b-0k4h8q1cj6] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
    background: var(--color-surface-raised, #222538);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #8b8fa3);
}
.admin-banner svg[b-0k4h8q1cj6] { flex: 0 0 16px; color: var(--color-accent, #6366f1); }

/* ── Legenda ───────────────────────────────────────────── */
.queue-legend[b-0k4h8q1cj6] {
    margin-bottom: var(--space-4, 1rem);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface, #1a1d2e);
}
.queue-legend-toggle[b-0k4h8q1cj6] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted, #8b8fa3);
    cursor: pointer;
    list-style: none;
}
.queue-legend-toggle[b-0k4h8q1cj6]::-webkit-details-marker { display: none; }
.queue-legend-toggle svg[b-0k4h8q1cj6] { color: var(--color-accent, #6366f1); }
.queue-legend-body[b-0k4h8q1cj6] {
    padding: 0 var(--space-3, 0.75rem) var(--space-3, 0.75rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}
.legend-item[b-0k4h8q1cj6] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
    line-height: 1.4;
}
.legend-item code[b-0k4h8q1cj6] {
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--color-surface-raised, #222538);
    font-size: 0.6875rem;
}

/* ── Filtros (reusa padrão) ────────────────────────────── */
.admin-filters[b-0k4h8q1cj6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
}
.filter-group[b-0k4h8q1cj6] { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.filter-label[b-0k4h8q1cj6] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #8b8fa3);
}
.filter-select[b-0k4h8q1cj6] {
    height: 34px;
    padding: 0 var(--space-2, 0.5rem);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface-raised, #222538);
    color: var(--color-text, #e1e2e8);
    font-size: 0.8125rem;
    font-family: inherit;
}
.filter-select:focus[b-0k4h8q1cj6] {
    outline: none;
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25);
}

/* ── Skeleton ──────────────────────────────────────────── */
.queue-skeleton[b-0k4h8q1cj6] { opacity: 0.5; }
.skeleton-block[b-0k4h8q1cj6] {
    background: var(--color-surface-raised, #222538);
    border-radius: var(--radius-md, 0.5rem);
    animation: q-pulse-b-0k4h8q1cj6 1.5s ease-in-out infinite;
}
.skeleton-table[b-0k4h8q1cj6] { min-height: 200px; }
@keyframes q-pulse-b-0k4h8q1cj6 { 0%,100%{opacity:.4} 50%{opacity:.7} }

/* ── Summary bar ───────────────────────────────────────── */
.queue-summary-bar[b-0k4h8q1cj6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
}
.qs-item[b-0k4h8q1cj6] { display: flex; flex-direction: column; gap: 2px; }
.qs-label[b-0k4h8q1cj6] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
}
.qs-value[b-0k4h8q1cj6] {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #e1e2e8);
}
.qs-warning[b-0k4h8q1cj6] { color: var(--color-warning, #f59e0b); }

/* ── Empty state ───────────────────────────────────────── */
.queue-empty[b-0k4h8q1cj6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-6, 2rem);
    color: var(--color-text-muted, #8b8fa3);
    font-size: 0.875rem;
}

/* ── Health badges ─────────────────────────────────────── */
.health-badge[b-0k4h8q1cj6] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.health-normal[b-0k4h8q1cj6] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--color-success, #22c55e);
}
.health-warning[b-0k4h8q1cj6] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning, #f59e0b);
}
.health-critical[b-0k4h8q1cj6] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger, #ef4444);
}

/* ── Table ─────────────────────────────────────────────── */
.queue-table-wrap[b-0k4h8q1cj6] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--color-surface, #1a1d2e);
    margin-bottom: var(--space-4, 1rem);
}
.queue-table[b-0k4h8q1cj6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.queue-table thead[b-0k4h8q1cj6] {
    position: sticky;
    top: 0;
    z-index: 1;
}
.queue-table th[b-0k4h8q1cj6] {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
    background: var(--color-surface-raised, #222538);
    border-bottom: 1px solid var(--color-border, #2a2d3e);
    white-space: nowrap;
}
.queue-table th.num[b-0k4h8q1cj6] { text-align: right; }
.queue-table td[b-0k4h8q1cj6] {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-bottom: 1px solid var(--color-border, #2a2d3e);
    color: var(--color-text, #e1e2e8);
    vertical-align: middle;
}
.queue-table td.num[b-0k4h8q1cj6] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.queue-table tr:last-child td[b-0k4h8q1cj6] { border-bottom: none; }
.queue-table tr:hover td[b-0k4h8q1cj6] {
    background: rgba(16, 24, 40, 0.025);
}

/* Row severity highlights */
.row-critical td[b-0k4h8q1cj6] { background: rgba(239, 68, 68, 0.04); }
.row-critical:hover td[b-0k4h8q1cj6] { background: rgba(239, 68, 68, 0.08); }
.row-warning td[b-0k4h8q1cj6] { background: rgba(245, 158, 11, 0.03); }
.row-warning:hover td[b-0k4h8q1cj6] { background: rgba(245, 158, 11, 0.06); }

/* Tenant cell */
.tenant-cell[b-0k4h8q1cj6] { display: flex; flex-direction: column; }
.tenant-name[b-0k4h8q1cj6] { font-weight: 500; white-space: nowrap; }
.tenant-slug[b-0k4h8q1cj6] { font-size: 0.6875rem; color: var(--color-text-muted, #8b8fa3); }

/* Backlog cell emphasis */
.backlog-cell[b-0k4h8q1cj6] { font-weight: 600; }

/* Reason cell */
.reason-cell[b-0k4h8q1cj6] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
    max-width: 200px;
}

/* Timestamp cell */
.timestamp[b-0k4h8q1cj6] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Processing bar */
.proc-bar-container[b-0k4h8q1cj6] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    min-width: 100px;
}
.proc-bar-track[b-0k4h8q1cj6] {
    flex: 1;
    height: 6px;
    background: var(--color-surface-raised, #222538);
    border-radius: 3px;
    overflow: hidden;
}
.proc-bar-fill[b-0k4h8q1cj6] {
    height: 100%;
    border-radius: 3px;
    transition: width var(--motion-normal, 300ms) ease-out;
    min-width: 1px;
}
.proc-bar-normal[b-0k4h8q1cj6] { background: var(--color-accent, #6366f1); }
.proc-bar-warning[b-0k4h8q1cj6] { background: var(--color-warning, #f59e0b); }
.proc-bar-critical[b-0k4h8q1cj6] { background: var(--color-danger, #ef4444); }
.proc-bar-label[b-0k4h8q1cj6] {
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted, #8b8fa3);
    min-width: 32px;
    text-align: right;
}

/* Detail link */
.link-detail[b-0k4h8q1cj6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--color-text-muted, #8b8fa3);
    transition: color var(--motion-fast, 150ms), background var(--motion-fast, 150ms);
}
.link-detail:hover[b-0k4h8q1cj6] {
    color: var(--color-accent, #6366f1);
    background: rgba(13, 148, 136, 0.1);
}

/* ── Auto refresh ──────────────────────────────────────── */
.auto-refresh-bar[b-0k4h8q1cj6] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) 0;
    font-size: 0.6875rem;
    color: var(--color-text-muted, #8b8fa3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auto-refresh-dot[b-0k4h8q1cj6] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-success, #22c55e);
    animation: q-blink-b-0k4h8q1cj6 2s infinite;
}
@keyframes q-blink-b-0k4h8q1cj6 { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .admin-filters[b-0k4h8q1cj6] { flex-direction: column; }
    .queue-summary-bar[b-0k4h8q1cj6] { flex-direction: column; gap: var(--space-2, 0.5rem); }
}
/* /Components/Pages/Admin/Security/Index.razor.rz.scp.css */
/* ═══════════════ SEGURANÇA — ADMIN ═══════════════ */

/* ── Banner de saúde geral no topo ───────────────────── */
/* A regra/cor é decidida pelo serviço: a página só traduz
   o nível em uma classe e renderiza o bloco. */
.sec-health-section[b-8lcuic8l4l] {
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    background: var(--color-surface, #1a1d2e);
}

.sec-health-ok[b-8lcuic8l4l] {
    border-color: rgba(18, 183, 106, 0.45);
    background: linear-gradient(135deg,
        rgba(18, 183, 106, 0.06) 0%,
        var(--color-surface, #1a1d2e) 100%);
}

.sec-health-attention[b-8lcuic8l4l] {
    border-color: rgba(247, 144, 9, 0.55);
    background: linear-gradient(135deg,
        rgba(247, 144, 9, 0.06) 0%,
        var(--color-surface, #1a1d2e) 100%);
}

.sec-health-critical[b-8lcuic8l4l] {
    border-color: rgba(240, 68, 56, 0.55);
    background: linear-gradient(135deg,
        rgba(240, 68, 56, 0.08) 0%,
        var(--color-surface, #1a1d2e) 100%);
}

.sec-health-header[b-8lcuic8l4l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sec-health-icon[b-8lcuic8l4l] {
    font-size: 1.5rem;
    line-height: 1;
}

.sec-health-section.sec-health-ok .sec-health-icon[b-8lcuic8l4l] { color: #047857; }
.sec-health-section.sec-health-attention .sec-health-icon[b-8lcuic8l4l] { color: #92400e; }
.sec-health-section.sec-health-critical .sec-health-icon[b-8lcuic8l4l] { color: #991b1b; }

.sec-health-title-block[b-8lcuic8l4l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sec-health-title[b-8lcuic8l4l] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #e1e2e8);
}

.sec-health-subtitle[b-8lcuic8l4l] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
}

/* ── Status pill no header da página ─────────────────── */
.sec-overall[b-8lcuic8l4l] {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid;
}

.sec-overall-ok[b-8lcuic8l4l] {
    background: rgba(18, 183, 106, 0.16);
    color: #047857;
    border-color: rgba(18, 183, 106, 0.4);
}

.sec-overall-attention[b-8lcuic8l4l] {
    background: rgba(247, 144, 9, 0.16);
    color: #92400e;
    border-color: rgba(247, 144, 9, 0.45);
}

.sec-overall-critical[b-8lcuic8l4l] {
    background: rgba(240, 68, 56, 0.14);
    color: #991b1b;
    border-color: rgba(240, 68, 56, 0.5);
}

/* ── Lista de alertas ────────────────────────────────── */
.sec-alert-list[b-8lcuic8l4l] {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sec-alert[b-8lcuic8l4l] {
    border: 1px solid var(--color-border, #2a2d3e);
    border-left-width: 4px;
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.55rem 0.75rem;
    background: var(--color-surface-raised, #222538);
}

.sec-alert-attention[b-8lcuic8l4l] {
    border-left-color: #f79009;
}

.sec-alert-critical[b-8lcuic8l4l] {
    border-left-color: #f04438;
}

.sec-alert-ok[b-8lcuic8l4l] {
    border-left-color: #12b76a;
}

.sec-alert-head[b-8lcuic8l4l] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sec-alert-title[b-8lcuic8l4l] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text, #e1e2e8);
}

.sec-alert-detail[b-8lcuic8l4l] {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--color-text-muted, #8b8fa3);
    line-height: 1.45;
}

/* ── Recomendações ───────────────────────────────────── */
.sec-rec-block[b-8lcuic8l4l] {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-border, #2a2d3e);
}

.sec-rec-title[b-8lcuic8l4l] {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
}

.sec-rec-list[b-8lcuic8l4l] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: var(--color-text, #e1e2e8);
    line-height: 1.55;
}

.sec-rec-list li + li[b-8lcuic8l4l] {
    margin-top: 0.25rem;
}


/* Estilos escopados. Reutiliza tokens de cores e o esqueleto
   .kpi-admin/.kpi-admin-label/.kpi-admin-value usado em outras
   páginas admin — aqui adicionamos só as variantes específicas
   (badges de status, linha de eventos). */

.admin-section-title[b-8lcuic8l4l] {
    margin: var(--space-5, 1.25rem) 0 var(--space-3, 0.75rem);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #8b8fa3);
}

/* ── Grid de KPIs para a página ────────────────────────── */
.security-grid[b-8lcuic8l4l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-3, 0.75rem);
}

/* Linha que combina badge + valor sem quebrar o ritmo do .kpi-admin. */
.kpi-admin-value-row[b-8lcuic8l4l] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2px 0 4px;
}

.kpi-admin-value-row .kpi-admin-value[b-8lcuic8l4l] {
    margin-bottom: 0;
}

/* ── Status badges ─────────────────────────────────────── */
.sec-badge[b-8lcuic8l4l] {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.sec-badge-active[b-8lcuic8l4l] {
    background: rgba(18, 183, 106, 0.16);
    color: #047857;
    border: 1px solid rgba(18, 183, 106, 0.35);
}

.sec-badge-ok[b-8lcuic8l4l] {
    background: rgba(46, 144, 250, 0.14);
    color: #1d4ed8;
    border: 1px solid rgba(46, 144, 250, 0.35);
}

.sec-badge-inactive[b-8lcuic8l4l] {
    background: rgba(152, 162, 179, 0.16);
    color: #4b5563;
    border: 1px solid rgba(152, 162, 179, 0.35);
}

.sec-badge-muted[b-8lcuic8l4l] {
    background: transparent;
    color: #6b7280;
    border: 1px dashed #d1d5db;
}

.sec-badge-warn[b-8lcuic8l4l] {
    background: rgba(247, 144, 9, 0.16);
    color: #92400e;
    border: 1px solid rgba(247, 144, 9, 0.4);
}

.sec-badge-critical[b-8lcuic8l4l] {
    background: rgba(240, 68, 56, 0.14);
    color: #991b1b;
    border: 1px solid rgba(240, 68, 56, 0.45);
}

/* ── Detalhe de aviso dentro do card ──────────────────── */
.sec-detail-warn[b-8lcuic8l4l] {
    color: #92400e;
    font-weight: 600;
}

.sec-mono[b-8lcuic8l4l] {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--color-text, #e1e2e8);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}

/* ── Eventos ──────────────────────────────────────────── */
.security-events[b-8lcuic8l4l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
}

.event-panel[b-8lcuic8l4l] {
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.event-panel-header[b-8lcuic8l4l] {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-bottom: 1px solid var(--color-border, #2a2d3e);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "title count"
        "subtitle subtitle";
    column-gap: 0.5rem;
}

.event-panel-title[b-8lcuic8l4l] {
    grid-area: title;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text, #e1e2e8);
}

.event-panel-subtitle[b-8lcuic8l4l] {
    grid-area: subtitle;
    font-size: 0.72rem;
    color: var(--color-text-muted, #8b8fa3);
    margin-top: 2px;
}

.event-panel-count[b-8lcuic8l4l] {
    grid-area: count;
    font-size: 0.7rem;
    color: var(--color-text-muted, #8b8fa3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.event-empty[b-8lcuic8l4l] {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted, #8b8fa3);
}

.event-list[b-8lcuic8l4l] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

.event-item[b-8lcuic8l4l] {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--color-border, #2a2d3e);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.event-item:last-child[b-8lcuic8l4l] {
    border-bottom: none;
}

.event-line-1[b-8lcuic8l4l],
.event-line-2[b-8lcuic8l4l] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
}

.event-time[b-8lcuic8l4l] {
    color: var(--color-text-muted, #8b8fa3);
    font-size: 0.75rem;
}

.event-type[b-8lcuic8l4l] {
    color: var(--color-text, #e1e2e8);
    font-size: 0.75rem;
}

.event-summary[b-8lcuic8l4l] {
    color: var(--color-text-muted, #8b8fa3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ── Level badges para os eventos ─────────────────────── */
.sec-level-badge[b-8lcuic8l4l] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sec-level-information[b-8lcuic8l4l] {
    background: #dbeafe;
    color: #1d4ed8;
}

.sec-level-warning[b-8lcuic8l4l] {
    background: #fef3c7;
    color: #92400e;
}

.sec-level-error[b-8lcuic8l4l] {
    background: #fee2e2;
    color: #991b1b;
}

.sec-level-critical[b-8lcuic8l4l] {
    background: #991b1b;
    color: #fff;
}

/* ── Context chips (tenant/message) ───────────────────── */
.ctx-chip[b-8lcuic8l4l] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
}

.ctx-chip-tenant[b-8lcuic8l4l] {
    background: #dbeafe;
    color: #1e40af;
}

.ctx-chip-message[b-8lcuic8l4l] {
    background: #d1fae5;
    color: #065f46;
}

/* ── Skeleton + footnote ──────────────────────────────── */
.security-skeleton .skeleton-block[b-8lcuic8l4l] {
    height: 96px;
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-8lcuic8l4l 1.4s ease-in-out infinite;
    border-radius: var(--radius-lg, 0.75rem);
}

@keyframes skeleton-shimmer-b-8lcuic8l4l {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.security-footnote[b-8lcuic8l4l] {
    margin-top: var(--space-4, 1rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: var(--color-surface-raised, #222538);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
}

.security-footnote a[b-8lcuic8l4l] {
    color: var(--color-accent, #6366f1);
    text-decoration: none;
}

.security-footnote a:hover[b-8lcuic8l4l] {
    text-decoration: underline;
}

/* ── Ajuda rápida (colapsável) ─────────────────────────── */
.sec-help[b-8lcuic8l4l] {
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    margin-bottom: var(--space-3, 0.75rem);
    overflow: hidden;
}

.sec-help-summary[b-8lcuic8l4l] {
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text, #e1e2e8);
    list-style: none;
    user-select: none;
}

.sec-help-summary[b-8lcuic8l4l]::-webkit-details-marker {
    display: none;
}

.sec-help-summary[b-8lcuic8l4l]::after {
    content: "▾";
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--color-text-muted, #8b8fa3);
    transition: transform 0.15s ease;
}

.sec-help[open] .sec-help-summary[b-8lcuic8l4l]::after {
    transform: rotate(180deg);
}

.sec-help-summary:hover[b-8lcuic8l4l] {
    background: var(--color-surface-raised, #222538);
}

.sec-help-summary:focus-visible[b-8lcuic8l4l] {
    outline: 2px solid var(--color-accent, #6366f1);
    outline-offset: -2px;
}

.sec-help-icon[b-8lcuic8l4l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.18);
    color: #4338ca;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sec-help-body[b-8lcuic8l4l] {
    padding: 0 0.9rem 0.9rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text, #e1e2e8);
    border-top: 1px solid var(--color-border, #2a2d3e);
    padding-top: 0.75rem;
}

.sec-help-intro[b-8lcuic8l4l] {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
}

.sec-help-list[b-8lcuic8l4l] {
    margin: 0 0 0.75rem;
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
}

.sec-help-list dt[b-8lcuic8l4l] {
    font-weight: 700;
    color: var(--color-text, #e1e2e8);
}

.sec-help-list dd[b-8lcuic8l4l] {
    margin: 0 0 0.25rem;
    color: var(--color-text-muted, #8b8fa3);
}

.sec-help-list code[b-8lcuic8l4l],
.sec-help-checklist code[b-8lcuic8l4l] {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.78rem;
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--color-text, #e1e2e8);
    word-break: break-all;
}

.sec-help-subtitle[b-8lcuic8l4l] {
    margin: 0.5rem 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
}

.sec-help-checklist[b-8lcuic8l4l] {
    margin: 0 0 0.75rem;
    padding-left: 1.1rem;
    color: var(--color-text-muted, #8b8fa3);
}

.sec-help-checklist li + li[b-8lcuic8l4l] {
    margin-top: 0.25rem;
}

.sec-help-foot[b-8lcuic8l4l] {
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-border, #2a2d3e);
    font-size: 0.78rem;
    color: var(--color-text-muted, #8b8fa3);
}

@media (max-width: 640px) {
    .sec-help-list[b-8lcuic8l4l] {
        grid-template-columns: 1fr;
        row-gap: 0.15rem;
    }

    .sec-help-list dd[b-8lcuic8l4l] {
        margin-bottom: 0.5rem;
    }
}

/* ── Histórico filtrável ────────────────────────────────── */
.sec-history[b-8lcuic8l4l] {
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
}

.sec-history-filters[b-8lcuic8l4l] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-3, 0.75rem);
}

.sec-history-field[b-8lcuic8l4l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.sec-history-field-wide[b-8lcuic8l4l] {
    min-width: 260px;
    flex: 1 1 260px;
}

.sec-history-field-label[b-8lcuic8l4l] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
}

.sec-history-input[b-8lcuic8l4l] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-sm, 0.25rem);
    background: var(--color-surface-raised, #222538);
    color: var(--color-text, #e1e2e8);
    font-size: 0.85rem;
}

.sec-history-input:focus[b-8lcuic8l4l] {
    outline: 2px solid var(--color-accent, #6366f1);
    outline-offset: 1px;
}

.sec-history-clear[b-8lcuic8l4l] {
    height: 32px;
    align-self: flex-end;
}

.sec-history-warn[b-8lcuic8l4l] {
    margin: 0 0 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm, 0.25rem);
    background: rgba(247, 144, 9, 0.12);
    color: #92400e;
    border: 1px solid rgba(247, 144, 9, 0.35);
    font-size: 0.78rem;
}

.sec-history-empty[b-8lcuic8l4l] {
    padding: 1.25rem;
    text-align: center;
    color: var(--color-text-muted, #8b8fa3);
    font-size: 0.85rem;
}

.sec-history-table-wrap[b-8lcuic8l4l] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
}

.sec-history-table[b-8lcuic8l4l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sec-history-table th[b-8lcuic8l4l],
.sec-history-table td[b-8lcuic8l4l] {
    padding: 0.45rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border, #2a2d3e);
    vertical-align: top;
}

.sec-history-table th[b-8lcuic8l4l] {
    background: var(--color-surface-raised, #222538);
    color: var(--color-text-muted, #8b8fa3);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sec-history-table tbody tr:last-child td[b-8lcuic8l4l] {
    border-bottom: none;
}

.sec-history-table .mono[b-8lcuic8l4l] {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.75rem;
}

.sec-history-table .nowrap[b-8lcuic8l4l] {
    white-space: nowrap;
}

.sec-history-summary[b-8lcuic8l4l] {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text, #e1e2e8);
}

.sec-history-empty-cell[b-8lcuic8l4l] {
    color: var(--color-text-muted, #8b8fa3);
}

.sec-history-pager[b-8lcuic8l4l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space-3, 0.75rem);
    font-size: 0.78rem;
    color: var(--color-text-muted, #8b8fa3);
}

.sec-history-pager-controls[b-8lcuic8l4l] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Pages/Admin/Workers/Index.razor.rz.scp.css */
/* =====================================================================
   Admin Workers — Instâncias de worker com heartbeat
   --------------------------------------------------------------------- */

/* ── Banner ────────────────────────────────────────────── */
.admin-banner[b-wnxax5a91b] {
    display: flex; align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
    background: var(--color-surface-raised, #222538);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #8b8fa3);
}
.admin-banner svg[b-wnxax5a91b] { flex: 0 0 16px; color: var(--color-accent, #6366f1); }

/* ── Legend ─────────────────────────────────────────────── */
.workers-legend[b-wnxax5a91b] {
    margin-bottom: var(--space-4, 1rem);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface, #1a1d2e);
}
.workers-legend-toggle[b-wnxax5a91b] {
    display: flex; align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: 0.8125rem; font-weight: 500;
    color: var(--color-text-muted, #8b8fa3);
    cursor: pointer; list-style: none;
}
.workers-legend-toggle[b-wnxax5a91b]::-webkit-details-marker { display: none; }
.workers-legend-toggle svg[b-wnxax5a91b] { color: var(--color-accent, #6366f1); }
.workers-legend-body[b-wnxax5a91b] {
    padding: 0 var(--space-3, 0.75rem) var(--space-3, 0.75rem);
    display: flex; flex-direction: column;
    gap: var(--space-2, 0.5rem);
}
.legend-item[b-wnxax5a91b] {
    display: flex; align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
}

/* ── Filters ───────────────────────────────────────────── */
.admin-filters[b-wnxax5a91b] {
    display: flex; flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
}
.filter-group[b-wnxax5a91b] { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.filter-label[b-wnxax5a91b] {
    font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-muted, #8b8fa3);
}
.filter-select[b-wnxax5a91b] {
    height: 34px; padding: 0 var(--space-2, 0.5rem);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface-raised, #222538);
    color: var(--color-text, #e1e2e8);
    font-size: 0.8125rem; font-family: inherit;
}
.filter-select:focus[b-wnxax5a91b] {
    outline: none;
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25);
}

/* ── Skeleton ──────────────────────────────────────────── */
.workers-skeleton[b-wnxax5a91b] { opacity: 0.5; }
.skeleton-block[b-wnxax5a91b] {
    background: var(--color-surface-raised, #222538);
    border-radius: var(--radius-md, 0.5rem);
    animation: w-pulse-b-wnxax5a91b 1.5s ease-in-out infinite;
}
.skeleton-table[b-wnxax5a91b] { min-height: 200px; }
@keyframes w-pulse-b-wnxax5a91b { 0%,100%{opacity:.4} 50%{opacity:.7} }

/* ── Empty ─────────────────────────────────────────────── */
.workers-empty[b-wnxax5a91b] {
    display: flex; flex-direction: column;
    align-items: center; gap: var(--space-3, 0.75rem);
    padding: var(--space-6, 2rem);
    color: var(--color-text-muted, #8b8fa3);
    font-size: 0.875rem;
}

/* ── Worker badges ─────────────────────────────────────── */
.worker-badge[b-wnxax5a91b] {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
}
.worker-running[b-wnxax5a91b] { background: rgba(34,197,94,0.12); color: var(--color-success, #22c55e); }
.worker-starting[b-wnxax5a91b] { background: rgba(13, 148, 136,0.12); color: var(--color-accent, #6366f1); }
.worker-stopping[b-wnxax5a91b] { background: rgba(245,158,11,0.12); color: var(--color-warning, #f59e0b); }
.worker-stale[b-wnxax5a91b] { background: rgba(239,68,68,0.12); color: var(--color-danger, #ef4444); }
.worker-unknown[b-wnxax5a91b] { background: rgba(139,143,163,0.12); color: var(--color-text-muted, #8b8fa3); }

/* ── Worker card grid ──────────────────────────────────── */
.workers-grid[b-wnxax5a91b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}
.worker-card[b-wnxax5a91b] {
    background: var(--color-surface, #1a1d2e);
    border: 1px solid var(--color-border, #2a2d3e);
    border-radius: var(--radius-lg, 0.75rem);
    overflow: hidden;
    transition: border-color var(--motion-fast, 150ms);
}
.worker-card:hover[b-wnxax5a91b] { border-color: var(--color-border-hover, #3a3d4e); }
.card-stale[b-wnxax5a91b] { border-color: rgba(239,68,68,0.4); }
.card-stale:hover[b-wnxax5a91b] { border-color: rgba(239,68,68,0.6); }
.card-stopping[b-wnxax5a91b] { border-color: rgba(245,158,11,0.4); }

.worker-card-header[b-wnxax5a91b] {
    display: flex; align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-bottom: 1px solid var(--color-border, #2a2d3e);
}
.worker-host[b-wnxax5a91b] {
    font-size: 0.875rem; font-weight: 600;
    color: var(--color-text, #e1e2e8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.worker-card-body[b-wnxax5a91b] {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    display: flex; flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

/* Meta grid */
.worker-meta-grid[b-wnxax5a91b] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2, 0.5rem);
}
.worker-meta[b-wnxax5a91b] { display: flex; flex-direction: column; gap: 1px; }
.meta-label[b-wnxax5a91b] {
    font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-muted, #8b8fa3);
}
.meta-value[b-wnxax5a91b] {
    font-size: 0.8125rem;
    color: var(--color-text, #e1e2e8);
}
.mono[b-wnxax5a91b] { font-family: monospace; font-size: 0.75rem; }

/* Config section */
.worker-config[b-wnxax5a91b] {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: var(--color-surface-raised, #222538);
    border-radius: var(--radius-md, 0.5rem);
}
.config-title[b-wnxax5a91b] {
    display: block;
    font-size: 0.625rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-muted, #8b8fa3);
    margin-bottom: var(--space-2, 0.5rem);
}
.config-grid[b-wnxax5a91b] {
    display: flex; flex-wrap: wrap;
    gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
}
.config-item[b-wnxax5a91b] { display: flex; align-items: baseline; gap: 4px; }
/* Divider visual antes da seção de timers — separa Limits dos Intervalos
   e desfaz a confusão polling vs heartbeat. */
.config-item-divider[b-wnxax5a91b] {
    padding-left: var(--space-3, 0.75rem);
    margin-left: var(--space-2, 0.5rem);
    border-left: 1px solid var(--color-border, #2a2d3e);
}
.config-unit[b-wnxax5a91b] {
    margin-left: 1px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-muted, #8b8fa3);
    opacity: 0.75;
}
.config-key[b-wnxax5a91b] {
    font-size: 0.6875rem;
    color: var(--color-text-muted, #8b8fa3);
}
.config-val[b-wnxax5a91b] {
    font-size: 0.8125rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #e1e2e8);
}
.config-bool[b-wnxax5a91b] { font-size: 0.75rem; }

/* Error section */
.worker-error[b-wnxax5a91b] {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md, 0.5rem);
}
.error-label[b-wnxax5a91b] {
    display: block;
    font-size: 0.625rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-danger, #ef4444);
    margin-bottom: 2px;
}
.error-text[b-wnxax5a91b] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #8b8fa3);
    word-break: break-word;
    line-height: 1.4;
}

/* ── Auto refresh ──────────────────────────────────────── */
.auto-refresh-bar[b-wnxax5a91b] {
    display: flex; align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) 0;
    font-size: 0.6875rem;
    color: var(--color-text-muted, #8b8fa3);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.auto-refresh-dot[b-wnxax5a91b] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-success, #22c55e);
    animation: w-blink-b-wnxax5a91b 2s infinite;
}
@keyframes w-blink-b-wnxax5a91b { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .workers-grid[b-wnxax5a91b] { grid-template-columns: 1fr; }
    .worker-meta-grid[b-wnxax5a91b] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/Workers/Settings.razor.rz.scp.css */
/* ═══════════════ WORKER SETTINGS — ADMIN ═══════════════ */

.warning-banner[b-qtny8p0137] {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

/* ── Meta ── */
.settings-meta[b-qtny8p0137] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.meta-badge[b-qtny8p0137] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.db-badge[b-qtny8p0137] {
    background: #dbeafe;
    color: #1d4ed8;
}

.default-badge[b-qtny8p0137] {
    background: #f3f4f6;
    color: #6b7280;
}

.meta-text[b-qtny8p0137] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ── Precedence ── */
.settings-precedence[b-qtny8p0137] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0 1rem;
    font-size: 0.8rem;
}

.precedence-label[b-qtny8p0137] {
    font-weight: 600;
    color: #374151;
}

.precedence-chain[b-qtny8p0137] {
    color: #6b7280;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

/* ── Form ── */
.settings-form[b-qtny8p0137] {
    padding-bottom: 2rem;
}

.settings-grid[b-qtny8p0137] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

.settings-section[b-qtny8p0137] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.25rem;
}

.section-title[b-qtny8p0137] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Field Row ── */
.field-row[b-qtny8p0137] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.field-row:last-child[b-qtny8p0137] {
    border-bottom: none;
}

.field-label[b-qtny8p0137] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-help[b-qtny8p0137] {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.field-input[b-qtny8p0137] {
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
    color: #111827;
    max-width: 180px;
    transition: border-color 0.15s;
}

.field-input:focus[b-qtny8p0137] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.field-range[b-qtny8p0137] {
    font-size: 0.65rem;
    color: #9ca3af;
    font-family: 'JetBrains Mono', monospace;
}

.source-db[b-qtny8p0137] {
    display: inline-block;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    background: #dbeafe;
    color: #1d4ed8;
    text-transform: uppercase;
}

/* ── Toggle Switch ── */
.toggle-switch[b-qtny8p0137] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input[b-qtny8p0137] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-qtny8p0137] {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #d1d5db;
    border-radius: 24px;
    transition: 0.2s;
}

.toggle-slider[b-qtny8p0137]::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.toggle-switch input:checked + .toggle-slider[b-qtny8p0137] {
    background: #3b82f6;
}

.toggle-switch input:checked + .toggle-slider[b-qtny8p0137]::before {
    transform: translateX(20px);
}

/* ── Actions ── */
.settings-actions[b-qtny8p0137] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 0 0;
}

/* ── Feedback ── */
.validation-errors[b-qtny8p0137] {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #991b1b;
}

.validation-errors ul[b-qtny8p0137] {
    margin: 0.25rem 0 0 1rem;
    padding: 0;
}

.save-success[b-qtny8p0137] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #065f46;
}

/* ── Skeleton ── */
.settings-skeleton[b-qtny8p0137] {
    padding: 2rem 0;
}

.skeleton-form[b-qtny8p0137] {
    height: 300px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-qtny8p0137 1.5s infinite;
    border-radius: 10px;
}

@keyframes skeleton-shimmer-b-qtny8p0137 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Components/Pages/Billing/Index.razor.rz.scp.css */
/* Plano + regras lado a lado em desktop. */
.billing-grid[b-wkirksuqlu] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 991.98px) {
    .billing-grid[b-wkirksuqlu] { grid-template-columns: minmax(0, 1fr); }
}

/* Lista densa de regras de billing — sem virar parágrafo wall-of-text. */
.billing-rules[b-wkirksuqlu] {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text);
    line-height: 1.5;
}
.billing-rules li[b-wkirksuqlu] {
    padding-left: var(--space-4);
    position: relative;
}
.billing-rules li[b-wkirksuqlu]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.65;
}
/* /Components/Pages/Billing/Plans.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Plans page — pricing com toggle, anchor, FAQ e gatilhos de conversão
   ════════════════════════════════════════════════════════════════ */

/* ── Banner "Plano atual" ──────────────────────────────────────── */
.plans-current[b-16hggi1qb4] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft-strong);
    border-radius: 999px;
    margin-bottom: var(--space-6);
    font-size: 0.875rem;
}
.plans-current-tag[b-16hggi1qb4] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    background: rgba(13, 148, 136, 0.15);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.plans-current strong[b-16hggi1qb4] {
    color: var(--color-text);
    font-weight: 600;
}
.plans-current-meta[b-16hggi1qb4] {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── Cancelamento agendado (banner de aviso) ───────────────────── */
.plans-cancel-notice[b-16hggi1qb4] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: 0.75rem 1rem;
    background: var(--color-cta-soft);
    border: 1px solid var(--color-cta-soft-strong);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    font-size: 0.875rem;
    line-height: 1.55;
}
.plans-cancel-notice-tag[b-16hggi1qb4] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-cta);
    background: var(--color-surface);
    border: 1px solid var(--color-cta-soft-strong);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.plans-cancel-notice-text[b-16hggi1qb4] { color: var(--color-text-muted); }
.plans-cancel-notice-text strong[b-16hggi1qb4] {
    color: var(--color-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.plans-cancel-notice-action[b-16hggi1qb4] {
    appearance: none;
    margin-left: auto;          /* empurra a ação para a direita do aviso */
    align-self: center;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    background: var(--color-surface);
    color: var(--color-cta);
    border: 1px solid var(--color-cta-soft-strong);
    border-radius: var(--radius-md);
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast),
                color var(--motion-fast);
}
.plans-cancel-notice-action:hover:not(:disabled)[b-16hggi1qb4] {
    background: var(--color-cta-soft);
    border-color: var(--color-cta);
}
.plans-cancel-notice-action:disabled[b-16hggi1qb4] { cursor: not-allowed; opacity: 0.7; }

/* ── Intro: headline editorial + lead + toggle ─────────────────── */
.plans-intro[b-16hggi1qb4] {
    text-align: center;
    margin-bottom: var(--space-8);
}
.plans-intro-title[b-16hggi1qb4] {
    font-weight: 600;
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}
.plans-intro-title em[b-16hggi1qb4] {
    font-style: normal;
    color: var(--color-accent);
}
.plans-intro-lead[b-16hggi1qb4] {
    max-width: 58ch;
    margin: 0 auto var(--space-5);
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* Toggle Mensal/Anual — segmented pill */
.plans-toggle[b-16hggi1qb4] {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}
.plans-toggle-option[b-16hggi1qb4] {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
    transition: color var(--motion-fast), background var(--motion-fast),
                box-shadow var(--motion-fast);
}
.plans-toggle-option:hover[b-16hggi1qb4] { color: var(--color-text); }
.plans-toggle-option.active[b-16hggi1qb4] {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}
.plans-toggle-badge[b-16hggi1qb4] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-cta);
    background: var(--color-cta-soft);
    border: 1px solid var(--color-cta-soft-strong);
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
}

/* ── Empty state (intervalo sem planos cadastrados) ────────────── */
.plans-empty[b-16hggi1qb4] {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-8);
}
.plans-empty strong[b-16hggi1qb4] {
    display: block;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--color-text);
    margin-bottom: var(--space-3);
    letter-spacing: -0.005em;
}
.plans-empty p[b-16hggi1qb4] {
    max-width: 56ch;
    margin: 0 auto var(--space-5);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}
.plans-empty-actions[b-16hggi1qb4] {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Plans Grid ────────────────────────────────────────────────── */
.plans-grid[b-16hggi1qb4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
    align-items: stretch;
    padding-top: var(--space-3); /* espaço para tag flutuante de Mais popular */
}
@media (max-width: 991.98px) {
    .plans-grid[b-16hggi1qb4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
    .plans-grid[b-16hggi1qb4] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Plan Card ─────────────────────────────────────────────────── */
.plan-card[b-16hggi1qb4] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    transition: transform var(--motion-base), box-shadow var(--motion-base),
                border-color var(--motion-base);
}
.plan-card:hover[b-16hggi1qb4] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

/* Anchor: plano recomendado, destaque Von Restorff */
.plan-card-anchor[b-16hggi1qb4] {
    border: 2px solid var(--color-accent);
    box-shadow: 0 12px 28px -8px rgba(13, 148, 136, 0.22),
                0 4px 10px -4px rgba(13, 148, 136, 0.12);
}
@media (min-width: 992px) {
    .plan-card-anchor[b-16hggi1qb4] {
        transform: scale(1.035);
    }
    .plan-card-anchor:hover[b-16hggi1qb4] {
        transform: scale(1.035) translateY(-2px);
    }
}

/* Current plan: estado atual do tenant */
.plan-card-current[b-16hggi1qb4] {
    background: var(--color-surface-muted);
    border-color: var(--color-border-strong);
}

/* Tag flutuante "Mais popular" / "Plano atual" */
.plan-tag[b-16hggi1qb4] {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    white-space: nowrap;
    z-index: 1;
}
.plan-tag-popular[b-16hggi1qb4] {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(13, 148, 136, 0.35);
}
.plan-tag-current[b-16hggi1qb4] {
    background: var(--color-text);
    color: #fff;
}
/* "Próximo plano": o free assume quando há cancelamento agendado. Usa o tom
   âmbar do CTA para diferenciar do teal "Mais popular" e do escuro "Plano atual". */
.plan-tag-next[b-16hggi1qb4] {
    background: var(--color-cta);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(217, 119, 6, 0.35);
}

/* Plan Header */
.plan-header[b-16hggi1qb4] {
    margin-bottom: var(--space-4);
    min-height: 3.5rem;
}
.plan-name[b-16hggi1qb4] {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 0.3rem;
    letter-spacing: -0.012em;
}
.plan-description[b-16hggi1qb4] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-subtle);
    line-height: 1.5;
}

/* Plan Price */
.plan-price[b-16hggi1qb4] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.1rem;
    color: var(--color-text);
}
.plan-price-currency[b-16hggi1qb4] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.plan-price-value[b-16hggi1qb4] {
    font-family: var(--font-mono);
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.plan-price-period[b-16hggi1qb4] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.plan-price-monthly-eq[b-16hggi1qb4] {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-3);
}

/* Trial badge */
.plan-trial[b-16hggi1qb4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-cta);
    background: var(--color-cta-soft);
    border: 1px solid var(--color-cta-soft-strong);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    margin: var(--space-2) 0 var(--space-3);
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Plan Features */
.plan-features[b-16hggi1qb4] {
    list-style: none;
    margin: var(--space-3) 0 var(--space-5);
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--color-border);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--color-text);
}
.plan-features li[b-16hggi1qb4] {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}
.plan-features li strong[b-16hggi1qb4] {
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.plan-feature-check[b-16hggi1qb4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-accent);
    flex: 0 0 auto;
    line-height: 1;
    margin-top: 2px;
}

/* Plan CTA */
.plan-cta[b-16hggi1qb4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.btn-plan[b-16hggi1qb4] {
    appearance: none;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--motion-base), transform var(--motion-base),
                box-shadow var(--motion-base), color var(--motion-base),
                border-color var(--motion-base);
    line-height: 1.3;
}
.btn-plan:disabled[b-16hggi1qb4] { cursor: not-allowed; }

.btn-plan-anchor[b-16hggi1qb4] {
    background: var(--color-cta);
    color: #fff;
    box-shadow: 0 4px 14px -2px rgba(217, 119, 6, 0.4);
}
.btn-plan-anchor:hover:not(:disabled)[b-16hggi1qb4] {
    background: var(--color-cta-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -2px rgba(217, 119, 6, 0.5);
    color: #fff;
    text-decoration: none;
}
.btn-plan-default[b-16hggi1qb4] {
    background: var(--color-surface);
    color: var(--color-accent);
    border-color: var(--color-border-strong);
}
.btn-plan-default:hover:not(:disabled)[b-16hggi1qb4] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
    text-decoration: none;
}
.btn-plan-current[b-16hggi1qb4],
.btn-plan-disabled[b-16hggi1qb4] {
    background: var(--color-surface-hover);
    color: var(--color-text-subtle);
    border-color: var(--color-border);
}
.btn-plan-ghost[b-16hggi1qb4] {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
    padding: 0.55rem 1.3rem;
}
.btn-plan-ghost:hover:not(:disabled)[b-16hggi1qb4] {
    background: var(--color-surface-hover);
    border-color: var(--color-text-subtle);
    color: var(--color-text);
    text-decoration: none;
}

.plan-cta-micro[b-16hggi1qb4] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    margin-top: -0.1rem;
}
.plan-cta-micro-next[b-16hggi1qb4] { color: var(--color-text-muted); }
.plan-cta-micro-next strong[b-16hggi1qb4] {
    color: var(--color-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Badge inline no card do plano pago atual com cancelamento agendado.
   Fluxo normal (não-flutuante) — distinto da tag absoluta .plan-tag. */
.plan-flag[b-16hggi1qb4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-cta);
    background: var(--color-cta-soft);
    border: 1px solid var(--color-cta-soft-strong);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    line-height: 1.3;
    text-align: center;
}
.plan-flag-dot[b-16hggi1qb4] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-cta);
    flex: 0 0 auto;
}

/* ── Section title pattern ─────────────────────────────────────── */
.plans-section-title[b-16hggi1qb4] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-subtle);
    margin: 0 0 var(--space-4);
    text-align: center;
}

/* ── Includes grid (Em todos os planos) ────────────────────────── */
.plans-includes[b-16hggi1qb4] {
    margin-bottom: var(--space-5);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.plans-includes-grid[b-16hggi1qb4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
}
.plans-includes-grid li[b-16hggi1qb4] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.5;
}
.plans-includes-grid strong[b-16hggi1qb4] {
    font-weight: 600;
    color: var(--color-text);
}
.plans-include-icon[b-16hggi1qb4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-radius: 50%;
    flex: 0 0 auto;
    line-height: 1;
    margin-top: 1px;
}
@media (max-width: 767.98px) {
    .plans-includes-grid[b-16hggi1qb4] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Security strip ────────────────────────────────────────────── */
.plans-security[b-16hggi1qb4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: var(--space-8);
    padding: var(--space-3);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-align: center;
    flex-wrap: wrap;
}
.plans-security svg[b-16hggi1qb4] {
    width: 16px;
    height: 16px;
    color: var(--color-text-subtle);
    flex: 0 0 auto;
}
.plans-security strong[b-16hggi1qb4] {
    color: var(--color-text);
    font-weight: 600;
}

/* ── FAQ ───────────────────────────────────────────────────────── */
.plans-faq[b-16hggi1qb4] {
    margin: 0 auto var(--space-8);
    max-width: 720px;
}
.plans-faq .plans-section-title[b-16hggi1qb4] { margin-bottom: var(--space-5); }

.plans-faq-item[b-16hggi1qb4] {
    border-bottom: 1px solid var(--color-border);
}
.plans-faq-item:first-of-type[b-16hggi1qb4] { border-top: 1px solid var(--color-border); }

.plans-faq-item summary[b-16hggi1qb4] {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    transition: color var(--motion-fast);
}
.plans-faq-item summary[b-16hggi1qb4]::-webkit-details-marker { display: none; }
.plans-faq-item summary[b-16hggi1qb4]::after {
    content: "+";
    font-size: 1.45rem;
    font-weight: 300;
    color: var(--color-text-subtle);
    line-height: 1;
    transition: transform var(--motion-base), color var(--motion-fast);
    flex: 0 0 auto;
}
.plans-faq-item[open] summary[b-16hggi1qb4]::after {
    content: "−";
    color: var(--color-accent);
}
.plans-faq-item summary:hover[b-16hggi1qb4] { color: var(--color-accent); }
.plans-faq-item summary:focus-visible[b-16hggi1qb4] {
    outline: none;
    box-shadow: var(--ring-soft);
    border-radius: var(--radius-sm);
}
.plans-faq-item p[b-16hggi1qb4] {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.65;
    max-width: 64ch;
}
.plans-faq-item p a[b-16hggi1qb4] {
    color: var(--color-accent);
    font-weight: 500;
}

/* ── Final CTA strip ───────────────────────────────────────────── */
.plans-cta-final[b-16hggi1qb4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-align: center;
}
.plans-cta-final-text[b-16hggi1qb4] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    max-width: 46ch;
    line-height: 1.55;
}

/* ── Loading skeleton ──────────────────────────────────────────── */
.plans-loading[b-16hggi1qb4] {
    height: 360px;
    border-radius: var(--radius-xl);
    background: linear-gradient(
        90deg,
        var(--color-surface-muted) 0%,
        var(--color-surface-hover) 50%,
        var(--color-surface-muted) 100%
    );
    background-size: 200% 100%;
    animation: plans-shimmer-b-16hggi1qb4 1.4s ease-in-out infinite;
}
@keyframes plans-shimmer-b-16hggi1qb4 {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .plan-card[b-16hggi1qb4],
    .plan-card-anchor[b-16hggi1qb4],
    .btn-plan[b-16hggi1qb4],
    .plans-faq-item summary[b-16hggi1qb4]::after,
    .plans-toggle-option[b-16hggi1qb4] {
        transition: none !important;
    }
    .plan-card:hover[b-16hggi1qb4],
    .plan-card-anchor:hover[b-16hggi1qb4] {
        transform: none !important;
    }
    .btn-plan-anchor:hover:not(:disabled)[b-16hggi1qb4] {
        transform: none !important;
    }
    .plans-loading[b-16hggi1qb4] { animation: none; }
}
/* /Components/Pages/Dashboard/Index.razor.rz.scp.css */
/* =====================================================================
   Dashboard — Central operacional
   ---------------------------------------------------------------------
   Hierarquia visual (top-down):
     1. Command bar    — health pill, realtime/age, endpoints chip
     2. Hero           — estado geral + motivo concreto + CTA contextual
     3. KPI grid (6)   — Recebidas, Entregues, Falhas, Em fila, ACK, Consumo
     4. Health strip   — 3 metros compactos (taxa entrega/erro/franquia)
     5. Painel inferior — Problemas + Atividade em tempo real
   --------------------------------------------------------------------- */

/* ─────────────────────────────────────────────────────────────────────
   0. VIEWPORT-FIT (somente desktop ≥ 1200×800)
   ---------------------------------------------------------------------
   Tira o scroll do documento inteiro e usa flex column para repassar a
   altura disponível até o grid dos painéis (Problemas + Atividade), que
   absorve o espaço restante. Listas internas (.activity-list,
   .table-responsive) rolam DENTRO de .panel-scroll — UMA única barra
   por painel, nada do scroll do body. Abaixo de 1200×800 (mobile,
   tablets, 1366×768, etc.) o wrapper é transparente e tudo flui no
   documento normalmente.

   Cálculo da altura:
     100vh
     − var(--topbar-height) [0 em desktop] ← sem topbar global; só conta no mobile
     − 56px [24 + 32]                      ← app-content padding-y
     = espaço útil do Dashboard

   A media query também exige min-height: 800px para que telas baixas
   (1366×768, 1440×768, etc.) NÃO entrem em viewport-fit — onde o
   espaço para painéis ficaria comprimido demais — e degradem para
   scroll do documento naturalmente.
   ───────────────────────────────────────────────────────────────────── */
.dashboard-viewport[b-puqgvpajr9] { display: block; min-width: 0; }
.panel-scroll[b-puqgvpajr9]       { display: block; min-width: 0; }
/* O respiro do topo do PageHeader (igualando às páginas de workspace) é
   aplicado globalmente em app.css via `.dashboard-viewport > .page-header`.
   Não pode ficar aqui: o .page-header pertence ao componente PageHeader (outro
   escopo de CSS isolation) e uma regra scoped desta página não o alcançaria. */

@media (min-width: 1200px) and (min-height: 800px) {
    .dashboard-viewport[b-puqgvpajr9] {
        height: calc(100vh - var(--topbar-height) - 56px);
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        gap: var(--space-2);
    }

    /* PageHeader compacto: margem zerada (gap do flex parent cuida do
       espaçamento). O subtítulo permanece visível — sem topbar global, ele
       deixou de ser redundante. */
    .dashboard-viewport > .page-header[b-puqgvpajr9] {
        margin: 0;
        padding-bottom: var(--space-2);
        flex: 0 0 auto;
    }

    /* Todas as seções acima dos painéis: altura natural + sem margem
       (gap do parent organiza o spacing). */
    .dashboard-viewport > .ops-refresh-toast[b-puqgvpajr9],
    .dashboard-viewport > .command-bar[b-puqgvpajr9],
    .dashboard-viewport > .ops-hero[b-puqgvpajr9],
    .dashboard-viewport > .ops-actions[b-puqgvpajr9],
    .dashboard-viewport > .ops-kpi-grid[b-puqgvpajr9],
    .dashboard-viewport > .ops-filters[b-puqgvpajr9],
    .dashboard-viewport > .ops-health[b-puqgvpajr9],
    .dashboard-viewport > .alert[b-puqgvpajr9] {
        flex: 0 0 auto;
        margin: 0;
    }

    /* Compactação adicional só no modo viewport-fit (preserva o layout
       confortável quando o usuário pode rolar livremente). */
    .dashboard-viewport .ops-kpi[b-puqgvpajr9] {
        min-height: 70px;
        padding: 0.5rem var(--space-3);
        gap: 0.2rem;
    }
    .dashboard-viewport .ops-kpi-value[b-puqgvpajr9] { font-size: 1.35rem; }
    .dashboard-viewport .ops-filters[b-puqgvpajr9] { padding: 0.35rem var(--space-3); }
    .dashboard-viewport .ops-health[b-puqgvpajr9]  { padding: var(--space-2) var(--space-4); }
    .dashboard-viewport .ops-health-head[b-puqgvpajr9] { margin-bottom: 0.4rem; }
    .dashboard-viewport .ops-health-bars[b-puqgvpajr9] { gap: var(--space-4); }
    .dashboard-viewport .ops-meter[b-puqgvpajr9] { gap: 0.3rem; }
    .dashboard-viewport .ops-meter-pct[b-puqgvpajr9] { font-size: 1.2rem; }

    /* Grid dos painéis absorve o restante. min-height: 0 é o pulo do
       gato: sem isso o flex item considera o conteúdo intrínseco como
       altura mínima e o scroll interno nunca aparece (a coisa toda
       transborda para fora). */
    .dashboard-viewport > .dashboard-panels[b-puqgvpajr9] {
        flex: 1 1 auto;
        min-height: 0;
        align-items: stretch;
        margin: 0;
    }
    .dashboard-viewport > .dashboard-panels > .panel[b-puqgvpajr9] {
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .dashboard-viewport .dashboard-panels .panel-header[b-puqgvpajr9],
    .dashboard-viewport .dashboard-panels .panel-foot[b-puqgvpajr9] {
        flex: 0 0 auto;
    }
    .dashboard-viewport .dashboard-panels .panel-scroll[b-puqgvpajr9] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Listas internas: soltam suas constraints próprias para que o
       panel-scroll dite a área de rolagem. Sem isso, .activity-list
       manteria seu max-height: clamp(...) e a tabela ficaria sem
       limitador — produzindo duas barras concorrentes (a do panel-scroll
       e a interna da lista). */
    .dashboard-viewport .dashboard-panels .activity-list[b-puqgvpajr9] {
        max-height: none;
        overflow: visible;
        height: auto;
    }
    .dashboard-viewport .dashboard-panels .table-responsive[b-puqgvpajr9] {
        max-height: none;
        /* preserva overflow-x do Bootstrap para tabelas largas; só liberamos
           o eixo Y (quem rola é o panel-scroll, não a tabela individualmente). */
        overflow-y: visible;
    }

    /* Empty state vertical-centered no espaço alocado (em vez de empilhado
       no topo, deixando metade do painel em branco). */
    .dashboard-viewport .dashboard-panels .panel-scroll > .panel-empty[b-puqgvpajr9] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        height: 100%;
        padding: var(--space-4);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   1. SKELETON — só no primeiro carregamento. Refreshes subsequentes
   mutam os dados sem desmontar a tree (anti-flicker).
   ───────────────────────────────────────────────────────────────────── */
.ops-skeleton[b-puqgvpajr9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ops-skeleton .skeleton-block[b-puqgvpajr9] {
    background: linear-gradient(
        90deg,
        var(--color-surface-muted, #f2f4f7) 0%,
        var(--color-surface-hover, #eef0f3) 50%,
        var(--color-surface-muted, #f2f4f7) 100%
    );
    background-size: 200% 100%;
    animation: ops-shimmer-b-puqgvpajr9 1.4s ease-in-out infinite;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.ops-skeleton .sk-commandbar[b-puqgvpajr9] { height: 32px; }
.ops-skeleton .sk-hero[b-puqgvpajr9]       { height: 56px; }
.ops-skeleton .sk-health[b-puqgvpajr9]     { height: 132px; }
.ops-skeleton .sk-kpis[b-puqgvpajr9] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
}
.ops-skeleton .sk-kpis .skeleton-block[b-puqgvpajr9] { height: 104px; }
.ops-skeleton .sk-grid[b-puqgvpajr9] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-4);
}
.ops-skeleton .sk-grid .skeleton-block[b-puqgvpajr9] { height: 260px; }
@media (max-width: 1199.98px) {
    .ops-skeleton .sk-kpis[b-puqgvpajr9] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ops-skeleton .sk-kpis[b-puqgvpajr9] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-skeleton .sk-grid[b-puqgvpajr9] { grid-template-columns: minmax(0, 1fr); }
}
@keyframes ops-shimmer-b-puqgvpajr9 {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ─────────────────────────────────────────────────────────────────────
   1b. REFRESH TOAST — banner não-bloqueante quando refresh falha mas
   dados antigos seguem visíveis. Tom warning (âmbar) em vez de danger
   (vermelho) — o erro é recuperável: o sistema continua funcional,
   o operador só precisa saber que o número que está vendo pode estar
   defasado. Vermelho aqui daria a impressão de "tudo quebrou" e
   subestima a robustez do fluxo (próximo realtime/fallback resolve).
   ───────────────────────────────────────────────────────────────────── */
.ops-refresh-toast[b-puqgvpajr9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.65rem var(--space-4);
    background: var(--color-warning-soft);
    border: 1px solid #fec84b;
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    color: var(--color-warning);
    font-size: 0.81rem;
    line-height: 1.4;
}
.ops-refresh-toast-icon[b-puqgvpajr9] {
    flex: 0 0 auto;
    color: var(--color-warning);
}
.ops-refresh-toast-body[b-puqgvpajr9] {
    flex: 1;
    min-width: 0;
    color: var(--color-text);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}
.ops-refresh-toast-body strong[b-puqgvpajr9] {
    color: var(--color-warning);
    font-weight: 600;
}
.ops-refresh-toast-body span[b-puqgvpajr9] {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ops-refresh-toast-retry[b-puqgvpajr9] {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--color-warning);
    color: var(--color-warning);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--motion-base);
    white-space: nowrap;
}
.ops-refresh-toast-retry:hover[b-puqgvpajr9] {
    background: var(--color-warning);
    color: #ffffff;
}
.ops-refresh-toast-retry:disabled[b-puqgvpajr9] {
    opacity: 0.55;
    cursor: not-allowed;
}
.ops-refresh-toast-dismiss[b-puqgvpajr9] {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--color-text-subtle);
    padding: 0.2rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--motion-fast), background var(--motion-fast);
}
.ops-refresh-toast-dismiss:hover[b-puqgvpajr9] {
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.04);
}

@media (max-width: 575.98px) {
    .ops-refresh-toast[b-puqgvpajr9] {
        flex-wrap: wrap;
    }
    .ops-refresh-toast-body[b-puqgvpajr9] { flex-basis: 100%; }
    .ops-refresh-toast-retry[b-puqgvpajr9],
    .ops-refresh-toast-dismiss[b-puqgvpajr9] {
        margin-left: auto;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   2. COMMAND BAR — status global compacto, sticky com o header.
   Posicionada antes do hero para que o operador veja "como" os dados
   estão sendo atualizados antes de "o que" eles dizem.
   ───────────────────────────────────────────────────────────────────── */
.command-bar[b-puqgvpajr9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: 0 0 var(--space-3);
    padding: 0;
}

/* Health pill — Operacional / Atenção / Degradado.
   Mesmo padrão visual usado em outros pontos da app — coerência. */
.health-pill[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.85rem 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.3;
}
.health-pill-dot[b-puqgvpajr9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.health-pill-operational[b-puqgvpajr9] {
    color: #027a48;
    background: rgba(103, 232, 168, 0.14);
    border-color: rgba(103, 232, 168, 0.38);
}
.health-pill-operational .health-pill-dot[b-puqgvpajr9] {
    background: var(--color-phosphor);
    box-shadow: 0 0 6px rgba(103, 232, 168, 0.6);
    animation: ops-pulse-b-puqgvpajr9 2.4s ease-in-out infinite;
}
.health-pill-attention[b-puqgvpajr9] {
    color: var(--color-warning);
    background: var(--color-warning-soft);
    border-color: #fec84b;
}
.health-pill-attention .health-pill-dot[b-puqgvpajr9] {
    background: var(--color-warning);
    box-shadow: 0 0 6px rgba(181, 71, 8, 0.35);
}
.health-pill-degraded[b-puqgvpajr9] {
    color: var(--color-danger);
    background: var(--color-danger-soft);
    border-color: #fda29b;
}
.health-pill-degraded .health-pill-dot[b-puqgvpajr9] {
    background: var(--color-danger);
    box-shadow: 0 0 8px rgba(240, 68, 56, 0.55);
    animation: ops-pulse-b-puqgvpajr9 1.1s ease-in-out infinite;
}

/* Live indicator — modo de atualização (realtime vs fallback) + idade. */
.live-indicator[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text-subtle);
    letter-spacing: 0.01em;
}
.live-indicator-dot[b-puqgvpajr9] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-phosphor);
    box-shadow: 0 0 6px rgba(103, 232, 168, 0.55);
    animation: ops-pulse-b-puqgvpajr9 2s ease-in-out infinite;
    flex: 0 0 auto;
}
.live-indicator strong[b-puqgvpajr9] {
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.live-indicator-sep[b-puqgvpajr9] {
    color: var(--color-border-strong);
}
/* Variante "fallback" sem o pulso verde — diferencia visualmente quando
   o realtime não está ativo (sem alarme: o polling cobre). */
.live-indicator-fallback .live-indicator-dot[b-puqgvpajr9] {
    background: var(--color-text-subtle);
    box-shadow: none;
    animation: none;
}

/* Chip auxiliar do command bar — info de contexto não-crítica. */
.command-bar-chip[b-puqgvpajr9] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.74rem;
    color: var(--color-text-muted);
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}
.command-bar-chip strong[b-puqgvpajr9] {
    color: var(--color-text);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   3. HERO OPERACIONAL — faixa compacta (56-72px) com estado + motivo + CTA.
   Densidade-alvo: comunica "como o sistema está" rapidamente sem
   dominar a viewport. Em estado saudável o título "Tudo certo" basta,
   sem CTA — o detail fica curto e a faixa quase desaparece. Em estado
   degradado o tom lateral + CTA preenchido ganham destaque, mas a
   altura da faixa permanece a mesma — não empurra KPIs/painéis para
   fora do first-fold em 1080p.
   ───────────────────────────────────────────────────────────────────── */
.ops-hero[b-puqgvpajr9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0.6rem var(--space-4) 0.6rem 0.9rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-3);
    position: relative;
    overflow: hidden;
    min-height: 56px;
}
/* Barra lateral colorida — 3px à esquerda em vez de tingir o card todo,
   mantém a leitura premium e evita "card colorido pesado". */
.ops-hero[b-puqgvpajr9]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}
.ops-hero-operational[b-puqgvpajr9]::before { background: var(--color-phosphor); }
.ops-hero-attention[b-puqgvpajr9]::before   { background: var(--color-warning); }
.ops-hero-degraded[b-puqgvpajr9]::before    { background: var(--color-danger); }

/* Ícone tonal à esquerda — reduzido de 56→32px para densificar a faixa. */
.ops-hero-icon[b-puqgvpajr9] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex: 0 0 auto;
}
.ops-hero-icon svg[b-puqgvpajr9] {
    width: 17px;
    height: 17px;
}
.ops-hero-operational .ops-hero-icon[b-puqgvpajr9] {
    color: #027a48;
    background: rgba(103, 232, 168, 0.18);
}
.ops-hero-attention .ops-hero-icon[b-puqgvpajr9] {
    color: var(--color-warning);
    background: var(--color-warning-soft);
}
.ops-hero-degraded .ops-hero-icon[b-puqgvpajr9] {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

/* Body inline (título + detalhe lado-a-lado em desktop) — mantém altura
   reduzida. Em telas menores quebra para duas linhas (ver media query). */
.ops-hero-body[b-puqgvpajr9] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.55rem;
    row-gap: 0.05rem;
}
.ops-hero-title[b-puqgvpajr9] {
    font-family: var(--font-display, var(--font-sans));
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.005em;
    line-height: 1.3;
    white-space: nowrap;
    flex: 0 0 auto;
}
.ops-hero-detail[b-puqgvpajr9] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

/* CTA contextual à direita — só aparece quando há ação útil
   (sem ação = sem botão; evita poluir o estado "tudo ok"). */
.ops-hero-cta[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--motion-base);
    flex: 0 0 auto;
}
.ops-hero-cta:hover[b-puqgvpajr9] {
    color: var(--color-text);
    background: var(--color-surface-hover);
    border-color: var(--color-text-subtle);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.ops-hero-degraded .ops-hero-cta[b-puqgvpajr9] {
    color: #ffffff;
    background: var(--color-danger);
    border-color: var(--color-danger);
}
.ops-hero-degraded .ops-hero-cta:hover[b-puqgvpajr9] {
    background: #931d12;
    border-color: #931d12;
    color: #ffffff;
}
.ops-hero-attention .ops-hero-cta[b-puqgvpajr9] {
    color: #ffffff;
    background: var(--color-warning);
    border-color: var(--color-warning);
}
.ops-hero-attention .ops-hero-cta:hover[b-puqgvpajr9] {
    background: #8a3606;
    border-color: #8a3606;
    color: #ffffff;
}

@media (max-width: 767.98px) {
    .ops-hero[b-puqgvpajr9] {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-3);
        padding: 0.6rem var(--space-3) 0.6rem 0.75rem;
    }
    .ops-hero-body[b-puqgvpajr9] { flex-direction: column; align-items: flex-start; }
    .ops-hero-title[b-puqgvpajr9] { white-space: normal; }
    .ops-hero-detail[b-puqgvpajr9] { white-space: normal; }
    .ops-hero-cta[b-puqgvpajr9] {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   3b. PRÓXIMAS AÇÕES — barra horizontal compacta + disclosure.
   Densidade-alvo: ~56px de barra. Apoio contextual, não dominante.
   Layout:
     · barra (sempre visível) → label + ícone tonal + ação primária
       (título inline + detalhe truncado) + CTA + "+N ações" (se >1).
     · extra (oculta por default) → lista de mini-linhas que aparece
       quando o operador clica no toggle "+N ações". Permite acessar
       toda a checklist sem ocupar espaço vertical no estado padrão.
   Tom (danger/warning/info) sai pela borda esquerda e pelo CTA — sem
   tingir a linha inteira (mantém leitura limpa).
   ───────────────────────────────────────────────────────────────────── */
.ops-actions[b-puqgvpajr9] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.ops-actions-danger[b-puqgvpajr9]  { border-left-color: var(--color-danger); }
.ops-actions-warning[b-puqgvpajr9] { border-left-color: var(--color-warning); }
.ops-actions-info[b-puqgvpajr9]    { border-left-color: var(--color-info, #175cd3); }

.ops-actions-bar[b-puqgvpajr9] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--space-3);
    padding: 0.5rem var(--space-4);
    min-height: 52px;
}

/* Label "PRÓXIMAS AÇÕES" — chip uppercase. Separador discreto ao lado
   delimita visualmente a "etiqueta" do conteúdo da ação. */
.ops-actions-label[b-puqgvpajr9] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-subtle);
    margin: 0;
    white-space: nowrap;
    padding-right: var(--space-3);
    border-right: 1px solid var(--color-border);
    line-height: 1;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}

.ops-actions-icon[b-puqgvpajr9] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex: 0 0 auto;
}
.ops-actions-icon svg[b-puqgvpajr9] { width: 15px; height: 15px; }
.ops-actions-icon-danger[b-puqgvpajr9]  { color: var(--color-danger);            background: var(--color-danger-soft); }
.ops-actions-icon-warning[b-puqgvpajr9] { color: var(--color-warning);           background: var(--color-warning-soft); }
.ops-actions-icon-info[b-puqgvpajr9]    { color: var(--color-info, #175cd3);     background: var(--color-info-soft, #eff8ff); }

/* Body inline (título + detalhe lado-a-lado). Detalhe trunca com
   ellipsis para preservar a altura fixa da barra. */
.ops-actions-pri-body[b-puqgvpajr9] {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    column-gap: 0.5rem;
    min-width: 0;
}
.ops-actions-pri-title[b-puqgvpajr9] {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    max-width: 100%;
}
.ops-actions-pri-detail[b-puqgvpajr9] {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 0;
    min-width: 0;
}

.ops-actions-pri-cta[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--motion-base);
    flex: 0 0 auto;
    white-space: nowrap;
}
.ops-actions-pri-cta:hover[b-puqgvpajr9] {
    background: var(--color-surface-hover);
    border-color: var(--color-text-subtle);
    color: var(--color-text);
    text-decoration: none;
    transform: translateY(-1px);
}
/* Em ação primária crítica, CTA ganha cor preenchida — drive maior
   para o clique. Warning e info ficam neutras para não competirem. */
.ops-actions-cta-danger[b-puqgvpajr9] {
    color: #ffffff;
    background: var(--color-danger);
    border-color: var(--color-danger);
}
.ops-actions-cta-danger:hover[b-puqgvpajr9] {
    background: #931d12;
    border-color: #931d12;
    color: #ffffff;
}

/* Toggle "+N ações" — disclosure trigger. Estilo low-key para não
   competir com o CTA da ação primária; aparece apenas quando há mais
   de 1 ação aplicável. */
.ops-actions-more[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--motion-base);
    flex: 0 0 auto;
    line-height: 1.3;
}
.ops-actions-more:hover[b-puqgvpajr9] {
    color: var(--color-text);
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
}
.ops-actions-more-chev[b-puqgvpajr9] {
    transition: transform var(--motion-base);
}
.ops-actions-more-chev.is-expanded[b-puqgvpajr9] {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .ops-actions-more-chev[b-puqgvpajr9] { transition: none !important; }
}

/* Lista expandida — abaixo da barra, separada por divisor. Linhas
   mini-densas: ícone pequeno + título inline + detalhe + CTA leve. */
.ops-actions-extra[b-puqgvpajr9] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}
.ops-action-mini[b-puqgvpajr9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    padding: 0.45rem var(--space-4);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--motion-fast);
}
.ops-action-mini:last-child[b-puqgvpajr9] { border-bottom: none; }
.ops-action-mini:hover[b-puqgvpajr9]     { background: var(--color-surface-hover); }

.ops-action-mini-icon[b-puqgvpajr9] {
    width: 24px;
    height: 24px;
}
.ops-action-mini-icon svg[b-puqgvpajr9] { width: 13px; height: 13px; }

.ops-action-mini-body[b-puqgvpajr9] {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    column-gap: 0.5rem;
    min-width: 0;
}
.ops-action-mini-title[b-puqgvpajr9] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}
.ops-action-mini-detail[b-puqgvpajr9] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 0;
    min-width: 0;
}
.ops-action-mini-cta[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--motion-fast);
    white-space: nowrap;
    flex: 0 0 auto;
}
.ops-action-mini-cta:hover[b-puqgvpajr9] {
    color: var(--color-text);
    border-color: var(--color-text-subtle);
    background: var(--color-surface);
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .ops-actions-bar[b-puqgvpajr9] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: 0.4rem;
        padding: 0.55rem var(--space-3);
    }
    /* Em ≤991px o label vira sub-rótulo na primeira linha; ícone +
       body + CTA continuam na linha principal. */
    .ops-actions-label[b-puqgvpajr9] {
        grid-column: 1 / -1;
        border-right: none;
        padding-right: 0;
        padding-bottom: 0.1rem;
    }
}
@media (max-width: 575.98px) {
    .ops-actions-bar[b-puqgvpajr9] {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 0.45rem;
    }
    .ops-actions-pri-body[b-puqgvpajr9] { flex-wrap: wrap; }
    .ops-actions-pri-title[b-puqgvpajr9],
    .ops-actions-pri-detail[b-puqgvpajr9] { white-space: normal; }
    .ops-actions-pri-cta[b-puqgvpajr9],
    .ops-actions-more[b-puqgvpajr9] {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
    }
    .ops-action-mini[b-puqgvpajr9] {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 0.35rem;
        padding: 0.5rem var(--space-3);
    }
    .ops-action-mini-body[b-puqgvpajr9] { flex-wrap: wrap; }
    .ops-action-mini-title[b-puqgvpajr9],
    .ops-action-mini-detail[b-puqgvpajr9] { white-space: normal; }
    .ops-action-mini-cta[b-puqgvpajr9] {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   4. KPI GRID (6 cards) — métricas operacionais primárias.
   Layout mais denso que a versão antiga de 5: cards menores, ícone
   pequeno alinhado ao label, número grande, footer com 1-2 chips.
   ───────────────────────────────────────────────────────────────────── */
.ops-kpi-grid[b-puqgvpajr9] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
@media (max-width: 1399.98px) {
    .ops-kpi-grid[b-puqgvpajr9] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .ops-kpi-grid[b-puqgvpajr9] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 419.98px) {
    .ops-kpi-grid[b-puqgvpajr9] { grid-template-columns: minmax(0, 1fr); }
}

.ops-kpi[b-puqgvpajr9] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-3) var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: border-color var(--motion-base), box-shadow var(--motion-base);
    position: relative;
    overflow: hidden;
    min-height: 96px;
}
.ops-kpi:hover[b-puqgvpajr9] {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}
/* Fina borda lateral colorida quando o card carrega um sinal — sem
   tingir o fundo (evita carnaval visual). */
.ops-kpi[b-puqgvpajr9]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background var(--motion-base);
}
.ops-kpi.is-success[b-puqgvpajr9]::before { background: var(--color-phosphor); }
.ops-kpi.is-danger[b-puqgvpajr9]::before  { background: var(--color-danger); }
.ops-kpi.is-warning[b-puqgvpajr9]::before { background: var(--color-warning); }
.ops-kpi.is-info[b-puqgvpajr9]::before    { background: var(--color-info, #175cd3); }

.ops-kpi-head[b-puqgvpajr9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-subtle);
}
.ops-kpi-icon[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    opacity: 0.7;
}
.ops-kpi-icon svg[b-puqgvpajr9] {
    width: 14px;
    height: 14px;
}
.ops-kpi-label[b-puqgvpajr9] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-subtle);
    line-height: 1.3;
}
.ops-kpi-value[b-puqgvpajr9] {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    color: var(--color-text);
}
.ops-kpi.is-success .ops-kpi-value[b-puqgvpajr9] { color: var(--color-success); }
.ops-kpi.is-danger  .ops-kpi-value[b-puqgvpajr9] { color: var(--color-danger); }
.ops-kpi.is-warning .ops-kpi-value[b-puqgvpajr9] { color: var(--color-warning); }
.ops-kpi.is-info    .ops-kpi-value[b-puqgvpajr9] { color: var(--color-info, #175cd3); }

.ops-kpi-foot[b-puqgvpajr9] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}
.ops-kpi-foot-muted[b-puqgvpajr9] {
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ops-kpi-split[b-puqgvpajr9] {
    flex-wrap: wrap;
}
.ops-kpi-split strong[b-puqgvpajr9] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    font-weight: 600;
}
.ops-kpi-foot-sep[b-puqgvpajr9] {
    color: var(--color-border-strong);
}

/* Chip clicável no footer (ex.: backlog em DeadLetter como CTA inline) */
.ops-kpi-chip[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.ops-kpi-chip-danger[b-puqgvpajr9] {
    color: var(--color-danger);
    background: rgba(180, 35, 24, 0.12);
    border: 1px solid rgba(180, 35, 24, 0.25);
}
.ops-kpi-chip-danger:hover[b-puqgvpajr9] {
    background: rgba(180, 35, 24, 0.18);
    color: var(--color-danger);
    text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────
   4b. FILTERS STRIP — período + endpoint + grupo
   Linha horizontal compacta, embutida no fluxo visual. Posicionada
   entre o KPI grid (global at-a-glance) e a health strip (análise
   filtrada): explicita ao operador que dali em diante os widgets
   respondem aos filtros.
   ───────────────────────────────────────────────────────────────────── */
.ops-filters[b-puqgvpajr9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: 0.5rem var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-3);
}
.ops-filters-group[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.ops-filters-label[b-puqgvpajr9] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-subtle);
    white-space: nowrap;
    margin: 0;
}
.ops-filters-select[b-puqgvpajr9] {
    min-width: 180px;
    max-width: 240px;
    font-size: 0.81rem;
}
.ops-filters-clear[b-puqgvpajr9] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--motion-base);
    white-space: nowrap;
}
.ops-filters-clear:hover[b-puqgvpajr9] {
    color: var(--color-danger);
    border-color: #fda29b;
    background: var(--color-danger-soft);
}
.ops-filters-clear:disabled[b-puqgvpajr9] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 767.98px) {
    .ops-filters[b-puqgvpajr9] { gap: var(--space-3); }
    .ops-filters-group[b-puqgvpajr9] { width: 100%; justify-content: space-between; }
    .ops-filters-select[b-puqgvpajr9] { flex: 1; max-width: none; }
    .ops-filters-clear[b-puqgvpajr9] { margin-left: 0; width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   4c. LINK em chips de footer — drill-down contextual nos KPI cards.
   Sem sublinhar por default (chip-like); cor herdada do estado do card.
   ───────────────────────────────────────────────────────────────────── */
.ops-kpi-link[b-puqgvpajr9] {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
    transition: color var(--motion-fast), border-color var(--motion-fast);
}
.ops-kpi-link:hover[b-puqgvpajr9] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    text-decoration: none;
}
.ops-kpi-link strong[b-puqgvpajr9] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   5. HEALTH STRIP — barras de progresso compactas (substitui gauges).
   Três metros lado a lado, número em destaque, barra fina horizontal,
   detalhe textual. Mais denso e comparável que os gauges semi-circulares.
   ───────────────────────────────────────────────────────────────────── */
.ops-health[b-puqgvpajr9] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-3) var(--space-5);
    margin-bottom: var(--space-3);
}
.ops-health-head[b-puqgvpajr9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.ops-section-title[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}
.ops-section-title[b-puqgvpajr9]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-phosphor);
    box-shadow: 0 0 6px rgba(103, 232, 168, 0.55);
    flex: 0 0 auto;
    animation: ops-pulse-b-puqgvpajr9 2.4s ease-in-out infinite;
}
/* Resumo textual do recorte aplicado — substitui a antiga linha de
   period pills aqui no header (que mudaram para a strip de filtros). */
.ops-health-scope[b-puqgvpajr9] {
    font-size: 0.74rem;
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
    text-align: right;
}

.period-pills[b-puqgvpajr9] {
    display: flex;
    gap: 0.25rem;
    background: var(--color-surface-hover, #f2f4f7);
    border-radius: var(--radius-md);
    padding: 3px;
}
.period-pill[b-puqgvpajr9] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-subtle);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    transition: all var(--motion-base);
    white-space: nowrap;
    line-height: 1.3;
}
.period-pill:hover[b-puqgvpajr9] {
    color: var(--color-text);
    background: var(--color-surface);
}
.period-pill.active[b-puqgvpajr9] {
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}

.ops-health-bars[b-puqgvpajr9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}
@media (max-width: 767.98px) {
    .ops-health-bars[b-puqgvpajr9] { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

.ops-meter[b-puqgvpajr9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.ops-meter-head[b-puqgvpajr9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}
.ops-meter-title[b-puqgvpajr9] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-subtle);
}
.ops-meter-pct[b-puqgvpajr9] {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--color-text);
}
.ops-meter-track[b-puqgvpajr9] {
    height: 6px;
    background: var(--color-surface-hover);
    border-radius: 999px;
    overflow: hidden;
}
.ops-meter-fill[b-puqgvpajr9] {
    height: 100%;
    border-radius: 999px;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
    min-width: 0;
}
.ops-meter-success .ops-meter-pct[b-puqgvpajr9]  { color: var(--color-success); }
.ops-meter-success .ops-meter-fill[b-puqgvpajr9] { background: var(--color-success); }
.ops-meter-warning .ops-meter-pct[b-puqgvpajr9]  { color: var(--color-warning); }
.ops-meter-warning .ops-meter-fill[b-puqgvpajr9] { background: var(--color-warning); }
.ops-meter-danger  .ops-meter-pct[b-puqgvpajr9]  { color: var(--color-danger); }
.ops-meter-danger  .ops-meter-fill[b-puqgvpajr9] { background: var(--color-danger); }

.ops-meter-foot[b-puqgvpajr9] {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.ops-meter-foot span + span[b-puqgvpajr9] {
    margin-left: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────
   6. PAINEL INFERIOR — problemas + atividade
   Layout 3:2 — problemas (tabela com dados densos) recebe mais espaço
   que a timeline da atividade.
   ───────────────────────────────────────────────────────────────────── */
.dashboard-grid[b-puqgvpajr9] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 1199.98px) {
    .dashboard-grid[b-puqgvpajr9] { grid-template-columns: minmax(0, 1fr); }
}
/* Altura mínima estabiliza a primeira fold quando os dois painéis estão
   em estados muito diferentes (ex.: 0 problemas + 10 atividades). Sem
   isso, o painel vazio "encolhe" e o de atividade fica muito mais alto,
   produzindo um L visual desbalanceado.
   Reduzida de 320→260px depois da compactação do hero e da barra de
   ações: o operador ganha cerca de 200-260px adicionais no first-fold,
   e os painéis param de "vazar" abaixo da viewport em 1920×1080 com
   barras internas (tabela de problemas, lista de atividade) cortadas. */
.dashboard-grid > .panel[b-puqgvpajr9] {
    min-height: 260px;
}
@media (max-width: 575.98px) {
    .dashboard-grid > .panel[b-puqgvpajr9] { min-height: 0; }
}

/* Painel com alarme — borda esquerda vermelha + header tonal. */
.panel-alarm[b-puqgvpajr9] {
    border-left: 3px solid var(--color-danger);
    box-shadow: var(--shadow-sm);
}
.panel-alarm .panel-header[b-puqgvpajr9] {
    background: var(--color-danger-soft);
    border-bottom-color: #fecaca;
}
.panel-alarm .panel-title[b-puqgvpajr9] {
    color: var(--color-danger);
}
.panel-title-count[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.45rem;
    padding: 0.1rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-danger);
    background: rgba(180, 35, 24, 0.14);
    border-radius: 999px;
    min-width: 1.6em;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* DeadLetter rows — severidade máxima ganha tint extra */
[b-puqgvpajr9] .row-deadletter > td {
    background: rgba(180, 35, 24, 0.045);
}
[b-puqgvpajr9] .row-deadletter:hover > td {
    background: rgba(180, 35, 24, 0.085) !important;
}

/* Footer do painel de problemas — destaca o endpoint que mais falha.
   Aparece sem fundo colorido pra não competir com a tabela acima. */
.panel-foot[b-puqgvpajr9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    flex-wrap: wrap;
}
.panel-foot-label[b-puqgvpajr9] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-subtle);
}
.panel-foot-link[b-puqgvpajr9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
}
.panel-foot-link:hover[b-puqgvpajr9] {
    color: var(--color-accent);
    text-decoration: none;
}
.panel-foot-count[b-puqgvpajr9] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-danger);
    background: rgba(180, 35, 24, 0.1);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   7. ACTIVITY LIST — timeline rail (preservado do design anterior).
   O trilho vertical em 30px passa POR DENTRO das status pills (que têm
   bg sólido), criando o efeito de "dots conectados" naturalmente.
   ───────────────────────────────────────────────────────────────────── */
.activity-list[b-puqgvpajr9] {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Viewport-aware: em 1080p a lista fica ~320px (sobra para o tabela
       de problemas acima na mesma fold); em 1366×768 contrai para ~270px;
       em telas grandes o teto de 380px evita que a timeline domine. */
    max-height: clamp(240px, 36vh, 380px);
    overflow-y: auto;
    position: relative;
}
.activity-list[b-puqgvpajr9]::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
    pointer-events: none;
    z-index: 0;
}

[b-puqgvpajr9] .activity-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-5);
    position: relative;
    z-index: 1;
    transition: background var(--motion-fast);
}
[b-puqgvpajr9] .activity-item:hover { background: var(--color-surface-muted); }

[b-puqgvpajr9] .activity-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
[b-puqgvpajr9] .activity-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
[b-puqgvpajr9] .activity-title a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
[b-puqgvpajr9] .activity-title a:hover { color: var(--color-accent); text-decoration: none; }

[b-puqgvpajr9] .activity-direction {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-subtle);
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}

[b-puqgvpajr9] .activity-meta {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
[b-puqgvpajr9] .activity-sep { color: var(--color-border-strong); }
[b-puqgvpajr9] .activity-corr {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
}

/* ─────────────────────────────────────────────────────────────────────
   8. FOCO VISÍVEL — alinhado ao token --ring global da app (sombra
   de 3px teal-soft, sem cortar bordas com outline). Aparece somente
   em :focus-visible para navegação por teclado, preservando o estado
   limpo do clique do mouse.
   Cobre TODOS os elementos interativos customizados criados aqui;
   <button>/<a>/<select> nativos com classes Bootstrap (.btn, .form-select)
   já recebem o focus do app.css global.
   ───────────────────────────────────────────────────────────────────── */
.period-pill:focus-visible[b-puqgvpajr9],
.ops-filters-clear:focus-visible[b-puqgvpajr9],
.ops-filters-select:focus-visible[b-puqgvpajr9],
.ops-hero-cta:focus-visible[b-puqgvpajr9],
.ops-actions-pri-cta:focus-visible[b-puqgvpajr9],
.ops-actions-more:focus-visible[b-puqgvpajr9],
.ops-action-mini-cta:focus-visible[b-puqgvpajr9],
.ops-refresh-toast-retry:focus-visible[b-puqgvpajr9],
.ops-refresh-toast-dismiss:focus-visible[b-puqgvpajr9],
.ops-kpi-link:focus-visible[b-puqgvpajr9],
.ops-kpi-chip:focus-visible[b-puqgvpajr9],
.panel-foot-link:focus-visible[b-puqgvpajr9] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(13, 148, 136, 0.22));
    border-radius: var(--radius-md);
}
/* Foco em chips com border-radius pill — preserva a forma redonda. */
.ops-kpi-chip:focus-visible[b-puqgvpajr9],
.panel-foot-count:focus-visible[b-puqgvpajr9] {
    border-radius: 999px;
}
/* Foco em links sem fundo (kpi-link com underline dashed) — eleva o
   contraste com sombra um pouco mais sutil para não competir com texto. */
.ops-kpi-link:focus-visible[b-puqgvpajr9] {
    box-shadow: var(--ring-soft, 0 0 0 2px rgba(13, 148, 136, 0.18));
    border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────────────────────────────────
   9. KEYFRAMES + reduced motion
   ───────────────────────────────────────────────────────────────────── */
@keyframes ops-pulse-b-puqgvpajr9 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
    .health-pill-dot[b-puqgvpajr9],
    .live-indicator-dot[b-puqgvpajr9],
    .ops-section-title[b-puqgvpajr9]::before,
    .ops-meter-fill[b-puqgvpajr9],
    .ops-skeleton .skeleton-block[b-puqgvpajr9],
    .ops-hero-cta[b-puqgvpajr9],
    .ops-actions-pri-cta[b-puqgvpajr9],
    .ops-action-mini-cta[b-puqgvpajr9],
    .ops-actions-more[b-puqgvpajr9],
    .ops-kpi[b-puqgvpajr9],
    .ops-action-mini[b-puqgvpajr9] {
        animation: none !important;
        transition: none !important;
    }
    /* Anula transform de hover em motion-reduce — preserva a interação
       (cor/borda) mas sem o salto vertical. */
    .ops-hero-cta:hover[b-puqgvpajr9],
    .ops-actions-pri-cta:hover[b-puqgvpajr9] {
        transform: none !important;
    }
}
/* /Components/Pages/Documentation/Index.razor.rz.scp.css */
/* =====================================================================
   Documentação — guia conciso para usuários (namespace doc-*).
   Layout limpo e escaneável: cards e blocos curtos, sem manual longo.
   Usa exclusivamente os tokens de design do app.css.
   ===================================================================== */

.doc-page[b-yreu0rhrk5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 920px;
    padding-bottom: var(--space-10);
}

/* ── Resumo inicial ──────────────────────────────────────────────── */
.doc-lead[b-yreu0rhrk5] {
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
}
.doc-lead-eyebrow[b-yreu0rhrk5] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}
.doc-lead-text[b-yreu0rhrk5] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
}
.doc-lead-text strong[b-yreu0rhrk5] { font-weight: 600; }

/* ── Seções genéricas ────────────────────────────────────────────── */
.doc-section[b-yreu0rhrk5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.doc-section-title[b-yreu0rhrk5] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.005em;
}
.doc-section-lead[b-yreu0rhrk5] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ── Como funciona em 3 passos ───────────────────────────────────── */
.doc-steps[b-yreu0rhrk5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}
.doc-step[b-yreu0rhrk5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
}
.doc-step-num[b-yreu0rhrk5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.875rem;
    flex: 0 0 auto;
}
.doc-step-title[b-yreu0rhrk5] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}
.doc-step p[b-yreu0rhrk5] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ── Conceitos principais ────────────────────────────────────────── */
.doc-concepts[b-yreu0rhrk5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}
.doc-concept[b-yreu0rhrk5] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.doc-concept dt[b-yreu0rhrk5] {
    margin: 0 0 var(--space-1);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}
.doc-concept dd[b-yreu0rhrk5] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ── Primeiro teste (fluxo numerado) ─────────────────────────────── */
.doc-flow[b-yreu0rhrk5] {
    list-style: none;
    counter-reset: doc-flow;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.doc-flow li[b-yreu0rhrk5] {
    counter-increment: doc-flow;
    position: relative;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-10) + var(--space-1));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.doc-flow li[b-yreu0rhrk5]::before {
    content: counter(doc-flow);
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
}
.doc-flow li strong[b-yreu0rhrk5] { color: var(--color-text); font-weight: 600; }

/* ── Onde acompanhar problemas (cards-link) ──────────────────────── */
.doc-where[b-yreu0rhrk5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.doc-where-card[b-yreu0rhrk5] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--motion-fast),
                box-shadow var(--motion-fast),
                transform var(--motion-fast);
}
.doc-where-card:hover[b-yreu0rhrk5] {
    text-decoration: none;
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.doc-where-icon[b-yreu0rhrk5] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}
.doc-where-icon svg[b-yreu0rhrk5] { width: 18px; height: 18px; }
.doc-where-body[b-yreu0rhrk5] { min-width: 0; }
.doc-where-title[b-yreu0rhrk5] {
    margin: 0 0 0.15rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}
.doc-where-desc[b-yreu0rhrk5] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* ── Segurança básica (callout) ──────────────────────────────────── */
.doc-callout[b-yreu0rhrk5] {
    display: flex;
    gap: var(--space-3);
    background: var(--color-warning-soft);
    border: 1px solid #fec84b;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}
.doc-callout-icon[b-yreu0rhrk5] {
    flex: 0 0 auto;
    color: var(--color-warning);
    margin-top: 2px;
}
.doc-callout ul[b-yreu0rhrk5] {
    margin: 0;
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.5;
}
.doc-callout strong[b-yreu0rhrk5] { font-weight: 600; }

/* ── Quando usar o chat com IA ───────────────────────────────────── */
.doc-ia[b-yreu0rhrk5] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
}
.doc-ia p[b-yreu0rhrk5] {
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.doc-ia ul[b-yreu0rhrk5] {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.5;
}

/* ── Próximo passo recomendado (CTA editorial) ───────────────────── */
.doc-next[b-yreu0rhrk5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    background: var(--color-ink);
    color: var(--color-paper);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    background-image:
        radial-gradient(circle at 85% 20%, rgba(13, 148, 136, 0.28) 0%, transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(103, 232, 168, 0.14) 0%, transparent 45%);
}
.doc-next-eyebrow[b-yreu0rhrk5] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-phosphor);
    margin-bottom: var(--space-2);
}
.doc-next-text p[b-yreu0rhrk5] {
    margin: 0;
    max-width: 48ch;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(250, 248, 243, 0.85);
}
.doc-next-actions[b-yreu0rhrk5] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex: 0 0 auto;
}
/* Botão secundário sobre fundo escuro — ghost claro para contraste. */
.doc-next-ghost[b-yreu0rhrk5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--color-paper);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--motion-fast), border-color var(--motion-fast);
}
.doc-next-ghost:hover[b-yreu0rhrk5] {
    text-decoration: none;
    color: var(--color-paper);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ── Responsividade ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .doc-steps[b-yreu0rhrk5] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .doc-concepts[b-yreu0rhrk5],
    .doc-where[b-yreu0rhrk5] { grid-template-columns: minmax(0, 1fr); }

    .doc-next[b-yreu0rhrk5] { flex-direction: column; align-items: stretch; }
    .doc-next-actions[b-yreu0rhrk5] { width: 100%; }
    .doc-next-actions .btn[b-yreu0rhrk5],
    .doc-next-ghost[b-yreu0rhrk5] { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .doc-where-card[b-yreu0rhrk5],
    .doc-where-card:hover[b-yreu0rhrk5] { transform: none; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Landing Page — V2 "Dark / Developer Cockpit"
   Tema escuro full-bleed. Tokens da marca (Geist / Geist Mono / teal),
   classes prefixadas .ld- para não colidir com Bootstrap/app.css globais,
   keyframes prefixadas ld- (keyframes NÃO são isoladas pelo scoped CSS).
   O full-bleed/escuro do shell é destravado em wwwroot/app.css (.landing-mode).
   ═══════════════════════════════════════════════════════════════════════ */

.landing-page[b-ouooletrq1] {
    /* Paleta local (dark) — teal/hover vêm dos tokens globais da marca. */
    --ld-teal: var(--color-accent);
    --ld-teal-hover: var(--color-accent-hover);
    --ld-mint: #5eead4;
    --ld-glow: rgba(13, 148, 136, 0.16);
    --ld-base: #0f1117;
    --ld-panel: #16181f;
    --ld-bd: rgba(255, 255, 255, 0.08);
    --ld-bd-strong: rgba(255, 255, 255, 0.12);
    --ld-fg: #ffffff;
    --ld-fg-2: rgba(255, 255, 255, 0.72);
    --ld-fg-3: rgba(255, 255, 255, 0.45);
    --ld-green: #12b76a;
    --ld-warn: #fec84b;
    --ld-bad: #fda29b;
    --ld-info: #2e90fa;
    --ld-mono: var(--font-mono);
    --ld-maxw: 1140px;

    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow-x: clip; /* 'clip' (não 'hidden') não cria scroll-container → não quebra o sticky */
    font-family: var(--font-sans);
    background: var(--ld-base);
    color: var(--ld-fg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Atmosfera — glows teal + textura de pontos, fixos no viewport, atrás do conteúdo. */
.landing-page[b-ouooletrq1]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 72% -8%, var(--ld-glow), transparent 60%),
        radial-gradient(700px 480px at 8% 6%, rgba(94, 234, 212, 0.06), transparent 60%);
}
.landing-page[b-ouooletrq1]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.landing-page a[b-ouooletrq1] { color: inherit; text-decoration: none; }
.landing-page [b-ouooletrq1]::selection { background: rgba(94, 234, 212, 0.28); }

/* Offset para âncoras não colarem sob a nav fixa. */
.landing-page [id][b-ouooletrq1] { scroll-margin-top: 80px; }

.ld-wrap[b-ouooletrq1] {
    max-width: var(--ld-maxw);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* ── Foco visível (acessibilidade sobre fundo escuro) ─────────────────── */
.landing-page :where(a, button, summary, input, [tabindex]:not([tabindex="-1"])):focus-visible[b-ouooletrq1] {
    outline: 2px solid var(--ld-mint);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ── Wordmark ─────────────────────────────────────────────────────────── */
.ld-mark[b-ouooletrq1] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.02em;
    line-height: 1;
}
/* Marca oficial (mesmo glifo do favicon.svg): quadrado teal + rota branca.
   drop-shadow segue o formato arredondado (melhor que box-shadow no quadrado). */
.ld-mark-svg[b-ouooletrq1] {
    width: 28px;
    height: 28px;
    flex: none;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(13, 148, 136, 0.35));
}
.ld-w[b-ouooletrq1] { color: #fff; }
.ld-fy[b-ouooletrq1] { color: var(--ld-mint); }
.ld-dot[b-ouooletrq1] { color: var(--ld-teal); }

/* ── Nav (translúcida fixa) ───────────────────────────────────────────── */
.ld-nav[b-ouooletrq1] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(15, 17, 23, 0.82);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--ld-bd);
}
.ld-nav-in[b-ouooletrq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.ld-nav-links[b-ouooletrq1] {
    display: flex;
    align-items: center;
    gap: 30px;
}
.ld-anchor[b-ouooletrq1] {
    color: var(--ld-fg-2);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.18s ease;
}
.ld-anchor:hover[b-ouooletrq1] { color: #fff; }
.ld-nav-cta[b-ouooletrq1] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ld-login[b-ouooletrq1] {
    color: var(--ld-fg-2);
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.18s ease;
}
.ld-login:hover[b-ouooletrq1] { color: #fff; }

/* ── Botões ───────────────────────────────────────────────────────────── */
.ld-btn[b-ouooletrq1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 10px;
    padding: 11px 18px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}
.ld-btn:active[b-ouooletrq1] { transform: translateY(1px); }
.ld-btn-primary[b-ouooletrq1] {
    background: var(--ld-teal);
    color: #fff;
    box-shadow: 0 10px 26px -10px var(--ld-glow);
}
.ld-btn-primary:hover[b-ouooletrq1] {
    background: var(--ld-teal-hover);
    box-shadow: 0 14px 32px -8px var(--ld-glow);
}
.ld-btn-ghost[b-ouooletrq1] {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    border-color: var(--ld-bd-strong);
}
.ld-btn-ghost:hover[b-ouooletrq1] {
    border-color: rgba(94, 234, 212, 0.4);
    background: rgba(255, 255, 255, 0.05);
}
.ld-btn-outline[b-ouooletrq1] {
    background: transparent;
    color: #fff;
    border-color: var(--ld-bd-strong);
}
.ld-btn-outline:hover[b-ouooletrq1] {
    border-color: rgba(94, 234, 212, 0.45);
    background: rgba(255, 255, 255, 0.04);
}
.ld-btn-lg[b-ouooletrq1] { padding: 14px 24px; font-size: 0.97rem; }

/* ── Reveal no load ───────────────────────────────────────────────────── */
.ld-reveal[b-ouooletrq1] {
    opacity: 0;
    transform: translateY(16px);
    animation: ld-rise-b-ouooletrq1 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes ld-rise-b-ouooletrq1 { to { opacity: 1; transform: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.ld-hero[b-ouooletrq1] { padding: 72px 0 84px; position: relative; }
.ld-hero-grid[b-ouooletrq1] {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}
.ld-badge[b-ouooletrq1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--ld-mint);
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.22);
    padding: 6px 13px;
    border-radius: 999px;
    margin-bottom: 24px;
}
.ld-pulse[b-ouooletrq1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ld-mint);
    box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.55);
    animation: ld-pulse-b-ouooletrq1 2.2s infinite;
}
@keyframes ld-pulse-b-ouooletrq1 {
    0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(94, 234, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
}
.ld-hero h1[b-ouooletrq1] {
    font-size: clamp(30px, 5.4vw, 56px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 22px;
}
.ld-accent[b-ouooletrq1] { color: var(--ld-mint); }
.ld-lead[b-ouooletrq1] {
    font-size: 1.12rem;
    color: var(--ld-fg-2);
    max-width: 540px;
    margin: 0 0 32px;
    line-height: 1.55;
}
.ld-hero-cta[b-ouooletrq1] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.ld-hero-meta[b-ouooletrq1] {
    margin: 20px 0 0;
    font-size: 0.85rem;
    color: var(--ld-fg-3);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ld-dotsep[b-ouooletrq1] { color: rgba(255, 255, 255, 0.25); }

/* ── Terminal ─────────────────────────────────────────────────────────── */
.ld-term[b-ouooletrq1] {
    background: linear-gradient(180deg, #181b23, #13151c);
    border: 1px solid var(--ld-bd-strong);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(94, 234, 212, 0.05), 0 0 60px -20px var(--ld-glow);
    position: relative;
}
.ld-term[b-ouooletrq1]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    background: radial-gradient(400px 200px at 80% 0%, rgba(94, 234, 212, 0.07), transparent 70%);
}
.ld-term-bar[b-ouooletrq1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--ld-bd);
    background: rgba(255, 255, 255, 0.02);
}
.ld-tdot[b-ouooletrq1] { width: 11px; height: 11px; border-radius: 50%; }
.ld-tr[b-ouooletrq1] { background: #f04438aa; }
.ld-ty[b-ouooletrq1] { background: #f79009aa; }
.ld-tg[b-ouooletrq1] { background: #12b76aaa; }
.ld-term-title[b-ouooletrq1] {
    margin-left: 8px;
    font-family: var(--ld-mono);
    font-size: 0.75rem;
    color: var(--ld-fg-3);
}
.ld-term-body[b-ouooletrq1] {
    padding: 20px 20px 16px;
    font-family: var(--ld-mono);
    font-size: 0.84rem;
    line-height: 1.85;
    color: var(--ld-fg-2);
}
.ld-ln[b-ouooletrq1] {
    opacity: 0;
    transform: translateY(6px);
    animation: ld-lnIn-b-ouooletrq1 0.45s ease forwards;
    white-space: pre-wrap;
    word-break: break-word;
}
@keyframes ld-lnIn-b-ouooletrq1 { to { opacity: 1; transform: none; } }
.ld-c-prompt[b-ouooletrq1] { color: var(--ld-mint); }
.ld-c-verb[b-ouooletrq1] { color: var(--ld-info); }
.ld-c-key[b-ouooletrq1] { color: var(--ld-mint); }
.ld-c-str[b-ouooletrq1] { color: #fff; }
.ld-c-num[b-ouooletrq1] { color: var(--ld-warn); }
.ld-c-arrow[b-ouooletrq1] { color: var(--ld-teal); font-weight: 600; }
.ld-c-map[b-ouooletrq1] { color: var(--ld-mint); font-weight: 600; }
.ld-c-ok[b-ouooletrq1] { color: var(--ld-green); font-weight: 600; }
.ld-c-muted[b-ouooletrq1] { color: var(--ld-fg-3); }
.ld-c-dim[b-ouooletrq1] { color: rgba(255, 255, 255, 0.3); }
.ld-ln-1[b-ouooletrq1] { animation-delay: 0.35s; }
.ld-ln-2[b-ouooletrq1] { animation-delay: 0.95s; }
.ld-ln-3[b-ouooletrq1] { animation-delay: 1.6s; }
.ld-ln-4[b-ouooletrq1] { animation-delay: 2.25s; }
.ld-ln-5[b-ouooletrq1] { animation-delay: 2.95s; }
.ld-cursor[b-ouooletrq1] {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--ld-mint);
    vertical-align: -2px;
    margin-left: 3px;
    opacity: 0;
    animation-name: ld-appear-b-ouooletrq1, ld-blink-b-ouooletrq1;
    animation-duration: 0.01s, 1.05s;
    animation-delay: 3.3s, 3.3s;
    animation-timing-function: step-end, step-end;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
}
@keyframes ld-appear-b-ouooletrq1 { to { opacity: 1; } }
@keyframes ld-blink-b-ouooletrq1 { 50% { opacity: 0; } }
.ld-term-stats[b-ouooletrq1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ld-bd);
    opacity: 0;
    animation: ld-rise-b-ouooletrq1 0.6s ease forwards;
    animation-delay: 3.4s;
}
.ld-stat[b-ouooletrq1] {
    padding: 13px 16px;
    text-align: center;
    border-right: 1px solid var(--ld-bd);
}
.ld-stat:last-child[b-ouooletrq1] { border-right: none; }
.ld-stat-lbl[b-ouooletrq1] {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-fg-3);
    margin-bottom: 3px;
}
.ld-stat-val[b-ouooletrq1] {
    font-family: var(--ld-mono);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ld-s-ok .ld-stat-val[b-ouooletrq1] { color: var(--ld-mint); }
.ld-s-bad .ld-stat-val[b-ouooletrq1] { color: var(--ld-bad); }

/* ── Seções ───────────────────────────────────────────────────────────── */
.ld-sec[b-ouooletrq1] { padding: 84px 0; position: relative; }
.ld-sec-tight[b-ouooletrq1] { padding-top: 0; }
.ld-sec-head[b-ouooletrq1] { margin-bottom: 48px; max-width: 640px; }
.ld-kicker[b-ouooletrq1] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ld-teal);
    margin-bottom: 12px;
}
.ld-sec-head h2[b-ouooletrq1] {
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0;
}
.ld-sec-head p[b-ouooletrq1] { color: var(--ld-fg-2); font-size: 1.03rem; margin: 12px 0 0; }

/* Como funciona */
.ld-steps[b-ouooletrq1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ld-step[b-ouooletrq1] {
    background: var(--ld-panel);
    border: 1px solid var(--ld-bd);
    border-radius: 16px;
    padding: 28px 26px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ld-step:hover[b-ouooletrq1] {
    transform: translateY(-4px);
    border-color: rgba(94, 234, 212, 0.3);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
.ld-num[b-ouooletrq1] {
    font-family: var(--ld-mono);
    font-size: 0.81rem;
    font-weight: 700;
    color: var(--ld-teal);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(94, 234, 212, 0.25);
    border-radius: 10px;
    background: rgba(94, 234, 212, 0.06);
    margin-bottom: 18px;
}
.ld-step h3[b-ouooletrq1] { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.ld-step p[b-ouooletrq1] { color: var(--ld-fg-2); font-size: 0.9rem; line-height: 1.55; margin: 0; }

/* Diferenciais */
.ld-feats[b-ouooletrq1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ld-feat[b-ouooletrq1] {
    background: var(--ld-panel);
    border: 1px solid var(--ld-bd);
    border-radius: 16px;
    padding: 26px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ld-feat:hover[b-ouooletrq1] {
    transform: translateY(-4px);
    border-color: rgba(94, 234, 212, 0.3);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
.ld-icon[b-ouooletrq1] {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, rgba(13, 148, 136, 0.25), rgba(13, 148, 136, 0.08));
    border: 1px solid rgba(94, 234, 212, 0.22);
    color: var(--ld-mint);
}
.ld-feat h3[b-ouooletrq1] { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 5px; }
.ld-feat p[b-ouooletrq1] { color: var(--ld-fg-2); font-size: 0.875rem; line-height: 1.5; margin: 0; }

/* ── Planos ───────────────────────────────────────────────────────────── */
.ld-plans[b-ouooletrq1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}
.ld-plan[b-ouooletrq1] {
    background: var(--ld-panel);
    border: 1px solid var(--ld-bd);
    border-radius: 18px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ld-plan:hover[b-ouooletrq1] {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px -30px rgba(0, 0, 0, 0.85);
}
.ld-plan-hl[b-ouooletrq1] {
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.25), 0 30px 70px -30px var(--ld-glow);
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.1), var(--ld-panel) 42%);
}
.ld-ribbon[b-ouooletrq1] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ld-teal);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 14px;
    border-radius: 999px;
    box-shadow: 0 8px 20px -8px var(--ld-glow);
    white-space: nowrap;
}
.ld-pname[b-ouooletrq1] { font-size: 0.94rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.ld-price[b-ouooletrq1] {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 12px 0 2px;
    font-variant-numeric: tabular-nums;
}
.ld-price small[b-ouooletrq1] { font-size: 0.94rem; font-weight: 600; color: var(--ld-fg-3); }
.ld-ptag[b-ouooletrq1] {
    font-size: 0.84rem;
    color: var(--ld-fg-2);
    margin-bottom: 6px;
    line-height: 1.45;
}
.ld-ppitch[b-ouooletrq1] {
    font-size: 0.8rem;
    color: var(--ld-fg-3);
    line-height: 1.45;
    margin: 0 0 16px;
}
.ld-plan-feats[b-ouooletrq1] {
    list-style: none;
    margin: 6px 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
}
.ld-plan-feats li[b-ouooletrq1] {
    font-size: 0.875rem;
    color: var(--ld-fg-2);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ld-plan-feats li svg[b-ouooletrq1] { flex: none; margin-top: 2px; color: var(--ld-mint); }
.ld-plan .ld-btn[b-ouooletrq1] { width: 100%; }
.ld-plan-caption[b-ouooletrq1] {
    text-align: center;
    color: var(--ld-fg-3);
    font-size: 0.8rem;
    margin: 24px auto 0;
    max-width: 680px;
    line-height: 1.5;
}

/* Fallback de planos (catálogo indisponível) */
.ld-plans-fallback[b-ouooletrq1] {
    background: var(--ld-panel);
    border: 1px solid var(--ld-bd);
    border-radius: 18px;
    padding: 36px 32px;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}
.ld-plans-fallback strong[b-ouooletrq1] { display: block; color: #fff; font-size: 1.1rem; margin-bottom: 10px; }
.ld-plans-fallback p[b-ouooletrq1] { color: var(--ld-fg-2); margin: 0 auto 22px; max-width: 520px; line-height: 1.55; }
.ld-plans-fallback .ld-hero-cta[b-ouooletrq1] { justify-content: center; }

/* ── Faixa de segurança ───────────────────────────────────────────────── */
.ld-secband[b-ouooletrq1] {
    border-top: 1px solid var(--ld-bd);
    border-bottom: 1px solid var(--ld-bd);
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.06), transparent);
}
.ld-secband-in[b-ouooletrq1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 24px;
    flex-wrap: wrap;
}
.ld-secband .ld-icon[b-ouooletrq1] { width: 40px; height: 40px; }
.ld-secband p[b-ouooletrq1] { color: var(--ld-fg-2); font-size: 0.94rem; line-height: 1.5; flex: 1; min-width: 280px; margin: 0; }
.ld-secband strong[b-ouooletrq1] { color: #fff; font-weight: 600; }

/* ── CTA final ────────────────────────────────────────────────────────── */
.ld-ctafinal[b-ouooletrq1] { text-align: center; padding: 96px 0; position: relative; }
.ld-ctafinal h2[b-ouooletrq1] {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0 0 14px;
}
.ld-ctafinal-sub[b-ouooletrq1] { color: var(--ld-fg-2); font-size: 0.97rem; margin: 0 0 28px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.ld-footer[b-ouooletrq1] {
    border-top: 1px solid var(--ld-bd);
    padding: 56px 0 40px;
    background: rgba(0, 0, 0, 0.18);
}
.ld-foot-grid[b-ouooletrq1] {
    display: grid;
    /* 3 colunas (marca + Produto + Conta). A coluna "Legal" está desabilitada
       no markup; ao reativá-la, volte para: 1.6fr 1fr 1fr 1fr. */
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 32px;
}
.ld-foot-brand p[b-ouooletrq1] { color: var(--ld-fg-3); font-size: 0.875rem; margin: 14px 0 0; max-width: 280px; line-height: 1.55; }
.ld-foot-col h4[b-ouooletrq1] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-fg-3);
    margin: 0 0 14px;
}
.ld-foot-col a[b-ouooletrq1] {
    display: block;
    color: var(--ld-fg-2);
    font-size: 0.875rem;
    margin-bottom: 10px;
    transition: color 0.18s ease;
}
.ld-foot-col a:hover[b-ouooletrq1] { color: #fff; }
.ld-foot-bot[b-ouooletrq1] {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--ld-bd);
    color: var(--ld-fg-3);
    font-size: 0.8rem;
}

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .ld-hero-grid[b-ouooletrq1] { grid-template-columns: 1fr; gap: 44px; }
    .ld-steps[b-ouooletrq1], .ld-feats[b-ouooletrq1], .ld-plans[b-ouooletrq1] { grid-template-columns: 1fr; }
    .ld-nav-links[b-ouooletrq1] { display: none; }
    .ld-foot-grid[b-ouooletrq1] { grid-template-columns: 1fr 1fr; }
    .ld-plan-hl[b-ouooletrq1] { order: -1; }
    .ld-hero[b-ouooletrq1] { padding: 44px 0 56px; }
    .ld-sec[b-ouooletrq1] { padding: 60px 0; }
    .ld-ctafinal[b-ouooletrq1] { padding: 72px 0; }
}

@media (max-width: 560px) {
    .ld-wrap[b-ouooletrq1] { padding: 0 18px; }
    .ld-foot-grid[b-ouooletrq1] { grid-template-columns: 1fr 1fr; gap: 26px; }
    .ld-foot-brand[b-ouooletrq1] { grid-column: 1 / -1; }
    .ld-hero-cta[b-ouooletrq1] { width: 100%; }
    .ld-hero-cta .ld-btn[b-ouooletrq1] { flex: 1 1 auto; }
    .ld-term-body[b-ouooletrq1] { padding: 16px 14px 12px; font-size: 0.78rem; line-height: 1.7; }
    .ld-stat[b-ouooletrq1] { padding: 11px 8px; }
    .ld-plan[b-ouooletrq1] { padding: 26px 22px; }
    .ld-nav-cta[b-ouooletrq1] { gap: 10px; }
    .ld-btn[b-ouooletrq1] { padding: 10px 15px; }
}

@media (max-width: 400px) {
    /* Mantém "Entrar" visível: aperta espaçamentos p/ os dois CTAs caberem */
    .ld-nav-cta[b-ouooletrq1] { gap: 8px; }
    .ld-login[b-ouooletrq1] { font-size: 0.85rem; }
    .ld-nav-cta .ld-btn[b-ouooletrq1] { padding: 9px 13px; font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ld-reveal[b-ouooletrq1], .ld-ln[b-ouooletrq1], .ld-term-stats[b-ouooletrq1], .ld-cursor[b-ouooletrq1], .ld-pulse[b-ouooletrq1] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/* /Components/Pages/IntegrationGroups/Details.razor.rz.scp.css */
/* =============================================================
   /integration-groups/{id} — Cockpit operacional de um grupo

   Estrutura: .app-workspace-page → cockpit header (fixo)
                                  → body com resumo + checklist + tabelas.
   Otimizado para 1920×1080. Header NUNCA rola — só o body.
   ============================================================= */

/* Utilitário visualmente oculto — reused dos demais módulos. */
.visually-hidden[b-voreqwyafc] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================
   Cockpit header (hero do grupo)
   ============================================================= */

.ig-cockpit[b-voreqwyafc] {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: .95rem 1.1rem 1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 3px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, .75rem);
    margin-bottom: var(--space-4, 1rem);
}

.ig-cockpit--state-ready[b-voreqwyafc]      { border-left-color: #16a34a; }
.ig-cockpit--state-attention[b-voreqwyafc]  { border-left-color: #f59e0b; }
.ig-cockpit--state-incomplete[b-voreqwyafc] { border-left-color: #3b82f6; }
.ig-cockpit--state-inactive[b-voreqwyafc]   { border-left-color: #94a3b8; }

.ig-cockpit--inactive[b-voreqwyafc] {
    background: var(--color-surface-subtle, #f8fafc);
}

.ig-cockpit--loading[b-voreqwyafc],
.ig-cockpit--missing[b-voreqwyafc] { padding: 1rem 1.1rem; }

/* ── Linha superior (voltar) ──────────────────────────────── */

.ig-cockpit-top[b-voreqwyafc] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ig-cockpit-back[b-voreqwyafc] {
    color: var(--color-text-secondary, #6b7280);
    text-decoration: none;
    padding: .15rem .35rem;
    font-size: .8rem;
}
.ig-cockpit-back:hover[b-voreqwyafc] { color: var(--color-primary, #0d9488); text-decoration: underline; }
.ig-cockpit-back:focus-visible[b-voreqwyafc] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Bloco principal: ícone + identidade ───────────────────── */

.ig-cockpit-main[b-voreqwyafc] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    min-width: 0;
}

.ig-cockpit-icon[b-voreqwyafc] {
    --ig-color: var(--color-surface-muted, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-md, .5rem);
    background: color-mix(in srgb, var(--ig-color) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ig-color) 35%, transparent);
    font-size: 1.65rem;
    flex-shrink: 0;
    line-height: 1;
}

.ig-cockpit-id[b-voreqwyafc] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.ig-cockpit-title-row[b-voreqwyafc] {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    min-width: 0;
}

.ig-cockpit-name[b-voreqwyafc] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text, #0f1117);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.ig-cockpit-desc[b-voreqwyafc] {
    margin: 0;
    color: var(--color-text-secondary, #6b7280);
    font-size: .9rem;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem;
}

.ig-cockpit-reason[b-voreqwyafc] {
    color: var(--color-text-secondary, #6b7280);
    font-size: .85rem;
    font-weight: 500;
}
.ig-cockpit-reason-sep[b-voreqwyafc] {
    color: var(--color-text-tertiary, #9ca3af);
    margin-right: .15rem;
}

/* Pílula de estado consolidado — mesma identidade visual do
   chip de Index, mas redeclarada aqui por causa do escopo Blazor
   (cada .razor.css gera seletores com sufixo único). */
.ig-state-pill[b-voreqwyafc] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    padding: .3rem .6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}
.ig-state-pill-icon[b-voreqwyafc] {
    font-weight: 800;
    font-size: .8rem;
    line-height: 1;
}
.ig-state-pill--ready[b-voreqwyafc] {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .25);
}
.ig-state-pill--attention[b-voreqwyafc] {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3);
}
.ig-state-pill--incomplete[b-voreqwyafc] {
    background: rgba(59, 130, 246, .12);
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .25);
}
.ig-state-pill--inactive[b-voreqwyafc] {
    background: rgba(148, 163, 184, .15);
    color: #475569;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .3);
}

/* ── Ações do cockpit ──────────────────────────────────────── */

.ig-cockpit-actions[b-voreqwyafc] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .25rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--color-border, #e5e7eb);
}

/* "Desativar grupo" — estilo link, propositalmente discreto e
   empurrado para a direita. Reversível, raramente desejado, não
   compete com as ações primárias (Editar, Novo endpoint, etc.). */
.ig-cockpit-toggle[b-voreqwyafc] {
    color: var(--color-text-tertiary, #9ca3af);
    text-decoration: none;
    margin-left: auto;
    padding: .25rem .5rem;
    font-size: .8rem;
}
.ig-cockpit-toggle:hover:not(:disabled)[b-voreqwyafc] {
    color: #b45309;
    text-decoration: underline;
}
.ig-cockpit-toggle:focus-visible[b-voreqwyafc] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =============================================================
   Resumo operacional (4-up)
   ============================================================= */

.ig-summary[b-voreqwyafc] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: var(--space-4, 1rem);
}

.ig-summary-card[b-voreqwyafc] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, .75rem);
    padding: .85rem .95rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.ig-summary-head[b-voreqwyafc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.ig-summary-label[b-voreqwyafc] {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-secondary, #6b7280);
}

.ig-summary-more[b-voreqwyafc] {
    font-size: .72rem;
    font-weight: 500;
    color: var(--color-text-tertiary, #9ca3af);
    text-decoration: none;
}
.ig-summary-more:hover[b-voreqwyafc] { color: var(--color-primary, #0d9488); text-decoration: underline; }
.ig-summary-more:focus-visible[b-voreqwyafc] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
    border-radius: 2px;
}

.ig-summary-value[b-voreqwyafc] {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
}

.ig-summary-main[b-voreqwyafc] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text, #0f1117);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    display: inline-flex;
    align-items: baseline;
}
.ig-summary-main--muted[b-voreqwyafc] {
    color: var(--color-text-tertiary, #9ca3af);
    font-weight: 500;
}
.ig-summary-main--time[b-voreqwyafc] {
    font-size: 1.2rem;
}

.ig-summary-sep[b-voreqwyafc] {
    color: var(--color-text-tertiary, #9ca3af);
    font-weight: 400;
    font-size: .8em;
    margin: 0 .08rem;
}
.ig-summary-total[b-voreqwyafc] {
    color: var(--color-text-secondary, #6b7280);
    font-weight: 500;
    font-size: .75em;
}
.ig-summary-unit[b-voreqwyafc] {
    font-size: .75rem;
    color: var(--color-text-secondary, #6b7280);
    font-weight: 500;
}

.ig-summary-sub[b-voreqwyafc] {
    font-size: .75rem;
    color: var(--color-text-secondary, #6b7280);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    font-variant-numeric: tabular-nums;
}
.ig-summary-sub--muted[b-voreqwyafc] {
    color: var(--color-text-tertiary, #9ca3af);
}
.ig-summary-dot[b-voreqwyafc] { opacity: .4; }

/* Chips de tokens no card de resumo (mesma família visual do
   Index, redeclarados para o escopo desta página). */
.ig-token-chip[b-voreqwyafc] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
    padding: .2rem .45rem;
    border-radius: var(--radius-sm, .25rem);
    font-variant-numeric: tabular-nums;
}
.ig-token-chip--valid[b-voreqwyafc]    { background: rgba(22, 163, 74, .12); color: #15803d; }
.ig-token-chip--failed[b-voreqwyafc]   { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.ig-token-chip--untested[b-voreqwyafc] { background: rgba(148, 163, 184, .18); color: #475569; }
.ig-token-chip--zero[b-voreqwyafc] {
    background: var(--color-surface-muted, #f1f5f9);
    color: var(--color-text-tertiary, #9ca3af);
}

/* =============================================================
   Checklist de prontidão
   ============================================================= */

.ig-checklist-panel[b-voreqwyafc] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, .75rem);
    padding: .85rem 1rem 1rem;
    margin-bottom: var(--space-4, 1rem);
}

.ig-checklist-head[b-voreqwyafc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .65rem;
}

.ig-checklist-title[b-voreqwyafc] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #0f1117);
}

.ig-checklist-progress[b-voreqwyafc] {
    font-size: .75rem;
    color: var(--color-text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}

.ig-checklist[b-voreqwyafc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.ig-check[b-voreqwyafc] {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, .5rem);
    background: var(--color-surface-subtle, #f8fafc);
}

.ig-check-icon[b-voreqwyafc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
    flex-shrink: 0;
}

.ig-check--ok .ig-check-icon[b-voreqwyafc] {
    background: rgba(22, 163, 74, .15);
    color: #15803d;
}
.ig-check--warn .ig-check-icon[b-voreqwyafc] {
    background: rgba(245, 158, 11, .18);
    color: #b45309;
}

/* Faixa colorida fina à esquerda — reforça status sem ser único veículo. */
.ig-check--ok[b-voreqwyafc]   { border-left: 3px solid #16a34a; }
.ig-check--warn[b-voreqwyafc] { border-left: 3px solid #f59e0b; }

.ig-check-body[b-voreqwyafc] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.ig-check-title[b-voreqwyafc] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text, #0f1117);
    line-height: 1.2;
}

.ig-check-detail[b-voreqwyafc] {
    font-size: .75rem;
    color: var(--color-text-secondary, #6b7280);
    line-height: 1.3;
}

.ig-check-action[b-voreqwyafc] {
    white-space: nowrap;
}

/* =============================================================
   Cabeçalhos de seções (Endpoints / Mapeamentos / Tokens)
   ============================================================= */

.ig-section-head[b-voreqwyafc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.ig-section-actions[b-voreqwyafc] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.ig-mini-table[b-voreqwyafc] {
    /* Já existe estilo global em .table-compact; aqui apenas
       suavizamos a borda interna para combinar com os cards
       acima e dar um respiro maior nas linhas. */
}
.ig-mini-table th[b-voreqwyafc] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-secondary, #6b7280);
    font-weight: 600;
}
.ig-mini-table td[b-voreqwyafc] { vertical-align: middle; }

/* =============================================================
   Informações técnicas (recolhível)
   ============================================================= */

.ig-tech[b-voreqwyafc] {
    margin-top: var(--space-3, .75rem);
    padding: 0;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, .75rem);
    overflow: hidden;
}

.ig-tech-summary[b-voreqwyafc] {
    cursor: pointer;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    user-select: none;
    list-style: none;
}
/* Esconde o marker padrão (varia por navegador) e adiciona um chevron. */
.ig-tech-summary[b-voreqwyafc]::-webkit-details-marker { display: none; }
.ig-tech-summary[b-voreqwyafc]::before {
    content: "›";
    font-size: 1rem;
    color: var(--color-text-tertiary, #9ca3af);
    transition: transform .12s ease;
    flex-shrink: 0;
}
.ig-tech[open] > .ig-tech-summary[b-voreqwyafc]::before { transform: rotate(90deg); }

.ig-tech-summary:hover[b-voreqwyafc] {
    background: var(--color-surface-subtle, #f8fafc);
}
.ig-tech-summary:focus-visible[b-voreqwyafc] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: -2px;
}

.ig-tech-summary-label[b-voreqwyafc] {
    font-weight: 600;
    color: var(--color-text, #0f1117);
    font-size: .9rem;
    margin-right: auto;
    margin-left: .5rem;
}

.ig-tech-grid[b-voreqwyafc] {
    display: grid;
    grid-template-columns: minmax(8rem, 9rem) 1fr;
    column-gap: 1rem;
    row-gap: .35rem;
    margin: 0;
}
.ig-tech-grid > dt[b-voreqwyafc] {
    color: var(--color-text-secondary, #6b7280);
    font-size: .8rem;
    font-weight: 500;
}
.ig-tech-grid > dd[b-voreqwyafc] {
    margin: 0;
    font-size: .85rem;
    color: var(--color-text, #0f1117);
    word-break: break-all;
}

.ig-tech-color-swatch[b-voreqwyafc] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid var(--color-border, #e5e7eb);
}

/* =============================================================
   Tokens — cards compactos no lugar da tabela larga
   ============================================================= */

.ig-token-cards[b-voreqwyafc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 1920×1080: 2 colunas confortáveis (cada card ~520–620px de largura).
       Em larguras intermediárias degrada para 1 coluna naturalmente. */
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: .85rem;
    align-items: stretch;
}

.ig-token-card[b-voreqwyafc] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem .95rem .8rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 3px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, .75rem);
    min-width: 0;
}

/* Faixa colorida à esquerda — reforça a saúde sem ser único veículo. */
.ig-token-card--valid[b-voreqwyafc]      { border-left-color: #16a34a; }
.ig-token-card--expired[b-voreqwyafc]    { border-left-color: #f59e0b; }
.ig-token-card--failed[b-voreqwyafc]     { border-left-color: #dc2626; }
.ig-token-card--not-tested[b-voreqwyafc] { border-left-color: #3b82f6; }
.ig-token-card--inactive[b-voreqwyafc]   { border-left-color: #94a3b8; }

.ig-token-card--inactive[b-voreqwyafc] {
    background: var(--color-surface-subtle, #f8fafc);
    opacity: .85;
}

/* ── Cabeçalho do card ─────────────────────────────────────── */

.ig-token-card-head[b-voreqwyafc] {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    min-width: 0;
}

.ig-token-card-name[b-voreqwyafc] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text, #0f1117);
    text-decoration: none;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ig-token-card-name:hover[b-voreqwyafc] {
    color: var(--color-primary, #0d9488);
    text-decoration: underline;
}
.ig-token-card-name:focus-visible[b-voreqwyafc] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Pílula de saúde — texto + ícone + cor (cor nunca sozinha). */
.ig-token-health[b-voreqwyafc] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    padding: .3rem .55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}
.ig-token-health-icon[b-voreqwyafc] {
    font-weight: 800;
    font-size: .8rem;
    line-height: 1;
}
.ig-token-health--valid[b-voreqwyafc] {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .25);
}
.ig-token-health--expired[b-voreqwyafc] {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3);
}
.ig-token-health--failed[b-voreqwyafc] {
    background: rgba(220, 38, 38, .12);
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .3);
}
.ig-token-health--not-tested[b-voreqwyafc] {
    background: rgba(59, 130, 246, .12);
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .25);
}
.ig-token-health--inactive[b-voreqwyafc] {
    background: rgba(148, 163, 184, .15);
    color: #475569;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .3);
}

/* ── Bloco de orientação por estado ───────────────────────── */

.ig-token-card-status[b-voreqwyafc] { min-width: 0; }

.ig-token-msg[b-voreqwyafc] {
    margin: 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--color-text-secondary, #4b5563);
}
.ig-token-msg strong[b-voreqwyafc] { color: var(--color-text, #0f1117); }

.ig-token-msg--danger[b-voreqwyafc] {
    color: #991b1b;
}
.ig-token-msg--danger strong[b-voreqwyafc] { color: #991b1b; }

.ig-token-msg--muted[b-voreqwyafc] { color: var(--color-text-tertiary, #9ca3af); }

.ig-token-error[b-voreqwyafc] {
    display: block;
    margin-top: .2rem;
    padding: .25rem .45rem;
    background: rgba(220, 38, 38, .07);
    border-left: 2px solid rgba(220, 38, 38, .35);
    font-size: .78rem;
    color: #991b1b;
    border-radius: 0 .25rem .25rem 0;
    overflow-wrap: anywhere;
}

.ig-token-msg-cta[b-voreqwyafc] {
    display: inline-block;
    margin-top: .25rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--color-primary, #0d9488);
    text-decoration: none;
}
.ig-token-msg-cta:hover[b-voreqwyafc] { text-decoration: underline; }
.ig-token-msg-cta:focus-visible[b-voreqwyafc] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Endpoints dependentes ────────────────────────────────── */

.ig-token-card-deps[b-voreqwyafc] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .75rem;
}

.ig-token-deps-label[b-voreqwyafc] {
    color: var(--color-text-secondary, #6b7280);
    font-weight: 500;
}

.ig-token-deps-list[b-voreqwyafc] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}

.ig-token-dep-chip[b-voreqwyafc] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: var(--color-surface-subtle, #f1f5f9);
    color: var(--color-text-secondary, #475569);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    padding: .12rem .5rem;
    font-size: .72rem;
    line-height: 1.3;
    text-decoration: none;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ig-token-dep-chip:hover[b-voreqwyafc] {
    border-color: var(--color-primary, #0d9488);
    color: var(--color-primary, #0d9488);
}
.ig-token-dep-chip:focus-visible[b-voreqwyafc] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
}

/* ── Detalhes técnicos (recolhível) ───────────────────────── */

.ig-token-card-tech[b-voreqwyafc] {
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, .5rem);
    overflow: hidden;
}

.ig-token-tech-summary[b-voreqwyafc] {
    cursor: pointer;
    padding: .45rem .65rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    user-select: none;
    list-style: none;
    font-size: .8rem;
}
.ig-token-tech-summary[b-voreqwyafc]::-webkit-details-marker { display: none; }
.ig-token-tech-summary[b-voreqwyafc]::before {
    content: "›";
    font-size: 1rem;
    color: var(--color-text-tertiary, #9ca3af);
    transition: transform .12s ease;
    flex-shrink: 0;
    line-height: 1;
}
.ig-token-card-tech[open] > .ig-token-tech-summary[b-voreqwyafc]::before { transform: rotate(90deg); }

.ig-token-tech-summary:hover[b-voreqwyafc] {
    background: var(--color-surface-subtle, #f8fafc);
}
.ig-token-tech-summary:focus-visible[b-voreqwyafc] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: -2px;
}

.ig-token-tech-label[b-voreqwyafc] {
    font-weight: 600;
    color: var(--color-text, #0f1117);
}
.ig-token-tech-hint[b-voreqwyafc] {
    color: var(--color-text-tertiary, #9ca3af);
    font-size: .72rem;
    margin-left: auto;
}

.ig-token-tech-grid[b-voreqwyafc] {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr;
    column-gap: 1rem;
    row-gap: .3rem;
    margin: 0;
    padding: .55rem .75rem .7rem;
    border-top: 1px dashed var(--color-border, #e5e7eb);
    font-size: .8rem;
}
.ig-token-tech-grid > dt[b-voreqwyafc] {
    color: var(--color-text-secondary, #6b7280);
    font-weight: 500;
}
.ig-token-tech-grid > dd[b-voreqwyafc] {
    margin: 0;
    color: var(--color-text, #0f1117);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.ig-token-tech-grid code[b-voreqwyafc] {
    font-size: .78rem;
}

/* ── Ações do card ────────────────────────────────────────── */

.ig-token-card-actions[b-voreqwyafc] {
    margin-top: auto;
    padding-top: .55rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

/* "Limpar cache" — estilo link, propositalmente menos destacado.
   Empurrado para a direita para não competir visualmente com
   Testar/Editar (que são as ações comuns). */
.ig-token-clear[b-voreqwyafc] {
    margin-left: auto;
    color: var(--color-text-tertiary, #9ca3af);
    text-decoration: none;
    font-size: .78rem;
    padding: .25rem .5rem;
}
.ig-token-clear:hover:not(:disabled)[b-voreqwyafc] {
    color: #b45309;
    text-decoration: underline;
}
.ig-token-clear:focus-visible[b-voreqwyafc] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Resultado do teste (efêmero) ──────────────────────────── */

.ig-token-card-result[b-voreqwyafc] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    padding: .4rem .55rem;
    border-radius: var(--radius-md, .5rem);
    font-size: .8rem;
    line-height: 1.35;
}
.ig-token-card-result > :first-child[b-voreqwyafc] {
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    flex-shrink: 0;
}
.ig-token-card-result--ok[b-voreqwyafc] {
    background: rgba(22, 163, 74, .1);
    color: #15803d;
}
.ig-token-card-result--err[b-voreqwyafc] {
    background: rgba(220, 38, 38, .08);
    color: #991b1b;
}

/* =============================================================
   Responsivo
   ============================================================= */

/* Em 1920+ damos mais respiro entre os cards de resumo. */
@media (min-width: 1600px) {
    .ig-summary[b-voreqwyafc] { gap: 1rem; }
    .ig-token-cards[b-voreqwyafc] { gap: 1rem; }
}

/* Em ~1100px (tablet landscape) → 2 colunas no resumo. */
@media (max-width: 1100px) {
    .ig-summary[b-voreqwyafc] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Em mobile/tablet vertical → 1 coluna e cards mais compactos. */
@media (max-width: 640px) {
    .ig-summary[b-voreqwyafc] { grid-template-columns: 1fr; }

    .ig-cockpit-main[b-voreqwyafc] { grid-template-columns: auto 1fr; }
    .ig-cockpit-icon[b-voreqwyafc] { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; }
    .ig-cockpit-name[b-voreqwyafc] { font-size: 1.15rem; }

    .ig-check[b-voreqwyafc] {
        grid-template-columns: 1.5rem 1fr;
        grid-template-rows: auto auto;
    }
    .ig-check-action[b-voreqwyafc] {
        grid-column: 2;
        justify-self: start;
    }

    .ig-tech-grid[b-voreqwyafc] {
        grid-template-columns: 1fr;
        row-gap: .25rem;
    }
    .ig-tech-grid > dt[b-voreqwyafc] { font-size: .72rem; }

    /* Cockpit: ações reflowam — Desativar volta ao fluxo natural. */
    .ig-cockpit-toggle[b-voreqwyafc] { margin-left: 0; }

    /* Tokens: cards em coluna única e grid técnico empilhado. */
    .ig-token-cards[b-voreqwyafc] { grid-template-columns: 1fr; }
    .ig-token-tech-grid[b-voreqwyafc] {
        grid-template-columns: 1fr;
        row-gap: .2rem;
    }
    .ig-token-tech-grid > dt[b-voreqwyafc] {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--color-text-tertiary, #9ca3af);
    }
    .ig-token-tech-hint[b-voreqwyafc] { display: none; }

    /* Em telas estreitas, "Limpar cache" volta a respeitar a ordem
       natural da flex — sem margin-left:auto que vira quebra-linha. */
    .ig-token-clear[b-voreqwyafc] { margin-left: 0; }
}
/* /Components/Pages/IntegrationGroups/Index.razor.rz.scp.css */
/* =============================================================
   /integration-groups — Lista de grupos (clientes/sistemas externos)

   Estrutura: .app-workspace-page → header (fixo) → filtros (fixo)
   → body (rola). Cards organizados em grid responsivo; o próprio
   card NÃO é clicável, então o hover global some — apenas links e
   botões ficam interativos visualmente.

   Otimizado para 1920×1080: 4 colunas confortáveis a partir de
   ~1400px, degradando para 3/2/1 abaixo disso.
   ============================================================= */

/* Utilitário visualmente oculto — para rotular ícones decorativos. */
.visually-hidden[b-xe2wqqqhqm] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================
   Filtros — chips de estado + filtros rápidos
   ============================================================= */

.ig-chip-bar[b-xe2wqqqhqm] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
}
.ig-chip-bar--secondary[b-xe2wqqqhqm] { margin-bottom: .75rem; }

/* Chip principal (estado consolidado). */
.ig-chip[b-xe2wqqqhqm] {
    appearance: none;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #dee2e6);
    color: var(--color-text-secondary, #495057);
    border-radius: 999px;
    padding: .3rem .75rem .3rem .6rem;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ig-chip:hover[b-xe2wqqqhqm] {
    border-color: var(--color-primary, #0d9488);
    color: var(--color-text, #0f1117);
}
.ig-chip:focus-visible[b-xe2wqqqhqm] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
}
.ig-chip--active[b-xe2wqqqhqm] {
    background: var(--color-primary, #0d9488);
    border-color: var(--color-primary, #0d9488);
    color: #fff;
}
.ig-chip--active:hover[b-xe2wqqqhqm] { color: #fff; filter: brightness(0.95); }
.ig-chip--active .ig-chip-count[b-xe2wqqqhqm] { background: rgba(255,255,255,.18); color: #fff; }

.ig-chip-count[b-xe2wqqqhqm] {
    background: var(--color-surface-subtle, #f1f5f9);
    color: var(--color-text-secondary, #495057);
    border-radius: 999px;
    padding: .05rem .45rem;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: .1rem;
}

/* Pontinho colorido dentro do chip — leitura de estado sem cor sozinha,
   acompanhado pelo label textual. */
.ig-chip-dot[b-xe2wqqqhqm] {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--color-border, #cbd5e1);
    flex-shrink: 0;
}
.ig-chip-dot--all[b-xe2wqqqhqm]        { background: #94a3b8; }
.ig-chip-dot--ready[b-xe2wqqqhqm]      { background: #16a34a; }
.ig-chip-dot--attention[b-xe2wqqqhqm]  { background: #f59e0b; }
.ig-chip-dot--incomplete[b-xe2wqqqhqm] { background: #3b82f6; }
.ig-chip-dot--inactive[b-xe2wqqqhqm]   { background: #94a3b8; }

/* Quando o chip está ativo, o dot fica em alto contraste no fundo color. */
.ig-chip--active .ig-chip-dot[b-xe2wqqqhqm] { background: #fff; }

/* Chip secundário (filtro rápido por sintoma) — visual mais discreto. */
.ig-quick-chip[b-xe2wqqqhqm] {
    appearance: none;
    background: var(--color-surface-subtle, #f8fafc);
    border: 1px dashed var(--color-border, #cbd5e1);
    color: var(--color-text-secondary, #475569);
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ig-quick-chip:hover:not(:disabled)[b-xe2wqqqhqm] {
    border-style: solid;
    border-color: var(--color-primary, #0d9488);
    color: var(--color-text, #0f1117);
}
.ig-quick-chip:focus-visible[b-xe2wqqqhqm] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
}
.ig-quick-chip:disabled[b-xe2wqqqhqm] {
    cursor: default;
    opacity: .5;
}
.ig-quick-chip--active[b-xe2wqqqhqm] {
    background: #fef3c7;
    border-style: solid;
    border-color: #d97706;
    color: #92400e;
}
.ig-quick-chip-count[b-xe2wqqqhqm] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: .85;
}

/* =============================================================
   Lista de cards
   ============================================================= */

.ig-card-list[b-xe2wqqqhqm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 1920×1080: ~4 colunas com 320–380px cada. Em 1400px cai para 3.
       O minmax garante que cards encurtem antes de quebrar linha. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .85rem;
    align-items: stretch;
}

.ig-card[b-xe2wqqqhqm] {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: .65rem;
    padding: .95rem 1rem .85rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 3px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, .75rem);
    position: relative;
    /* Sem hover global no card: o card não é clicável como um todo. */
    transition: none;
}

/* Faixa colorida fina à esquerda — leitura periférica do estado. */
.ig-card--state-ready[b-xe2wqqqhqm]      { border-left-color: #16a34a; }
.ig-card--state-attention[b-xe2wqqqhqm]  { border-left-color: #f59e0b; }
.ig-card--state-incomplete[b-xe2wqqqhqm] { border-left-color: #3b82f6; }
.ig-card--state-inactive[b-xe2wqqqhqm]   { border-left-color: #94a3b8; }

.ig-card--inactive[b-xe2wqqqhqm] {
    background: var(--color-surface-subtle, #f8fafc);
    opacity: .82;
}

/* ── Cabeçalho do card ─────────────────────────────────────── */

.ig-card-head[b-xe2wqqqhqm] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: center;
    min-width: 0;
}

.ig-card-icon[b-xe2wqqqhqm] {
    --ig-color: var(--color-surface-muted, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md, .5rem);
    background: color-mix(in srgb, var(--ig-color) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ig-color) 35%, transparent);
    font-size: 1.25rem;
    flex-shrink: 0;
    line-height: 1;
}

.ig-card-title-block[b-xe2wqqqhqm] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.ig-card-name[b-xe2wqqqhqm] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text, #1a1a2e);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}
.ig-card-name:hover[b-xe2wqqqhqm] {
    color: var(--color-primary, #0d9488);
    text-decoration: underline;
}
.ig-card-name:focus-visible[b-xe2wqqqhqm] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
    border-radius: 2px;
}

.ig-card-state-row[b-xe2wqqqhqm] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.ig-card-reason[b-xe2wqqqhqm] {
    font-size: .75rem;
    color: var(--color-text-secondary, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Pílula de estado consolidado ──────────────────────────── */

.ig-state-pill[b-xe2wqqqhqm] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    padding: .25rem .55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}
.ig-state-pill-icon[b-xe2wqqqhqm] {
    font-weight: 800;
    font-size: .8rem;
    line-height: 1;
}

.ig-state-pill--ready[b-xe2wqqqhqm] {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .25);
}
.ig-state-pill--attention[b-xe2wqqqhqm] {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3);
}
.ig-state-pill--incomplete[b-xe2wqqqhqm] {
    background: rgba(59, 130, 246, .12);
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .25);
}
.ig-state-pill--inactive[b-xe2wqqqhqm] {
    background: rgba(148, 163, 184, .15);
    color: #475569;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .3);
}

/* ── Descrição (clamp 2 linhas) ────────────────────────────── */

.ig-card-desc[b-xe2wqqqhqm] {
    font-size: .8125rem;
    line-height: 1.45;
    margin: 0;
    color: var(--color-text-secondary, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.45em * 2);
}
.ig-card-desc--empty[b-xe2wqqqhqm] {
    color: var(--color-text-tertiary, #9ca3af);
}

/* ── Contadores principais ─────────────────────────────────── */

.ig-card-stats[b-xe2wqqqhqm] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .5rem;
    margin: 0;
    padding: .5rem .5rem;
    background: var(--color-surface-subtle, #f8fafc);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, .5rem);
}

.ig-stat[b-xe2wqqqhqm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    min-width: 0;
}

.ig-stat-label[b-xe2wqqqhqm] {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
    line-height: 1.1;
}

.ig-stat-value[b-xe2wqqqhqm] {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;
    min-width: 0;
}

.ig-stat-main[b-xe2wqqqhqm] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #0f1117);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    display: inline-flex;
    align-items: baseline;
    gap: .2rem;
}
.ig-stat-main--muted[b-xe2wqqqhqm] {
    color: var(--color-text-tertiary, #9ca3af);
    font-weight: 500;
    font-size: .9rem;
}

.ig-stat-sep[b-xe2wqqqhqm] {
    color: var(--color-text-tertiary, #9ca3af);
    font-weight: 400;
    font-size: .85em;
    margin: 0 .05rem;
}
.ig-stat-total[b-xe2wqqqhqm] {
    color: var(--color-text-secondary, #6b7280);
    font-weight: 500;
    font-size: .85em;
}

.ig-stat-sub[b-xe2wqqqhqm] {
    font-size: .7rem;
    color: var(--color-text-secondary, #6b7280);
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-variant-numeric: tabular-nums;
}
.ig-stat-dot[b-xe2wqqqhqm] { opacity: .4; }

/* Chips de tokens (válidos / falhos / não testados) — compactos. */
.ig-token-chip[b-xe2wqqqhqm] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    padding: .15rem .4rem;
    border-radius: var(--radius-sm, .25rem);
    font-variant-numeric: tabular-nums;
}
.ig-token-chip + .ig-token-chip[b-xe2wqqqhqm] { margin-left: .2rem; }

.ig-token-chip--valid[b-xe2wqqqhqm] {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
}
.ig-token-chip--failed[b-xe2wqqqhqm] {
    background: rgba(220, 38, 38, .12);
    color: #b91c1c;
}
.ig-token-chip--untested[b-xe2wqqqhqm] {
    background: rgba(148, 163, 184, .18);
    color: #475569;
}
/* Quando o contador é zero, o chip fica neutro/apagado para não distrair. */
.ig-token-chip--zero[b-xe2wqqqhqm] {
    background: var(--color-surface-muted, #f1f5f9);
    color: var(--color-text-tertiary, #9ca3af);
}

/* ── Próxima ação recomendada ──────────────────────────────── */

.ig-card-next[b-xe2wqqqhqm] {
    display: flex;
}

.ig-next-link[b-xe2wqqqhqm] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .45rem .65rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--color-text, #0f1117);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, .5rem);
    text-decoration: none;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ig-next-link:hover[b-xe2wqqqhqm] {
    border-color: var(--color-primary, #0d9488);
    background: color-mix(in srgb, var(--color-primary, #0d9488) 6%, var(--color-surface, #fff));
    color: var(--color-primary, #0d9488);
    text-decoration: none;
}
.ig-next-link:focus-visible[b-xe2wqqqhqm] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
}

.ig-next-icon[b-xe2wqqqhqm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--color-surface-muted, #f1f5f9);
    color: var(--color-text-secondary, #6b7280);
    font-weight: 700;
    font-size: .8rem;
    line-height: 1;
    flex-shrink: 0;
}
.ig-next-link:hover .ig-next-icon[b-xe2wqqqhqm] {
    background: color-mix(in srgb, var(--color-primary, #0d9488) 14%, var(--color-surface, #fff));
    color: var(--color-primary, #0d9488);
}

.ig-next-label[b-xe2wqqqhqm] { flex: 1 1 auto; }
.ig-next-arrow[b-xe2wqqqhqm] {
    color: var(--color-text-tertiary, #9ca3af);
    font-weight: 600;
    transition: transform .12s ease, color .12s ease;
}
.ig-next-link:hover .ig-next-arrow[b-xe2wqqqhqm] {
    color: var(--color-primary, #0d9488);
    transform: translateX(2px);
}

/* Ajustes contextuais por estado — ainda assim mantemos texto claro;
   a cor é reforço, não veículo único de significado. */
.ig-card--state-attention  .ig-next-link[b-xe2wqqqhqm] { border-color: rgba(245, 158, 11, .4); }
.ig-card--state-attention  .ig-next-icon[b-xe2wqqqhqm] { background: rgba(245, 158, 11, .15); color: #b45309; }
.ig-card--state-incomplete .ig-next-icon[b-xe2wqqqhqm] { background: rgba(59, 130, 246, .12);  color: #1d4ed8; }

/* ── Rodapé do card: atualização + ações ───────────────────── */

.ig-card-foot[b-xe2wqqqhqm] {
    margin-top: auto;
    padding-top: .55rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.ig-card-updated[b-xe2wqqqhqm] {
    font-size: .72rem;
    color: var(--color-text-tertiary, #9ca3af);
    flex-shrink: 0;
}

.ig-card-actions[b-xe2wqqqhqm] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

/* "Desativar/Reativar" — propositalmente menos destacado: link, sem
   fundo, cinza. Continua acessível (foco, aria-label), apenas visual
   secundário em relação a Abrir/Editar. */
.ig-card-toggle[b-xe2wqqqhqm] {
    color: var(--color-text-tertiary, #9ca3af);
    text-decoration: none;
    padding: .25rem .5rem;
    font-size: .78rem;
}
.ig-card-toggle:hover:not(:disabled)[b-xe2wqqqhqm] {
    color: var(--color-text-secondary, #6b7280);
    text-decoration: underline;
}
.ig-card-toggle:focus-visible[b-xe2wqqqhqm] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =============================================================
   Empty state mais didático
   ============================================================= */

.ig-empty-icon[b-xe2wqqqhqm] {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: .5rem;
    opacity: .8;
}
.ig-empty-title[b-xe2wqqqhqm] {
    display: block;
    font-size: 1rem;
    color: var(--color-text, #1a1a2e);
}
.ig-empty-text[b-xe2wqqqhqm] {
    max-width: 520px;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================
   Responsivo
   ============================================================= */

/* Em telas largas (1920+), dá um pouco mais de respiro entre cards. */
@media (min-width: 1600px) {
    .ig-card-list[b-xe2wqqqhqm] { gap: 1rem; }
}

/* Tablet / telas estreitas — cards passam a ocupar largura cheia, e
   a barra de filtros quebra naturalmente em múltiplas linhas via
   flex-wrap herdado. */
@media (max-width: 767.98px) {
    .ig-card-list[b-xe2wqqqhqm] { grid-template-columns: 1fr; }
    .ig-card-stats[b-xe2wqqqhqm] { grid-template-columns: repeat(3, 1fr); padding: .5rem .35rem; }
    .ig-stat-label[b-xe2wqqqhqm] { font-size: .6rem; }
    .ig-stat-main[b-xe2wqqqhqm]  { font-size: .9rem; }
    .ig-card-foot[b-xe2wqqqhqm]  { flex-direction: column; align-items: stretch; }
    .ig-card-actions[b-xe2wqqqhqm] { justify-content: flex-end; }
}
/* /Components/Pages/IntegrationGroups/IntegrationGroupForm.razor.rz.scp.css */
/* =============================================================
   IntegrationGroupForm — layout, paletas e preview do card

   Layout 2 colunas em ≥992px (form à esquerda, preview sticky à
   direita). Em telas estreitas vira coluna única — preview aparece
   após o form, sem perder utilidade.
   ============================================================= */

.visually-hidden[b-6a0ximmh55] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================
   Intro
   ============================================================= */

.ig-form-intro[b-6a0ximmh55] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--color-primary, #0d9488) 6%, var(--color-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #0d9488) 20%, var(--color-border, #e5e7eb));
    border-left: 3px solid var(--color-primary, #0d9488);
    border-radius: var(--radius-lg, .75rem);
    margin-bottom: var(--space-4, 1rem);
}

.ig-form-intro-icon[b-6a0ximmh55] {
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
}

.ig-form-intro-title[b-6a0ximmh55] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text, #0f1117);
    font-size: .9rem;
    line-height: 1.4;
}

.ig-form-intro-text[b-6a0ximmh55] {
    margin: .2rem 0 0;
    color: var(--color-text-secondary, #4b5563);
    font-size: .82rem;
    line-height: 1.4;
}
.ig-form-intro-text strong[b-6a0ximmh55] { color: var(--color-text, #0f1117); }

/* =============================================================
   Layout 2 colunas
   ============================================================= */

.ig-form-layout[b-6a0ximmh55] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--space-4, 1rem);
    align-items: start;
}

.ig-form-fields[b-6a0ximmh55] { min-width: 0; }

.ig-form-actions[b-6a0ximmh55] { margin-top: var(--space-3, .75rem); }

/* Preview sticky no topo da coluna direita — fica visível enquanto
   o usuário desce no form. Em viewport curto isso pode ser
   desconfortável; o `top` é generoso para evitar grude com o header. */
.ig-form-preview[b-6a0ximmh55] {
    position: sticky;
    top: var(--space-4, 1rem);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, .75rem);
    padding: 1rem;
    align-self: start;
}

.ig-form-preview-title[b-6a0ximmh55] {
    margin: 0 0 .15rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text, #0f1117);
}

.ig-form-preview-hint[b-6a0ximmh55] {
    margin: 0 0 .75rem;
    font-size: .75rem;
    color: var(--color-text-secondary, #6b7280);
    line-height: 1.4;
}
.ig-form-preview-hint a[b-6a0ximmh55] {
    color: var(--color-primary, #0d9488);
    text-decoration: none;
}
.ig-form-preview-hint a:hover[b-6a0ximmh55] { text-decoration: underline; }

.ig-form-preview-foot[b-6a0ximmh55] {
    margin: .75rem 0 0;
    font-size: .72rem;
    color: var(--color-text-tertiary, #9ca3af);
    line-height: 1.4;
}

.ig-preview-figure[b-6a0ximmh55] {
    margin: 0;
}

/* =============================================================
   Paletas (cor e ícone)
   ============================================================= */

.ig-palette[b-6a0ximmh55] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .5rem;
}

/* Cor — swatch redondo, texto-acessível via aria-label e tooltip. */
.ig-color-chip[b-6a0ximmh55] {
    --ig-swatch: var(--color-border, #e5e7eb);
    appearance: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ig-swatch);
    border: 2px solid var(--color-surface, #fff);
    box-shadow: 0 0 0 1px var(--color-border, #cbd5e1);
    cursor: pointer;
    padding: 0;
    transition: transform .1s ease, box-shadow .1s ease;
}
.ig-color-chip:hover[b-6a0ximmh55] {
    transform: scale(1.08);
}
.ig-color-chip:focus-visible[b-6a0ximmh55] {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-surface, #fff),
                0 0 0 4px var(--color-primary, #0d9488);
}
.ig-color-chip--active[b-6a0ximmh55] {
    box-shadow: 0 0 0 2px var(--color-surface, #fff),
                0 0 0 3px var(--color-text, #0f1117);
}

.ig-color-chip--clear[b-6a0ximmh55] {
    background: var(--color-surface, #fff);
    color: var(--color-text-tertiary, #9ca3af);
    font-size: .85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ícone — botão quadrado pequeno mostrando o emoji. */
.ig-icon-chip[b-6a0ximmh55] {
    appearance: none;
    width: 2rem;
    height: 2rem;
    background: var(--color-surface-subtle, #f8fafc);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, .5rem);
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, transform .08s ease;
    padding: 0;
}
.ig-icon-chip:hover[b-6a0ximmh55] {
    border-color: var(--color-primary, #0d9488);
    background: var(--color-surface, #fff);
}
.ig-icon-chip:active[b-6a0ximmh55] { transform: translateY(1px); }
.ig-icon-chip:focus-visible[b-6a0ximmh55] {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
}
.ig-icon-chip--active[b-6a0ximmh55] {
    border-color: var(--color-primary, #0d9488);
    background: color-mix(in srgb, var(--color-primary, #0d9488) 10%, var(--color-surface, #fff));
    box-shadow: inset 0 0 0 1px var(--color-primary, #0d9488);
}
.ig-icon-chip--clear[b-6a0ximmh55] {
    color: var(--color-text-tertiary, #9ca3af);
    font-size: .85rem;
}

/* =============================================================
   Preview card — simplificação do card da listagem
   ============================================================= */

.ig-preview-card[b-6a0ximmh55] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem .95rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 3px solid var(--color-primary, #0d9488);
    border-radius: var(--radius-lg, .75rem);
}

.ig-preview-head[b-6a0ximmh55] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .65rem;
    align-items: center;
    min-width: 0;
}

.ig-preview-icon[b-6a0ximmh55] {
    --ig-color: var(--color-surface-muted, #f1f5f9);
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, .5rem);
    background: color-mix(in srgb, var(--ig-color) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ig-color) 35%, transparent);
    font-size: 1.15rem;
    flex-shrink: 0;
    line-height: 1;
}

.ig-preview-title-block[b-6a0ximmh55] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.ig-preview-name[b-6a0ximmh55] {
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-text, #0f1117);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ig-preview-pill[b-6a0ximmh55] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    padding: .2rem .45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: rgba(148, 163, 184, .18);
    color: #475569;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .3);
    align-self: flex-start;
}

.ig-preview-desc[b-6a0ximmh55] {
    margin: 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--color-text-secondary, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.4em * 2);
}

.ig-preview-stats[b-6a0ximmh55] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: .5rem;
    background: var(--color-surface-subtle, #f8fafc);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, .5rem);
}

.ig-preview-stat[b-6a0ximmh55] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.ig-preview-stat-label[b-6a0ximmh55] {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary, #6b7280);
    line-height: 1.1;
}
.ig-preview-stat-value[b-6a0ximmh55] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text-tertiary, #9ca3af);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* =============================================================
   Responsivo
   ============================================================= */

@media (max-width: 991.98px) {
    .ig-form-layout[b-6a0ximmh55] {
        grid-template-columns: 1fr;
    }
    .ig-form-preview[b-6a0ximmh55] {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .ig-palette[b-6a0ximmh55] { gap: .25rem; }
    .ig-color-chip[b-6a0ximmh55] { width: 1.45rem; height: 1.45rem; }
    .ig-icon-chip[b-6a0ximmh55] { width: 1.85rem; height: 1.85rem; font-size: 1rem; }
    .ig-preview-stats[b-6a0ximmh55] { gap: .35rem; padding: .4rem; }
    .ig-preview-stat-value[b-6a0ximmh55] { font-size: .85rem; }
}
/* /Components/Pages/Integrations/Details.razor.rz.scp.css */
/* =============================================================
   /integrations/{id} — Detalhe do endpoint

   Hierarquia: hero (identidade) → prontidão → como usar
   (entrada/saída) → configuração técnica → mapeamentos →
   auditoria recolhida.
   ============================================================= */

/* Texto acessível ao leitor de tela porém oculto visualmente —
   usado para anunciar feedback de cópia e rotular ícones. */
.visually-hidden[b-juzbp1ay9y] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Duas colunas em desktop, empilha em mobile. Auditoria full-width. */
.details-grid[b-juzbp1ay9y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}
.details-grid-full[b-juzbp1ay9y] {
    grid-column: 1 / -1;
}
@media (max-width: 991.98px) {
    .details-grid[b-juzbp1ay9y] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Hero compacto (chips de identidade) ─────────────────────── */

.endpoint-hero-row[b-juzbp1ay9y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.endpoint-hero-desc[b-juzbp1ay9y] {
    color: var(--color-text, #0f1117);
    max-width: 72ch;
    line-height: 1.45;
}
.endpoint-hero-help[b-juzbp1ay9y] {
    max-width: 72ch;
    line-height: 1.45;
}

.endpoint-hero-group[b-juzbp1ay9y] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--color-surface-subtle, #f1f3f5);
    color: var(--color-text-secondary, #495057);
    text-decoration: none;
    border: 1px solid var(--color-border, #dee2e6);
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.endpoint-hero-group:hover[b-juzbp1ay9y] {
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f1117);
}
.endpoint-hero-group--empty[b-juzbp1ay9y] {
    opacity: .65;
    cursor: default;
}

/* Variante grande da direction-chip — usada no hero e no checklist. */
.direction-chip-lg[b-juzbp1ay9y] {
    font-size: .82rem;
    padding: .2rem .55rem;
    font-weight: 600;
}

/* ── Painel de prontidão ─────────────────────────────────────── */

.readiness-panel[b-juzbp1ay9y] {
    border-left: 4px solid var(--color-border, #dee2e6);
}
.readiness-panel--ok[b-juzbp1ay9y]      { border-left-color: #16a34a; }
.readiness-panel--warning[b-juzbp1ay9y] { border-left-color: #f59e0b; }
.readiness-panel--danger[b-juzbp1ay9y]  { border-left-color: #dc2626; }

.readiness-list[b-juzbp1ay9y] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.readiness-item[b-juzbp1ay9y] {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    gap: .5rem .75rem;
    align-items: center;
    padding: .4rem .55rem;
    border-radius: .375rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #dee2e6);
}

.readiness-icon[b-juzbp1ay9y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
}

.readiness-item--ok[b-juzbp1ay9y]      { background: #f0fdf4; border-color: #bbf7d0; }
.readiness-item--ok      .readiness-icon[b-juzbp1ay9y] { background: #16a34a; color: #fff; }
.readiness-item--info[b-juzbp1ay9y]    { background: #f8fafc; border-color: #e2e8f0; }
.readiness-item--info    .readiness-icon[b-juzbp1ay9y] { background: #475569; color: #fff; }
.readiness-item--warning[b-juzbp1ay9y] { background: #fffbeb; border-color: #fde68a; }
.readiness-item--warning .readiness-icon[b-juzbp1ay9y] { background: #d97706; color: #fff; }
.readiness-item--danger[b-juzbp1ay9y]  { background: #fef2f2; border-color: #fecaca; }
.readiness-item--danger  .readiness-icon[b-juzbp1ay9y] { background: #dc2626; color: #fff; }

.readiness-label[b-juzbp1ay9y] {
    font-weight: 600;
    color: var(--color-text, #0f1117);
    font-size: .9rem;
    line-height: 1.3;
}
.readiness-hint[b-juzbp1ay9y] {
    font-size: .78rem;
    color: var(--color-text-secondary, #6c757d);
    margin-top: .1rem;
    line-height: 1.4;
}

.readiness-action[b-juzbp1ay9y] {
    align-self: center;
    white-space: nowrap;
}

/* ── Blocos "Como recebe" / "Como envia" ─────────────────────── */

.endpoint-howto .panel-body[b-juzbp1ay9y] { /* respira melhor que panel default */
    padding-top: .85rem;
    padding-bottom: .85rem;
}

/* URL de ingestão — bloco escuro destacado para facilitar copiar. */
.ingestion-url-block[b-juzbp1ay9y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: var(--color-surface-muted, #f8f9fa);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.5rem 0.75rem;
}
.ingestion-url-text[b-juzbp1ay9y] {
    font-family: var(--font-mono, 'Cascadia Code', monospace);
    font-size: 0.8125rem;
    color: var(--color-accent, #0d9488);
    word-break: break-all;
    flex: 1 1 auto;
    min-width: 0;
}

/* Dicas de cabeçalhos */
.auth-hint[b-juzbp1ay9y] {
    border: 1px dashed var(--color-border, #dee2e6);
    border-radius: .375rem;
    padding: .55rem .75rem;
    background: var(--color-surface-subtle, #fafbfc);
}
.auth-hint-title[b-juzbp1ay9y] {
    font-weight: 600;
    font-size: .85rem;
    color: var(--color-text, #0f1117);
}
.auth-hint-list[b-juzbp1ay9y] {
    list-style: none;
    margin: .25rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .85rem;
}
.auth-hint-list code[b-juzbp1ay9y] {
    background: var(--color-surface, #fff);
    padding: .05rem .35rem;
    border-radius: .25rem;
    border: 1px solid var(--color-border, #dee2e6);
    font-size: .8rem;
}

/* Pré-visualização de cURL */
.curl-preview > summary[b-juzbp1ay9y] {
    cursor: pointer;
    color: var(--color-primary, #0d9488);
    font-size: .85rem;
    list-style: none;
}
.curl-preview > summary[b-juzbp1ay9y]::-webkit-details-marker { display: none; }
.curl-preview > summary[b-juzbp1ay9y]::before {
    content: "▸ ";
    display: inline-block;
    transition: transform .15s ease;
    color: var(--color-text-secondary, #6c757d);
}
.curl-preview[open] > summary[b-juzbp1ay9y]::before {
    transform: rotate(90deg);
}
.curl-preview-code[b-juzbp1ay9y] {
    background: #0f172a;
    color: #e2e8f0;
    padding: .75rem;
    border-radius: .375rem;
    margin: .5rem 0 0 0;
    overflow-x: auto;
    font-family: var(--font-mono, 'Cascadia Code', monospace);
    font-size: .78rem;
    line-height: 1.55;
}

/* Bloco "Como envia" — dt/dd com destino + autenticação */
.howto-grid[b-juzbp1ay9y] {
    display: grid;
    grid-template-columns: 14ch minmax(0, 1fr);
    gap: .35rem .9rem;
    margin: 0;
}
.howto-grid dt[b-juzbp1ay9y] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-text-secondary, #495057);
    text-transform: uppercase;
    letter-spacing: .03em;
    align-self: start;
    padding-top: .15rem;
}
.howto-grid dd[b-juzbp1ay9y] {
    margin: 0;
    min-width: 0;
}
.howto-host[b-juzbp1ay9y] {
    background: var(--color-surface-subtle, #f1f3f5);
    border: 1px solid var(--color-border, #dee2e6);
    padding: .1rem .4rem;
    border-radius: .25rem;
    font-family: var(--font-mono, 'Cascadia Code', monospace);
    font-size: .82rem;
    color: var(--color-text, #0f1117);
}

@media (max-width: 575.98px) {
    .howto-grid[b-juzbp1ay9y] {
        grid-template-columns: 1fr;
    }
}

/* ── Mapeamentos relacionados (lista compacta) ──────────────── */

.mapping-mini-list[b-juzbp1ay9y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.mapping-mini-item[b-juzbp1ay9y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .85rem;
    padding: .45rem .65rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .375rem;
    background: var(--color-surface, #fff);
}

.mapping-mini-id[b-juzbp1ay9y] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    flex: 1 1 18rem;
    min-width: 0;
}

.mapping-mini-name[b-juzbp1ay9y] {
    font-weight: 600;
    color: var(--color-text, #0f1117);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.mapping-mini-name:hover[b-juzbp1ay9y] {
    color: var(--color-primary, #0d9488);
    text-decoration: underline;
}

.mapping-mini-meta[b-juzbp1ay9y] {
    flex: 0 0 auto;
    margin-left: auto;
}

.mapping-mini-actions[b-juzbp1ay9y] {
    display: flex;
    gap: .35rem;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .mapping-mini-meta[b-juzbp1ay9y] {
        margin-left: 0;
    }
    .mapping-mini-actions .btn[b-juzbp1ay9y] {
        flex: 1 1 calc(50% - .35rem);
    }
}

/* ── Foco visível em interativos customizados ────────────────
   Compensa o outline removido pelo CSS dos browsers em links/
   summaries com aparência customizada. :focus-visible mantém o
   anel apenas para navegação por teclado. */
.endpoint-hero-group:focus-visible[b-juzbp1ay9y],
.readiness-action:focus-visible[b-juzbp1ay9y],
.mapping-mini-name:focus-visible[b-juzbp1ay9y] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(13, 148, 136, 0.35));
    border-radius: .25rem;
}

.curl-preview > summary:focus-visible[b-juzbp1ay9y],
.audit-panel > details > summary:focus-visible[b-juzbp1ay9y] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(13, 148, 136, 0.35));
    border-radius: .25rem;
}

.mapping-mini-item:focus-within[b-juzbp1ay9y] {
    border-color: var(--color-primary, #0d9488);
    box-shadow: 0 1px 6px rgba(13, 148, 136, .12);
}

/* ── Auditoria (recolhida por padrão) ───────────────────────── */

.audit-panel > details > summary[b-juzbp1ay9y] {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.audit-panel > details > summary[b-juzbp1ay9y]::-webkit-details-marker { display: none; }
.audit-panel > details > summary[b-juzbp1ay9y]::before {
    content: "▸";
    color: var(--color-text-secondary, #6c757d);
    transition: transform .15s ease;
    flex: 0 0 auto;
}
.audit-panel > details[open] > summary[b-juzbp1ay9y]::before {
    transform: rotate(90deg);
}
.audit-summary-label[b-juzbp1ay9y] {
    font-weight: 600;
    color: var(--color-text, #0f1117);
}
/* /Components/Pages/Integrations/Index.razor.rz.scp.css */
/* =============================================================
   /integrations — Lista operacional de endpoints de integração

   Substitui a tabela técnica por linhas/cards focados em ação.
   Layout pensado para 1920×1080 (apenas a lista rola) e degradar
   bem para tablet/mobile (block layout, sem barras duplicadas).
   ============================================================= */

/* Utilitário visualmente oculto — mantém o texto acessível a
   leitores de tela sem ocupar espaço visual. Usado para rotular
   ícones decorativos (🔒, →, ←) e anunciar feedback de cópia. */
.visually-hidden[b-rnrinb4kj3] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Resumo operacional (linha de contadores) ──────────────────
   Mostra o "universo" de endpoints — sempre absolutos, não os
   filtrados. Cada célula é também um atalho clicável que aplica
   o filtro correspondente. */

.ep-summary[b-rnrinb4kj3] {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .35rem;
    margin-bottom: .5rem;
}

.ep-summary-cell[b-rnrinb4kj3] {
    appearance: none;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .375rem;
    padding: .35rem .55rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .05rem;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, transform .08s ease;
    text-align: left;
    min-width: 0;
}
.ep-summary-cell:hover:not(:disabled)[b-rnrinb4kj3] {
    border-color: var(--color-primary, #0d9488);
    background: var(--color-surface-subtle, #f8f9fa);
}
.ep-summary-cell:active:not(:disabled)[b-rnrinb4kj3] {
    transform: translateY(1px);
}
.ep-summary-cell:disabled[b-rnrinb4kj3] {
    cursor: default;
    opacity: .55;
}

.ep-summary-value[b-rnrinb4kj3] {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text, #0f1117);
    font-variant-numeric: tabular-nums;
}
.ep-summary-label[b-rnrinb4kj3] {
    font-size: .72rem;
    color: var(--color-text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.2;
}

/* Variantes por severidade — afetam só a cor do número quando há
   algo a destacar (Falhando/Sem credencial = perigo; sem grupo /
   sem mapeamento = alerta; ativas = sucesso). */
.ep-summary-cell--ok      .ep-summary-value[b-rnrinb4kj3] { color: #047857; }
.ep-summary-cell--warning .ep-summary-value[b-rnrinb4kj3] { color: #b45309; }
.ep-summary-cell--danger  .ep-summary-value[b-rnrinb4kj3] { color: #b91c1c; }

/* Quando o contador é zero, o destaque some — não há nada para
   acionar. O disabled garante que o botão fique inerte. */
.ep-summary-cell:disabled .ep-summary-value[b-rnrinb4kj3] {
    color: var(--color-text-secondary, #6c757d);
}

/* ── Chips de filtro rápido ──────────────────────────────────── */

.ep-chip-bar[b-rnrinb4kj3] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .5rem;
}

.ep-chip[b-rnrinb4kj3] {
    appearance: none;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #dee2e6);
    color: var(--color-text-secondary, #495057);
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ep-chip:hover[b-rnrinb4kj3] {
    border-color: var(--color-primary, #0d9488);
    color: var(--color-text, #0f1117);
}
.ep-chip--active[b-rnrinb4kj3] {
    background: var(--color-primary, #0d9488);
    border-color: var(--color-primary, #0d9488);
    color: #fff;
}
.ep-chip--active:hover[b-rnrinb4kj3] {
    color: #fff;
    filter: brightness(0.95);
}

.filter-clear[b-rnrinb4kj3] {
    padding: .1rem .35rem;
    text-decoration: none;
    color: var(--color-text-secondary, #6c757d);
}
.filter-clear:hover[b-rnrinb4kj3] {
    color: var(--color-primary, #0d9488);
    text-decoration: underline;
}

/* Legenda das direções logo abaixo do PageHeader.
   Mantida compacta para não roubar altura útil da lista. */
.direction-legend[b-rnrinb4kj3] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: center;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .375rem;
    background: var(--color-surface-subtle, #f8f9fa);
}

/* ── Lista de cards ──────────────────────────────────────────── */

.endpoint-card-list[b-rnrinb4kj3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.endpoint-card[b-rnrinb4kj3] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .55rem;
    padding: .8rem .95rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .5rem;
    background: var(--color-surface, #fff);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.endpoint-card:hover[b-rnrinb4kj3] {
    border-color: var(--color-primary, #0d9488);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
}

.endpoint-card--inactive[b-rnrinb4kj3] {
    opacity: .68;
    background: var(--color-surface-subtle, #f8f9fa);
}

/* Faixa colorida fina à esquerda — leitura periférica do status. */
.endpoint-card[b-rnrinb4kj3] {
    border-left: 3px solid var(--color-border, #dee2e6);
}
.endpoint-card:has(.endpoint-status-active)[b-rnrinb4kj3]    { border-left-color: #16a34a; }
.endpoint-card:has(.endpoint-status-paused)[b-rnrinb4kj3]    { border-left-color: #f59e0b; }
.endpoint-card:has(.endpoint-status-failed)[b-rnrinb4kj3]    { border-left-color: #dc2626; }
.endpoint-card:has(.endpoint-status-draft)[b-rnrinb4kj3]     { border-left-color: #3b82f6; }
.endpoint-card:has(.endpoint-status-disabled)[b-rnrinb4kj3]  { border-left-color: #6b7280; }

/* ── Cabeçalho do card ──────────────────────────────────────── */

.endpoint-card-head[b-rnrinb4kj3] {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.endpoint-card-id[b-rnrinb4kj3] {
    display: flex;
    gap: .55rem;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0; /* permite truncar o nome em flex */
    flex: 1 1 auto;
}

.endpoint-card-name[b-rnrinb4kj3] {
    font-weight: 600;
    color: var(--color-text, #0f1117);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.endpoint-card-name:hover[b-rnrinb4kj3] {
    color: var(--color-primary, #0d9488);
    text-decoration: underline;
}

.endpoint-card-group[b-rnrinb4kj3] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--color-surface-subtle, #f1f3f5);
    color: var(--color-text-secondary, #495057);
    text-decoration: none;
    border: 1px solid var(--color-border, #dee2e6);
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.endpoint-card-group:hover[b-rnrinb4kj3] {
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f1117);
}
.endpoint-card-group--empty[b-rnrinb4kj3] {
    opacity: .65;
    cursor: default;
}

.endpoint-card-status[b-rnrinb4kj3] {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

/* Variante maior do direction-chip para a leitura imediata na lista. */
.direction-chip-lg[b-rnrinb4kj3] {
    font-size: .82rem;
    padding: .2rem .55rem;
    font-weight: 600;
}

/* ── Corpo do card ──────────────────────────────────────────── */

.endpoint-card-body[b-rnrinb4kj3] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
}

.endpoint-card-meta[b-rnrinb4kj3] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .65rem;
    align-items: center;
    font-size: .8rem;
    color: var(--color-text-secondary, #495057);
}

.auth-chip[b-rnrinb4kj3] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: .25rem;
    background: var(--color-surface-subtle, #f1f3f5);
    border: 1px solid var(--color-border, #dee2e6);
    font-size: .75rem;
}

.endpoint-card-updated[b-rnrinb4kj3] {
    margin-left: auto;
    font-size: .78rem;
    color: var(--color-text-secondary, #6c757d);
}

/* ── Endpoint URLs (Entrada/Saída/Bidirecional) ─────────────── */

.endpoint-card-endpoints[b-rnrinb4kj3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem .85rem;
}

.endpoint-card-endpoint[b-rnrinb4kj3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: .82rem;
}

.endpoint-card-endpoint-label[b-rnrinb4kj3] {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-text-secondary, #495057);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.endpoint-card-endpoint-value[b-rnrinb4kj3] {
    flex: 1 1 auto;
    min-width: 0;
    padding: .15rem .45rem;
    background: var(--color-surface-subtle, #f1f3f5);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    color: var(--color-text, #0f1117);
}

.mono-truncate[b-rnrinb4kj3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.endpoint-card-copy[b-rnrinb4kj3] {
    flex: 0 0 auto;
    font-size: .72rem;
    padding: .1rem .55rem;
}

/* ── Selos de saúde ─────────────────────────────────────────── */

.endpoint-card-health[b-rnrinb4kj3] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.health-pill[b-rnrinb4kj3] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.4;
}
.health-pill--success[b-rnrinb4kj3] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.health-pill--warning[b-rnrinb4kj3] {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}
.health-pill--danger[b-rnrinb4kj3] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.health-pill--info[b-rnrinb4kj3] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

/* ── Ações ──────────────────────────────────────────────────── */

.endpoint-card-actions[b-rnrinb4kj3] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    padding-top: .25rem;
    border-top: 1px dashed var(--color-border, #dee2e6);
}

.endpoint-card-actions .btn[b-rnrinb4kj3] {
    font-size: .78rem;
    padding: .2rem .6rem;
}

/* ── Foco visível em interativos customizados ───────────────
   Botões/links com estilos custom perdem o outline padrão do
   browser. Reaplicamos com :focus-visible para teclado apenas
   (não polui clicks do mouse). Usa o token --ring do tema. */
.ep-summary-cell:focus-visible[b-rnrinb4kj3],
.ep-chip:focus-visible[b-rnrinb4kj3],
.filter-clear:focus-visible[b-rnrinb4kj3] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(13, 148, 136, 0.35));
    border-radius: .375rem;
}
.ep-chip:focus-visible[b-rnrinb4kj3] {
    border-radius: 999px;
}

.endpoint-card-name:focus-visible[b-rnrinb4kj3],
.endpoint-card-group:focus-visible[b-rnrinb4kj3] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(13, 148, 136, 0.35));
    border-radius: .25rem;
}

.endpoint-card-actions .btn:focus-visible[b-rnrinb4kj3],
.endpoint-card-copy:focus-visible[b-rnrinb4kj3] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(13, 148, 136, 0.35));
}

/* Realce sutil do card inteiro quando algo dentro dele recebe
   foco — útil para localizar o contexto enquanto navega por Tab. */
.endpoint-card:focus-within[b-rnrinb4kj3] {
    border-color: var(--color-primary, #0d9488);
    box-shadow: 0 1px 8px rgba(13, 148, 136, .12);
}

/* Toast discreto para erro de clipboard. Não bloqueia uso. */
.toast-mini[b-rnrinb4kj3] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    background: var(--color-surface, #fff);
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: .55rem .85rem;
    border-radius: .375rem;
    font-size: .82rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    max-width: 22rem;
}

/* ── Responsivo ─────────────────────────────────────────────── */

/* Em telas médias, mantém status visível mas sem quebrar o nome.
   Em mobile, empilha tudo e simplifica os URL slots. */
@media (max-width: 1199.98px) {
    /* 8 contadores em 4 colunas para não ficar muito apertado. */
    .ep-summary[b-rnrinb4kj3] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .endpoint-card-endpoints[b-rnrinb4kj3] {
        grid-template-columns: 1fr;
    }
    .endpoint-card-updated[b-rnrinb4kj3] {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .ep-summary[b-rnrinb4kj3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .endpoint-card[b-rnrinb4kj3] {
        padding: .7rem .8rem;
    }
    .endpoint-card-head[b-rnrinb4kj3] {
        gap: .4rem;
    }
    .endpoint-card-name[b-rnrinb4kj3] {
        font-size: .95rem;
    }
    .endpoint-card-actions .btn[b-rnrinb4kj3] {
        flex: 1 1 calc(50% - .35rem);
        text-align: center;
    }
    .endpoint-card-actions .ms-auto[b-rnrinb4kj3] {
        margin-left: 0 !important;
    }
}
/* /Components/Pages/Integrations/IntegrationEndpointForm.razor.rz.scp.css */
/* =============================================================
   IntegrationEndpointForm — 5 etapas progressivas

   Visual:
   - Cada etapa é uma form-section com um chip numerado.
   - "Avançado" recolhe Headers/Retries e Confirmação por protocolo.
   - A etapa do meio ("Como conecta?") adapta o conteúdo à direção.
   ============================================================= */

/* Header da etapa = número + título/descrição lado a lado. */
.form-step-header[b-41u6eq92aq] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

/* Chip numerado — alinhamento próprio para não brigar com o título. */
.form-step-number[b-41u6eq92aq] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: var(--color-primary, #0d9488);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
    margin-top: .1rem;
    font-variant-numeric: tabular-nums;
}

/* A etapa final ("Avançado") tem chip neutro — não é decisão crítica. */
.form-step--advanced .form-step-number[b-41u6eq92aq] {
    background: var(--color-text-secondary, #6c757d);
}

/* Tamanho do select de direção — primeira decisão, mais visível. */
.form-section-body .form-select-lg[b-41u6eq92aq] {
    font-size: 1rem;
}

/* ── Áreas recolhíveis ("Avançado") ─────────────────────────── */

.form-section-body--collapsibles[b-41u6eq92aq] {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding-top: var(--space-3, .75rem);
    padding-bottom: var(--space-3, .75rem);
}

.form-collapsible[b-41u6eq92aq] {
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .5rem;
    background: var(--color-surface, #fff);
    overflow: hidden;
}

.form-collapsible[open][b-41u6eq92aq] {
    background: var(--color-surface-subtle, #fafbfc);
}

.form-collapsible-summary[b-41u6eq92aq] {
    list-style: none;
    cursor: pointer;
    padding: .65rem .85rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    user-select: none;
}
.form-collapsible-summary[b-41u6eq92aq]::-webkit-details-marker { display: none; }
.form-collapsible-summary[b-41u6eq92aq]::before {
    content: "▸";
    color: var(--color-text-secondary, #6c757d);
    transition: transform .12s ease;
    flex: 0 0 auto;
    width: .9rem;
    text-align: center;
}
.form-collapsible[open] > .form-collapsible-summary[b-41u6eq92aq]::before {
    transform: rotate(90deg);
}

.form-collapsible-title[b-41u6eq92aq] {
    font-weight: 600;
    color: var(--color-text, #0f1117);
    font-size: .92rem;
}

.form-collapsible-hint[b-41u6eq92aq] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text-secondary, #6c757d);
}

.form-collapsible-body[b-41u6eq92aq] {
    padding: .35rem .85rem .85rem .85rem;
    border-top: 1px solid var(--color-border, #dee2e6);
    background: var(--color-surface, #fff);
}

/* ── Foco visível ─────────────────────────────────────────────
   Summary do collapsible perde o outline default por causa do
   ::before customizado e do list-style: none. Re-aplicamos com
   :focus-visible para teclado apenas. */
.form-collapsible-summary:focus-visible[b-41u6eq92aq] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(13, 148, 136, 0.35));
    border-radius: .5rem;
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .form-step-header[b-41u6eq92aq] {
        gap: .5rem;
    }
    .form-step-number[b-41u6eq92aq] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: .8rem;
    }
    .form-collapsible-summary[b-41u6eq92aq] {
        padding: .55rem .65rem;
    }
    .form-collapsible-hint[b-41u6eq92aq] {
        flex-basis: 100%;
    }
}
/* /Components/Pages/Mappings/Details.razor.rz.scp.css */
/* Reusa o grid de duas colunas dos Integrations Details. */
.details-grid[b-nxamj3crsn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}
.details-grid-full[b-nxamj3crsn] {
    grid-column: 1 / -1;
}
@media (max-width: 991.98px) {
    .details-grid[b-nxamj3crsn] { grid-template-columns: minmax(0, 1fr); }
}

/* Flow visual no resumo: source → regra → target */
.details-flow[b-nxamj3crsn] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0.6rem;
}
@media (max-width: 991.98px) {
    .details-flow[b-nxamj3crsn] {
        grid-template-columns: 1fr;
    }
    .details-flow-arrow[b-nxamj3crsn] {
        transform: rotate(90deg);
        text-align: center;
    }
}

.details-flow-card[b-nxamj3crsn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.8rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
}

.details-flow-card-rule[b-nxamj3crsn] {
    background: linear-gradient(180deg,
        rgba(13, 110, 253, 0.10),
        rgba(13, 110, 253, 0.02));
    border-color: rgba(13, 110, 253, 0.30);
}

.details-flow-label[b-nxamj3crsn] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color, #6c757d);
}

.details-flow-name[b-nxamj3crsn] {
    font-weight: 600;
    color: var(--bs-body-color, #1f2937);
    text-decoration: none;
}

.details-flow-name:hover[b-nxamj3crsn] {
    text-decoration: underline;
}

.details-flow-meta[b-nxamj3crsn] {
    font-size: 0.74rem;
    color: var(--bs-secondary-color, #6c757d);
}

.details-flow-arrow[b-nxamj3crsn] {
    align-self: center;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Snapshot: três painéis lado-a-lado mostrando entrada / regra / saída */
.details-snapshot-grid[b-nxamj3crsn] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

@media (max-width: 1199.98px) {
    .details-snapshot-grid[b-nxamj3crsn] {
        grid-template-columns: 1fr;
    }
}

.details-snapshot-pane[b-nxamj3crsn] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
    overflow: hidden;
    min-width: 0;
}

.details-snapshot-header[b-nxamj3crsn] {
    padding: 0.4rem 0.7rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-body-color, #1f2937);
}

.details-snapshot-body[b-nxamj3crsn] {
    margin: 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.55;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1f2937);
    max-height: 360px;
    overflow: auto;
    white-space: pre;
    tab-size: 2;
    -moz-tab-size: 2;
}

.details-snapshot-empty[b-nxamj3crsn] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
    white-space: pre-wrap;
}

.panel-subtitle[b-nxamj3crsn] {
    margin: 0.15rem 0 0 0;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 400;
}

/* Avisos do último preview (mesmo visual do laboratório). */
.lab-warnings[b-nxamj3crsn] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.45rem;
    padding: 0.55rem 0.8rem;
}

.lab-warnings-title[b-nxamj3crsn] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b45309;
    margin-bottom: 0.25rem;
}

.lab-warnings-list[b-nxamj3crsn] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    color: #92400e;
}

/* Bloco de links cruzados (ex.: "Ver mensagens deste endpoint") fica
   visualmente separado dos campos do panel acima. */
.cross-links[b-nxamj3crsn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
}

/* /Components/Pages/Mappings/Index.razor.rz.scp.css */
/* Hero do módulo: ilustra a ideia de transformação de payload
   (entrada → regra → saída) acima da listagem. */
.module-hero .panel-body[b-fef2iyybc3] {
    padding: 1rem 1.25rem;
}

.module-hero-row[b-fef2iyybc3] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 991.98px) {
    .module-hero-row[b-fef2iyybc3] {
        grid-template-columns: 1fr;
    }
    .module-hero-arrow[b-fef2iyybc3] {
        transform: rotate(90deg);
        justify-self: center;
    }
}

.module-hero-step[b-fef2iyybc3] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: 0.5rem;
}

.module-hero-step-rule[b-fef2iyybc3] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-accent) 10%, transparent),
        color-mix(in srgb, var(--color-accent) 2%, transparent));
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.module-hero-icon[b-fef2iyybc3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.45rem;
    background: #fff;
    color: var(--color-accent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
    flex-shrink: 0;
}

.module-hero-icon svg[b-fef2iyybc3] {
    width: 18px;
    height: 18px;
}

.module-hero-step-title[b-fef2iyybc3] {
    font-weight: 600;
    font-size: 0.9rem;
}

.module-hero-step-sub[b-fef2iyybc3] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.module-hero-arrow[b-fef2iyybc3] {
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
}

/* =====================================================================
   Listagem em cards (substitui a tabela densa)
   ---------------------------------------------------------------------
   Cada mapeamento é um card vertical que apresenta o fluxo
   entrada → regra → saída como hierarquia visual principal. Detalhes,
   grupo, status, ações e referência pesquisável ficam no header/footer
   do card. Em telas pequenas o fluxo empilha verticalmente sem perder
   leitura.
   ===================================================================== */
.mp-list[b-fef2iyybc3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.mp-card[b-fef2iyybc3] {
    position: relative;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e4e7ec);
    border-left: 3px solid var(--color-border, #e4e7ec);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16,24,40,0.05));
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.mp-card:hover[b-fef2iyybc3] {
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,24,40,0.08));
}

/* Foco visível dentro do card: como o card tem links de fluxo aninhados,
   o anel de foco precisa ficar bem destacado sem competir com a borda
   colorida do estado (is-active/is-draft/is-archived). */
.mp-card-title:focus-visible[b-fef2iyybc3],
.mp-card-group:focus-visible[b-fef2iyybc3],
.mp-card-flow .mp-flow-card[href]:focus-visible[b-fef2iyybc3] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.28);
    border-radius: var(--radius-md, 6px);
}

/* Faixa lateral por estado — sinal redundante (pareado com a pílula),
   mas funciona como "marcador rápido" para varrer a lista. */
.mp-card.is-active[b-fef2iyybc3]   { border-left-color: var(--color-success, #027a48); }
.mp-card.is-draft[b-fef2iyybc3]    { border-left-color: var(--color-warning, #b54708); }
.mp-card.is-archived[b-fef2iyybc3] { border-left-color: var(--color-border, #e4e7ec); opacity: 0.78; }

/* --- Header: nome + grupo + status + atualização --------------------- */
.mp-card-header[b-fef2iyybc3] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem 0.55rem 1rem;
}

.mp-card-titleblock[b-fef2iyybc3] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mp-card-title[b-fef2iyybc3] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #101828);
    text-decoration: none;
    line-height: 1.3;
    word-break: break-word;
}

.mp-card-title:hover[b-fef2iyybc3] { text-decoration: underline; }

.mp-card-subline[b-fef2iyybc3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--color-text-subtle, #667085);
}

.mp-card-group[b-fef2iyybc3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-muted, #475467);
    text-decoration: none;
    font-weight: 500;
}

.mp-card-group:hover[b-fef2iyybc3] { text-decoration: underline; }

.mp-card-group-empty[b-fef2iyybc3] {
    color: var(--color-text-subtle, #667085);
    font-style: italic;
    font-weight: 400;
}

.mp-card-sep[b-fef2iyybc3] {
    opacity: 0.45;
    user-select: none;
}

.mp-card-meta[b-fef2iyybc3] { color: var(--color-text-subtle, #667085); }

.mp-card-status[b-fef2iyybc3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* --- Fluxo entrada → regra → saída ------------------------------------ */
.mp-card-flow[b-fef2iyybc3] {
    padding: 0.25rem 1rem 0.65rem 1rem;
}

/* Cards do fluxo viram link clicável; aplicar reset visual de link */
.mp-card-flow .mp-flow-card[href][b-fef2iyybc3] {
    text-decoration: none;
    color: inherit;
    transition: border-color 150ms ease, background 150ms ease;
}

.mp-card-flow .mp-flow-card[href]:hover[b-fef2iyybc3] {
    border-color: color-mix(in srgb, var(--color-accent, #0d9488) 35%, var(--color-border, #e4e7ec));
    background: var(--color-surface-hover, #f2f4f7);
}

.mp-card-flow .mp-flow-card[href]:hover .mp-flow-name[b-fef2iyybc3] {
    text-decoration: underline;
}

/* --- Footer: ações ---------------------------------------------------- */
.mp-card-actions[b-fef2iyybc3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem 0.85rem 1rem;
    border-top: 1px dashed var(--color-border, #e4e7ec);
}

/* Em mobile: ações com largura mais generosa, "Desativar" não cola na
   borda direita (perde o ms-auto pra empilhar com o resto). */
@media (max-width: 575.98px) {
    .mp-card-header[b-fef2iyybc3] {
        flex-direction: column;
        align-items: stretch;
    }
    .mp-card-status[b-fef2iyybc3] {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .mp-card-actions .ms-auto[b-fef2iyybc3] { margin-left: 0 !important; }
}

/* =====================================================================
   Lista de mapeamentos — agora dentro de .app-workspace-body
   ---------------------------------------------------------------------
   O scroll vertical da listagem é tratado globalmente pelo padrão
   .app-workspace-* (ver app.css). Aqui mantemos apenas o ajuste de
   largura do campo de busca dentro do filter-bar.
   ===================================================================== */
.filter-search[b-fef2iyybc3] {
    flex: 1 1 16rem;
    min-width: 12rem;
    max-width: 28rem;
}

@media (max-width: 991.98px) {
    .filter-search[b-fef2iyybc3] {
        flex-basis: 100%;
        max-width: none;
    }
}
/* /Components/Pages/Mappings/MappingLabEditor.razor.rz.scp.css */
/* =====================================================================
   Cartão de configurações (nome, status, descrição, origem→destino)
   ---------------------------------------------------------------------
   Um único cartão claro no topo, evitando bordas competindo entre
   "Identificação" e "Endpoints" como nas iterações anteriores.
   ===================================================================== */
.config-card[b-up2acfq1nk] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.6rem;
    margin-bottom: 1.1rem;
    overflow: hidden;
}

.config-card-header[b-up2acfq1nk] {
    padding: 0.95rem 1.1rem 0.55rem 1.1rem;
}

.config-card-title[b-up2acfq1nk] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.2rem 0;
    color: var(--bs-body-color, #1f2937);
}

.config-card-desc[b-up2acfq1nk] {
    margin: 0;
    font-size: 0.83rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.45;
    max-width: 70ch;
}

.config-card-body[b-up2acfq1nk] {
    padding: 0.6rem 1.1rem 1.05rem 1.1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* Origem → seta → destino, lado a lado em desktop, empilhado em
   mobile com a seta rotacionada. Reaproveitado do iteração anterior. */
.endpoints-row[b-up2acfq1nk] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

@media (max-width: 991.98px) {
    .endpoints-row[b-up2acfq1nk] {
        grid-template-columns: 1fr;
    }
    .endpoint-arrow[b-up2acfq1nk] {
        transform: rotate(90deg);
        justify-self: center;
    }
}

.endpoint-card[b-up2acfq1nk] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
}

.endpoint-card-label[b-up2acfq1nk] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6c757d);
}

.endpoint-card-url[b-up2acfq1nk] {
    font-size: 0.74rem;
    font-family: var(--bs-font-monospace, monospace);
    color: var(--bs-secondary-color, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.endpoint-arrow[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6c757d);
}

/* As classes .ref-card* foram removidas — eram do cartão "Campo para
   localizar mensagens" no layout antigo. A configuração foi movida
   para o .trace-card (recolhível) dentro da etapa Configurar. Os
   estilos abaixo (.ref-validation, .ref-preview-*, .ref-storage-mode-*,
   .ref-ai-*) continuam em uso dentro do corpo do trace-card. */

/* Validation inline feedback */
.ref-validation[b-up2acfq1nk] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.65rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.4;
}

.ref-validation-error[b-up2acfq1nk] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.ref-validation-warn[b-up2acfq1nk] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* Preview area */
.ref-preview[b-up2acfq1nk] {
    margin-top: 0.6rem;
}

.ref-preview-found[b-up2acfq1nk],
.ref-preview-notfound[b-up2acfq1nk],
.ref-preview-invalid[b-up2acfq1nk],
.ref-preview-nosample[b-up2acfq1nk] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.45;
}

.ref-preview-found[b-up2acfq1nk] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.ref-preview-value[b-up2acfq1nk] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    word-break: break-all;
}

.ref-preview-notfound[b-up2acfq1nk] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.ref-preview-invalid[b-up2acfq1nk] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.ref-preview-invalid code[b-up2acfq1nk] {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.05rem 0.3rem;
    border-radius: 0.2rem;
    font-size: 0.78rem;
}

.ref-preview-nosample[b-up2acfq1nk] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-secondary-color, #6c757d);
}

/* AI suggestion section */
.ref-ai-section[b-up2acfq1nk] {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
}

.ref-ai-cta[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ref-ai-btn[b-up2acfq1nk] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.ref-ai-hint[b-up2acfq1nk] {
    font-size: 0.76rem;
    color: var(--bs-secondary-color, #6c757d);
}

.ref-ai-result[b-up2acfq1nk] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.45;
    margin-top: 0.55rem;
}

.ref-ai-result-title[b-up2acfq1nk] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}

.ref-ai-result-error[b-up2acfq1nk] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.ref-ai-result-error .ref-ai-result-title[b-up2acfq1nk] {
    color: #991b1b;
}

.ref-ai-result-info[b-up2acfq1nk] {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    color: #4c1d95;
}

.ref-ai-result-info .ref-ai-result-title[b-up2acfq1nk] {
    color: #6d28d9;
}

.ref-ai-review-hint[b-up2acfq1nk] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--bs-secondary-color, #6c757d);
}

/* As classes .lab-card* e .lab-substep* foram removidas — eram do
   wrapper "Laboratório de transformação" no layout antigo, hoje
   substituído pelo studio-pane (etapas Entrada / Saída desejada /
   IA e regra / Revisar). Os estilos de .json-pane*, .preview-pane*,
   .ai-fields, .ai-textarea, .ai-disclaimer, .generate-cta, .ai-result*
   continuam em uso dentro dessas etapas. */

/* =====================================================================
   Painel de JSON (textarea + toolbar) — usado tanto pelo "JSON recebido"
   da Etapa 1 quanto pela "Regra de transformação" do editor avançado.
   ===================================================================== */
.json-pane[b-up2acfq1nk] {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
    overflow: hidden;
}

.json-pane-header[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.json-pane-title[b-up2acfq1nk] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-body-color, #1f2937);
}

.json-textarea[b-up2acfq1nk] {
    flex: 1 1 auto;
    min-height: 240px;
    resize: vertical;
    font-size: 0.875rem;
    line-height: 1.55;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-radius: 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    tab-size: 2;
    -moz-tab-size: 2;
}

@media (max-width: 991.98px) {
    .json-textarea[b-up2acfq1nk] { min-height: 200px; }
}

.json-textarea:focus[b-up2acfq1nk] {
    box-shadow: none;
    outline: 2px solid rgba(13, 110, 253, 0.25);
    outline-offset: -2px;
}

.json-textarea.is-invalid[b-up2acfq1nk] {
    background: #fff5f5;
    background-image: none;
    padding-right: 0.85rem;
}

.json-pane-error[b-up2acfq1nk] {
    padding: 0.45rem 0.75rem;
    background: #fff5f5;
    border-top: 1px solid #f5c2c7;
    color: #9b1c1c;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.json-pane-toolbar[b-up2acfq1nk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
}

.json-pane-hint[b-up2acfq1nk] {
    font-size: 0.74rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* =====================================================================
   Etapa "Saída desejada": campos do assistente IA
   (exemplo do JSON enviado + instruções em texto)
   ---------------------------------------------------------------------
   Os dois textareas usam .ai-textarea e ficam lado a lado em desktop.
   A altura preferencial foi aumentada para ~2.5× do tamanho original
   (de 7.5rem para 19rem) porque o usuário tipicamente cola um JSON
   inteiro de saída ou escreve instruções longas. `resize: vertical`
   permite puxar mais altura quando necessário. Em mobile a altura é
   reduzida para 14rem para não dominar a viewport.
   ===================================================================== */
.ai-fields[b-up2acfq1nk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

@media (max-width: 991.98px) {
    .ai-fields[b-up2acfq1nk] {
        grid-template-columns: 1fr;
    }
}

.ai-textarea[b-up2acfq1nk] {
    resize: vertical;
    min-height: 19rem;
}

/* Placeholder dos textareas de JSON (Entrada → "JSON recebido" e
   Saída desejada → "Exemplo do JSON enviado"): tom mais claro e
   acinzentado para reforçar visualmente que o quadro está vazio e
   aguarda o JSON do usuário — o exemplo é só uma dica, não conteúdo.
   opacity:1 fixa o comportamento (o Firefox reduz o opacity do
   placeholder por padrão) e deixa a cor controlar a intensidade. */
.json-textarea[b-up2acfq1nk]::placeholder,
.ai-textarea[b-up2acfq1nk]::placeholder {
    color: #aab2bd;
    opacity: 1;
}

/* Mobile: textareas menores para preservar contexto da viewport.
   `min-height` no breakpoint cobre tanto o JSON quanto as instruções
   sem precisar de classes específicas — mesma escala para ambos
   mantém o grid balanceado. */
@media (max-width: 575.98px) {
    .ai-textarea[b-up2acfq1nk] {
        min-height: 14rem;
    }
}

/* =====================================================================
   Etapa 3: disclaimer + CTA "Gerar regra com IA"
   ===================================================================== */
.ai-disclaimer[b-up2acfq1nk] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 0.4rem;
    font-size: 0.76rem;
    color: #6d28d9;
    line-height: 1.45;
    margin-bottom: 0.7rem;
}

/* Rastreabilidade da mensagem fundida ao card de IA: bloco inline entre
   o disclaimer e o bloco de créditos/botão. Bordas sutis acima/abaixo o
   separam como uma seção própria, sem virar um cartão recolhível à parte. */
.trace-inline[b-up2acfq1nk] {
    margin: 0 0 0.85rem 0;
    padding: 0.85rem 0 0.95rem 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.trace-inline-head[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.trace-inline-title[b-up2acfq1nk] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color, #1f2937);
}

/* Nota "a IA preenche estes campos": mesma paleta violeta do
   .ai-disclaimer para amarrar visualmente à geração por IA e deixar
   claro que os campos abaixo não exigem preenchimento manual. */
.trace-inline-autohint[b-up2acfq1nk] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0 0 0.8rem 0;
    padding: 0.45rem 0.65rem;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    color: #6d28d9;
    line-height: 1.45;
}

.trace-inline-autohint svg[b-up2acfq1nk] {
    margin-top: 0.12rem;
}

.generate-cta[b-up2acfq1nk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0;
    margin-bottom: 0.5rem;
}

.generate-btn[b-up2acfq1nk] {
    min-width: 14rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.generate-hint[b-up2acfq1nk] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
}

/* Resultados da IA (erro / explicação / avisos) — caixinhas pequenas
   sob o CTA, sem competir com ele em peso visual. */
.ai-result[b-up2acfq1nk] {
    padding: 0.55rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 0.5rem;
}

.ai-result-title[b-up2acfq1nk] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.ai-result-error[b-up2acfq1nk] {
    background: #fff5f5;
    border: 1px solid #f5c2c7;
    color: #9b1c1c;
}

.ai-result-info[b-up2acfq1nk] {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    color: #4c1d95;
}

.ai-result-info .ai-result-title[b-up2acfq1nk] {
    color: #6d28d9;
}

.ai-result-warning[b-up2acfq1nk] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.ai-result-warning .ai-result-title[b-up2acfq1nk] {
    color: #b45309;
}

/* =====================================================================
   Etapa 4: painel de preview
   ---------------------------------------------------------------------
   Estados explícitos (aguardando entrada / aguardando regra / atualizando
   / sucesso / erro de transformação) renderizados em blocos próprios em
   vez de espremer tudo em "_previewError". Botões de ação ficam ao pé
   do painel: "Corrigir" só aparece habilitado em estado de erro real.
   ===================================================================== */
.preview-pane[b-up2acfq1nk] {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
    overflow: hidden;
}

.preview-pane-header[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.preview-pane-title[b-up2acfq1nk] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-body-color, #1f2937);
}

.preview-pane-headeraction[b-up2acfq1nk] {
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    font-size: 0.78rem;
    text-decoration: none;
}

/* Bloco "vazio" — usado para "aguardando…" e "atualizando…". É só
   tipografia, sem fundo, para parecer mensagem e não erro. */
.preview-empty[b-up2acfq1nk] {
    flex: 1 1 auto;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.5rem 1rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
}

.preview-empty strong[b-up2acfq1nk] {
    color: var(--bs-body-color, #1f2937);
    font-size: 0.92rem;
}

.preview-empty p[b-up2acfq1nk] {
    margin: 0;
    font-size: 0.82rem;
    max-width: 50ch;
    line-height: 1.45;
}

.preview-empty-warn[b-up2acfq1nk] {
    color: #b45309;
}

.preview-empty-warn strong[b-up2acfq1nk] {
    color: #92400e;
}

@media (max-width: 991.98px) {
    .preview-empty[b-up2acfq1nk] { min-height: 180px; }
}

.preview-output[b-up2acfq1nk] {
    flex: 1 1 auto;
    min-height: 240px;
    margin: 0;
    padding: 0.65rem 0.85rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: 0.875rem;
    line-height: 1.55;
    overflow: auto;
    white-space: pre;
    color: var(--bs-body-color, #1f2937);
    tab-size: 2;
    -moz-tab-size: 2;
}

@media (max-width: 991.98px) {
    .preview-output[b-up2acfq1nk] { min-height: 180px; }
}

.preview-error-block[b-up2acfq1nk] {
    flex: 1 1 auto;
    min-height: 240px;
    background: #fff5f5;
    border-bottom: 1px solid #f5c2c7;
    overflow: auto;
}

.preview-error-title[b-up2acfq1nk] {
    padding: 0.55rem 0.85rem 0.25rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9b1c1c;
}

.preview-error-message[b-up2acfq1nk] {
    margin: 0;
    padding: 0 0.85rem 0.7rem 0.85rem;
    color: #9b1c1c;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.preview-warnings[b-up2acfq1nk] {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: #fffbeb;
    padding: 0.55rem 0.8rem;
}

.preview-warnings-title[b-up2acfq1nk] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b45309;
    margin-bottom: 0.25rem;
}

.preview-warnings-list[b-up2acfq1nk] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    color: #92400e;
}

.preview-pane-toolbar[b-up2acfq1nk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
}

/* =====================================================================
   Editor avançado da regra (collapsible)
   ---------------------------------------------------------------------
   Implementado como <button> + <div> condicional (em vez de <details>)
   para que o estado fique sob controle do Blazor — assim o componente
   pode abrir automaticamente em modo edição quando há erro na regra.
   ===================================================================== */
.advanced-card[b-up2acfq1nk] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.6rem;
    margin-bottom: 1.1rem;
    overflow: hidden;
}

.advanced-toggle[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.85rem 1.05rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 0;
    text-align: left;
    cursor: pointer;
}

.advanced-toggle:hover[b-up2acfq1nk] {
    background: var(--bs-secondary-bg, #e9ecef);
}

.advanced-card.is-open .advanced-toggle[b-up2acfq1nk] {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
}

.advanced-caret[b-up2acfq1nk] {
    color: var(--bs-secondary-color, #6c757d);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.advanced-card.is-open .advanced-caret[b-up2acfq1nk] {
    transform: rotate(90deg);
}

.advanced-toggle-text[b-up2acfq1nk] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}

.advanced-toggle-title[b-up2acfq1nk] {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--bs-body-color, #1f2937);
}

.advanced-toggle-hint[b-up2acfq1nk] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.advanced-body[b-up2acfq1nk] {
    padding: 0.95rem 1.05rem 1.05rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.advanced-body-intro[b-up2acfq1nk] {
    font-size: 0.83rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.5;
}

/* Variante "soft": fundo discreto + borda lateral roxa que comunica
   "ajuda/aviso" sem soar como erro. Usada para o aviso "a maioria dos
   usuários não precisa editar isto". */
.advanced-body-intro--soft[b-up2acfq1nk] {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-left: 3px solid #7c3aed;
    padding: 0.65rem 0.85rem;
    border-radius: 0.4rem;
    color: #4c1d95;
}

.advanced-body-intro--soft strong[b-up2acfq1nk] { color: #4c1d95; }

/* Badge "Opcional" ao lado do título do modo avançado: reforça que
   não é caminho obrigatório. */
.advanced-toggle-badge[b-up2acfq1nk] {
    margin-left: 0.5rem;
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* Botão "Ajuda da regra" no toolbar do JSON-pane — visual sutilmente
   distinto (info) para sinalizar "abre algo lateral". */
.help-trigger[b-up2acfq1nk] {
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #b6d4fe;
    --bs-btn-hover-bg: #e7f1ff;
    --bs-btn-hover-border-color: #9ec5fe;
}

/* =====================================================================
   Referência de operadores — itens individuais
   ---------------------------------------------------------------------
   As wrappers .reference-card / .reference-summary* / .reference-grid
   foram removidas com a refatoração que moveu a referência para o
   help-drawer (que renderiza os .reference-item como lista vertical).
   Os estilos abaixo (.reference-item, .reference-desc, .reference-snippet)
   continuam ativos no contexto do drawer.
   ===================================================================== */
.reference-item[b-up2acfq1nk] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.35rem;
    padding: 0.55rem 0.8rem;
}

.reference-item summary[b-up2acfq1nk] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.84rem;
    list-style: none;
}

.reference-item summary[b-up2acfq1nk]::-webkit-details-marker { display: none; }

.reference-item summary[b-up2acfq1nk]::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s ease;
    color: var(--bs-secondary-color, #6c757d);
}

.reference-item[open] summary[b-up2acfq1nk]::before {
    transform: rotate(90deg);
}

.reference-item code[b-up2acfq1nk] {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.78rem;
}

.reference-desc[b-up2acfq1nk] {
    margin: 0.4rem 0;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.reference-snippet[b-up2acfq1nk] {
    margin: 0.5rem 0 0 0;
    padding: 0.55rem 0.7rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre;
    overflow: auto;
    max-height: 240px;
    tab-size: 2;
    -moz-tab-size: 2;
}

/* =====================================================================
   Barra de ação final (Cancelar / Salvar)
   ---------------------------------------------------------------------
   Destaca a ação primária com btn-lg. O texto à esquerda é apenas dica
   visual, não bloqueia o submit (validação real continua nas
   DataAnnotations do MappingFormModel).
   ===================================================================== */
.action-bar[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding: 0.85rem 1.05rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.action-bar-info[b-up2acfq1nk] {
    flex: 1 1 auto;
    min-width: 0;
}

.action-bar-status[b-up2acfq1nk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

.action-bar-status-ready[b-up2acfq1nk] {
    color: #15803d;
    font-weight: 600;
}

.action-bar-buttons[b-up2acfq1nk] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}


/* =====================================================================
   Modo de armazenamento da referência pesquisável (Plain × MaskedAndHash)
   ===================================================================== */
.ref-storage-mode-options[b-up2acfq1nk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.5rem;
}

.ref-storage-mode-option[b-up2acfq1nk] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.4rem;
    cursor: pointer;
    background: var(--bs-body-bg, #fff);
}

.ref-storage-mode-option:hover[b-up2acfq1nk] {
    border-color: #6c757d;
}

.ref-storage-mode-option input[type=radio][b-up2acfq1nk] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.ref-storage-mode-option input[type=radio]:checked + span strong[b-up2acfq1nk] {
    color: #0d6efd;
}


/* Aviso sobre dependência de chave HMAC no modo MaskedAndHash */
.ref-storage-mode-notice[b-up2acfq1nk] {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-top: 0.6rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid #f1d27a;
    background: #fff8e0;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    color: #604a00;
}

.ref-storage-mode-notice code[b-up2acfq1nk] {
    background: rgba(0, 0, 0, 0.05);
    padding: 0 0.25rem;
    border-radius: 0.2rem;
}

/* =====================================================================
   STUDIO DE MAPEAMENTO — refatoração visual (stepper + 2 colunas)
   ---------------------------------------------------------------------
   Estilos específicos do studio. Usam o vocabulário base `mp-stepper`,
   `mp-studio*`, `mp-flow*` definido em app.css e adicionam apenas o
   que é necessário: espaçamento, sticky positions, painéis ocultos
   sem flicker e resumo da etapa Revisar.
   ===================================================================== */

/* --- Stepper sticky no topo ----------------------------------------- */
.studio-stepper[b-up2acfq1nk] {
    position: sticky;
    top: 0.5rem;
    z-index: 10;
    margin-bottom: 1.1rem;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));
    /* Fundo sólido essencial — o stepper sobrepõe conteúdo enquanto rola
       e o `mp-stepper` base usa `--color-surface-muted`. Sem reforço,
       textareas embaixo podem "vazar" através do gap entre itens. */
    background: var(--color-surface-muted, #fafbfc);
}

/* Item do stepper com bloco título+hint empilhado. Em telas estreitas,
   o hint some pra manter o stepper compacto. */
.studio-stepper-item[b-up2acfq1nk] {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

.studio-stepper-num[b-up2acfq1nk] {
    /* Sobrescreve o `.mp-stepper-num` em app.css apenas no contexto do
       studio: número fica mais vistoso por ser a referência principal
       de "onde estou". */
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
}

.studio-stepper-label[b-up2acfq1nk] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.studio-stepper-title[b-up2acfq1nk] {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-stepper-hint[b-up2acfq1nk] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bolinha de status (canto sup. dir. do item) — só aparece quando o
   item tem status != Pending. Cores via classes is-ok/is-warning/is-error
   aplicadas no botão. */
.studio-stepper-dot[b-up2acfq1nk] {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--bs-secondary-color, #6c757d);
}
.studio-stepper-item.is-ok      .studio-stepper-dot[b-up2acfq1nk] { background: #15803d; }
.studio-stepper-item.is-warning .studio-stepper-dot[b-up2acfq1nk] { background: #b45309; }
.studio-stepper-item.is-error   .studio-stepper-dot[b-up2acfq1nk] { background: #b42318; }

/* Espelha o status na borda inferior do item ativo — fica explícito
   que aquela etapa tem pendência, mesmo selecionada. */
.studio-stepper-item.is-active.is-warning[b-up2acfq1nk] { box-shadow: inset 0 -2px 0 #b45309; }
.studio-stepper-item.is-active.is-error[b-up2acfq1nk]   { box-shadow: inset 0 -2px 0 #b42318; }
.studio-stepper-item.is-active.is-ok[b-up2acfq1nk]      { box-shadow: inset 0 -2px 0 #15803d; }

/* Mobile: stepper colapsa para grid de 5 colunas sem o hint */
@media (max-width: 767.98px) {
    .studio-stepper-hint[b-up2acfq1nk] { display: none; }
    .studio-stepper-title[b-up2acfq1nk] { font-size: 0.78rem; }
    .studio-stepper-item[b-up2acfq1nk] { padding: 0.4rem 0.5rem; }
}

/* --- Grid do studio: 2 colunas em desktop, 1 em mobile -------------- */
.studio-grid[b-up2acfq1nk] {
    /* Override do .mp-studio para dar mais largura à coluna principal
       (o painel lateral só precisa caber o preview). */
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
}
@media (max-width: 1199.98px) {
    .studio-grid[b-up2acfq1nk] { grid-template-columns: minmax(0, 1fr); }
}

/* --- Painel da etapa ativa ------------------------------------------ */
.studio-pane[b-up2acfq1nk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Importante: usamos o atributo nativo `hidden` para esconder painéis
   inativos. Isso mantém a DOM montada — textareas preservam scroll/cursor
   e nenhum estado interno é resetado ao trocar de etapa. */
.studio-pane[hidden][b-up2acfq1nk] { display: none !important; }

.studio-pane-header[b-up2acfq1nk] {
    padding: 0.25rem 0 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    margin-bottom: 0.4rem;
}

.studio-pane-title[b-up2acfq1nk] {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--bs-body-color, #1f2937);
    line-height: 1.3;
}

.studio-pane-desc[b-up2acfq1nk] {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, #6c757d);
    max-width: 72ch;
}

/* --- Painel lateral sticky (preview) -------------------------------- */
.studio-aside[b-up2acfq1nk] { min-width: 0; }
.studio-aside-sticky[b-up2acfq1nk] {
    /* Sticky abaixo do topbar (56px) + folga do stepper (~3rem) */
    top: calc(var(--topbar-height, 56px) + 4.2rem);
}
@media (max-width: 1199.98px) {
    .studio-aside-sticky[b-up2acfq1nk] {
        position: static;
        top: auto;
    }
}

.studio-preview[b-up2acfq1nk] {
    /* Garante que o preview-pane (já estilizado acima) preencha o aside
       sem ficar pequeno demais. */
    min-height: 360px;
}

.studio-preview-status[b-up2acfq1nk] { margin-left: auto; display: inline-flex; }

/* --- Resumo da etapa Revisar ---------------------------------------- */
.studio-summary-flow[b-up2acfq1nk] { margin-bottom: 1rem; }
.studio-summary-h3[b-up2acfq1nk] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.5rem 0 0.5rem 0;
    color: var(--bs-body-color, #1f2937);
}

.studio-checklist[b-up2acfq1nk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.studio-checklist li[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.4rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    font-size: 0.85rem;
}

.studio-checklist li.is-ok[b-up2acfq1nk]      { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.studio-checklist li.is-pending[b-up2acfq1nk] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.studio-checklist li.studio-check-optional[b-up2acfq1nk] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-color: var(--bs-border-color, #dee2e6);
    color: var(--bs-secondary-color, #6c757d);
}

.studio-check-mark[b-up2acfq1nk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

/* =====================================================================
   Rastreabilidade da mensagem — cartão recolhível dentro de Configurar
   ---------------------------------------------------------------------
   Visualmente diferenciado dos `config-card` por uma borda esquerda
   discreta (teal) que sinaliza "configuração de apoio". Quando
   recolhido, o cartão mostra apenas o toggle (ícone + título + resumo
   + CTA quando vazio). Aberto, expõe os campos originais sem mudança
   de comportamento.
   ===================================================================== */
.trace-card[b-up2acfq1nk] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 3px solid #0d9488;
    border-radius: 0.6rem;
    margin-bottom: 1.1rem;
    overflow: hidden;
}

.trace-toggle[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1.05rem;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--bs-body-color, #1f2937);
    transition: background-color 120ms ease;
}

.trace-toggle:hover[b-up2acfq1nk] {
    background: var(--bs-secondary-bg, #e9ecef);
}

.trace-card.is-open .trace-toggle[b-up2acfq1nk] {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.trace-toggle-caret[b-up2acfq1nk] {
    color: var(--bs-secondary-color, #6c757d);
    transition: transform 150ms ease;
    flex-shrink: 0;
    width: 14px;
    display: inline-flex;
    justify-content: center;
}

.trace-card.is-open .trace-toggle-caret[b-up2acfq1nk] {
    transform: rotate(90deg);
}

.trace-toggle-icon[b-up2acfq1nk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.45rem;
    background: rgba(13, 148, 136, 0.10);
    color: #0d9488;
    flex-shrink: 0;
}

.trace-toggle-content[b-up2acfq1nk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.3;
}

.trace-toggle-titleline[b-up2acfq1nk] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.trace-toggle-title[b-up2acfq1nk] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bs-body-color, #1f2937);
}

.trace-toggle-tag[b-up2acfq1nk] {
    font-size: 0.7rem;
    padding: 0.05rem 0.5rem;
}

.trace-toggle-summary[b-up2acfq1nk] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--bs-font-monospace, monospace);
}

/* Quando há dados configurados, o resumo perde o aspecto "monospace
   apagado" e usa tipografia normal para parecer "fato" e não placeholder. */
.trace-card.is-open .trace-toggle-summary[b-up2acfq1nk],
.trace-toggle:has(.tag-success) ~ * .trace-toggle-summary[b-up2acfq1nk] {
    /* fallback noop — :has() pode não estar disponível em todos os
       browsers; o fonte mono no resumo é aceitável. */
}

/* CTA explícito à direita quando o cartão está recolhido E ainda
   não há nenhuma configuração — o "Configurar busca por pedido/
   protocolo →" age como botão visual no fim da linha. */
.trace-toggle-cta[b-up2acfq1nk] {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-accent, #0d9488);
    padding: 0.25rem 0.55rem;
    border-radius: 0.35rem;
    background: rgba(13, 148, 136, 0.08);
    white-space: nowrap;
}

.trace-toggle:hover .trace-toggle-cta[b-up2acfq1nk] {
    background: rgba(13, 148, 136, 0.16);
}

@media (max-width: 575.98px) {
    .trace-toggle-cta[b-up2acfq1nk] {
        display: none;
    }
}

.trace-body[b-up2acfq1nk] {
    padding: 0.9rem 1.05rem 1rem 1.05rem;
}

.trace-body-intro[b-up2acfq1nk] {
    margin: 0 0 0.85rem 0;
    font-size: 0.83rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.5;
    max-width: 72ch;
}

/* --- Barra de ação sticky no fim ------------------------------------ */
.studio-actionbar[b-up2acfq1nk] {
    position: sticky;
    bottom: 0.5rem;
    z-index: 9;
    margin-top: 1.1rem;
    /* Fundo sólido reforçado: sem isso, a transparência do `.action-bar`
       global deixa textareas/preview vazar enquanto ela flutua. */
    background: var(--color-surface, #fff);
    box-shadow: 0 -4px 12px -8px rgba(16, 24, 40, 0.18),
                var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));
}

/* =====================================================================
   Foco visível e ajustes finais de UX/responsividade
   ---------------------------------------------------------------------
   Os browsers já mostram o outline padrão em `<button>` e `<select>`,
   mas o ring custom (`--ring` do app.css) é mais consistente com o
   restante do sistema. Aplicamos `:focus-visible` (não `:focus`) para
   só aparecer em navegação por teclado, sem poluir cliques.
   ===================================================================== */
.studio-stepper-item:focus-visible[b-up2acfq1nk],
.advanced-toggle:focus-visible[b-up2acfq1nk],
.trace-toggle:focus-visible[b-up2acfq1nk],
.help-trigger:focus-visible[b-up2acfq1nk] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.28);
    border-radius: var(--radius-md, 6px);
    position: relative;
    z-index: 1;
}

/* Reserva espaço no fim da coluna principal para que a barra de ação
   sticky não sobreponha o último parágrafo da etapa Revisar ou o
   último resultado de IA na etapa "IA e regra". */
.mp-studio-main[b-up2acfq1nk] {
    padding-bottom: 4.5rem;
}

/* Mobile: stepper precisa ser ainda mais compacto pra caber 5 etapas
   sem quebrar. Ocultamos o subtítulo e empilhamos número + título
   verticalmente em telas muito estreitas. */
@media (max-width: 575.98px) {
    .studio-stepper-item[b-up2acfq1nk] {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        padding: 0.45rem 0.3rem;
        min-width: 0;
    }
    .studio-stepper-title[b-up2acfq1nk] {
        font-size: 0.7rem;
        text-align: center;
    }
    .studio-stepper-dot[b-up2acfq1nk] {
        top: 0.3rem;
        right: 0.3rem;
    }
    /* O título do pane fica mais compacto pra dar mais respiro ao conteúdo */
    .studio-pane-title[b-up2acfq1nk] { font-size: 1.05rem; }
    .studio-pane-desc[b-up2acfq1nk] { font-size: 0.82rem; }
}

/* O preview lateral em telas muito largas pode ficar largo demais;
   limitamos para evitar JSONs grandes empurrando a barra de rolagem
   horizontal para fora da área visível. */
@media (min-width: 1600px) {
    .studio-grid[b-up2acfq1nk] {
        grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr);
    }
}

/* =====================================================================
   Ajuda da regra — drawer lateral
   ---------------------------------------------------------------------
   Position:fixed para não interferir no layout do studio. Backdrop
   semi-opaco cobre a tela e fecha o drawer ao clicar. O conteúdo do
   drawer rola independentemente do corpo da página. Em telas pequenas
   ocupa quase a tela inteira (95vw).
   ===================================================================== */
.help-drawer-backdrop[b-up2acfq1nk] {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 23, 0.45);
    z-index: 1040;
    animation: helpDrawerFade-b-up2acfq1nk 150ms ease-out;
}

.help-drawer[b-up2acfq1nk] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 95vw);
    background: var(--bs-body-bg, #fff);
    box-shadow: -8px 0 24px -6px rgba(16, 24, 40, 0.18);
    z-index: 1041;
    display: flex;
    flex-direction: column;
    animation: helpDrawerSlideIn-b-up2acfq1nk 200ms ease-out;
}

@keyframes helpDrawerFade-b-up2acfq1nk {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes helpDrawerSlideIn-b-up2acfq1nk {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* Respeita preferência do usuário por movimento reduzido: desliga
   as animações de fade-in/slide-in do drawer. O foco programático
   já cuida da continuidade do teclado — a animação é só estética. */
@media (prefers-reduced-motion: reduce) {
    .help-drawer-backdrop[b-up2acfq1nk],
    .help-drawer[b-up2acfq1nk] {
        animation: none;
    }
}

.help-drawer-header[b-up2acfq1nk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.help-drawer-title[b-up2acfq1nk] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-body-color, #1f2937);
}

.help-drawer-body[b-up2acfq1nk] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.1rem 1.5rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.help-drawer-intro[b-up2acfq1nk] {
    margin: 0 0 0.4rem 0;
    padding: 0.6rem 0.8rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.4rem;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, #6c757d);
}

/* Reuso das classes `.reference-item` (já definidas mais acima): cada
   <details> dentro do drawer é um cartão expansível com summary +
   descrição + snippet. Aqui só precisamos garantir espaçamento entre
   eles no contexto vertical do drawer. */
.help-drawer-body .reference-item[b-up2acfq1nk] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.4rem;
    background: var(--bs-body-bg, #fff);
    padding: 0.55rem 0.8rem;
}

.help-drawer-body .reference-item[open][b-up2acfq1nk] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* ============================================================
   Saldo da cota mensal de IA no painel "IA e regra".
   Visível apenas quando o tenant tem assinatura ativa. Quando
   o saldo zera, vira destaque vermelho para chamar atenção.
   ============================================================ */
.ai-credits-pill[b-up2acfq1nk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0.6rem 0;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg, #f0f4ff);
    color: var(--bs-secondary-color, #495057);
    font-size: 0.85rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.ai-credits-pill strong[b-up2acfq1nk] {
    color: var(--bs-body-color, #212529);
    font-weight: 600;
}

.ai-credits-pill-sep[b-up2acfq1nk] {
    opacity: 0.5;
}

.ai-credits-pill-link[b-up2acfq1nk] {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    text-decoration: underline;
    color: var(--bs-primary, #0d6efd);
}

.ai-credits-pill-empty[b-up2acfq1nk] {
    background: #fff3f3;
    border-color: #f0c2c2;
    color: #842029;
}

/* Esclarecimento do que conta como cobrança, exibido logo abaixo do pill
   de créditos. Discreto para não competir com a CTA "Gerar regra". */
.ai-credits-note[b-up2acfq1nk] {
    margin: 0.25rem 0 0.75rem 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--bs-secondary-color, #6c757d);
}

/* =====================================================================
   Layout travado no viewport — só em "Novo mapeamento" (o Create.razor
   envolve o editor em .mapping-studio-page). O <form> vira coluna flex:
   stepper e barra de ação ficam fixos (flex:0) nas bordas e a área das
   etapas (.mp-studio) ocupa o restante, rolando internamente só quando
   o conteúdo não couber — a página em si nunca rola.
   Em < 992px nada disso aplica (o editor flui e rola no body normalmente).
   As regras de lock de html/body/app-content estão no app.css (global).
   ===================================================================== */
@media (min-width: 992px) {
    /* (A regra de .mapping-lab-form fica no app.css global: o <form> é
       renderizado pelo componente EditForm e NÃO recebe o atributo de
       escopo deste componente, então um seletor scoped não casaria.) */

    /* Stepper e barra de ação deixam de ser sticky e viram itens fixos
       da coluna flex — sempre visíveis no topo e no rodapé. */
    .mapping-studio-page .studio-stepper[b-up2acfq1nk] {
        position: static;
        flex: 0 0 auto;
        margin-bottom: 0.8rem;
    }
    .mapping-studio-page .studio-actionbar[b-up2acfq1nk] {
        position: static;
        flex: 0 0 auto;
        margin-top: 0.8rem;
    }

    /* Única região rolável — e só dispara quando a etapa não cabe. */
    .mapping-studio-page .mp-studio[b-up2acfq1nk] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Sem a barra sticky sobrepondo o conteúdo, não precisa do respiro
       de 4.5rem reservado no fim da coluna principal. */
    .mapping-studio-page .mp-studio-main[b-up2acfq1nk] {
        padding-bottom: 0.5rem;
    }

    /* O preview gruda no topo da área rolável (não mais do viewport). */
    .mapping-studio-page .studio-aside-sticky[b-up2acfq1nk] {
        top: 0;
    }
}
/* /Components/Pages/Mappings/MappingStepHeader.razor.rz.scp.css */
/* Cabeçalho de sub-etapa: número à esquerda, título/descrição ao
   centro e badge opcional à direita. Estilo discreto — o objetivo
   é guiar sem competir com o conteúdo da etapa. */
.step-header[b-iu2w9aff0b] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.step-num[b-iu2w9aff0b] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #0d6efd;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

.step-text[b-iu2w9aff0b] {
    flex: 1 1 auto;
    min-width: 0;
}

.step-title[b-iu2w9aff0b] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.2rem 0;
    line-height: 1.3;
    color: var(--bs-body-color, #1f2937);
}

.step-desc[b-iu2w9aff0b] {
    font-size: 0.83rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0;
    line-height: 1.45;
    max-width: 64ch;
}

.step-status[b-iu2w9aff0b] {
    flex-shrink: 0;
    align-self: center;
}
/* /Components/Pages/Mappings/Test.razor.rz.scp.css */
/* =========================================================
   Contexto: source → rule → target (versão compacta da Details)
   ========================================================= */
.test-context .panel-body[b-7u7mmec6ag] {
    padding: 0.7rem 1rem;
}

.test-context-row[b-7u7mmec6ag] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0.6rem;
}

@media (max-width: 991.98px) {
    .test-context-row[b-7u7mmec6ag] {
        grid-template-columns: 1fr;
    }
    .test-context-arrow[b-7u7mmec6ag] {
        transform: rotate(90deg);
        text-align: center;
    }
}

.test-context-card[b-7u7mmec6ag] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
}

.test-context-card-rule[b-7u7mmec6ag] {
    background: linear-gradient(180deg,
        rgba(13, 110, 253, 0.10),
        rgba(13, 110, 253, 0.02));
    border-color: rgba(13, 110, 253, 0.30);
}

.test-context-label[b-7u7mmec6ag] {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color, #6c757d);
}

.test-context-name[b-7u7mmec6ag] {
    font-weight: 600;
    color: var(--bs-body-color, #1f2937);
    text-decoration: none;
}

.test-context-name:hover[b-7u7mmec6ag] {
    text-decoration: underline;
}

.test-context-meta[b-7u7mmec6ag] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
}

.test-context-arrow[b-7u7mmec6ag] {
    align-self: center;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 700;
    font-size: 1.1rem;
}

/* =========================================================
   Banner "sandbox" — reforça que nada persiste / nada envia
   ========================================================= */
.test-notice[b-7u7mmec6ag] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.test-notice-icon[b-7u7mmec6ag] {
    flex-shrink: 0;
    color: #0d6efd;
}

/* =========================================================
   Lab grid: aqui usamos 2 painéis (input | output)
   ========================================================= */
.lab-grid[b-7u7mmec6ag] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .lab-grid[b-7u7mmec6ag] {
        grid-template-columns: 1fr;
    }
}

.lab-pane[b-7u7mmec6ag] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
}

.lab-pane-header[b-7u7mmec6ag] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.lab-pane-step[b-7u7mmec6ag] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #0d6efd;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.lab-pane-title[b-7u7mmec6ag] {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-body-color, #1f2937);
}

.lab-pane-toolbar[b-7u7mmec6ag] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
}

.lab-pane-hint[b-7u7mmec6ag] {
    font-size: 0.74rem;
    color: var(--bs-secondary-color, #6c757d);
}

.lab-pane-error[b-7u7mmec6ag] {
    padding: 0.45rem 0.75rem;
    background: #fff5f5;
    border-top: 1px solid #f5c2c7;
    color: #9b1c1c;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.lab-textarea[b-7u7mmec6ag] {
    flex: 1 1 auto;
    min-height: 420px;
    resize: vertical;
    font-size: 0.875rem;
    line-height: 1.55;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-radius: 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    tab-size: 2;
    -moz-tab-size: 2;
}

@media (max-width: 991.98px) {
    .lab-textarea[b-7u7mmec6ag] { min-height: 320px; }
}

.lab-textarea:focus[b-7u7mmec6ag] {
    box-shadow: none;
    outline: 2px solid rgba(13, 110, 253, 0.25);
    outline-offset: -2px;
}

.lab-textarea.is-invalid[b-7u7mmec6ag] {
    background: #fff5f5;
    background-image: none;
    padding-right: 0.85rem;
}

.lab-output[b-7u7mmec6ag] {
    flex: 1 1 auto;
    min-height: 420px;
    margin: 0;
    padding: 0.65rem 0.85rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: 0.875rem;
    line-height: 1.55;
    overflow: auto;
    white-space: pre;
    color: var(--bs-body-color, #1f2937);
    tab-size: 2;
    -moz-tab-size: 2;
}

@media (max-width: 991.98px) {
    .lab-output[b-7u7mmec6ag] { min-height: 280px; }
}

.lab-output-error[b-7u7mmec6ag] {
    background: #fff5f5;
    color: #9b1c1c;
    white-space: pre-wrap;
}

.lab-output-placeholder[b-7u7mmec6ag] {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

.lab-warnings[b-7u7mmec6ag] {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: #fffbeb;
    padding: 0.55rem 0.8rem;
}

.lab-warnings-title[b-7u7mmec6ag] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b45309;
    margin-bottom: 0.25rem;
}

.lab-warnings-list[b-7u7mmec6ag] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    color: #92400e;
}

/* =========================================================
   "Ver a regra que está sendo testada" (read-only)
   ========================================================= */
.test-rule-view[b-7u7mmec6ag] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
    padding: 0.55rem 0.8rem;
}

.test-rule-view summary[b-7u7mmec6ag] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

.test-rule-pre[b-7u7mmec6ag] {
    margin: 0.6rem 0 0 0;
    padding: 0.55rem 0.75rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    font-size: 0.78rem;
    line-height: 1.4;
    max-height: 300px;
    overflow: auto;
    white-space: pre;
}

/* =========================================================
   AI Suggestion Panel (Test page)
   ========================================================= */
.ai-suggestion-panel[b-7u7mmec6ag] {
    border: 1px solid #ddd6fe;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
}

.ai-suggestion-header[b-7u7mmec6ag] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, #f3f0ff 0%, #ede9fe 100%);
    border-bottom: 1px solid #ddd6fe;
}

.ai-suggestion-icon[b-7u7mmec6ag] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: #7c3aed;
    color: #fff;
    flex-shrink: 0;
}

.ai-suggestion-title[b-7u7mmec6ag] {
    font-weight: 600;
    font-size: 0.82rem;
    color: #5b21b6;
}

.ai-suggestion-body[b-7u7mmec6ag] {
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ai-suggestion-actions[b-7u7mmec6ag] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ai-disclaimer[b-7u7mmec6ag] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 0.375rem;
    font-size: 0.76rem;
    color: #6d28d9;
    line-height: 1.45;
}

/* Result boxes */
.ai-result-box[b-7u7mmec6ag] {
    padding: 0.55rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    line-height: 1.5;
}

.ai-result-label[b-7u7mmec6ag] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.ai-result-error[b-7u7mmec6ag] {
    background: #fff5f5;
    border: 1px solid #f5c2c7;
    color: #9b1c1c;
}

.ai-result-info[b-7u7mmec6ag] {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    color: #4c1d95;
}

.ai-result-info .ai-result-label[b-7u7mmec6ag] {
    color: #6d28d9;
}

.ai-result-warning[b-7u7mmec6ag] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.ai-result-warning .ai-result-label[b-7u7mmec6ag] {
    color: #b45309;
}

.ai-result-rule[b-7u7mmec6ag] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.ai-result-rule .ai-result-label[b-7u7mmec6ag] {
    color: #5b21b6;
}

.ai-result-pre[b-7u7mmec6ag] {
    margin: 0.4rem 0 0 0;
    padding: 0.55rem 0.7rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.4;
    max-height: 300px;
    overflow: auto;
    white-space: pre;
}

.ai-inline-input[b-7u7mmec6ag] {
    max-width: 260px;
    font-size: 0.78rem;
}
/* /Components/Pages/Messages/Details.razor.rz.scp.css */
/* =====================================================================
   Detalhe da mensagem
   Header compacto · timeline · tabs locais · painéis específicos.
   --------------------------------------------------------------------- */

/* ─── Loading inicial (mesmo card do Index, scoped aqui) ───────────── */
.msg-list-loading[b-f6qerm0uqi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ─── Métricas + Headers em duas colunas em desktop ────────────────── */
.message-grid[b-f6qerm0uqi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}
@media (max-width: 991.98px) {
    .message-grid[b-f6qerm0uqi] { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Linhas auxiliares (erro, response body) sem hover/borda dupla ── */
[b-f6qerm0uqi] .attempt-detail-row td { padding-top: 0; padding-bottom: var(--space-3); }
[b-f6qerm0uqi] .attempt-detail-row:hover td { background: transparent; }

[b-f6qerm0uqi] details > summary {
    cursor: pointer;
    user-select: none;
    color: var(--color-text-muted);
    padding: 0.25rem 0;
}
[b-f6qerm0uqi] details[open] > summary { color: var(--color-text); }

/* =====================================================================
   Header compacto de resumo
   Chips de identidade no topo + linha pequena de IDs. Substitui o
   <dl> antigo (que migrou para a aba "Resumo").
   --------------------------------------------------------------------- */
.detail-summary[b-f6qerm0uqi] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}

.detail-summary-chips[b-f6qerm0uqi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.detail-summary-time[b-f6qerm0uqi] {
    font-size: 0.78rem;
    color: var(--color-text-subtle);
    margin-left: auto;
}

.detail-summary-ids[b-f6qerm0uqi] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.detail-summary-id-item[b-f6qerm0uqi] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.detail-summary-id-label[b-f6qerm0uqi] {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
}

.detail-summary-id-value[b-f6qerm0uqi] {
    flex: 1 1 auto;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 32ch;
}

/* =====================================================================
   Timeline operacional
   Recebida → Transformada → Entregue/Falha → Confirmada.
   Horizontal em desktop, vertical empilhada em mobile.
   --------------------------------------------------------------------- */
.detail-timeline[b-f6qerm0uqi] {
    display: flex;
    list-style: none;
    padding: var(--space-5) var(--space-5) var(--space-4);
    margin: 0 0 var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow-x: auto;
}

.timeline-step[b-f6qerm0uqi] {
    flex: 1 1 0;
    min-width: 9rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-right: var(--space-3);
}
.timeline-step:last-child[b-f6qerm0uqi] { padding-right: 0; }

.timeline-step-marker[b-f6qerm0uqi] {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: var(--space-3);
    min-height: 14px;
}

.timeline-step-dot[b-f6qerm0uqi] {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--color-text-subtle);
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 4px var(--color-border-strong);
    flex-shrink: 0;
}

.timeline-step-line[b-f6qerm0uqi] {
    flex: 1 1 auto;
    height: 2px;
    background: var(--color-border-strong);
    margin-left: 6px;
    border-radius: 999px;
}

.timeline-step-body[b-f6qerm0uqi] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-right: var(--space-3);
    min-width: 0;
}

.timeline-step-title[b-f6qerm0uqi] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.timeline-step-state[b-f6qerm0uqi] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-step-time[b-f6qerm0uqi] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

.timeline-step-error[b-f6qerm0uqi] {
    font-size: 0.72rem;
    color: var(--color-danger);
    margin-top: 0.2rem;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ─── Estados da timeline ──────────────────────────────────────────── */
.timeline-step.is-done .timeline-step-dot[b-f6qerm0uqi] {
    background: var(--color-success);
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 4px var(--color-success-soft);
}
.timeline-step.is-done .timeline-step-line[b-f6qerm0uqi] {
    background: var(--color-success);
}
.timeline-step.is-done .timeline-step-state[b-f6qerm0uqi] {
    color: var(--color-success);
}

.timeline-step.is-active .timeline-step-dot[b-f6qerm0uqi] {
    background: var(--color-info);
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 4px var(--color-info-soft);
    animation: timeline-pulse-b-f6qerm0uqi 1.6s ease-in-out infinite;
}
.timeline-step.is-active .timeline-step-state[b-f6qerm0uqi] {
    color: var(--color-info);
}

.timeline-step.is-failed .timeline-step-dot[b-f6qerm0uqi] {
    background: var(--color-danger);
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 4px var(--color-danger-soft);
}
.timeline-step.is-failed .timeline-step-line[b-f6qerm0uqi] {
    background: var(--color-danger);
    opacity: 0.55;
}
.timeline-step.is-failed .timeline-step-state[b-f6qerm0uqi] {
    color: var(--color-danger);
}
.timeline-step.is-failed .timeline-step-title[b-f6qerm0uqi] {
    color: var(--color-danger);
}

.timeline-step.is-pending .timeline-step-dot[b-f6qerm0uqi] {
    background: var(--color-warning);
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 4px var(--color-warning-soft);
}
.timeline-step.is-pending .timeline-step-state[b-f6qerm0uqi] {
    color: var(--color-warning);
}

.timeline-step.is-skipped[b-f6qerm0uqi] {
    opacity: 0.6;
}
.timeline-step.is-skipped .timeline-step-dot[b-f6qerm0uqi] {
    background: var(--color-surface-hover);
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 4px var(--color-border);
}

@keyframes timeline-pulse-b-f6qerm0uqi {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

/* Respeita usuários com sensibilidade vestibular ou que desligaram
   animações no sistema. Desliga o pulse do passo "atual" — a indicação
   visual permanece (cor + halo + aria-current="step"), só sem motion. */
@media (prefers-reduced-motion: reduce) {
    .timeline-step.is-active .timeline-step-dot[b-f6qerm0uqi] {
        animation: none;
    }
}

/* Mobile: timeline vertical, dot+linha à esquerda do corpo. */
@media (max-width: 767.98px) {
    .detail-timeline[b-f6qerm0uqi] {
        flex-direction: column;
        padding: var(--space-4);
        overflow-x: visible;
    }
    .timeline-step[b-f6qerm0uqi] {
        flex: 0 0 auto;
        flex-direction: row;
        min-width: 0;
        padding-right: 0;
        align-items: stretch;
    }
    .timeline-step:not(:last-child)[b-f6qerm0uqi] {
        padding-bottom: var(--space-3);
    }
    .timeline-step-marker[b-f6qerm0uqi] {
        flex-direction: column;
        width: auto;
        margin: 0 var(--space-3) 0 0;
        align-items: center;
    }
    .timeline-step-line[b-f6qerm0uqi] {
        width: 2px;
        height: auto;
        flex: 1 1 auto;
        margin: 6px 0 0;
    }
    .timeline-step-body[b-f6qerm0uqi] {
        flex: 1 1 auto;
        padding-right: 0;
        padding-bottom: var(--space-2);
    }
}

/* =====================================================================
   Tabs locais
   Estado server-side em _activeTab. Tabs simples, sem JS extra.
   --------------------------------------------------------------------- */
.detail-tabs[b-f6qerm0uqi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.detail-tab[b-f6qerm0uqi] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.6rem var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--motion-fast), border-color var(--motion-fast);
}
.detail-tab:hover[b-f6qerm0uqi] {
    color: var(--color-text);
}
.detail-tab.is-active[b-f6qerm0uqi] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.detail-tab:focus-visible[b-f6qerm0uqi] {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

.detail-tab-count[b-f6qerm0uqi] {
    background: var(--color-surface-hover);
    color: var(--color-text-subtle);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.detail-tab.is-active .detail-tab-count[b-f6qerm0uqi] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.detail-tab-dot[b-f6qerm0uqi] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.detail-tab-dot-danger[b-f6qerm0uqi] { background: var(--color-danger); }

.detail-panel[b-f6qerm0uqi] {
    display: block;
}
.detail-panel:focus-visible[b-f6qerm0uqi] {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-md);
}

/* ─── Destaque do passo atual na timeline (aria-current="step") ────── */
.timeline-step.is-current .timeline-step-title[b-f6qerm0uqi] {
    font-weight: 700;
}
.timeline-step.is-current .timeline-step-dot[b-f6qerm0uqi] {
    /* Anel mais grosso reforça o foco visual sem alterar a cor do estado. */
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 6px var(--color-border-strong);
}
.timeline-step.is-current.is-active .timeline-step-dot[b-f6qerm0uqi] {
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 6px rgba(23, 92, 211, 0.25);
}
.timeline-step.is-current.is-failed .timeline-step-dot[b-f6qerm0uqi] {
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 6px rgba(180, 35, 24, 0.25);
}
.timeline-step.is-current.is-pending .timeline-step-dot[b-f6qerm0uqi] {
    box-shadow: 0 0 0 2px var(--color-surface),
                0 0 0 6px rgba(181, 71, 8, 0.25);
}
/* /Components/Pages/Messages/Index.razor.rz.scp.css */
/* =====================================================================
   Página Mensagens — Central de Rastreio
   Escopo isolado por Blazor (atributo b-…) — segue tokens do app.css.
   --------------------------------------------------------------------- */

/* ─── Loading inicial em card (mesmo formato dos outros estados) ───── */
.msg-list-loading[b-qsgrspkest] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-5);
    /* min-height reserva espaço parecido com a lista que vai aparecer
       depois — sem isso, o card era curto (≈40px) e a transição para
       a lista (≈400px+) era percebida como "salto", mesmo sem flicker
       lógico no @code. */
    min-height: 240px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ─── Filtros de data (legado, usado dentro de "Filtros avançados") */
.filter-date[b-qsgrspkest] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.filter-date-label[b-qsgrspkest] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    margin: 0;
}
.filter-date input[b-qsgrspkest] {
    width: 9.5rem;
    flex: 0 0 auto;
}

/* =====================================================================
   Hero card de busca
   Campo grande de busca por referência. Responde à pergunta "esse pedido
   entrou?" sem o operador precisar pensar em qual coluna olhar.
   --------------------------------------------------------------------- */
.msg-search-card[b-qsgrspkest] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
}

.msg-search-label[b-qsgrspkest] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-subtle);
    margin: 0 0 var(--space-2);
}

.msg-search-row[b-qsgrspkest] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.msg-search-field[b-qsgrspkest] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.msg-search-icon[b-qsgrspkest] {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-subtle);
    pointer-events: none;
}

.msg-search-input[b-qsgrspkest] {
    width: 100%;
    padding: 0.7rem 2.4rem 0.7rem 2.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
    box-sizing: border-box;
}

.msg-search-input[b-qsgrspkest]::placeholder {
    color: var(--color-text-subtle);
}

.msg-search-input[b-qsgrspkest]::-webkit-search-cancel-button,
.msg-search-input[b-qsgrspkest]::-webkit-search-decoration {
    display: none;
}

.msg-search-input:focus[b-qsgrspkest] {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--ring);
}

.msg-search-clear[b-qsgrspkest] {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.msg-search-clear:hover[b-qsgrspkest] {
    background: var(--color-border-strong);
    color: var(--color-text);
}
.msg-search-clear:focus-visible[b-qsgrspkest] {
    outline: none;
    box-shadow: var(--ring);
}

.msg-search-submit[b-qsgrspkest] {
    flex: 0 0 auto;
    min-width: 6.5rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.msg-search-meta[b-qsgrspkest] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    font-size: 0.78rem;
    color: var(--color-text-subtle);
}

.msg-search-count[b-qsgrspkest] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.msg-search-clear-all[b-qsgrspkest] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-accent);
    font-size: 0.78rem;
    cursor: pointer;
}
.msg-search-clear-all:hover[b-qsgrspkest] { text-decoration: underline; }
.msg-search-clear-all:focus-visible[b-qsgrspkest] {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

/* =====================================================================
   Chips de filtros rápidos
   Mapeiam para campos existentes — não há filtro novo no backend.
   --------------------------------------------------------------------- */
.msg-chip-bar[b-qsgrspkest] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
}

.msg-chip[b-qsgrspkest] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--motion-fast),
                color var(--motion-fast),
                border-color var(--motion-fast),
                box-shadow var(--motion-fast);
}
.msg-chip:hover[b-qsgrspkest] {
    background: var(--color-surface-hover);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.msg-chip:focus-visible[b-qsgrspkest] {
    outline: none;
    box-shadow: var(--ring);
}

.msg-chip.is-active[b-qsgrspkest] {
    background: var(--color-text);
    color: var(--color-text-inverse);
    border-color: var(--color-text);
}
.msg-chip.is-active:hover[b-qsgrspkest] {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-text-inverse);
}

/* Cores semânticas só aparecem quando o chip está ativo — alinha o
   chip selecionado com a cor do status equivalente já usada nas pills
   da tabela, mantendo o vocabulário visual coerente.                 */
.msg-chip-danger.is-active[b-qsgrspkest] {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-text-inverse);
}
.msg-chip-danger.is-active:hover[b-qsgrspkest] {
    background: #912012;
    border-color: #912012;
}

.msg-chip-success.is-active[b-qsgrspkest] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-inverse);
}
.msg-chip-success.is-active:hover[b-qsgrspkest] {
    background: #016037;
    border-color: #016037;
}

.msg-chip-info.is-active[b-qsgrspkest] {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-text-inverse);
}
.msg-chip-info.is-active:hover[b-qsgrspkest] {
    background: #134ba7;
    border-color: #134ba7;
}

.msg-chip-warning.is-active[b-qsgrspkest] {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-text-inverse);
}
.msg-chip-warning.is-active:hover[b-qsgrspkest] {
    background: #913606;
    border-color: #913606;
}

.msg-chip-sep[b-qsgrspkest] {
    width: 1px;
    height: 18px;
    background: var(--color-border);
    margin: 0 var(--space-1);
}

/* =====================================================================
   Filtros avançados (disclosure)
   Some por padrão; quando deep-link traz grupo/endpoint, abre sozinho.
   --------------------------------------------------------------------- */
.msg-advanced[b-qsgrspkest] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.msg-advanced-toggle[b-qsgrspkest] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 0.55rem var(--space-4);
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}
.msg-advanced-toggle:hover[b-qsgrspkest] {
    background: var(--color-surface-hover);
    color: var(--color-text);
}
.msg-advanced-toggle:focus-visible[b-qsgrspkest] {
    outline: none;
    box-shadow: var(--ring);
}

.msg-advanced-caret[b-qsgrspkest] {
    display: inline-block;
    width: 0.85rem;
    text-align: center;
    color: var(--color-text-subtle);
    transition: transform var(--motion-fast);
    transform: rotate(0deg);
}
.msg-advanced-caret.is-open[b-qsgrspkest] {
    transform: rotate(90deg);
}

.msg-advanced-badge[b-qsgrspkest] {
    margin-left: var(--space-2);
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.msg-advanced-body[b-qsgrspkest] {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* O filter-bar reaparece aqui mas embutido — neutraliza o card visual
   que ele já carrega no app.css; o card é o do disclosure.            */
.msg-advanced-body .filter-bar[b-qsgrspkest] {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/* =====================================================================
   Lista operacional
   Grid > table. Em desktop vira tabela "respirada"; em mobile vira
   cards empilhados via media query (sem alterar o markup).
   --------------------------------------------------------------------- */
.msg-list[b-qsgrspkest] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: opacity 0.2s ease;
}
.msg-list.panel-loading[b-qsgrspkest] {
    opacity: 0.55;
    pointer-events: none;
}

/* Mesmas colunas para header e linhas — define só aqui.               */
.msg-list-head[b-qsgrspkest],
.msg-list-row[b-qsgrspkest] {
    display: grid;
    grid-template-columns:
        minmax(7.5rem, 9rem)
        minmax(14rem, 1.6fr)
        minmax(9rem, 1fr)
        minmax(5.5rem, 7rem)
        minmax(12rem, 1.2fr)
        4rem
        6rem;
    gap: var(--space-3);
    align-items: center;
}

.msg-list-head[b-qsgrspkest] {
    padding: var(--space-3) var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    letter-spacing: 0.04em;
    font-weight: 600;
    line-height: 1.4;
}

.msg-list-row[b-qsgrspkest] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    transition: background-color var(--motion-fast);
    min-height: 3.5rem;
}
.msg-list-row:last-child[b-qsgrspkest] { border-bottom: 0; }
.msg-list-row:hover[b-qsgrspkest] { background: var(--color-surface-muted); }

/* Faixa lateral discreta para scan visual de problemas/pendências.   */
.msg-list-row.is-failure[b-qsgrspkest] {
    border-left-color: var(--color-danger);
    background: linear-gradient(to right, var(--color-danger-soft), transparent 35%);
}
.msg-list-row.is-failure:hover[b-qsgrspkest] {
    background: linear-gradient(to right, var(--color-danger-soft), var(--color-surface-muted) 35%);
}
.msg-list-row.is-pending[b-qsgrspkest] {
    border-left-color: var(--color-warning);
}

.msg-cell[b-qsgrspkest] {
    min-width: 0;
}
.msg-cell.num[b-qsgrspkest] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Referência (primária + secundária) ------------------------------- */
.msg-ref-primary[b-qsgrspkest] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}
.msg-ref-tag[b-qsgrspkest] {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
    background: var(--color-surface-hover);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.35rem;
    line-height: 1.5;
}
.msg-ref-value[b-qsgrspkest] {
    flex: 1 1 auto;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-ref-secondary[b-qsgrspkest] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    line-height: 1.3;
}
.msg-ref-secondary-item[b-qsgrspkest] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-ref-secondary-label[b-qsgrspkest] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-subtle);
    opacity: 0.7;
}
.msg-ref-secondary-value[b-qsgrspkest] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
.msg-ref-secondary-sep[b-qsgrspkest] {
    color: var(--color-text-subtle);
    opacity: 0.45;
}

/* Endpoint --------------------------------------------------------- */
.msg-endpoint-link[b-qsgrspkest] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--color-text);
    border-bottom: 1px dashed transparent;
}
.msg-endpoint-link:hover[b-qsgrspkest] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    text-decoration: none;
}

/* Recebida --------------------------------------------------------- */
.msg-cell-time[b-qsgrspkest] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Resultado -------------------------------------------------------- */
.msg-cell-outcome[b-qsgrspkest] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
}
.msg-outcome-detail[b-qsgrspkest] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tentativas ------------------------------------------------------- */
.msg-cell-attempts[b-qsgrspkest] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Ações ------------------------------------------------------------ */
.msg-cell-actions[b-qsgrspkest] { text-align: right; }

/* =====================================================================
   Cards em mobile
   Sob 768px cada linha vira card empilhado com labels embutidos.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .msg-list[b-qsgrspkest] {
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }
    .msg-list-head[b-qsgrspkest] { display: none; }
    .msg-list-row[b-qsgrspkest] {
        display: grid;
        grid-template-areas:
            "status   time"
            "ref      ref"
            "endpoint endpoint"
            "outcome  attempts"
            "actions  actions";
        grid-template-columns: 1fr auto;
        gap: var(--space-2) var(--space-3);
        padding: var(--space-4);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-left: 3px solid transparent;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-xs);
        margin-bottom: var(--space-2);
        min-height: 0;
    }
    .msg-list-row.is-failure[b-qsgrspkest] {
        background: var(--color-surface);
        border-left-color: var(--color-danger);
    }
    .msg-list-row.is-failure:hover[b-qsgrspkest] {
        background: var(--color-surface-muted);
    }

    .msg-cell-status[b-qsgrspkest]   { grid-area: status; }
    .msg-cell-ref[b-qsgrspkest]      { grid-area: ref; }
    .msg-cell-endpoint[b-qsgrspkest] { grid-area: endpoint; }
    .msg-cell-time[b-qsgrspkest]     { grid-area: time; text-align: right; }
    .msg-cell-outcome[b-qsgrspkest]  { grid-area: outcome; }
    .msg-cell-attempts[b-qsgrspkest] { grid-area: attempts; }
    .msg-cell-actions[b-qsgrspkest]  { grid-area: actions; }

    /* Labels embutidos antes do conteúdo em campos sem ícone próprio.
       Status/Resultado já trazem a pill; endpoint/tentativas precisam
       de contexto. */
    .msg-cell-endpoint[data-label][b-qsgrspkest]::before,
    .msg-cell-attempts[data-label][b-qsgrspkest]::before {
        content: attr(data-label) " ";
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-subtle);
        margin-right: 0.35rem;
    }
    .msg-cell-attempts[b-qsgrspkest] { text-align: right; }
    .msg-cell-attempts[data-label][b-qsgrspkest]::before { margin-right: 0.2rem; }

    .msg-cell-actions[b-qsgrspkest] { text-align: right; }
}

/* =====================================================================
   Estados vazios
   Três variantes — sem busca / sem filtros / sem dados. Cada uma com
   ação sugerida. Card com bastante respiro para sinalizar fim.
   --------------------------------------------------------------------- */
.msg-empty[b-qsgrspkest] {
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
}
.msg-empty-title[b-qsgrspkest] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}
.msg-empty-text[b-qsgrspkest] {
    margin: 0 auto var(--space-4);
    max-width: 38rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}
.msg-empty-text strong[b-qsgrspkest] {
    color: var(--color-text);
    font-family: var(--font-mono);
    font-weight: 600;
}
.msg-empty-actions[b-qsgrspkest] {
    display: inline-flex;
    gap: var(--space-2);
}
/* /Components/Pages/Settings/ApiKeys.razor.rz.scp.css */
.reveal-panel[b-c1mm1ajgrs] {
    border: 1px solid var(--color-warning, #f79009);
    margin-bottom: var(--space-5, 1.25rem);
}

.reveal-badge[b-c1mm1ajgrs] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-warning-soft, #fff5e6);
    color: var(--color-warning, #b54708);
    border: 1px solid #fec84b;
}

.curl-example[b-c1mm1ajgrs] {
    background: var(--color-surface-muted, #f6f7f9);
    border: 1px solid var(--color-border, #e4e7ec);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.8rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
/* /Components/Pages/Support/Index.razor.rz.scp.css */
/* =====================================================================
   Página de Suporte — central de ajuda com IA
   ---------------------------------------------------------------------
   Layout em duas colunas com altura limitada à viewport: o painel de
   chat tem rolagem própria, evitando "scroll duplo" (página + chat).
   Em telas <= 1024px, empilha verticalmente e permite a página rolar.
   --------------------------------------------------------------------- */

/* O cálculo abaixo é uma aproximação conservadora do chrome acima do
   support-layout: topbar (56px) + page-header (~90px) + content
   padding-top (24px) + content padding-bottom (32px). Em telas
   menores o min-height garante que ainda haja conversa visível. */
.support-layout[b-0z316upxsb] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--space-5);
    height: calc(100vh - 200px);
    min-height: 520px;
    align-items: stretch;
}

@media (max-width: 1199.98px) {
    .support-layout[b-0z316upxsb] {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

@media (max-width: 1024px) {
    .support-layout[b-0z316upxsb] {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Coluna lateral — créditos + escopo da conversa
   ───────────────────────────────────────────────────────────────────── */

.support-aside[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
    /* Sem scroll próprio: a única barra de rolagem do aside fica dentro
       de .history-body. Aqui apenas escondemos qualquer overflow
       residual — credits/scope têm flex-shrink:0 e history-card
       absorve o restante via flex:1 1 auto. */
    overflow: hidden;
}

@media (max-width: 1024px) {
    .support-aside[b-0z316upxsb] {
        overflow: visible;
    }
}

.support-card[b-0z316upxsb] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    /* O aside é flex column com overflow-y:auto. Sem isto, todos os
       cards ganham flex-shrink:1 default, e quando o card "Conversas"
       chega perto do seu max-height interno (460px), o flex comprime
       os cards de Créditos/Escopo para caber — sintoma observável:
       o input "ID de mensagem" ficava cortado. Com flex-shrink:0 os
       cards mantêm a altura natural do próprio conteúdo e é o aside
       que rola quando o total não cabe. */
    flex-shrink: 0;
}

.support-card-header[b-0z316upxsb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) 0;
}

.support-card-eyebrow[b-0z316upxsb] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-subtle);
}

.support-card-body[b-0z316upxsb] {
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.support-card-help[b-0z316upxsb] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Card: créditos de IA
   ───────────────────────────────────────────────────────────────────── */

.credits-summary[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.credits-plan[b-0z316upxsb] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 0.78rem;
}

.credits-plan-label[b-0z316upxsb] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-subtle);
}

.credits-plan-name[b-0z316upxsb] {
    color: var(--color-text);
    font-weight: 600;
}

.credits-value[b-0z316upxsb] {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.credits-value strong[b-0z316upxsb] {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-text);
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.02em;
}

.credits-of[b-0z316upxsb] {
    color: var(--color-text-subtle);
    font-size: 0.78rem;
}

.credits-bar[b-0z316upxsb] {
    height: 6px;
    background: var(--color-surface-hover);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.credits-bar-fill[b-0z316upxsb] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent) 0%, #0ea5e9 100%);
    border-radius: 999px;
    transition: width var(--motion-base);
}

.credits-bar-fill.is-low[b-0z316upxsb] {
    background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
}

.credits-bar-fill.is-empty[b-0z316upxsb] {
    background: var(--color-danger);
}

.credits-meta[b-0z316upxsb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.credits-meta-item strong[b-0z316upxsb] {
    color: var(--color-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.credits-badge[b-0z316upxsb] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.credits-badge.is-low[b-0z316upxsb] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border: 1px solid #fec84b;
}

.credits-badge.is-empty[b-0z316upxsb] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border: 1px solid #fda29b;
}

.credits-period[b-0z316upxsb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    margin-top: var(--space-1);
}

.credits-period svg[b-0z316upxsb] {
    color: var(--color-text-subtle);
}

.credits-no-subscription[b-0z316upxsb] {
    margin-top: var(--space-2);
    font-size: 0.75rem;
    color: var(--color-danger);
    font-weight: 600;
}

/* Explicação fixa do que entra/não entra na cobrança — evita que o
   cliente assuma que TODOS os tokens enviados ao provedor são cobrados.
   Discreto: cinza, abaixo do bloco de saldo. */
.credits-billing-note[b-0z316upxsb] {
    margin-top: var(--space-3);
    margin-bottom: 0;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border, #e5e7eb);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-subtle);
}

/* Falha ao carregar saldo (não-admin) — bloqueia o envio do chat. */
.credits-error[b-0z316upxsb] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--color-danger-soft);
    border: 1px solid #fda29b;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: #7a271a;
}

.credits-error-icon[b-0z316upxsb] {
    flex-shrink: 0;
    color: var(--color-danger);
    margin-top: 0.1rem;
}

.credits-error-body[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.credits-error-body strong[b-0z316upxsb] {
    font-size: 0.85rem;
    line-height: 1.2;
    color: #7a271a;
}

.credits-retry-btn[b-0z316upxsb] {
    align-self: flex-start;
    min-height: 30px;
}

/* skeleton enquanto carrega o saldo */
.credits-loading[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.credits-loading-bar[b-0z316upxsb] {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--color-surface-hover) 0%,
        var(--color-surface-muted) 50%,
        var(--color-surface-hover) 100%);
    background-size: 200% 100%;
    animation: credits-shimmer-b-0z316upxsb 1.4s ease-in-out infinite;
}

.credits-loading-bar-short[b-0z316upxsb] {
    width: 60%;
}

@keyframes credits-shimmer-b-0z316upxsb {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Admin banner ----------------------------------- */

.admin-credits-banner[b-0z316upxsb] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--color-accent-active);
}

.admin-credits-banner svg[b-0z316upxsb] {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--color-accent);
}

.admin-credits-banner strong[b-0z316upxsb] {
    display: block;
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--color-accent-active);
}

.admin-credits-banner .support-card-help[b-0z316upxsb] {
    color: var(--color-accent-active);
    opacity: 0.85;
    margin-top: 0.15rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Card: escopo desta conversa
   ───────────────────────────────────────────────────────────────────── */

.scope-card .scope-body[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.scope-lock-pill[b-0z316upxsb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scope-field[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scope-field label[b-0z316upxsb] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scope-field .form-select[b-0z316upxsb],
.scope-field .form-control[b-0z316upxsb] {
    font-size: 0.85rem;
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    transition: border-color var(--motion-fast),
                box-shadow var(--motion-fast);
}

.scope-field .form-select:focus[b-0z316upxsb],
.scope-field .form-control:focus[b-0z316upxsb] {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-accent-soft-strong);
}

.scope-field-error[b-0z316upxsb] {
    display: block;
    font-size: 0.72rem;
    color: var(--color-danger);
    line-height: 1.35;
    margin-top: 0.2rem;
}

.scope-warning[b-0z316upxsb] {
    background: var(--color-warning-soft);
    border: 1px solid #fec84b;
    color: var(--color-warning);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: 1.45;
}

.scope-help[b-0z316upxsb] {
    margin: 0.1rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    line-height: 1.45;
}

/* ─────────────────────────────────────────────────────────────────────
   Chat — shell + header + body + footer
   ───────────────────────────────────────────────────────────────────── */

.chat-shell[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-height: 0; /* permite o filho .chat-body encolher */
}

/* Header ------------------------------------------ */

.chat-header[b-0z316upxsb] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background:
        linear-gradient(180deg, var(--color-surface-muted) 0%, var(--color-surface) 100%);
}

.chat-identity[b-0z316upxsb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.chat-avatar[b-0z316upxsb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(13, 148, 136, 0.35);
}

.chat-identity-text[b-0z316upxsb] {
    min-width: 0;
}

.chat-title[b-0z316upxsb] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.chat-status[b-0z316upxsb] {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.chat-header-note[b-0z316upxsb] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .chat-header-note[b-0z316upxsb] { display: none; }
}

/* Body --------------------------------------------- */

.chat-body[b-0z316upxsb] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: var(--space-5) var(--space-5) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Estado vazio ------------------------------------ */

.chat-empty[b-0z316upxsb] {
    margin: auto;
    text-align: center;
    color: var(--color-text-muted);
    max-width: 32rem;
    padding: var(--space-6) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.chat-empty-icon[b-0z316upxsb] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-empty h3[b-0z316upxsb] {
    font-size: 1.1rem;
    margin: 0;
    color: var(--color-text);
    font-weight: 600;
}

.chat-empty p[b-0z316upxsb] {
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
    color: var(--color-text-subtle);
    max-width: 26rem;
}

.chat-suggestions[b-0z316upxsb] {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    width: 100%;
    max-width: 32rem;
}

@media (max-width: 720px) {
    .chat-suggestions[b-0z316upxsb] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.chat-suggestion[b-0z316upxsb] {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.7rem 0.85rem;
    color: var(--color-text);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.825rem;
    line-height: 1.35;
    cursor: pointer;
    min-height: 44px; /* tamanho de toque confortável */
    transition:
        border-color var(--motion-fast),
        background var(--motion-fast),
        transform var(--motion-fast);
}

.chat-suggestion:hover[b-0z316upxsb] {
    border-color: var(--color-border-hover);
    background: var(--color-surface-hover);
}

.chat-suggestion:focus-visible[b-0z316upxsb] {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-accent-soft-strong);
}

.chat-suggestion:active[b-0z316upxsb] {
    transform: translateY(1px);
}

.chat-suggestion:disabled[b-0z316upxsb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.chat-suggestion-arrow[b-0z316upxsb] {
    color: var(--color-text-subtle);
    flex-shrink: 0;
    transition: transform var(--motion-fast), color var(--motion-fast);
}

.chat-suggestion:hover .chat-suggestion-arrow[b-0z316upxsb] {
    color: var(--color-accent);
    transform: translateX(2px);
}

/* Mensagens --------------------------------------- */

.msg[b-0z316upxsb] {
    display: flex;
    gap: var(--space-2);
    max-width: 78%;
}

.msg.user[b-0z316upxsb] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg.assistant[b-0z316upxsb] {
    align-self: flex-start;
}

.msg-avatar[b-0z316upxsb] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--color-text-inverse);
    letter-spacing: 0.02em;
}

.msg.user .msg-avatar[b-0z316upxsb] {
    background: #3b82f6;
}

.msg.assistant .msg-avatar[b-0z316upxsb] {
    background: var(--color-accent);
}

.msg-body[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.msg-bubble[b-0z316upxsb] {
    background: var(--color-surface-hover);
    padding: 0.65rem 0.9rem;
    border-radius: 1rem;
    line-height: 1.55;
    font-size: 0.9rem;
    color: var(--color-text);
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid var(--color-border);
}

.msg.user .msg-bubble[b-0z316upxsb] {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
    border-bottom-right-radius: 0.3rem;
}

.msg.assistant .msg-bubble[b-0z316upxsb] {
    border-bottom-left-radius: 0.3rem;
}

.msg-meta[b-0z316upxsb] {
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    margin-top: 0.25rem;
    padding: 0 0.2rem;
}

.msg.user .msg-meta[b-0z316upxsb] {
    text-align: right;
}

/* Estados otimistas (envio em andamento / falha) */

.msg.is-pending .msg-bubble[b-0z316upxsb] {
    opacity: 0.72;
}

.msg.is-failed .msg-bubble[b-0z316upxsb] {
    background: var(--color-danger-soft);
    color: var(--color-text);
    border-color: #fda29b;
}

.msg.user.is-failed .msg-bubble[b-0z316upxsb] {
    background: #fee4e2;
    color: #7a271a;
    border-color: #f97066;
}

.msg-status-failed[b-0z316upxsb] {
    color: var(--color-danger);
    font-weight: 500;
}

/* Consumo de créditos da última resposta, ao lado do horário */
.msg-credits[b-0z316upxsb] {
    color: var(--color-text-subtle);
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

/* Tokens cobrados — informativo, intencionalmente discreto. Aparece
   logo após o contador de créditos. Cor mais sutil para não competir. */
.msg-billable[b-0z316upxsb] {
    color: var(--color-text-subtle);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
}

/* Diagnóstico de admin — tokens REAIS do provedor + overhead. Pintamos
   numa cor distinta (laranja) para deixar claro que é informação interna
   e não algo que afete a cobrança do cliente. */
.msg-diagnostic[b-0z316upxsb] {
    color: #b45309;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    font-size: 0.82em;
    font-style: italic;
}

/* Indicador "pensando" — bolha visual em vez de só dots */

.chat-typing[b-0z316upxsb] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.chat-typing-avatar[b-0z316upxsb] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-typing-bubble[b-0z316upxsb] {
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    border-bottom-left-radius: 0.3rem;
    padding: 0.55rem 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.chat-typing-dot[b-0z316upxsb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-subtle);
    animation: chat-typing-bounce-b-0z316upxsb 1.1s infinite ease-in-out both;
}

.chat-typing-dot:nth-child(2)[b-0z316upxsb] { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3)[b-0z316upxsb] { animation-delay: 0.30s; }

@keyframes chat-typing-bounce-b-0z316upxsb {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40%           { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-typing-dot[b-0z316upxsb] { animation: none; opacity: 0.8; }
    .credits-loading-bar[b-0z316upxsb] { animation: none; }
    .chat-suggestion[b-0z316upxsb],
    .chat-suggestion-arrow[b-0z316upxsb],
    .credits-bar-fill[b-0z316upxsb] {
        transition: none;
    }
}

/* Botão "Cancelar" inline ao lado da bolha "pensando…". Visualmente
   discreto (link) pra não competir com o conteúdo do chat, mas
   sempre disponível enquanto o envio está em curso. */
.chat-cancel-btn[b-0z316upxsb] {
    padding: 0 0.4rem;
    margin-left: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--color-text-muted);
    text-decoration: none;
}

.chat-cancel-btn:hover[b-0z316upxsb] {
    color: var(--color-danger);
    text-decoration: underline;
}

.chat-cancel-btn:focus-visible[b-0z316upxsb] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Aviso de "conexão lenta" — aparece abaixo da bolha de "pensando…"
   depois de 10s sem resposta. Estética discreta: não é erro, é só
   transparência sobre o estado da chamada. */
.chat-slow-hint[b-0z316upxsb] {
    align-self: flex-start;
    margin-left: 36px; /* alinha com o conteúdo da bolha (avatar 28px + gap) */
    margin-top: -0.2rem;
    background: var(--color-warning-soft);
    border: 1px solid #fec84b;
    color: var(--color-warning);
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: 1.4;
    max-width: 32rem;
}

/* Banner de erro do chat -------------------------- */

.chat-error[b-0z316upxsb] {
    margin: 0 var(--space-5) 0;
    padding: 0.6rem 0.85rem;
    background: var(--color-danger-soft);
    border: 1px solid #fda29b;
    color: #7a271a;
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.85rem;
}

.chat-error .btn-close[b-0z316upxsb] {
    flex-shrink: 0;
    width: 0.65rem;
    height: 0.65rem;
}

/* Bloqueio: sem créditos -------------------------- */

.chat-block[b-0z316upxsb] {
    margin: auto;
    max-width: 30rem;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.chat-block-icon[b-0z316upxsb] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-danger-soft);
    color: var(--color-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-block h3[b-0z316upxsb] {
    font-size: 1.1rem;
    margin: 0;
    color: var(--color-text);
    font-weight: 600;
}

.chat-block p[b-0z316upxsb] {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
    max-width: 26rem;
}

.chat-block-actions[b-0z316upxsb] {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer (input) ---------------------------------- */

.chat-footer[b-0z316upxsb] {
    flex: 0 0 auto;
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5) var(--space-4);
    background: var(--color-surface-muted);
}

.chat-footer textarea[b-0z316upxsb] {
    resize: none;
    min-height: 60px;
    max-height: 200px;
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    background: var(--color-surface);
    transition: border-color var(--motion-fast),
                box-shadow var(--motion-fast);
}

.chat-footer textarea:focus[b-0z316upxsb] {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-accent-soft-strong);
    outline: none;
}

.chat-footer textarea:disabled[b-0z316upxsb] {
    background: var(--color-surface-hover);
    cursor: not-allowed;
}

.chat-footer-row[b-0z316upxsb] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-2);
}

.chat-footer-hint[b-0z316upxsb] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    line-height: 1.2;
}

.chat-footer-counter[b-0z316upxsb] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.chat-send-btn[b-0z316upxsb] {
    min-width: 96px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 540px) {
    .chat-footer-hint[b-0z316upxsb] { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Banner do escopo ativo (dentro do chat-shell, entre header e body)
   ───────────────────────────────────────────────────────────────────── */

.context-active[b-0z316upxsb] {
    flex: 0 0 auto;
    background: var(--color-accent-soft);
    border-bottom: 1px solid var(--color-accent-soft-strong);
    padding: 0.55rem var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    font-size: 0.78rem;
}

.context-active-label[b-0z316upxsb] {
    font-weight: 600;
    color: var(--color-accent-active);
}

.context-active-chips[b-0z316upxsb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.context-chip[b-0z316upxsb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--color-surface);
    border: 1px solid var(--color-accent-soft-strong);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.74rem;
    color: var(--color-text);
    max-width: 100%;
}

.context-chip code[b-0z316upxsb] {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-text-subtle);
    background: transparent;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

.context-chip .chip-kind[b-0z316upxsb] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--color-accent-active);
}

/* ─────────────────────────────────────────────────────────────────────
   Modal de ticket (mantido — agora encostando nos tokens do design)
   ───────────────────────────────────────────────────────────────────── */

.ticket-modal-backdrop[b-0z316upxsb] {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 23, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: var(--space-4);
}

.ticket-modal[b-0z316upxsb] {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.ticket-modal-header[b-0z316upxsb] {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ticket-modal-header h2[b-0z316upxsb] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.ticket-modal-body[b-0z316upxsb] {
    padding: var(--space-5);
}

.ticket-modal-footer[b-0z316upxsb] {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.ticket-success[b-0z316upxsb] {
    background: var(--color-success-soft);
    color: var(--color-success);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────────
   Card: histórico de conversas (aside esquerdo)
   ─────────────────────────────────────────────────────────────────────
   Lista de conversas anteriores. Cabeçalho com toggle recolhível;
   corpo com max-height + overflow-y para não estourar a coluna do
   aside quando a lista é longa. Em mobile a coluna inteira do aside
   vira topo da página — mantemos o max-height para não empurrar o
   chat para fora do dobre.
   ─────────────────────────────────────────────────────────────────── */

/* History card cresce para preencher o restante do aside (acima de
   credits/scope, que são rígidos) e tem seu body como ÚNICA área que
   rola no aside inteiro. O cap de max-height impede a virar uma área
   vazia gigante em viewports muito altos. */
.history-card[b-0z316upxsb] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(60vh, 540px);
    display: flex;
    flex-direction: column;
}

/* Quando recolhido, o card volta a ter altura natural (só header) —
   sem isso, o flex-grow esticaria o card vazio até o fim do aside. */
.history-card.is-collapsed[b-0z316upxsb] {
    flex: 0 0 auto;
    max-height: none;
}

.history-card-header[b-0z316upxsb] {
    /* O eyebrow já fica à esquerda pelo justify-content:space-between
       do .support-card-header herdado. O toggle vai à direita. */
    cursor: default;
    flex: 0 0 auto;
}

.history-toggle[b-0z316upxsb] {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--motion-fast), background var(--motion-fast);
}

.history-toggle:hover[b-0z316upxsb] {
    color: var(--color-text);
    background: var(--color-surface-hover);
}

.history-toggle:focus-visible[b-0z316upxsb] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.history-toggle-icon[b-0z316upxsb] {
    transition: transform var(--motion-fast);
}

.history-toggle-icon.is-collapsed[b-0z316upxsb] {
    transform: rotate(-90deg);
}

.history-body[b-0z316upxsb] {
    /* Cresce dentro do card; quem limita a altura final é o
       max-height do .history-card. Sem max-height próprio para evitar
       duas camadas de cap competindo. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Padding override: lista interna tem seu próprio padding nos itens
       para o hover bg encostar nas bordas internas. */
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.history-body.is-collapsed[b-0z316upxsb] {
    /* display:none removeria do DOM e perderia o foco no toggle; manter
       no DOM com altura 0 é melhor para a11y e para retomar o estado
       sem reflow caro. */
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* Skeleton — usa as mesmas variáveis do skeleton de créditos para
   manter coerência visual. */
.history-loading[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
}

.history-loading-bar[b-0z316upxsb] {
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--color-surface-hover) 0%,
        var(--color-surface-muted) 50%,
        var(--color-surface-hover) 100%);
    background-size: 200% 100%;
    animation: credits-shimmer-b-0z316upxsb 1.4s ease-in-out infinite;
}

.history-loading-bar-short[b-0z316upxsb] { width: 70%; }

@media (prefers-reduced-motion: reduce) {
    .history-loading-bar[b-0z316upxsb] { animation: none; }
    .history-toggle-icon[b-0z316upxsb] { transition: none; }
}

/* Erro de carga — mesmo tom do credits-error. Não duplica o estilo,
   mas mantém a hierarquia visual de uma área "quebrada mas recuperável". */
.history-error[b-0z316upxsb] {
    display: flex;
    background: var(--color-danger-soft);
    border: 1px solid #fda29b;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: #7a271a;
}

.history-error-body[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.history-error-body strong[b-0z316upxsb] {
    font-size: 0.85rem;
    color: #7a271a;
}

.history-retry-btn[b-0z316upxsb] {
    align-self: flex-start;
    min-height: 30px;
}

/* Estado vazio — discreto, ocupa pouco espaço. */
.history-empty[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    text-align: center;
}

.history-empty-icon[b-0z316upxsb] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-surface-hover);
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.history-empty-text[b-0z316upxsb] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
}

/* Filtro Ativas / Arquivadas — pills no topo do corpo do card. */
.history-filter-tabs[b-0z316upxsb] {
    display: inline-flex;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px;
    margin: var(--space-2) var(--space-3) var(--space-1);
    gap: 2px;
    /* Rígido dentro do flex column do card — só o body pode crescer/encolher. */
    flex: 0 0 auto;
    align-self: flex-start;
}

.history-filter-tab[b-0z316upxsb] {
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast);
    min-height: 26px;
}

.history-filter-tab:hover[b-0z316upxsb] { color: var(--color-text); }

.history-filter-tab:focus-visible[b-0z316upxsb] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.history-filter-tab.is-active[b-0z316upxsb] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Lista de conversas — cada <li> contém o botão principal + o "⋯". */
.history-list[b-0z316upxsb] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.history-list-item[b-0z316upxsb] {
    position: relative; /* ancora o dropdown .history-actions-menu */
    display: flex;
    align-items: stretch;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    transition: background var(--motion-fast),
                border-color var(--motion-fast);
}

.history-list-item:hover[b-0z316upxsb] {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
}

.history-list-item.is-active[b-0z316upxsb] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-soft-strong);
}

.history-list-item.is-active .history-item-title[b-0z316upxsb] {
    color: var(--color-accent-active);
}

.history-list-item.is-archived[b-0z316upxsb] {
    /* Filtro Arquivadas — opacity de leve para diferenciar visualmente
       das ativas, sem esconder o conteúdo. */
    opacity: 0.78;
}

.history-list-item.is-renaming[b-0z316upxsb] {
    /* Modo rename ocupa toda a largura; remove o hover-bg para o
       input ficar com bg próprio (form-control). */
    background: var(--color-surface);
    border-color: var(--color-border);
}

.history-item-main[b-0z316upxsb] {
    flex: 1 1 auto;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 44px;
    min-width: 0; /* permite ellipsis no título */
}

.history-item-main:focus-visible[b-0z316upxsb] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px; /* fica colado na borda interna sem cortar */
}

.history-item-main:disabled[b-0z316upxsb] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Botão "⋯" — coluna estreita à direita; só aparece visualmente
   "ativo" quando o hover está no <li>, mas sempre focável por
   teclado pra a11y. */
.history-item-actions-wrap[b-0z316upxsb] {
    flex: 0 0 auto;
    position: relative; /* ancora menu */
    display: flex;
    align-items: center;
    padding-right: 0.25rem;
}

.history-item-actions-toggle[b-0z316upxsb] {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-subtle);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--motion-fast),
                background var(--motion-fast),
                color var(--motion-fast);
}

.history-list-item:hover .history-item-actions-toggle[b-0z316upxsb],
.history-item-actions-toggle:focus-visible[b-0z316upxsb],
.history-item-actions-toggle[aria-expanded="true"][b-0z316upxsb] {
    opacity: 1;
    background: var(--color-surface);
    color: var(--color-text);
}

.history-item-actions-toggle:focus-visible[b-0z316upxsb] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}

.history-item-actions-toggle:disabled[b-0z316upxsb] {
    cursor: not-allowed;
    opacity: 0.3;
}

/* Dropdown de ações — pequeno popover absolute à direita do toggle. */
.history-actions-menu[b-0z316upxsb] {
    position: absolute;
    right: 0.25rem;
    top: calc(100% + 2px);
    z-index: 30;
    min-width: 140px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.history-actions-item[b-0z316upxsb] {
    background: transparent;
    border: 0;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast);
}

.history-actions-item:hover[b-0z316upxsb] {
    background: var(--color-surface-hover);
}

.history-actions-item:focus-visible[b-0z316upxsb] {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.history-actions-item.is-destructive[b-0z316upxsb] {
    color: var(--color-danger);
}

.history-actions-item.is-destructive:hover[b-0z316upxsb] {
    background: var(--color-danger-soft);
    color: #7a271a;
}

/* Modo Rename inline — input + botões Salvar/Cancelar.
   Ocupa todo o <li>; o item-main não é renderizado neste estado. */
.history-rename-row[b-0z316upxsb] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    width: 100%;
}

.history-rename-input[b-0z316upxsb] {
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

.history-rename-actions[b-0z316upxsb] {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.history-rename-actions .btn[b-0z316upxsb] {
    min-height: 30px;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
}

.history-item-title[b-0z316upxsb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    /* Trunca em 1 linha quando o título é longo. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item-preview[b-0z316upxsb] {
    font-size: 0.74rem;
    color: var(--color-text-subtle);
    line-height: 1.35;
    /* Multi-line clamp (2 linhas) — fallback para 1 linha via
       text-overflow quando o browser não suporta -webkit-line-clamp. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-meta[b-0z316upxsb] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    margin-top: 0.1rem;
    flex-wrap: wrap;
}

.history-item-date[b-0z316upxsb] {
    font-variant-numeric: tabular-nums;
}

.history-item-count[b-0z316upxsb] {
    color: var(--color-text-subtle);
    opacity: 0.85;
}

.history-item-status[b-0z316upxsb] {
    display: inline-flex;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.history-item-status.is-closed[b-0z316upxsb] {
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.history-item-status.is-archived[b-0z316upxsb] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border: 1px solid #fec84b;
}

@media (max-width: 1024px) {
    /* Em mobile o aside vai para o topo (layout single-column, page rola).
       O cap fica no CARD agora — body herda do card. Sem isso, o histórico
       empurraria o chat para baixo do dobre. */
    .history-card[b-0z316upxsb] {
        max-height: 360px;
    }
}

/* Helper de a11y para labels apenas para leitores de tela */
.visually-hidden[b-0z316upxsb] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* /Components/Shared/JsonViewer.razor.rz.scp.css */
/* =====================================================================
   JsonViewer — visualizador com busca, contagem, cópia e collapse.
   Usa os mesmos tokens visuais dos painéis do dashboard.
   --------------------------------------------------------------------- */
.json-viewer[b-zsiy9gihna] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.json-viewer-header[b-zsiy9gihna] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.json-viewer.is-collapsed .json-viewer-header[b-zsiy9gihna] {
    border-bottom: 0;
}

.json-viewer-titles[b-zsiy9gihna] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.json-viewer-title[b-zsiy9gihna] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
}

.json-viewer-meta[b-zsiy9gihna] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

.json-viewer-flag[b-zsiy9gihna] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-warning);
    background: var(--color-warning-soft);
    border: 1px solid #fec84b;
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    line-height: 1.4;
}

.json-viewer-actions[b-zsiy9gihna] {
    display: inline-flex;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.json-viewer-action[b-zsiy9gihna] {
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.22rem 0.65rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--motion-fast),
                color var(--motion-fast),
                border-color var(--motion-fast);
}
.json-viewer-action:hover[b-zsiy9gihna] {
    background: var(--color-surface-hover);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.json-viewer-action:focus-visible[b-zsiy9gihna] {
    outline: none;
    box-shadow: var(--ring);
}
.json-viewer-action.is-ok[b-zsiy9gihna] {
    color: var(--color-success);
    border-color: var(--color-success);
    background: var(--color-success-soft);
}
.json-viewer-action.is-failed[b-zsiy9gihna] {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.json-viewer-empty[b-zsiy9gihna] {
    font-family: var(--font-family);
    font-size: 0.8125rem;
    color: var(--color-text-subtle);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-muted);
}

/* ─── Linha de busca ────────────────────────────────────────────────── */
.json-viewer-search[b-zsiy9gihna] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}

.json-viewer-search-icon[b-zsiy9gihna] {
    position: absolute;
    left: calc(var(--space-4) + 0.55rem);
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--color-text-subtle);
    pointer-events: none;
}

.json-viewer-search-input[b-zsiy9gihna] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.65rem 0.4rem 2rem;
    font-size: 0.82rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.json-viewer-search-input[b-zsiy9gihna]::placeholder { color: var(--color-text-subtle); }
.json-viewer-search-input[b-zsiy9gihna]::-webkit-search-cancel-button,
.json-viewer-search-input[b-zsiy9gihna]::-webkit-search-decoration { display: none; }
.json-viewer-search-input:focus[b-zsiy9gihna] {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--ring);
}

.json-viewer-match-count[b-zsiy9gihna] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    white-space: nowrap;
}

.json-viewer-search-clear[b-zsiy9gihna] {
    appearance: none;
    border: 0;
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.json-viewer-search-clear:hover[b-zsiy9gihna] {
    background: var(--color-border-strong);
    color: var(--color-text);
}
.json-viewer-search-clear:focus-visible[b-zsiy9gihna] {
    outline: none;
    box-shadow: var(--ring);
}

/* ─── Body / pre embutido no card ───────────────────────────────────── */
.json-viewer-body[b-zsiy9gihna] {
    border: 0;
    border-radius: 0;
    margin: 0;
}

/* Highlight de busca. <mark> é renderizado via RenderTreeBuilder, então
   recebe o atributo scoped automaticamente — não precisa de ::deep.    */
mark.json-mark[b-zsiy9gihna] {
    background: var(--color-cta-soft-strong);
    color: var(--color-warning);
    padding: 0 0.1rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.25);
}
/* /Components/Shared/PageSkeleton.razor.rz.scp.css */
/* Skeleton compacto — barras animadas no lugar de "Carregando…".
   Mantém densidade próxima da lista real para evitar mudança
   abrupta de altura quando os dados chegam. */

.page-skeleton[b-gurglm73ed] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.page-skeleton-row[b-gurglm73ed] {
    height: 1.25rem;
    border-radius: 0.35rem;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: page-skeleton-shimmer-b-gurglm73ed 1.4s ease-in-out infinite;
}

/* Variante "list" — barras curtas alternando largura para parecer linhas. */
.page-skeleton--list .page-skeleton-row:nth-child(odd)[b-gurglm73ed]  { width: 92%; }
.page-skeleton--list .page-skeleton-row:nth-child(even)[b-gurglm73ed] { width: 78%; }

/* Variante "card" — blocos mais altos, simulando cards. */
.page-skeleton--card .page-skeleton-row[b-gurglm73ed] {
    height: 4.5rem;
    width: 100%;
    border-radius: 0.6rem;
}

@keyframes page-skeleton-shimmer-b-gurglm73ed {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Modo dark — mantém contraste suficiente sem ofuscar. */
@media (prefers-color-scheme: dark) {
    .page-skeleton-row[b-gurglm73ed] {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.10) 50%,
            rgba(255, 255, 255, 0.05) 100%
        );
        background-size: 200% 100%;
    }
}

/* Reduz movimento para usuários sensíveis a animação. */
@media (prefers-reduced-motion: reduce) {
    .page-skeleton-row[b-gurglm73ed] {
        animation: none;
        background: rgba(0, 0, 0, 0.06);
    }
}
/* /Components/Shared/RefreshIndicator.razor.rz.scp.css */
/* Indicador discreto de atualização — não substitui conteúdo,
   apenas sinaliza atividade ao lado dos Actions/headers. */

.refresh-indicator[b-yvmhre9e39] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-style: italic;
    /* Animação suave para evitar pop quando aparece/desaparece. */
    animation: refresh-indicator-fade-b-yvmhre9e39 120ms ease-in;
}

.refresh-indicator--block[b-yvmhre9e39] {
    display: flex;
    margin: 0.25rem 0;
}

@keyframes refresh-indicator-fade-b-yvmhre9e39 {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/Toasts/ToastHost.razor.rz.scp.css */
/* =====================================================================
   Toasts globais — estilo "toastr" usando os tokens do design system.
   Posição fixa no canto superior direito; empilham de cima para baixo;
   auto-some (timer no ToastService) e podem ser fechados no ×.
   ===================================================================== */
.toast-host[b-4sztggxa5m] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(380px, calc(100vw - 2rem));
    pointer-events: none; /* o container não bloqueia cliques; os itens sim */
}

.toast-item[b-4sztggxa5m] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 4px solid var(--toast-accent, #6b7280);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: var(--shadow-lg, 0 10px 25px -5px rgba(16, 24, 40, 0.18));
    color: var(--color-text, #1f2937);
    animation: toast-in-b-4sztggxa5m 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .toast-item[b-4sztggxa5m] { animation: none; }
}

@keyframes toast-in-b-4sztggxa5m {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Cores por nível: borda lateral + ícone. */
.toast-success[b-4sztggxa5m] { --toast-accent: var(--color-success, #15803d); }
.toast-error[b-4sztggxa5m]   { --toast-accent: var(--color-danger, #b42318); }
.toast-warning[b-4sztggxa5m] { --toast-accent: var(--color-warning, #b45309); }
.toast-info[b-4sztggxa5m]    { --toast-accent: var(--color-accent, #0d9488); }

.toast-icon[b-4sztggxa5m] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.05rem;
    color: var(--toast-accent, #6b7280);
}

.toast-content[b-4sztggxa5m] {
    flex: 1 1 auto;
    min-width: 0;
}

.toast-title[b-4sztggxa5m] {
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.3;
    margin-bottom: 0.1rem;
    color: var(--color-text, #1f2937);
}

.toast-message[b-4sztggxa5m] {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text, #374151);
    word-break: break-word;
}

.toast-close[b-4sztggxa5m] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 0.3rem);
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.toast-close:hover[b-4sztggxa5m] {
    background: var(--color-surface-hover, rgba(0, 0, 0, 0.06));
    color: var(--color-text, #1f2937);
}

/* Mobile: ocupa a largura, ancorado no topo. */
@media (max-width: 575.98px) {
    .toast-host[b-4sztggxa5m] {
        left: 1rem;
        right: 1rem;
        width: auto;
    }
}