/* /Components/ActionExecution/ExecutionHistoryList.razor.rz.scp.css */
.action-exec-history[b-1nohlfw9m2] {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.action-exec-history-item[b-1nohlfw9m2] {
    padding: 0.55rem 0.65rem;
    border-radius: var(--brand-radius-panel, 8px);
    border: 1px solid var(--brand-border, var(--rz-border-color));
    background: color-mix(in srgb, transparent, var(--rz-text-color) 4%);
}

.action-exec-history-ok[b-1nohlfw9m2] {
    border-left: 3px solid var(--rz-success);
}

.action-exec-history-fail[b-1nohlfw9m2] {
    border-left: 3px solid var(--rz-danger);
}

.action-exec-history-time[b-1nohlfw9m2],
.action-exec-history-duration[b-1nohlfw9m2],
.action-exec-history-params[b-1nohlfw9m2] {
    color: var(--rz-text-secondary-color);
}

.action-exec-history-params[b-1nohlfw9m2] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.72rem;
    word-break: break-all;
}
/* /Components/CustomComponents/OnuComponent.razor.rz.scp.css */
.onu-cto-meta[b-gpb49x7k98] {
    margin-left: 28px;
}
/* /Components/Layout/GlobalSearchBox.razor.rz.scp.css */
.global-search-container[b-ttljh0m47d] {
    /* Aliases para a camada global analisp-brand-tokens.css (--brand-*) */
    --gs-ink: var(--brand-ink);
    --gs-teal: var(--brand-teal);
    /* base-200 separa o campo do fundo do RadzenHeader (base-background) no light */
    --gs-surface: color-mix(in srgb, var(--brand-teal) 8%, var(--rz-base-200, var(--rz-base-background-color)) 92%);
    --gs-border: var(--brand-border);
    --gs-border-focus: var(--brand-border-focus);
    --gs-focus-ring: var(--brand-focus-ring);
    --gs-muted: var(--brand-muted);
    --gs-divider: var(--brand-divider);
    --gs-hover: var(--brand-hover);
    --gs-chip-bg: color-mix(in srgb, var(--gs-teal) 4%, var(--rz-base-background-color, #fff) 96%);
    --gs-shadow: var(--brand-shadow-lg);

    position: relative;
    width: 100%;
    max-width: 480px;
}

.global-search-input-wrapper[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    box-shadow: 0 1px 2px color-mix(in srgb, transparent, var(--rz-text-color, var(--gs-ink)) 6%);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.global-search-input-wrapper:focus-within[b-ttljh0m47d] {
    border-color: var(--gs-border-focus);
    box-shadow: 0 0 0 2px var(--gs-focus-ring);
}

.global-search-icon[b-ttljh0m47d] {
    color: var(--gs-muted);
    font-size: 1.1rem;
}

.global-search-input[b-ttljh0m47d] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--rz-text-color);
    min-width: 0;
}

.global-search-input[b-ttljh0m47d]::placeholder {
    color: var(--gs-muted);
}

.global-search-spinner[b-ttljh0m47d] {
    animation: spin-b-ttljh0m47d 1s linear infinite;
    color: var(--gs-teal);
    font-size: 1rem;
}

.global-search-clear[b-ttljh0m47d] {
    cursor: pointer;
    color: var(--gs-muted);
    font-size: 1rem;
}

.global-search-clear:hover[b-ttljh0m47d] {
    color: var(--rz-text-color);
}

.global-search-results[b-ttljh0m47d] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--rz-base-background-color);
    border: 1px solid var(--gs-border);
    border-radius: 8px;
    box-shadow: var(--gs-shadow);
    max-height: 480px;
    overflow-y: auto;
    min-width: 400px;
}

.global-search-empty[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--gs-muted);
    justify-content: center;
}

.global-search-facets[b-ttljh0m47d] {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gs-divider);
    flex-wrap: wrap;
}

.global-search-facet-chip[b-ttljh0m47d] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    border: 1px solid var(--gs-border);
    background: var(--gs-chip-bg);
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: all 0.15s;
}

.global-search-facet-chip:hover[b-ttljh0m47d] {
    background: color-mix(in srgb, var(--gs-teal) 12%, var(--rz-base-background-color, #fff) 88%);
    border-color: var(--gs-border-focus);
}

.global-search-facet-chip.active[b-ttljh0m47d] {
    background: var(--rz-primary);
    color: var(--rz-on-primary-color);
    border-color: var(--rz-primary);
}

.facet-count[b-ttljh0m47d] {
    font-weight: 600;
}

.global-search-group[b-ttljh0m47d] {
    padding: 0.25rem 0;
}

.global-search-group-header[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gs-muted);
    letter-spacing: 0.03em;
}

.group-count[b-ttljh0m47d] {
    margin-left: auto;
    font-weight: normal;
}

.global-search-hit[b-ttljh0m47d] {
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    cursor: pointer;
    transition: background 0.1s;
}

.global-search-hit:hover[b-ttljh0m47d] {
    background: var(--gs-hover);
}

.hit-title[b-ttljh0m47d] {
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

.hit-title em[b-ttljh0m47d] {
    font-style: normal;
    font-weight: 700;
    color: var(--rz-primary);
}

.hit-subtitle[b-ttljh0m47d] {
    font-size: 0.75rem;
    color: var(--gs-muted);
    margin-top: 0.15rem;
}

.global-search-footer[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--gs-divider);
    font-size: 0.7rem;
    color: var(--gs-muted);
}

.fallback-badge[b-ttljh0m47d] {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.65rem;
}

.footer-hint[b-ttljh0m47d] {
    color: var(--rz-text-secondary-color);
    font-style: italic;
}

.hit-title[b-ttljh0m47d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.hit-matched-chip[b-ttljh0m47d] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary-darker);
    border: 1px solid var(--rz-primary-light);
}

.hit-source-badge[b-ttljh0m47d] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-left: auto;
    border: 1px solid transparent;
}

.hit-source-memory[b-ttljh0m47d] {
    background: var(--rz-success-lighter);
    color: var(--rz-success-darker);
    border-color: var(--rz-success-light);
}

.hit-source-es[b-ttljh0m47d] {
    background: var(--rz-info-lighter);
    color: var(--rz-info-darker);
    border-color: var(--rz-info-light);
}

.hit-source-sql[b-ttljh0m47d] {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
    border-color: var(--rz-warning-light);
}

@keyframes spin-b-ttljh0m47d {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* =============================================================================
   LoginLayout - Tela de login futurista SuaFibra
   - Cena 3D em CSS puro (cabos de fibra optica com pulsos de luz)
   - Cartao glassmorphism centralizado
   - Cores da marca: azul #4FB3FF, laranja #FFA61A
   ============================================================================= */

/* NOTA: o reset do .rz-layout/.rz-body para o login esta em
   wwwroot/css/site.css (selectors .rz-layout:has(> .rz-body.login-body)),
   pois esses elementos sao gerados pelos componentes Radzen e nao recebem
   o atributo de scope deste arquivo (b-XXXX). */

/* ==========================================================================
   Cena 3D - cabos e pulsos
   ========================================================================== */

[b-42fzhlr2p4] .fiber-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transform: perspective(1400px) rotateX(18deg) scale(1.15);
    transform-origin: 50% 60%;
}

[b-42fzhlr2p4] .fiber-grid {
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(rgba(148, 193, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 193, 255, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    opacity: 0.6;
}

[b-42fzhlr2p4] .fiber-cable {
    position: absolute;
    height: 2px;
    width: 140%;
    left: -20%;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(79, 179, 255, 0.18) 25%,
        rgba(255, 166, 26, 0.18) 75%,
        transparent 100%);
    box-shadow: 0 0 12px rgba(79, 179, 255, 0.15);
    overflow: hidden;
}

[b-42fzhlr2p4] .fiber-cable .pulse {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(79, 179, 255, 0) 30%,
        rgba(79, 179, 255, 0.95) 50%,
        rgba(255, 166, 26, 0.95) 60%,
        transparent 80%);
    filter: blur(2px);
    will-change: transform, opacity;
    animation: pulse-travel-b-42fzhlr2p4 5s linear infinite;
}

[b-42fzhlr2p4] .fiber-cable.cable-1 { top: 18%; transform: rotate(-8deg); }
[b-42fzhlr2p4] .fiber-cable.cable-2 { top: 38%; transform: rotate(6deg); }
[b-42fzhlr2p4] .fiber-cable.cable-3 { top: 62%; transform: rotate(-4deg); }
[b-42fzhlr2p4] .fiber-cable.cable-4 { top: 82%; transform: rotate(10deg); }

[b-42fzhlr2p4] .fiber-cable.cable-1 .pulse { animation-duration: 6s; animation-delay: 0s; }
[b-42fzhlr2p4] .fiber-cable.cable-2 .pulse { animation-duration: 4.5s; animation-delay: 1.2s; }
[b-42fzhlr2p4] .fiber-cable.cable-3 .pulse { animation-duration: 5.5s; animation-delay: 2.4s; }
[b-42fzhlr2p4] .fiber-cable.cable-4 .pulse { animation-duration: 4s;   animation-delay: 0.6s; }

[b-42fzhlr2p4] .fiber-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 0%,
        transparent 35%,
        rgba(6, 9, 15, 0.55) 75%,
        rgba(6, 9, 15, 0.85) 100%);
    pointer-events: none;
}

@keyframes pulse-travel-b-42fzhlr2p4 {
    0%   { transform: translateX(-110%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

/* ==========================================================================
   Shell + Card glassmorphism
   ========================================================================== */

[b-42fzhlr2p4] .login-shell {
    position: relative;
    z-index: 1;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

[b-42fzhlr2p4] .login-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 2.75rem 2.25rem 2rem;
    border-radius: 22px;
    background: linear-gradient(160deg,
        rgba(20, 28, 42, 0.78) 0%,
        rgba(12, 18, 28, 0.66) 100%);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(148, 193, 255, 0.18);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 166, 26, 0.04) inset,
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    isolation: isolate;
    animation: card-enter-b-42fzhlr2p4 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

[b-42fzhlr2p4] .login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(79, 179, 255, 0.55) 0%,
        rgba(79, 179, 255, 0) 35%,
        rgba(255, 166, 26, 0) 65%,
        rgba(255, 166, 26, 0.55) 100%);
    background-size: 200% 200%;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    animation: border-shimmer-b-42fzhlr2p4 8s ease-in-out infinite;
}

@keyframes card-enter-b-42fzhlr2p4 {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes border-shimmer-b-42fzhlr2p4 {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ==========================================================================
   Header do card (logo + titulo + subtitulo)
   ========================================================================== */

[b-42fzhlr2p4] .login-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.75rem;
}

[b-42fzhlr2p4] .login-card__logo {
    max-width: 220px;
    width: 80%;
    height: auto;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 6px 20px rgba(79, 179, 255, 0.35));
    animation: logo-float-b-42fzhlr2p4 6s ease-in-out infinite;
}

@keyframes logo-float-b-42fzhlr2p4 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

[b-42fzhlr2p4] .login-card__title {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--rz-text-color, #ffffff);
    background: linear-gradient(90deg, #ffffff 0%, #cfe1ff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[b-42fzhlr2p4] .login-card__subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.65));
    letter-spacing: 0.01em;
}

[b-42fzhlr2p4] .login-card__footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   Estilizacao do RadzenLogin / RadzenFormField via ::deep
   ========================================================================== */

[b-42fzhlr2p4] .rz-row {
    margin: 0;
}

[b-42fzhlr2p4] .rz-col {
    padding: 0;
}

[b-42fzhlr2p4] .rz-alert {
    border-radius: 10px;
    margin-bottom: 0.75rem;
    backdrop-filter: blur(8px);
}

[b-42fzhlr2p4] .rz-form-field {
    width: 100%;
    margin-bottom: 0.75rem;
}

[b-42fzhlr2p4] .rz-form-field-content {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    transition: background 200ms ease, box-shadow 200ms ease;
}

[b-42fzhlr2p4] .rz-form-field-content:hover {
    background: rgba(255, 255, 255, 0.06);
}

[b-42fzhlr2p4] .rz-form-field.rz-state-focused .rz-form-field-content {
    background: rgba(79, 179, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(79, 179, 255, 0.35), 0 0 18px rgba(79, 179, 255, 0.18);
}

[b-42fzhlr2p4] .rz-form-field input {
    color: var(--rz-text-color, #ffffff);
}

[b-42fzhlr2p4] .rz-form-field-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

[b-42fzhlr2p4] .rz-form-field.rz-state-focused .rz-form-field-label,
[b-42fzhlr2p4] .rz-form-field.rz-state-filled .rz-form-field-label {
    color: var(--brand-blue, #4FB3FF);
}

/* RememberMe row + botao Entrar */
[b-42fzhlr2p4] .rz-login {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary,
[b-42fzhlr2p4] .rz-login button[type="submit"] {
    position: relative;
    width: 100%;
    height: 46px;
    margin-top: 0.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #06121F;
    background: linear-gradient(135deg, #4FB3FF 0%, #94C1FF 50%, #FFA61A 100%);
    background-size: 200% 200%;
    box-shadow:
        0 10px 30px rgba(79, 179, 255, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    overflow: hidden;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 220ms ease, background-position 600ms ease;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary::after,
[b-42fzhlr2p4] .rz-login button[type="submit"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    transition: left 700ms ease;
    pointer-events: none;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary:hover,
[b-42fzhlr2p4] .rz-login button[type="submit"]:hover {
    transform: translateY(-1px);
    background-position: 100% 50%;
    box-shadow:
        0 14px 36px rgba(79, 179, 255, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary:hover::after,
[b-42fzhlr2p4] .rz-login button[type="submit"]:hover::after {
    left: 130%;
}

[b-42fzhlr2p4] .rz-login .rz-button-primary:active,
[b-42fzhlr2p4] .rz-login button[type="submit"]:active {
    transform: translateY(0);
}

/* ==========================================================================
   Acessibilidade - prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [b-42fzhlr2p4] .fiber-cable .pulse,
    [b-42fzhlr2p4] .login-card,
    [b-42fzhlr2p4] .login-card::before,
    [b-42fzhlr2p4] .login-card__logo,
    [b-42fzhlr2p4] .rz-login .rz-button-primary,
    [b-42fzhlr2p4] .rz-login button[type="submit"] {
        animation: none !important;
        transition: none !important;
    }
}

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

@media (max-width: 480px) {
    [b-42fzhlr2p4] .login-card {
        padding: 2rem 1.5rem 1.5rem;
        border-radius: 18px;
    }

    [b-42fzhlr2p4] .fiber-grid {
        display: none;
    }

    [b-42fzhlr2p4] .fiber-cable {
        opacity: 0.55;
    }

    [b-42fzhlr2p4] .login-card__logo {
        max-width: 180px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Header shell — harmonia com busca global (tg:ds-02); sem override agressivo Radzen */
[b-6ww9n2p75j] .rz-header {
    border-bottom: 1px solid var(--brand-divider);
}
/* /Components/OnuManager/Cards/CpeManagementDialog.razor.rz.scp.css */
/* =============================================================================
   CpeManagementDialog — polish on-brand (dialog Gestao de CPE / Super Wi-Fi)
   Tokens: analisp-brand-tokens.css (--brand-*). Theme-aware via --rz-*.
   Sem preto puro; Exo (titulos/abas) + Montserrat (corpo).
   ============================================================================= */

.cpe-mgmt-dialog[b-qrc81vu8qg] {
    font-family: var(--brand-font-body);
    color: var(--rz-text-color);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Aviso de mockup: leve, arejado, com tinta teal */
.cpe-mgmt-dialog :global(.rz-alert)[b-qrc81vu8qg] {
    border-radius: var(--brand-radius-panel);
    border: 1px solid var(--brand-border-teal);
    background: var(--brand-surface-soft);
}

/* ------------------------------- Abas ------------------------------------- */
.cpe-mgmt-dialog :global(.rz-tabview-nav)[b-qrc81vu8qg] {
    gap: 0.15rem;
    border-bottom: 1px solid var(--brand-divider);
    flex-wrap: wrap;
}

.cpe-mgmt-dialog :global(.rz-tabview-nav .rz-tabview-title)[b-qrc81vu8qg] {
    font-family: var(--brand-font-title);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Aba selecionada ganha acento teal de marca (cobre variacoes de classe Radzen) */
.cpe-mgmt-dialog :global(.rz-tabview-nav li.rz-tabview-selected)[b-qrc81vu8qg],
.cpe-mgmt-dialog :global(.rz-tabview-nav li.rz-state-active)[b-qrc81vu8qg] {
    border-bottom: 2px solid var(--brand-teal);
}

.cpe-mgmt-dialog :global(.rz-tabview-nav li.rz-tabview-selected .rz-tabview-title)[b-qrc81vu8qg],
.cpe-mgmt-dialog :global(.rz-tabview-nav li.rz-state-active .rz-tabview-title)[b-qrc81vu8qg] {
    color: var(--brand-teal);
}

.cpe-mgmt-dialog :global(.rz-tabview-panels)[b-qrc81vu8qg] {
    padding-top: 0.85rem;
}

/* ------------------------------- Form grid -------------------------------- */
.cpe-form-grid[b-qrc81vu8qg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.25rem;
}

/* ------------------------------- Metric grid ------------------------------ */
.cpe-metric-grid[b-qrc81vu8qg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
}

.cpe-metric[b-qrc81vu8qg] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--brand-radius-panel);
    background: var(--brand-surface-faint);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
    transition: transform var(--brand-ease) 160ms, box-shadow var(--brand-ease) 160ms;
}

.cpe-metric:hover[b-qrc81vu8qg] {
    transform: translateY(-2px);
    box-shadow: var(--brand-shadow-md);
}

.cpe-metric span[b-qrc81vu8qg] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-muted);
}

.cpe-metric strong[b-qrc81vu8qg] {
    font-family: var(--brand-font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-teal);
    font-variant-numeric: tabular-nums;
}

/* Botoes: cantos coerentes com o resto do design system */
.cpe-mgmt-dialog :global(.rz-button)[b-qrc81vu8qg] {
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .cpe-metric[b-qrc81vu8qg] {
        transition: none;
    }
    .cpe-metric:hover[b-qrc81vu8qg] {
        transform: none;
    }
}
/* /Components/OnuManager/Cards/OnuCard.razor.rz.scp.css */
.onu-card[b-zuxm86pnh7] {
    padding: 0.65rem;
    padding-left: calc(0.5rem + var(--onu-status-bar-w, 4px));
    border-radius: var(--onu-card-radius-modern, 14px);
    /* Tipografia de marca: corpo/labels do card herdam Montserrat; os titulos e
       valores em destaque sobrescrevem para Exo (--brand-font-title) nas regras
       especificas (.onu-name, .signal-value, .ani-metric-value, etc.). */
    font-family: var(--brand-font-body, 'Montserrat', system-ui, sans-serif);
    /* tg:12 (light-mode contrast): a camada de cor do card era
       rgba(var(--rz-secondary-rgb, 30,30,46), 0.45) — mas --rz-secondary-rgb
       NAO existe (ver NOTA tg:11 em onu-card-tokens.css), entao resolvia SEMPRE
       para navy escuro 30,30,46 em AMBOS os temas, deixando o corpo do card
       lavado/escuro no tema claro. Agora a superficie deriva de --rz-* que
       TROCAM com o toggle: base clara no light, base escura no dark, com leve
       elevacao via --rz-text-color. */
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 6%),
            color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 2%)),
        var(--onu-decor-pattern) repeat;
    background-blend-mode: normal, overlay;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    margin-bottom: 0.4rem;
    cursor: pointer;
    transition: transform var(--onu-anim-medium, 200ms) var(--onu-ease, cubic-bezier(0.4, 0, 0.2, 1)),
                box-shadow var(--onu-anim-medium, 200ms) var(--onu-ease, cubic-bezier(0.4, 0, 0.2, 1)),
                background var(--onu-anim-medium, 200ms) var(--onu-ease, cubic-bezier(0.4, 0, 0.2, 1));
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 15%);
    position: relative;
    overflow: hidden;
    box-shadow: var(--onu-elevation-1, 0 1px 3px rgba(0,0,0,0.12));
    display: block;
}

/*
 * Estado "focused" - aplicado pela Busca Universal via deep-link.
 * Combina ring estatico (box-shadow) + animacao de pulse (3 ciclos ~3.6s).
 * O JS interop remove a classe apos 6s ou no primeiro click global.
 */
/* tg:03: o glow do focus deriva de --rz-primary (mesmo accent do ring interno),
   via color-mix para aplicar o alpha. Antes era um azul fixo rgba(13,110,253,*);
   o fallback #0d6efd preserva exatamente esse azul caso --rz-primary falte. */
.onu-card.focused[b-zuxm86pnh7] {
    box-shadow:
        0 0 0 3px var(--rz-primary),
        0 0 22px 6px color-mix(in srgb, var(--rz-primary, #0d6efd) 45%, transparent),
        var(--onu-elevation-2, 0 4px 12px rgba(0,0,0,0.18));
    border-color: var(--rz-primary);
    animation: onuFocusPulse-b-zuxm86pnh7 1.2s ease-in-out 3;
    z-index: 5;
}

@keyframes onuFocusPulse-b-zuxm86pnh7 {
    0% {
        box-shadow:
            0 0 0 3px var(--rz-primary),
            0 0 0 0 color-mix(in srgb, var(--rz-primary, #0d6efd) 65%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 4px var(--rz-primary),
            0 0 30px 14px color-mix(in srgb, var(--rz-primary, #0d6efd) 35%, transparent);
    }
    100% {
        box-shadow:
            0 0 0 3px var(--rz-primary),
            0 0 22px 6px color-mix(in srgb, var(--rz-primary, #0d6efd) 45%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .onu-card.focused[b-zuxm86pnh7] {
        animation: none;
    }
}

/* Grid operacional: coluna principal (identificacao + servico) | saude optica/acoes */
.onu-card-grid[b-zuxm86pnh7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--onu-gap-lg, 12px);
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.onu-card-section[b-zuxm86pnh7] {
    min-width: 0;
    border-radius: var(--onu-radius-panel, 10px);
}

.onu-card-identity[b-zuxm86pnh7] {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Padding assimetrico (mais respiro inferior) para ritmo, nao monotono. */
    padding: 0.4rem 0.55rem 0.5rem;
    background: var(--onu-panel-bg-soft, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 5%));
    border: 1px solid var(--onu-panel-border, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%));
}

.onu-card-service[b-zuxm86pnh7] {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-md, 8px);
    min-width: 0;
}

/* Painel direito: saude optica, metricas e acoes ficam em grupos separados.
   gap-lg separa nitidamente os dois grupos (sinal | acoes), maior que o ritmo
   interno da coluna de servico (gap-md) para reforcar o agrupamento. */
.onu-side-rail[b-zuxm86pnh7] {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    align-content: start;
    gap: var(--onu-gap-lg, 12px);
    min-width: 0;
    align-self: stretch;
    padding: 0.55rem;
    border-radius: var(--onu-radius-panel, 10px);
    background:
        linear-gradient(180deg, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%), transparent),
        var(--onu-panel-bg, color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 6%));
    border: 1px solid var(--onu-panel-border, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 14%));
    box-shadow: inset 0 1px 0 color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%);
}

/* Barra de status vertical com gradient (substitui border-left rigido).
   Evita repaint do border ao trocar estado (so o ::before muda). */
.onu-card[b-zuxm86pnh7]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--onu-status-bar-w, 4px);
    background: linear-gradient(180deg,
        var(--rz-base-500) 0%,
        color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 5%) 100%);
    transition: background var(--onu-anim-medium, 200ms) var(--onu-ease);
}

/* Camada decorativa do pattern com opacidade controlada. */
.onu-card[b-zuxm86pnh7]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--onu-decor-pattern) repeat;
    opacity: var(--onu-decor-opacity, 0.05);
    pointer-events: none;
    color: currentColor;
}

/* Slot top-right do card para badge "evento recente" e botao reassign (T4/T8) */
.onu-recent-event-slot[b-zuxm86pnh7] {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    z-index: 5;
}

.onu-recent-event-slot .reassign-btn[b-zuxm86pnh7] {
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.onu-recent-event-slot .reassign-btn .reassign-svg[b-zuxm86pnh7] {
    width: 14px;
    height: 14px;
    color: currentColor;
    display: inline-block;
}

.reassign-pending[b-zuxm86pnh7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: var(--onu-radius-pill, 8px);
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.18);
    color: var(--rz-warning-darker);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: help;
    user-select: none;
    border: 1px dashed currentColor;
    animation: reassignPendingPulse-b-zuxm86pnh7 2.4s ease-in-out infinite;
}

.reassign-pending .reassign-pending-svg[b-zuxm86pnh7] {
    width: 14px;
    height: 14px;
    color: currentColor;
    display: inline-block;
    animation: reassignHourglassFlip-b-zuxm86pnh7 3s ease-in-out infinite;
}

@keyframes reassignPendingPulse-b-zuxm86pnh7 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rz-warning-rgb, 255, 152, 0), 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(var(--rz-warning-rgb, 255, 152, 0), 0.12); }
}

@keyframes reassignHourglassFlip-b-zuxm86pnh7 {
    0%, 90%, 100% { transform: rotate(0deg); }
    95%           { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    .reassign-pending[b-zuxm86pnh7],
    .reassign-pending .reassign-pending-svg[b-zuxm86pnh7] {
        animation: none;
    }
}

.onu-card.connected[b-zuxm86pnh7]::before {
    background: linear-gradient(180deg,
        var(--rz-success) 0%,
        rgba(var(--rz-success-rgb, 76,175,80), 0.10) 100%);
}

.onu-card.disconnected[b-zuxm86pnh7]::before {
    background: linear-gradient(180deg,
        var(--rz-danger) 0%,
        rgba(var(--rz-danger-rgb, 244,67,54), 0.10) 100%);
}

.onu-card:hover[b-zuxm86pnh7] {
    transform: translateY(-2px);
    box-shadow: var(--onu-elevation-hover, 0 4px 12px rgba(0,0,0,0.18));
    /* tg:12: hover tambem derivava do navy fixo (--rz-secondary-rgb inexistente).
       Agora eleva levemente a superficie theme-aware (mais escura no dark, mais
       clara no light) sem lavar o card. */
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 9%),
            color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 4%));
}

.onu-card:hover[b-zuxm86pnh7]::before {
    width: calc(var(--onu-status-bar-w, 4px) + 1px);
}

/* status indicator agora vive no .onu-card::before com gradient. */

