/* /Layout/HomeLayout.razor.rz.scp.css */

*[b-hkjv9t0m3m], *[b-hkjv9t0m3m]::before, *[b-hkjv9t0m3m]::after {
    box-sizing: border-box;
}

.container[b-hkjv9t0m3m] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: #000;
    color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* ── CABEÇALHO FIXO ── */
.header[b-hkjv9t0m3m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    background-color: #000;

    /* Impede o Google search */
    -webkit-user-select: none; /* Safari/Chrome */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* Padrão */
}

.link[b-hkjv9t0m3m] {
    color: orange;
    text-decoration: none;
    font-size: 16px;
}

/* ── CONTEÚDO CENTRAL ── */
.main-content[b-hkjv9t0m3m] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 52px;
    padding-bottom: 48px;
}

/* ── RODAPÉ FIXO ── */
.footer[b-hkjv9t0m3m] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    text-align: center;
    padding: 10px 0;
    background-color: #000;
}

    .footer p[b-hkjv9t0m3m] {
        margin: 0;
        font-size: small;
    }
/* /Layout/LoginLayout.razor.rz.scp.css */

*[b-hhxhwdjzjy], *[b-hhxhwdjzjy]::before, *[b-hhxhwdjzjy]::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container[b-hhxhwdjzjy] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.header[b-hhxhwdjzjy] {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 20px;
    background-color: #000000;
    min-height: 120px;
    gap: 0;
    font-family: Tahoma, sans-serif;
}

    .header img[b-hhxhwdjzjy] {
        margin-right: auto;
    }

.logo-img[b-hhxhwdjzjy] {
    height: 120px;
    width: 120px;
    display: block;
}

.link[b-hhxhwdjzjy] {
    color: #ff8c00;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-left: 20px;
    transition: all 0.2s ease;
}

    .link:hover[b-hhxhwdjzjy] {
        color: #fff;
        text-decoration: underline;
    }

/* Scrollável verticalmente — só o main rola */
.main-content[b-hhxhwdjzjy] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #1c1c1c;
    color: #e8e8e8;
}

.footer[b-hhxhwdjzjy] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    min-height: 80px;
    color: white;
    font-size: 12px;
    font-weight: 300;
    font-family: Tahoma, sans-serif;
}

@media (max-width: 768px) {
    .header[b-hhxhwdjzjy] {
        padding: 10px 15px;
    }

    .link[b-hhxhwdjzjy] {
        font-size: 14px;
        margin-left: 15px;
    }
}

@media (max-width: 480px) {
    .header[b-hhxhwdjzjy] {
        padding: 8px 12px;
    }

    .link[b-hhxhwdjzjy] {
        font-size: 13px;
        margin-left: 12px;
    }

    .footer[b-hhxhwdjzjy] {
        font-size: 10px;
        min-height: 60px;
        padding: 0 10px;
    }
}
/* /Layout/LogoffLayout.razor.rz.scp.css */
*[b-1vyzwbitqs], *[b-1vyzwbitqs]::before, *[b-1vyzwbitqs]::after {
    box-sizing: border-box;
}

html[b-1vyzwbitqs], body[b-1vyzwbitqs] {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #000;
    color: white;
    font-family: Arial, sans-serif;
}

.container[b-1vyzwbitqs] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── CABEÇALHO FIXO ── */
.header[b-1vyzwbitqs] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    background-color: #000;
}

.link[b-1vyzwbitqs] {
    color: orange;
    text-decoration: none;
    font-size: 16px;
}

/* ── CONTEÚDO CENTRAL ── */
.main-content[b-1vyzwbitqs] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 52px;
    padding-bottom: 48px;
}

/* ── RODAPÉ FIXO ── */
.footer[b-1vyzwbitqs] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    text-align: center;
    padding: 10px 0;
    background-color: #000;
}

    .footer p[b-1vyzwbitqs] {
        margin: 0;
        font-size: small;
    }
/* /Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   Leuca — MainLayout
   MainLayout.razor.css  (scoped)
   ============================================================ */

/* ── Container raiz ── */
.leuca-container[b-8isjs2nfgb] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%; /* 100% em vez de 100vw — evita overflow da scrollbar */
    max-width: 100vw;
    overflow: hidden;
    position: relative;
}

/* ══════════════════════════════════════════════════════════
   OVERLAY
══════════════════════════════════════════════════════════ */
.menu-overlay[b-8isjs2nfgb] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 998;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

    .menu-overlay.open[b-8isjs2nfgb] {
        opacity: 1;
        visibility: visible;
    }

/* ══════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════ */
.sidebar[b-8isjs2nfgb] {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background-color: #444444;
    z-index: 999;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

    .sidebar.open[b-8isjs2nfgb] {
        left: 0;
    }

/* Seções */
.nav-section[b-8isjs2nfgb] {
    padding: 20px 0 8px;
}

.nav-label[b-8isjs2nfgb] {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    padding: 0 20px 8px;
}

/* Itens de navegação */
.nav-item[b-8isjs2nfgb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
    text-decoration: none;
}

    .nav-item:hover[b-8isjs2nfgb] {
        background: rgba(0, 0, 0, 0.15);
    }

    .nav-item.active[b-8isjs2nfgb],
    .nav-item[b-8isjs2nfgb]  .active {
        background: rgba(255, 140, 0, 0.15);
    }

        .nav-item.active[b-8isjs2nfgb]::before,
        .nav-item[b-8isjs2nfgb]  .active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 3px;
            background: #ff8c00;
            border-radius: 0 2px 2px 0;
        }

/* Ícone */
.nav-ic[b-8isjs2nfgb] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .nav-ic i[b-8isjs2nfgb] {
        font-size: 17px;
        color: rgba(255, 255, 255, 0.72);
    }

.nav-item.active .nav-ic[b-8isjs2nfgb],
.nav-item[b-8isjs2nfgb]  .active .nav-ic {
    background: rgba(255, 140, 0, 0.2);
}

    .nav-item.active .nav-ic i[b-8isjs2nfgb],
    .nav-item[b-8isjs2nfgb]  .active .nav-ic i {
        color: #ff8c00;
    }

/* Texto */
.nav-text[b-8isjs2nfgb] {
    flex: 1;
    min-width: 0;
}

.nav-name[b-8isjs2nfgb] {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}

.nav-item.active .nav-name[b-8isjs2nfgb],
.nav-item[b-8isjs2nfgb]  .active .nav-name {
    color: #ff8c00;
}

.nav-sub[b-8isjs2nfgb] {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.40);
    margin-top: 1px;
}

/* Badge */
.nav-badge[b-8isjs2nfgb] {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 20px;
    white-space: nowrap;
    background: #ff8c00;
    color: #412402;
}

    .nav-badge.danger[b-8isjs2nfgb] {
        background: #e84e1b;
        color: #fff8f0;
    }

/* Divisor */
.nav-divider[b-8isjs2nfgb] {
    height: 0.5px;
    background: rgba(255, 255, 255, 0.12);
    margin: 6px 20px;
}

/* Espaçador */
.nav-spacer[b-8isjs2nfgb] {
    flex: 1;
}

/* Rodapé da sidebar */
.nav-footer[b-8isjs2nfgb] {
    padding: 14px 20px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-user-av[b-8isjs2nfgb] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.nav-user-name[b-8isjs2nfgb] {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}

.nav-user-spid[b-8isjs2nfgb] {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.40);
    margin-top: 1px;
    font-family: monospace;
}

.btn-logout[b-8isjs2nfgb] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.38);
    padding: 4px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.15s;
}

    .btn-logout:hover[b-8isjs2nfgb] {
        color: #e84e1b;
    }

    .btn-logout i[b-8isjs2nfgb] {
        font-size: 18px;
    }

/* Animação de entrada dos itens */
.sidebar[b-8isjs2nfgb]  .nav-item {
    transform: translateX(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.sidebar.open[b-8isjs2nfgb]  .nav-item:nth-child(1) {
    transition-delay: 0.04s;
}

.sidebar.open[b-8isjs2nfgb]  .nav-item:nth-child(2) {
    transition-delay: 0.08s;
}

.sidebar.open[b-8isjs2nfgb]  .nav-item:nth-child(3) {
    transition-delay: 0.12s;
}

.sidebar.open[b-8isjs2nfgb]  .nav-item:nth-child(4) {
    transition-delay: 0.16s;
}

.sidebar.open[b-8isjs2nfgb]  .nav-item:nth-child(5) {
    transition-delay: 0.20s;
}

.sidebar.open[b-8isjs2nfgb]  .nav-item:nth-child(6) {
    transition-delay: 0.24s;
}

.sidebar.open[b-8isjs2nfgb]  .nav-item:nth-child(7) {
    transition-delay: 0.28s;
}

.sidebar.open[b-8isjs2nfgb]  .nav-item {
    transform: translateX(0);
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════ */
.leuca-header[b-8isjs2nfgb] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: #000000;
    min-height: 128px;
    width: 100%; /* já era 100%, garante que não estoura */
    box-sizing: border-box; /* padding não adiciona largura extra */
    position: relative;
    z-index: 10;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Logo */
.header-logo[b-8isjs2nfgb] {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

    .header-logo:hover[b-8isjs2nfgb] {
        opacity: 0.88;
    }

.logo-img[b-8isjs2nfgb] {
    height: 120px;
    width: auto;
    display: block;
}

/* Direita do header */
.header-right[b-8isjs2nfgb] {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Sino */
.notif-btn[b-8isjs2nfgb] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

    .notif-btn i[b-8isjs2nfgb] {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.65);
        transition: color 0.15s;
    }

    .notif-btn:hover i[b-8isjs2nfgb] {
        color: #ff8c00;
    }

.notif-dot[b-8isjs2nfgb] {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e84e1b;
    border: 2px solid #000000;
}

/* Botão hambúrguer */
.btn-hamburger[b-8isjs2nfgb] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

    .btn-hamburger .bar[b-8isjs2nfgb] {
        display: block;
        width: 24px;
        height: 2.5px;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 2px;
        position: absolute;
        transform-origin: center;
        transition: transform 0.28s ease, opacity 0.28s ease, background 0.28s ease;
    }

    .btn-hamburger .bar1[b-8isjs2nfgb] {
        top: 9px;
    }

    .btn-hamburger .bar2[b-8isjs2nfgb] {
        top: 17px;
    }

    .btn-hamburger .bar3[b-8isjs2nfgb] {
        top: 25px;
    }

    .btn-hamburger.open .bar1[b-8isjs2nfgb] {
        transform: translateY(8px) rotate(45deg);
        background: #ff8c00;
    }

    .btn-hamburger.open .bar2[b-8isjs2nfgb] {
        opacity: 0;
    }

    .btn-hamburger.open .bar3[b-8isjs2nfgb] {
        transform: translateY(-8px) rotate(-45deg);
        background: #ff8c00;
    }

/* ══════════════════════════════════════════════════════════
   CONTEÚDO PRINCIPAL
   Fundo escuro — igual ao tema do HTML de referência
══════════════════════════════════════════════════════════ */
.leuca-main[b-8isjs2nfgb] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #1c1c1c;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.leuca-footer[b-8isjs2nfgb] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    height: 60px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .leuca-header[b-8isjs2nfgb] {
        padding: 0 16px;
    }

    .logo-img[b-8isjs2nfgb] {
        height: 120px;
    }

    .sidebar[b-8isjs2nfgb] {
        width: 260px;
        left: -260px;
    }
}

@media (max-width: 480px) {
    .leuca-header[b-8isjs2nfgb] {
        padding: 0 12px;
        height: 60px;
    }

    .logo-img[b-8isjs2nfgb] {
        height: 120px;
    }

    .leuca-footer[b-8isjs2nfgb] {
        height: 50px;
        font-size: 10px;
    }

    .sidebar[b-8isjs2nfgb] {
        width: 85vw;
        max-width: 300px;
        left: -85vw;
    }
}
/* /Pages/Bills.razor.rz.scp.css */
/* ============================================================
   Leuca — Bills (Cobranças)
   Bills.razor.css  (scoped)
   ============================================================ */

.bills-page[b-gdxjkigsbs] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Header ── */
.page-header[b-gdxjkigsbs] {
    box-sizing: border-box;
}

.page-title[b-gdxjkigsbs] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 .2rem;
}

.page-subtitle[b-gdxjkigsbs] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ── Divider ── */
.divider[b-gdxjkigsbs] {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: .25rem 0;
}

/* ── KPIs ── */
.kpi-row[b-gdxjkigsbs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.kpi-card[b-gdxjkigsbs] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 13px 15px;
}

.kpi-label[b-gdxjkigsbs] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

.kpi-value[b-gdxjkigsbs] {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 3px;
}

.kv-orange[b-gdxjkigsbs] {
    color: #ff8c00;
}

.kv-red[b-gdxjkigsbs] {
    color: #e84e1b;
}

.kv-text[b-gdxjkigsbs] {
    color: var(--color-text-primary);
}

.kpi-sub[b-gdxjkigsbs] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

.kpi-bar[b-gdxjkigsbs] {
    height: 3px;
    border-radius: 2px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.kpi-fill[b-gdxjkigsbs] {
    height: 100%;
    border-radius: 2px;
    transition: width .6s ease;
}

.fill-orange[b-gdxjkigsbs] {
    background: #ff8c00;
}

.fill-red[b-gdxjkigsbs] {
    background: #e84e1b;
}

/* ── Alerta ── */
.alert-strip[b-gdxjkigsbs] {
    background: rgba(255, 140, 0, 0.10);
    border-left: 3px solid #ff8c00;
    border-radius: 0;
    padding: 9px 13px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

    .alert-strip i[b-gdxjkigsbs] {
        font-size: 16px;
        color: #ff8c00;
        flex-shrink: 0;
        margin-top: 1px;
    }

.alert-title[b-gdxjkigsbs] {
    font-size: 11px;
    font-weight: 500;
    color: #ff8c00;
}

.alert-desc[b-gdxjkigsbs] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    line-height: 1.5;
}

/* ── Forecast card ── */
.forecast-card[b-gdxjkigsbs] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.forecast-hd[b-gdxjkigsbs] {
    padding: 11px 16px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forecast-title[b-gdxjkigsbs] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .forecast-title i[b-gdxjkigsbs] {
        font-size: 15px;
        color: #ff8c00;
    }

.forecast-btns[b-gdxjkigsbs] {
    display: flex;
    gap: 5px;
}

.fc-btn[b-gdxjkigsbs] {
    font-size: 10px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 6px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: Verdana, sans-serif;
    transition: all .15s;
}

.fc-active[b-gdxjkigsbs] {
    background: #ff8c00;
    color: #412402;
    border-color: #ff8c00;
}

.forecast-canvas-wrap[b-gdxjkigsbs] {
    padding: 12px 16px;
    height: 150px;
    position: relative;
}

.forecast-empty[b-gdxjkigsbs] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-secondary);
}

    .forecast-empty i[b-gdxjkigsbs] {
        font-size: 28px;
        opacity: .25;
    }

    .forecast-empty span[b-gdxjkigsbs] {
        font-size: 11px;
        text-align: center;
        opacity: .5;
    }

/* ── Card principal ── */
.card[b-gdxjkigsbs] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

/* ── Tab ── */
.tab-row[b-gdxjkigsbs] {
    display: flex;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    padding: 0 15px;
}

.tab[b-gdxjkigsbs] {
    font-size: 11px;
    font-weight: 500;
    padding: 9px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--color-text-secondary);
    font-family: Verdana, sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tab-active[b-gdxjkigsbs] {
    color: #ff8c00;
    border-bottom-color: #ff8c00;
}

.tab-badge[b-gdxjkigsbs] {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 20px;
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
}

/* ── Busca ── */
.search-row[b-gdxjkigsbs] {
    padding: 9px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.search-wrap[b-gdxjkigsbs] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 6px 10px;
}

    .search-wrap i[b-gdxjkigsbs] {
        font-size: 15px;
        color: var(--color-text-secondary);
        flex-shrink: 0;
    }

.search-inp[b-gdxjkigsbs] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    color: var(--color-text-primary);
    outline: none;
}

    .search-inp[b-gdxjkigsbs]::placeholder {
        color: var(--color-text-secondary);
    }

/* ── Bill item ── */
.bill-item[b-gdxjkigsbs] {
    border-bottom: 0.5px solid var(--color-border-tertiary);
    cursor: pointer;
    transition: background .12s;
}

    .bill-item:last-child[b-gdxjkigsbs] {
        border-bottom: none;
    }

    .bill-item:hover[b-gdxjkigsbs] {
        background: var(--color-background-secondary);
    }

.bill-top[b-gdxjkigsbs] {
    padding: 11px 15px 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.bill-bot[b-gdxjkigsbs] {
    padding: 7px 15px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.bill-av[b-gdxjkigsbs] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    margin-top: 2px;
}

.bill-info[b-gdxjkigsbs] {
    flex: 1;
    min-width: 0;
}

.bill-name[b-gdxjkigsbs] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bill-meta[b-gdxjkigsbs] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.bill-right[b-gdxjkigsbs] {
    flex-shrink: 0;
    text-align: right;
}

.bill-amount[b-gdxjkigsbs] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.bill-spacer[b-gdxjkigsbs] {
    flex: 1;
}

.due-hot[b-gdxjkigsbs] {
    font-size: 10px;
    color: #e84e1b;
    font-weight: 500;
    margin-top: 3px;
}

.due-ok[b-gdxjkigsbs] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 3px;
}

/* ── Pills ── */
.pill[b-gdxjkigsbs] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
}

    .pill i[b-gdxjkigsbs] {
        font-size: 10px;
    }

.p-pending[b-gdxjkigsbs] {
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
}

.p-approved[b-gdxjkigsbs] {
    background: rgba(126, 201, 74, 0.18);
    color: #7ec94a;
}

.p-overdue[b-gdxjkigsbs] {
    background: rgba(232, 78, 27, 0.18);
    color: #e84e1b;
}

/* ── Botões de ação ── */
.btn-act[b-gdxjkigsbs] {
    padding: 5px 13px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid;
    transition: opacity .15s;
    white-space: nowrap;
}

    .btn-act:disabled[b-gdxjkigsbs] {
        opacity: .45;
        cursor: not-allowed;
    }

    .btn-act:hover:not(:disabled)[b-gdxjkigsbs] {
        opacity: .82;
    }

    .btn-act i[b-gdxjkigsbs] {
        font-size: 13px;
    }

.b-aprv[b-gdxjkigsbs] {
    background: rgba(126, 201, 74, 0.15);
    color: #7ec94a;
    border-color: rgba(126, 201, 74, 0.4);
}

.b-rej[b-gdxjkigsbs] {
    background: rgba(232, 78, 27, 0.15);
    color: #e84e1b;
    border-color: rgba(232, 78, 27, 0.4);
}

.b-pay[b-gdxjkigsbs] {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
    border-color: rgba(255, 140, 0, 0.4);
}

/* ── Empty state ── */
.empty-state[b-gdxjkigsbs] {
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    text-align: center;
}

    .empty-state i[b-gdxjkigsbs] {
        font-size: 30px;
        color: var(--color-text-secondary);
    }

    .empty-state p[b-gdxjkigsbs] {
        font-size: 12px;
    }

/* ── Link histórico ── */
.history-link[b-gdxjkigsbs] {
    width: 100%;
    padding: 11px;
    border-radius: var(--border-radius-lg);
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    color: #ff8c00;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s;
}

    .history-link:hover[b-gdxjkigsbs] {
        background: var(--color-background-secondary);
        border-color: #ff8c00;
    }

    .history-link i[b-gdxjkigsbs] {
        font-size: 15px;
    }

/* ── Loading ── */
.loading-state[b-gdxjkigsbs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: .75rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.loading-spinner[b-gdxjkigsbs] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-gdxjkigsbs .9s linear infinite;
}