.onu-content[b-zuxm86pnh7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-left: 2px;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.onu-main[b-zuxm86pnh7] {
    display: block;
}

.onu-info[b-zuxm86pnh7] {
    display: flex;
    flex-direction: column;
    /* Ritmo: cluster secundario (SN/meta/CTO) agrupa tight via gap-xs; a
       separacao do nome primario vem do margin-top de .onu-sn abaixo. */
    gap: var(--onu-gap-xs, 2px);
    min-width: 0;
    /* container query: permite que .onu-name encolha a fonte conforme largura cai */
    container-type: inline-size;
}

/* --- Header --- */
[b-zuxm86pnh7] .onu-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[b-zuxm86pnh7] .onu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.connected[b-zuxm86pnh7]  .onu-icon {
    background: var(--rz-success-lighter);
    color: var(--rz-success);
}

.disconnected[b-zuxm86pnh7]  .onu-icon {
    background: var(--rz-danger-lighter);
    color: var(--rz-danger);
}

/* Auto-shrink hibrido:
   - Em containers largos (>= 360px): font-size 0.85rem, 1 linha.
   - Conforme container encolhe: cqi reduz proporcionalmente ate 0.7rem.
   - Se ainda nao couber: quebra ate 2 linhas (line-clamp).
   - Tooltip nativo (title) preserva nome completo. */
[b-zuxm86pnh7] .onu-name {
    /* tg:12: era --rz-primary-light (azul claro) — ilegivel sobre o header
       claro no tema light. Ancora no texto do tema, com leve tonalidade primary,
       e escurece no light / clareia no dark via --rz-text-color (color-mix). */
    color: color-mix(in srgb, var(--rz-primary, #1976d2) 38%, var(--rz-text-color, #1a2230) 62%);
    /* Tipografia de marca: o nome da ONU e o titulo primario do card -> Exo. */
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-weight: 700;
    font-size: clamp(0.74rem, 2.5cqi, 0.9rem);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
}

.onu-sn[b-zuxm86pnh7] {
    color: var(--rz-text-secondary);
    font-size: 0.7rem;
    margin-left: 28px;
    /* Separa o nome primario do cluster secundario indentado (ritmo). */
    margin-top: var(--onu-gap-sm, 4px);
    opacity: 0.8;
}

[b-zuxm86pnh7] .onu-time {
    font-size: 0.65rem;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    font-weight: 500;
}

[b-zuxm86pnh7] .onu-state-badge {
    font-size: 0.62rem;
    padding: 0.08rem 0.34rem;
    border-radius: var(--onu-radius-pill, 8px);
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* tg:12: badges de estado usavam texto -light (claro), que sobre o fundo
   translucido claro do tema light ficava lavado. O texto agora deriva do hue
   misturado com --rz-text-color (escurece no light, clareia no dark) e o fundo
   sobe um pouco a opacidade para sustentar o contraste. */
[b-zuxm86pnh7] .onu-state-online {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.20);
    color: color-mix(in srgb, var(--rz-success, #4caf50) 55%, var(--rz-text-color, #1a2230) 45%);
    border-color: rgba(var(--rz-success-rgb, 76, 175, 80), 0.42);
}

[b-zuxm86pnh7] .onu-state-offline {
    background: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.18);
    color: color-mix(in srgb, var(--rz-danger, #f44336) 58%, var(--rz-text-color, #1a2230) 42%);
    border-color: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.42);
}

[b-zuxm86pnh7] .time-success {
    background: var(--rz-success-lighter);
    color: var(--rz-success-light);
}

[b-zuxm86pnh7] .time-danger {
    background: var(--rz-danger-lighter);
    color: var(--rz-danger-light);
}

[b-zuxm86pnh7] .event-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--rz-info-rgb, 59,130,246), 0.25), rgba(var(--rz-primary-rgb, 59,130,246), 0.15));
    color: var(--rz-primary-light);
    border-radius: 4px;
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: bold;
    animation: pulse-light-b-zuxm86pnh7 2s infinite;
}

@keyframes pulse-light-b-zuxm86pnh7 {
    0%   { box-shadow: 0 0 0 0 var(--rz-info-lighter); }
    70%  { box-shadow: 0 0 0 3px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Meta chips --- */
[b-zuxm86pnh7] .onu-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--onu-gap-sm, 4px);
    margin-left: 28px;
}

.onu-cto-meta[b-zuxm86pnh7] {
    margin-left: 28px;
    margin-top: var(--onu-gap-xs, 2px);
}

[b-zuxm86pnh7] .onu-meta-chip {
    font-size: 0.64rem;
    padding: 0.06rem 0.34rem;
    border-radius: 3px;
    background: color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 8%);
    color: var(--rz-text-color);
    border: 1px solid var(--onu-panel-border, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 14%));
    /* tg:12: text-shadow preto fixo so ajudava no dark; no light borrava o texto.
       Removido — o contraste agora vem do par cor/fundo theme-aware. */
}

/* tg:12: chips circuito/stale usavam texto -light/-lighter (claro) sobre fundo
   translucido — lavados no tema claro. Texto agora deriva do hue + --rz-text-color
   (escurece no light, clareia no dark). */
[b-zuxm86pnh7] .onu-meta-chip.circuito {
    background: rgba(var(--rz-primary-rgb, 59,130,246), 0.20);
    color: color-mix(in srgb, var(--rz-primary, #1976d2) 52%, var(--rz-text-color, #1a2230) 48%);
    font-weight: 700;
    border-color: rgba(var(--rz-primary-rgb, 59,130,246), 0.45);
}

[b-zuxm86pnh7] .onu-meta-chip.stale {
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.22);
    color: color-mix(in srgb, var(--onu-accent-cto, #b45309) 58%, var(--rz-text-color, #1a2230) 42%);
    font-weight: 700;
    border-color: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.50);
}

/* --- Signal (no side-rail) --- */
[b-zuxm86pnh7] .onu-signal {
    display: grid;
    width: 100%;
}

/* --- Cliente info (Algar) — collapsible <details> --- */
[b-zuxm86pnh7] .onu-cliente-info {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--rz-base-500);
    display: block;
}

/* Summary: linha unica clicavel com nome + status badge + caret. */
[b-zuxm86pnh7] .cliente-summary {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 0.05rem 0;
    border-radius: 4px;
}

[b-zuxm86pnh7] .cliente-summary:hover {
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%);
}

[b-zuxm86pnh7] .cliente-summary:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

[b-zuxm86pnh7] .cliente-summary::-webkit-details-marker { display: none; }
[b-zuxm86pnh7] .cliente-summary::marker { content: ''; }

/* Caret apontando para baixo / direita conforme estado open. */
[b-zuxm86pnh7] .cliente-summary-marker {
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    color: var(--rz-text-tertiary, rgba(255,255,255,0.5));
    transition: transform var(--onu-anim-fast, 120ms) var(--onu-ease, ease);
}

[b-zuxm86pnh7] details.onu-cliente-info[open] .cliente-summary-marker {
    transform: rotate(45deg);
}

[b-zuxm86pnh7] .cliente-status-chip {
    flex-shrink: 0;
}

[b-zuxm86pnh7] .cliente-body {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    animation: clienteBodyIn-b-zuxm86pnh7 var(--onu-anim-medium, 180ms) var(--onu-ease, ease);
}

@keyframes clienteBodyIn-b-zuxm86pnh7 {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [b-zuxm86pnh7] .cliente-body { animation: none; }
}

/* Link Google Maps com lat/long. Chip pill clicavel. */
[b-zuxm86pnh7] .cliente-maps-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    margin-left: 1.1rem;
    padding: 0.18rem 0.55rem;
    border-radius: var(--onu-radius-pill, 8px);
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.18);
    color: var(--rz-info);
    font-size: 0.65rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(var(--rz-info-rgb, 33, 150, 243), 0.35);
    transition: background var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
                transform var(--onu-anim-fast, 120ms) var(--onu-ease, ease);
}

[b-zuxm86pnh7] .cliente-maps-link:hover {
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.30);
    transform: translateY(-1px);
}

[b-zuxm86pnh7] .cliente-maps-link:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

[b-zuxm86pnh7] .cliente-maps-link .rzi {
    font-size: 0.85rem;
}

[b-zuxm86pnh7] .cliente-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

[b-zuxm86pnh7] .cliente-icon {
    font-size: 0.8rem;
    /* tg:12: --rz-primary-light lavava no light; tonalidade theme-aware. */
    color: color-mix(in srgb, var(--rz-primary, #1976d2) 50%, var(--rz-text-color, #1a2230) 50%);
}

[b-zuxm86pnh7] .cliente-nome {
    font-size: 0.75rem;
    font-weight: 500;
    /* tg:12: --rz-text-light era claro; usa o texto do tema (troca via toggle). */
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-zuxm86pnh7] .cliente-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-left: 1.1rem;
}

[b-zuxm86pnh7] .cliente-badges .rz-badge,
[b-zuxm86pnh7] .cliente-badge .rz-badge {
    font-size: 0.62rem !important;
    padding: 0.05rem 0.34rem !important;
    border-radius: 3px !important;
    color: var(--rz-text-color) !important;
    border: 1px solid var(--onu-panel-border, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 14%)) !important;
}

[b-zuxm86pnh7] .cliente-badges .rz-badge.rz-badge-pill,
[b-zuxm86pnh7] .cliente-badge .rz-badge.rz-badge-pill {
    border-radius: 3px !important;
}

[b-zuxm86pnh7] .cliente-endereco {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6rem;
    color: var(--rz-text-secondary);
    margin-left: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- IXC indicators --- */
[b-zuxm86pnh7] .onu-ixc-indicators {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--rz-base-500);
}

[b-zuxm86pnh7] .onu-ixc-indicators .rzi {
    font-size: 1rem;
    cursor: help;
    transition: transform var(--onu-anim-fast, 120ms) var(--onu-ease);
}

[b-zuxm86pnh7] .onu-ixc-indicators .rzi:hover {
    transform: scale(1.15);
}

[b-zuxm86pnh7] .onu-svg-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex-shrink: 0;
    cursor: help;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
    transition: transform var(--onu-anim-fast, 120ms) var(--onu-ease),
                opacity var(--onu-anim-fast, 120ms) var(--onu-ease);
}

[b-zuxm86pnh7] .onu-svg-icon:hover {
    transform: translateY(-1px) scale(1.06);
    opacity: 0.96;
}

[b-zuxm86pnh7] .remote-access-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: transform var(--onu-anim-fast, 120ms) var(--onu-ease);
}

[b-zuxm86pnh7] .remote-access-link:hover {
    transform: scale(1.15);
}

[b-zuxm86pnh7] .remote-access-link:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

[b-zuxm86pnh7] .remote-access-link .rzi {
    cursor: pointer;
}

[b-zuxm86pnh7] .remote-access-link .onu-svg-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* SVGs renderizados via mask-image herdam currentColor do botao Radzen.
   Funciona para light/warning/info via background-color: currentColor. */
[b-zuxm86pnh7] .onu-action-svg {
    width: var(--onu-icon-size-sm, 16px);
    height: var(--onu-icon-size-sm, 16px);
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: transform var(--onu-anim-fast, 120ms) var(--onu-ease),
                opacity var(--onu-anim-fast, 120ms) var(--onu-ease);
    /* tg:12: icones de acao estavam apagados (0.88 + variante Light). Sobe a
       opacidade base para garantir leitura no tema claro. */
    opacity: 0.96;
}

[b-zuxm86pnh7] .onu-action-btn:hover .onu-action-svg {
    transform: scale(1.14);
    opacity: 1;
}

[b-zuxm86pnh7] .onu-action-btn:active .onu-action-svg {
    transform: scale(0.94);
}

[b-zuxm86pnh7] .onu-action-text {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

[b-zuxm86pnh7] .onu-action-svg.icon-check-state {
    -webkit-mask-image: url("/icons/onu/actions/check-state.svg");
            mask-image: url("/icons/onu/actions/check-state.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-check-signal {
    -webkit-mask-image: url("/icons/onu/actions/check-signal.svg");
            mask-image: url("/icons/onu/actions/check-signal.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-refresh-macs {
    -webkit-mask-image: url("/icons/onu/actions/refresh-macs.svg");
            mask-image: url("/icons/onu/actions/refresh-macs.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-reboot {
    -webkit-mask-image: url("/icons/onu/actions/reboot.svg");
            mask-image: url("/icons/onu/actions/reboot.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-reprovision {
    -webkit-mask-image: url("/icons/onu/actions/reprovision.svg");
            mask-image: url("/icons/onu/actions/reprovision.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-batimento {
    -webkit-mask-image: url("/icons/onu/actions/batimento.svg");
            mask-image: url("/icons/onu/actions/batimento.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-swap-cto {
    -webkit-mask-image: url("/icons/onu/actions/swap-cto.svg");
            mask-image: url("/icons/onu/actions/swap-cto.svg");
}
[b-zuxm86pnh7] .onu-action-svg.icon-hourglass-pending {
    -webkit-mask-image: url("/icons/onu/actions/hourglass-pending.svg");
            mask-image: url("/icons/onu/actions/hourglass-pending.svg");
}

/* --- Progress bar --- */
[b-zuxm86pnh7] .onu-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    margin: 0;
}

[b-zuxm86pnh7] .onu-progress .rz-progressbar {
    height: 2px;
    border-radius: 0;
}

/* --- Pulse de borda em update realtime ---
   Trigger: atributo data-pulse no .onu-card setado pelo C# (PulseKind()).
   CSS puro: roda no proximo render do grid (debounced); sem extra StateHasChanged. */
.onu-card[data-pulse="signal"][b-zuxm86pnh7] {
    animation: onuPulseSignal-b-zuxm86pnh7 var(--onu-anim-fast) var(--onu-ease) 1;
}

.onu-card[data-pulse="state"][b-zuxm86pnh7] {
    animation: onuPulseState-b-zuxm86pnh7 var(--onu-anim-fast) var(--onu-ease) 1;
}

.onu-card[data-pulse="mac"][b-zuxm86pnh7] {
    animation: onuPulseMac-b-zuxm86pnh7 var(--onu-anim-fast) var(--onu-ease) 1;
}

@keyframes onuPulseSignal-b-zuxm86pnh7 {
    0%   { box-shadow: 0 0 0 0 var(--onu-pulse-color-signal), 0 1px 3px rgba(0, 0, 0, 0.12); }
    100% { box-shadow: 0 0 0 6px transparent, 0 1px 3px rgba(0, 0, 0, 0.12); }
}

@keyframes onuPulseState-b-zuxm86pnh7 {
    0%   { box-shadow: 0 0 0 0 var(--onu-pulse-color-state), 0 1px 3px rgba(0, 0, 0, 0.12); }
    100% { box-shadow: 0 0 0 6px transparent, 0 1px 3px rgba(0, 0, 0, 0.12); }
}

@keyframes onuPulseMac-b-zuxm86pnh7 {
    0%   { box-shadow: 0 0 0 0 var(--onu-pulse-color-mac), 0 1px 3px rgba(0, 0, 0, 0.12); }
    100% { box-shadow: 0 0 0 6px transparent, 0 1px 3px rgba(0, 0, 0, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
    .onu-card[data-pulse][b-zuxm86pnh7] {
        animation: none;
    }
}

/* --- Chip flash --- */
[b-zuxm86pnh7] .chip-flash {
    animation: chipFlash-b-zuxm86pnh7 var(--onu-anim-medium) var(--onu-ease) 1;
}

@keyframes chipFlash-b-zuxm86pnh7 {
    0%   { background-color: var(--onu-pulse-color-signal); }
    100% { background-color: transparent; }
}

/* --- Actions bar --- */
.onu-actions-bar[b-zuxm86pnh7] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.22rem;
    padding: 0.35rem;
    border-radius: var(--onu-radius-panel, 10px);
    background: var(--onu-panel-bg-soft, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%));
    position: static;
    z-index: 4;
    border: 1px solid var(--onu-panel-border, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 12%));
}

.onu-actions-bar[b-zuxm86pnh7]  .rz-button {
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    overflow: hidden;
    gap: 0.25rem;
    border-radius: var(--onu-radius-pill, 8px);
    /* tg:12: a variante Light/Text dos botoes herdava uma cor muito apagada,
       deixando os icones (CPE etc.) quase invisiveis no tema claro. Ancora a
       cor no texto do tema (troca via toggle) para leitura consistente. */
    color: color-mix(in srgb, var(--rz-text-color, #1a2230) 82%, transparent);
    transition:
        width var(--onu-anim-medium, 200ms) var(--onu-ease),
        background var(--onu-anim-fast, 120ms) var(--onu-ease),
        color var(--onu-anim-fast, 120ms) var(--onu-ease),
        box-shadow var(--onu-anim-fast, 120ms) var(--onu-ease);
}

.onu-actions-bar[b-zuxm86pnh7]  .rz-button:hover,
.onu-actions-bar[b-zuxm86pnh7]  .rz-button:focus-visible {
    width: 5.4rem;
    background: rgba(var(--rz-primary-rgb, 0, 235, 176), 0.12);
    box-shadow: 0 0 0 1px rgba(var(--rz-primary-rgb, 0, 235, 176), 0.22);
}

.onu-actions-bar[b-zuxm86pnh7]  .rz-button.action-reboot:hover,
.onu-actions-bar[b-zuxm86pnh7]  .rz-button.action-reboot:focus-visible {
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.16);
    box-shadow: 0 0 0 1px rgba(var(--rz-warning-rgb, 255, 152, 0), 0.26);
}

/* Focus ring de teclado claro para a11y, alem do realce de hover/focus acima
   (que so expande largura + tint). Outline token-based unificado (--rz-primary)
   coerente com .onu-card.focused / .mini-body / chips. */
.onu-actions-bar[b-zuxm86pnh7]  .rz-button:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

[b-zuxm86pnh7] .onu-action-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    color: currentColor;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition:
        max-width var(--onu-anim-medium, 200ms) var(--onu-ease),
        opacity var(--onu-anim-fast, 120ms) var(--onu-ease);
}

.onu-actions-bar[b-zuxm86pnh7]  .rz-button:hover .onu-action-label,
.onu-actions-bar[b-zuxm86pnh7]  .rz-button:focus-visible .onu-action-label {
    max-width: 3.8rem;
    opacity: 1;
}

.onu-actions-bar[b-zuxm86pnh7]  .onu-action-btn.action-batimento.armed {
    color: var(--rz-warning);
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.14);
}

/* Header: SVGs custom para cloud-on/off via mask-image para herdar cor do
   contexto (.connected -> success / .disconnected -> danger).
   <img> nao herda currentColor; mask + background-color: currentColor herda. */
[b-zuxm86pnh7] .onu-header-svg {
    width: var(--onu-icon-size-md, 20px);
    height: var(--onu-icon-size-md, 20px);
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

[b-zuxm86pnh7] .onu-header-svg.icon-cloud-on {
    -webkit-mask-image: url("/icons/onu/state/cloud-on.svg");
            mask-image: url("/icons/onu/state/cloud-on.svg");
}

[b-zuxm86pnh7] .onu-header-svg.icon-cloud-off {
    -webkit-mask-image: url("/icons/onu/state/cloud-off.svg");
            mask-image: url("/icons/onu/state/cloud-off.svg");
}

/* MAC e ServicePort styles foram migrados para componentes scoped:
   - .onu-vport / .onu-sp / .onu-mac → OnuCardVportSection.razor.css
   - .onu-orphan-mac → OnuCardHierarchy.razor.css
   - .onu-wan-* → OnuCardWanSection.razor.css
   Tokens: wwwroot/css/onu-card-tokens.css */

/* --- Reduced motion: neutraliza transicoes/transforms de hover/focus dos
   elementos interativos do card. Os tokens --onu-anim-* ja viram ~1ms em
   onu-card-tokens.css; aqui removemos explicitamente o movimento (transform)
   para nao deslocar elementos sob prefers-reduced-motion. As animacoes de
   pulse/focus ja sao neutralizadas em blocos dedicados acima. --- */
@media (prefers-reduced-motion: reduce) {
    .onu-card[b-zuxm86pnh7],
    .onu-actions-bar[b-zuxm86pnh7]  .rz-button,
    [b-zuxm86pnh7] .onu-action-label,
    [b-zuxm86pnh7] .onu-action-svg,
    [b-zuxm86pnh7] .onu-svg-icon,
    [b-zuxm86pnh7] .onu-ixc-indicators .rzi,
    [b-zuxm86pnh7] .remote-access-link,
    [b-zuxm86pnh7] .cliente-maps-link {
        transition: none;
    }

    .onu-card:hover[b-zuxm86pnh7],
    [b-zuxm86pnh7] .onu-action-btn:hover .onu-action-svg,
    [b-zuxm86pnh7] .onu-action-btn:active .onu-action-svg,
    [b-zuxm86pnh7] .onu-svg-icon:hover,
    [b-zuxm86pnh7] .onu-ixc-indicators .rzi:hover,
    [b-zuxm86pnh7] .remote-access-link:hover,
    [b-zuxm86pnh7] .cliente-maps-link:hover {
        transform: none;
    }

    /* Neutraliza animacoes continuas/flash sob reduced-motion */
    [b-zuxm86pnh7] .event-badge,
    [b-zuxm86pnh7] .chip-flash,
    .onu-card[data-pulse][b-zuxm86pnh7],
    .onu-card.focused[b-zuxm86pnh7] {
        animation: none !important;
    }
}

/* --- Responsive --- */
@media (max-width: 1180px) {
    .onu-card-grid[b-zuxm86pnh7] {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
    }
}

@media (max-width: 980px) {
    /* Rail encolhe monotonicamente (21->19->18rem) conforme o viewport estreita,
       liberando largura para a coluna principal sem clipar o painel de sinal. */
    .onu-card-grid[b-zuxm86pnh7] {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem);
    }

    .onu-card-identity[b-zuxm86pnh7] {
        grid-column: 1;
        grid-row: 1;
    }

    .onu-card-service[b-zuxm86pnh7] {
        grid-column: 1;
        grid-row: 2;
    }

    .onu-side-rail[b-zuxm86pnh7] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 576px) {
    .onu-card[b-zuxm86pnh7] {
        padding: 0.4rem;
        padding-left: calc(0.4rem + var(--onu-status-bar-w, 4px));
    }

    .onu-card-grid[b-zuxm86pnh7] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--onu-gap-md, 8px);
    }

    .onu-card-identity[b-zuxm86pnh7],
    .onu-card-service[b-zuxm86pnh7],
    .onu-side-rail[b-zuxm86pnh7] {
        grid-column: 1;
        grid-row: auto;
    }

    .onu-side-rail[b-zuxm86pnh7] {
        min-width: 0;
        width: 100%;
        padding: 0.45rem;
        gap: var(--onu-gap-md, 8px);
    }

    .onu-actions-bar[b-zuxm86pnh7] {
        justify-content: flex-start;
        padding: 0.28rem;
    }

    .onu-actions-bar[b-zuxm86pnh7]  .rz-button,
    .onu-actions-bar[b-zuxm86pnh7]  .rz-button:hover,
    .onu-actions-bar[b-zuxm86pnh7]  .rz-button:focus-visible {
        width: 2rem;
    }

    [b-zuxm86pnh7] .onu-action-label {
        display: none;
    }
}
/* /Components/OnuManager/Cards/OnuCardAlarmsSection.razor.rz.scp.css */
.onu-alarm-section[b-3c53z210ca] {
    margin-top: var(--onu-gap-md);
    padding: var(--onu-gap-sm) var(--onu-gap-md);
    border-radius: var(--onu-radius-section);
    background: var(--onu-glass-bg);
    border: 1px solid var(--onu-glass-border);
    -webkit-backdrop-filter: blur(var(--onu-glass-blur)) saturate(var(--onu-glass-saturation));
    backdrop-filter: blur(var(--onu-glass-blur)) saturate(var(--onu-glass-saturation));
}

.onu-alarm-section-header[b-3c53z210ca] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    margin-bottom: var(--onu-gap-xs);
}

.onu-alarm-section-title[b-3c53z210ca] {
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.55));
}

.onu-alarm-section-count[b-3c53z210ca] {
    font-size: 0.6rem;
    padding: 0 var(--onu-gap-sm);
    border-radius: var(--onu-radius-chip);
    background: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.16);
    color: var(--rz-danger-light, #ff9a9a);
    line-height: 1.4;
}

.onu-alarm-list[b-3c53z210ca] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-xs);
}

.onu-alarm-item[b-3c53z210ca] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-xs);
    padding: var(--onu-gap-xs) var(--onu-gap-sm);
    border-radius: var(--onu-radius-chip);
    border-left: 2px solid transparent;
    background: color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 6%);
    font-size: 0.64rem;
    line-height: 1.4;
}

.onu-alarm-item.alarm-critical[b-3c53z210ca] {
    border-left-color: var(--rz-danger, #f44336);
}

.onu-alarm-item.alarm-major[b-3c53z210ca],
.onu-alarm-item.alarm-warning[b-3c53z210ca] {
    border-left-color: var(--rz-warning, #ff9800);
}

.onu-alarm-item.alarm-info[b-3c53z210ca] {
    border-left-color: var(--rz-info, #03a9f4);
}

.onu-alarm-severity[b-3c53z210ca] {
    text-transform: uppercase;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 4px;
    border-radius: var(--onu-radius-chip);
    border: 1px solid var(--onu-glass-border);
}

.onu-alarm-code[b-3c53z210ca] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.63rem;
    font-weight: 600;
}

.onu-alarm-pos[b-3c53z210ca] {
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.7));
}

.onu-alarm-spacer[b-3c53z210ca] {
    flex: 1 1 auto;
}

.onu-alarm-time[b-3c53z210ca] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.52));
}
/* /Components/OnuManager/Cards/OnuCardClienteDetalhado.razor.rz.scp.css */
/*
   Bloco "Detalhes do Cliente" no card da ONU.
   Inspirado em OnuCardClienteInfo, com tab strip CSS-only e
   sub-paineis (Cliente | Circuito | SPS).
   Tudo escopado via Blazor component CSS isolation.

   CONTRATO DE TEMA (tg:03b — real theme-parity):
   O toggle de tema in-app (RadzenAppearanceToggle) NAO aplica classe nem
   atributo no DOM; ele apenas TROCA o valor das variaveis `--rz-*` em :root.
   Logo, paridade real deriva de `--rz-*` (que TROCAM) e nao de seletores
   `:host-context(.rz-theme-default)` / `[data-bs-theme="light"]` (que NUNCA
   casam em runtime). Regras:
   - NEUTROS (superficie/borda/divisor/texto): superficies translucidas usam
     `color-mix(in srgb, transparent, var(--rz-text-color) N%)` — como
     `--rz-text-color` troca (claro no dark, escuro no light), o overlay
     clareia no dark e escurece no light automaticamente; textos usam
     `--rz-text-color` / `--rz-text-secondary-color`.
   - ACENTOS de hue (verde/vermelho/azul): texto via
     `color-mix(<hue> 60%, var(--rz-text-color) 40%)`; fundo/borda via
     `color-mix(transparent, <hue> N%)`.
   - AMBAR ancora no acento de marca `--onu-accent-cto` (NAO no olive
     `--rz-warning`), consistente com tg:02/tg:04.
   - Fallbacks `var(--token, <hex>)` usam o valor LIGHT-intended de hoje.
   Os blocos light-override inertes foram REMOVIDOS (o toggle ja conduz o tema
   via --rz-*); nao reintroduzir.
*/

.onu-cliente-detalhado[b-aj1e2kwb4g] {
    margin-top: 0.4rem;
    border-top: 1px dashed color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
    padding-top: 0.35rem;
    cursor: pointer;
}

.onu-cliente-detalhado[open][b-aj1e2kwb4g] {
    border-top-style: solid;
}

/* Resumo (linha clicavel) */
.cliente-det-summary[b-aj1e2kwb4g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    user-select: none;
    padding: 0.18rem 0.2rem;
    border-radius: 6px;
    transition: background-color 120ms ease;
}

.cliente-det-summary:hover[b-aj1e2kwb4g] {
    background-color: color-mix(in srgb, transparent, var(--rz-primary, #0078d7) 6%);
}

.cliente-det-summary[b-aj1e2kwb4g]::-webkit-details-marker { display: none; }
.cliente-det-summary[b-aj1e2kwb4g]::marker { content: ''; }

.cliente-det-icon[b-aj1e2kwb4g] {
    font-size: 0.85rem;
    color: var(--rz-primary, #0078d7);
}

.cliente-det-nome[b-aj1e2kwb4g] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rz-text-color, #1a2230);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip de status (CRM/Algar) - bordas quadradas e cores mais vivas */
.cliente-det-status[b-aj1e2kwb4g] {
    flex-shrink: 0;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.05rem 0.28rem;
    border-radius: 3px;
    border: 1px solid transparent;
    line-height: 1;
}

.cliente-det-status.status-ok[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-success, #4caf50) 28%);
    color: color-mix(in srgb, var(--rz-success-dark, #1b5e20) 60%, var(--rz-text-color, #1b5e20) 40%);
    border-color: color-mix(in srgb, transparent, var(--rz-success, #4caf50) 55%);
}

.cliente-det-status.status-warn[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--onu-accent-cto, #ff9800) 30%);
    color: color-mix(in srgb, var(--onu-accent-cto, #8c6d00) 60%, var(--rz-text-color, #8c6d00) 40%);
    border-color: color-mix(in srgb, transparent, var(--onu-accent-cto, #ff9800) 60%);
}

.cliente-det-status.status-danger[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-danger, #f44336) 28%);
    color: color-mix(in srgb, var(--rz-danger, #b71c1c) 60%, var(--rz-text-color, #b71c1c) 40%);
    border-color: color-mix(in srgb, transparent, var(--rz-danger, #f44336) 55%);
}

.cliente-det-status.status-muted[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-text-color, #2a3441) 18%);
    color: var(--rz-text-secondary-color, #2a3441);
    border-color: color-mix(in srgb, transparent, var(--rz-text-color, #2a3441) 32%);
}

/* Chip "divergencia" e "ok" - mesmo padrao quadrado */
.cliente-det-divergencia[b-aj1e2kwb4g],
.cliente-det-ok[b-aj1e2kwb4g] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    font-size: 0.56rem;
    font-weight: 700;
    padding: 0.1rem 0.36rem;
    border-radius: 3px;
    line-height: 1;
}

.cliente-det-divergencia[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-danger, #f44336) 16%);
    color: color-mix(in srgb, var(--rz-danger, #b71c1c) 60%, var(--rz-text-color, #b71c1c) 40%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-danger, #f44336) 42%);
    gap: 0.12rem;
    font-size: 0.52rem;
    padding: 0.06rem 0.28rem;
}

.cliente-det-ok[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-success, #4caf50) 14%);
    color: color-mix(in srgb, var(--rz-success-dark, #1b5e20) 60%, var(--rz-text-color, #1b5e20) 40%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-success, #4caf50) 36%);
}

.cliente-det-divergencia .rzi[b-aj1e2kwb4g],
.cliente-det-ok .rzi[b-aj1e2kwb4g] {
    font-size: 0.66rem;
}

.cliente-det-divergencia .rzi[b-aj1e2kwb4g] {
    font-size: 0.58rem;
}

/* Caret a direita rotaciona quando aberto */
.cliente-det-marker[b-aj1e2kwb4g] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    color: color-mix(in srgb, transparent, var(--rz-text-color, #2a3441) 50%);
    transition: transform 140ms ease;
}

.onu-cliente-detalhado[open] .cliente-det-marker[b-aj1e2kwb4g] {
    transform: rotate(45deg);
}

/* Corpo expandido */
.cliente-det-body[b-aj1e2kwb4g] {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem 0.6rem;
    border-radius: 4px;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 5%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 14%);
    animation: clienteDetIn-b-aj1e2kwb4g 180ms ease;
}

@keyframes clienteDetIn-b-aj1e2kwb4g {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cliente-det-body[b-aj1e2kwb4g],
    .cliente-det-pane[b-aj1e2kwb4g] { animation: none; }
}

/* Tab strip - bordas mais quadradas, contraste reforcado */
.cliente-det-tabs[b-aj1e2kwb4g] {
    display: inline-flex;
    align-self: stretch;
    gap: 2px;
    padding: 2px;
    border-radius: 4px;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
}

.cliente-det-tab[b-aj1e2kwb4g] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    padding: 0.36rem 0.6rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--rz-text-secondary-color, #2a3441);
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.cliente-det-tab .rzi[b-aj1e2kwb4g] {
    font-size: 0.9rem;
}

.cliente-det-tab:hover:not(.disabled):not(.active)[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-primary, #0078d7) 18%);
    color: var(--rz-text-color, #0a1019);
    transform: translateY(-1px);
}

.cliente-det-tab.active[b-aj1e2kwb4g] {
    background: var(--rz-primary, #0078d7);
    color: var(--rz-on-primary, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

.cliente-det-tab.disabled[b-aj1e2kwb4g] {
    opacity: 0.45;
    cursor: not-allowed;
}

.cliente-det-tab-dot[b-aj1e2kwb4g] {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rz-danger, #f44336);
    box-shadow: 0 0 0 2px var(--rz-base-200, rgba(0, 0, 0, 0.2));
}

/* Tab pane (container) */
.cliente-det-tabpane[b-aj1e2kwb4g] {
    min-height: 36px;
}

.cliente-det-pane[b-aj1e2kwb4g] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    animation: tabPaneIn-b-aj1e2kwb4g var(--onu-anim-medium, 160ms) var(--onu-ease, ease);
}

@keyframes tabPaneIn-b-aj1e2kwb4g {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Aba Cliente */
.cliente-det-badges[b-aj1e2kwb4g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
}

.cliente-det-row[b-aj1e2kwb4g] {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color, #2a3441);
    min-width: 0;
}

.cliente-det-row .rzi[b-aj1e2kwb4g] {
    font-size: 0.78rem;
    color: var(--rz-primary-light, #4ea1f0);
    flex-shrink: 0;
}

.cliente-det-row-text[b-aj1e2kwb4g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cliente-det-maps[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.22rem 0.6rem;
    border-radius: 4px;
    background: color-mix(in srgb, transparent, var(--rz-info, #2196f3) 24%);
    color: color-mix(in srgb, var(--rz-info, #1d4ed8) 60%, var(--rz-text-color, #1d4ed8) 40%);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, transparent, var(--rz-info, #2196f3) 50%);
    transition: background 140ms ease, transform 140ms ease;
}

.cliente-det-maps:hover[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-info, #2196f3) 40%);
    color: var(--rz-text-color, #1a2230);
    transform: translateY(-1px);
}

.cliente-det-maps .rzi[b-aj1e2kwb4g] {
    font-size: 0.85rem;
}

/* Aba Circuito - key/value */
.cliente-det-kv[b-aj1e2kwb4g] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.18rem;
    margin: 0;
}

.cliente-det-kv .kv-row[b-aj1e2kwb4g] {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.7rem;
    padding: 0.18rem 0.35rem;
    border-radius: 3px;
    transition: background-color 120ms ease;
}

.cliente-det-kv .kv-row:hover[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-primary, #0078d7) 10%);
}

.cliente-det-kv dt[b-aj1e2kwb4g] {
    color: var(--rz-text-secondary-color, #3a4555);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
    margin: 0;
}

.cliente-det-kv dd[b-aj1e2kwb4g] {
    margin: 0;
    color: var(--rz-text-color, #1a2230);
    word-break: break-word;
    font-weight: 500;
}

.cliente-det-kv .kv-mono[b-aj1e2kwb4g] {
    font-family: var(--rz-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.66rem;
}

.cliente-det-kv .kv-aux[b-aj1e2kwb4g] {
    color: var(--rz-text-secondary-color, #2a3441);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #2a3441) 10%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #2a3441) 18%);
    border-radius: 3px;
    padding: 0.04rem 0.32rem;
    font-size: 0.6rem;
    font-weight: 700;
    margin-left: 0.32rem;
    letter-spacing: 0.02em;
}

/* Flags has_contexto_* */
.cliente-det-flags[b-aj1e2kwb4g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

.ctx-flag[b-aj1e2kwb4g] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.16rem 0.45rem;
    border-radius: 3px;
    text-transform: uppercase;
    border: 1px solid transparent;
    line-height: 1;
}

.ctx-flag.on[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-success, #4caf50) 26%);
    color: color-mix(in srgb, var(--rz-success-dark, #1b5e20) 60%, var(--rz-text-color, #1b5e20) 40%);
    border-color: color-mix(in srgb, transparent, var(--rz-success, #4caf50) 50%);
}

.ctx-flag.off[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-text-color, #2a3441) 8%);
    color: var(--rz-text-secondary-color, #5b6470);
    border-color: color-mix(in srgb, transparent, var(--rz-text-color, #5b6470) 16%);
    text-decoration: line-through;
}

/* Aba SPS - tabela comparativa */
.cliente-det-cmp[b-aj1e2kwb4g] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.7rem;
}

.cliente-det-cmp th[b-aj1e2kwb4g],
.cliente-det-cmp td[b-aj1e2kwb4g] {
    padding: 0.28rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%);
    white-space: nowrap;
}

.cliente-det-cmp tbody tr:last-child td[b-aj1e2kwb4g] {
    border-bottom: none;
}

.cliente-det-cmp thead th[b-aj1e2kwb4g] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color, #3a4555);
    font-weight: 800;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%);
    border-bottom: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 16%);
}

.cliente-det-cmp .cmp-campo[b-aj1e2kwb4g] {
    font-weight: 800;
    color: var(--rz-text-secondary-color, #3a4555);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.62rem;
}

.cliente-det-cmp .cmp-crm[b-aj1e2kwb4g],
.cliente-det-cmp .cmp-rad[b-aj1e2kwb4g] {
    color: var(--rz-text-color, #1a2230);
    font-family: var(--rz-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-weight: 500;
}

.cliente-det-cmp .cmp-dif[b-aj1e2kwb4g] {
    color: color-mix(in srgb, var(--rz-danger, #c62828) 60%, var(--rz-text-color, #c62828) 40%);
    font-weight: 800;
}

.cliente-det-cmp tr.row-dif[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-danger, #f44336) 14%);
}

.cliente-det-cmp tr.row-dif:hover[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-danger, #f44336) 20%);
}

.cliente-det-sps-foot[b-aj1e2kwb4g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.45rem;
    border-top: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%);
    font-size: 0.66rem;
    color: var(--rz-text-secondary-color, #3a4555);
}

.cliente-det-sps-foot .rzi[b-aj1e2kwb4g] {
    font-size: 0.78rem;
    margin-right: 0.18rem;
    vertical-align: -2px;
}

.sps-foot-flag[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6rem;
}

.sps-foot-flag.flag-ok[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-success, #4caf50) 26%);
    color: color-mix(in srgb, var(--rz-success-dark, #1b5e20) 60%, var(--rz-text-color, #1b5e20) 40%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-success, #4caf50) 50%);
}

.sps-foot-flag.flag-warning[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--onu-accent-cto, #ff9800) 30%);
    color: color-mix(in srgb, var(--onu-accent-cto, #8c6d00) 60%, var(--rz-text-color, #8c6d00) 40%);
    border: 1px solid color-mix(in srgb, transparent, var(--onu-accent-cto, #ff9800) 55%);
}

/* Bloco VLAN (Outer/Inner) - aba Circuito */
.cliente-det-vlan[b-aj1e2kwb4g] {
    margin-top: 0.45rem;
    padding: 0.5rem 0.55rem 0.55rem;
    border-radius: 4px;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 12%);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cliente-det-vlan-head[b-aj1e2kwb4g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.vlan-head-title[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    color: var(--rz-text-secondary-color, #3a4555);
}

.vlan-head-title .rzi[b-aj1e2kwb4g] {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--rz-info, #1d4ed8) 60%, var(--rz-text-color, #1d4ed8) 40%);
}

.vlan-head-flag[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6rem;
    line-height: 1;
}

.vlan-head-flag.flag-ok[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-success, #4caf50) 26%);
    color: color-mix(in srgb, var(--rz-success-dark, #1b5e20) 60%, var(--rz-text-color, #1b5e20) 40%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-success, #4caf50) 50%);
}

.vlan-head-flag.flag-warning[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--onu-accent-cto, #ff9800) 30%);
    color: color-mix(in srgb, var(--onu-accent-cto, #8c6d00) 60%, var(--rz-text-color, #8c6d00) 40%);
    border: 1px solid color-mix(in srgb, transparent, var(--onu-accent-cto, #ff9800) 55%);
}

.vlan-head-flag .rzi[b-aj1e2kwb4g] {
    font-size: 0.78rem;
}

.cliente-det-vlan-table[b-aj1e2kwb4g] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.7rem;
}

.cliente-det-vlan-table thead th[b-aj1e2kwb4g] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color, #3a4555);
    font-weight: 800;
    text-align: left;
    padding: 0.22rem 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 18%);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 4%);
}

.cliente-det-vlan-table tbody td[b-aj1e2kwb4g] {
    padding: 0.28rem 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%);
    text-align: left;
    white-space: nowrap;
}

.cliente-det-vlan-table tbody tr:last-child td[b-aj1e2kwb4g] {
    border-bottom: none;
}

.cliente-det-vlan-table .vlan-campo[b-aj1e2kwb4g] {
    font-weight: 800;
    color: var(--rz-text-secondary-color, #3a4555);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
}

.cliente-det-vlan-table .vlan-cell[b-aj1e2kwb4g] {
    color: var(--rz-text-color, #1a2230);
    font-family: var(--rz-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.72rem;
    font-weight: 600;
}

.cliente-det-vlan-table .vlan-dif[b-aj1e2kwb4g] {
    color: color-mix(in srgb, var(--onu-accent-cto, #b85800) 60%, var(--rz-text-color, #b85800) 40%);
    font-weight: 800;
}

.cliente-det-vlan-table tr.row-dif[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--onu-accent-cto, #ff9800) 16%);
}

.cliente-det-vlan-table tr.row-dif:hover[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--onu-accent-cto, #ff9800) 24%);
}

/* Hint informativo na aba SPS */
.cliente-det-sps-hint[b-aj1e2kwb4g] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    border-radius: 4px;
    background: color-mix(in srgb, transparent, var(--rz-info, #2196f3) 16%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-info, #2196f3) 36%);
    font-size: 0.66rem;
    color: var(--rz-text-secondary-color, #2a3441);
    line-height: 1.4;
}

.cliente-det-sps-hint .rzi[b-aj1e2kwb4g] {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--rz-info, #1d4ed8) 60%, var(--rz-text-color, #1d4ed8) 40%);
    flex-shrink: 0;
}

.cliente-det-sps-hint strong[b-aj1e2kwb4g] {
    color: var(--rz-text-color, #0a1019);
    font-weight: 800;
}

.cliente-det-sps-hint em[b-aj1e2kwb4g] {
    font-style: normal;
    color: color-mix(in srgb, var(--rz-info, #1d4ed8) 60%, var(--rz-text-color, #1d4ed8) 40%);
    font-weight: 700;
}

/* Light-override inerte REMOVIDO em tg:03b: os seletores
   :host-context(.rz-theme-default) / [data-bs-theme="light"] nunca casam em
   runtime (o toggle troca apenas os valores --rz-* em :root). As regras base
   acima agora derivam de --rz-* e seguem o toggle in-app. Nao reintroduzir. */

/* --- Aba Fatura --- */
.cliente-det-pane-fatura[b-aj1e2kwb4g] {
    font-size: 0.78rem;
}

.fatura-hint[b-aj1e2kwb4g] {
    margin: 0.25rem 0;
    color: var(--rz-text-secondary-color, rgba(230, 238, 247, 0.72));
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.fatura-err[b-aj1e2kwb4g] {
    margin: 0.25rem 0;
    color: var(--rz-danger, #f44336);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.fatura-linha[b-aj1e2kwb4g] {
    margin: 0.35rem 0;
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%);
    border-radius: 6px;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%);
}

.fatura-linha-sum[b-aj1e2kwb4g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.45rem;
    cursor: pointer;
    list-style: none;
}

.fatura-linha-sum[b-aj1e2kwb4g]::-webkit-details-marker { display: none; }
.fatura-linha-sum[b-aj1e2kwb4g]::marker { content: ''; }

.fatura-linha-tit[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    min-width: 0;
}

.fatura-chip[b-aj1e2kwb4g] {
    font-size: 0.65rem;
    padding: 0.08rem 0.35rem;
    border-radius: 4px;
    /* texto segue o tema (--rz-text-color); sem isto o label herda uma cor sem
       contraste contra o fundo translucido do chip (regressao tg:03b). */
    color: var(--rz-text-color, #1a2230);
    background: color-mix(in srgb, transparent, var(--rz-primary, #0078d7) 12%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-primary, #0078d7) 35%);
}

.fatura-chip.chip-muted[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%);
    border-color: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 12%);
}

.fatura-linha-body[b-aj1e2kwb4g] {
    padding: 0.35rem 0.45rem 0.5rem;
    border-top: 1px dashed color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
}

.fatura-acoes[b-aj1e2kwb4g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.fatura-ico-btn[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 12%);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 4%);
    /* glifo segue o tema; `color: inherit` colapsava o icone contra o fundo
       do botao (icone invisivel = quadrado vazio). Regressao tg:03b. */
    color: var(--rz-text-color, #1a2230);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.fatura-ico-btn:hover:not(:disabled)[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-primary, #0078d7) 12%);
}

.fatura-ico-btn:disabled[b-aj1e2kwb4g] {
    opacity: 0.35;
    cursor: not-allowed;
}

.fatura-kv[b-aj1e2kwb4g] {
    margin-top: 0.25rem;
}

.kv-wrap[b-aj1e2kwb4g] {
    white-space: pre-wrap;
    word-break: break-word;
}

.fatura-ctx[b-aj1e2kwb4g] {
    margin-top: 0.6rem;
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%);
    border-radius: 6px;
}

.fatura-ctx-sum[b-aj1e2kwb4g] {
    padding: 0.35rem 0.45rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.fatura-ctx-sum[b-aj1e2kwb4g]::-webkit-details-marker { display: none; }
.fatura-ctx-sum[b-aj1e2kwb4g]::marker { content: ''; }

.fatura-ctx-body[b-aj1e2kwb4g] {
    padding: 0.35rem 0.45rem 0.55rem;
    border-top: 1px dashed color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
}

.fatura-ctx-warn[b-aj1e2kwb4g] {
    margin: 0.2rem 0;
    color: color-mix(in srgb, var(--onu-accent-cto, #8c6d00) 60%, var(--rz-text-color, #8c6d00) 40%);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.fatura-ctx-table[b-aj1e2kwb4g] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
}

.fatura-ctx-table td[b-aj1e2kwb4g] {
    border-bottom: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%);
    padding: 0.15rem 0.2rem;
    vertical-align: top;
}

.fatura-ctx-k[b-aj1e2kwb4g] {
    width: 38%;
    color: var(--rz-text-secondary-color, rgba(230, 238, 247, 0.65));
    font-weight: 600;
}

.fatura-ctx-v[b-aj1e2kwb4g] {
    word-break: break-word;
}

/* ===== Resumo de faturas (Modo Financeiro) no summary do card ===== */
.fatura-resumo[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.3rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease;
}

.fatura-resumo:hover[b-aj1e2kwb4g] {
    background-color: color-mix(in srgb, transparent, var(--rz-primary, #0078d7) 10%);
    transform: translateY(-1px);
}

.fatura-resumo > .rz-icon[b-aj1e2kwb4g] {
    font-size: 0.95rem;
    color: var(--rz-primary, #0078d7);
}

.fatura-resumo.loading[b-aj1e2kwb4g] {
    opacity: 0.7;
}

.fatura-resumo-chip[b-aj1e2kwb4g] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
    border: 1px solid transparent;
}

.fatura-resumo-chip.chip-vencida[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-danger, #d6455d) 16%);
    border-color: color-mix(in srgb, transparent, var(--rz-danger, #d6455d) 40%);
    color: color-mix(in srgb, var(--rz-danger, #b71c1c) 60%, var(--rz-text-color, #b71c1c) 40%);
}

.fatura-resumo-chip.chip-aberta[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--onu-accent-cto, #d9a13a) 16%);
    border-color: color-mix(in srgb, transparent, var(--onu-accent-cto, #d9a13a) 40%);
    color: color-mix(in srgb, var(--onu-accent-cto, #8c6d00) 60%, var(--rz-text-color, #8c6d00) 40%);
}

.fatura-resumo-chip.chip-paga[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-success, #4caf68) 16%);
    border-color: color-mix(in srgb, transparent, var(--rz-success, #4caf68) 38%);
    color: color-mix(in srgb, var(--rz-success-dark, #1b5e20) 60%, var(--rz-text-color, #1b5e20) 40%);
}

.fatura-resumo-chip.chip-empty[b-aj1e2kwb4g],
.fatura-resumo-chip.chip-loading[b-aj1e2kwb4g] {
    background: color-mix(in srgb, transparent, var(--rz-text-color, #2a3441) 12%);
    color: var(--rz-text-secondary-color, rgba(230, 238, 247, 0.65));
}
/* /Components/OnuManager/Cards/OnuCardHierarchy.razor.rz.scp.css */
/* =============================================================================
   OnuCardHierarchy — orquestrador da hierarquia ONU -> VPort -> SP -> MAC
   - Container leve (sem glass proprio: cada vport tem o seu)
   - Bloco residual "MACs sem VPort" para auditoria visual
   - Estado vazio com hint elegante
   ============================================================================= */

.onu-hierarchy[b-7ykv6dmdm9] {
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-sm);
    margin-top: var(--onu-gap-sm);
}

/* ---------- Estado vazio ---------- */

.onu-hierarchy-empty[b-7ykv6dmdm9] {
    display: inline-flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    margin-top: var(--onu-gap-sm);
    padding: 4px 8px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg);
    border: 1px dashed var(--onu-glass-border);
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.55));
    font-size: 0.62rem;
    font-style: italic;
}

.onu-hierarchy-empty .rzi[b-7ykv6dmdm9] {
    font-size: 0.75rem;
}

.onu-hierarchy-empty-hint[b-7ykv6dmdm9] {
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.4));
    font-size: 0.58rem;
    margin-left: 4px;
}

/* ---------- Bloco residual: MACs sem VPort ---------- */

.onu-hierarchy-orphans[b-7ykv6dmdm9] {
    margin-top: var(--onu-gap-xs);
    padding: var(--onu-gap-xs) var(--onu-gap-md);
    border-radius: var(--onu-radius-section);
    background: var(--onu-glass-bg);
    border: 1px dashed var(--onu-glass-border);
    -webkit-backdrop-filter: blur(calc(var(--onu-glass-blur) * 0.5));
    backdrop-filter: blur(calc(var(--onu-glass-blur) * 0.5));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .onu-hierarchy-orphans[b-7ykv6dmdm9] {
        background: var(--onu-glass-bg-solid);
    }
}

.onu-hierarchy-orphans-header[b-7ykv6dmdm9] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.55));
    margin-bottom: 2px;
}

.onu-hierarchy-orphans-header .rzi[b-7ykv6dmdm9] {
    font-size: 0.7rem;
}

.onu-hierarchy-orphans-count[b-7ykv6dmdm9] {
    margin-left: auto;
    font-size: 0.58rem;
    padding: 0 5px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.7));
}

.onu-hierarchy-orphans-list[b-7ykv6dmdm9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onu-orphan-mac[b-7ykv6dmdm9] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    padding: 2px 4px;
    border-radius: var(--onu-radius-chip);
    font-size: 0.62rem;
    line-height: 1.4;
    transition: background var(--onu-anim-fast) var(--onu-ease);
}

.onu-orphan-mac:hover[b-7ykv6dmdm9] {
    background: var(--onu-glass-bg-strong);
}

.onu-orphan-mac.mac-disconnected[b-7ykv6dmdm9] {
    opacity: 0.6;
}

.onu-orphan-mac-dot[b-7ykv6dmdm9] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--onu-color-sp-up);
}

.onu-orphan-mac.mac-disconnected .onu-orphan-mac-dot[b-7ykv6dmdm9] {
    background: var(--onu-color-sp-down);
}

.onu-orphan-mac-address[b-7ykv6dmdm9] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.85));
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.onu-orphan-mac-chip[b-7ykv6dmdm9] {
    font-size: 0.55rem;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.65));
    background: var(--onu-glass-bg-strong);
    white-space: nowrap;
}

.onu-orphan-mac-chip.vlan-tag[b-7ykv6dmdm9] {
    background: rgba(var(--rz-info-rgb, 59, 130, 246), 0.12);
    color: var(--rz-info, #2196f3);
    font-variant-numeric: tabular-nums;
}

.onu-orphan-mac-chip.ip-pppoe[b-7ykv6dmdm9] {
    background: rgba(var(--rz-info-rgb, 59, 130, 246), 0.18);
    color: var(--onu-color-ip-pppoe);
    font-weight: 600;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}
/* /Components/OnuManager/Cards/OnuCardSignal.razor.rz.scp.css */
.onu-signal[b-q4j09qt40a] {
    --signal-accent: var(--rz-success);
    --signal-accent-rgb: var(--rz-success-rgb, 76, 175, 80);
    display: grid;
    gap: var(--onu-gap-md, 8px);
    width: 100%;
    min-width: 0;
}

.onu-signal.signal-tone-warning[b-q4j09qt40a] {
    --signal-accent: var(--rz-warning);
    --signal-accent-rgb: var(--rz-warning-rgb, 255, 152, 0);
}

.onu-signal.signal-tone-critical[b-q4j09qt40a] {
    --signal-accent: var(--rz-danger);
    --signal-accent-rgb: var(--rz-danger-rgb, 244, 67, 54);
}

/*
 * Estado "indisponivel" (ONU nao-online): tom neutro/muted, on-brand.
 * Nunca verde de saude nem vermelho de alarme — a leitura optica esta
 * congelada/invalida, entao apresentamos um cinza calmo (sem preto puro).
 */
.onu-signal.signal-tone-muted[b-q4j09qt40a] {
    --signal-accent: var(--rz-text-secondary-color, #6b7682);
    --signal-accent-rgb: var(--rz-text-secondary-rgb, 107, 118, 130);
}

.onu-signal.signal-tone-muted .signal-hero[b-q4j09qt40a] {
    background: var(--onu-panel-bg-soft, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 5%));
    border-style: dashed;
    border-color: rgba(var(--signal-accent-rgb), 0.30);
}

.onu-signal.signal-tone-muted .signal-value[b-q4j09qt40a] {
    color: var(--rz-text-secondary-color, #6b7682);
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    opacity: 0.85;
}

.onu-signal.signal-tone-muted .signal-range[b-q4j09qt40a] {
    color: var(--rz-text-secondary-color, #6b7682);
    background: rgba(var(--signal-accent-rgb), 0.10);
    border-color: rgba(var(--signal-accent-rgb), 0.24);
    font-weight: 600;
}

.signal-hero[b-q4j09qt40a] {
    display: grid;
    gap: var(--onu-gap-sm, 4px);
    padding: 0.7rem 0.75rem;
    border-radius: var(--onu-radius-panel, 10px);
    background:
        linear-gradient(145deg, rgba(var(--signal-accent-rgb), 0.14), transparent 58%),
        var(--onu-panel-bg, color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 6%));
    border: 1px solid rgba(var(--signal-accent-rgb), 0.38);
    box-shadow: inset 0 1px 0 color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
}

.signal-hero-head[b-q4j09qt40a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--onu-gap-sm, 4px);
    color: var(--rz-text-secondary-color);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.signal-title[b-q4j09qt40a] {
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-weight: 700;
}

.signal-hero-head .rzi[b-q4j09qt40a] {
    color: var(--signal-accent);
    font-size: 1.15rem;
}

.signal-reading[b-q4j09qt40a] {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.15rem 0 0.1rem;
}

.signal-value[b-q4j09qt40a] {
    color: var(--signal-accent);
    /* Valor optico em destaque (RX) -> titulo de marca Exo. */
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-size: clamp(1.45rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.signal-range[b-q4j09qt40a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.35rem;
    padding: 0.1rem 0.55rem;
    border-radius: var(--onu-radius-pill, 8px);
    color: var(--rz-text-color);
    background: rgba(var(--signal-accent-rgb), 0.15);
    border: 1px solid rgba(var(--signal-accent-rgb), 0.30);
    font-size: 0.72rem;
    font-weight: 700;
}

.signal-trend[b-q4j09qt40a] {
    min-width: 0;
    color: var(--signal-accent);
    opacity: 0.86;
}

.ani-metric-grid[b-q4j09qt40a] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--onu-gap-sm, 4px);
}

.ani-metric-chip[b-q4j09qt40a],
.ani-extra-chip[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-info);
    --ani-metric-accent-rgb: var(--rz-info-rgb, 33, 150, 243);
    position: relative;
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 3rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--onu-radius-section, 6px);
    background: var(--onu-panel-bg-soft, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 7%));
    color: var(--rz-text-color);
    border: 1px solid var(--onu-panel-border, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 12%));
    transition:
        transform var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
        border-color var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
        background var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
        box-shadow var(--onu-anim-fast, 120ms) var(--onu-ease, ease);
}

.ani-metric-chip:hover[b-q4j09qt40a],
.ani-metric-chip:focus-visible[b-q4j09qt40a],
.ani-extra-chip:hover[b-q4j09qt40a],
.ani-extra-chip:focus-visible[b-q4j09qt40a] {
    transform: translateY(-1px);
    border-color: rgba(var(--ani-metric-accent-rgb), 0.44);
    box-shadow: 0 0 0 2px rgba(var(--ani-metric-accent-rgb), 0.10);
}

.ani-metric-chip[b-q4j09qt40a]::after,
.ani-extra-chip[b-q4j09qt40a]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.35rem);
    z-index: 20;
    width: max-content;
    max-width: 240px;
    padding: 0.42rem 0.55rem;
    border-radius: 8px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    border: 1px solid rgba(var(--ani-metric-accent-rgb), 0.34);
    box-shadow: var(--rz-shadow-4);
    font-size: 0.66rem;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.25rem) scale(0.98);
    transition:
        opacity var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
        transform var(--onu-anim-fast, 120ms) var(--onu-ease, ease);
}

.ani-metric-chip:hover[b-q4j09qt40a]::after,
.ani-metric-chip:focus-visible[b-q4j09qt40a]::after,
.ani-extra-chip:hover[b-q4j09qt40a]::after,
.ani-extra-chip:focus-visible[b-q4j09qt40a]::after {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ani-metric-label[b-q4j09qt40a] {
    color: var(--rz-text-secondary-color);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ani-metric-value[b-q4j09qt40a] {
    color: var(--rz-text-color);
    /* Valores numericos de metrica (bias/temp/volt...) -> Exo (destaque). */
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.metric-bias[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-info);
    --ani-metric-accent-rgb: var(--rz-info-rgb, 33, 150, 243);
}

.metric-temp[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-warning);
    --ani-metric-accent-rgb: var(--rz-warning-rgb, 255, 152, 0);
}

.metric-volt[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-success);
    --ani-metric-accent-rgb: var(--rz-success-rgb, 76, 175, 80);
}

.metric-rsp[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-primary);
    --ani-metric-accent-rgb: var(--rz-primary-rgb, 0, 235, 176);
}

.metric-threshold[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-secondary);
    --ani-metric-accent-rgb: var(--rz-secondary-rgb, 96, 125, 139);
}

.ani-extra-row[b-q4j09qt40a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--onu-gap-sm, 4px);
}

.ani-extra-chip[b-q4j09qt40a] {
    flex: 1 1 7.5rem;
    min-height: 2.35rem;
    padding-block: 0.35rem;
}

.ani-extra-chip .ani-metric-value[b-q4j09qt40a] {
    font-size: 0.72rem;
}

.ani-extra-row .batimento-armed[b-q4j09qt40a] {
    --ani-metric-accent: var(--rz-warning);
    --ani-metric-accent-rgb: var(--rz-warning-rgb, 255, 152, 0);
    background:
        linear-gradient(135deg, rgba(var(--ani-metric-accent-rgb), 0.18), transparent 66%),
        var(--onu-panel-bg-soft, color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 7%));
    border-color: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.32);
}

@media (prefers-reduced-motion: reduce) {
    .ani-metric-chip[b-q4j09qt40a],
    .ani-metric-chip[b-q4j09qt40a]::after,
    .ani-extra-chip[b-q4j09qt40a],
    .ani-extra-chip[b-q4j09qt40a]::after {
        transition: none;
    }
}
/* /Components/OnuManager/Cards/OnuCardVportSection.razor.rz.scp.css */
/* =============================================================================
   OnuCardVportSection — uma fatia da hierarquia ONU
   - Glass nivel 2 (mais sutil que o WAN/Hierarchy)
   - Borda esquerda colorida pelo tipo do vport
   - Smart collapse via <details>: header sempre visivel; body so quando aberto
   - Service ports e MACs aninhados dentro do mesmo cartao para reforcar parentesco
   ============================================================================= */

.onu-vport[b-296rwh2klf] {
    margin-top: var(--onu-gap-sm);
    padding: 0;
    border-radius: var(--onu-radius-section);
    background: var(--onu-glass-bg);
    border: 1px solid var(--onu-glass-border);
    border-left: 3px solid var(--onu-color-vport-other);
    -webkit-backdrop-filter: blur(calc(var(--onu-glass-blur) * 0.6)) saturate(var(--onu-glass-saturation));
    backdrop-filter: blur(calc(var(--onu-glass-blur) * 0.6)) saturate(var(--onu-glass-saturation));
    overflow: hidden;
    transition: background var(--onu-anim-medium) var(--onu-ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .onu-vport[b-296rwh2klf] {
        background: var(--onu-glass-bg-solid);
    }
}

.onu-vport.vport-pppoe[b-296rwh2klf] { border-left-color: var(--onu-color-vport-pppoe); }
.onu-vport.vport-ipoe[b-296rwh2klf]  { border-left-color: var(--onu-color-vport-ipoe); }
.onu-vport.vport-wifi[b-296rwh2klf]  { border-left-color: var(--onu-color-vport-wifi); }
.onu-vport.vport-mixed[b-296rwh2klf] {
    border-left-color: var(--onu-color-vport-pppoe);
    border-image: linear-gradient(to bottom,
        var(--onu-color-vport-pppoe),
        var(--onu-color-vport-ipoe)) 1;
}

.onu-vport.is-collapsed[b-296rwh2klf] {
    opacity: 0.78;
}

/* ---------- Summary (sempre visivel) ---------- */

.onu-vport-summary[b-296rwh2klf] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    padding: 4px var(--onu-gap-md);
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    font-size: 0.66rem;
    line-height: 1.4;
    min-width: 0;
}

/* Esconde o disclosure default em todos os browsers */
.onu-vport-summary[b-296rwh2klf]::-webkit-details-marker { display: none; }
.onu-vport-summary[b-296rwh2klf]::marker { content: ''; }

.onu-vport-summary:focus-visible[b-296rwh2klf] {
    outline: 2px solid var(--rz-primary, #1976d2);
    outline-offset: -2px;
}

.onu-vport-marker[b-296rwh2klf] {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--onu-anim-fast) var(--onu-ease);
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.5));
}

.onu-vport.is-open .onu-vport-marker[b-296rwh2klf] {
    transform: rotate(45deg);
}

.onu-vport-title[b-296rwh2klf] {
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.92));
    flex-shrink: 0;
}

.onu-vport-kind[b-296rwh2klf] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.65));
    padding: 1px 6px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    flex-shrink: 0;
}

.vport-pppoe .onu-vport-kind[b-296rwh2klf] { color: var(--onu-color-vport-pppoe); }
.vport-ipoe  .onu-vport-kind[b-296rwh2klf] { color: var(--onu-color-vport-ipoe); }
.vport-wifi  .onu-vport-kind[b-296rwh2klf] { color: var(--onu-color-vport-wifi); }
.vport-mixed .onu-vport-kind[b-296rwh2klf] {
    background: linear-gradient(90deg,
        rgba(var(--rz-primary-rgb, 25, 118, 210), 0.18),
        rgba(var(--rz-info-rgb, 2, 136, 209), 0.18));
    color: var(--rz-text-color, rgba(255, 255, 255, 0.92));
}

.onu-vport-spacer[b-296rwh2klf] {
    flex: 1 1 auto;
    min-width: 0;
}

.onu-vport-summary-chip[b-296rwh2klf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.7));
    flex-shrink: 0;
}

.onu-vport-summary-chip .rzi[b-296rwh2klf] {
    font-size: 0.65rem;
}

/* Resumo WAN (login PPPoE / IP) exibido no header colapsado do vport.
   Aparece apos os chips de SP/MAC para que o usuario veja info relevante
   sem precisar expandir o vport. */
.onu-vport-summary-wan[b-296rwh2klf] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.56rem;
    font-weight: 500;
    padding: 0 4px;
    border-radius: 3px;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.58));
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%);
    flex: 1 1 clamp(72px, 28cqi, 220px);
    min-width: 0;
    max-width: clamp(72px, 38cqi, 220px);
    overflow: hidden;
    white-space: nowrap;
    cursor: help;
}

.onu-vport-summary-wan .vport-wan-kind[b-296rwh2klf] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.5rem;
    padding: 0 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.onu-vport-summary-wan.wan-kind-pppoe .vport-wan-kind[b-296rwh2klf] {
    background: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.22);
    color: var(--onu-color-vport-pppoe);
}

.onu-vport-summary-wan.wan-kind-ipoe .vport-wan-kind[b-296rwh2klf] {
    background: rgba(var(--rz-info-rgb, 2, 136, 209), 0.22);
    color: var(--onu-color-vport-ipoe);
}

.onu-vport-summary-wan .vport-wan-login[b-296rwh2klf] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.55rem;
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.72));
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.onu-vport-summary-wan .vport-wan-ip[b-296rwh2klf] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.55rem;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.58));
    font-weight: 500;
    flex-shrink: 0;
}

/* ---------- Body (visivel quando details[open]) ---------- */

.onu-vport-body[b-296rwh2klf] {
    padding: var(--onu-gap-xs) var(--onu-gap-md) var(--onu-gap-sm);
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-xs);
    animation: onuVportSlideFade-b-296rwh2klf var(--onu-anim-medium) var(--onu-ease);
}

@keyframes onuVportSlideFade-b-296rwh2klf {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Service Port ---------- */

.onu-sp[b-296rwh2klf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 5px;
    border-radius: var(--onu-radius-chip);
    /* tg:03: tint neutro derivado de --rz-text-color (que TROCA com o toggle):
       tema dark -> tint claro (~branco 4%, igual ao baseline); tema light ->
       tint escuro. Substitui o par base-claro + override dark abaixo (removido).
       Ver CONTRATO DE TEMA em wwwroot/css/onu-card-tokens.css. */
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 4%);
    cursor: help;
    transition: background var(--onu-anim-fast) var(--onu-ease);
}

/* tg:03: bloco `.dark-theme / [data-bs-theme="dark"] / :root:not(.light...)`
   REMOVIDO. Aqueles seletores nao casam o toggle in-app (apenas o :root:not
   default acertava por acidente); a derivacao --rz-text-color acima ja da
   paridade real seguindo o toggle. Nao reintroduzir. */

.onu-sp:hover[b-296rwh2klf] {
    background: var(--onu-glass-bg-strong);
}

.onu-sp.sp-down[b-296rwh2klf] {
    opacity: 0.55;
}

.onu-sp-header[b-296rwh2klf] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    flex-wrap: wrap;
    font-size: 0.64rem;
    line-height: 1.4;
}

.onu-sp-dot[b-296rwh2klf] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--onu-color-sp-up);
    box-shadow: 0 0 4px var(--onu-color-sp-up);
}

.onu-sp.sp-down .onu-sp-dot[b-296rwh2klf] {
    background: var(--onu-color-sp-down);
    box-shadow: none;
}

.onu-sp-id[b-296rwh2klf] {
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-weight: 700;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.9));
    letter-spacing: 0.02em;
}

.onu-sp-kind[b-296rwh2klf] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.7));
}

.onu-sp-kind-pppoe[b-296rwh2klf] {
    background: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.22);
    color: var(--onu-color-vport-pppoe);
}

.onu-sp-kind-ipoe[b-296rwh2klf] {
    background: rgba(var(--rz-info-rgb, 2, 136, 209), 0.15);
    /* tg:12: era #e3f7ff (quase branco) — invisivel no tema claro. Texto
       theme-aware derivado do hue + --rz-text-color (escurece no light). */
    color: color-mix(in srgb, var(--rz-info, #0288d1) 55%, var(--rz-text-color, #1a2230) 45%);
    border: 1px solid rgba(var(--rz-info-rgb, 2, 136, 209), 0.30);
}

.onu-sp-kind-wifi[b-296rwh2klf] {
    background: rgba(var(--rz-series-7-rgb, 186, 104, 200), 0.22);
    color: var(--onu-color-vport-wifi);
}

.onu-sp.sp-pppoe[b-296rwh2klf] { box-shadow: inset 2px 0 0 0 rgba(var(--rz-primary-rgb, 25, 118, 210), 0.55); }
.onu-sp.sp-ipoe[b-296rwh2klf]  { box-shadow: inset 2px 0 0 0 rgba(var(--rz-info-rgb, 2, 136, 209), 0.55); }
.onu-sp.sp-wifi[b-296rwh2klf]  { box-shadow: inset 2px 0 0 0 rgba(var(--rz-series-7-rgb, 186, 104, 200), 0.55); }

.onu-sp-vlan-chip[b-296rwh2klf] {
    font-variant-numeric: tabular-nums;
    padding: 0 5px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.62rem;
    border: 1px solid transparent;
    /* tg:12: text-shadow preto fixo era dark-only; removido (contraste vem do
       par cor/fundo theme-aware abaixo). */
}

/* tg:12: textos near-white fixos (#ebf8ff/#ebffef/#fff3dc/#f5ddff) ficavam
   invisiveis no tema claro. Cada chip agora deriva o texto do seu hue +
   --rz-text-color, escurecendo no light e clareando no dark (paridade real). */
.onu-sp-vlan-chip.vlan-user[b-296rwh2klf]  { background: rgba(var(--rz-info-rgb, 59, 130, 246), 0.18);    color: color-mix(in srgb, var(--rz-info, #0288d1) 55%, var(--rz-text-color, #1a2230) 45%); border-color: rgba(var(--rz-info-rgb, 59, 130, 246), 0.34); }
.onu-sp-vlan-chip.vlan-inner[b-296rwh2klf] { background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.17);  color: color-mix(in srgb, var(--rz-success, #4caf50) 55%, var(--rz-text-color, #1a2230) 45%); border-color: rgba(var(--rz-success-rgb, 76, 175, 80), 0.32); }
.onu-sp-vlan-chip.vlan-outer[b-296rwh2klf] { background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.26);  color: color-mix(in srgb, var(--onu-accent-cto, #b45309) 58%, var(--rz-text-color, #1a2230) 42%); border-color: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.45); }
.onu-sp-vlan-chip.vlan-range[b-296rwh2klf] { background: rgba(var(--rz-primary-rgb, 156, 39, 176), 0.24); color: color-mix(in srgb, var(--rz-primary, #9c27b0) 55%, var(--rz-text-color, #1a2230) 45%); border-color: rgba(var(--rz-primary-rgb, 156, 39, 176), 0.42); }

.onu-sp-mode[b-296rwh2klf] {
    margin-left: auto;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.45));
    font-style: italic;
    font-size: 0.6rem;
}

/* ---------- MACs aninhados no SP ---------- */

.onu-sp-mac-list[b-296rwh2klf] {
    list-style: none;
    margin: 2px 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px dashed var(--onu-glass-border);
    padding-left: var(--onu-gap-sm);
}

.onu-mac[b-296rwh2klf] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    flex-wrap: wrap;
    padding: 2px 4px;
    border-radius: var(--onu-radius-chip);
    font-size: 0.62rem;
    line-height: 1.4;
    min-width: 0;
    transition: background var(--onu-anim-fast) var(--onu-ease);
}

.onu-mac:hover[b-296rwh2klf] {
    background: var(--onu-glass-bg-strong);
}

.onu-mac.mac-disconnected[b-296rwh2klf] {
    opacity: 0.6;
}

.onu-mac-dot[b-296rwh2klf] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--onu-color-sp-up);
    box-shadow: 0 0 4px var(--onu-color-sp-up);
}

.onu-mac.mac-disconnected .onu-mac-dot[b-296rwh2klf] {
    background: var(--onu-color-sp-down);
    box-shadow: none;
}

.onu-mac-address[b-296rwh2klf] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.88));
    letter-spacing: 0.01em;
    flex: 1 1 11ch;
    min-width: 8ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onu-mac-chip[b-296rwh2klf] {
    font-size: 0.55rem;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.80));
    background: var(--onu-glass-bg-strong);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    font-weight: 700;
    /* tg:12: text-shadow preto fixo removido (dark-only). */
}

/* tg:12: textos -lighter (quase brancos) lavavam no tema claro. Texto agora
   deriva do hue + --rz-text-color (escurece no light, clareia no dark). */
.onu-mac-chip.vlan-tag[b-296rwh2klf] {
    background: rgba(var(--rz-info-rgb, 59, 130, 246), 0.26);
    color: color-mix(in srgb, var(--rz-info, #0288d1) 55%, var(--rz-text-color, #1a2230) 45%);
    border-color: rgba(var(--rz-info-rgb, 59, 130, 246), 0.45);
    font-variant-numeric: tabular-nums;
}

.onu-mac-chip.ip-pppoe[b-296rwh2klf] {
    background: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.24);
    color: color-mix(in srgb, var(--rz-primary, #1976d2) 55%, var(--rz-text-color, #1a2230) 45%);
    border-color: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.42);
    font-weight: 500;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.onu-mac-chip.ip-ipoe[b-296rwh2klf] {
    background: rgba(var(--rz-info-rgb, 2, 136, 209), 0.24);
    color: color-mix(in srgb, var(--rz-info, #0288d1) 55%, var(--rz-text-color, #1a2230) 45%);
    border-color: rgba(var(--rz-info-rgb, 2, 136, 209), 0.42);
    font-weight: 500;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.onu-mac-chip.ip-pppoe .rzi[b-296rwh2klf],
.onu-mac-chip.ip-ipoe .rzi[b-296rwh2klf] {
    font-size: 0.6rem;
}

.onu-mac-chip.mac-time[b-296rwh2klf] {
    margin-left: auto;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.5));
    font-variant-numeric: tabular-nums;
}

/* tg:12: bloco [data-bs-theme="light"]/.light-theme REMOVIDO — esses seletores
   NUNCA casam em runtime (o toggle in-app so troca os valores --rz-* em :root,
   ver CONTRATO DE TEMA em onu-card-tokens.css). As regras base de
   .onu-sp-vlan-chip / .onu-mac-chip / .onu-sp-kind-ipoe agora derivam de --rz-*
   e seguem o toggle, tornando o override redundante. Nao reintroduzir. */

@media (prefers-reduced-motion: reduce) {
    .onu-vport-body[b-296rwh2klf] {
        animation: none;
    }
}
/* /Components/OnuManager/Cards/OnuCardWanSection.razor.rz.scp.css */
/* =============================================================================
   OnuCardWanSection — bloco WAN/ACS no rodape do card
   - Glass nivel 1 (Apple-like): blur 12px + saturate 140%
   - Renderizado APENAS quando ha hits (lazy via @if no markup)
   - Cada device em uma linha com dot de status, CPE, IP, last_inform, tag
   ============================================================================= */

.onu-wan-section[b-x5rvdjkhm2] {
    margin-top: var(--onu-gap-md);
    padding: var(--onu-gap-sm) var(--onu-gap-md);
    border-radius: var(--onu-radius-section);
    background: var(--onu-glass-bg);
    border: 1px solid var(--onu-glass-border);
    -webkit-backdrop-filter: blur(var(--onu-glass-blur)) saturate(var(--onu-glass-saturation));
    backdrop-filter: blur(var(--onu-glass-blur)) saturate(var(--onu-glass-saturation));
    box-shadow: var(--onu-glass-shadow);
    transition: background var(--onu-anim-medium) var(--onu-ease),
                border-color var(--onu-anim-medium) var(--onu-ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .onu-wan-section[b-x5rvdjkhm2] {
        background: var(--onu-glass-bg-solid);
    }
}

.onu-wan-section-header[b-x5rvdjkhm2] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    margin-bottom: var(--onu-gap-xs);
}

.onu-wan-section-title[b-x5rvdjkhm2] {
    font-family: var(--brand-font-title, 'Exo', system-ui, sans-serif);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.55));
}

.onu-wan-section-count[b-x5rvdjkhm2] {
    font-size: 0.6rem;
    padding: 0 var(--onu-gap-sm);
    border-radius: var(--onu-radius-chip);
    background: var(--onu-glass-bg-strong);
    color: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.7));
    line-height: 1.4;
}

.onu-wan-list[b-x5rvdjkhm2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-xs);
}

.onu-wan-item[b-x5rvdjkhm2] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
    padding: var(--onu-gap-xs) var(--onu-gap-sm);
    border-radius: var(--onu-radius-chip);
    font-size: 0.66rem;
    line-height: 1.4;
    cursor: help;
    border-left: 2px solid transparent;
    min-width: 0;
    transition: background var(--onu-anim-fast) var(--onu-ease);
}

.onu-wan-item:hover[b-x5rvdjkhm2] {
    background: var(--onu-glass-bg-strong);
}

/* --- Hierarquia visual: online primary > online secondary > offline --- */

.onu-wan-item.wan-online[b-x5rvdjkhm2] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.06);
    border-left-color: var(--onu-color-wan-online);
}

.onu-wan-item.wan-online:hover[b-x5rvdjkhm2] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.12);
}

.onu-wan-item.wan-secondary[b-x5rvdjkhm2] {
    opacity: 0.7;
}

.onu-wan-item.wan-secondary .onu-wan-cpe[b-x5rvdjkhm2],
.onu-wan-item.wan-secondary .onu-wan-ip[b-x5rvdjkhm2] {
    font-weight: 400;
}

.onu-wan-item.wan-offline[b-x5rvdjkhm2] {
    opacity: 0.45;
}

.onu-wan-item.wan-offline .onu-wan-cpe[b-x5rvdjkhm2],
.onu-wan-item.wan-offline .onu-wan-ip[b-x5rvdjkhm2] {
    font-weight: 400;
}

.onu-wan-dot[b-x5rvdjkhm2] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.onu-wan-dot.dot-online[b-x5rvdjkhm2] {
    background: var(--onu-color-wan-online);
    box-shadow: 0 0 4px var(--onu-color-wan-online), 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.onu-wan-dot.dot-secondary[b-x5rvdjkhm2] {
    background: var(--onu-color-wan-secondary);
}

.onu-wan-dot.dot-offline[b-x5rvdjkhm2] {
    background: var(--onu-color-wan-offline);
    opacity: 0.7;
}

.onu-wan-kind[b-x5rvdjkhm2] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: var(--onu-radius-chip);
    flex-shrink: 0;
    border: 1px solid transparent;
    /* tg(typo/color): text-shadow preto fixo removido (regressao light-mode);
       contraste vem do par cor/fundo theme-aware abaixo. */
}

/* tg(typo/color): textos -lighter (quase brancos) lavavam no tema claro e o
   override [data-bs-theme=light]/.light-theme (com hex fixo #0f4f8a/#0b5e86)
   era inerte em runtime — o toggle in-app so troca os valores --rz-* em :root
   (ver CONTRATO DE TEMA em onu-card-tokens.css). Agora o texto deriva do hue +
   --rz-text-color, escurecendo no light e clareando no dark (paridade real). */
.onu-wan-kind-pppoe[b-x5rvdjkhm2] {
    background: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.30);
    color: color-mix(in srgb, var(--rz-primary, #1976d2) 55%, var(--rz-text-color, #1a2230) 45%);
    border-color: rgba(var(--rz-primary-rgb, 25, 118, 210), 0.48);
}

.onu-wan-kind-ipoe[b-x5rvdjkhm2] {
    background: rgba(var(--rz-info-rgb, 2, 136, 209), 0.30);
    color: color-mix(in srgb, var(--rz-info, #0288d1) 55%, var(--rz-text-color, #1a2230) 45%);
    border-color: rgba(var(--rz-info-rgb, 2, 136, 209), 0.48);
}

.onu-wan-cpe[b-x5rvdjkhm2] {
    flex: 1 1 10ch;
    min-width: 6ch;
    font-weight: 500;
    color: var(--rz-text-color, rgba(255, 255, 255, 0.9));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onu-wan-ip[b-x5rvdjkhm2] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--onu-color-ip-wan);
    letter-spacing: 0.01em;
    flex: 0 0 auto;
    white-space: nowrap;
}

.onu-wan-item.wan-online .onu-wan-ip[b-x5rvdjkhm2] {
    font-size: 0.7rem;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(var(--rz-success-rgb, 76, 175, 80), 0.35);
}

.onu-wan-spacer[b-x5rvdjkhm2] {
    flex: 1 1 0;
    min-width: 0;
}

.onu-wan-time[b-x5rvdjkhm2] {
    font-size: 0.6rem;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.5));
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.onu-wan-tag[b-x5rvdjkhm2] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: var(--onu-radius-chip);
    flex-shrink: 0;
}

.onu-wan-tag-primary[b-x5rvdjkhm2] {
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.28);
    color: var(--onu-color-wan-online);
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(var(--rz-success-rgb, 76, 175, 80), 0.30);
}

/* Secondary discreto: sem fundo, sem peso extra, apenas marcador minimal */
.onu-wan-tag-sec[b-x5rvdjkhm2] {
    background: transparent;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.5));
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 1px 4px;
    border: 1px solid var(--onu-glass-border);
}

.onu-wan-tag-off[b-x5rvdjkhm2] {
    background: transparent;
    color: var(--rz-text-tertiary-color, rgba(255, 255, 255, 0.45));
    font-size: 0.5rem;
    font-weight: 500;
    padding: 1px 4px;
    border: 1px dashed var(--onu-glass-border);
}

.onu-wan-item:focus-visible[b-x5rvdjkhm2] {
    outline: 2px solid var(--rz-primary, #1976d2);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .onu-wan-cpe[b-x5rvdjkhm2] {
        max-width: 10ch;
    }

    .onu-wan-time[b-x5rvdjkhm2] {
        display: none;
    }
}
/* /Components/OnuManager/Cards/OnuReassignBanner.razor.rz.scp.css */
.onu-reassign-banner[b-vaa3vdwcqy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--onu-card-radius, 8px);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rz-success, #22c55e) 18%, transparent),
        color-mix(in srgb, var(--rz-success, #22c55e) 6%, transparent));
    border-left: 3px solid var(--rz-success, #22c55e);
    color: var(--rz-text-primary, #222);
    box-shadow: var(--onu-elevation-1, 0 1px 2px rgba(0,0,0,0.08));
    animation: reassignBannerIn-b-vaa3vdwcqy 220ms ease-out;
}

.banner-illust[b-vaa3vdwcqy] {
    width: 56px;
    height: 36px;
    color: var(--rz-success, #22c55e);
    flex-shrink: 0;
}

.banner-text[b-vaa3vdwcqy] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.banner-title[b-vaa3vdwcqy] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-success-dark, #15803d);
}

.banner-sub[b-vaa3vdwcqy] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary, #555);
}

@keyframes reassignBannerIn-b-vaa3vdwcqy {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .onu-reassign-banner[b-vaa3vdwcqy] { animation: none; }
}
/* /Components/OnuManager/Cards/OnuWifiConfigDialog.razor.rz.scp.css */
.onu-wifi-dialog[b-6z80qbbex9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 180px;
}

.wifi-form-grid[b-6z80qbbex9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.wifi-form-grid > span[b-6z80qbbex9] {
    color: var(--rz-text-secondary-color, #6b7280);
}

@media (max-width: 720px) {
    .wifi-form-grid[b-6z80qbbex9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/OnuManager/EmptyStates/OnuGridEmptyState.razor.rz.scp.css */
/* =============================================================================
   OnuGridEmptyState — estados vazios/loading do grid de ONUs (polido em tg:08)
   ----------------------------------------------------------------------------
   Hierarquia intencional: ilustracao -> titulo -> subtitulo -> acao, com ritmo
   por tokens (--onu-gap-* / --onu-empty-*). Centralizado vertical e horizontal
   na area de conteudo para nao parecer um placeholder solto.
   Tema: cores via tokens --onu-empty-* (derivados de --rz-*), seguem o toggle.
   Motion: pulse ease-out neutralizado em prefers-reduced-motion.
   ============================================================================= */

.onu-empty-state[b-0b00qez1iw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--onu-gap-lg, 12px);
    min-height: clamp(280px, 38vh, 420px);
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--onu-empty-text-secondary);
}

.onu-empty-illustration[b-0b00qez1iw] {
    width: 200px;
    max-width: 60vw;
    margin-bottom: var(--onu-gap-xs, 2px);
    color: var(--onu-empty-text-secondary);
    opacity: 0.9;
    /* Profundidade sutil, theme-aware (sombra deriva do texto do tema). */
    filter: drop-shadow(0 6px 16px color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 14%));
}

.empty-svg[b-0b00qez1iw] {
    width: 100%;
    height: auto;
    display: block;
}

.empty-svg-pulse[b-0b00qez1iw] {
    animation: onuEmptyPulse-b-0b00qez1iw 2.4s ease-out infinite;
}

@keyframes onuEmptyPulse-b-0b00qez1iw {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

.onu-empty-body[b-0b00qez1iw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--onu-gap-sm, 4px);
    max-width: 44ch;
}

.onu-empty-title[b-0b00qez1iw] {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--onu-empty-text-primary);
}

.onu-empty-subtitle[b-0b00qez1iw] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--onu-empty-text-secondary);
}

/* NoResults title: ancorado no AMBAR de MARCA (--onu-accent-cto) em vez do
   token --onu-empty-title-noresults. Aquele token deriva de --rz-warning-dark,
   que neste tema e OLIVA (#918908), o que descaracteriza a identidade de
   "atencao/aviso" esperada para um estado de busca sem resultados. Mesmo
   padrao adotado em tg:02 para o chip de atenuacao (ancorado em
   --onu-accent-cto). O color-mix com --rz-text-color mantem paridade de tema
   (escurece no claro, clareia no escuro). Fallback = ambar #b45309. */
.mode-noresults .onu-empty-title[b-0b00qez1iw] {
    color: color-mix(in srgb, var(--onu-accent-cto, #b45309) 62%, var(--rz-text-color, #b45309) 38%);
}

.mode-selectolt .onu-empty-title[b-0b00qez1iw] {
    color: var(--onu-empty-title-selectolt);
}

/* ---------- Acao "Limpar filtros" (NoResults) ----------
   Separada do corpo por um respiro maior (rompe o ritmo do texto) para ler
   claramente como afordance. O botao Radzen ganha presenca via padding + pill
   + lift no hover, sem mexer em parametros/evento do componente. */
.onu-empty-actions[b-0b00qez1iw] {
    margin-top: var(--onu-gap-md, 8px);
    padding-top: 0.25rem;
}

.onu-empty-actions[b-0b00qez1iw]  .rz-button {
    padding: 0.45rem 1.1rem;
    border-radius: var(--onu-radius-pill, 8px);
    font-weight: 600;
    transition: transform var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
                box-shadow var(--onu-anim-fast, 120ms) var(--onu-ease, ease),
                background var(--onu-anim-fast, 120ms) var(--onu-ease, ease);
}

.onu-empty-actions[b-0b00qez1iw]  .rz-button:hover,
.onu-empty-actions[b-0b00qez1iw]  .rz-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--onu-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.12));
}

@media (prefers-reduced-motion: reduce) {
    .empty-svg-pulse[b-0b00qez1iw] { animation: none; }

    .onu-empty-actions[b-0b00qez1iw]  .rz-button {
        transition: none;
    }
    .onu-empty-actions[b-0b00qez1iw]  .rz-button:hover,
    .onu-empty-actions[b-0b00qez1iw]  .rz-button:focus-visible {
        transform: none;
    }
}

@media (max-width: 600px) {
    .onu-empty-illustration[b-0b00qez1iw] { width: 160px; }
    .onu-empty-state[b-0b00qez1iw] {
        min-height: 240px;
        padding: 1.75rem 1rem;
    }
    .onu-empty-title[b-0b00qez1iw] { font-size: 1.05rem; }
}
/* /Components/OnuManager/Insights/FaturaDetailDialog.razor.rz.scp.css */
.fatura-dialog[b-nz5v77qmq8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background:
        radial-gradient(circle at top right, rgba(0, 133, 255, 0.10), transparent 46%),
        radial-gradient(circle at bottom left, rgba(0, 133, 255, 0.05), transparent 40%),
        linear-gradient(165deg, rgba(8, 26, 45, 0.10), rgba(8, 26, 45, 0.02));
}

.fatura-dialog-header[b-nz5v77qmq8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.05rem 1.1rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    background: linear-gradient(120deg, rgba(14, 66, 112, 0.16), rgba(14, 66, 112, 0.02));
    position: relative;
}

.fatura-dialog-header[b-nz5v77qmq8]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--rz-primary), transparent 70%);
    opacity: 0.6;
}

.fatura-dialog-title-row[b-nz5v77qmq8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fatura-dialog-icon-wrap[b-nz5v77qmq8] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 30%, rgba(148, 193, 255, 0.28), rgba(14, 66, 112, 0.16));
    border: 1px solid rgba(148, 193, 255, 0.35);
    color: var(--rz-primary);
    box-shadow: 0 0 0 4px rgba(148, 193, 255, 0.08), 0 4px 12px rgba(8, 26, 45, 0.25);
}

.fatura-dialog-icon-wrap[b-nz5v77qmq8]  .rzi {
    font-size: 1.35rem;
}

.fatura-dialog-title-block[b-nz5v77qmq8] {
    display: flex;
    flex-direction: column;
}

.fatura-dialog-title[b-nz5v77qmq8] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--rz-text-title-color);
}

.fatura-dialog-subtitle[b-nz5v77qmq8] {
    font-size: 0.78rem;
    margin-top: 0.1rem;
    color: var(--rz-text-secondary-color);
    font-family: monospace;
}

.fatura-dialog-close[b-nz5v77qmq8] {
    border-radius: 0.7rem;
}

.fatura-dialog-state[b-nz5v77qmq8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--rz-text-secondary-color);
}

.fatura-dialog-error[b-nz5v77qmq8] {
    color: var(--rz-danger);
}

.fatura-dialog-summary[b-nz5v77qmq8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.7rem;
    padding: 1rem 1.05rem 0.4rem;
}

.fsum-card[b-nz5v77qmq8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.8rem 0.6rem 0.7rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(36, 87, 129, 0.22);
    background: linear-gradient(150deg, rgba(12, 29, 46, 0.12), rgba(12, 29, 46, 0.03));
    overflow: hidden;
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s ease-out;
}

.fsum-card[b-nz5v77qmq8]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--rz-base-300);
    opacity: 0.8;
}

.fsum-card:hover[b-nz5v77qmq8] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(8, 26, 45, 0.28);
}

.fsum-value[b-nz5v77qmq8] {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
}

.fsum-label[b-nz5v77qmq8] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
}

.fsum-vencidas .fsum-value[b-nz5v77qmq8] { color: var(--rz-danger); }
.fsum-abertas .fsum-value[b-nz5v77qmq8] { color: var(--rz-warning); }
.fsum-pagas .fsum-value[b-nz5v77qmq8] { color: var(--rz-success); }
.fsum-canceladas .fsum-value[b-nz5v77qmq8] { color: var(--rz-text-disabled-color); }
.fsum-saldo .fsum-value[b-nz5v77qmq8] { color: var(--rz-primary); font-size: 1.05rem; }

.fsum-vencidas[b-nz5v77qmq8]::before { background: var(--rz-danger); }
.fsum-abertas[b-nz5v77qmq8]::before { background: var(--rz-warning); }
.fsum-pagas[b-nz5v77qmq8]::before { background: var(--rz-success); }
.fsum-canceladas[b-nz5v77qmq8]::before { background: var(--rz-text-disabled-color); }
.fsum-saldo[b-nz5v77qmq8]::before { background: var(--rz-primary); }

.fsum-vencidas:hover[b-nz5v77qmq8] { border-color: rgba(180, 56, 75, 0.45); }
.fsum-abertas:hover[b-nz5v77qmq8] { border-color: rgba(193, 134, 30, 0.45); }
.fsum-pagas:hover[b-nz5v77qmq8] { border-color: rgba(66, 146, 83, 0.45); }
.fsum-saldo:hover[b-nz5v77qmq8] { border-color: rgba(148, 193, 255, 0.45); }

.fatura-dialog-filterbar[b-nz5v77qmq8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
}

.ffilter-chip[b-nz5v77qmq8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease-out, background 0.15s ease-out, border-color 0.15s ease-out, opacity 0.15s ease-out;
}

.ffilter-chip[b-nz5v77qmq8]  .rzi {
    font-size: 1rem;
}

.fatura-row-status[b-nz5v77qmq8]  .rzi {
    font-size: 1.05rem;
}

.fatura-dialog-state[b-nz5v77qmq8]  .rzi,
.fatura-dialog-empty[b-nz5v77qmq8]  .rzi {
    font-size: 1.4rem;
}

.ffilter-chip:hover[b-nz5v77qmq8] {
    transform: translateY(-1px);
}

.ffilter-chip.off[b-nz5v77qmq8] {
    opacity: 0.65;
    filter: grayscale(0.35);
}

.ffilter-chip.fstatus-vencida.on[b-nz5v77qmq8] { background: rgba(180, 56, 75, 0.14); border-color: rgba(180, 56, 75, 0.4); color: var(--rz-danger); }
.ffilter-chip.fstatus-aberta.on[b-nz5v77qmq8] { background: rgba(193, 134, 30, 0.14); border-color: rgba(193, 134, 30, 0.4); color: var(--rz-warning); }
.ffilter-chip.fstatus-paga.on[b-nz5v77qmq8] { background: rgba(66, 146, 83, 0.14); border-color: rgba(66, 146, 83, 0.4); color: var(--rz-success); }
.ffilter-chip.fstatus-cancelada.on[b-nz5v77qmq8] { background: rgba(120, 120, 120, 0.14); border-color: rgba(120, 120, 120, 0.4); }

.fatura-dialog-list[b-nz5v77qmq8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.3rem 1.05rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fatura-dialog-empty[b-nz5v77qmq8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    justify-content: center;
    color: var(--rz-text-secondary-color);
}

.fatura-row[b-nz5v77qmq8] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem 0.7rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    border-left-width: 3px;
    background: rgba(127, 127, 127, 0.06);
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s ease-out;
}

.fatura-row:hover[b-nz5v77qmq8] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(8, 26, 45, 0.22);
}

.fatura-row.fstatus-vencida[b-nz5v77qmq8] { background: rgba(180, 56, 75, 0.12); border-color: rgba(180, 56, 75, 0.26); border-left-color: var(--rz-danger); }
.fatura-row.fstatus-aberta[b-nz5v77qmq8] { background: rgba(193, 134, 30, 0.12); border-color: rgba(193, 134, 30, 0.26); border-left-color: var(--rz-warning); }
.fatura-row.fstatus-paga[b-nz5v77qmq8] { background: rgba(66, 146, 83, 0.12); border-color: rgba(66, 146, 83, 0.24); border-left-color: var(--rz-success); }
.fatura-row.fstatus-cancelada[b-nz5v77qmq8] { background: rgba(120, 120, 120, 0.08); border-color: rgba(120, 120, 120, 0.24); border-left-color: var(--rz-text-disabled-color); }

.fatura-row-head[b-nz5v77qmq8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fatura-row-status[b-nz5v77qmq8] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    font-size: 0.82rem;
}

.fatura-row.fstatus-vencida .fatura-row-status[b-nz5v77qmq8] { color: var(--rz-danger); }
.fatura-row.fstatus-aberta .fatura-row-status[b-nz5v77qmq8] { color: var(--rz-warning); }
.fatura-row.fstatus-paga .fatura-row-status[b-nz5v77qmq8] { color: var(--rz-success); }

.fatura-row-num[b-nz5v77qmq8] {
    font-weight: 600;
    color: var(--rz-text-color);
}

.fatura-row-venc[b-nz5v77qmq8] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.fatura-row-saldo[b-nz5v77qmq8] {
    margin-left: auto;
    font-weight: 700;
    font-family: monospace;
}

.fatura-row-actions[b-nz5v77qmq8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fatura-act[b-nz5v77qmq8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-100);
    color: var(--rz-text-color);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease-out, transform 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.fatura-act[b-nz5v77qmq8]  .rzi {
    font-size: 1.05rem;
}

.fatura-act-label[b-nz5v77qmq8] {
    letter-spacing: 0.02em;
}

.fatura-act:hover:not(:disabled)[b-nz5v77qmq8] {
    transform: translateY(-1px);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    box-shadow: 0 4px 12px rgba(8, 26, 45, 0.22);
}

.fatura-act:disabled[b-nz5v77qmq8] {
    opacity: 0.4;
    cursor: not-allowed;
}

.fatura-act--pix[b-nz5v77qmq8] {
    border-color: rgba(50, 191, 168, 0.5);
    color: #34d3b9;
    background: rgba(50, 191, 168, 0.14);
}

.fatura-act--pix:hover:not(:disabled)[b-nz5v77qmq8] {
    background: rgba(50, 191, 168, 0.22);
    border-color: #34d3b9;
    color: #34d3b9;
    box-shadow: 0 4px 12px rgba(50, 191, 168, 0.28);
}

@media (max-width: 768px) {
    .fatura-dialog-summary[b-nz5v77qmq8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Reduced-motion: neutraliza transicoes/hover-lift do dialog (tg:09). */
@media (prefers-reduced-motion: reduce) {
    .fatura-dialog-card[b-nz5v77qmq8],
    .fatura-dialog-row[b-nz5v77qmq8],
    .fatura-dialog-chip[b-nz5v77qmq8],
    .fatura-dialog-action[b-nz5v77qmq8] {
        transition: none;
    }
    .fatura-dialog-card:hover[b-nz5v77qmq8],
    .fatura-dialog-row:hover[b-nz5v77qmq8],
    .fatura-dialog-chip:hover[b-nz5v77qmq8],
    .fatura-dialog-action:hover[b-nz5v77qmq8] {
        transform: none;
    }
}
/* /Components/OnuManager/Insights/NetworkGroupInsightDialog.razor.rz.scp.css */
.insight-dialog[b-ses38l3h2e] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background:
        radial-gradient(circle at top right, rgba(0, 133, 255, 0.09), transparent 42%),
        linear-gradient(165deg, rgba(8, 26, 45, 0.08), rgba(8, 26, 45, 0.02));
}

.insight-header[b-ses38l3h2e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1rem 0.85rem;
    border-bottom: 1px solid var(--rz-base-200);
    background: linear-gradient(120deg, rgba(14, 66, 112, 0.1), rgba(14, 66, 112, 0.02));
}

.insight-icon-wrap[b-ses38l3h2e] {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(14, 66, 112, 0.14);
    border: 1px solid rgba(14, 66, 112, 0.2);
}

.insight-title-row[b-ses38l3h2e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.insight-title-block[b-ses38l3h2e] {
    display: flex;
    flex-direction: column;
}

.insight-title[b-ses38l3h2e] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--rz-text-title-color);
}

.insight-subtitle[b-ses38l3h2e] {
    font-size: 0.78rem;
    margin-top: 0.1rem;
    color: var(--rz-text-secondary-color);
}

.insight-close-btn[b-ses38l3h2e] {
    border-radius: 0.7rem;
}

[b-ses38l3h2e] .insight-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-ses38l3h2e] .insight-tabs .rz-tabview-nav {
    padding: 0.45rem 0.65rem 0;
    gap: 0.2rem;
    border-bottom: 1px solid var(--rz-base-200);
}

[b-ses38l3h2e] .insight-tabs .rz-tabview-nav li a {
    border-radius: 0.65rem 0.65rem 0 0;
    font-weight: 600;
    font-size: 0.85rem;
}

[b-ses38l3h2e] .insight-tabs .rz-tabview-panels {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.tab-content[b-ses38l3h2e] {
    padding: 1.05rem;
}

.summary-grid[b-ses38l3h2e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.35rem;
}

.summary-card[b-ses38l3h2e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.9rem 0.8rem;
    border-radius: 0.85rem;
    background: linear-gradient(150deg, rgba(12, 29, 46, 0.08), rgba(12, 29, 46, 0.03));
    border: 1px solid rgba(36, 87, 129, 0.23);
    transition: transform var(--onu-anim-medium, 200ms) var(--onu-ease),
                border-color var(--onu-anim-medium, 200ms) var(--onu-ease),
                box-shadow var(--onu-anim-medium, 200ms) var(--onu-ease);
}

.summary-card:hover[b-ses38l3h2e] {
    transform: translateY(-2px);
    border-color: rgba(36, 87, 129, 0.45);
    box-shadow: var(--onu-elevation-hover, 0 6px 16px rgba(0, 0, 0, 0.1));
}

@media (prefers-reduced-motion: reduce) {
    .summary-card[b-ses38l3h2e] {
        transition: none;
    }
    .summary-card:hover[b-ses38l3h2e] {
        transform: none;
    }
}

.summary-card .rz-icon[b-ses38l3h2e] {
    font-size: 1.4rem;
}

.summary-online .rz-icon[b-ses38l3h2e],
.summary-online .summary-value[b-ses38l3h2e] { color: var(--rz-success); }

.summary-offline .rz-icon[b-ses38l3h2e],
.summary-offline .summary-value[b-ses38l3h2e] { color: var(--rz-danger); }

.summary-total .rz-icon[b-ses38l3h2e],
.summary-total .summary-value[b-ses38l3h2e] { color: var(--rz-info); }

.summary-signal .rz-icon[b-ses38l3h2e],
.summary-signal .summary-value[b-ses38l3h2e] { color: var(--rz-primary); }

.summary-min .rz-icon[b-ses38l3h2e],
.summary-min .summary-value[b-ses38l3h2e] { color: var(--rz-warning); }

.summary-max .rz-icon[b-ses38l3h2e],
.summary-max .summary-value[b-ses38l3h2e] { color: var(--rz-success); }

.summary-value[b-ses38l3h2e] {
    font-size: 1.2rem;
    font-weight: 700;
}

.summary-label[b-ses38l3h2e] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.summary-section[b-ses38l3h2e] {
    margin-bottom: 1.2rem;
    padding: 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(40, 94, 138, 0.2);
    background: rgba(11, 34, 56, 0.06);
}

.summary-section h4[b-ses38l3h2e] {
    margin: 0 0 0.7rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
}

.state-chips[b-ses38l3h2e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.top-list[b-ses38l3h2e] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.top-item[b-ses38l3h2e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    font-size: 0.84rem;
}

.top-item.danger[b-ses38l3h2e] {
    background: rgba(180, 56, 75, 0.12);
    border-color: rgba(180, 56, 75, 0.27);
}

.top-item.success[b-ses38l3h2e] {
    background: rgba(66, 146, 83, 0.12);
    border-color: rgba(66, 146, 83, 0.27);
}

.top-name[b-ses38l3h2e] {
    font-weight: 500;
    color: var(--rz-text-color);
}

.top-value[b-ses38l3h2e] {
    font-weight: 600;
    font-family: monospace;
}

.top-empty[b-ses38l3h2e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.7rem;
    border: 1px dashed rgba(83, 161, 100, 0.45);
    background: rgba(83, 161, 100, 0.08);
    color: var(--rz-text-secondary-color);
    font-size: 0.84rem;
}

.top-empty .rz-icon[b-ses38l3h2e] {
    color: var(--rz-success);
}

.summary-footer[b-ses38l3h2e] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(53, 120, 160, 0.3);
    background: rgba(53, 120, 160, 0.12);
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
}

.charts-tab[b-ses38l3h2e] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

[b-ses38l3h2e] .insight-grid {
    max-height: 60vh;
}

@media (max-width: 768px) {
    .summary-grid[b-ses38l3h2e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .tab-content[b-ses38l3h2e] {
        padding: 0.8rem;
    }

    .summary-section[b-ses38l3h2e] {
        padding: 0.75rem;
    }
}
/* /Components/OnuManager/Insights/OnuInsightDialog.razor.rz.scp.css */
.onu-insight-dialog[b-nfgkau1fcc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background:
        radial-gradient(circle at top right, rgba(0, 145, 112, 0.08), transparent 45%),
        linear-gradient(165deg, rgba(6, 27, 38, 0.08), rgba(6, 27, 38, 0.02));
}

.onu-insight-header[b-nfgkau1fcc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1rem 0.85rem;
    border-bottom: 1px solid var(--rz-base-200);
    background: linear-gradient(120deg, rgba(12, 101, 86, 0.1), rgba(12, 101, 86, 0.03));
}

.onu-insight-title-row[b-nfgkau1fcc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.onu-insight-icon-wrap[b-nfgkau1fcc] {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(12, 101, 86, 0.14);
    border: 1px solid rgba(12, 101, 86, 0.24);
}

.onu-insight-title-block[b-nfgkau1fcc] {
    display: flex;
    flex-direction: column;
}

.onu-insight-title[b-nfgkau1fcc] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--rz-text-title-color);
}

.onu-insight-subtitle[b-nfgkau1fcc] {
    font-size: 0.78rem;
    margin-top: 0.1rem;
    color: var(--rz-text-secondary-color);
}

.onu-insight-status[b-nfgkau1fcc] {
    margin-left: 0.2rem;
}

.insight-close-btn[b-nfgkau1fcc] {
    border-radius: 0.7rem;
}

[b-nfgkau1fcc] .onu-insight-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-nfgkau1fcc] .onu-insight-tabs .rz-tabview-nav {
    padding: 0.45rem 0.65rem 0;
    gap: 0.2rem;
    border-bottom: 1px solid var(--rz-base-200);
}

[b-nfgkau1fcc] .onu-insight-tabs .rz-tabview-nav li a {
    border-radius: 0.65rem 0.65rem 0 0;
    font-weight: 600;
    font-size: 0.85rem;
}

[b-nfgkau1fcc] .onu-insight-tabs .rz-tabview-panels {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.tab-content-scroll[b-nfgkau1fcc] {
    padding: 1rem 1.05rem;
    overflow-y: auto;
}

.chart-card[b-nfgkau1fcc] {
    border-radius: 0.85rem;
    border: 1px solid rgba(19, 104, 91, 0.25);
    background: linear-gradient(155deg, rgba(7, 43, 57, 0.12), rgba(7, 43, 57, 0.04));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

.chart-title[b-nfgkau1fcc] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.trend-placeholder[b-nfgkau1fcc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    border: 1px dashed rgba(12, 101, 86, 0.32);
    border-radius: 0.9rem;
    background: rgba(12, 101, 86, 0.06);
}

.trend-placeholder h4[b-nfgkau1fcc] {
    margin: 0;
    color: var(--rz-text-title-color);
}

.trend-placeholder p[b-nfgkau1fcc] {
    max-width: 400px;
    font-size: 0.9rem;
}

/* Empty/no-data state (icone "warning" + "Dados nao disponiveis"). Ancorado no
   AMBAR de MARCA (--onu-accent-cto) em vez de --rz-warning: neste tema
   --rz-warning e OLIVA (#e8e971), que como TEXTO fica pale-oliva (baixo
   contraste) e descaracteriza a identidade de "atencao". Mesmo padrao do
   NoResults em OnuGridEmptyState e do chip de atenuacao em tg:02. O color-mix
   com --rz-text-color mantem paridade de tema (escurece no claro, clareia no
   escuro). Fallback = ambar #b45309. */
.onu-insight-empty[b-nfgkau1fcc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: color-mix(in srgb, var(--onu-accent-cto, #b45309) 62%, var(--rz-text-color, #b45309) 38%);
}

@media (max-width: 768px) {
    .tab-content-scroll[b-nfgkau1fcc] {
        padding: 0.8rem;
    }
}
/* /Components/OnuManager/Insights/StateDonutChart.razor.rz.scp.css */
.donut-row[b-q5m2xud3jp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .donut-row[b-q5m2xud3jp] {
        grid-template-columns: 1fr;
    }
}
/* /Components/OnuManager/OnuConnectionStatusBadge.razor.rz.scp.css */
.onu-connection-status[b-76fpyzsrwi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.onu-connection-illust[b-76fpyzsrwi] {
    width: 28px;
    height: 28px;
    color: var(--rz-danger, #dc3545);
    opacity: 0.95;
    animation: connectionLostPulse-b-76fpyzsrwi 2.4s ease-in-out infinite;
}

@keyframes connectionLostPulse-b-76fpyzsrwi {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(-1px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .onu-connection-illust[b-76fpyzsrwi] { animation: none; }
}
/* /Components/OnuManager/OnuManagerFilterBar.razor.rz.scp.css */
/* OnuManagerFilterBar — scoped layout (tg:05; shell bridge tg:ds-10)
   Widths moved off inline Style=".. px" into a responsive, token-based set.
   Card border/divider owned by site.css (.onu-manager-filter-card → --brand-divider)
   for parity with MainLayout header and demais operacionais. CTO/PON accents
   remain --onu-accent-* (see onu-card-tokens.css ownership block). */

.onu-filter-bar[b-lnsbik606l] {
    width: 100%;
}

/* Status / realtime badges read as one tight, subordinate cluster, with a
   larger rhythm gap before the primary filter controls. */
.onu-filter-bar__badges[b-lnsbik606l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--onu-gap-md);
    margin-bottom: var(--onu-gap-lg);
}

/* Filter controls: wrap gracefully, inputs aligned at their baseline.
   Asymmetric column/row gaps give vertical rhythm when the row wraps. */
.onu-filter-bar__filters[b-lnsbik606l] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: var(--onu-gap-lg);
    row-gap: var(--onu-gap-md);
}

.onu-filter-bar__filters[b-lnsbik606l]  .onu-ff {
    flex: 1 1 auto;
    min-width: 0;
}

.onu-filter-bar__filters[b-lnsbik606l]  .onu-ff .rz-dropdown {
    width: 100%;
}

/* Hierarchy via scale contrast: primary selectors (OLT / ONU) read widest;
   compact selectors (Slot / PON) stay subordinate. */
.onu-filter-bar__filters[b-lnsbik606l]  .onu-ff--olt {
    flex-basis: 200px;
    max-width: 260px;
}

.onu-filter-bar__filters[b-lnsbik606l]  .onu-ff--onuname {
    flex-basis: 240px;
    max-width: 360px;
}

.onu-filter-bar__filters[b-lnsbik606l]  .onu-ff--cto {
    flex-basis: 280px;
    max-width: 340px;
}

.onu-filter-bar__filters[b-lnsbik606l]  .onu-ff--pon {
    flex-basis: 96px;
    max-width: 120px;
}

.onu-filter-bar__filters[b-lnsbik606l]  .onu-ff--slot {
    flex-basis: 88px;
    max-width: 110px;
}

/* Tablet/mobile: drop the desktop caps so each control fills the available
   width and wraps cleanly — no horizontal scroll at <=768px, usable at ~400px. */
@media (max-width: 768px) {
    .onu-filter-bar__filters[b-lnsbik606l]  .onu-ff {
        flex: 1 1 220px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .onu-filter-bar__filters[b-lnsbik606l]  .onu-ff {
        flex-basis: 100%;
    }
}
/* /Components/OnuManager/OnuManagerToolbar.razor.rz.scp.css */
/* OnuManagerToolbar — scoped layout (tg:05)
   Root + events group converted to plain wrappers so the inline px width and
   label sizing move into token-based scoped CSS. site.css keeps owning the
   button radius/margins for .onu-manager-toolbar; this only adds layout.
   Radzen children (Label/DropDown) are reached via ::deep. */

.onu-manager-toolbar[b-4il0mpw7mm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--onu-gap-lg);
}

.onu-toolbar__events[b-4il0mpw7mm] {
    display: flex;
    align-items: center;
    gap: var(--onu-gap-sm);
}

.onu-manager-toolbar[b-4il0mpw7mm]  .onu-toolbar__events-label {
    font-family: var(--brand-font-body, 'Montserrat', system-ui, sans-serif);
    font-size: 0.85rem;
}

.onu-manager-toolbar[b-4il0mpw7mm]  .onu-toolbar__events-select {
    width: 110px;
}
/* /Components/OnuManager/OnuSkeletonPanel.razor.rz.scp.css */
/* =============================================================================
   OnuSkeletonPanel — skeleton que espelha o layout populado (tg:08)
   ----------------------------------------------------------------------------
   Silhuetas, nao barras genericas: header de grupo (acento + avatar 36px +
   linhas) e cards empilhados com grid coluna-principal | side-rail, replicando
   as proporcoes de OnuCard.razor.css e group-headers.css para que o
   load->data nao salte.

   Tema: as cores derivam de --rz-text-color (que TROCA com o toggle in-app),
   logo light/dark seguem o tema sem seletores .dark-theme inertes. Sem #000/#fff.
   Motion: a wave anima background-position (nao layout) com ease-out e e
   neutralizada em prefers-reduced-motion.
   ============================================================================= */

.onu-skeleton[b-clekrr7fo7] {
    /* Preenchimento e brilho da wave derivados do texto do tema (segue toggle). */
    --sk-fill: color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 9%);
    --sk-highlight: color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 18%);

    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.sk-group[b-clekrr7fo7] {
    display: flex;
    flex-direction: column;
}

/* ---------- Shimmer base (wave) ---------- */
.sk-shimmer[b-clekrr7fo7] {
    background-color: var(--sk-fill);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        var(--sk-highlight) 50%,
        transparent 70%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 220% 0;
    animation: onuSkeletonWave-b-clekrr7fo7 1.5s ease-out infinite;
}

@keyframes onuSkeletonWave-b-clekrr7fo7 {
    0%   { background-position: 220% 0; }
    100% { background-position: -120% 0; }
}

/* Tijolos / linhas / chips compartilham o radius do tema. */
.sk-line[b-clekrr7fo7],
.sk-chip[b-clekrr7fo7],
.sk-action[b-clekrr7fo7],
.sk-signal[b-clekrr7fo7],
.sk-avatar[b-clekrr7fo7] {
    display: block;
    border-radius: var(--onu-radius-chip, 4px);
}

/* ---------- Header de grupo (espelha .cto-header-card) ---------- */
.sk-group-header[b-clekrr7fo7] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--onu-gap-lg, 12px);
    padding: 0.75rem;
    padding-left: calc(0.75rem + var(--onu-status-bar-w, 4px));
    border-radius: var(--onu-card-radius, 8px);
    margin-bottom: 0.6rem;
    background: var(--onu-panel-bg-soft, rgba(127, 127, 127, 0.06));
    border: 1px solid var(--onu-panel-border, rgba(127, 127, 127, 0.14));
    box-shadow: var(--onu-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.05));
    overflow: hidden;
}

/* Acento lateral neutro (sem hue de marca para nao falsear CTO/PON no load). */
.sk-group-header .sk-accent[b-clekrr7fo7] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--onu-status-bar-w, 4px);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 22%);
}

.sk-avatar[b-clekrr7fo7] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sk-header-text[b-clekrr7fo7] {
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-sm, 4px);
    flex: 1;
    min-width: 0;
}

.sk-header-states[b-clekrr7fo7] {
    display: flex;
    gap: var(--onu-gap-sm, 4px);
    flex-shrink: 0;
}

/* ---------- Card (espelha .onu-card + .onu-card-grid) ---------- */
.sk-card[b-clekrr7fo7] {
    position: relative;
    padding: 0.65rem;
    padding-left: calc(0.5rem + var(--onu-status-bar-w, 4px));
    margin-bottom: 0.4rem;
    border-radius: var(--onu-card-radius-modern, 10px);
    background: var(--onu-panel-bg-soft, rgba(127, 127, 127, 0.05));
    border: 1px solid var(--onu-panel-border, rgba(127, 127, 127, 0.12));
    box-shadow: var(--onu-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.06));
    overflow: hidden;
}