.loading-text[b-gdxjkigsbs] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ── Erro ── */
.error-banner[b-gdxjkigsbs] {
    background: rgba(232, 78, 27, 0.10);
    border-left: 3px solid #e84e1b;
    border-radius: 0;
    padding: 10px 14px;
    font-size: 11px;
    color: #e84e1b;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .error-banner i[b-gdxjkigsbs] {
        font-size: 15px;
        color: #e84e1b;
        flex-shrink: 0;
    }

/* ── Responsividade ── */
@media (max-width: 768px) {
    .bills-page[b-gdxjkigsbs] {
        padding: 1rem;
    }
}

@media (max-width: 540px) {
    .bills-page[b-gdxjkigsbs] {
        padding: .75rem;
    }

    .kpi-row[b-gdxjkigsbs] {
        grid-template-columns: 1fr 1fr;
    }

    .bill-top[b-gdxjkigsbs] {
        flex-wrap: wrap;
    }

    .bill-right[b-gdxjkigsbs] {
        margin-left: auto;
    }

    .bill-bot[b-gdxjkigsbs] {
        flex-wrap: wrap;
    }

    .btn-act[b-gdxjkigsbs] {
        flex: 1;
        justify-content: center;
    }

    /* Header empilha em mobile */
    .page-header[b-gdxjkigsbs] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn-new[b-gdxjkigsbs] {
        width: 100%;
        justify-content: center;
    }

    /* Toggle de origem em mobile */
    .tab-row[b-gdxjkigsbs] {
        flex-wrap: wrap;
        gap: 0;
    }

    .origem-toggle[b-gdxjkigsbs] {
        width: 100%;
        border-top: 0.5px solid var(--color-border-tertiary);
        border-radius: 0;
        padding: 6px 15px;
        gap: 6px;
    }

    .tog-btn[b-gdxjkigsbs] {
        flex: 1;
        justify-content: center;
    }
}

@keyframes spin-b-gdxjkigsbs {
    to {
        transform: rotate(360deg);
    }
}

/* ════════════════════════════════════════════════════════════
   NOVOS ESTILOS — Registrar cobrança + Toggle de origem
════════════════════════════════════════════════════════════ */

/* ── Header com botão Registrar ── */
.page-header[b-gdxjkigsbs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
}

.btn-new[b-gdxjkigsbs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .15s;
}

    .btn-new:hover[b-gdxjkigsbs] {
        opacity: .82;
    }

    .btn-new i[b-gdxjkigsbs] {
        font-size: 13px;
    }

/* ── Toggle Todos / Meus registros ── */
.origem-toggle[b-gdxjkigsbs] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 0 4px;
}

.tog-btn[b-gdxjkigsbs] {
    font-size: 10px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}

    .tog-btn i[b-gdxjkigsbs] {
        font-size: 10px;
    }

    .tog-btn:hover[b-gdxjkigsbs] {
        background: var(--color-background-secondary);
        color: var(--color-text-primary);
    }

.tog-active[b-gdxjkigsbs] {
    background: rgba(255, 140, 0, 0.12) !important;
    color: #ff8c00 !important;
    border-color: rgba(255, 140, 0, 0.35) !important;
}
/* /Pages/CostCenter.razor.rz.scp.css */
/* ============================================================
   Leuca — CostCenter (Centros de Custo)
   CostCenter.razor.css  (scoped)
   ============================================================ */

.cc-page[b-yb0yivpdoc] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Header ── */
.page-header[b-yb0yivpdoc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
}

.page-title[b-yb0yivpdoc] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 .2rem;
}

.page-subtitle[b-yb0yivpdoc] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0;
}

.btn-new[b-yb0yivpdoc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .15s;
}
    .btn-new:hover[b-yb0yivpdoc] { opacity: .82; }
    .btn-new i[b-yb0yivpdoc] { font-size: 13px; }

/* ── Divider ── */
.divider[b-yb0yivpdoc] {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: .25rem 0;
}

/* ── Erro ── */
.error-banner[b-yb0yivpdoc] {
    background: rgba(232, 78, 27, 0.10);
    border-left: 3px solid #e84e1b;
    padding: 10px 14px;
    font-size: 11px;
    color: #e84e1b;
    display: flex;
    align-items: center;
    gap: 8px;
}
    .error-banner i[b-yb0yivpdoc] { font-size: 15px; flex-shrink: 0; }

/* ── Loading ── */
.loading-state[b-yb0yivpdoc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: .75rem;
}

.loading-spinner[b-yb0yivpdoc] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-yb0yivpdoc .9s linear infinite;
}

.loading-text[b-yb0yivpdoc] { font-size: 12px; color: var(--color-text-secondary); }

/* ════════════════════════════════════════════════════════════
   KPIs
════════════════════════════════════════════════════════════ */

.kpi-row[b-yb0yivpdoc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.kpi-card[b-yb0yivpdoc] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 13px 15px;
}

.kpi-label[b-yb0yivpdoc] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

.kpi-value[b-yb0yivpdoc] {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 3px;
}

.kv-orange[b-yb0yivpdoc] { color: #ff8c00; }
.kv-text[b-yb0yivpdoc]   { color: var(--color-text-primary); }

.kpi-sub[b-yb0yivpdoc] { font-size: 10px; color: var(--color-text-secondary); }

/* ════════════════════════════════════════════════════════════
   CARD
════════════════════════════════════════════════════════════ */

.card[b-yb0yivpdoc] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.card-hd[b-yb0yivpdoc] {
    padding: 11px 16px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-hd-dot[b-yb0yivpdoc] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #ff8c00;
    flex-shrink: 0;
}

.card-hd-title[b-yb0yivpdoc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}

.count-badge[b-yb0yivpdoc] {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

/* ════════════════════════════════════════════════════════════
   GRÁFICO DE BARRAS
════════════════════════════════════════════════════════════ */

.chart-body[b-yb0yivpdoc] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bar-row[b-yb0yivpdoc] {
    display: grid;
    grid-template-columns: 180px 1fr 90px 40px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    transition: background .1s;
}
    .bar-row:hover[b-yb0yivpdoc] { background: var(--color-background-secondary); }

.bar-label[b-yb0yivpdoc] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bar-dot[b-yb0yivpdoc] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bar-name[b-yb0yivpdoc] {
    font-size: 11px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-name-active[b-yb0yivpdoc] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.bar-track[b-yb0yivpdoc] {
    height: 8px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill[b-yb0yivpdoc] {
    height: 100%;
    border-radius: 4px;
    transition: width .5s ease, opacity .2s;
}

.bar-value[b-yb0yivpdoc] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-align: right;
}

.bar-pct[b-yb0yivpdoc] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-align: right;
}

.chart-filter-note[b-yb0yivpdoc] {
    padding: 8px 16px;
    border-top: 0.5px solid var(--color-border-tertiary);
    font-size: 11px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-background-secondary);
}
    .chart-filter-note i[b-yb0yivpdoc] { font-size: 13px; }
    .chart-filter-note strong[b-yb0yivpdoc] { color: var(--color-text-primary); }

.btn-clear-filter[b-yb0yivpdoc] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 6px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: Verdana, sans-serif;
}
    .btn-clear-filter i[b-yb0yivpdoc] { font-size: 11px; }

/* ════════════════════════════════════════════════════════════
   LISTA DE CENTROS DE CUSTO
════════════════════════════════════════════════════════════ */

.cc-item[b-yb0yivpdoc] {
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: stretch;
    transition: background .1s;
}
    .cc-item:last-child[b-yb0yivpdoc] { border-bottom: none; }
    .cc-item:hover[b-yb0yivpdoc] { background: var(--color-background-secondary); }

.cc-inactive[b-yb0yivpdoc] { opacity: .55; }

.cc-color-bar[b-yb0yivpdoc] {
    width: 4px;
    flex-shrink: 0;
}

.cc-item-body[b-yb0yivpdoc] {
    flex: 1;
    padding: 11px 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-item-top[b-yb0yivpdoc] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cc-dot-lg[b-yb0yivpdoc] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.cc-item-info[b-yb0yivpdoc] { flex: 1; min-width: 0; }

.cc-item-name[b-yb0yivpdoc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cc-item-desc[b-yb0yivpdoc] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

.cc-item-right[b-yb0yivpdoc] { text-align: right; flex-shrink: 0; }

.cc-total[b-yb0yivpdoc] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.cc-total-sub[b-yb0yivpdoc] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

.cc-item-bot[b-yb0yivpdoc] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 44px; /* alinha com o texto (dot-lg + gap) */
}

/* ── Pills ── */
.pill[b-yb0yivpdoc] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
}