.sk-card .sk-status-bar[b-clekrr7fo7] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--onu-status-bar-w, 4px);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 14%);
}

.sk-card-grid[b-clekrr7fo7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem);
    gap: var(--onu-gap-lg, 12px);
    align-items: stretch;
}

.sk-main[b-clekrr7fo7] {
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-md, 8px);
    min-width: 0;
}

.sk-identity[b-clekrr7fo7] {
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-sm, 4px);
    padding: 0.4rem 0.55rem 0.5rem;
    border-radius: var(--onu-radius-panel, 7px);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 3%);
    border: 1px solid var(--onu-panel-border, rgba(127, 127, 127, 0.10));
}

.sk-chip-row[b-clekrr7fo7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--onu-gap-sm, 4px);
    margin-top: var(--onu-gap-xs, 2px);
}

.sk-service[b-clekrr7fo7] {
    display: flex;
    flex-direction: column;
    gap: var(--onu-gap-sm, 4px);
}

/* Side-rail (espelha .onu-side-rail: sinal em cima, acoes embaixo). */
.sk-side-rail[b-clekrr7fo7] {
    display: grid;
    align-content: start;
    gap: var(--onu-gap-lg, 12px);
    padding: 0.55rem;
    border-radius: var(--onu-radius-panel, 7px);
    background: var(--onu-panel-bg, rgba(127, 127, 127, 0.10));
    border: 1px solid var(--onu-panel-border, rgba(127, 127, 127, 0.14));
}

.sk-signal[b-clekrr7fo7] {
    width: 100%;
    height: 3.25rem;
    border-radius: var(--onu-radius-panel, 7px);
}

.sk-actions[b-clekrr7fo7] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.22rem;
    padding: 0.35rem;
    border-radius: var(--onu-radius-panel, 7px);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 4%);
}

.sk-action[b-clekrr7fo7] {
    width: 2rem;
    height: 2rem;
    border-radius: var(--onu-radius-pill, 8px);
}

/* ---------- Larguras das linhas / chips ---------- */
.sk-line[b-clekrr7fo7] { height: 0.7rem; }
.sk-line-title[b-clekrr7fo7] { height: 1rem; width: 42%; }
.sk-line-meta[b-clekrr7fo7]  { width: 28%; }
.sk-line-name[b-clekrr7fo7]  { height: 0.85rem; width: 60%; }
.sk-line-sn[b-clekrr7fo7]    { width: 38%; }
.sk-line-sm[b-clekrr7fo7]    { width: 80%; }
.sk-line-xs[b-clekrr7fo7]    { width: 55%; }

.sk-chip[b-clekrr7fo7] {
    height: 0.85rem;
    width: 3.25rem;
}
.sk-header-states .sk-chip[b-clekrr7fo7] {
    height: 1.1rem;
    width: 3.75rem;
    border-radius: var(--onu-radius-pill, 8px);
}