.p-default[b-yb0yivpdoc]  { background: rgba(255, 140, 0, 0.15);  color: #ff8c00; }
.p-inactive[b-yb0yivpdoc] { background: rgba(0,0,0,.07);           color: var(--color-text-secondary); }
.p-paid[b-yb0yivpdoc]     { background: rgba(59, 109, 17, 0.15);   color: #3b6d11; }
.p-overdue[b-yb0yivpdoc]  { background: rgba(232, 78, 27, 0.15);   color: #e84e1b; }
.p-pending[b-yb0yivpdoc]  { background: rgba(255, 140, 0, 0.15);   color: #854f0b; }

/* ── Botões de ação ── */
.btn-act[b-yb0yivpdoc] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0.5px solid;
    transition: opacity .15s;
}
    .btn-act:hover[b-yb0yivpdoc] { opacity: .80; }
    .btn-act i[b-yb0yivpdoc] { font-size: 12px; }

.b-edit[b-yb0yivpdoc]  { background: rgba(255,140,0,.08);  color: #854f0b; border-color: rgba(255,140,0,.3); }
.b-deact[b-yb0yivpdoc] { background: rgba(0,0,0,.06);      color: var(--color-text-secondary); border-color: var(--color-border-tertiary); }
.b-act[b-yb0yivpdoc]   { background: rgba(59,109,17,.08);  color: #3b6d11; border-color: rgba(59,109,17,.3); }
.b-del[b-yb0yivpdoc]   { background: rgba(163,45,45,.08);  color: #a32d2d; border-color: rgba(163,45,45,.3); }

/* ── Empty + seed ── */
.empty-state[b-yb0yivpdoc] {
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--color-text-secondary);
    text-align: center;
}
    .empty-state i[b-yb0yivpdoc] { font-size: 30px; opacity: .3; }
    .empty-state p[b-yb0yivpdoc] { font-size: 12px; }

.btn-seed[b-yb0yivpdoc] {
    font-size: 11px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 140, 0, 0.35);
    background: rgba(255, 140, 0, 0.10);
    color: #ff8c00;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: Verdana, sans-serif;
}
    .btn-seed i[b-yb0yivpdoc] { font-size: 13px; }

/* ── Cobranças filtradas ── */
.charge-row[b-yb0yivpdoc] {
    padding: 9px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    gap: 10px;
}
    .charge-row:last-child[b-yb0yivpdoc] { border-bottom: none; }

.charge-row-info[b-yb0yivpdoc] { flex: 1; min-width: 0; }

.charge-row-name[b-yb0yivpdoc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.charge-row-meta[b-yb0yivpdoc] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.charge-row-right[b-yb0yivpdoc] {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.charge-row-amount[b-yb0yivpdoc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.charge-more[b-yb0yivpdoc] {
    padding: 8px 15px;
    font-size: 10px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    border-top: 0.5px solid var(--color-border-tertiary);
}

/* ════════════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════════════ */

.modal-overlay[b-yb0yivpdoc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal[b-yb0yivpdoc] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
}

.modal-hd[b-yb0yivpdoc] {
    padding: 13px 16px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-yb0yivpdoc] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.modal-close[b-yb0yivpdoc] {
    background: none;
    border: none;
    font-size: 17px;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
    transition: color .15s;
}
    .modal-close:hover[b-yb0yivpdoc] { color: var(--color-text-primary); }

.modal-body[b-yb0yivpdoc] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-error[b-yb0yivpdoc] {
    background: rgba(232, 78, 27, 0.10);
    border-left: 3px solid #e84e1b;
    padding: 8px 12px;
    font-size: 11px;
    color: #e84e1b;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 0;
}
    .modal-error i[b-yb0yivpdoc] { font-size: 13px; flex-shrink: 0; }

.modal-footer[b-yb0yivpdoc] {
    padding: 10px 16px;
    border-top: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.btn-cancel[b-yb0yivpdoc] {
    font-size: 11px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: Verdana, sans-serif;
    transition: background .15s;
}
    .btn-cancel:hover[b-yb0yivpdoc] { background: var(--color-background-secondary); }

.btn-save[b-yb0yivpdoc] {
    font-size: 11px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity .15s;
}
    .btn-save:hover:not(:disabled)[b-yb0yivpdoc] { opacity: .82; }
    .btn-save:disabled[b-yb0yivpdoc] { opacity: .4; cursor: not-allowed; }
    .btn-save i[b-yb0yivpdoc] { font-size: 13px; }

.btn-spinner[b-yb0yivpdoc] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 140, 0, 0.25);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-yb0yivpdoc .8s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   FORMULÁRIO DO MODAL
════════════════════════════════════════════════════════════ */

.form-group[b-yb0yivpdoc] { display: flex; flex-direction: column; gap: 4px; }

.form-label[b-yb0yivpdoc] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.form-input[b-yb0yivpdoc] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    color: var(--color-text-primary);
    outline: none;
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}
    .form-input[b-yb0yivpdoc]::placeholder { color: var(--color-text-secondary); }
    .form-input:focus[b-yb0yivpdoc] { border-color: var(--color-border-secondary); }

.input-err[b-yb0yivpdoc] { border-color: rgba(163, 45, 45, 0.45) !important; }

.form-error[b-yb0yivpdoc] {
    font-size: 10px;
    color: #e84e1b;
}

/* ── Paleta de cores ── */
.color-palette[b-yb0yivpdoc] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.color-swatch[b-yb0yivpdoc] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s, border-color .12s;
    padding: 0;
}
    .color-swatch:hover[b-yb0yivpdoc] { transform: scale(1.15); }

.swatch-active[b-yb0yivpdoc] {
    border-color: var(--color-text-primary);
    transform: scale(1.15);
}

/* ── Preview do badge ── */
.badge-preview[b-yb0yivpdoc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--color-background-secondary);
    border-radius: 8px;
}

.preview-dot[b-yb0yivpdoc] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.preview-badge[b-yb0yivpdoc] {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    border: 0.5px solid;
    transition: all .2s;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVIDADE
════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .cc-page[b-yb0yivpdoc]    { padding: 1rem; }
    .kpi-row[b-yb0yivpdoc]    { grid-template-columns: 1fr 1fr; }
    .bar-row[b-yb0yivpdoc]    { grid-template-columns: 120px 1fr 70px 36px; }

    .page-header[b-yb0yivpdoc] {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-new[b-yb0yivpdoc] { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .cc-page[b-yb0yivpdoc]    { padding: .75rem; }
    .kpi-row[b-yb0yivpdoc]    { grid-template-columns: 1fr; }
    .bar-row[b-yb0yivpdoc]    { grid-template-columns: 100px 1fr 60px; }
    .bar-pct[b-yb0yivpdoc]    { display: none; }
    .cc-item-bot[b-yb0yivpdoc] { padding-left: 0; flex-wrap: wrap; }
}

@keyframes spin-b-yb0yivpdoc {
    to { transform: rotate(360deg); }
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* ============================================================
   Leuca — Dashboard
   Dashboard.razor.css  (scoped)
   ============================================================ */

.dashboard-page[b-ab7ioxzkc8] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Saudação ── */
.greeting-row[b-ab7ioxzkc8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.greeting-title[b-ab7ioxzkc8] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}

.greeting-sub[b-ab7ioxzkc8] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 3px;
}

.notif-btn[b-ab7ioxzkc8] {
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

    .notif-btn i[b-ab7ioxzkc8] {
        font-size: 22px;
        color: #ff8c00;
    }

.notif-count[b-ab7ioxzkc8] {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #e84e1b;
    color: #fff8f0;
    font-size: 9px;
    font-weight: 500;
    border-radius: 20px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* ── Ações rápidas ── */
.quick-actions[b-ab7ioxzkc8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.qa-btn[b-ab7ioxzkc8] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 14px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    position: relative;
    font-family: Verdana, sans-serif;
    transition: border-color .15s;
}

    .qa-btn:hover[b-ab7ioxzkc8] {
        border-color: #ff8c00;
    }

.qa-active[b-ab7ioxzkc8] {
    border: 1.5px solid #ff8c00 !important;
}

.qa-icon[b-ab7ioxzkc8] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .qa-icon i[b-ab7ioxzkc8] {
        font-size: 17px;
    }

.qa-o1[b-ab7ioxzkc8] {
    background: rgba(255, 140, 0, 0.15);
}

    .qa-o1 i[b-ab7ioxzkc8] {
        color: #ff8c00;
    }

.qa-o2[b-ab7ioxzkc8] {
    background: rgba(232, 78, 27, 0.15);
}

    .qa-o2 i[b-ab7ioxzkc8] {
        color: #e84e1b;
    }

.qa-o3[b-ab7ioxzkc8] {
    background: rgba(180, 83, 9, 0.15);
}

    .qa-o3 i[b-ab7ioxzkc8] {
        color: #e8a020;
    }

.qa-o4[b-ab7ioxzkc8] {
    background: rgba(255, 255, 255, 0.08);
}

    .qa-o4 i[b-ab7ioxzkc8] {
        color: #aaa;
    }

.qa-label[b-ab7ioxzkc8] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-align: center;
}

.qa-badge[b-ab7ioxzkc8] {
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 20px;
    background: #ff8c00;
    color: #1a1a1a;
}

/* ── KPIs ── */
.kpi-row[b-ab7ioxzkc8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.kpi-card[b-ab7ioxzkc8] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 13px 15px;
}

.kpi-label[b-ab7ioxzkc8] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

.kpi-value[b-ab7ioxzkc8] {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 3px;
}

.kv-orange[b-ab7ioxzkc8] {
    color: #ff8c00;
}

.kv-red[b-ab7ioxzkc8] {
    color: #e84e1b;
}

.kv-green[b-ab7ioxzkc8] {
    color: #7ec94a;
}

.kv-text[b-ab7ioxzkc8] {
    color: var(--color-text-primary);
}

.kpi-sub[b-ab7ioxzkc8] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

.kpi-bar[b-ab7ioxzkc8] {
    height: 3px;
    border-radius: 2px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.kpi-fill[b-ab7ioxzkc8] {
    height: 100%;
    border-radius: 2px;
    transition: width .6s ease;
}

.fill-orange[b-ab7ioxzkc8] {
    background: #ff8c00;
}

.fill-red[b-ab7ioxzkc8] {
    background: #e84e1b;
}

.fill-green[b-ab7ioxzkc8] {
    background: #7ec94a;
}

.fill-yellow[b-ab7ioxzkc8] {
    background: #e8a020;
}

/* ══════════════════════════════════════════════════════════════
   ── Card de ISTs (Registros disponíveis) ──
   Três variantes: ist-ok · ist-low · ist-empty
   Borda esquerda colorida sinaliza o estado do saldo.
   ══════════════════════════════════════════════════════════════ */

.ist-card[b-ab7ioxzkc8] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
    overflow: hidden;
}

.ist-ok[b-ab7ioxzkc8] {
    border-left: 3px solid #7ec94a;
}

.ist-low[b-ab7ioxzkc8] {
    border-left: 3px solid #ff8c00;
}

.ist-empty[b-ab7ioxzkc8] {
    border-left: 3px solid #e84e1b;
}

.ist-inner[b-ab7ioxzkc8] {
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Ícone */
.ist-icon-wrap[b-ab7ioxzkc8] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.ist-ok .ist-icon-wrap[b-ab7ioxzkc8] {
    background: rgba(126, 201, 74, 0.12);
    color: #7ec94a;
}

.ist-low .ist-icon-wrap[b-ab7ioxzkc8] {
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
}

.ist-empty .ist-icon-wrap[b-ab7ioxzkc8] {
    background: rgba(232, 78, 27, 0.12);
    color: #e84e1b;
}

/* Corpo */
.ist-body[b-ab7ioxzkc8] {
    flex: 1;
    min-width: 0;
}

.ist-label[b-ab7ioxzkc8] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}

.ist-count[b-ab7ioxzkc8] {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.ist-ok .ist-count[b-ab7ioxzkc8] {
    color: #7ec94a;
}

.ist-low .ist-count[b-ab7ioxzkc8] {
    color: #ff8c00;
}

.ist-empty .ist-count[b-ab7ioxzkc8] {
    color: #e84e1b;
}

.ist-count small[b-ab7ioxzkc8] {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.ist-sub[b-ab7ioxzkc8] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 3px;
}

/* Pill de status */
.ist-pill[b-ab7ioxzkc8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    margin-top: 4px;
}

.ist-ok .ist-pill[b-ab7ioxzkc8] {
    background: rgba(126, 201, 74, 0.18);
    color: #7ec94a;
}

.ist-low .ist-pill[b-ab7ioxzkc8] {
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
}

.ist-empty .ist-pill[b-ab7ioxzkc8] {
    background: rgba(232, 78, 27, 0.18);
    color: #e84e1b;
}

/* Botão de recarga */
.ist-right[b-ab7ioxzkc8] {
    flex-shrink: 0;
}

.btn-recarga[b-ab7ioxzkc8] {
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    text-decoration: none;
    border: 1px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.1);
    color: #ff8c00;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity .15s;
}

    .btn-recarga:hover[b-ab7ioxzkc8] {
        opacity: .82;
    }

    .btn-recarga i[b-ab7ioxzkc8] {
        font-size: 13px;
    }

.btn-recarga-empty[b-ab7ioxzkc8] {
    border-color: rgba(232, 78, 27, 0.4);
    background: rgba(232, 78, 27, 0.1);
    color: #e84e1b;
}

/* Barra de progresso */
.ist-bar-wrap[b-ab7ioxzkc8] {
    padding: 0 15px 12px;
}

.ist-bar-bg[b-ab7ioxzkc8] {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.ist-bar-fill[b-ab7ioxzkc8] {
    height: 100%;
    border-radius: 2px;
    transition: width .6s ease;
}

.ist-ok .ist-bar-fill[b-ab7ioxzkc8] {
    background: #7ec94a;
}

.ist-low .ist-bar-fill[b-ab7ioxzkc8] {
    background: #ff8c00;
}

.ist-empty .ist-bar-fill[b-ab7ioxzkc8] {
    background: #e84e1b;
}

/* ── Alertas ── */
.alert-strip[b-ab7ioxzkc8] {
    background: rgba(232, 78, 27, 0.10);
    border-left: 3px solid #e84e1b;
    border-radius: 0;
    padding: 9px 13px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

    .alert-strip i[b-ab7ioxzkc8] {
        font-size: 16px;
        color: #e84e1b;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .alert-strip.alert-warning[b-ab7ioxzkc8] {
        background: rgba(255, 140, 0, 0.10);
        border-left-color: #ff8c00;
    }

        .alert-strip.alert-warning i[b-ab7ioxzkc8] {
            color: #ff8c00;
        }

.alert-title[b-ab7ioxzkc8] {
    font-size: 11px;
    font-weight: 500;
    color: #ff8c00;
}

.alert-desc[b-ab7ioxzkc8] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    line-height: 1.5;
}

/* ── Layout duas colunas ── */
.row-2[b-ab7ioxzkc8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Cards ── */
.card[b-ab7ioxzkc8] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.card-hd[b-ab7ioxzkc8] {
    padding: 10px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title[b-ab7ioxzkc8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .card-title i[b-ab7ioxzkc8] {
        font-size: 15px;
        color: #ff8c00;
    }

.count-badge[b-ab7ioxzkc8] {
    font-size: 10px;
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
    border-radius: 20px;
    padding: 1px 7px;
    font-weight: 500;
}

.card-link[b-ab7ioxzkc8] {
    font-size: 11px;
    color: #ff8c00;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    font-family: Verdana, sans-serif;
}

/* ── Aprovações pendentes ── */
.aprov-row[b-ab7ioxzkc8] {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    cursor: pointer;
    transition: background .12s;
}

    .aprov-row:last-child[b-ab7ioxzkc8] {
        border-bottom: none;
    }

    .aprov-row:hover[b-ab7ioxzkc8] {
        background: var(--color-background-secondary);
    }

.aprov-info[b-ab7ioxzkc8] {
    flex: 1;
    min-width: 0;
}

.aprov-name[b-ab7ioxzkc8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aprov-meta[b-ab7ioxzkc8] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.aprov-right[b-ab7ioxzkc8] {
    text-align: right;
    flex-shrink: 0;
}

.aprov-amount[b-ab7ioxzkc8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ── Calendário ── */
.cal-body[b-ab7ioxzkc8] {
    padding: 10px 14px 14px;
}

.cal-month[b-ab7ioxzkc8] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.cal-grid[b-ab7ioxzkc8] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.cal-dh[b-ab7ioxzkc8] {
    font-size: 9px;
    color: var(--color-text-secondary);
    padding: 3px 0;
    font-weight: 500;
}

.cal-d[b-ab7ioxzkc8] {
    font-size: 11px;
    padding: 5px 2px;
    border-radius: 50%;
    color: var(--color-text-primary);
    position: relative;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-empty[b-ab7ioxzkc8] {
    color: transparent;
}

.cal-today[b-ab7ioxzkc8] {
    background: #ff8c00;
    color: #1a1a1a;
    font-weight: 500;
}

.cal-pending[b-ab7ioxzkc8]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff8c00;
}

.cal-overdue[b-ab7ioxzkc8]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #e84e1b;
}

.cal-legend[b-ab7ioxzkc8] {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    justify-content: center;
}

.cal-leg-item[b-ab7ioxzkc8] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--color-text-secondary);
}

.dot-orange[b-ab7ioxzkc8] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff8c00;
}

.dot-red[b-ab7ioxzkc8] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e84e1b;
}

/* ── Avatar ── */
.bill-av[b-ab7ioxzkc8] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

/* ── Bill item ── */
.bill-item[b-ab7ioxzkc8] {
    border-bottom: 0.5px solid var(--color-border-tertiary);
    cursor: pointer;
    transition: background .12s;
}

    .bill-item:last-child[b-ab7ioxzkc8] {
        border-bottom: none;
    }

    .bill-item:hover[b-ab7ioxzkc8] {
        background: var(--color-background-secondary);
    }

.bill-top[b-ab7ioxzkc8] {
    padding: 11px 15px 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.bill-bot[b-ab7ioxzkc8] {
    padding: 7px 15px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.bill-info[b-ab7ioxzkc8] {
    flex: 1;
    min-width: 0;
}

.bill-name[b-ab7ioxzkc8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bill-meta[b-ab7ioxzkc8] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.bill-right[b-ab7ioxzkc8] {
    flex-shrink: 0;
    text-align: right;
}

.bill-amount[b-ab7ioxzkc8] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.bill-spacer[b-ab7ioxzkc8] {
    flex: 1;
}

.due-hot[b-ab7ioxzkc8] {
    font-size: 10px;
    color: #e84e1b;
    font-weight: 500;
    margin-top: 3px;
}

.due-ok[b-ab7ioxzkc8] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 3px;
}

/* ── Pills ── */
.pill[b-ab7ioxzkc8] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
}

.p-pending[b-ab7ioxzkc8] {
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
}

.p-overdue[b-ab7ioxzkc8] {
    background: rgba(232, 78, 27, 0.18);
    color: #e84e1b;
}

.p-approved[b-ab7ioxzkc8] {
    background: rgba(126, 201, 74, 0.18);
    color: #7ec94a;
}

/* ── Pill de origem ── */
.pill-origem[b-ab7ioxzkc8] {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 500;
    padding: 1px 6px;
    margin-left: 5px;
    vertical-align: middle;
}

.p-manual[b-ab7ioxzkc8] {
    background: rgba(100, 160, 255, 0.15);
    color: #64a0ff;
}

/* ── Botões de ação ── */
.btn-act[b-ab7ioxzkc8] {
    padding: 5px 13px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid;
    transition: opacity .15s;
    white-space: nowrap;
}

    .btn-act:hover[b-ab7ioxzkc8] {
        opacity: .82;
    }

    .btn-act i[b-ab7ioxzkc8] {
        font-size: 13px;
    }

.b-aprv[b-ab7ioxzkc8] {
    background: rgba(126, 201, 74, 0.15);
    color: #7ec94a;
    border-color: rgba(126, 201, 74, 0.4);
}

.b-rej[b-ab7ioxzkc8] {
    background: rgba(232, 78, 27, 0.15);
    color: #e84e1b;
    border-color: rgba(232, 78, 27, 0.4);
}

.b-pay[b-ab7ioxzkc8] {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
    border-color: rgba(255, 140, 0, 0.4);
}

/* ── Pagamentos recentes ── */
.pay-row[b-ab7ioxzkc8] {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

    .pay-row:last-child[b-ab7ioxzkc8] {
        border-bottom: none;
    }

.pay-ic[b-ab7ioxzkc8] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(126, 201, 74, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pay-ic i[b-ab7ioxzkc8] {
        font-size: 14px;
        color: #7ec94a;
    }

.pay-info[b-ab7ioxzkc8] {
    flex: 1;
    min-width: 0;
}

.pay-name[b-ab7ioxzkc8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pay-date[b-ab7ioxzkc8] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.pay-amt[b-ab7ioxzkc8] {
    font-size: 13px;
    font-weight: 500;
    color: #7ec94a;
    flex-shrink: 0;
}

/* ── Empty / loading ── */
.empty-mini[b-ab7ioxzkc8] {
    padding: 20px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

    .empty-mini i[b-ab7ioxzkc8] {
        font-size: 18px;
        color: var(--color-text-secondary);
    }

.loading-mini[b-ab7ioxzkc8] {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.loading-state[b-ab7ioxzkc8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: .75rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.loading-spinner[b-ab7ioxzkc8] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-ab7ioxzkc8 .9s linear infinite;
}

.loading-spinner-sm[b-ab7ioxzkc8] {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-ab7ioxzkc8 .9s linear infinite;
}

.loading-text[b-ab7ioxzkc8] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ── Responsividade ── */
@media (max-width: 768px) {
    .dashboard-page[b-ab7ioxzkc8] {
        padding: 1rem;
    }

    .quick-actions[b-ab7ioxzkc8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-row[b-ab7ioxzkc8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .row-2[b-ab7ioxzkc8] {
        grid-template-columns: 1fr;
    }

    .ist-inner[b-ab7ioxzkc8] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ist-right[b-ab7ioxzkc8] {
        width: 100%;
    }

    .btn-recarga[b-ab7ioxzkc8] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .dashboard-page[b-ab7ioxzkc8] {
        padding: .75rem;
    }

    .kpi-row[b-ab7ioxzkc8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@keyframes spin-b-ab7ioxzkc8 {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* Imagem do splash centralizada e responsiva */
.splash-logo[b-fahfvx2ior] {
    width: 264px;
    height: 264px;
    max-width: 80vw; /* não ultrapassa 80% da tela em celulares pequenos */
    max-height: 80vh; /* mantém proporção quadrada */
    object-fit: contain;
    display: block;
}
/* /Pages/KPIs.razor.rz.scp.css */
/* ============================================================
   Leuca — KPIs (Painel de Indicadores)
   KPIs.razor.css  (scoped)
   ============================================================ */

.kpis-page[b-gjtun0zk1z] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Header ── */
.page-header[b-gjtun0zk1z] {
    box-sizing: border-box;
}

.page-title[b-gjtun0zk1z] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 .2rem;
}

.page-subtitle[b-gjtun0zk1z] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0;
}

.divider[b-gjtun0zk1z] {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: .1rem 0;
}

/* ══════════════════════════════════════════════════════════
   KPI GRID  3 × 2
══════════════════════════════════════════════════════════ */
.kpi-grid[b-gjtun0zk1z] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.kpi-card[b-gjtun0zk1z] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 13px 15px;
}

.kpi-label[b-gjtun0zk1z] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

.kpi-value[b-gjtun0zk1z] {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 3px;
}

.kv-orange[b-gjtun0zk1z] {
    color: #ff8c00;
}

.kv-red[b-gjtun0zk1z] {
    color: #e84e1b;
}

.kv-green[b-gjtun0zk1z] {
    color: #7ec94a;
}

.kv-blue[b-gjtun0zk1z] {
    color: #378add;
}

.kv-text[b-gjtun0zk1z] {
    color: var(--color-text-primary);
}

.kpi-sub[b-gjtun0zk1z] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.kpi-bar[b-gjtun0zk1z] {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.kpi-fill[b-gjtun0zk1z] {
    height: 100%;
    border-radius: 2px;
    transition: width .6s ease;
}

.fill-orange[b-gjtun0zk1z] {
    background: #ff8c00;
}

.fill-red[b-gjtun0zk1z] {
    background: #e84e1b;
}

.fill-green[b-gjtun0zk1z] {
    background: #7ec94a;
}

.fill-blue[b-gjtun0zk1z] {
    background: #378add;
}

.fill-gray[b-gjtun0zk1z] {
    background: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════
   ALERT ROW
══════════════════════════════════════════════════════════ */
.alert-row[b-gjtun0zk1z] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.alert-card[b-gjtun0zk1z] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-icon[b-gjtun0zk1z] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .alert-icon i[b-gjtun0zk1z] {
        font-size: 17px;
    }

.ai-orange[b-gjtun0zk1z] {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

.ai-red[b-gjtun0zk1z] {
    background: rgba(232, 78, 27, 0.15);
    color: #e84e1b;
}

.ai-blue[b-gjtun0zk1z] {
    background: rgba(55, 138, 221, 0.15);
    color: #378add;
}

.alert-info[b-gjtun0zk1z] {
    flex: 1;
    min-width: 0;
}

.alert-val[b-gjtun0zk1z] {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 2px;
}

.alert-lbl[b-gjtun0zk1z] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════
   PANELS
══════════════════════════════════════════════════════════ */
.two-col[b-gjtun0zk1z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.panel[b-gjtun0zk1z] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.panel-hd[b-gjtun0zk1z] {
    padding: 10px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-dot[b-gjtun0zk1z] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: #ff8c00;
    flex-shrink: 0;
}

.panel-title[b-gjtun0zk1z] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.panel-sub[b-gjtun0zk1z] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-left: auto;
}

/* ── Charts ── */
.chart-wrap[b-gjtun0zk1z] {
    padding: 12px 15px;
    position: relative;
    height: 160px;
}

.chart-empty[b-gjtun0zk1z] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-secondary);
}

    .chart-empty i[b-gjtun0zk1z] {
        font-size: 26px;
        opacity: .25;
    }

    .chart-empty span[b-gjtun0zk1z] {
        font-size: 11px;
        opacity: .5;
    }

/* ── Próximos vencimentos ── */
.upc-item[b-gjtun0zk1z] {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 0.5px solid var(--color-border-tertiary);
    transition: background .12s;
}

    .upc-item:hover[b-gjtun0zk1z] {
        background: var(--color-background-secondary);
    }

.upc-av[b-gjtun0zk1z] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
}

.upc-info[b-gjtun0zk1z] {
    flex: 1;
    min-width: 0;
}

.upc-name[b-gjtun0zk1z] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upc-desc[b-gjtun0zk1z] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 1px;
}

.upc-right[b-gjtun0zk1z] {
    text-align: right;
    flex-shrink: 0;
}

.upc-val[b-gjtun0zk1z] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.upc-due[b-gjtun0zk1z] {
    font-size: 10px;
    margin-top: 1px;
}

.due-hot[b-gjtun0zk1z] {
    color: #e84e1b;
    font-weight: 500;
}

.due-ok[b-gjtun0zk1z] {
    color: var(--color-text-secondary);
}

/* ── Maior gasto por credor ── */
.creditors-wrap[b-gjtun0zk1z] {
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cred-row[b-gjtun0zk1z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cred-name[b-gjtun0zk1z] {
    font-size: 11px;
    color: var(--color-text-primary);
    width: 130px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cred-bar-track[b-gjtun0zk1z] {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.cred-bar-fill[b-gjtun0zk1z] {
    height: 100%;
    border-radius: 2px;
    background: #ff8c00;
    transition: width .6s ease;
}

.cred-val[b-gjtun0zk1z] {
    font-size: 10px;
    color: var(--color-text-secondary);
    min-width: 55px;
    text-align: right;
}

/* ── Empty / Error ── */
.empty-state[b-gjtun0zk1z] {
    padding: 24px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    text-align: center;
}

    .empty-state i[b-gjtun0zk1z] {
        font-size: 24px;
        opacity: .3;
    }

    .empty-state span[b-gjtun0zk1z] {
        font-size: 11px;
    }

.error-banner[b-gjtun0zk1z] {
    background: rgba(232, 78, 27, 0.10);
    border-left: 3px solid #e84e1b;
    border-radius: 0;
    padding: 10px 14px;
    font-size: 11px;
    color: #e84e1b;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .error-banner i[b-gjtun0zk1z] {
        font-size: 15px;
        flex-shrink: 0;
    }

/* ── Loading ── */
.loading-state[b-gjtun0zk1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: .75rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.loading-spinner[b-gjtun0zk1z] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-gjtun0zk1z .9s linear infinite;
}

.loading-text[b-gjtun0zk1z] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .kpis-page[b-gjtun0zk1z] {
        padding: 1rem;
    }

    .kpi-grid[b-gjtun0zk1z] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alert-row[b-gjtun0zk1z] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-col[b-gjtun0zk1z] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .kpis-page[b-gjtun0zk1z] {
        padding: .75rem;
    }

    .kpi-grid[b-gjtun0zk1z] {
        grid-template-columns: minmax(0, 1fr);
    }

    .alert-row[b-gjtun0zk1z] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cred-name[b-gjtun0zk1z] {
        width: 90px;
    }
}

@keyframes spin-b-gjtun0zk1z {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* ============================================================
   Leuca — Login
   Login.razor.css  (scoped)
   ============================================================ */

/* ── Página ── */
.login-page[b-b0wu0frzyy] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-top: 1rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
}

/* ── Hero ── */
.login-hero[b-b0wu0frzyy] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 1.5rem;
    text-align: center;
}

/* ── Card principal ── */
.login-card[b-b0wu0frzyy] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: var(--color-background-primary);
    border-radius: 16px;
    border: 0.5px solid var(--color-border-tertiary);
    padding: 3rem;
    box-sizing: border-box;
}

/* ── Tagline ── */
.login-tagline[b-b0wu0frzyy] {
    font-size: .85rem;
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: .5rem;
}

/* ── Formulário ── */
.login-form[b-b0wu0frzyy] {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.login-card-title[b-b0wu0frzyy] {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: .25rem;
}

.login-card-sub[b-b0wu0frzyy] {
    font-size: .85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════
   CAMPOS
══════════════════════════════════════════════════════════ */
.field-group[b-b0wu0frzyy] {
    margin-bottom: 1rem;
    text-align: left;
}

.field-label[b-b0wu0frzyy] {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: .35rem;
    letter-spacing: .3px;
}

.field-input-wrap[b-b0wu0frzyy] {
    position: relative;
}

.field-icon[b-b0wu0frzyy] {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
    color: var(--color-text-secondary);
}

.field-input[b-b0wu0frzyy] {
    width: 100%;
    box-sizing: border-box;
    padding: .8rem .875rem .8rem 2.6rem;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 10px;
    font-size: .9rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color .2s, background .2s;
}

    .field-input:focus[b-b0wu0frzyy] {
        border-color: #ff8c00;
        background: var(--color-background-secondary);
    }

    .field-input[b-b0wu0frzyy]::placeholder {
        color: var(--color-text-secondary);
        opacity: .5;
    }

/* ── Esqueceu a senha ── */
.forgot-link[b-b0wu0frzyy] {
    display: block;
    text-align: right;
    font-size: .72rem;
    color: #ff8c00;
    font-weight: 500;
    margin-top: .4rem;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s;
}

    .forgot-link:hover[b-b0wu0frzyy] {
        opacity: .8;
    }

/* ── Error banner ── */
.error-banner[b-b0wu0frzyy] {
    background: rgba(232, 78, 27, 0.10);
    border: 0.5px solid rgba(232, 78, 27, 0.3);
    border-left: 3px solid #e84e1b;
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .78rem;
    color: #e84e1b;
    margin-bottom: .75rem;
}

/* ── Spacer ── */
.spacer[b-b0wu0frzyy] {
    min-height: 1.25rem;
}

/* ══════════════════════════════════════════════════════════
   BOTÕES
══════════════════════════════════════════════════════════ */
.btn[b-b0wu0frzyy] {
    width: 100%;
    padding: .9rem;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: .95rem;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    transition: opacity .2s;
    box-sizing: border-box;
}

    .btn:disabled[b-b0wu0frzyy] {
        opacity: .5;
        cursor: not-allowed;
    }

.btn-primary[b-b0wu0frzyy] {
    background: #ff8c00;
    color: #412402;
}

    .btn-primary:hover:not(:disabled)[b-b0wu0frzyy] {
        opacity: .88;
    }

.btn-outline[b-b0wu0frzyy] {
    background: none;
    color: #ff8c00;
    border: 0.5px solid rgba(255, 140, 0, 0.4);
    margin-top: 0;
}

    .btn-outline:hover:not(:disabled)[b-b0wu0frzyy] {
        background: rgba(255, 140, 0, 0.08);
    }

/* ── Spinner ── */
.btn-spinner[b-b0wu0frzyy] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #412402;
    border-radius: 50%;
    animation: spin-b-b0wu0frzyy .7s linear infinite;
    flex-shrink: 0;
}

/* ── Divider "ou" ── */
.divider-text[b-b0wu0frzyy] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    font-size: .72rem;
    color: var(--color-text-secondary);
}

    .divider-text[b-b0wu0frzyy]::before,
    .divider-text[b-b0wu0frzyy]::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--color-border-tertiary);
    }

/* ── Termos ── */
.login-terms[b-b0wu0frzyy] {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .65rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.terms-link[b-b0wu0frzyy] {
    color: #ff8c00;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .login-card[b-b0wu0frzyy] {
        padding: 2rem;
    }
}

@media (max-width: 480px) {
    .login-card[b-b0wu0frzyy] {
        padding: 1.5rem 1rem;
        border-radius: 12px;
    }

    .login-tagline[b-b0wu0frzyy] {
        font-size: .95rem;
    }
}

@keyframes spin-b-b0wu0frzyy {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Logoff.razor.rz.scp.css */
.logoff-logo[b-zuzkci0km2] {
    width: 256px;
    height: 100px;
    max-width: 80vw;
    object-fit: contain;
    display: block;
}
/* /Pages/ManualCollection.razor.rz.scp.css */
/* ============================================================
   Leuca — ManualCollection (Registrar cobrança manual)
   ManualCollection.razor.css  (scoped)
   ============================================================ */

.mcf-page[b-lbd2h07scc] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Header da página ── */
.page-hd[b-lbd2h07scc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-back[b-lbd2h07scc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: #ff8c00;
    background: transparent;
    border: 0.5px solid rgba(255, 140, 0, 0.35);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}

    .btn-back:hover[b-lbd2h07scc] {
        background: rgba(255, 140, 0, 0.08);
    }

    .btn-back i[b-lbd2h07scc] {
        font-size: 13px;
    }

.page-titles[b-lbd2h07scc] {
    flex: 1;
    min-width: 0;
}

.page-title[b-lbd2h07scc] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 .2rem;
}

.page-sub[b-lbd2h07scc] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Divider ── */
.divider[b-lbd2h07scc] {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: .25rem 0;
}

/* ── Aviso LGPD ── */
.aviso[b-lbd2h07scc] {
    background: rgba(255, 140, 0, 0.06);
    border-left: 3px solid #ff8c00;
    border-radius: 0;
    padding: 8px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

    .aviso i[b-lbd2h07scc] {
        font-size: 13px;
        color: #ff8c00;
        flex-shrink: 0;
        margin-top: 1px;
    }

/* ── Erro ── */
.error-banner[b-lbd2h07scc] {
    background: rgba(232, 78, 27, 0.10);
    border-left: 3px solid #e84e1b;
    border-radius: 0;
    padding: 10px 14px;
    font-size: 11px;
    color: #e84e1b;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .error-banner i[b-lbd2h07scc] {
        font-size: 15px;
        flex-shrink: 0;
    }

/* ── Card ── */
.card[b-lbd2h07scc] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.card-hd[b-lbd2h07scc] {
    padding: 11px 16px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-hd-dot[b-lbd2h07scc] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #ff8c00;
    flex-shrink: 0;
}

.card-hd-title[b-lbd2h07scc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ════════════════════════════════════════════════════════════
   FORMULÁRIO
════════════════════════════════════════════════════════════ */

.form-body[b-lbd2h07scc] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group[b-lbd2h07scc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-lbd2h07scc] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.form-input[b-lbd2h07scc] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--color-text-primary);
    outline: none;
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}

    .form-input[b-lbd2h07scc]::placeholder {
        color: var(--color-text-secondary);
    }

    .form-input:focus[b-lbd2h07scc] {
        border-color: var(--color-border-secondary);
    }

    .form-input:disabled[b-lbd2h07scc] {
        opacity: .45;
        cursor: not-allowed;
    }

.form-helper[b-lbd2h07scc] {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* ── Campos desabilitados (sem fornecedor) ── */
.fields-disabled[b-lbd2h07scc] {
    opacity: .38;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ════════════════════════════════════════════════════════════
   SELECTOR DE FORNECEDOR
════════════════════════════════════════════════════════════ */

.sup-wrap[b-lbd2h07scc] {
    position: relative;
    display: flex;
    align-items: center;
}

.sup-icon[b-lbd2h07scc] {
    position: absolute;
    left: 10px;
    font-size: 15px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.sup-input[b-lbd2h07scc] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 7px 32px 7px 34px;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--color-text-primary);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s;
}

    .sup-input[b-lbd2h07scc]::placeholder {
        color: var(--color-text-secondary);
    }

    .sup-input:focus[b-lbd2h07scc] {
        border-color: var(--color-border-secondary);
    }

.sup-arrow[b-lbd2h07scc] {
    position: absolute;
    right: 10px;
    font-size: 13px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

/* ── Dropdown ── */
.dropdown[b-lbd2h07scc] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 4px;
}

.dd-item[b-lbd2h07scc] {
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    transition: background .1s;
}

    .dd-item:last-of-type[b-lbd2h07scc] {
        border-bottom: none;
    }

    .dd-item:hover[b-lbd2h07scc] {
        background: var(--color-background-secondary);
    }

.dd-av[b-lbd2h07scc] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
}

.dd-info[b-lbd2h07scc] {
    flex: 1;
    min-width: 0;
}

.dd-name[b-lbd2h07scc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dd-cnpj[b-lbd2h07scc] {
    font-size: 10px;
    color: var(--color-text-secondary);
    font-family: 'Courier New', monospace;
}

.dd-badge[b-lbd2h07scc] {
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.badge-pix[b-lbd2h07scc] {
    color: #3b6d11;
}

.badge-warn[b-lbd2h07scc] {
    color: #854f0b;
}

.badge-none[b-lbd2h07scc] {
    color: var(--color-text-secondary);
}

.dd-empty[b-lbd2h07scc] {
    padding: 16px 12px;
    font-size: 11px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
}

    .dd-empty i[b-lbd2h07scc] {
        font-size: 14px;
        opacity: .5;
    }

.dd-new[b-lbd2h07scc] {
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-top: 0.5px solid var(--color-border-tertiary);
    background: rgba(255, 140, 0, 0.04);
    transition: background .15s;
}

    .dd-new:hover[b-lbd2h07scc] {
        background: rgba(255, 140, 0, 0.09);
    }

    .dd-new > i[b-lbd2h07scc] {
        font-size: 14px;
        color: #854f0b;
        flex-shrink: 0;
    }

.dd-new-label[b-lbd2h07scc] {
    font-size: 11px;
    font-weight: 500;
    color: #854f0b;
}

.dd-new-sub[b-lbd2h07scc] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 1px;
}

/* ── Chip do fornecedor selecionado ── */
.sup-chip[b-lbd2h07scc] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.chip-pix[b-lbd2h07scc] {
    border-color: rgba(59, 109, 17, 0.40);
}

.chip-nopix[b-lbd2h07scc] {
    border-color: var(--color-border-tertiary);
}

.chip-av[b-lbd2h07scc] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.chip-info[b-lbd2h07scc] {
    flex: 1;
    min-width: 0;
}

.chip-name[b-lbd2h07scc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-meta[b-lbd2h07scc] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 1px;
    font-family: 'Courier New', monospace;
}

.chip-tag[b-lbd2h07scc] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    margin-top: 3px;
}

    .chip-tag i[b-lbd2h07scc] {
        font-size: 10px;
    }

.tag-pix[b-lbd2h07scc] {
    background: rgba(59, 109, 17, 0.12);
    color: #3b6d11;
}

.tag-warn[b-lbd2h07scc] {
    background: rgba(133, 79, 11, 0.12);
    color: #854f0b;
}

.tag-nopix[b-lbd2h07scc] {
    color: var(--color-text-secondary);
}

.btn-trocar[b-lbd2h07scc] {
    font-size: 10px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 6px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    font-family: Verdana, sans-serif;
    transition: background .15s;
    flex-shrink: 0;
}

    .btn-trocar:hover[b-lbd2h07scc] {
        background: var(--color-background-secondary);
    }

/* ════════════════════════════════════════════════════════════
   PARCELAS
════════════════════════════════════════════════════════════ */

.parc-section[b-lbd2h07scc] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.parc-hd[b-lbd2h07scc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.btn-add[b-lbd2h07scc] {
    font-size: 10px;
    font-weight: 500;
    background: rgba(255, 140, 0, 0.10);
    color: #854f0b;
    border: 0.5px solid rgba(255, 140, 0, 0.35);
    border-radius: 6px;
    padding: 3px 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: Verdana, sans-serif;
    transition: opacity .15s;
}

    .btn-add:hover[b-lbd2h07scc] {
        opacity: .82;
    }

    .btn-add:disabled[b-lbd2h07scc] {
        opacity: .35;
        cursor: not-allowed;
    }

    .btn-add i[b-lbd2h07scc] {
        font-size: 11px;
    }

.parc-empty[b-lbd2h07scc] {
    padding: 14px 10px;
    font-size: 11px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--color-background-secondary);
    border: 0.5px dashed var(--color-border-tertiary);
    border-radius: 8px;
}

    .parc-empty i[b-lbd2h07scc] {
        font-size: 15px;
        opacity: .4;
    }

.parc-row[b-lbd2h07scc] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 22px 1fr 1fr 22px;
    gap: 8px;
    align-items: center;
}

.parc-num[b-lbd2h07scc] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.parc-input[b-lbd2h07scc] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--color-text-primary);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s;
}

    .parc-input[b-lbd2h07scc]::placeholder {
        color: var(--color-text-secondary);
    }

    .parc-input:focus[b-lbd2h07scc] {
        border-color: var(--color-border-secondary);
    }

    /* Remove setas do input[type=number] */
    .parc-input[type="number"][b-lbd2h07scc]::-webkit-inner-spin-button,
    .parc-input[type="number"][b-lbd2h07scc]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

    .parc-input[type="number"][b-lbd2h07scc] {
        -moz-appearance: textfield;
    }

.btn-rm[b-lbd2h07scc] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

    .btn-rm:hover[b-lbd2h07scc] {
        background: rgba(232, 78, 27, 0.08);
        color: #e84e1b;
        border-color: rgba(232, 78, 27, 0.3);
    }

/* ════════════════════════════════════════════════════════════
   TOTAL + AÇÕES
════════════════════════════════════════════════════════════ */

.total-row[b-lbd2h07scc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-secondary);
}

.total-label[b-lbd2h07scc] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.total-value[b-lbd2h07scc] {
    font-size: 17px;
    font-weight: 500;
    color: #ff8c00;
    transition: color .2s;
}

.total-zero[b-lbd2h07scc] {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.form-actions[b-lbd2h07scc] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 0.5px solid var(--color-border-tertiary);
}

.btn-cancel[b-lbd2h07scc] {
    font-size: 11px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 8px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    transition: background .15s;
}

    .btn-cancel:hover[b-lbd2h07scc] {
        background: var(--color-background-secondary);
    }

.btn-save[b-lbd2h07scc] {
    font-size: 11px;
    font-weight: 500;
    padding: 6px 18px;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity .15s;
}

    .btn-save:hover:not(:disabled)[b-lbd2h07scc] {
        opacity: .82;
    }

    .btn-save:disabled[b-lbd2h07scc] {
        opacity: .38;
        cursor: not-allowed;
    }

    .btn-save i[b-lbd2h07scc] {
        font-size: 13px;
    }

.btn-spinner[b-lbd2h07scc] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 140, 0, 0.25);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-lbd2h07scc .8s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVIDADE
════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .mcf-page[b-lbd2h07scc] {
        padding: 1rem;
    }
}

@media (max-width: 540px) {
    .mcf-page[b-lbd2h07scc] {
        padding: .75rem;
    }

    .parc-row[b-lbd2h07scc] {
        grid-template-columns: 22px 1fr 1fr 22px;
        gap: 6px;
    }

    .form-actions[b-lbd2h07scc] {
        flex-wrap: wrap;
    }

    .btn-cancel[b-lbd2h07scc],
    .btn-save[b-lbd2h07scc] {
        flex: 1;
        justify-content: center;
    }
}

/* ── Animações ── */
@keyframes spin-b-lbd2h07scc {
    to {
        transform: rotate(360deg);
    }
}

/* ════════════════════════════════════════════════════════════
   CENTRO DE CUSTO — dropdown + preview
════════════════════════════════════════════════════════════ */

.cc-wrap[b-lbd2h07scc] {
    position: relative;
    display: flex;
    align-items: center;
}

.cc-select[b-lbd2h07scc] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 7px 32px 7px 10px;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--color-text-secondary);
    outline: none;
    width: 100%;
    cursor: pointer;
    transition: border-color .15s;
}

    .cc-select.has-value[b-lbd2h07scc] {
        color: var(--color-text-primary);
    }

    .cc-select:focus[b-lbd2h07scc] {
        border-color: var(--color-border-secondary);
    }

    .cc-select:disabled[b-lbd2h07scc] {
        opacity: .45;
        cursor: not-allowed;
    }

.cc-chevron[b-lbd2h07scc] {
    position: absolute;
    right: 10px;
    font-size: 13px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.cc-preview[b-lbd2h07scc] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.cc-dot[b-lbd2h07scc] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cc-badge[b-lbd2h07scc] {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
}
/* /Pages/Notifications.razor.rz.scp.css */
/* ============================================================
   Leuca — Notifications
   Notifications.razor.css  (scoped)
   ============================================================ */

/* ── Página ── */
.notif-page[b-wfftgjw6hq] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Cabeçalho ── */
.page-header[b-wfftgjw6hq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-title[b-wfftgjw6hq] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}

.page-sub[b-wfftgjw6hq] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 3px;
}

.btn-mark-all[b-wfftgjw6hq] {
    background: none;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    color: #ff8c00;
    font-size: 10px;
    font-family: Verdana, sans-serif;
    padding: 5px 11px;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-mark-all:hover[b-wfftgjw6hq] {
        background: rgba(255, 140, 0, 0.08);
    }

/* ── Filtros ── */
.filter-row[b-wfftgjw6hq] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-chip[b-wfftgjw6hq] {
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 20px;
    font-size: 10px;
    font-family: Verdana, sans-serif;
    padding: 4px 12px;
    cursor: pointer;
    color: var(--color-text-secondary);
    background: none;
    transition: all 0.15s;
}

    .filter-chip.active[b-wfftgjw6hq] {
        background: rgba(255, 140, 0, 0.15);
        border-color: #ff8c00;
        color: #ff8c00;
    }

    .filter-chip:hover:not(.active)[b-wfftgjw6hq] {
        background: var(--color-background-secondary);
    }

/* ── Lista ── */
.notif-list[b-wfftgjw6hq] {
    display: flex;
    flex-direction: column;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 12px;
    overflow: hidden;
}

.notif-item[b-wfftgjw6hq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    cursor: pointer;
    transition: background 0.12s;
}

    .notif-item:last-child[b-wfftgjw6hq] {
        border-bottom: none;
    }

    .notif-item:hover[b-wfftgjw6hq] {
        background: var(--color-background-secondary);
    }

    .notif-item.unread[b-wfftgjw6hq] {
        background: rgba(255, 140, 0, 0.04);
    }

        .notif-item.unread:hover[b-wfftgjw6hq] {
            background: rgba(255, 140, 0, 0.08);
        }

    /* D-0 e vencidas — faixa lateral vermelha */
    .notif-item.urgency-hoje[b-wfftgjw6hq] {
        background: rgba(232, 78, 27, 0.06);
        border-left: 3px solid #e84e1b;
        padding-left: 12px;
    }

        .notif-item.urgency-hoje:hover[b-wfftgjw6hq] {
            background: rgba(232, 78, 27, 0.10);
        }

/* ── Ponto de não lida ── */
.unread-dot[b-wfftgjw6hq] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

    .unread-dot.orange[b-wfftgjw6hq] {
        background: #ff8c00;
    }

    .unread-dot.red[b-wfftgjw6hq] {
        background: #e84e1b;
    }

    .unread-dot.hidden[b-wfftgjw6hq] {
        background: transparent;
    }

/* ── Ícone ── */
.notif-icon[b-wfftgjw6hq] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

/* 5 níveis de urgência + plataforma */
.ic-d8[b-wfftgjw6hq] {
    background: rgba(255, 140, 0, 0.10);
    color: rgba(255, 140, 0, 0.60);
}

.ic-d4[b-wfftgjw6hq] {
    background: rgba(255, 140, 0, 0.14);
    color: rgba(255, 140, 0, 0.78);
}

.ic-d2[b-wfftgjw6hq] {
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
}

.ic-d1[b-wfftgjw6hq] {
    background: rgba(232, 78, 27, 0.15);
    color: #e84e1b;
}

.ic-d0[b-wfftgjw6hq] {
    background: rgba(232, 78, 27, 0.22);
    color: #e84e1b;
}

.ic-venc[b-wfftgjw6hq] {
    background: rgba(232, 78, 27, 0.28);
    color: #e84e1b;
}

.ic-gray[b-wfftgjw6hq] {
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
}

/* ── Corpo ── */
.notif-body[b-wfftgjw6hq] {
    flex: 1;
    min-width: 0;
}

.notif-title[b-wfftgjw6hq] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.4;
}

    .notif-title.hot[b-wfftgjw6hq] {
        color: #e84e1b;
    }

.notif-desc[b-wfftgjw6hq] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 3px;
    line-height: 1.5;
}

.notif-time[b-wfftgjw6hq] {
    font-size: 9px;
    color: var(--color-text-tertiary);
    margin-top: 5px;
}

/* ── Pill de urgência ── */
.urgency-pill[b-wfftgjw6hq] {
    display: inline-block;
    font-size: 9px;
    font-weight: 500;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.pill-d8[b-wfftgjw6hq] {
    background: rgba(255, 140, 0, 0.12);
    color: rgba(255, 140, 0, 0.65);
}

.pill-d4[b-wfftgjw6hq] {
    background: rgba(255, 140, 0, 0.16);
    color: rgba(255, 140, 0, 0.82);
}

.pill-d2[b-wfftgjw6hq] {
    background: rgba(255, 140, 0, 0.22);
    color: #ff8c00;
}

.pill-d1[b-wfftgjw6hq] {
    background: rgba(232, 78, 27, 0.20);
    color: #e84e1b;
}

.pill-d0[b-wfftgjw6hq] {
    background: rgba(232, 78, 27, 0.28);
    color: #e84e1b;
}

/* ── CTAs ── */
.notif-cta[b-wfftgjw6hq] {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.btn-cta[b-wfftgjw6hq] {
    font-size: 10px;
    font-family: Verdana, sans-serif;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 0.5px solid;
    transition: opacity 0.15s;
    white-space: nowrap;
}

    .btn-cta:hover[b-wfftgjw6hq] {
        opacity: 0.78;
    }

.btn-primary[b-wfftgjw6hq] {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
    border-color: rgba(255, 140, 0, 0.4);
}

.btn-danger[b-wfftgjw6hq] {
    background: rgba(232, 78, 27, 0.15);
    color: #e84e1b;
    border-color: rgba(232, 78, 27, 0.4);
}

.btn-ghost[b-wfftgjw6hq] {
    background: none;
    color: var(--color-text-secondary);
    border-color: var(--color-border-secondary);
}

/* ── Empty state ── */
.empty-state[b-wfftgjw6hq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 10px;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-family: Verdana, sans-serif;
}

    .empty-state i[b-wfftgjw6hq] {
        font-size: 32px;
        color: var(--color-text-tertiary);
    }

/* ── Loading ── */
.loading-state[b-wfftgjw6hq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: .75rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.loading-spinner[b-wfftgjw6hq] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-wfftgjw6hq .9s linear infinite;
}

.loading-text[b-wfftgjw6hq] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ── Responsividade ── */
@media (max-width: 768px) {
    .notif-page[b-wfftgjw6hq] {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .notif-page[b-wfftgjw6hq] {
        padding: .75rem;
    }

    .notif-cta[b-wfftgjw6hq] {
        flex-wrap: wrap;
    }
}

@keyframes spin-b-wfftgjw6hq {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/PaymentHistory.razor.rz.scp.css */
/* ============================================================
   Leuca — PaymentHistory (Histórico de Pagamentos)
   PaymentHistory.razor.css  (scoped)
   ============================================================ */

.paymenthistory-page[b-blhhmenphq] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    min-height: calc(100vh - 200px);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Header ── */
.page-header[b-blhhmenphq] {
    box-sizing: border-box;
}

.btn-back[b-blhhmenphq] {
    background: none;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 6px;
    padding: .3rem .75rem;
    font-size: .72rem;
    font-weight: 700;
    color: #ff8c00;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    margin-bottom: .5rem;
    display: inline-block;
    transition: background .15s;
}

    .btn-back:hover[b-blhhmenphq] {
        background: var(--color-background-secondary);
    }

.page-title[b-blhhmenphq] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: .2rem 0 .2rem;
}

.page-subtitle[b-blhhmenphq] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ── Divider ── */
.divider[b-blhhmenphq] {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: .25rem 0 .25rem;
}

/* ══════════════════════════════════════════════════════════
   SUMMARY CARDS
══════════════════════════════════════════════════════════ */
.summary-grid[b-blhhmenphq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    box-sizing: border-box;
}

.sum-card[b-blhhmenphq] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 13px 15px;
    box-sizing: border-box;
}

.sum-label[b-blhhmenphq] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

.sum-value[b-blhhmenphq] {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 3px;
}

    .sum-value.green[b-blhhmenphq] {
        color: #7ec94a;
    }

    .sum-value.amber[b-blhhmenphq] {
        color: #ff8c00;
    }

    .sum-value.white[b-blhhmenphq] {
        color: var(--color-text-primary);
    }

.sum-sub[b-blhhmenphq] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.sum-bar-track[b-blhhmenphq] {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.sum-bar-fill[b-blhhmenphq] {
    height: 100%;
    border-radius: 2px;
    transition: width .6s ease;
}

.fill-green[b-blhhmenphq] {
    background: #7ec94a;
}

.fill-amber[b-blhhmenphq] {
    background: #ff8c00;
}

.fill-gray[b-blhhmenphq] {
    background: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════
   PAYMENTS PANEL
══════════════════════════════════════════════════════════ */
.payments-panel[b-blhhmenphq] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-sizing: border-box;
}

.panel-header[b-blhhmenphq] {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.panel-title[b-blhhmenphq] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-title-dot[b-blhhmenphq] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #ff8c00;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Filter Tabs ── */
.tab-group[b-blhhmenphq] {
    display: flex;
    gap: .4rem;
}

.tab[b-blhhmenphq] {
    border: 0.5px solid var(--color-border-tertiary);
    background: none;
    color: var(--color-text-secondary);
    border-radius: 6px;
    padding: .3rem .85rem;
    font-size: .7rem;
    font-weight: 700;
    font-family: Verdana, sans-serif;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

    .tab:hover[b-blhhmenphq] {
        background: var(--color-background-secondary);
        color: var(--color-text-primary);
    }

    .tab.active[b-blhhmenphq] {
        background: var(--color-background-secondary);
        color: var(--color-text-primary);
        border-color: var(--color-border-secondary);
    }

/* ── Month Label ── */
.month-label[b-blhhmenphq] {
    padding: 8px 15px 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   HISTORY ITEMS
══════════════════════════════════════════════════════════ */
.history-item[b-blhhmenphq] {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 0.5px solid var(--color-border-tertiary);
    transition: background .12s;
    box-sizing: border-box;
    cursor: default;
}

    .history-item:hover[b-blhhmenphq] {
        background: var(--color-background-secondary);
    }

.history-avatar[b-blhhmenphq] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 11px;
    flex-shrink: 0;
}

.history-info[b-blhhmenphq] {
    flex: 1;
    min-width: 0;
}

.history-name[b-blhhmenphq] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-desc[b-blhhmenphq] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

.meta-sep[b-blhhmenphq] {
    color: var(--color-border-secondary);
}

.installment[b-blhhmenphq] {
    font-weight: 500;
    color: #ff8c00;
}

.tag-paid[b-blhhmenphq] {
    border: 0.5px solid rgba(126, 201, 74, 0.4);
    background: rgba(126, 201, 74, 0.15);
    color: #7ec94a;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    white-space: nowrap;
}

.history-right[b-blhhmenphq] {
    text-align: right;
    flex-shrink: 0;
}

.history-amount[b-blhhmenphq] {
    font-size: 13px;
    font-weight: 500;
    color: #7ec94a;
    margin-bottom: 3px;
}

.history-date[b-blhhmenphq] {
    font-size: 10px;
    color: var(--color-text-secondary);
    font-family: 'Courier New', monospace;
}

/* ── Panel Footer ── */
.panel-footer[b-blhhmenphq] {
    padding: 8px 15px;
    border-top: 0.5px solid var(--color-border-tertiary);
    text-align: right;
}

.footer-note[b-blhhmenphq] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════
   LOADING / EMPTY
══════════════════════════════════════════════════════════ */
.loading-state[b-blhhmenphq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    gap: .75rem;
}

.loading-spinner[b-blhhmenphq] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-blhhmenphq .9s linear infinite;
}

.loading-text[b-blhhmenphq] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.empty-state[b-blhhmenphq] {
    text-align: center;
    padding: 3.5rem 2rem;
    color: var(--color-text-secondary);
}

.empty-icon[b-blhhmenphq] {
    font-size: 3rem;
    margin-bottom: .75rem;
    opacity: .4;
    display: block;
}

.empty-state h3[b-blhhmenphq] {
    font-size: 1rem;
    color: var(--color-text-primary);
    font-weight: 500;
    margin-bottom: .35rem;
}

.empty-state p[b-blhhmenphq] {
    font-size: .8rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

/* ── Buttons ── */
.btn[b-blhhmenphq] {
    padding: .55rem 1.25rem;
    border-radius: 6px;
    border: none;
    font-weight: 700;
    font-size: .75rem;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: opacity .15s;
}

    .btn:hover[b-blhhmenphq] {
        opacity: .88;
    }

.btn-primary[b-blhhmenphq] {
    background: #ff8c00;
    color: #1a1a1a;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .paymenthistory-page[b-blhhmenphq] {
        padding: 1rem;
    }

    .summary-grid[b-blhhmenphq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .panel-header[b-blhhmenphq] {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .tab-group[b-blhhmenphq] {
        width: 100%;
    }

    .tab[b-blhhmenphq] {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    .history-item[b-blhhmenphq] {
        flex-wrap: wrap;
        gap: .625rem;
    }

    .history-right[b-blhhmenphq] {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    .paymenthistory-page[b-blhhmenphq] {
        padding: .75rem;
    }

    .summary-grid[b-blhhmenphq] {
        grid-template-columns: 1fr;
    }

    .sum-value[b-blhhmenphq] {
        font-size: 1.4rem;
    }
}

@keyframes spin-b-blhhmenphq {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/PayNow.razor.rz.scp.css */
/* ============================================================
   Leuca — PayNow (Pagamento via PIX)
   PayNow.razor.css  (scoped)
   ============================================================ */

.paynow-page[b-fjn0b8jw5p] {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Header ── */
.page-header[b-fjn0b8jw5p] {
    box-sizing: border-box;
}

.btn-back[b-fjn0b8jw5p] {
    background: none;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 6px;
    padding: .28rem .75rem;
    font-size: 11px;
    font-weight: 500;
    color: #ff8c00;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    margin-bottom: .4rem;
    display: inline-block;
    transition: background .15s;
}

    .btn-back:hover[b-fjn0b8jw5p] {
        background: var(--color-background-secondary);
    }

.page-title[b-fjn0b8jw5p] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: .2rem 0 .15rem;
}

.page-subtitle[b-fjn0b8jw5p] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0;
}

.divider[b-fjn0b8jw5p] {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: .25rem 0;
}

/* ══════════════════════════════════════════════════════════
   PAYMENT CARD
══════════════════════════════════════════════════════════ */
.pcard[b-fjn0b8jw5p] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.sec[b-fjn0b8jw5p] {
    padding: 12px 16px;
}

    .sec + .sec[b-fjn0b8jw5p] {
        border-top: 0.5px solid var(--color-border-tertiary);
    }

/* ── Credor ── */
.creditor-row[b-fjn0b8jw5p] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.creditor-av[b-fjn0b8jw5p] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.creditor-name[b-fjn0b8jw5p] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.creditor-sub[b-fjn0b8jw5p] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* ── Valor ── */
.sec-amount[b-fjn0b8jw5p] {
    text-align: center;
}

.amount-label[b-fjn0b8jw5p] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.amount-value[b-fjn0b8jw5p] {
    font-size: 36px;
    font-weight: 500;
    color: #ff8c00;
    line-height: 1;
    margin-bottom: 8px;
}

.amount-due[b-fjn0b8jw5p] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.due-normal[b-fjn0b8jw5p] {
    color: #ff8c00;
    font-weight: 500;
}

.due-expired[b-fjn0b8jw5p] {
    color: #e84e1b;
    font-weight: 500;
}

/* ── QR Code ── */
.qr-wrap[b-fjn0b8jw5p] {
    display: flex;
    justify-content: center;
    margin: 8px 0 12px;
}

.qrcode-box[b-fjn0b8jw5p] {
    width: 190px;
    height: 190px;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

    .qrcode-box canvas[b-fjn0b8jw5p],
    .qrcode-box img[b-fjn0b8jw5p] {
        max-width: 100%;
        max-height: 100%;
    }

.qr-hint[b-fjn0b8jw5p] {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.6;
}

/* ── Copia e cola ── */
.copy-row[b-fjn0b8jw5p] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.copy-code[b-fjn0b8jw5p] {
    flex: 1;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.btn-copy[b-fjn0b8jw5p] {
    border: 0.5px solid var(--color-border-tertiary);
    background: none;
    color: var(--color-text-primary);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 500;
    font-family: Verdana, sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: all .15s;
    flex-shrink: 0;
}

    .btn-copy i[b-fjn0b8jw5p] {
        font-size: 14px;
    }

    .btn-copy.copied[b-fjn0b8jw5p] {
        border-color: rgba(126, 201, 74, 0.4);
        background: rgba(126, 201, 74, 0.12);
        color: #7ec94a;
    }

/* ── Info grid ── */
.info-grid[b-fjn0b8jw5p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.info-cell[b-fjn0b8jw5p] {
    padding: 12px 16px;
}

    .info-cell:nth-child(odd)[b-fjn0b8jw5p] {
        border-right: 0.5px solid var(--color-border-tertiary);
    }

    .info-cell:nth-child(n+3)[b-fjn0b8jw5p] {
        border-top: 0.5px solid var(--color-border-tertiary);
    }

.info-label[b-fjn0b8jw5p] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.info-value[b-fjn0b8jw5p] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.info-mono[b-fjn0b8jw5p] {
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

/* ── Nota Fiscal ── */
.sec-nf[b-fjn0b8jw5p] {
    border-top: 0.5px solid var(--color-border-tertiary);
}

.btn-nf[b-fjn0b8jw5p] {
    width: 100%;
    padding: 8px 14px;
    border-radius: var(--border-radius-md);
    border: 0.5px solid var(--color-border-tertiary);
    background: none;
    color: var(--color-text-primary);
    font-size: 11px;
    font-weight: 500;
    font-family: Verdana, sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s;
}

    .btn-nf:hover:not(:disabled)[b-fjn0b8jw5p] {
        background: var(--color-background-secondary);
    }

    .btn-nf:disabled[b-fjn0b8jw5p] {
        opacity: .5;
        cursor: not-allowed;
    }

    .btn-nf i[b-fjn0b8jw5p] {
        font-size: 14px;
    }

.nf-error[b-fjn0b8jw5p] {
    font-size: 10px;
    color: #e84e1b;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   CONFIRMAR
══════════════════════════════════════════════════════════ */
.btn-confirm[b-fjn0b8jw5p] {
    width: 100%;
    padding: 13px;
    border-radius: var(--border-radius-lg);
    border: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-primary);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    font-family: Verdana, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s;
}

    .btn-confirm i[b-fjn0b8jw5p] {
        font-size: 16px;
        color: #ff8c00;
    }

    .btn-confirm:hover:not(:disabled)[b-fjn0b8jw5p] {
        background: var(--color-background-secondary);
    }

    .btn-confirm:disabled[b-fjn0b8jw5p] {
        opacity: .5;
        cursor: not-allowed;
    }

.confirm-error[b-fjn0b8jw5p] {
    font-size: 10px;
    color: #e84e1b;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.confirm-note[b-fjn0b8jw5p] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   LOADING / ERROR
══════════════════════════════════════════════════════════ */
.loading-state[b-fjn0b8jw5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: .75rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.loading-spinner[b-fjn0b8jw5p] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-fjn0b8jw5p .9s linear infinite;
}

.loading-text[b-fjn0b8jw5p] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.error-card[b-fjn0b8jw5p] {
    max-width: 480px;
    margin: 3rem auto;
    text-align: center;
    padding: 2.5rem;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
}

.error-icon[b-fjn0b8jw5p] {
    font-size: 2.5rem;
    color: #e84e1b;
    margin-bottom: 1rem;
    display: block;
}

.error-card h3[b-fjn0b8jw5p] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: .5rem;
}

.error-card p[b-fjn0b8jw5p] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   BOTÕES GENÉRICOS
══════════════════════════════════════════════════════════ */
.btn[b-fjn0b8jw5p] {
    padding: .55rem 1rem;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    font-size: 11px;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    white-space: nowrap;
    transition: opacity .15s;
}

    .btn:hover:not(:disabled)[b-fjn0b8jw5p] {
        opacity: .88;
    }

    .btn:disabled[b-fjn0b8jw5p] {
        opacity: .5;
        cursor: not-allowed;
    }

.btn-primary[b-fjn0b8jw5p] {
    background: #ff8c00;
    color: #412402;
}

.btn-secondary[b-fjn0b8jw5p] {
    background: none;
    color: var(--color-text-secondary);
    border: 0.5px solid var(--color-border-tertiary);
}

.btn-full[b-fjn0b8jw5p] {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════
   MODAL — BANCO PAGADOR
══════════════════════════════════════════════════════════ */
.modal-backdrop[b-fjn0b8jw5p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}

.bank-modal[b-fjn0b8jw5p] {
    width: 100%;
    max-width: 440px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
}

.modal-header[b-fjn0b8jw5p] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .35rem;
}

.modal-icon[b-fjn0b8jw5p] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.15);
    border: 0.5px solid rgba(255, 140, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .modal-icon i[b-fjn0b8jw5p] {
        font-size: 18px;
        color: #ff8c00;
    }

.modal-title[b-fjn0b8jw5p] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.modal-sub[b-fjn0b8jw5p] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-bottom: 14px;
    padding-left: calc(36px + .75rem);
    line-height: 1.5;
}

.last-used-hint[b-fjn0b8jw5p] {
    font-size: 10px;
    color: #ff8c00;
    background: rgba(255, 140, 0, 0.10);
    border: 0.5px solid rgba(255, 140, 0, 0.3);
    border-radius: 6px;
    padding: .5rem .75rem;
    margin-bottom: .875rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .last-used-hint i[b-fjn0b8jw5p] {
        font-size: 13px;
    }

.banks-grid[b-fjn0b8jw5p] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem;
    margin-bottom: .875rem;
}

.bank-option[b-fjn0b8jw5p] {
    padding: 8px 11px;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    background: var(--color-background-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-primary);
    transition: all .15s;
}

    .bank-option:hover[b-fjn0b8jw5p] {
        border-color: rgba(255, 140, 0, 0.5);
        background: var(--color-background-secondary);
    }

    .bank-option.selected[b-fjn0b8jw5p] {
        border-color: #ff8c00;
        background: rgba(255, 140, 0, 0.10);
        color: #ff8c00;
    }

.bank-option-wide[b-fjn0b8jw5p] {
    grid-column: span 2;
}

.bank-dot[b-fjn0b8jw5p] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-nubank[b-fjn0b8jw5p] {
    background: #820ad1;
}

.dot-itau[b-fjn0b8jw5p] {
    background: #ec7000;
}

.dot-brade[b-fjn0b8jw5p] {
    background: #cc092f;
}

.dot-santa[b-fjn0b8jw5p] {
    background: #ec0000;
}

.dot-bb[b-fjn0b8jw5p] {
    background: #fff100;
    border: 1px solid #888;
}

.dot-caixa[b-fjn0b8jw5p] {
    background: #0070b0;
}

.dot-inter[b-fjn0b8jw5p] {
    background: #ff7a00;
}

.dot-sicoo[b-fjn0b8jw5p] {
    background: #00ae4d;
}

.dot-sicre[b-fjn0b8jw5p] {
    background: #3fa535;
}

.dot-c6[b-fjn0b8jw5p] {
    background: var(--color-text-primary);
}

.dot-other[b-fjn0b8jw5p] {
    background: var(--color-text-secondary);
}

.other-input[b-fjn0b8jw5p] {
    width: 100%;
    padding: .55rem .875rem;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    font-size: 11px;
    font-family: Verdana, sans-serif;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    margin-bottom: .875rem;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}

    .other-input:focus[b-fjn0b8jw5p] {
        border-color: #ff8c00;
    }

    .other-input[b-fjn0b8jw5p]::placeholder {
        color: var(--color-text-secondary);
    }

.modal-actions[b-fjn0b8jw5p] {
    display: flex;
    gap: .5rem;
}

    .modal-actions .btn[b-fjn0b8jw5p] {
        flex: 1;
    }

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .paynow-page[b-fjn0b8jw5p] {
        padding: 1rem;
    }

    .amount-value[b-fjn0b8jw5p] {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .paynow-page[b-fjn0b8jw5p] {
        padding: .75rem;
    }

    .banks-grid[b-fjn0b8jw5p] {
        grid-template-columns: 1fr;
    }

    .bank-option-wide[b-fjn0b8jw5p] {
        grid-column: auto;
    }

    .info-grid[b-fjn0b8jw5p] {
        grid-template-columns: 1fr;
    }

    .info-cell:nth-child(odd)[b-fjn0b8jw5p] {
        border-right: none;
    }

    .info-cell:nth-child(n+2)[b-fjn0b8jw5p] {
        border-top: 0.5px solid var(--color-border-tertiary);
    }
}

@keyframes spin-b-fjn0b8jw5p {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Profile.razor.rz.scp.css */
/* ============================================================
   Leuca — Profile
   Profile.razor.css  (scoped)
   ============================================================ */

/* ── Página ── */
.profile-page[b-123ib6g8rl] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Cabeçalho ── */
.page-header[b-123ib6g8rl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.page-title[b-123ib6g8rl] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}

.page-sub[b-123ib6g8rl] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

/* ── Card ── */
.card[b-123ib6g8rl] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 12px;
    overflow: hidden;
}

.card-hd[b-123ib6g8rl] {
    padding: 11px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .card-hd i[b-123ib6g8rl] {
        font-size: 15px;
        color: #ff8c00;
    }

.card-hd-title[b-123ib6g8rl] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.card-body[b-123ib6g8rl] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Avatar ── */
.avatar-row[b-123ib6g8rl] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar[b-123ib6g8rl] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    color: #ff8c00;
    flex-shrink: 0;
}

.avatar-info[b-123ib6g8rl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.avatar-name[b-123ib6g8rl] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.avatar-spid[b-123ib6g8rl] {
    font-size: 10px;
    color: var(--color-text-tertiary);
    font-family: monospace;
}

/* ── Divisor ── */
.divider[b-123ib6g8rl] {
    height: 0.5px;
    background: var(--color-border-tertiary);
}

/* ── Banner de sucesso ── */
.success-banner[b-123ib6g8rl] {
    background: rgba(99, 153, 34, 0.15);
    border: 0.5px solid rgba(99, 153, 34, 0.35);
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 10px;
    color: #7ec94a;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ── Campo de edição ── */
.field[b-123ib6g8rl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .field label[b-123ib6g8rl] {
        font-size: 10px;
        color: var(--color-text-secondary);
    }

.field-hint[b-123ib6g8rl] {
    font-size: 9px;
    color: var(--color-text-tertiary);
    margin-top: -3px;
}

.input-wrap[b-123ib6g8rl] {
    position: relative;
    display: flex;
    align-items: center;
}

input[type=text][b-123ib6g8rl] {
    width: 100%;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-family: Verdana, sans-serif;
    font-size: 12px;
    padding: 9px 38px 9px 12px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

    input[type=text]:focus[b-123ib6g8rl] {
        border-color: #ff8c00;
    }

    input[type=text].valid[b-123ib6g8rl] {
        border-color: rgba(99, 153, 34, 0.6);
    }

    input[type=text].err[b-123ib6g8rl] {
        border-color: rgba(232, 78, 27, 0.6);
    }

.input-icon[b-123ib6g8rl] {
    position: absolute;
    right: 11px;
    font-size: 15px;
    color: var(--color-text-tertiary);
    pointer-events: none;
    transition: color 0.2s;
}

    .input-icon.valid[b-123ib6g8rl] {
        color: #7ec94a;
    }

    .input-icon.err[b-123ib6g8rl] {
        color: #e84e1b;
    }

.val-msg[b-123ib6g8rl] {
    font-size: 9px;
    min-height: 13px;
    color: var(--color-text-tertiary);
}

    .val-msg.ok[b-123ib6g8rl] {
        color: #7ec94a;
    }

    .val-msg.err[b-123ib6g8rl] {
        color: #e84e1b;
    }

/* ── Pré-visualização da saudação ── */
.greeting-preview[b-123ib6g8rl] {
    background: rgba(255, 140, 0, 0.06);
    border: 0.5px solid rgba(255, 140, 0, 0.18);
    border-radius: 8px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .greeting-preview i[b-123ib6g8rl] {
        font-size: 16px;
        color: rgba(255, 140, 0, 0.55);
        flex-shrink: 0;
    }

.greeting-text[b-123ib6g8rl] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

    .greeting-text strong[b-123ib6g8rl] {
        color: var(--color-text-primary);
        font-weight: 500;
    }

/* ── Botões ── */
.btn-row[b-123ib6g8rl] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-cancel[b-123ib6g8rl] {
    background: none;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 10px;
    font-family: Verdana, sans-serif;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

    .btn-cancel:hover[b-123ib6g8rl] {
        background: var(--color-background-secondary);
        color: var(--color-text-primary);
    }

.btn-save[b-123ib6g8rl] {
    background: #ff8c00;
    border: none;
    border-radius: 8px;
    color: #412402;
    font-size: 10px;
    font-weight: 500;
    font-family: Verdana, sans-serif;
    padding: 8px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.15s;
    white-space: nowrap;
}

    .btn-save:hover[b-123ib6g8rl] {
        opacity: 0.88;
    }

    .btn-save:disabled[b-123ib6g8rl] {
        opacity: 0.30;
        cursor: not-allowed;
    }

/* ── Dados somente leitura ── */
.readonly-grid[b-123ib6g8rl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ro-field[b-123ib6g8rl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ro-label[b-123ib6g8rl] {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ro-value[b-123ib6g8rl] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

    .ro-value.mono[b-123ib6g8rl] {
        font-family: monospace;
        font-size: 10px;
        letter-spacing: 0.3px;
    }

.ro-lock[b-123ib6g8rl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--color-text-tertiary);
    margin-top: 1px;
    opacity: 0.6;
}

    .ro-lock i[b-123ib6g8rl] {
        font-size: 10px;
    }

/* ── Loading ── */
.loading-state[b-123ib6g8rl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: .75rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.loading-spinner[b-123ib6g8rl] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-123ib6g8rl .9s linear infinite;
}

.loading-text[b-123ib6g8rl] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ── Responsividade ── */
@media (max-width: 768px) {
    .profile-page[b-123ib6g8rl] {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .profile-page[b-123ib6g8rl] {
        padding: .75rem;
    }

    .readonly-grid[b-123ib6g8rl] {
        grid-template-columns: 1fr;
    }
}

@keyframes spin-b-123ib6g8rl {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Register.razor.rz.scp.css */
/* ============================================================
   Leuca — Register.razor.css  (scoped)
   ============================================================ */

.register-page[b-q5obt3wwi3] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
}

/* ── Hero ── */
.register-bee[b-q5obt3wwi3] {
    font-size: 2rem;
    margin-bottom: .5rem;
}

.register-title[b-q5obt3wwi3] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: .25rem;
}

.register-sub[b-q5obt3wwi3] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.divider[b-q5obt3wwi3] {
    height: 0.5px;
    background: var(--color-border-tertiary);
    margin: .875rem 0 1.5rem;
}

/* ══════════════════════════════════════════════════════════
   STEPPER
══════════════════════════════════════════════════════════ */
.stepper[b-q5obt3wwi3] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.75rem;
    gap: 0;
}

.step-dot[b-q5obt3wwi3] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    transition: background .3s, color .3s;
}

    .step-dot.active[b-q5obt3wwi3] {
        background: rgba(255, 140, 0, 0.15);
        color: #ff8c00;
        border-color: #ff8c00;
    }

    .step-dot.done[b-q5obt3wwi3] {
        background: rgba(126, 201, 74, 0.15);
        color: #7ec94a;
        border-color: rgba(126, 201, 74, 0.4);
    }

.step-line[b-q5obt3wwi3] {
    flex: 1;
    height: 0.5px;
    max-width: 80px;
    background: var(--color-border-tertiary);
    transition: background .3s;
}

    .step-line.done[b-q5obt3wwi3] {
        background: rgba(126, 201, 74, 0.5);
    }

/* ══════════════════════════════════════════════════════════
   TIPOS GRID (Step 1)
══════════════════════════════════════════════════════════ */
.tipos-grid[b-q5obt3wwi3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.tipo-box[b-q5obt3wwi3] {
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: .75rem;
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    background: var(--color-background-secondary);
}

    .tipo-box strong[b-q5obt3wwi3] {
        display: block;
        font-size: 12px;
        color: var(--color-text-primary);
        margin-bottom: .2rem;
    }

.tipo-badge[b-q5obt3wwi3] {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-bottom: .4rem;
    font-family: 'Courier New', monospace;
    letter-spacing: .05rem;
}

/* Invitation Key — azul info */
.badge-inv[b-q5obt3wwi3] {
    background: var(--color-background-info);
    color: var(--color-text-info);
}

/* Access Key — amber */
.badge-acc[b-q5obt3wwi3] {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

/* ── Campo mono (chave) ── */
.field-mono[b-q5obt3wwi3] {
    font-family: 'Courier New', monospace !important;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   RESULT CARDS
══════════════════════════════════════════════════════════ */
.result-card[b-q5obt3wwi3] {
    margin-top: 1rem;
    border-radius: 10px;
    overflow: hidden;
}

/* Invitation Key — verde */
.result-inv[b-q5obt3wwi3] {
    border: 0.5px solid rgba(126, 201, 74, 0.35);
}

    .result-inv .result-header[b-q5obt3wwi3] {
        background: rgba(126, 201, 74, 0.07);
    }

.r-avatar-inv[b-q5obt3wwi3] {
    background: rgba(126, 201, 74, 0.2);
    color: #7ec94a;
}

.r-name-inv[b-q5obt3wwi3] {
    color: #7ec94a;
}

.r-sub-inv[b-q5obt3wwi3] {
    color: #7ec94a;
    opacity: .75;
}

.r-badge-inv[b-q5obt3wwi3] {
    background: rgba(126, 201, 74, 0.18);
    color: #7ec94a;
}

/* Access Key — amber */
.result-acc[b-q5obt3wwi3] {
    border: 0.5px solid rgba(255, 140, 0, 0.35);
}

    .result-acc .result-header[b-q5obt3wwi3] {
        background: rgba(255, 140, 0, 0.07);
    }

.r-avatar-acc[b-q5obt3wwi3] {
    background: rgba(255, 140, 0, 0.15);
    font-size: 1rem;
}

.r-name-acc[b-q5obt3wwi3] {
    color: #ff8c00;
}

.r-sub-acc[b-q5obt3wwi3] {
    color: #ff8c00;
    opacity: .75;
}

.r-badge-acc[b-q5obt3wwi3] {
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
}

/* Header compartilhado */
.result-header[b-q5obt3wwi3] {
    padding: .875rem 1rem;
    display: flex;
    align-items: center;
    gap: .875rem;
}

.r-avatar[b-q5obt3wwi3] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.r-info[b-q5obt3wwi3] {
    flex: 1;
    min-width: 0;
}

.r-name[b-q5obt3wwi3] {
    font-size: 13px;
    font-weight: 500;
}

.r-sub[b-q5obt3wwi3] {
    font-size: 11px;
}

.r-badge[b-q5obt3wwi3] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.r-badge-warn[b-q5obt3wwi3] {
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
}

/* Body Invitation / CNPJ */
.result-body[b-q5obt3wwi3] {
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem .75rem;
    background: var(--color-background-primary);
}

.r-row[b-q5obt3wwi3] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 11px;
    color: var(--color-text-secondary);
}

    .r-row span[b-q5obt3wwi3] {
        color: var(--color-text-primary);
    }

/* Body Access Key */
.result-body-acc[b-q5obt3wwi3] {
    padding: .875rem 1rem;
    background: var(--color-background-primary);
}

.acc-row[b-q5obt3wwi3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-secondary);
    padding: .4rem 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

    .acc-row:last-child[b-q5obt3wwi3] {
        border-bottom: none;
    }

    .acc-row span:last-child[b-q5obt3wwi3] {
        font-weight: 500;
        color: var(--color-text-primary);
    }

/* ── IST pill ── */
.ist-pill[b-q5obt3wwi3] {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
}

.ist-pill-sm[b-q5obt3wwi3] {
    font-size: 10px;
    padding: 1px 6px;
}

/* ══════════════════════════════════════════════════════════
   PÍLULA RESUMO (Steps 2 e 3)
══════════════════════════════════════════════════════════ */
.summary-pill[b-q5obt3wwi3] {
    margin: 0 auto 1rem;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: .6rem 1rem;
    font-size: 11px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

    .summary-pill strong[b-q5obt3wwi3] {
        color: var(--color-text-primary);
    }

/* ══════════════════════════════════════════════════════════
   FORM CARDS
══════════════════════════════════════════════════════════ */
.form-card[b-q5obt3wwi3] {
    width: 100%;
    margin: 0 auto 1.5rem;
    background: var(--color-background-primary);
    border-radius: 12px;
    border: 0.5px solid var(--color-border-tertiary);
    padding: 1.25rem 1.5rem;
    box-sizing: border-box;
}

.card-title[b-q5obt3wwi3] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    padding-bottom: .75rem;
}

    .card-title i[b-q5obt3wwi3] {
        font-size: 15px;
        color: #ff8c00;
    }

/* ── Grid ── */
.fields-grid[b-q5obt3wwi3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
}

.field-full[b-q5obt3wwi3] {
    grid-column: span 2;
}

.field-group[b-q5obt3wwi3] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.field-label[b-q5obt3wwi3] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.req[b-q5obt3wwi3] {
    color: #ff8c00;
}

.field-input[b-q5obt3wwi3] {
    width: 100%;
    padding: .7rem .875rem;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    font-size: 13px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}

    .field-input:focus[b-q5obt3wwi3] {
        border-color: #ff8c00;
        border-width: 1px;
    }

    /* Campo da chave de acesso — focus em branco para destacar o código */
    .field-input.field-mono:focus[b-q5obt3wwi3] {
        border-color: #ffffff !important;
        border-width: 1px !important;
        outline: 1px solid #ffffff !important;
        outline-offset: -1px;
    }

.field-helper[b-q5obt3wwi3] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════
   BANNERS
══════════════════════════════════════════════════════════ */
.error-banner[b-q5obt3wwi3] {
    margin: 0 auto 1rem;
    background: rgba(232, 78, 27, 0.08);
    border: 0.5px solid rgba(232, 78, 27, 0.3);
    border-left: 3px solid #e84e1b;
    border-radius: 0 8px 8px 0;
    padding: .875rem 1rem;
    font-size: 11px;
    color: #e84e1b;
    box-sizing: border-box;
}

.warn-banner[b-q5obt3wwi3] {
    margin-top: .875rem;
    padding: .875rem 1rem;
    background: rgba(255, 140, 0, 0.07);
    border: 0.5px solid rgba(255, 140, 0, 0.25);
    border-left: 3px solid #ff8c00;
    border-radius: 0 8px 8px 0;
    font-size: 11px;
    color: #ff8c00;
}

/* ══════════════════════════════════════════════════════════
   BOTÕES
══════════════════════════════════════════════════════════ */
.btn-register[b-q5obt3wwi3] {
    width: 100%;
    margin: 0 auto .875rem;
    padding: .75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: opacity .15s;
    box-sizing: border-box;
}

    .btn-register:hover:not(:disabled)[b-q5obt3wwi3] {
        opacity: .82;
    }

    .btn-register:disabled[b-q5obt3wwi3] {
        opacity: .4;
        cursor: not-allowed;
    }

/* Variante verde — chave válida */
.btn-green[b-q5obt3wwi3] {
    border-color: rgba(126, 201, 74, 0.4) !important;
    background: rgba(126, 201, 74, 0.12) !important;
    color: #7ec94a !important;
}

/* ── Spinner ── */
.btn-spinner[b-q5obt3wwi3] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 140, 0, 0.25);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-q5obt3wwi3 .7s linear infinite;
    flex-shrink: 0;
}

.btn-green .btn-spinner[b-q5obt3wwi3] {
    border-color: rgba(126, 201, 74, 0.25);
    border-top-color: #7ec94a;
}

/* ══════════════════════════════════════════════════════════
   TERMOS
══════════════════════════════════════════════════════════ */
.terms-row[b-q5obt3wwi3] {
    margin: 0 auto .875rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
    box-sizing: border-box;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 10px;
    padding: .875rem 1rem;
    transition: border-color .15s;
}

    .terms-row:hover[b-q5obt3wwi3] {
        border-color: #ff8c00;
    }

.custom-check[b-q5obt3wwi3] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 5px;
    background: var(--color-background-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    color: #1a1a1a;
    transition: all .2s;
    margin-top: 1px;
}

    .custom-check.checked[b-q5obt3wwi3] {
        background: #ff8c00;
        border-color: #ff8c00;
    }

.terms-text[b-q5obt3wwi3] {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.terms-link[b-q5obt3wwi3] {
    color: #ff8c00;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   RESUMO SUCESSO
══════════════════════════════════════════════════════════ */
.resumo-list[b-q5obt3wwi3] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.resumo-row[b-q5obt3wwi3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-secondary);
    padding: .5rem 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

    .resumo-row:last-child[b-q5obt3wwi3] {
        border-bottom: none;
    }

    .resumo-row span:last-child[b-q5obt3wwi3] {
        color: var(--color-text-primary);
        font-weight: 500;
        text-align: right;
    }

/* ══════════════════════════════════════════════════════════
   PASSWORD STRENGTH
══════════════════════════════════════════════════════════ */
.pwd-strength[b-q5obt3wwi3] {
    display: flex;
    gap: .3rem;
    margin-top: .25rem;
}

.pwd-bar[b-q5obt3wwi3] {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--color-border-tertiary);
    transition: background .3s;
}

    .pwd-bar.weak[b-q5obt3wwi3] {
        background: #e84e1b;
    }

    .pwd-bar.medium[b-q5obt3wwi3] {
        background: #ff8c00;
    }

    .pwd-bar.strong[b-q5obt3wwi3] {
        background: #7ec94a;
    }

.hint-weak[b-q5obt3wwi3] {
    color: #e84e1b;
    font-weight: 500;
}

.hint-medium[b-q5obt3wwi3] {
    color: #ff8c00;
    font-weight: 500;
}

.hint-strong[b-q5obt3wwi3] {
    color: #7ec94a;
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   FOOTER / LINKS
══════════════════════════════════════════════════════════ */
.footer-login[b-q5obt3wwi3] {
    margin: 0 auto;
    text-align: center;
    font-size: 11px;
    color: var(--color-text-secondary);
    box-sizing: border-box;
}

.login-link[b-q5obt3wwi3] {
    color: #ff8c00;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s;
}

    .login-link:hover[b-q5obt3wwi3] {
        opacity: .8;
        text-decoration: underline;
    }

@keyframes spin-b-q5obt3wwi3 {
    to {
        transform: rotate(360deg);
    }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .register-page[b-q5obt3wwi3] {
        padding: 1rem;
    }

    .form-card[b-q5obt3wwi3] {
        padding: 1rem 1.25rem;
    }

    .tipos-grid[b-q5obt3wwi3] {
        grid-template-columns: 1fr;
    }

    .fields-grid[b-q5obt3wwi3] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .field-full[b-q5obt3wwi3] {
        grid-column: span 1;
    }

    .result-body[b-q5obt3wwi3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .register-page[b-q5obt3wwi3] {
        padding: .75rem;
    }

    .form-card[b-q5obt3wwi3] {
        padding: 1rem;
    }

    .register-title[b-q5obt3wwi3] {
        font-size: 14px;
    }
}
/* /Pages/Reload.razor.rz.scp.css */
/* ============================================================
   Leuca™ — Reload (Seleção de Pacote)
   Reload.razor.css  (scoped)
   ============================================================ */

.reload-page[b-g05nz996et] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
}

/* ── Header ── */
.page-header[b-g05nz996et] {
    margin-bottom: 1rem;
}

.page-title[b-g05nz996et] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}

    .page-title i[b-g05nz996et] {
        font-size: 18px;
        color: #ff8c00;
    }

.page-subtitle[b-g05nz996et] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.badge[b-g05nz996et] {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 10px;
}

.badge-amber[b-g05nz996et] {
    background: rgba(255, 140, 0, 0.18);
    color: #ff8c00;
}

.divider[b-g05nz996et] {
    height: 0.5px;
    background: var(--color-border-tertiary);
    margin: .75rem 0 1.25rem;
}

/* ── Saldo atual ── */
.balance-banner[b-g05nz996et] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-left: 3px solid #7ec94a;
    border-radius: 0 12px 12px 0;
    padding: 13px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.balance-label[b-g05nz996et] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 500;
    margin-bottom: .3rem;
}

.balance-value[b-g05nz996et] {
    font-size: 18px;
    font-weight: 500;
    color: #7ec94a;
}

.balance-icon[b-g05nz996et] {
    font-size: 18px;
    color: #7ec94a;
}

/* ── Section heading ── */
.section-heading[b-g05nz996et] {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .75rem;
}

/* ── Pack cards ── */
.packs-grid[b-g05nz996et] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
}

.pack-card[b-g05nz996et] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .15s;
    box-sizing: border-box;
}

    .pack-card:hover[b-g05nz996et] {
        border-color: #ff8c00;
    }

    .pack-card.selected[b-g05nz996et] {
        border: 1.5px solid #ff8c00;
        background: rgba(255, 140, 0, 0.06);
    }

.pack-popular-badge[b-g05nz996et] {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff8c00;
    color: #1a1a1a;
    font-size: 9px;
    font-weight: 500;
    padding: .25rem .6rem;
    border-radius: 0 12px 0 8px;
    letter-spacing: .3px;
}

.pack-top[b-g05nz996et] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.pack-qty[b-g05nz996et] {
    font-size: 22px;
    font-weight: 500;
    color: var(--color-text-primary);
}

    .pack-qty span[b-g05nz996et] {
        font-size: 12px;
        font-weight: 400;
        color: var(--color-text-secondary);
    }

/* Radio button */
.pack-radio[b-g05nz996et] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0.5px solid var(--color-border-secondary);
    flex-shrink: 0;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pack-radio.checked[b-g05nz996et] {
        border-color: #ff8c00;
        background: #ff8c00;
    }

        .pack-radio.checked[b-g05nz996et]::after {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #1a1a1a;
            display: block;
        }

.pack-price[b-g05nz996et] {
    font-size: 18px;
    font-weight: 500;
    color: #ff8c00;
    margin-bottom: .2rem;
}

.pack-unit[b-g05nz996et] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-bottom: .5rem;
}

.pack-badge[b-g05nz996et] {
    display: inline-flex;
    align-items: center;
    background: rgba(126, 201, 74, 0.15);
    color: #7ec94a;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
}

/* ── Botão continuar ── */
.btn-continue[b-g05nz996et] {
    width: 100%;
    display: flex;
    padding: .75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-sizing: border-box;
    transition: opacity .2s;
    margin-bottom: .5rem;
}

    .btn-continue:hover[b-g05nz996et] {
        opacity: .82;
    }

/* ── Hint abaixo do botão ── */
.continue-hint[b-g05nz996et] {
    text-align: center;
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: .25rem;
}

/* ── Responsividade ── */
@media (max-width: 768px) {
    .reload-page[b-g05nz996et] {
        padding: 1rem;
    }

    .packs-grid[b-g05nz996et] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .reload-page[b-g05nz996et] {
        padding: .75rem;
    }
}
/* /Pages/ReloadPayment.razor.rz.scp.css */
/* ============================================================
   Leuca™  — ReloadPayment (Pagamento PIX)
   ReloadPayment.razor.css  (scoped)
   ============================================================ */

.payment-page[b-7yx7bk69js] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
}

/* ── Loading / Error states ── */
.loading-state[b-7yx7bk69js],
.error-state[b-7yx7bk69js] {
    margin: 4rem auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.loading-icon[b-7yx7bk69js],
.error-icon[b-7yx7bk69js] {
    font-size: 22px;
    color: var(--color-text-secondary);
}

.loading-state p[b-7yx7bk69js],
.error-state p[b-7yx7bk69js] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.loading-spinner[b-7yx7bk69js] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-7yx7bk69js .9s linear infinite;
}

/* ── Header ── */
.page-header[b-7yx7bk69js] {
    margin-bottom: 1rem;
}

.back-link[b-7yx7bk69js] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-secondary);
    cursor: pointer;
    margin-bottom: .75rem;
    transition: color .15s;
    background: none;
    border: none;
    font-family: Verdana, sans-serif;
    padding: 0;
}

    .back-link:hover[b-7yx7bk69js] {
        color: #ff8c00;
    }

.page-title[b-7yx7bk69js] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}

    .page-title i[b-7yx7bk69js] {
        font-size: 18px;
        color: #ff8c00;
    }

.page-subtitle[b-7yx7bk69js] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.divider[b-7yx7bk69js] {
    height: 0.5px;
    background: var(--color-border-tertiary);
    margin: .75rem 0 1.25rem;
}

/* ── Resumo do pacote ── */
.summary-card[b-7yx7bk69js] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-left: 3px solid #ff8c00;
    border-radius: 0 12px 12px 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.summary-header[b-7yx7bk69js] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.summary-label[b-7yx7bk69js] {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 500;
}

.summary-qty[b-7yx7bk69js] {
    font-size: 12px;
    font-weight: 500;
    color: #ff8c00;
}

/* Breakdown de valores */
.summary-breakdown[b-7yx7bk69js] {
    padding: 10px 15px 13px;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.breakdown-row[b-7yx7bk69js] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breakdown-desc[b-7yx7bk69js] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.breakdown-val[b-7yx7bk69js] {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-family: 'Courier New', monospace;
}

.breakdown-divider[b-7yx7bk69js] {
    height: 0.5px;
    background: var(--color-border-tertiary);
    margin: .25rem 0;
}

.breakdown-row.total .breakdown-desc[b-7yx7bk69js] {
    font-size: 12px;
    font-weight: 500;
    color: #ff8c00;
}

.breakdown-total[b-7yx7bk69js] {
    font-size: 16px;
    font-weight: 500;
    color: #ff8c00;
    font-family: 'Courier New', monospace;
}

/* ── QR Card ── */
.qr-card[b-7yx7bk69js] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.qr-card-title[b-7yx7bk69js] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.qr-label[b-7yx7bk69js] {
    color: #ff8c00;
}

.qr-body[b-7yx7bk69js] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 15px;
}

/* QR Code col */
.qr-col[b-7yx7bk69js] {
    flex-shrink: 0;
    text-align: center;
}

.qr-box[b-7yx7bk69js] {
    width: 148px;
    height: 148px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    margin: 0 auto .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .qr-box canvas[b-7yx7bk69js],
    .qr-box img[b-7yx7bk69js] {
        max-width: 100%;
        max-height: 100%;
    }

.qr-hint[b-7yx7bk69js] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

/* Right col */
.qr-right[b-7yx7bk69js] {
    flex: 1;
    min-width: 240px;
}

.copy-label[b-7yx7bk69js] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: .5rem;
}

.copy-row[b-7yx7bk69js] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: .6rem .75rem;
    margin-bottom: .75rem;
}

.copy-payload[b-7yx7bk69js] {
    flex: 1;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-btn[b-7yx7bk69js] {
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
    border: 1px solid rgba(255, 140, 0, 0.4);
    border-radius: 6px;
    padding: .3rem .75rem;
    font-size: 10px;
    font-weight: 500;
    font-family: Verdana, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
}

    .copy-btn:hover[b-7yx7bk69js] {
        opacity: .82;
    }

    .copy-btn.copied[b-7yx7bk69js] {
        background: rgba(126, 201, 74, 0.15);
        color: #7ec94a;
        border-color: rgba(126, 201, 74, 0.4);
    }

.after-payment-box[b-7yx7bk69js] {
    background: rgba(255, 140, 0, 0.07);
    border: 0.5px solid rgba(255, 140, 0, 0.25);
    border-radius: 8px;
    padding: .875rem;
}

.after-payment-title[b-7yx7bk69js] {
    font-size: 11px;
    font-weight: 500;
    color: #ff8c00;
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .after-payment-title i[b-7yx7bk69js] {
        font-size: 13px;
    }

.after-payment-text[b-7yx7bk69js] {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ── Botão confirmar ── */
.btn-confirm[b-7yx7bk69js] {
    width: 100%;
    display: flex;
    padding: .75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-sizing: border-box;
    transition: opacity .2s;
}

    .btn-confirm:hover:not(:disabled)[b-7yx7bk69js] {
        opacity: .82;
    }

    .btn-confirm:disabled[b-7yx7bk69js] {
        opacity: .4;
        cursor: not-allowed;
    }

/* ── Spinner ── */
.btn-spinner[b-7yx7bk69js] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 140, 0, 0.25);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-7yx7bk69js .7s linear infinite;
    flex-shrink: 0;
}

/* ── Responsividade ── */
@media (max-width: 768px) {
    .payment-page[b-7yx7bk69js] {
        padding: 1rem;
    }

    .qr-body[b-7yx7bk69js] {
        flex-direction: column;
        align-items: center;
    }

    .qr-right[b-7yx7bk69js] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .payment-page[b-7yx7bk69js] {
        padding: .75rem;
    }
}

@keyframes spin-b-7yx7bk69js {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Suppliers.razor.rz.scp.css */
/* ============================================================
   Leuca — Suppliers (Fornecedores)
   Suppliers.razor.css  (scoped)
   ============================================================ */

.suppliers-page[b-ad151zeevp] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Header ── */
.page-header[b-ad151zeevp] {
    box-sizing: border-box;
}

.page-title[b-ad151zeevp] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 .2rem;
}

.page-subtitle[b-ad151zeevp] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ── Divider ── */
.divider[b-ad151zeevp] {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: .25rem 0;
}

/* ── Erro ── */
.error-banner[b-ad151zeevp] {
    background: rgba(232, 78, 27, 0.10);
    border-left: 3px solid #e84e1b;
    border-radius: 0;
    padding: 10px 14px;
    font-size: 11px;
    color: #e84e1b;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .error-banner i[b-ad151zeevp] {
        font-size: 15px;
        color: #e84e1b;
        flex-shrink: 0;
    }

/* ── Card ── */
.card[b-ad151zeevp] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

/* ── Card header ── */
.card-hd[b-ad151zeevp] {
    padding: 11px 16px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-hd-dot[b-ad151zeevp] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #ff8c00;
    flex-shrink: 0;
}

.card-hd-title[b-ad151zeevp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}

.count-badge[b-ad151zeevp] {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

/* ════════════════════════════════════════════════════════════
   FORMULÁRIO
════════════════════════════════════════════════════════════ */

.form-body[b-ad151zeevp] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row[b-ad151zeevp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-group[b-ad151zeevp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-ad151zeevp] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-input[b-ad151zeevp] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--color-text-primary);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}

    .form-input[b-ad151zeevp]::placeholder {
        color: var(--color-text-secondary);
    }

    /* ── Foco: borda branca + halo branco ── */
    .form-input:focus[b-ad151zeevp] {
        border-color: #ffffff;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
    }

    .form-input:disabled[b-ad151zeevp] {
        opacity: .55;
        cursor: not-allowed;
    }

.input-ok[b-ad151zeevp] {
    border-color: rgba(59, 109, 17, 0.45) !important;
    background: rgba(59, 109, 17, 0.04) !important;
}

.input-err[b-ad151zeevp] {
    border-color: rgba(163, 45, 45, 0.45) !important;
    background: rgba(163, 45, 45, 0.04) !important;
}

/* Campo PIX ativo */
.input-pix-active[b-ad151zeevp] {
    border-color: rgba(255, 140, 0, 0.55) !important;
    background: rgba(255, 140, 0, 0.04) !important;
}

    .input-pix-active:focus[b-ad151zeevp] {
        border-color: #ffffff !important;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) !important;
    }

.form-helper[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* ── CNPJ input com indicador ── */
.cnpj-wrap[b-ad151zeevp] {
    position: relative;
    display: flex;
    align-items: center;
}

    .cnpj-wrap .form-input[b-ad151zeevp] {
        padding-right: 32px;
    }

.cnpj-ind[b-ad151zeevp] {
    position: absolute;
    right: 10px;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
}

.ind-found[b-ad151zeevp] {
    color: #3b6d11;
}

.ind-error[b-ad151zeevp] {
    color: #a32d2d;
}

.ind-loading[b-ad151zeevp] {
    color: var(--color-text-secondary);
    letter-spacing: 2px;
}

.cnpj-loading[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    animation: pulse-b-ad151zeevp 1.2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   DROPDOWN — CENTRO DE CUSTO
════════════════════════════════════════════════════════════ */

.cc-wrap[b-ad151zeevp] {
    position: relative;
}

.cc-select[b-ad151zeevp] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 7px 28px 7px 10px;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--color-text-primary);
    outline: none;
    width: 100%;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

    .cc-select:focus[b-ad151zeevp] {
        border-color: #ffffff;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
    }

    /* Sinaliza que há valor selecionado */
    .cc-select.has-value[b-ad151zeevp] {
        border-color: rgba(255, 140, 0, 0.35);
        background: rgba(255, 140, 0, 0.03);
    }

.cc-chevron[b-ad151zeevp] {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ── Preview badge abaixo do dropdown ── */
.cc-preview[b-ad151zeevp] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
}

.cc-dot[b-ad151zeevp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cc-badge[b-ad151zeevp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

/* ── Atalho novo centro ── */
.cc-add-link[b-ad151zeevp] {
    font-size: 10px;
    color: #ff8c00;
    cursor: pointer;
    border: none;
    background: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    margin-top: 2px;
    width: fit-content;
    outline: none;
}

    .cc-add-link:hover[b-ad151zeevp] {
        opacity: .75;
    }

    .cc-add-link:focus-visible[b-ad151zeevp] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
        border-radius: 3px;
    }

/* ── Chip Receita Federal ── */
.receita-chip[b-ad151zeevp] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.chip-av[b-ad151zeevp] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    margin-top: 2px;
}

.chip-info[b-ad151zeevp] {
    flex: 1;
    min-width: 0;
}

.chip-name[b-ad151zeevp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-meta[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.chip-tag[b-ad151zeevp] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    margin-top: 4px;
}

    .chip-tag i[b-ad151zeevp] {
        font-size: 10px;
    }

.tag-ok[b-ad151zeevp] {
    background: rgba(59, 109, 17, 0.12);
    color: #3b6d11;
}

.tag-warn[b-ad151zeevp] {
    background: rgba(133, 79, 11, 0.12);
    color: #854f0b;
}

/* ── Alertas ── */
.alert-strip[b-ad151zeevp] {
    background: rgba(255, 140, 0, 0.08);
    border-left: 3px solid #ff8c00;
    border-radius: 0;
    padding: 9px 13px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

    .alert-strip i[b-ad151zeevp] {
        font-size: 15px;
        color: #ff8c00;
        flex-shrink: 0;
        margin-top: 1px;
    }

.alert-warn[b-ad151zeevp] {
    background: rgba(255, 140, 0, 0.08);
    border-left-color: #ff8c00;
}

    .alert-warn i[b-ad151zeevp] {
        color: #ff8c00;
    }

.alert-title[b-ad151zeevp] {
    font-size: 11px;
    font-weight: 500;
    color: #854f0b;
}

.alert-desc[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   SEÇÃO PIX
════════════════════════════════════════════════════════════ */

.pix-section[b-ad151zeevp] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pix-hd[b-ad151zeevp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

    .pix-hd i[b-ad151zeevp] {
        font-size: 14px;
    }

.pix-key-row[b-ad151zeevp] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.pix-key-cnpj[b-ad151zeevp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    color: var(--color-text-secondary);
    font-style: italic;
}

.pix-tipo-badge[b-ad151zeevp] {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(24, 95, 165, 0.12);
    color: #185fa5;
    flex-shrink: 0;
}

/* ── Checkbox MEI ── */
.mei-row[b-ad151zeevp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-secondary);
    cursor: pointer;
}

    .mei-row input[type="checkbox"][b-ad151zeevp] {
        accent-color: #ff8c00;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        cursor: pointer;
    }

/* ── Sem chave PIX ── */
.pix-empty-info[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.5;
}

    .pix-empty-info i[b-ad151zeevp] {
        font-size: 13px;
        flex-shrink: 0;
        margin-top: 1px;
    }

/* ── QR de verificação ── */
.qr-verify-card[b-ad151zeevp] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 12px;
}

.qr-verify-left[b-ad151zeevp] {
    flex-shrink: 0;
}

.qr-box[b-ad151zeevp] {
    width: 88px;
    height: 88px;
}

.qr-verify-right[b-ad151zeevp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qr-verify-title[b-ad151zeevp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.qr-verify-sub[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.pix-validated[b-ad151zeevp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    color: #3b6d11;
}

    .pix-validated i[b-ad151zeevp] {
        font-size: 13px;
    }

.btn-pix-ok[b-ad151zeevp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 6px;
    border: 0.5px solid rgba(59, 109, 17, 0.4);
    background: rgba(59, 109, 17, 0.10);
    color: #3b6d11;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    width: fit-content;
    outline: none;
    transition: opacity .15s;
}

    .btn-pix-ok:hover[b-ad151zeevp] {
        opacity: .8;
    }

    .btn-pix-ok:focus-visible[b-ad151zeevp] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    .btn-pix-ok i[b-ad151zeevp] {
        font-size: 12px;
    }

.btn-copy[b-ad151zeevp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 6px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: Verdana, sans-serif;
    width: fit-content;
    outline: none;
    transition: opacity .15s;
}

    .btn-copy:hover[b-ad151zeevp] {
        opacity: .8;
    }

    .btn-copy:focus-visible[b-ad151zeevp] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    .btn-copy i[b-ad151zeevp] {
        font-size: 12px;
    }

/* ── Ações do formulário ── */
.form-actions[b-ad151zeevp] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 0.5px solid var(--color-border-tertiary);
}

.btn-clear[b-ad151zeevp] {
    font-size: 11px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 8px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    outline: none;
    transition: background .15s;
}

    .btn-clear:hover[b-ad151zeevp] {
        background: var(--color-background-secondary);
    }

    .btn-clear:focus-visible[b-ad151zeevp] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

.btn-save[b-ad151zeevp] {
    font-size: 11px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    outline: none;
    transition: opacity .15s;
}

    .btn-save:hover:not(:disabled)[b-ad151zeevp] {
        opacity: .82;
    }

    .btn-save:disabled[b-ad151zeevp] {
        opacity: .4;
        cursor: not-allowed;
    }

    .btn-save:focus-visible[b-ad151zeevp] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    .btn-save i[b-ad151zeevp] {
        font-size: 13px;
    }

.btn-spinner[b-ad151zeevp] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 140, 0, 0.25);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-ad151zeevp .8s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   BUSCA
════════════════════════════════════════════════════════════ */

.search-row[b-ad151zeevp] {
    padding: 9px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.search-wrap[b-ad151zeevp] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
    padding: 6px 10px;
}

    .search-wrap i[b-ad151zeevp] {
        font-size: 15px;
        color: var(--color-text-secondary);
        flex-shrink: 0;
    }

.search-inp[b-ad151zeevp] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 11px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--color-text-primary);
    outline: none;
}

    .search-inp[b-ad151zeevp]::placeholder {
        color: var(--color-text-secondary);
    }

/* ════════════════════════════════════════════════════════════
   LISTA DE FORNECEDORES
════════════════════════════════════════════════════════════ */

.supplier-item[b-ad151zeevp] {
    border-bottom: 0.5px solid var(--color-border-tertiary);
    transition: background .12s;
}

    .supplier-item:last-child[b-ad151zeevp] {
        border-bottom: none;
    }

    .supplier-item:hover[b-ad151zeevp] {
        background: var(--color-background-secondary);
    }

.s-top[b-ad151zeevp] {
    padding: 11px 15px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.s-bot[b-ad151zeevp] {
    padding: 6px 15px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.s-av[b-ad151zeevp] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    margin-top: 2px;
}

.s-info[b-ad151zeevp] {
    flex: 1;
    min-width: 0;
}

.s-name[b-ad151zeevp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.s-cnpj[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    font-family: 'Courier New', monospace;
    margin-top: 2px;
}

.s-right[b-ad151zeevp] {
    flex-shrink: 0;
    text-align: right;
}

.s-pix-sub[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 3px;
}

/* ── Categoria tag (fallback) ── */
.cat-tag[b-ad151zeevp] {
    font-size: 10px;
    font-weight: 400;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    white-space: nowrap;
}

/* ── Pills ── */
.pill[b-ad151zeevp] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
}

    .pill i[b-ad151zeevp] {
        font-size: 10px;
    }

.p-ok[b-ad151zeevp] {
    background: rgba(59, 109, 17, 0.12);
    color: #3b6d11;
}

.p-warn[b-ad151zeevp] {
    background: rgba(133, 79, 11, 0.12);
    color: #854f0b;
}

.p-nopix[b-ad151zeevp] {
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
    border: 0.5px solid var(--color-border-tertiary);
}

/* ── Botões de ação da lista ── */
.btn-act[b-ad151zeevp] {
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0.5px solid;
    outline: none;
    transition: opacity .15s;
    white-space: nowrap;
}

    .btn-act:hover[b-ad151zeevp] {
        opacity: .80;
    }

    .btn-act:focus-visible[b-ad151zeevp] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    .btn-act i[b-ad151zeevp] {
        font-size: 12px;
    }

.b-edit[b-ad151zeevp] {
    background: rgba(255, 140, 0, 0.10);
    color: #854f0b;
    border-color: rgba(255, 140, 0, 0.35);
}

.b-del[b-ad151zeevp] {
    background: rgba(163, 45, 45, 0.08);
    color: #a32d2d;
    border-color: rgba(163, 45, 45, 0.3);
}

/* ── Empty ── */
.empty-state[b-ad151zeevp] {
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    text-align: center;
}

    .empty-state i[b-ad151zeevp] {
        font-size: 30px;
        opacity: .3;
    }

    .empty-state p[b-ad151zeevp] {
        font-size: 12px;
    }

/* ── Loading mini ── */
.loading-mini[b-ad151zeevp] {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.spinner-sm[b-ad151zeevp] {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-ad151zeevp .9s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   MODAL — NOVO CENTRO DE CUSTO
════════════════════════════════════════════════════════════ */

.cc-modal-overlay[b-ad151zeevp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.cc-modal[b-ad151zeevp] {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    animation: modalIn-b-ad151zeevp .15s ease-out;
}

.cc-modal-hd[b-ad151zeevp] {
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-modal-title[b-ad151zeevp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}

.cc-modal-close[b-ad151zeevp] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 0.5px solid var(--color-border-tertiary);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: 14px;
    outline: none;
}

    .cc-modal-close:hover[b-ad151zeevp] {
        background: var(--color-background-secondary);
    }

    .cc-modal-close:focus-visible[b-ad151zeevp] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

.cc-modal-body[b-ad151zeevp] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Rodapé do campo (contador + validação) ── */
.cc-field-footer[b-ad151zeevp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 16px;
}

.cc-char-count[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-left: auto;
}

.cc-validation-msg[b-ad151zeevp] {
    font-size: 10px;
    color: #a32d2d;
}

/* ── Paleta de cores ── */
.cc-cor-grid[b-ad151zeevp] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
}

.cc-cor-btn[b-ad151zeevp] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    outline: none;
    transition: transform .12s, border-color .12s;
    flex-shrink: 0;
}

    .cc-cor-btn:hover[b-ad151zeevp] {
        transform: scale(1.15);
    }

    .cc-cor-btn.selected[b-ad151zeevp] {
        border-color: var(--color-text-primary);
        transform: scale(1.15);
    }

    .cc-cor-btn:focus-visible[b-ad151zeevp] {
        outline: 2px solid #ffffff;
        outline-offset: 3px;
    }

/* ── Preview badge ── */
.cc-preview-row[b-ad151zeevp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
}

.cc-preview-label[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* ── Toggle Ativo/Inativo ── */
.cc-toggle-row[b-ad151zeevp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 8px;
}

.cc-toggle-label[b-ad151zeevp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.cc-toggle-sub[b-ad151zeevp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* Switch */
.cc-sw[b-ad151zeevp] {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

    .cc-sw input[b-ad151zeevp] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.cc-sw-track[b-ad151zeevp] {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: var(--color-border-tertiary);
    transition: background .2s;
    cursor: pointer;
}

.cc-sw-thumb[b-ad151zeevp] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
    pointer-events: none;
}

.cc-sw input:checked ~ .cc-sw-track[b-ad151zeevp] {
    background: #3b6d11;
}

.cc-sw input:checked ~ .cc-sw-thumb[b-ad151zeevp] {
    transform: translateX(16px);
}

.cc-sw input:focus-visible ~ .cc-sw-track[b-ad151zeevp] {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ── Footer do modal ── */
.cc-modal-ft[b-ad151zeevp] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 0.5px solid var(--color-border-tertiary);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVIDADE
════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .suppliers-page[b-ad151zeevp] {
        padding: 1rem;
    }

    .qr-verify-card[b-ad151zeevp] {
        flex-direction: column;
        align-items: center;
    }

    .qr-verify-right[b-ad151zeevp] {
        width: 100%;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 540px) {
    .suppliers-page[b-ad151zeevp] {
        padding: .75rem;
    }

    .form-row[b-ad151zeevp] {
        grid-template-columns: 1fr;
    }

    .s-top[b-ad151zeevp] {
        flex-wrap: wrap;
    }

    .s-right[b-ad151zeevp] {
        margin-left: auto;
    }

    .s-bot[b-ad151zeevp] {
        flex-wrap: wrap;
    }

    .btn-act[b-ad151zeevp] {
        flex: 1;
        justify-content: center;
    }

    .cc-modal[b-ad151zeevp] {
        max-width: 100%;
    }
}

/* ── Animações ── */
@keyframes spin-b-ad151zeevp {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-b-ad151zeevp {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}

@keyframes modalIn-b-ad151zeevp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Support.razor.rz.scp.css */
/* ============================================================
   Leuca — Support
   Support.razor.css  (scoped)
   ============================================================ */

/* ── Página ── */
.support-page[b-mcuv60r9dp] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Cabeçalho ── */
.page-header[b-mcuv60r9dp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.page-title[b-mcuv60r9dp] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}

.page-sub[b-mcuv60r9dp] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

/* ── Card ── */
.card[b-mcuv60r9dp] {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 12px;
    overflow: hidden;
}

.card-hd[b-mcuv60r9dp] {
    padding: 11px 15px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .card-hd i[b-mcuv60r9dp] {
        font-size: 15px;
        color: #ff8c00;
    }

.card-hd-title[b-mcuv60r9dp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.card-body[b-mcuv60r9dp] {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Banner de escopo ── */
.scope-banner[b-mcuv60r9dp] {
    border-radius: 0;
    border-left: 3px solid #ba7517;
    background: rgba(186, 117, 23, 0.10);
    padding: 12px 15px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

    .scope-banner i[b-mcuv60r9dp] {
        font-size: 17px;
        color: #ef9f27;
        flex-shrink: 0;
        margin-top: 1px;
    }

.scope-title[b-mcuv60r9dp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.scope-body[b-mcuv60r9dp] {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

    .scope-body strong[b-mcuv60r9dp] {
        color: #ef9f27;
        font-weight: 500;
    }

/* ── Banners de feedback ── */
.success-banner[b-mcuv60r9dp] {
    background: rgba(99, 153, 34, 0.15);
    border: 0.5px solid rgba(99, 153, 34, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 11px;
    color: #7ec94a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-banner[b-mcuv60r9dp] {
    background: rgba(232, 78, 27, 0.12);
    border: 0.5px solid rgba(232, 78, 27, 0.35);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 11px;
    color: #e84e1b;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Campos ── */
.field-row[b-mcuv60r9dp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.field[b-mcuv60r9dp] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .field.full[b-mcuv60r9dp] {
        grid-column: 1 / -1;
    }

    .field label[b-mcuv60r9dp] {
        font-size: 10px;
        color: var(--color-text-secondary);
    }

select[b-mcuv60r9dp],
input[type=text][b-mcuv60r9dp],
textarea[b-mcuv60r9dp] {
    width: 100%;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-family: Verdana, sans-serif;
    font-size: 11px;
    padding: 8px 10px;
    outline: none;
    transition: border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

    select:focus[b-mcuv60r9dp],
    input[type=text]:focus[b-mcuv60r9dp],
    textarea:focus[b-mcuv60r9dp] {
        border-color: #ff8c00;
    }

textarea[b-mcuv60r9dp] {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.char-count[b-mcuv60r9dp] {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-align: right;
    margin-top: -6px;
}

/* ── Slider de prioridade ── */
.prio-wrap[b-mcuv60r9dp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    padding: 12px 14px;
}

.prio-header[b-mcuv60r9dp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.prio-hint[b-mcuv60r9dp] {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.prio-badge[b-mcuv60r9dp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 20px;
    padding: 3px 10px;
    transition: all 0.2s;
}

    .prio-badge i[b-mcuv60r9dp] {
        font-size: 13px;
    }

.badge-baixa[b-mcuv60r9dp] {
    background: rgba(99, 153, 34, 0.20);
    color: #7ec94a;
}

.badge-normal[b-mcuv60r9dp] {
    background: rgba(186, 117, 23, 0.20);
    color: #ef9f27;
}

.badge-urgente[b-mcuv60r9dp] {
    background: rgba(232, 78, 27, 0.20);
    color: #e84e1b;
}

.slider-track[b-mcuv60r9dp] {
    position: relative;
    height: 6px;
    border-radius: 3px;
    margin: 4px 0;
}

.slider-track-bg[b-mcuv60r9dp] {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: linear-gradient(to right, #639922 0%, #ba7517 50%, #e84e1b 100%);
    opacity: 0.30;
}

.slider-track-fill[b-mcuv60r9dp] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s, background 0.2s;
}

.prio-slider[b-mcuv60r9dp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.slider-labels[b-mcuv60r9dp] {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    padding: 0 2px;
}

.lbl-dim[b-mcuv60r9dp] {
    color: var(--color-text-tertiary);
}

.lbl-active[b-mcuv60r9dp] {
    font-weight: 500;
}

.lbl-baixa[b-mcuv60r9dp] {
    color: #7ec94a;
}

.lbl-normal[b-mcuv60r9dp] {
    color: #ef9f27;
}

.lbl-urgente[b-mcuv60r9dp] {
    color: #e84e1b;
}

/* ── Botão enviar ── */
.btn-submit[b-mcuv60r9dp] {
    background: #ff8c00;
    border: none;
    border-radius: 8px;
    color: #412402;
    font-size: 11px;
    font-weight: 500;
    font-family: Verdana, sans-serif;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    transition: opacity 0.15s;
    white-space: nowrap;
}

    .btn-submit:hover[b-mcuv60r9dp] {
        opacity: 0.88;
    }

    .btn-submit:disabled[b-mcuv60r9dp] {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* ── Histórico ── */
.table-wrap[b-mcuv60r9dp] {
    overflow-x: auto;
}

.hist-table[b-mcuv60r9dp] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .hist-table th[b-mcuv60r9dp] {
        padding: 8px 12px;
        text-align: left;
        font-size: 9px;
        font-weight: 500;
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        border-bottom: 0.5px solid var(--color-border-tertiary);
    }

    .hist-table td[b-mcuv60r9dp] {
        padding: 10px 12px;
        border-bottom: 0.5px solid var(--color-border-tertiary);
        vertical-align: middle;
    }

    .hist-table tr:last-child td[b-mcuv60r9dp] {
        border-bottom: none;
    }

    .hist-table tr:hover td[b-mcuv60r9dp] {
        background: var(--color-background-secondary);
    }

.col-id[b-mcuv60r9dp] {
    width: 76px;
}

.col-data[b-mcuv60r9dp] {
    width: 90px;
}

.col-cat[b-mcuv60r9dp] {
    width: 90px;
}

.col-title[b-mcuv60r9dp] {
}

.col-prio[b-mcuv60r9dp] {
    width: 82px;
}

.col-status[b-mcuv60r9dp] {
    width: 115px;
}

.ticket-id[b-mcuv60r9dp] {
    font-family: monospace;
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.cell-text[b-mcuv60r9dp] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

.cat-label[b-mcuv60r9dp] {
    font-size: 10px;
    color: var(--color-text-secondary);
}

.title-label[b-mcuv60r9dp] {
    font-size: 10px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ── Pills de status ── */
.status-pill[b-mcuv60r9dp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 500;
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
}

.s-aberto[b-mcuv60r9dp] {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

.s-andamento[b-mcuv60r9dp] {
    background: rgba(55, 138, 221, 0.15);
    color: #378add;
}

.s-concluido[b-mcuv60r9dp] {
    background: rgba(99, 153, 34, 0.15);
    color: #7ec94a;
}

/* ── Pills de prioridade ── */
.prio-pill[b-mcuv60r9dp] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    border-radius: 20px;
    padding: 2px 8px;
}

.p-baixa[b-mcuv60r9dp] {
    background: rgba(99, 153, 34, 0.15);
    color: #7ec94a;
}

.p-normal[b-mcuv60r9dp] {
    background: rgba(186, 117, 23, 0.15);
    color: #ef9f27;
}

.p-urgente[b-mcuv60r9dp] {
    background: rgba(232, 78, 27, 0.15);
    color: #e84e1b;
}

/* ── Empty / loading ── */
.empty-mini[b-mcuv60r9dp] {
    padding: 24px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

    .empty-mini i[b-mcuv60r9dp] {
        font-size: 20px;
        color: var(--color-text-tertiary);
    }

.loading-mini[b-mcuv60r9dp] {
    padding: 24px;
    display: flex;
    justify-content: center;
}

.loading-state[b-mcuv60r9dp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: .75rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.loading-spinner[b-mcuv60r9dp] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-mcuv60r9dp .9s linear infinite;
}

.loading-spinner-sm[b-mcuv60r9dp] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-mcuv60r9dp .9s linear infinite;
    flex-shrink: 0;
}

.loading-text[b-mcuv60r9dp] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ── Responsividade ── */
@media (max-width: 768px) {
    .support-page[b-mcuv60r9dp] {
        padding: 1rem;
    }

    .field-row[b-mcuv60r9dp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .support-page[b-mcuv60r9dp] {
        padding: .75rem;
    }

    .col-cat[b-mcuv60r9dp],
    .col-prio[b-mcuv60r9dp] {
        display: none;
    }
}

@keyframes spin-b-mcuv60r9dp {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Terms.razor.rz.scp.css */
/* ============================================================
   Leuca — Terms.razor.css  (scoped)
   ============================================================ */

.terms-page[b-pig6shlwpg] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
}

/* ── Hero ── */
.terms-bee[b-pig6shlwpg] {
    font-size: 2rem;
    margin-bottom: .5rem;
}

.terms-title[b-pig6shlwpg] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: .25rem;
}

.terms-sub[b-pig6shlwpg] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.divider[b-pig6shlwpg] {
    height: 0.5px;
    background: var(--color-border-tertiary);
    margin: .875rem 0 1.5rem;
}

/* ── Índice rápido ── */
.terms-nav[b-pig6shlwpg] {
    margin: 0 auto 1.5rem;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.terms-nav-link[b-pig6shlwpg] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 4px 14px;
    border-radius: 20px;
    border: 0.5px solid rgba(255, 140, 0, 0.4);
    color: #ff8c00;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}

    .terms-nav-link:hover[b-pig6shlwpg] {
        background: rgba(255, 140, 0, 0.12);
    }

/* ── Card principal ── */
.terms-card[b-pig6shlwpg] {
    width: 100%;
    margin: 0 auto 1rem;
    background: var(--color-background-primary);
    border-radius: 12px;
    border: 0.5px solid var(--color-border-tertiary);
    padding: 1.25rem 1.5rem;
    box-sizing: border-box;
}

.terms-card-title[b-pig6shlwpg] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    padding-bottom: .75rem;
}

    .terms-card-title i[b-pig6shlwpg] {
        font-size: 15px;
        color: #ff8c00;
    }

.terms-version[b-pig6shlwpg] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
}

/* ── Seção interna ── */
.terms-section[b-pig6shlwpg] {
    margin-bottom: 1.25rem;
}

    .terms-section:last-child[b-pig6shlwpg] {
        margin-bottom: 0;
    }

.terms-section-title[b-pig6shlwpg] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: .5rem;
}

.terms-section p[b-pig6shlwpg] {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin: 0 0 .5rem;
}

.terms-section strong[b-pig6shlwpg] {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* ── Lista ── */
.terms-list[b-pig6shlwpg] {
    margin: .25rem 0 .5rem 1.25rem;
    padding: 0;
    list-style: disc;
}

    .terms-list li[b-pig6shlwpg] {
        font-size: 11px;
        color: var(--color-text-secondary);
        line-height: 1.75;
        margin-bottom: .25rem;
    }

        .terms-list li strong[b-pig6shlwpg] {
            color: var(--color-text-primary);
            font-weight: 500;
        }

/* ── Tabela ── */
.terms-table-wrap[b-pig6shlwpg] {
    overflow-x: auto;
    margin: .5rem 0;
}

.terms-table[b-pig6shlwpg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    color: var(--color-text-secondary);
}

    .terms-table th[b-pig6shlwpg] {
        background: var(--color-background-secondary);
        color: var(--color-text-primary);
        font-weight: 500;
        padding: .5rem .875rem;
        text-align: left;
        border: 0.5px solid var(--color-border-tertiary);
    }

    .terms-table td[b-pig6shlwpg] {
        padding: .5rem .875rem;
        border: 0.5px solid var(--color-border-tertiary);
        vertical-align: top;
        line-height: 1.5;
    }

    .terms-table tr:nth-child(even) td[b-pig6shlwpg] {
        background: var(--color-background-secondary);
    }

/* ── Rodapé ── */
.terms-footer[b-pig6shlwpg] {
    margin: 0 auto 1rem;
    text-align: center;
    font-size: 10px;
    color: var(--color-text-secondary);
}

/* ── Botão voltar ── */
.btn-back[b-pig6shlwpg] {
    width: 100%;
    margin: 0 auto .875rem;
    padding: .75rem;
    border-radius: 8px;
    border: 0.5px solid var(--color-border-secondary);
    background: transparent;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: border-color .15s, color .15s;
    box-sizing: border-box;
}

    .btn-back:hover[b-pig6shlwpg] {
        border-color: #ff8c00;
        color: #ff8c00;
    }

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .terms-page[b-pig6shlwpg] {
        padding: 1rem;
    }

    .terms-card[b-pig6shlwpg] {
        padding: 1rem 1.25rem;
    }

    .terms-table[b-pig6shlwpg] {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .terms-page[b-pig6shlwpg] {
        padding: .75rem;
    }

    .terms-card[b-pig6shlwpg] {
        padding: 1rem;
    }

    .terms-title[b-pig6shlwpg] {
        font-size: 14px;
    }

    .terms-nav[b-pig6shlwpg] {
        flex-direction: column;
    }
}
/* /Shared/PwaInstallButton.razor.rz.scp.css */
.btn-pwa-install[b-4s7c6agw8z] {
    background-color: #ff8c00;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1.2rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

    .btn-pwa-install:hover[b-4s7c6agw8z] {
        opacity: 0.85;
    }
/* /Shared/UpdateValidator.razor.rz.scp.css */
.update-alert[b-t9z0yvdck0] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #FF8C00; /* Cor do Leuca */
    color: white;
    padding: 15px;
    border-radius: 8px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 10px;
}