/* ---------- Responsivo (segue OnuCard.razor.css) ---------- */
@media (max-width: 1180px) {
    .sk-card-grid[b-clekrr7fo7] { grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); }
}

@media (max-width: 980px) {
    .sk-card-grid[b-clekrr7fo7] { grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem); }
}

@media (max-width: 576px) {
    .sk-card-grid[b-clekrr7fo7] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .sk-side-rail[b-clekrr7fo7] { gap: var(--onu-gap-md, 8px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sk-shimmer[b-clekrr7fo7] {
        animation: none;
        background-image: none;
        background-color: var(--sk-fill);
    }
}
/* /Components/OnuManager/Unconfigured/UnconfiguredOnuPanel.razor.rz.scp.css */
.onu-unconfigured-page .syslog-metric-card[b-yj0jort66r] {
    height: 100%;
    border-left: 4px solid var(--rz-primary);
}

.onu-unconfigured-page .syslog-metric-card-ok[b-yj0jort66r] {
    border-left-color: var(--rz-success, #28a745);
}

.onu-unconfigured-page .syslog-metric-card-warn[b-yj0jort66r] {
    border-left-color: var(--rz-warning, #ffb400);
}

.onu-unconfigured-page .syslog-metric-card-alarm[b-yj0jort66r] {
    border-left-color: var(--rz-danger, #dc3545);
}

.onu-unconfigured-page .unconfigured-onu-card[b-yj0jort66r] {
    border-left: 3px solid var(--rz-base-400);
}

.onu-unconfigured-page .unconfigured-onu-datalist[b-yj0jort66r] {
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/ActionExecution.razor.rz.scp.css */
.action-execution-page[b-y1jwtvndor] {
    font-family: var(--brand-font-body);
    color: var(--rz-text-color);
}

.action-execution-page :global(.rz-text-h4)[b-y1jwtvndor],
.action-execution-page :global(.rz-text-h6)[b-y1jwtvndor] {
    font-family: var(--brand-font-title);
}

.action-execution-page :global(.rz-card)[b-y1jwtvndor] {
    border-radius: var(--brand-radius-panel, 8px);
    border: 1px solid var(--brand-border, var(--rz-border-color));
    box-shadow: var(--brand-shadow-sm);
}

.action-exec-concept-card[b-y1jwtvndor] {
    border-left: 4px solid var(--rz-primary);
}

.action-exec-method-desc[b-y1jwtvndor] {
    color: var(--rz-text-secondary-color);
}

.action-exec-result-card[b-y1jwtvndor] {
    border-left: 4px solid var(--rz-info);
}

.action-exec-result-ok[b-y1jwtvndor] {
    border-left-color: var(--rz-success);
}

.action-exec-result-fail[b-y1jwtvndor] {
    border-left-color: var(--rz-danger);
}

.action-exec-result-output[b-y1jwtvndor] {
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: color-mix(in srgb, transparent, var(--rz-text-color) 6%);
    color: var(--rz-text-color);
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.action-exec-result-duration[b-y1jwtvndor],
.action-exec-result-meta[b-y1jwtvndor] {
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/ActionExecutionStory.razor.rz.scp.css */
/* Fontes Exo/Montserrat carregadas via <HeadContent> na pagina (scoped CSS nao aceita @import). */

/* ====== Tokens locais da marca Algar (fallback do design-system) ====== */
.action-execution-story[b-s4wr29kc7b] {
    /* Paleta Algar */
    --ink: #0A645A;            /* Teal Escuro — tinta no lugar do preto puro */
    --ink-suave: #646E6E;      /* Neutro Escuro */
    --verde-algar: #00EBB0;
    --teal-claro: #1EFFD2;
    --teal: #28BEA5;
    --teal-medio: #239687;
    --azul: #00BEFF;
    --azul-claro: #00E6FF;
    --amarelo-claro: #FFD22D;
    --verde-limao-claro: #7DFF37;
    --neutro-claro: #B4BEBE;

    /* Gradientes validos (2 primarias) */
    --grad-verde-azul: linear-gradient(135deg, #00EBB0, #00E6FF);
    --grad-azul: linear-gradient(135deg, #00E6FF, #00BEFF);

    /* Fontes */
    --font-titulo: 'Exo', 'Montserrat', system-ui, sans-serif;
    --font-texto: 'Montserrat', 'Exo', system-ui, sans-serif;

    /* Superficie adaptativa (light default) */
    --aes-bg: radial-gradient(circle at 12% -10%, rgba(0, 235, 176, 0.16), transparent 45%),
              radial-gradient(circle at 92% 8%, rgba(0, 190, 255, 0.14), transparent 42%),
              #F2FAF8;
    --aes-card-bg: #FFFFFF;
    --aes-card-border: rgba(10, 100, 90, 0.14);
    --aes-text: var(--ink);
    --aes-text-soft: var(--ink-suave);
    --aes-chip-bg: rgba(10, 100, 90, 0.06);
    --aes-chip-border: rgba(10, 100, 90, 0.16);
    --aes-code-bg: #06342F;
    --aes-shadow: 0 18px 44px rgba(10, 100, 90, 0.18);

    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: calc(100vh - 7.5rem);
    padding: 1.25rem clamp(0.75rem, 3vw, 2.25rem);
    background: var(--aes-bg);
    border-radius: 24px;
    font-family: var(--font-texto);
    color: var(--aes-text);
    outline: none;
}

/* Dark mode: deriva de teal escuro, nunca preto puro */
:global(body.rz-dark) .action-execution-story[b-s4wr29kc7b],
:global(.rz-dark) .action-execution-story[b-s4wr29kc7b] {
    --aes-bg: radial-gradient(circle at 12% -10%, rgba(0, 235, 176, 0.18), transparent 46%),
              radial-gradient(circle at 92% 6%, rgba(0, 190, 255, 0.16), transparent 44%),
              #07433C;
    --aes-card-bg: #0A5750;
    --aes-card-border: rgba(30, 255, 210, 0.18);
    --aes-text: #EAFBF6;
    --aes-text-soft: #A8D8CF;
    --aes-chip-bg: rgba(30, 255, 210, 0.10);
    --aes-chip-border: rgba(30, 255, 210, 0.24);
    --aes-code-bg: #052B27;
    --aes-shadow: 0 18px 44px rgba(2, 30, 27, 0.5);
}

/* ====== Topbar ====== */
.aes-topbar[b-s4wr29kc7b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.aes-brand-dot[b-s4wr29kc7b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--grad-verde-azul);
    box-shadow: var(--aes-shadow);
}

.aes-brand-arrow[b-s4wr29kc7b] {
    width: 20px;
    height: 22px;
    color: var(--ink);
}

.aes-topbar-titles[b-s4wr29kc7b] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.aes-topbar-kicker[b-s4wr29kc7b] {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--aes-text);
}

.aes-topbar-sub[b-s4wr29kc7b] {
    font-size: 0.8rem;
    color: var(--aes-text-soft);
}

/* ====== Stage ====== */
.aes-stage[b-s4wr29kc7b] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: clamp(0.4rem, 1.5vw, 1rem);
    flex: 1 1 auto;
}

.aes-slide[b-s4wr29kc7b] {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: clamp(1.5rem, 3.5vw, 3rem);
    background: var(--aes-card-bg);
    border: 1px solid var(--aes-card-border);
    border-radius: 28px;
    box-shadow: var(--aes-shadow);
    overflow: hidden;
    animation: aes-fade-b-s4wr29kc7b 0.45s ease;
}

@keyframes aes-fade-b-s4wr29kc7b {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

.aes-slide-glow[b-s4wr29kc7b] {
    position: absolute;
    inset: -40% 50% auto -10%;
    height: 60%;
    background: var(--grad-verde-azul);
    filter: blur(80px);
    opacity: 0.18;
    pointer-events: none;
}

.aes-slide-head[b-s4wr29kc7b] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 60ch;
}

.aes-eyebrow[b-s4wr29kc7b] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--aes-chip-bg);
    border: 1px solid var(--aes-chip-border);
    font-family: var(--font-titulo);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal-medio);
}

:global(.rz-dark) .action-execution-story .aes-eyebrow[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

.aes-eyebrow :global(.rzi)[b-s4wr29kc7b] {
    font-size: 16px;
}

.action-execution-story .aes-title[b-s4wr29kc7b] {
    font-family: var(--font-titulo);
    font-weight: 700;
    line-height: 1.12;
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    color: var(--aes-text);
    margin: 0;
}

.action-execution-story .aes-subtitle[b-s4wr29kc7b] {
    font-size: clamp(0.98rem, 1.5vw, 1.18rem);
    line-height: 1.55;
    color: var(--aes-text-soft);
    margin: 0;
}

.aes-slide-body[b-s4wr29kc7b] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    justify-content: center;
    flex: 1 1 auto;
}

/* ====== Setas (marca) ====== */
.aes-arrow[b-s4wr29kc7b] {
    flex: 0 0 auto;
}

/* ====== Navegacao lateral ====== */
.aes-nav[b-s4wr29kc7b] {
    flex: 0 0 auto;
    width: clamp(44px, 5vw, 64px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--aes-card-border);
    border-radius: 22px;
    background: var(--aes-card-bg);
    color: var(--teal-medio);
    cursor: pointer;
    box-shadow: var(--aes-shadow);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.aes-nav :global(.rzi)[b-s4wr29kc7b] {
    font-size: clamp(28px, 3vw, 38px);
}

.aes-nav:hover:not(:disabled)[b-s4wr29kc7b] {
    background: var(--grad-verde-azul);
    color: var(--ink);
    transform: translateY(-2px);
}

.aes-nav:disabled[b-s4wr29kc7b] {
    opacity: 0.35;
    cursor: default;
}

:global(.rz-dark) .action-execution-story .aes-nav[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

/* ====== Chips ====== */
.aes-chips[b-s4wr29kc7b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.aes-chip[b-s4wr29kc7b] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: var(--aes-chip-bg);
    border: 1px solid var(--aes-chip-border);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--aes-text);
}

.aes-chip :global(.rzi)[b-s4wr29kc7b] {
    font-size: 18px;
    color: var(--teal-medio);
}

:global(.rz-dark) .action-execution-story .aes-chip :global(.rzi)[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

.aes-chip-grid[b-s4wr29kc7b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
}

.aes-chip-card[b-s4wr29kc7b] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: var(--aes-chip-bg);
    border: 1px solid var(--aes-chip-border);
    font-family: var(--font-titulo);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--aes-text);
}

.aes-chip-card :global(.rzi)[b-s4wr29kc7b] {
    font-size: 26px;
    color: var(--teal);
}

:global(.rz-dark) .action-execution-story .aes-chip-card :global(.rzi)[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

/* ====== Body list ====== */
.aes-body-list[b-s4wr29kc7b] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.aes-body-list li[b-s4wr29kc7b] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--aes-text);
}

.aes-li-arrow[b-s4wr29kc7b] {
    width: 18px;
    height: 20px;
    margin-top: 0.18rem;
    color: var(--teal);
}

:global(.rz-dark) .action-execution-story .aes-li-arrow[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

/* ====== Cover flow ====== */
.aes-cover-flow[b-s4wr29kc7b] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.4rem;
}

.aes-flow-node[b-s4wr29kc7b] {
    padding: 0.7rem 1.3rem;
    border-radius: 16px;
    background: var(--grad-verde-azul);
    color: var(--ink);
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.1rem;
}

.aes-flow-node-soft[b-s4wr29kc7b] {
    background: var(--aes-chip-bg);
    border: 1px solid var(--aes-chip-border);
    color: var(--aes-text);
}

.aes-flow-arrow[b-s4wr29kc7b] {
    width: 26px;
    height: 28px;
    color: var(--teal);
}

:global(.rz-dark) .action-execution-story .aes-flow-arrow[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

/* ====== Code block ====== */
.aes-code-wrap[b-s4wr29kc7b] {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--aes-chip-border);
    box-shadow: var(--aes-shadow);
    max-width: 760px;
}

.aes-code-bar[b-s4wr29kc7b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--teal-medio);
}

.aes-code-snmp .aes-code-bar[b-s4wr29kc7b] { background: var(--teal); }
.aes-code-http .aes-code-bar[b-s4wr29kc7b] { background: var(--azul); }

.aes-code-dot[b-s4wr29kc7b] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}

.aes-code-title[b-s4wr29kc7b] {
    margin-left: 0.5rem;
    font-family: var(--font-titulo);
    font-weight: 600;
    font-size: 0.85rem;
    color: #FFFFFF;
}

.aes-code[b-s4wr29kc7b] {
    margin: 0;
    padding: 1.1rem 1.3rem;
    background: var(--aes-code-bg);
    color: #EAFBF6;
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: clamp(0.85rem, 1.3vw, 1rem);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

.aes-code code[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

.aes-code-http .aes-code code[b-s4wr29kc7b] { color: var(--azul-claro); }
.aes-code-snmp .aes-code code[b-s4wr29kc7b] { color: var(--verde-limao-claro); }

/* ====== Pipeline ====== */
.aes-pipeline[b-s4wr29kc7b] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.aes-pipe-card[b-s4wr29kc7b] {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.1rem 1rem;
    border-radius: 18px;
    background: var(--aes-chip-bg);
    border: 1px solid var(--aes-chip-border);
    text-align: left;
}

.aes-pipe-card :global(.rzi)[b-s4wr29kc7b] {
    font-size: 28px;
    color: var(--teal);
}

:global(.rz-dark) .action-execution-story .aes-pipe-card :global(.rzi)[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

.aes-pipe-action[b-s4wr29kc7b] { border-left: 4px solid var(--verde-algar); }
.aes-pipe-service[b-s4wr29kc7b] { border-left: 4px solid var(--teal); }
.aes-pipe-strategy[b-s4wr29kc7b] { border-left: 4px solid var(--azul); }
.aes-pipe-result[b-s4wr29kc7b] { border-left: 4px solid var(--amarelo-claro); }

.aes-pipe-label[b-s4wr29kc7b] {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--aes-text);
}

.aes-pipe-detail[b-s4wr29kc7b] {
    font-size: 0.82rem;
    color: var(--aes-text-soft);
}

.aes-pipe-arrow[b-s4wr29kc7b] {
    flex: 0 0 auto;
    align-self: center;
    width: 26px;
    height: 28px;
    color: var(--teal);
}

:global(.rz-dark) .action-execution-story .aes-pipe-arrow[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

/* ====== Extensibilidade ====== */
.aes-ext[b-s4wr29kc7b] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.aes-ext-core[b-s4wr29kc7b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.3rem 1.6rem;
    border-radius: 20px;
    background: var(--grad-verde-azul);
    color: var(--ink);
    font-family: var(--font-titulo);
    font-weight: 700;
    text-align: center;
}

.aes-ext-core :global(.rzi)[b-s4wr29kc7b] {
    font-size: 30px;
}

.aes-ext-arrow[b-s4wr29kc7b] {
    width: 30px;
    height: 32px;
    color: var(--teal);
}

:global(.rz-dark) .action-execution-story .aes-ext-arrow[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

.aes-ext-cloud[b-s4wr29kc7b] {
    flex: 1 1 320px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.aes-chip-ext[b-s4wr29kc7b] {
    background: var(--aes-card-bg);
}

/* ====== CTA ====== */
.aes-cta[b-s4wr29kc7b] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 0.5rem;
}

.action-execution-story .aes-cta-btn[b-s4wr29kc7b] {
    border-radius: 999px;
    font-family: var(--font-titulo);
    font-weight: 700;
}

.aes-cta-hint[b-s4wr29kc7b] {
    font-size: 0.86rem;
    color: var(--aes-text-soft);
}

/* ====== Footer ====== */
.aes-footer[b-s4wr29kc7b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0 0.4rem;
}

.aes-counter[b-s4wr29kc7b] {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--teal-medio);
}

:global(.rz-dark) .action-execution-story .aes-counter[b-s4wr29kc7b] {
    color: var(--teal-claro);
}

.aes-dots[b-s4wr29kc7b] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.aes-dot[b-s4wr29kc7b] {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--aes-chip-border);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.aes-dot-active[b-s4wr29kc7b] {
    width: 30px;
    background: var(--grad-verde-azul);
}

.aes-hint[b-s4wr29kc7b] {
    font-size: 0.8rem;
    color: var(--aes-text-soft);
}

.aes-demo-link[b-s4wr29kc7b] {
    border-radius: 999px !important;
}

@media (max-width: 720px) {
    .aes-nav[b-s4wr29kc7b] { display: none; }
    .aes-hint[b-s4wr29kc7b] { display: none; }
}
/* /Components/Pages/AnalispConfigServices.razor.rz.scp.css */
/* =============================================================================
   Configuração de Serviços Analisp — polish on-brand (padrão operacional)
   Tokens: analisp-brand-tokens.css (--brand-*). Theme-aware via --rz-*.
   Sem preto puro; Exo (titulos) + Montserrat (corpo). Sem seletores inertes.
   ============================================================================= */

.acs-page[b-9ozu5l2kq0] {
    font-family: var(--brand-font-body);
    color: var(--rz-text-color);
    max-width: 1440px;
    margin: 0 auto;
}

/* ------------------------------- Hero header ------------------------------- */
.acs-hero[b-9ozu5l2kq0] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--brand-radius-card);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 4%);
    border: 1px solid var(--brand-border-teal);
    box-shadow: var(--brand-shadow-md);
    overflow: hidden;
}

.acs-hero__glow[b-9ozu5l2kq0] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--brand-grad-hero);
    opacity: 0.85;
}

.acs-hero__brand[b-9ozu5l2kq0] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 280px;
}

.acs-hero__icon[b-9ozu5l2kq0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brand-grad-brand);
    color: #fff;
    box-shadow: var(--brand-shadow-sm);
}

.acs-hero__icon :global(.rzi)[b-9ozu5l2kq0],
.acs-hero__icon :global(.notranslate)[b-9ozu5l2kq0] {
    font-size: 26px;
}

.acs-hero__title[b-9ozu5l2kq0] {
    font-family: var(--brand-font-title);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.acs-hero__subtitle[b-9ozu5l2kq0] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--brand-muted);
}

.acs-hero__actions[b-9ozu5l2kq0] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

/* ------------------------------- Busca / forms ----------------------------- */
.acs-search :global(.rz-textbox)[b-9ozu5l2kq0],
.acs-page :global(.rz-form-field-content .rz-textbox)[b-9ozu5l2kq0],
.acs-page :global(.rz-form-field-content .rz-dropdown)[b-9ozu5l2kq0],
.acs-page :global(.rz-form-field-content .rz-numeric)[b-9ozu5l2kq0] {
    border-radius: var(--brand-radius-chip);
    border-color: var(--brand-border);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 2%);
}

.acs-search :global(.rz-textbox:focus)[b-9ozu5l2kq0],
.acs-search :global(.rz-textbox:focus-within)[b-9ozu5l2kq0],
.acs-page :global(.rz-form-field-content .rz-textbox:focus)[b-9ozu5l2kq0],
.acs-page :global(.rz-form-field-content .rz-textbox:focus-within)[b-9ozu5l2kq0],
.acs-page :global(.rz-form-field-content .rz-dropdown:focus)[b-9ozu5l2kq0],
.acs-page :global(.rz-form-field-content .rz-dropdown:focus-within)[b-9ozu5l2kq0] {
    border-color: var(--brand-border-focus);
    box-shadow: 0 0 0 2px var(--brand-focus-ring);
}

.acs-page :global(.rz-form-field-label)[b-9ozu5l2kq0] {
    font-family: var(--brand-font-title);
    font-size: 0.82rem;
    color: var(--brand-muted);
}

/* ------------------------------- DataGrids --------------------------------- */
.acs-page :global(.rz-datatable)[b-9ozu5l2kq0],
.acs-page :global(.rz-data-grid)[b-9ozu5l2kq0] {
    border-radius: var(--brand-radius-panel);
    border: 1px solid var(--brand-border);
    overflow: hidden;
    box-shadow: var(--brand-shadow-sm);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 2%);
}

.acs-page :global(.rz-datatable-thead)[b-9ozu5l2kq0],
.acs-page :global(.rz-grid-table thead)[b-9ozu5l2kq0] {
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 5%);
}

.acs-page :global(.rz-datatable-thead th)[b-9ozu5l2kq0],
.acs-page :global(.rz-grid-table thead th)[b-9ozu5l2kq0] {
    font-family: var(--brand-font-title);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--brand-muted);
    border-bottom: 1px solid var(--brand-divider);
}

.acs-page :global(.rz-datatable-data tr:hover)[b-9ozu5l2kq0],
.acs-page :global(.rz-grid-table tbody tr:hover)[b-9ozu5l2kq0] {
    background: var(--brand-hover);
}

.acs-page :global(.rz-datatable-row-expanded)[b-9ozu5l2kq0] {
    background: color-mix(in srgb, var(--brand-teal) 6%, var(--rz-base-background-color, #fff) 94%);
}

/* ------------------------------- Painel de serviços ------------------------ */
.acs-services-panel[b-9ozu5l2kq0] {
    padding: 1rem 1.15rem 1.15rem;
    margin-inline: 0.5rem;
    border-radius: var(--brand-radius-panel);
    border: 1px solid var(--brand-border-teal);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--brand-teal) 4%);
    box-shadow: var(--brand-shadow-sm);
}

.acs-services-panel__title[b-9ozu5l2kq0],
.acs-page :global(.rz-text-h5)[b-9ozu5l2kq0],
.acs-page :global(.rz-text-h3)[b-9ozu5l2kq0],
.acs-page :global(.rz-text-h4)[b-9ozu5l2kq0] {
    font-family: var(--brand-font-title);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.acs-services-panel :global(.rzi)[b-9ozu5l2kq0] {
    color: var(--brand-teal);
}

/* ------------------------------- Status badges ----------------------------- */
.acs-page :global(.rz-badge)[b-9ozu5l2kq0] {
    border-radius: var(--brand-radius-chip);
    font-family: var(--brand-font-title);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.55rem;
}

.acs-page :global(.rz-badge-success)[b-9ozu5l2kq0] {
    background: color-mix(in srgb, var(--rz-success, #28a745) 18%, var(--rz-base-background-color, #fff) 82%);
    color: color-mix(in srgb, var(--rz-success, #28a745) 85%, var(--rz-text-color, #1a2230) 15%);
    border: 1px solid color-mix(in srgb, var(--rz-success, #28a745) 35%, transparent 65%);
}

.acs-page :global(.rz-badge-danger)[b-9ozu5l2kq0] {
    background: color-mix(in srgb, var(--rz-danger, #dc3545) 16%, var(--rz-base-background-color, #fff) 84%);
    color: color-mix(in srgb, var(--rz-danger, #dc3545) 85%, var(--rz-text-color, #1a2230) 15%);
    border: 1px solid color-mix(in srgb, var(--rz-danger, #dc3545) 32%, transparent 68%);
}

.acs-page :global(.rz-badge-secondary)[b-9ozu5l2kq0] {
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
    color: var(--brand-muted);
    border: 1px solid var(--brand-border);
}

/* ------------------------------- Alerts / empty state ---------------------- */
.acs-page :global(.rz-alert)[b-9ozu5l2kq0] {
    border-radius: var(--brand-radius-chip);
    border: 1px solid var(--brand-border-teal);
    background: color-mix(in srgb, var(--brand-azul) 8%, var(--rz-base-background-color, #fff) 92%);
}

/* ------------------------------- Toolbar buttons --------------------------- */
.acs-page :global(.acs-hero__actions .rz-button)[b-9ozu5l2kq0],
.acs-services-panel :global(.rz-button)[b-9ozu5l2kq0] {
    border-radius: var(--brand-radius-chip);
}

@media (max-width: 768px) {
    .acs-hero[b-9ozu5l2kq0] {
        flex-direction: column;
        align-items: stretch;
    }

    .acs-hero__actions[b-9ozu5l2kq0] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}
/* /Components/Pages/AssertiveAlarms.razor.rz.scp.css */
/* =============================================================================
   Alarmes Assertivos — dashboard visual de caixas (CTO/PON/OLT)
   ----------------------------------------------------------------------------
   Design system: fallback Algar (skill analisp-design-system) — tokens locais
   abaixo. Theme-aware via --rz-* + onu-card-tokens.css. Sem preto puro;
   sombras e tinta em teal escuro (#0A645A). Exo (titulos) + Montserrat (corpo).
   ============================================================================= */

.assertive-alarms-page[b-xmprk58i99] {
    /* --- Aliases para a camada global analisp-brand-tokens.css (--brand-*) --- */
    --aa-ink: var(--brand-ink);
    --aa-ink-soft: var(--brand-ink-soft);
    --aa-teal: var(--brand-teal);
    --aa-teal-light: var(--brand-teal-light);
    --aa-verde: var(--brand-verde);
    --aa-azul: var(--brand-azul);
    --aa-azul-claro: var(--brand-azul-claro);
    --aa-amarelo: var(--brand-amarelo);
    --aa-laranja: var(--brand-laranja);
    --aa-surface-soft: var(--brand-surface-soft);
    --aa-grad-brand: var(--brand-grad-brand);
    --aa-grad-hero: var(--brand-grad-hero);
    --aa-grad-score: linear-gradient(90deg, var(--aa-azul-claro), var(--aa-azul));
    --aa-shadow-sm: var(--brand-shadow-sm);
    --aa-shadow-md: var(--brand-shadow-md);
    --aa-shadow-lg: var(--brand-shadow-lg);
    --aa-radius-card: var(--brand-radius-card);
    --aa-radius-chip: var(--brand-radius-chip);
    --aa-font-title: var(--brand-font-title);
    --aa-font-body: var(--brand-font-body);

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem 2rem;
    font-family: var(--aa-font-body);
    color: var(--rz-text-color);
}

/* ------------------------------- Hero header ------------------------------- */
.aa-hero[b-xmprk58i99] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--aa-radius-card);
    background: var(--onu-glass-bg-solid,
        color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 4%));
    border: 1px solid color-mix(in srgb, var(--aa-teal) 22%, var(--onu-glass-border, transparent) 78%);
    box-shadow: var(--aa-shadow-md);
    overflow: hidden;
    backdrop-filter: blur(var(--onu-glass-blur, 12px)) saturate(var(--onu-glass-saturation, 140%));
}

.aa-hero__glow[b-xmprk58i99] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--aa-grad-hero);
    opacity: 0.85;
}

.aa-hero__brand[b-xmprk58i99] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.aa-hero__glyph[b-xmprk58i99] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--aa-ink);
    background: var(--aa-grad-brand);
    box-shadow: var(--aa-shadow-sm);
    animation: aaPulseGlow-b-xmprk58i99 2.6s var(--onu-ease, ease) infinite;
}

.aa-hero__glyph[b-xmprk58i99]  .rzi,
.aa-hero__glyph[b-xmprk58i99]  i {
    font-size: 28px;
    color: var(--aa-ink);
}

.aa-hero__titles[b-xmprk58i99] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.aa-hero__title[b-xmprk58i99] {
    margin: 0;
    font-family: var(--aa-font-title);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--rz-text-color);
}

.aa-hero__subtitle[b-xmprk58i99] {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

.aa-hero__arrow[b-xmprk58i99] {
    width: 28px;
    height: 24px;
    margin-left: 0.25rem;
    color: color-mix(in srgb, var(--aa-teal) 70%, var(--rz-text-secondary-color) 30%);
    opacity: 0.75;
    flex-shrink: 0;
}

.aa-hero__summary[b-xmprk58i99] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.aa-chip[b-xmprk58i99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 0.5rem 0.85rem;
    border-radius: var(--aa-radius-chip);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 5%);
    border: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
    border-top-width: 3px;
    box-shadow: var(--aa-shadow-sm);
    transition: transform var(--onu-anim-medium, 200ms) var(--onu-ease, ease),
                box-shadow var(--onu-anim-medium, 200ms) var(--onu-ease, ease);
}

.aa-chip:hover[b-xmprk58i99] {
    transform: translateY(-2px);
    box-shadow: var(--aa-shadow-md);
}

.aa-chip__value[b-xmprk58i99] {
    font-family: var(--aa-font-title);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rz-text-color);
}

.aa-chip__label[b-xmprk58i99] {
    margin-top: 0.2rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
}

.aa-chip--total[b-xmprk58i99] { border-top-color: var(--aa-azul); }
.aa-chip--crit[b-xmprk58i99] { border-top-color: var(--aa-laranja); }
.aa-chip--warn[b-xmprk58i99] { border-top-color: var(--aa-amarelo); }
.aa-chip--info[b-xmprk58i99] { border-top-color: var(--aa-teal); }

.aa-chip--total .aa-chip__value[b-xmprk58i99] { color: color-mix(in srgb, var(--aa-azul) 75%, var(--rz-text-color) 25%); }
.aa-chip--crit .aa-chip__value[b-xmprk58i99] { color: color-mix(in srgb, var(--aa-laranja) 80%, var(--rz-text-color) 20%); }
.aa-chip--warn .aa-chip__value[b-xmprk58i99] { color: color-mix(in srgb, var(--aa-amarelo) 85%, var(--rz-text-color) 15%); }
.aa-chip--info .aa-chip__value[b-xmprk58i99] { color: color-mix(in srgb, var(--aa-teal) 80%, var(--rz-text-color) 20%); }

.aa-hero__controls[b-xmprk58i99] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.aa-conn[b-xmprk58i99] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--onu-radius-pill, 999px);
    font-size: 0.78rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--aa-teal) 10%, var(--rz-base-background-color, #fff) 90%);
    border: 1px solid color-mix(in srgb, var(--aa-teal) 25%, transparent);
    color: var(--rz-text-secondary-color);
}

.aa-conn__dot[b-xmprk58i99] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rz-base-500, #9e9e9e);
}

.aa-conn--connected .aa-conn__dot[b-xmprk58i99] {
    background: var(--aa-verde);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--aa-verde) 50%, transparent);
    animation: aaBlink-b-xmprk58i99 1.8s ease-in-out infinite;
}

.aa-conn--connecting .aa-conn__dot[b-xmprk58i99],
.aa-conn--reconnecting .aa-conn__dot[b-xmprk58i99] {
    background: var(--aa-amarelo);
    animation: aaBlink-b-xmprk58i99 1s ease-in-out infinite;
}

.aa-conn--disconnected .aa-conn__dot[b-xmprk58i99] {
    background: var(--aa-laranja);
}

/* ----------------------------- Grid header ------------------------------- */
.aa-grid-header[b-xmprk58i99] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0 0.15rem;
}

.aa-grid-header__label[b-xmprk58i99] {
    font-family: var(--aa-font-title);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.aa-grid-header__hint[b-xmprk58i99] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* --------------------------------- Grid ---------------------------------- */
.aa-grid[b-xmprk58i99] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.15rem;
}

/* --------------------------------- Card ---------------------------------- */
.aa-card[b-xmprk58i99] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.15rem 0.95rem;
    overflow: hidden;
    border-radius: var(--aa-radius-card);
    background: var(--onu-glass-bg-solid,
        color-mix(in srgb, var(--rz-card-background-color, #fff), var(--rz-text-color, #1a2230) 4%));
    border: 1px solid var(--onu-glass-border,
        color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%));
    box-shadow: var(--aa-shadow-sm);
    backdrop-filter: blur(var(--onu-glass-blur, 10px)) saturate(120%);
    transition: transform var(--onu-anim-medium, 200ms) var(--onu-ease, ease),
                box-shadow var(--onu-anim-medium, 200ms) var(--onu-ease, ease),
                border-color var(--onu-anim-medium, 200ms) var(--onu-ease, ease);
    animation: aaFadeUp-b-xmprk58i99 400ms var(--onu-ease, ease) both;
}

.aa-grid .aa-card:nth-child(1)[b-xmprk58i99] { animation-delay: 0ms; }
.aa-grid .aa-card:nth-child(2)[b-xmprk58i99] { animation-delay: 40ms; }
.aa-grid .aa-card:nth-child(3)[b-xmprk58i99] { animation-delay: 80ms; }
.aa-grid .aa-card:nth-child(4)[b-xmprk58i99] { animation-delay: 120ms; }
.aa-grid .aa-card:nth-child(n+5)[b-xmprk58i99] { animation-delay: 160ms; }

.aa-card:hover[b-xmprk58i99] {
    transform: translateY(-5px);
    box-shadow: var(--aa-shadow-lg);
}

.aa-card__accent[b-xmprk58i99] {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    border-radius: var(--aa-radius-card) 0 0 var(--aa-radius-card);
    background: var(--aa-teal);
}

.aa-card--crit[b-xmprk58i99] {
    border-color: color-mix(in srgb, var(--aa-laranja) 35%, var(--onu-glass-border, transparent) 65%);
}
.aa-card--crit .aa-card__accent[b-xmprk58i99] { background: var(--aa-laranja); }
.aa-card--crit[b-xmprk58i99]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(130% 70% at 50% -10%,
        color-mix(in srgb, var(--aa-laranja) 14%, transparent), transparent 65%);
    animation: aaCardPulse-b-xmprk58i99 2.4s ease-in-out infinite;
}

.aa-card--warn[b-xmprk58i99] {
    border-color: color-mix(in srgb, var(--aa-amarelo) 30%, var(--onu-glass-border, transparent) 70%);
}
.aa-card--warn .aa-card__accent[b-xmprk58i99] { background: var(--aa-amarelo); }
.aa-card--warn[b-xmprk58i99]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(130% 70% at 50% -10%,
        color-mix(in srgb, var(--aa-amarelo) 10%, transparent), transparent 65%);
}

.aa-card--info .aa-card__accent[b-xmprk58i99] { background: var(--aa-azul); }

.aa-card__head[b-xmprk58i99] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.aa-card__level[b-xmprk58i99] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--onu-radius-pill, 999px);
    font-family: var(--aa-font-title);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--rz-text-color);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
}

.aa-card__level[b-xmprk58i99]  .rzi,
.aa-card__level[b-xmprk58i99]  i {
    font-size: 15px;
}

.aa-card__level--olt[b-xmprk58i99] {
    color: color-mix(in srgb, var(--aa-laranja) 75%, var(--rz-text-color) 25%);
    background: color-mix(in srgb, var(--aa-laranja) 14%, transparent);
}
.aa-card__level--pon[b-xmprk58i99] {
    color: color-mix(in srgb, var(--aa-amarelo) 80%, var(--rz-text-color) 20%);
    background: color-mix(in srgb, var(--aa-amarelo) 16%, transparent);
}
.aa-card__level--cto[b-xmprk58i99] {
    color: color-mix(in srgb, var(--aa-azul) 75%, var(--rz-text-color) 25%);
    background: color-mix(in srgb, var(--aa-azul) 14%, transparent);
}

.aa-card__time[b-xmprk58i99] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

.aa-card__title[b-xmprk58i99] {
    font-family: var(--aa-font-title);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-card__olt[b-xmprk58i99] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.76rem;
    color: var(--rz-text-secondary-color);
}

.aa-card__olt[b-xmprk58i99]  .rzi,
.aa-card__olt[b-xmprk58i99]  i {
    font-size: 14px;
    color: color-mix(in srgb, var(--aa-teal) 60%, var(--rz-text-secondary-color) 40%);
}

/* --------------------------------- Score --------------------------------- */
.aa-card__score[b-xmprk58i99] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.aa-score__main[b-xmprk58i99] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.aa-score__value[b-xmprk58i99] {
    font-family: var(--aa-font-title);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--rz-text-color);
}

.aa-card--crit .aa-score__value[b-xmprk58i99] {
    color: color-mix(in srgb, var(--aa-laranja) 85%, var(--rz-text-color) 15%);
}
.aa-card--warn .aa-score__value[b-xmprk58i99] {
    color: color-mix(in srgb, var(--aa-amarelo) 90%, var(--rz-text-color) 10%);
}

.aa-score__threshold[b-xmprk58i99] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
}

.aa-score__mult[b-xmprk58i99] {
    padding: 0.18rem 0.5rem;
    border-radius: var(--onu-radius-chip, 6px);
    font-size: 0.68rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--aa-laranja) 85%, var(--rz-text-color) 15%);
    background: color-mix(in srgb, var(--aa-laranja) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--aa-laranja) 22%, transparent);
}

/* --------------------------------- Barras -------------------------------- */
.aa-bar[b-xmprk58i99] {
    position: relative;
    height: 9px;
    border-radius: 999px;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%);
    overflow: hidden;
}

.aa-bar__fill[b-xmprk58i99] {
    height: 100%;
    border-radius: 999px;
    transition: width var(--onu-anim-medium, 200ms) var(--onu-ease, ease);
}

.aa-bar--score .aa-bar__fill[b-xmprk58i99] {
    background: var(--aa-grad-score);
}

.aa-bar--offline[b-xmprk58i99] {
    overflow: visible;
}

.aa-bar--offline .aa-bar__fill[b-xmprk58i99] {
    background: linear-gradient(90deg, var(--aa-azul), var(--aa-laranja));
}

.aa-bar__marker[b-xmprk58i99] {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 13px;
    border-radius: 1px;
    background: var(--aa-ink);
    opacity: 0.6;
}

/* -------------------------------- Métricas ------------------------------- */
.aa-card__metrics[b-xmprk58i99] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 0.15rem;
}

.aa-metric[b-xmprk58i99] {
    display: flex;
    flex-direction: column;
}

.aa-metric--right[b-xmprk58i99] {
    align-items: flex-end;
}

.aa-metric__value[b-xmprk58i99] {
    font-family: var(--aa-font-title);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.aa-metric__sep[b-xmprk58i99] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.aa-metric__label[b-xmprk58i99] {
    font-size: 0.67rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

/* --------------------------- Legenda de icones --------------------------- */
.aa-icon-legend[b-xmprk58i99] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--onu-radius-section, 10px);
    background: var(--aa-surface-soft);
    border: 1px solid color-mix(in srgb, var(--aa-teal) 18%, transparent);
    box-shadow: var(--aa-shadow-sm);
}

.aa-icon-legend__title[b-xmprk58i99] {
    font-family: var(--aa-font-title);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--aa-ink);
}

.aa-icon-legend__hint[b-xmprk58i99] {
    font-size: 0.74rem;
    color: var(--rz-text-secondary-color);
}

.aa-icon-legend__items[b-xmprk58i99] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.1rem;
    margin-left: auto;
}

.aa-icon-legend__item[b-xmprk58i99] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.aa-icon-legend__thumb[b-xmprk58i99] {
    flex-shrink: 0;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(10, 100, 90, 0.18));
}

.aa-icon-legend__label[b-xmprk58i99] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.aa-icon-legend__desc[b-xmprk58i99] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
}

/* ----------------------------- Mini-mapa ONUs ---------------------------- */
.aa-minimap[b-xmprk58i99] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    margin-top: 0.3rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--onu-radius-section, 10px);
    background: color-mix(in srgb, var(--aa-teal) 6%, var(--rz-base-background-color, #fff) 94%);
    border: 1px solid color-mix(in srgb, var(--aa-teal) 12%, transparent);
}

.aa-onu-icon[b-xmprk58i99] {
    display: block;
    flex-shrink: 0;
    animation: aaIconPop-b-xmprk58i99 300ms var(--onu-ease, ease) both;
    filter: drop-shadow(0 1px 2px rgba(10, 100, 90, 0.15));
}

.aa-onu-icon--off[b-xmprk58i99] {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--aa-laranja) 55%, transparent));
}

.aa-onu-icon__overflow[b-xmprk58i99] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
    margin-left: 0.2rem;
}

/* --------------------------------- Footer -------------------------------- */
.aa-card__foot[b-xmprk58i99] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.2rem;
    padding-top: 0.15rem;
    border-top: 1px solid color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%);
}

.aa-card__foot[b-xmprk58i99]  .rz-button {
    border-radius: var(--onu-radius-pill, 999px) !important;
    font-weight: 600;
    font-size: 0.75rem;
}

/* ------------------------------- Empty state ----------------------------- */
.aa-empty[b-xmprk58i99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 4.5rem 1.5rem;
    border-radius: var(--aa-radius-card);
    background: var(--aa-surface-soft);
    border: 1px dashed color-mix(in srgb, var(--aa-teal) 35%, transparent);
    box-shadow: var(--aa-shadow-sm);
}

.aa-empty__ring[b-xmprk58i99] {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--aa-grad-brand);
    box-shadow: var(--aa-shadow-md);
    margin-bottom: 0.35rem;
}

.aa-empty__icon[b-xmprk58i99] {
    font-size: 36px;
    color: var(--aa-ink);
}

.aa-empty__title[b-xmprk58i99] {
    font-family: var(--aa-font-title);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.aa-empty__hint[b-xmprk58i99] {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

/* ------------------------------- Breakdown ------------------------------- */
.aa-breakdown[b-xmprk58i99] {
    border-radius: var(--aa-radius-card);
    padding: 1rem 1.15rem;
    background: var(--onu-glass-bg-solid,
        color-mix(in srgb, var(--rz-card-background-color, #fff), var(--rz-text-color, #1a2230) 4%));
    border: 1px solid color-mix(in srgb, var(--aa-teal) 18%, var(--onu-glass-border, transparent) 82%);
    border-left: 5px solid var(--aa-teal);
    box-shadow: var(--aa-shadow-md);
    animation: aaFadeUp-b-xmprk58i99 320ms var(--onu-ease, ease) both;
    backdrop-filter: blur(var(--onu-glass-blur, 10px));
}

.aa-breakdown--crit[b-xmprk58i99] { border-left-color: var(--aa-laranja); }
.aa-breakdown--warn[b-xmprk58i99] { border-left-color: var(--aa-amarelo); }

.aa-breakdown__head[b-xmprk58i99] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.aa-breakdown__title[b-xmprk58i99] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--aa-font-title);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.aa-breakdown__score[b-xmprk58i99] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.aa-breakdown__body[b-xmprk58i99] {
    margin: 0;
    padding: 0.85rem;
    border-radius: var(--onu-radius-section, 10px);
    background: color-mix(in srgb, var(--aa-teal) 5%, var(--rz-base-background-color, #fff) 95%);
    border: 1px solid color-mix(in srgb, var(--aa-teal) 10%, transparent);
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--rz-text-color);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 360px;
    overflow: auto;
}

/* ------------------------------- Animações ------------------------------- */
@keyframes aaFadeUp-b-xmprk58i99 {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes aaIconPop-b-xmprk58i99 {
    from { opacity: 0; transform: scale(0.35); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes aaCardPulse-b-xmprk58i99 {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes aaPulseGlow-b-xmprk58i99 {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aa-verde) 40%, transparent); }
    50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--aa-verde) 0%, transparent); }
}

@keyframes aaBlink-b-xmprk58i99 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (max-width: 640px) {
    .assertive-alarms-page[b-xmprk58i99] { padding: 0.85rem 1rem 1.5rem; }
    .aa-hero[b-xmprk58i99] { padding: 1rem 1.1rem; }
    .aa-hero__arrow[b-xmprk58i99] { display: none; }
    .aa-grid[b-xmprk58i99] { grid-template-columns: 1fr; }
    .aa-hero__summary[b-xmprk58i99] { width: 100%; justify-content: center; }
    .aa-hero__controls[b-xmprk58i99] { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .aa-card[b-xmprk58i99],
    .aa-breakdown[b-xmprk58i99],
    .aa-onu-icon[b-xmprk58i99] { animation: none !important; }
    .aa-card--crit[b-xmprk58i99]::before,
    .aa-hero__glyph[b-xmprk58i99],
    .aa-conn__dot[b-xmprk58i99] { animation: none !important; }
    .aa-card:hover[b-xmprk58i99],
    .aa-chip:hover[b-xmprk58i99] { transform: none; }
}
/* /Components/Pages/AssertiveAlarmSettings.razor.rz.scp.css */
/* =============================================================================
   Configuração de Alarmes Assertivos — polish on-brand (irmao de AssertiveAlarms)
   Tokens: analisp-brand-tokens.css (--brand-*). Theme-aware via --rz-*.
   Sem preto puro; Exo (titulos) + Montserrat (corpo).
   ============================================================================= */

.aas-page[b-l1514edalt] {
    font-family: var(--brand-font-body);
    color: var(--rz-text-color);
    max-width: 1440px;
    margin: 0 auto;
}

/* ------------------------------- Hero header ------------------------------- */
.aas-hero[b-l1514edalt] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--brand-radius-card);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 4%);
    border: 1px solid var(--brand-border-teal);
    box-shadow: var(--brand-shadow-md);
    overflow: hidden;
}

.aas-hero__glow[b-l1514edalt] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--brand-grad-hero);
    opacity: 0.85;
}

.aas-hero__brand[b-l1514edalt] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.aas-hero__icon[b-l1514edalt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brand-grad-brand);
    color: #fff;
    box-shadow: var(--brand-shadow-sm);
}

.aas-hero__icon :global(.rzi)[b-l1514edalt],
.aas-hero__icon :global(.notranslate)[b-l1514edalt] {
    font-size: 26px;
}

.aas-hero__title[b-l1514edalt] {
    font-family: var(--brand-font-title);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.aas-hero__subtitle[b-l1514edalt] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--brand-muted);
}

/* ------------------------------- Cards ------------------------------------- */
.aas-page :global(.rz-card)[b-l1514edalt] {
    border-radius: var(--brand-radius-panel);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
}

.aas-page :global(.rz-card .rzi)[b-l1514edalt],
.aas-page :global(.rz-card .rz-text-h6)[b-l1514edalt] {
    color: var(--rz-text-color);
}

.aas-page :global(.rz-card > .rz-row .rzi)[b-l1514edalt] {
    color: var(--brand-teal);
}

.aas-page :global(.rz-text-h4)[b-l1514edalt],
.aas-page :global(.rz-text-h6)[b-l1514edalt],
.aas-page :global(.rz-text-subtitle1)[b-l1514edalt] {
    font-family: var(--brand-font-title);
}

/* ------------------------------- Forms ------------------------------------- */
.aas-page :global(.rz-form-field-content .rz-textbox)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-dropdown)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-numeric)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-textarea)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-password)[b-l1514edalt] {
    border-radius: var(--brand-radius-chip);
    border-color: var(--brand-border);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 2%);
}

.aas-page :global(.rz-form-field-content .rz-textbox:focus)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-textbox:focus-within)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-dropdown:focus)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-dropdown:focus-within)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-numeric:focus)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-numeric:focus-within)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-textarea:focus)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-textarea:focus-within)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-password:focus)[b-l1514edalt],
.aas-page :global(.rz-form-field-content .rz-password:focus-within)[b-l1514edalt] {
    border-color: var(--brand-border-focus);
    box-shadow: 0 0 0 2px var(--brand-focus-ring);
}

.aas-page :global(.rz-form-field-label)[b-l1514edalt] {
    font-family: var(--brand-font-title);
    font-size: 0.82rem;
    color: var(--brand-muted);
}

.aas-form-panel[b-l1514edalt] {
    padding: 1rem 1.15rem 1.15rem;
    border-radius: var(--brand-radius-panel);
    border: 1px solid var(--brand-border-teal) !important;
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--brand-teal) 4%);
    box-shadow: var(--brand-shadow-sm);
}

.aas-form-panel :global(.rz-text-subtitle1)[b-l1514edalt] {
    color: var(--brand-ink);
}

/* ------------------------------- DataGrids --------------------------------- */
.aas-page :global(.rz-datatable)[b-l1514edalt],
.aas-page :global(.rz-data-grid)[b-l1514edalt] {
    border-radius: var(--brand-radius-panel);
    border: 1px solid var(--brand-border);
    overflow: hidden;
    box-shadow: var(--brand-shadow-sm);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 2%);
}

.aas-page :global(.rz-datatable-thead)[b-l1514edalt],
.aas-page :global(.rz-grid-table thead)[b-l1514edalt] {
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 5%);
}

.aas-page :global(.rz-datatable-thead th)[b-l1514edalt],
.aas-page :global(.rz-grid-table thead th)[b-l1514edalt] {
    font-family: var(--brand-font-title);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--brand-muted);
    border-bottom: 1px solid var(--brand-divider);
}

.aas-page :global(.rz-datatable-data tr:hover)[b-l1514edalt],
.aas-page :global(.rz-grid-table tbody tr:hover)[b-l1514edalt] {
    background: var(--brand-hover);
}

/* ------------------------------- Badges -------------------------------------- */
.aas-page :global(.rz-badge)[b-l1514edalt] {
    border-radius: var(--brand-radius-chip);
    font-family: var(--brand-font-title);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.55rem;
}

.aas-page :global(.rz-badge-success)[b-l1514edalt] {
    background: color-mix(in srgb, var(--rz-success, #28a745) 18%, var(--rz-base-background-color, #fff) 82%);
    color: color-mix(in srgb, var(--rz-success, #28a745) 85%, var(--rz-text-color, #1a2230) 15%);
    border: 1px solid color-mix(in srgb, var(--rz-success, #28a745) 35%, transparent 65%);
}

.aas-page :global(.rz-badge-danger)[b-l1514edalt] {
    background: color-mix(in srgb, var(--rz-danger, #dc3545) 16%, var(--rz-base-background-color, #fff) 84%);
    color: color-mix(in srgb, var(--rz-danger, #dc3545) 85%, var(--rz-text-color, #1a2230) 15%);
    border: 1px solid color-mix(in srgb, var(--rz-danger, #dc3545) 32%, transparent 68%);
}

.aas-page :global(.rz-badge-secondary)[b-l1514edalt] {
    background: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%);
    color: var(--brand-muted);
    border: 1px solid var(--brand-border);
}

/* ------------------------------- Alerts / empty state ---------------------- */
.aas-page :global(.rz-alert)[b-l1514edalt] {
    border-radius: var(--brand-radius-chip);
    border: 1px solid var(--brand-border-teal);
    background: color-mix(in srgb, var(--brand-azul) 8%, var(--rz-base-background-color, #fff) 92%);
}

/* ------------------------------- Toolbar buttons --------------------------- */
.aas-page :global(.rz-card > .rz-row .rz-button)[b-l1514edalt] {
    border-radius: var(--brand-radius-chip);
}

@media (max-width: 768px) {
    .aas-hero[b-l1514edalt] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/CpeOperations.razor.rz.scp.css */
/* =============================================================================
   CPE Operations — Firmware upgrade dashboard (presentation polish)
   Design tokens: --brand-* (analisp-brand-tokens.css) + --rz-* theme parity
   Fonts: Exo/Montserrat loaded globally via App.razor
   ============================================================================= */

.cpe-ops-page[b-wpseaa6zo5] {
    /* Versao ativa: fg/borda/fundo derivam de --brand-* + --rz-* (paridade toggle) */
    --cpe-pill-active-fg: color-mix(in srgb, var(--brand-teal) 42%, var(--rz-text-color) 58%);
    --cpe-pill-active-border: color-mix(in srgb, transparent, var(--brand-verde) 70%);
    --cpe-pill-active-bg: linear-gradient(135deg,
        color-mix(in srgb, transparent, var(--brand-verde) 38%),
        color-mix(in srgb, transparent, var(--brand-azul-claro) 24%));

    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    padding: 1.25rem 1.5rem 2rem;
    font-family: var(--brand-font-body);
    max-width: 1440px;
    margin: 0 auto;
}

/* ------------------------------- Hero ------------------------------------ */
.cpe-hero[b-wpseaa6zo5] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    border-radius: calc(var(--onu-card-radius-modern, var(--brand-radius-panel)) + 4px);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, transparent, var(--brand-verde) 14%),
            color-mix(in srgb, transparent, var(--brand-azul-claro) 8%)),
        color-mix(in srgb, transparent, var(--rz-text-color, #0A645A) 3%);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-md);
}

.cpe-hero[b-wpseaa6zo5]::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -8%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, transparent, var(--brand-verde) 22%) 0%, transparent 70%);
    pointer-events: none;
    animation: cpeHeroGlow-b-wpseaa6zo5 6s var(--brand-ease) infinite alternate;
}

.cpe-hero[b-wpseaa6zo5]::after {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 10%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, transparent, var(--brand-azul) 18%) 0%, transparent 70%);
    pointer-events: none;
    animation: cpeHeroGlow-b-wpseaa6zo5 8s var(--brand-ease) infinite alternate-reverse;
}

@keyframes cpeHeroGlow-b-wpseaa6zo5 {
    from { opacity: 0.5; transform: scale(0.95); }
    to   { opacity: 1;   transform: scale(1.05); }
}

.cpe-hero__brand[b-wpseaa6zo5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.cpe-hero__glyph[b-wpseaa6zo5] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    color: var(--brand-ink);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-verde) 85%, white),
        color-mix(in srgb, var(--brand-azul-claro) 70%, white));
    box-shadow: 0 4px 16px rgba(0, 235, 176, 0.35);
    transition: transform 0.3s var(--brand-ease), box-shadow 0.3s var(--brand-ease);
}

.cpe-hero__glyph:hover[b-wpseaa6zo5] {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 235, 176, 0.45);
}

.cpe-hero__glyph[b-wpseaa6zo5]  .rzi,
.cpe-hero__glyph[b-wpseaa6zo5]  i {
    font-size: 30px;
}

.cpe-hero__titles[b-wpseaa6zo5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cpe-hero__title[b-wpseaa6zo5] {
    margin: 0;
    font-family: var(--brand-font-title);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--rz-text-color);
    letter-spacing: -0.02em;
}

.cpe-hero__subtitle[b-wpseaa6zo5] {
    font-size: 0.88rem;
    color: var(--rz-text-secondary-color);
    max-width: 420px;
    line-height: 1.45;
}

.cpe-hero__badges[b-wpseaa6zo5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.cpe-hero__mock[b-wpseaa6zo5] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-ink) 55%, var(--rz-text-color) 45%);
    background: color-mix(in srgb, transparent, var(--brand-amarelo) 55%);
    border: 1px solid color-mix(in srgb, transparent, var(--brand-amarelo) 70%);
}

.cpe-hero__stats[b-wpseaa6zo5] {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cpe-stat-chip[b-wpseaa6zo5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #0A645A) 6%);
    border: 1px solid var(--brand-border);
    border-top: 3px solid var(--brand-teal);
    transition: transform 0.25s var(--brand-ease), box-shadow 0.25s var(--brand-ease);
}

.cpe-stat-chip:hover[b-wpseaa6zo5] {
    transform: translateY(-3px);
    box-shadow: var(--brand-shadow-lg);
}

.cpe-stat-chip--success[b-wpseaa6zo5] { border-top-color: var(--rz-success, #28a745); }
.cpe-stat-chip--danger[b-wpseaa6zo5]  { border-top-color: var(--rz-danger, #dc3545); }
.cpe-stat-chip--info[b-wpseaa6zo5]    { border-top-color: var(--brand-azul); }
.cpe-stat-chip--warn[b-wpseaa6zo5]    { border-top-color: var(--brand-amarelo); }

.cpe-stat-chip__value[b-wpseaa6zo5] {
    font-family: var(--brand-font-title);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rz-text-color);
}

.cpe-stat-chip__label[b-wpseaa6zo5] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-secondary-color);
    margin-top: 0.2rem;
}

/* ------------------------------- Steps ----------------------------------- */
.cpe-steps[b-wpseaa6zo5] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0.15rem;
    border-radius: var(--onu-card-radius-modern, var(--brand-radius-panel));
    background: var(--brand-surface-faint);
    border: 1px solid var(--brand-border);
}

.cpe-step[b-wpseaa6zo5] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-radius: calc(var(--onu-card-radius-modern, var(--brand-radius-panel)) - 4px);
    transition: background 0.3s var(--brand-ease), transform 0.3s var(--brand-ease);
}

.cpe-step:not(:last-child)[b-wpseaa6zo5]::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: var(--brand-border);
}

.cpe-step[b-wpseaa6zo5] {
    position: relative;
}

.cpe-step--active[b-wpseaa6zo5] {
    background: linear-gradient(135deg,
        color-mix(in srgb, transparent, var(--brand-verde) 16%),
        color-mix(in srgb, transparent, var(--brand-azul) 8%));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, transparent, var(--brand-verde) 25%);
}

.cpe-step--done .cpe-step__num[b-wpseaa6zo5] {
    background: var(--rz-success, #28a745);
    color: white;
}

.cpe-step__num[b-wpseaa6zo5] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--brand-font-title);
    font-size: 0.8rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--brand-teal) 50%, var(--rz-text-color) 50%);
    background: color-mix(in srgb, transparent, var(--brand-teal) 35%);
    transition: background 0.3s var(--brand-ease);
}

.cpe-step--active .cpe-step__num[b-wpseaa6zo5] {
    color: var(--brand-ink);
    background: linear-gradient(135deg, var(--brand-verde), var(--brand-azul-claro));
    box-shadow: 0 2px 8px rgba(0, 235, 176, 0.4);
}

.cpe-step__text[b-wpseaa6zo5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cpe-step__title[b-wpseaa6zo5] {
    font-family: var(--brand-font-title);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.cpe-step__hint[b-wpseaa6zo5] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------- Cards ----------------------------------- */
.cpe-panel[b-wpseaa6zo5] {
    height: 100%;
    border-radius: var(--onu-card-radius-modern, var(--brand-radius-panel)) !important;
    border: 1px solid var(--brand-border) !important;
    box-shadow: var(--brand-shadow-md) !important;
    transition: box-shadow 0.3s var(--brand-ease), transform 0.3s var(--brand-ease);
    overflow: hidden;
}

.cpe-panel:hover[b-wpseaa6zo5] {
    box-shadow: var(--brand-shadow-lg) !important;
}

.cpe-panel--firmware[b-wpseaa6zo5] {
    border-left: 4px solid var(--brand-verde) !important;
}

.cpe-panel--reports[b-wpseaa6zo5] {
    border-left: 4px solid var(--brand-azul) !important;
}

.cpe-panel__head[b-wpseaa6zo5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cpe-panel__head-icon[b-wpseaa6zo5] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
}

.cpe-panel__head-icon--fw[b-wpseaa6zo5] {
    color: color-mix(in srgb, var(--brand-teal) 55%, var(--rz-text-color) 45%);
    background: color-mix(in srgb, transparent, var(--brand-verde) 28%);
}

.cpe-panel__head-icon--report[b-wpseaa6zo5] {
    color: color-mix(in srgb, var(--brand-azul) 55%, var(--rz-text-color) 45%);
    background: color-mix(in srgb, transparent, var(--brand-azul) 28%);
}

.cpe-panel__head-icon[b-wpseaa6zo5]  .rzi,
.cpe-panel__head-icon[b-wpseaa6zo5]  i {
    font-size: 22px;
}

.cpe-panel__title[b-wpseaa6zo5] {
    margin: 0;
    font-family: var(--brand-font-title);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.cpe-panel__desc[b-wpseaa6zo5] {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.4;
}

.cpe-panel__desc code[b-wpseaa6zo5] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.78rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--brand-teal) 14%, var(--rz-base-background-color, #fff) 86%);
    border: 1px solid color-mix(in srgb, var(--brand-teal) 22%, transparent);
    color: color-mix(in srgb, var(--brand-teal) 55%, var(--rz-text-color) 45%);
    font-weight: 600;
}

/* ------------------------------- Input area ------------------------------ */
.cpe-device-input-wrap[b-wpseaa6zo5] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--brand-border);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #0A645A) 3%);
    transition: border-color 0.25s var(--brand-ease), box-shadow 0.25s var(--brand-ease);
}

.cpe-device-input-wrap:focus-within[b-wpseaa6zo5] {
    border-color: color-mix(in srgb, transparent, var(--brand-verde) 60%);
    box-shadow: 0 0 0 3px color-mix(in srgb, transparent, var(--brand-verde) 18%);
}

.cpe-device-input-wrap[b-wpseaa6zo5]  textarea {
    font-family: "Cascadia Code", "Consolas", monospace !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cpe-device-input-label[b-wpseaa6zo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    border-bottom: 1px solid var(--brand-border);
    background: color-mix(in srgb, transparent, var(--rz-text-color, #0A645A) 4%);
}

.cpe-device-count[b-wpseaa6zo5] {
    font-family: var(--brand-font-title);
    color: var(--brand-teal);
}

/* ------------------------------- Version pills --------------------------- */
.cpe-version-row[b-wpseaa6zo5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1rem;
}

.cpe-version-pills[b-wpseaa6zo5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cpe-version-pill[b-wpseaa6zo5] {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--brand-font-title);
    cursor: pointer;
    border: 1px solid var(--brand-border);
    background: transparent;
    color: var(--rz-text-secondary-color);
    transition: all 0.25s var(--brand-ease);
}

.cpe-version-pill:hover[b-wpseaa6zo5] {
    border-color: color-mix(in srgb, transparent, var(--brand-verde) 50%);
    color: var(--rz-text-color);
    transform: translateY(-1px);
}

.cpe-version-pill--active[b-wpseaa6zo5] {
    color: var(--cpe-pill-active-fg);
    border-color: var(--cpe-pill-active-border);
    background: var(--cpe-pill-active-bg);
    box-shadow: 0 2px 8px color-mix(in srgb, transparent, var(--brand-verde) 35%);
}

.cpe-actions[b-wpseaa6zo5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cpe-actions[b-wpseaa6zo5]  .rz-button-primary,
.cpe-actions[b-wpseaa6zo5]  .rz-button-warning {
    font-family: var(--brand-font-title);
    font-weight: 600;
    border-radius: 10px !important;
    transition: transform 0.2s var(--brand-ease), box-shadow 0.2s var(--brand-ease) !important;
}

.cpe-actions[b-wpseaa6zo5]  .rz-button:hover:not(:disabled) {
    transform: translateY(-2px);
}

/* ------------------------------- Progress -------------------------------- */
.cpe-progress-section[b-wpseaa6zo5] {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #0A645A) 4%);
    border: 1px solid var(--brand-border);
}

.cpe-progress-header[b-wpseaa6zo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.cpe-progress-label[b-wpseaa6zo5] {
    font-family: var(--brand-font-title);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.cpe-progress-pct[b-wpseaa6zo5] {
    font-family: var(--brand-font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-teal);
}

.cpe-progress-track[b-wpseaa6zo5] {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, transparent, var(--rz-text-color, #0A645A) 8%);
}

.cpe-progress-fill[b-wpseaa6zo5] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-verde), var(--brand-azul));
    transition: width 0.6s var(--brand-ease);
    position: relative;
}

.cpe-progress-fill--busy[b-wpseaa6zo5] {
    animation: cpeProgressPulse-b-wpseaa6zo5 1.4s var(--brand-ease) infinite;
}

.cpe-progress-fill--busy[b-wpseaa6zo5]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: cpeProgressShimmer-b-wpseaa6zo5 1.2s linear infinite;
}

@keyframes cpeProgressPulse-b-wpseaa6zo5 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.75; }
}

@keyframes cpeProgressShimmer-b-wpseaa6zo5 {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ------------------------------- Results --------------------------------- */
.cpe-results-header[b-wpseaa6zo5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--brand-border);
}

.cpe-results-grid[b-wpseaa6zo5] {
    margin-top: 0.75rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--brand-border);
}

.cpe-results-grid[b-wpseaa6zo5]  .rz-grid-table {
    font-size: 0.85rem;
}

.cpe-results-grid[b-wpseaa6zo5]  .rz-grid-table thead th {
    font-family: var(--brand-font-title);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, transparent, var(--brand-teal) 10%) !important;
}

/* ------------------------------- Report panel ---------------------------- */
.cpe-form-grid[b-wpseaa6zo5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.cpe-report-result[b-wpseaa6zo5] {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, transparent, var(--brand-azul) 8%);
    border: 1px solid color-mix(in srgb, transparent, var(--brand-azul) 22%);
}

.cpe-report-row[b-wpseaa6zo5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--brand-border);
    font-size: 0.85rem;
}

.cpe-report-row:last-child[b-wpseaa6zo5] {
    border-bottom: none;
}

.cpe-report-row strong[b-wpseaa6zo5] {
    font-family: var(--brand-font-title);
    color: var(--rz-text-color);
}

.cpe-info-banner[b-wpseaa6zo5] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-radius: var(--onu-card-radius-modern, var(--brand-radius-panel));
    background: color-mix(in srgb, transparent, var(--brand-azul) 10%);
    border: 1px solid color-mix(in srgb, transparent, var(--brand-azul) 25%);
    font-size: 0.84rem;
    color: var(--rz-text-color);
    line-height: 1.45;
}

.cpe-info-banner[b-wpseaa6zo5]  .rzi {
    color: var(--brand-azul);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ------------------------------- Responsive ------------------------------ */
@media (max-width: 768px) {
    .cpe-ops-page[b-wpseaa6zo5] {
        padding: 0.85rem;
    }

    .cpe-steps[b-wpseaa6zo5] {
        flex-direction: column;
    }

    .cpe-step:not(:last-child)[b-wpseaa6zo5]::after {
        display: none;
    }

    .cpe-hero__stats[b-wpseaa6zo5] {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpe-hero[b-wpseaa6zo5]::before,
    .cpe-hero[b-wpseaa6zo5]::after,
    .cpe-progress-fill--busy[b-wpseaa6zo5],
    .cpe-progress-fill--busy[b-wpseaa6zo5]::after,
    .cpe-hero__glyph[b-wpseaa6zo5] {
        animation: none !important;
    }

    .cpe-panel:hover[b-wpseaa6zo5],
    .cpe-stat-chip:hover[b-wpseaa6zo5],
    .cpe-version-pill:hover[b-wpseaa6zo5],
    .cpe-actions[b-wpseaa6zo5]  .rz-button:hover {
        transform: none !important;
    }
}
/* /Components/Pages/OnuMap.razor.rz.scp.css */
/* OnuMap page chrome — tipografia e header on-brand (tg:ds-08).
   Tokens: analisp-brand-tokens.css. Theme-aware via --rz-* (toggle Radzen). */

.onu-map-page[b-t3ydukwh8i] {
    font-family: var(--brand-font-body);
    color: var(--rz-text-color);
}

.onu-map-page :global(.rz-text-h4)[b-t3ydukwh8i],
.onu-map-page :global(.rz-text-subtitle2)[b-t3ydukwh8i] {
    font-family: var(--brand-font-title);
}
/* /Components/Pages/SnmpAlarms.razor.rz.scp.css */
/* =============================================================================
   SNMP Alarms — polish on-brand (alinhado a AssertiveAlarms)
   Tokens: analisp-brand-tokens.css (--brand-*). Theme-aware via --rz-*.
   Sem seletores inertes [data-bs-theme]: paridade real deriva de --rz-*.
   ============================================================================= */

.snmp-alarms-page[b-lb7h5y4td3] {
    font-family: var(--brand-font-body);
    color: var(--rz-text-color);
    max-width: 1440px;
    margin: 0 auto;
}

/* ------------------------------- Hero header ------------------------------- */
.snmp-hero[b-lb7h5y4td3] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--brand-radius-card);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 4%);
    border: 1px solid var(--brand-border-teal);
    box-shadow: var(--brand-shadow-md);
    overflow: hidden;
}

.snmp-hero__glow[b-lb7h5y4td3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--brand-grad-hero);
    opacity: 0.85;
}

.snmp-hero__brand[b-lb7h5y4td3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 280px;
}

.snmp-hero__icon[b-lb7h5y4td3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brand-grad-brand);
    color: var(--brand-ink);
    box-shadow: var(--brand-shadow-sm);
}

.snmp-hero__icon :global(.rzi)[b-lb7h5y4td3],
.snmp-hero__icon :global(.notranslate)[b-lb7h5y4td3] {
    font-size: 26px;
}

.snmp-hero__title[b-lb7h5y4td3] {
    font-family: var(--brand-font-title);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.snmp-hero__subtitle[b-lb7h5y4td3] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--brand-muted);
}

.snmp-hero__controls[b-lb7h5y4td3] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

/* ------------------------------- Metric cards ------------------------------ */
.snmp-alarms-page :global(.rz-text-h4)[b-lb7h5y4td3],
.snmp-alarms-page :global(.rz-text-h3)[b-lb7h5y4td3],
.snmp-alarms-page :global(.rz-text-h6)[b-lb7h5y4td3] {
    font-family: var(--brand-font-title);
}

.snmp-alarms-page .snmp-metric-card[b-lb7h5y4td3] {
    height: 100%;
    border-left: 4px solid var(--brand-teal);
    border-radius: var(--brand-radius-panel);
    border-top: 1px solid var(--brand-border);
    border-right: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
    transition: box-shadow 0.2s var(--brand-ease), transform 0.2s var(--brand-ease);
}

.snmp-alarms-page .snmp-metric-card:hover[b-lb7h5y4td3] {
    box-shadow: var(--brand-shadow-md);
    transform: translateY(-1px);
}

.snmp-alarms-page .snmp-metric-card :global(.rz-text-h3)[b-lb7h5y4td3] {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--rz-text-color);
}

.snmp-alarms-page .snmp-metric-card :global(.rz-text-overline)[b-lb7h5y4td3] {
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--brand-muted);
}

.snmp-alarms-page .snmp-metric-critical[b-lb7h5y4td3] {
    border-left-color: var(--rz-danger, #dc3545);
}

.snmp-alarms-page .snmp-metric-major[b-lb7h5y4td3] {
    border-left-color: var(--rz-warning, #ffb400);
}

.snmp-alarms-page .snmp-metric-minor[b-lb7h5y4td3] {
    border-left-color: var(--rz-info, #17a2b8);
}

/* ------------------------------- Panel cards ------------------------------- */
.snmp-alarms-page :global(.rz-card)[b-lb7h5y4td3] {
    border-radius: var(--brand-radius-panel);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
}

.snmp-alarms-page :global(.rz-card .rz-text-h6)[b-lb7h5y4td3] {
    color: var(--rz-text-color);
}

/* ------------------------------- Detail panel ------------------------------ */
.snmp-alarms-page .snmp-detail-section[b-lb7h5y4td3] {
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 6%);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-chip);
    padding: 0.75rem;
}

.snmp-alarms-page .snmp-detail-section strong[b-lb7h5y4td3] {
    color: var(--brand-muted);
    font-weight: 600;
}

.snmp-alarms-page .snmp-cpu-badge[b-lb7h5y4td3] {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ------------------------------- Responsive / a11y ------------------------- */
@media (max-width: 640px) {
    .snmp-hero[b-lb7h5y4td3] {
        padding: 1rem 1.1rem;
    }

    .snmp-hero__controls[b-lb7h5y4td3] {
        width: 100%;
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    .snmp-alarms-page .snmp-metric-card[b-lb7h5y4td3] {
        transition: none;
    }

    .snmp-alarms-page .snmp-metric-card:hover[b-lb7h5y4td3] {
        transform: none;
    }
}
/* /Components/Pages/SyslogObservability.razor.rz.scp.css */
/* =============================================================================
   Syslog Observability — polish on-brand (alinhado a AssertiveAlarms)
   Tokens: analisp-brand-tokens.css (--brand-*). Theme-aware via --rz-*.
   Corrige superficies que usavam --rz-base-rgb (inexistente -> sempre navy):
   agora derivam de --rz-* que TROCAM com o toggle in-app. Sem seletor inerte.
   ============================================================================= */

.syslog-observability-page[b-pbtdebu2bg] {
    font-family: var(--brand-font-body);
    color: var(--rz-text-color);
}

.syslog-observability-page :global(.rz-text-h4)[b-pbtdebu2bg],
.syslog-observability-page :global(.rz-text-h3)[b-pbtdebu2bg],
.syslog-observability-page :global(.rz-text-h6)[b-pbtdebu2bg] {
    font-family: var(--brand-font-title);
}

/* ------------------------------- Metric cards ------------------------------ */
.syslog-observability-page .syslog-metric-card[b-pbtdebu2bg] {
    height: 100%;
    border-left: 4px solid var(--brand-teal);
    border-radius: var(--brand-radius-panel);
    border-top: 1px solid var(--brand-border);
    border-right: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
    transition: box-shadow 0.2s var(--brand-ease), transform 0.2s var(--brand-ease);
}

.syslog-observability-page .syslog-metric-card:hover[b-pbtdebu2bg] {
    box-shadow: var(--brand-shadow-md);
    transform: translateY(-1px);
}

.syslog-observability-page .syslog-metric-card :global(.rz-text-h3)[b-pbtdebu2bg] {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--rz-text-color);
}

.syslog-observability-page .syslog-metric-card :global(.rz-text-overline)[b-pbtdebu2bg] {
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--brand-muted);
}

.syslog-observability-page .syslog-metric-card-ok[b-pbtdebu2bg] {
    border-left-color: var(--rz-success, #28a745);
}

.syslog-observability-page .syslog-metric-card-warn[b-pbtdebu2bg] {
    border-left-color: var(--rz-warning, #ffb400);
}

.syslog-observability-page .syslog-metric-card-alarm[b-pbtdebu2bg] {
    border-left-color: var(--rz-danger, #dc3545);
}

/* ------------------------------- Heartbeat cards --------------------------- */
.syslog-observability-page .syslog-hb-card[b-pbtdebu2bg] {
    border-left: 4px solid var(--rz-success, #28a745);
    border-radius: var(--brand-radius-panel);
    border-top: 1px solid var(--brand-border);
    border-right: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
}

.syslog-observability-page .syslog-hb-ok[b-pbtdebu2bg] {
    border-left-color: var(--rz-success, #28a745);
}

.syslog-observability-page .syslog-hb-warn[b-pbtdebu2bg] {
    border-left-color: var(--rz-warning, #ffb400);
}

.syslog-observability-page .syslog-hb-bad[b-pbtdebu2bg] {
    border-left-color: var(--rz-danger, #dc3545);
}

/* ------------------------------- Panel cards ------------------------------- */
.syslog-observability-page :global(.rz-card)[b-pbtdebu2bg] {
    border-radius: var(--brand-radius-panel);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
}

.syslog-observability-page :global(.rz-card .rz-text-h6)[b-pbtdebu2bg] {
    color: var(--rz-text-color);
}

.syslog-observability-page .syslog-unmapped-msg[b-pbtdebu2bg] {
    display: block;
    background: color-mix(in srgb, var(--rz-base-background-color, #fff), var(--rz-text-color, #1a2230) 6%);
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.2;
    word-break: break-all;
    white-space: pre-wrap;
    color: var(--rz-text-color);
}

.syslog-observability-page .syslog-unmapped-list[b-pbtdebu2bg],
.syslog-observability-page .syslog-live-tail-list[b-pbtdebu2bg] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

.syslog-observability-page .syslog-unmapped-list[b-pbtdebu2bg] {
    max-height: 320px;
}

.syslog-observability-page .syslog-live-tail-list[b-pbtdebu2bg] {
    max-height: 280px;
}

.syslog-observability-page .syslog-unmapped-item[b-pbtdebu2bg] {
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    background: var(--brand-hover);
}

.syslog-observability-page .syslog-live-tail-item[b-pbtdebu2bg] {
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: var(--brand-hover);
    align-items: flex-start !important;
}

.syslog-observability-page .syslog-live-tail-description[b-pbtdebu2bg] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}

.syslog-observability-page .syslog-alarms-list[b-pbtdebu2bg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

.syslog-observability-page .syslog-alarm-item[b-pbtdebu2bg] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border-left: 3px solid var(--rz-danger, #dc3545);
    background: color-mix(in srgb, transparent, var(--rz-text-color, var(--brand-ink)) 5%);
    border-top: 1px solid var(--brand-divider);
    border-right: 1px solid var(--brand-divider);
    border-bottom: 1px solid var(--brand-divider);
}

.syslog-observability-page .syslog-alarm-item.syslog-alarm-critical[b-pbtdebu2bg] {
    border-left-color: var(--rz-danger, #dc3545);
}

.syslog-observability-page .syslog-alarm-item.syslog-alarm-major[b-pbtdebu2bg],
.syslog-observability-page .syslog-alarm-item.syslog-alarm-warning[b-pbtdebu2bg] {
    border-left-color: var(--rz-warning, #ffb400);
}

.syslog-observability-page .syslog-alarm-item.syslog-alarm-info[b-pbtdebu2bg] {
    border-left-color: var(--rz-info, #0288d1);
}

.syslog-observability-page .syslog-alarm-top[b-pbtdebu2bg] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.syslog-observability-page .syslog-alarm-code[b-pbtdebu2bg] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.72rem;
    font-weight: 600;
}

.syslog-observability-page .syslog-alarm-time[b-pbtdebu2bg] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
}

.syslog-observability-page .syslog-alarm-location[b-pbtdebu2bg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
}

.syslog-observability-page .syslog-alarm-olt[b-pbtdebu2bg] {
    font-family: "Cascadia Code", "Consolas", monospace;
    color: var(--rz-primary);
}

.syslog-observability-page .syslog-alarm-pos[b-pbtdebu2bg] {
    color: var(--rz-text-secondary-color);
}

.syslog-observability-page .syslog-alarm-reason-tags[b-pbtdebu2bg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.syslog-observability-page .syslog-alarm-reason-tag[b-pbtdebu2bg] {
    font-size: 0.66rem;
    padding: 0.08rem 0.35rem;
    border-radius: 4px;
    background: rgba(var(--rz-warning-rgb, 255, 180, 0), 0.18);
    border: 1px solid rgba(var(--rz-warning-rgb, 255, 180, 0), 0.28);
}

.syslog-observability-page .syslog-alarm-meta[b-pbtdebu2bg] {
    color: var(--rz-text-secondary-color);
}

@media (prefers-reduced-motion: reduce) {
    .syslog-observability-page .syslog-metric-card[b-pbtdebu2bg] {
        transition: none;
    }

    .syslog-observability-page .syslog-metric-card:hover[b-pbtdebu2bg] {
        transform: none;
    }
}
/* /Components/Shared/CtoDualName.razor.rz.scp.css */
.cto-dual-name[b-3ggtnzvrie] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 100%;
}

.cto-dual-name-main[b-3ggtnzvrie] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--rz-text-color);
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    border: 1px solid rgba(var(--rz-primary-rgb, 59, 130, 246), 0.38);
    background: rgba(var(--rz-primary-rgb, 59, 130, 246), 0.18);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cto-dual-name-alias[b-3ggtnzvrie] {
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color, var(--rz-text-secondary));
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    border: 1px dashed rgba(var(--rz-base-rgb, 200, 200, 200), 0.45);
    background: rgba(var(--rz-base-rgb, 200, 200, 200), 0.12);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cto-dual-name-map[b-3ggtnzvrie] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(var(--rz-info-rgb, 33, 150, 243), 0.45);
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.16);
    color: var(--rz-info, #2196f3);
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}

.cto-dual-name-map:hover[b-3ggtnzvrie] {
    transform: translateY(-1px);
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.25);
}

.cto-dual-name-map:focus-visible[b-3ggtnzvrie] {
    outline: 2px solid var(--rz-info, #2196f3);
    outline-offset: 2px;
}

.cto-dual-name-map .rzi[b-3ggtnzvrie] {
    font-size: 0.8rem;
}

.cto-dual-name.compact .cto-dual-name-main[b-3ggtnzvrie] {
    font-size: 0.64rem;
    padding: 0.06rem 0.34rem;
}

.cto-dual-name.compact .cto-dual-name-alias[b-3ggtnzvrie] {
    font-size: 0.6rem;
    padding: 0.06rem 0.34rem;
}
/* /Components/Shared/RecentEventBadge.razor.rz.scp.css */
/* Chip individual no card */
.recent-event-chip[b-n968ntwg24] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid currentColor;
    cursor: help;
    user-select: none;
    animation: recent-event-pulse-b-n968ntwg24 2s ease-in-out infinite;
    background: rgba(255, 255, 255, 0.45);
}

.recent-event-chip .rz-icon[b-n968ntwg24] {
    font-size: 0.95rem;
    line-height: 1;
}

/* SVGs custom (T5) renderizados via mask-image para herdar `currentColor`
   das classes kind-* que ja definem cor semantica. */
.recent-event-svg[b-n968ntwg24] {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    flex-shrink: 0;
}

.recent-event-svg-cloud-on[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/cloud-on.svg");
            mask-image: url("/icons/onu/state/cloud-on.svg");
}
.recent-event-svg-cloud-off[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/cloud-off.svg");
            mask-image: url("/icons/onu/state/cloud-off.svg");
}
.recent-event-svg-dying-gasp[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/dying-gasp.svg");
            mask-image: url("/icons/onu/state/dying-gasp.svg");
}
.recent-event-svg-signal-drop[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/signal-drop.svg");
            mask-image: url("/icons/onu/state/signal-drop.svg");
}
.recent-event-svg-router[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/router.svg");
            mask-image: url("/icons/onu/state/router.svg");
}
.recent-event-svg-bolt[b-n968ntwg24] {
    -webkit-mask-image: url("/icons/onu/state/bolt.svg");
            mask-image: url("/icons/onu/state/bolt.svg");
    width: 15px;
    height: 15px;
}

.recent-event-chip.kind-connected[b-n968ntwg24] {
    color: var(--rz-success);
    background: rgba(var(--rz-success-rgb, 76, 175, 80), 0.12);
}

.recent-event-chip.kind-disconnected[b-n968ntwg24] {
    color: var(--rz-danger);
    background: rgba(var(--rz-danger-rgb, 244, 67, 54), 0.12);
}

.recent-event-chip.kind-dyingGasp[b-n968ntwg24] {
    color: var(--rz-warning);
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.18);
}

.recent-event-chip.kind-signalDrop[b-n968ntwg24] {
    color: var(--rz-warning);
    background: rgba(var(--rz-warning-rgb, 255, 152, 0), 0.12);
}

.recent-event-chip.kind-unconfigured[b-n968ntwg24] {
    color: var(--rz-info);
    background: rgba(var(--rz-info-rgb, 33, 150, 243), 0.12);
}

.recent-event-text[b-n968ntwg24] {
    white-space: nowrap;
}

/* Badge agregado em headers */
.recent-event-aggregate[b-n968ntwg24] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--rz-warning-rgb, 255, 152, 0), 0.25), rgba(var(--rz-warning-rgb, 255, 152, 0), 0.15));
    color: var(--rz-warning-darker, #e65100);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: help;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    animation: recent-event-pulse-b-n968ntwg24 1.6s ease-in-out infinite;
}

.recent-event-aggregate .rz-icon[b-n968ntwg24] {
    font-size: 1rem;
    line-height: 1;
}

@keyframes recent-event-pulse-b-n968ntwg24 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

/* ============================================================
   batimento_por_atenuacao T06: badges paralelos.
   - .group-state       -> badge VERMELHO (queda).
   - .group-attenuation -> badge AMARELO  (atenuacao).
   Aplicado tanto no chip individual (.recent-event-chip) quanto no
   badge agregado (.recent-event-aggregate). Modificadores de cor por
   group-* sobrepoem os estilos genericos definidos acima.
   ============================================================ */

/* Aggregate: state -> vermelho */
.recent-event-aggregate.group-state[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(var(--rz-danger-rgb, 244, 67, 54), 0.25), rgba(var(--rz-danger-rgb, 244, 67, 54), 0.15));
    color: var(--rz-danger-darker, #b71c1c);
}

/* Aggregate: attenuation -> amarelo */
.recent-event-aggregate.group-attenuation[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(var(--rz-warning-rgb, 255, 193, 7), 0.30), rgba(var(--rz-warning-rgb, 255, 193, 7), 0.18));
    color: var(--rz-warning-darker, #f57f17);
}

/* Chip individual de atenuacao: amarelo (override do default). */
.recent-event-chip.group-attenuation[b-n968ntwg24] {
    color: var(--rz-warning-darker, #f57f17);
    background: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.18);
    border-color: rgba(var(--rz-warning-rgb, 255, 193, 7), 0.55);
}

/* Dark mode contrast */
:global(.rz-dark) .recent-event-chip[b-n968ntwg24] {
    background: rgba(255, 255, 255, 0.08);
}

:global(.rz-dark) .recent-event-chip.kind-connected[b-n968ntwg24] {
    background: rgba(76, 175, 80, 0.22);
}

:global(.rz-dark) .recent-event-chip.kind-disconnected[b-n968ntwg24] {
    background: rgba(244, 67, 54, 0.22);
}

:global(.rz-dark) .recent-event-aggregate[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.35), rgba(255, 152, 0, 0.20));
    color: #ffcc80;
}

:global(.rz-dark) .recent-event-aggregate.group-state[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.40), rgba(244, 67, 54, 0.22));
    color: #ffab91;
}

:global(.rz-dark) .recent-event-aggregate.group-attenuation[b-n968ntwg24] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.42), rgba(255, 193, 7, 0.22));
    color: #ffe082;
}

:global(.rz-dark) .recent-event-chip.group-attenuation[b-n968ntwg24] {
    background: rgba(255, 193, 7, 0.22);
    color: #ffe082;
    border-color: rgba(255, 193, 7, 0.55);
}