@import '_content/Toolbelt.Blazor.PWA.Updater/Toolbelt.Blazor.PWA.Updater.2drl8nn3fe.bundle.scp.css';

/* /Layout/HomeLayout.razor.rz.scp.css */
body[b-h7rbl4x0nc] {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
}

.container[b-h7rbl4x0nc] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
}

.header[b-h7rbl4x0nc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
}

    .header h1[b-h7rbl4x0nc] {
        margin: 0;
    }

.link[b-h7rbl4x0nc] {
    color: orange;
    text-decoration: none;
    font-size: 16px;
    margin-left: auto; /* Adiciona margem automática à esquerda para empurrar o link para a direita */
}

.main-content[b-h7rbl4x0nc] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.footer[b-h7rbl4x0nc] {
    text-align: center;
    padding: 10px 0;
}
/* /Layout/LoginLayout.razor.rz.scp.css */

/* Reset agressivo para corrigir HTML aninhado do Blazor */
html[b-0dk2xgim19], body[b-0dk2xgim19] {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: black !important;
    color: white;
    font-family: Arial, sans-serif;
    overflow-x: hidden !important; /* Previne scroll horizontal */
}

/* Force o box-sizing em TUDO */
*[b-0dk2xgim19], *[b-0dk2xgim19]::before, *[b-0dk2xgim19]::after {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

/* Container principal - FORÇA 100% da largura da viewport */
.container[b-0dk2xgim19] {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important; /* 100% da largura da viewport */
    max-width: 100vw !important;
    min-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* Header - ocupa 100% da largura */
.header[b-0dk2xgim19] {
    display: flex !important;
    justify-content: flex-start !important; /* Alinha itens à esquerda por padrão */
    align-items: center !important;
    padding: 10px 20px !important;
    background-color: black !important;
    min-height: 120px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

    .header h1[b-0dk2xgim19] {
        margin: 0 !important;
    }

    /* Logo à esquerda, empurra os links para a direita */
    .header img[b-0dk2xgim19] {
        margin-right: auto !important; /* Empurra todo o resto para a direita */
    }

/* Links ficam lado a lado à direita */
.link[b-0dk2xgim19] {
    color: #ff8c00 !important; /* Laranja Bombus */
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-left: 20px !important; /* Espaçamento entre os links */
    transition: all 0.2s ease !important;
}

    .link:hover[b-0dk2xgim19] {
        color: #fff !important;
        text-decoration: underline !important;
    }

/* CRÍTICO: Main content - ZERO de tudo, 100% da largura */
.main-content[b-0dk2xgim19] {
    background-color: white !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 !important; /* ZERO padding */
    margin: 0 !important; /* ZERO margin */
    flex-grow: 1 !important;
    width: 100% !important; /* 100% da largura */
    max-width: 100% !important;
    min-width: 100% !important;
    color: black !important;
    overflow-x: hidden !important; /* Previne overflow horizontal */
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* Footer - ocupa 100% da largura */
.footer[b-0dk2xgim19] {
    background-color: #000000 !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* Previne qualquer elemento filho de causar overflow */
.main-content > *[b-0dk2xgim19],
.container > *[b-0dk2xgim19] {
    max-width: 100% !important;
}

/* Se o Blazor adicionar divs extras, force-as também */
#app[b-0dk2xgim19] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
    .header[b-0dk2xgim19] {
        padding: 10px 15px !important;
        min-height: 100px !important;
    }

    .link[b-0dk2xgim19] {
        font-size: 14px !important;
        margin-left: 15px !important;
    }
}

@media (max-width: 480px) {
    .header[b-0dk2xgim19] {
        padding: 8px 12px !important;
        min-height: 80px !important;
    }

    .link[b-0dk2xgim19] {
        font-size: 13px !important;
        margin-left: 12px !important;
    }

    .footer[b-0dk2xgim19] {
        font-size: 10px !important;
        height: 60px !important;
        padding: 0 10px !important;
    }
}
/* /Layout/LogoffLayout.razor.rz.scp.css */
body[b-2lnsgtcark] {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
}

.container[b-2lnsgtcark] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
}

.header[b-2lnsgtcark] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
}

    .header h1[b-2lnsgtcark] {
        margin: 0;
    }

.link[b-2lnsgtcark] {
    color: orange;
    text-decoration: none;
    font-size: 16px;
    margin-left: auto; /* Adiciona margem automática à esquerda para empurrar o link para a direita */
}

.main-content[b-2lnsgtcark] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.footer[b-2lnsgtcark] {
    text-align: center;
    padding: 10px 0;
}
/* /Layout/MainLayout.razor.rz.scp.css */

/* ============================================
   MainLayout
   Baseado no padrão Bombus (sem Sidebar)
   ============================================ */

/* Reset e base */
html[b-bylryi1tjn], body[b-bylryi1tjn] {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: black !important;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important; /*Arial, sans-serif;*/
    overflow-x: hidden !important;
}

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


/* ========== PADRÕES GLOBAIS ========== */
/* Aplicado automaticamente a todas as páginas */

.page-content[b-bylryi1tjn],
.send-page[b-bylryi1tjn],
.dashboard-full[b-bylryi1tjn],
.creditor-register[b-bylryi1tjn] {
    max-width: 1200px !important;
    min-height: calc(100vh - 200px) !important;
    margin: 0 auto !important;
}

/* Tipografia padrão */
.page-title[b-bylryi1tjn] {
    font-size: 2rem !important;
}

.page-subtitle[b-bylryi1tjn] {
    font-size: 0.95rem !important;
}

.badge[b-bylryi1tjn],
.badge-orange[b-bylryi1tjn],
.badge-green[b-bylryi1tjn] {
    font-size: 0.875rem !important;
}

.detail-label[b-bylryi1tjn],
.form-helper[b-bylryi1tjn],
.summary-label[b-bylryi1tjn] {
    font-size: 0.7rem !important;
}

/* Responsividade global para containers */
@media (max-width: 768px) {
    .page-content[b-bylryi1tjn],
    .send-page[b-bylryi1tjn],
    .dashboard-full[b-bylryi1tjn],
    .creditor-register[b-bylryi1tjn] {
        padding: 1.5rem !important;
    }

    .page-title[b-bylryi1tjn] {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .page-content[b-bylryi1tjn],
    .send-page[b-bylryi1tjn],
    .dashboard-full[b-bylryi1tjn],
    .creditor-register[b-bylryi1tjn] {
        padding: 1rem !important;
    }

    .page-title[b-bylryi1tjn] {
        font-size: 1.35rem !important;
    }
}


/* ========== CONTAINER PRINCIPAL ========== */
.container[b-bylryi1tjn] {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
}


/* ========== HEADER ========== */
.header[b-bylryi1tjn] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 20px !important;
    background-color: black !important;
    min-height: 120px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    z-index: 10;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 14px !important;
}

    .header h1[b-bylryi1tjn] {
        margin: 0 !important;
    }

/* Botão do logo (sem estilo de botão) */
.logo-button[b-bylryi1tjn] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    margin-right: auto !important;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .logo-button:hover[b-bylryi1tjn] {
        transform: scale(1.02);
        opacity: 0.9;
    }

    .logo-button:active[b-bylryi1tjn] {
        transform: scale(0.98);
    }

    .logo-button:focus[b-bylryi1tjn] {
        outline: 2px solid #ff8c00;
        outline-offset: 4px;
        border-radius: 4px;
    }

.logo-img[b-bylryi1tjn] {
    height: auto;
    width: auto;
    max-height: 100px;
    display: block;
}

/* Container dos links */
.header-links[b-bylryi1tjn] {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

    .header-links span[b-bylryi1tjn] {
        color: #666 !important;
        font-size: 14px !important;
    }

/* Links do header */
.link[b-bylryi1tjn] {
    color: #ff8c00 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
}

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


/* ========== MAIN CONTENT ========== */
.main-content[b-bylryi1tjn] {
    background-color: white !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    color: black !important;
    overflow-x: hidden !important;
    overflow-y: auto;
    position: relative !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}


/* ========== FOOTER ========== */
.footer[b-bylryi1tjn] {
    background-color: #000000 !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 12px !important;
}

/* Previne overflow */
.main-content > *[b-bylryi1tjn],
.container > *[b-bylryi1tjn] {
    max-width: 100% !important;
}

#app[b-bylryi1tjn] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ========== RESPONSIVIDADE ========== */

/* Tablets */
@media (max-width: 768px) {
    .header[b-bylryi1tjn] {
        padding: 10px 15px !important;
        min-height: 120px !important;
        height: 120px !important;
    }

    .link[b-bylryi1tjn] {
        font-size: 14px !important;
    }

    .header-links[b-bylryi1tjn] {
        gap: 12px !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .header[b-bylryi1tjn] {
        padding: 8px 12px !important;
        min-height: 120px !important;
        height: 120px !important;
    }

    .link[b-bylryi1tjn] {
        font-size: 13px !important;
    }

    .header-links[b-bylryi1tjn] {
        gap: 10px !important;
    }

        .header-links span[b-bylryi1tjn] {
            font-size: 12px !important;
        }

    .footer[b-bylryi1tjn] {
        font-size: 10px !important;
        height: 60px !important;
        padding: 0 10px !important;
    }
}
/* /Pages/About.razor.rz.scp.css */
/* ============================================
   BOMBUS - Página Sobre
   CSS Isolado (scoped)
   Segue padrão visual do aplicativo
   ============================================ */

/* Container principal - SEGUE PADRÃO DO LOGIN/REGISTER */
.page-content[b-6odm9ch7xe] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    box-sizing: border-box;
}

    /* ========== TÍTULO ========== */
    .page-content h3[b-6odm9ch7xe] {
        font-size: 1.75rem;
        font-weight: 700;
        color: #333;
        margin: 0 0 0.5rem 0;
    }

    /* ========== DIVISOR ========== */
    .page-content hr[b-6odm9ch7xe] {
        height: 2px;
        background: linear-gradient(90deg, #ff8c00, transparent);
        border: none;
        margin: 0 0 1.5rem 0;
        border-radius: 2px;
    }

    /* ========== PARÁGRAFOS ========== */
    .page-content p[b-6odm9ch7xe] {
        font-size: 0.85rem;
        line-height: 1.8;
        color: #555;
        margin: 0 0 1.25rem 0;
        text-align: justify;
        text-justify: inter-word;
    }

        .page-content p:last-of-type[b-6odm9ch7xe] {
            margin-bottom: 0;
        }

        /* ========== NEGRITO NORMAL (nomes de apps) ========== */
        .page-content p b[b-6odm9ch7xe] {
            color: #333;
            font-weight: 700;
        }

            /* ========== DESTAQUE ESPECIAL (tagline final) ========== */
            .page-content p .highlight[b-6odm9ch7xe],
            .page-content p b.highlight[b-6odm9ch7xe] {
                color: #ff8c00;
                font-weight: 700;
                font-size: 1.15rem;
                display: inline-block;
                background: linear-gradient(135deg, #fff8f0 0%, #fff4e6 100%);
                padding: 0.5rem 1rem;
                border-radius: 8px;
                border-left: 4px solid #ff8c00;
            }

/* ========== ANIMAÇÕES ========== */
@keyframes fadeIn-b-6odm9ch7xe {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação de entrada suave */
.page-content[b-6odm9ch7xe] {
    animation: fadeIn-b-6odm9ch7xe 0.4s ease-out;
}

    /* ========== ESPAÇAMENTO ========== */
    .page-content br[b-6odm9ch7xe] {
        line-height: 0;
        margin: 0.5rem 0;
    }

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
    .page-content[b-6odm9ch7xe] {
        padding: 1.5rem;
    }

        .page-content h3[b-6odm9ch7xe] {
            font-size: 1.5rem;
        }

        .page-content p[b-6odm9ch7xe] {
            font-size: 0.95rem;
            line-height: 1.7;
        }

            .page-content p .highlight[b-6odm9ch7xe],
            .page-content p b.highlight[b-6odm9ch7xe] {
                font-size: 1.05rem;
            }
}

@media (max-width: 480px) {
    .page-content[b-6odm9ch7xe] {
        padding: 1rem;
    }

        .page-content h3[b-6odm9ch7xe] {
            font-size: 1.35rem;
        }

        .page-content p[b-6odm9ch7xe] {
            font-size: 0.9rem;
            line-height: 1.65;
            text-align: left;
        }

            .page-content p .highlight[b-6odm9ch7xe],
            .page-content p b.highlight[b-6odm9ch7xe] {
                font-size: 1rem;
                padding: 0.4rem 0.75rem;
            }
}
/* /Pages/Charges/CustomerSearch.razor.rz.scp.css */
/* ============================================================
   JATAÍ — Pesquisar Cliente
   CustomerSearch.razor.css  (scoped)
   ============================================================ */

/* ── Container ── */
.customer-search[b-blzkun4g6e] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    box-sizing: border-box;
    min-height: calc(100vh - 200px);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* ── Header ── */
.page-header[b-blzkun4g6e] {
    margin-bottom: 1rem;
}

.page-title[b-blzkun4g6e] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.badge[b-blzkun4g6e] {
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
}

.badge-orange[b-blzkun4g6e] {
    background: #ff8c00;
    color: #fff;
}

.page-subtitle[b-blzkun4g6e] {
    font-size: .85rem;
    color: #666;
    margin-top: .25rem;
}

/* ── Divider ── */
.divider[b-blzkun4g6e] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
    margin: .75rem 0;
}

/* ── Info banner ── */
.info-banner[b-blzkun4g6e] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border-left: 4px solid #ff8c00;
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.info-banner-icon[b-blzkun4g6e] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-banner-text[b-blzkun4g6e] {
    flex: 1;
}

.info-banner-title[b-blzkun4g6e] {
    font-weight: 700;
    color: #e67e00;
    font-size: .8rem;
    margin-bottom: .15rem;
}

.info-banner-description[b-blzkun4g6e] {
    color: #666;
    font-size: .75rem;
    line-height: 1.5;
}

.close-btn[b-blzkun4g6e] {
    background: transparent;
    border: none;
    color: #999;
    font-size: 1rem;
    cursor: pointer;
    padding: .25rem;
    border-radius: 4px;
    transition: all .2s;
    flex-shrink: 0;
}

    .close-btn:hover[b-blzkun4g6e] {
        background: rgba(255,140,0,.1);
        color: #ff8c00;
    }

/* ── Form section ── */
.form-section[b-blzkun4g6e] {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.section-title[b-blzkun4g6e] {
    font-size: .9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #f0f0f0;
}

.form-group[b-blzkun4g6e] {
    width: 100%;
}

.form-label[b-blzkun4g6e] {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: #444;
    margin-bottom: .35rem;
    letter-spacing: .3px;
}

.required[b-blzkun4g6e] {
    color: #ff8c00;
}

.form-input[b-blzkun4g6e] {
    width: 100%;
    padding: .75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

    .form-input:focus[b-blzkun4g6e] {
        border-color: #ff8c00;
        box-shadow: 0 0 0 3px rgba(255,140,0,.1);
    }

    .form-input[b-blzkun4g6e]::placeholder {
        color: #bbb;
    }

    .form-input.error[b-blzkun4g6e] {
        border-color: #c62828;
    }

    .form-input.has-value[b-blzkun4g6e] {
        border-color: #c8e6c9;
        background: #f9fff9;
    }

.form-helper[b-blzkun4g6e] {
    font-size: .65rem;
    color: #999;
    margin-top: .25rem;
    display: block;
}

.validation-error[b-blzkun4g6e] {
    color: #c62828;
    font-size: .65rem;
    margin-top: .25rem;
    display: block;
}

/* ── Search results ── */
.search-results[b-blzkun4g6e] {
    margin-bottom: 1rem;
}

.empty-state[b-blzkun4g6e] {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #999;
}

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

.empty-state h3[b-blzkun4g6e] {
    font-size: 1rem;
    color: #666;
    font-weight: 600;
    margin-bottom: .35rem;
}

.empty-state p[b-blzkun4g6e] {
    font-size: .8rem;
    line-height: 1.4;
    margin: 0;
}

.loading-state[b-blzkun4g6e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    gap: .75rem;
}

.loading-spinner[b-blzkun4g6e] {
    width: 36px;
    height: 36px;
    border: 3px solid #f0f0f0;
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

.loading-text[b-blzkun4g6e] {
    font-size: .8rem;
    color: #999;
}

/* ── Result card ── */
.result-card[b-blzkun4g6e] {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: .5rem;
}

.result-header[b-blzkun4g6e] {
    padding: .875rem 1.125rem;
}

    .result-header.success[b-blzkun4g6e] {
        background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
        border-bottom: 1px solid #c8e6c9;
    }

    .result-header.warning[b-blzkun4g6e] {
        background: linear-gradient(135deg, #fff8f0, #fff4e6);
        border-bottom: 1px solid #ffe0b2;
    }

.result-title[b-blzkun4g6e] {
    font-size: .9rem;
    font-weight: 700;
}

.result-header.success .result-title[b-blzkun4g6e] {
    color: #388e3c;
}

.result-header.warning .result-title[b-blzkun4g6e] {
    color: #e67e00;
}

.result-subtitle[b-blzkun4g6e] {
    font-size: .72rem;
    margin-top: .15rem;
    opacity: .75;
}

.result-header.success .result-subtitle[b-blzkun4g6e] {
    color: #388e3c;
}

.result-header.warning .result-subtitle[b-blzkun4g6e] {
    color: #e67e00;
}

.result-body[b-blzkun4g6e] {
    padding: 1rem 1.125rem;
    background: #fff;
}

.detail-grid[b-blzkun4g6e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.detail-item[b-blzkun4g6e] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

    .detail-item.full-width[b-blzkun4g6e] {
        grid-column: span 2;
    }

.detail-label[b-blzkun4g6e] {
    font-size: .62rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .4px;
}

.detail-value[b-blzkun4g6e] {
    font-size: .88rem;
    color: #333;
    font-weight: 600;
}

    .detail-value.mono[b-blzkun4g6e] {
        font-family: 'Courier New', monospace;
        font-size: .82rem;
    }

.status-badge[b-blzkun4g6e] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
}

    .status-badge.active[b-blzkun4g6e] {
        background: #e8f5e9;
        color: #388e3c;
    }

    .status-badge.not-found[b-blzkun4g6e] {
        background: #ffebee;
        color: #c62828;
    }

/* ── Route card ── */
.route-card[b-blzkun4g6e] {
    border-radius: 12px;
    overflow: hidden;
    margin-top: .75rem;
    border: 2px solid transparent;
}

    .route-card.kollecta[b-blzkun4g6e] {
        border-color: #4caf50;
    }

    .route-card.email[b-blzkun4g6e] {
        border-color: #ff8c00;
    }

.route-header[b-blzkun4g6e] {
    padding: .75rem 1.125rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.route-card.kollecta .route-header[b-blzkun4g6e] {
    background: #e8f5e9;
}

.route-card.email .route-header[b-blzkun4g6e] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
}

.route-icon[b-blzkun4g6e] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.route-title[b-blzkun4g6e] {
    font-size: .85rem;
    font-weight: 700;
}

.route-card.kollecta .route-title[b-blzkun4g6e] {
    color: #388e3c;
}

.route-card.email .route-title[b-blzkun4g6e] {
    color: #e67e00;
}

.route-desc[b-blzkun4g6e] {
    font-size: .7rem;
    line-height: 1.4;
    margin-top: .1rem;
}

.route-card.kollecta .route-desc[b-blzkun4g6e] {
    color: #558b2f;
}

.route-card.email .route-desc[b-blzkun4g6e] {
    color: #a0522d;
}

/* ══════════════════════════════════════════════════════════
   ★ Seção dados do destinatário (estado NotFound)
══════════════════════════════════════════════════════════ */
.recipient-section[b-blzkun4g6e] {
    margin-top: .875rem;
    border: 2px solid #ff8c00;
    border-radius: 12px;
    overflow: hidden;
    animation: slideDown .3s ease-out;
}

.recipient-header[b-blzkun4g6e] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.recipient-header-icon[b-blzkun4g6e] {
    font-size: 1.1rem;
}

.recipient-header-title[b-blzkun4g6e] {
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
}

.recipient-header-sub[b-blzkun4g6e] {
    font-size: .68rem;
    color: rgba(255,255,255,.8);
    margin-top: .05rem;
}

.recipient-body[b-blzkun4g6e] {
    padding: 1rem;
    background: #fff;
}

.recipient-fields[b-blzkun4g6e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

    .recipient-fields .full[b-blzkun4g6e] {
        grid-column: span 2;
    }

.field-wrap[b-blzkun4g6e] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Inputs dentro da recipient-section — fundo tintado laranja */
.recipient-body .form-input[b-blzkun4g6e] {
    background: #fff8f0;
    border-color: #ffd094;
}

    .recipient-body .form-input:focus[b-blzkun4g6e] {
        background: #fff;
        border-color: #ff8c00;
        box-shadow: 0 0 0 3px rgba(255,140,0,.1);
    }

    .recipient-body .form-input.has-value[b-blzkun4g6e] {
        background: #fff;
        border-color: #c8e6c9;
    }

/* Preview card */
.recipient-preview[b-blzkun4g6e] {
    margin-top: .875rem;
    background: linear-gradient(135deg, #fff4e6, #fff8f0);
    border: 1px solid #ffe0b2;
    border-left: 4px solid #ff8c00;
    border-radius: 8px;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.preview-avatar[b-blzkun4g6e] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(255,140,0,.3);
}

.preview-label[b-blzkun4g6e] {
    font-size: .58rem;
    color: #9e9e9e;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .5px;
}

.preview-name[b-blzkun4g6e] {
    font-size: .9rem;
    font-weight: 700;
    color: #333;
}

.preview-sub[b-blzkun4g6e] {
    font-size: .7rem;
    color: #666;
    font-family: 'Courier New', monospace;
    margin-top: .05rem;
}

/* ── Buttons ── */
.btn-group-footer[b-blzkun4g6e] {
    display: flex;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.btn[b-blzkun4g6e] {
    flex: 1;
    padding: .875rem 1rem;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: inherit;
}

    .btn:disabled[b-blzkun4g6e] {
        opacity: .55;
        cursor: not-allowed;
    }

.btn-primary[b-blzkun4g6e] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255,140,0,.3);
}

    .btn-primary:hover:not(:disabled)[b-blzkun4g6e] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255,140,0,.4);
    }

.btn-secondary[b-blzkun4g6e] {
    background: #fff;
    color: #666;
    border: 2px solid #e0e0e0;
}

    .btn-secondary:hover:not(:disabled)[b-blzkun4g6e] {
        border-color: #ff8c00;
        color: #ff8c00;
    }

/* ── Spinner ── */
.spinner[b-blzkun4g6e] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

/* ── Animations ── */
.fade-in[b-blzkun4g6e] {
    animation: fadeIn .3s ease-out;
}

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

@@keyframes fadeIn {
    from[b-blzkun4g6e] {
        opacity: 0;
        transform: translateY(10px);
    }

    to[b-blzkun4g6e] {
        opacity: 1;
        transform: translateY(0);
    }
}

@@keyframes slideDown {
    from[b-blzkun4g6e] {
        opacity: 0;
        transform: translateY(-8px);
    }

    to[b-blzkun4g6e] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsividade ── */
@media (max-width: 480px) {
    .customer-search[b-blzkun4g6e] {
        padding: 1rem;
    }

    .page-title[b-blzkun4g6e] {
        font-size: 1.25rem;
    }

    .detail-grid[b-blzkun4g6e] {
        grid-template-columns: 1fr;
    }

    .detail-item.full-width[b-blzkun4g6e] {
        grid-column: span 1;
    }

    .recipient-fields[b-blzkun4g6e] {
        grid-template-columns: 1fr;
    }

        .recipient-fields .full[b-blzkun4g6e] {
            grid-column: span 1;
        }

    .btn-group-footer[b-blzkun4g6e] {
        flex-direction: column;
    }
}
/* /Pages/Charges/SendEmail.razor.rz.scp.css */
/* ============================================================
   JATAÍ — Enviar Cobrança
   SendEmail.razor.css  (scoped)
   ============================================================ */

/* ── Container ── */
.jatai-send[b-aqpye7ezf8] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    box-sizing: border-box;
    min-height: calc(100vh - 200px);
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* ── Header ── */
.page-header[b-aqpye7ezf8] {
    margin-bottom: 1rem;
}

.page-title[b-aqpye7ezf8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.badge[b-aqpye7ezf8] {
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
}

.badge-orange[b-aqpye7ezf8] {
    background: #ff8c00;
    color: #fff;
}

.badge-green[b-aqpye7ezf8] {
    background: #4caf50;
    color: #fff;
}

.page-subtitle[b-aqpye7ezf8] {
    font-size: .85rem;
    color: #666;
    margin-top: .25rem;
}

/* ── Stepper ── */
.stepper[b-aqpye7ezf8] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 1rem 0 1.5rem;
    padding: 0 .5rem;
}

.step[b-aqpye7ezf8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    max-width: 150px;
}

.step-circle[b-aqpye7ezf8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    transition: all .3s;
    z-index: 1;
}

.step.active .step-circle[b-aqpye7ezf8] {
    background: #ff8c00;
    color: #fff;
    box-shadow: 0 3px 12px rgba(255,140,0,.4);
}

.step.completed .step-circle[b-aqpye7ezf8] {
    background: #4caf50;
    color: #fff;
}

.step-label[b-aqpye7ezf8] {
    font-size: .65rem;
    color: #999;
    margin-top: .35rem;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.step.active .step-label[b-aqpye7ezf8],
.step.completed .step-label[b-aqpye7ezf8] {
    color: #333;
}

.step-line[b-aqpye7ezf8] {
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 3px;
    background: #e0e0e0;
    z-index: 0;
    transition: background .3s;
}

.step:last-child .step-line[b-aqpye7ezf8] {
    display: none;
}

.step.completed .step-line[b-aqpye7ezf8] {
    background: #4caf50;
}

/* ── Divider ── */
.divider[b-aqpye7ezf8] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
    margin: .75rem 0;
}

/* ── Content area ── */
.content-area[b-aqpye7ezf8] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.step-content[b-aqpye7ezf8] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Animations ── */
.fade-in[b-aqpye7ezf8] {
    animation: fadeIn .3s ease-out;
}

@@keyframes fadeIn {
    from[b-aqpye7ezf8] {
        opacity: 0;
        transform: translateY(10px);
    }

    to[b-aqpye7ezf8] {
        opacity: 1;
        transform: translateY(0);
    }
}

@@keyframes scaleIn {
    0%[b-aqpye7ezf8] {
        transform: scale(0);
    }

    50%[b-aqpye7ezf8] {
        transform: scale(1.1);
    }

    100%[b-aqpye7ezf8] {
        transform: scale(1);
    }
}

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

@@keyframes indeterminate {
    0%[b-aqpye7ezf8] {
        left: -40%;
        width: 40%;
    }

    60%[b-aqpye7ezf8] {
        left: 100%;
        width: 40%;
    }

    100%[b-aqpye7ezf8] {
        left: 100%;
        width: 40%;
    }
}

/* ── Info banner ── */
.info-banner[b-aqpye7ezf8] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border-left: 4px solid #ff8c00;
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

    .info-banner.error-banner[b-aqpye7ezf8] {
        background: linear-gradient(135deg, #ffebee, #ffcdd2);
        border-left-color: #c62828;
    }

        .info-banner.error-banner .info-banner-title[b-aqpye7ezf8] {
            color: #c62828;
        }

        .info-banner.error-banner .info-banner-description[b-aqpye7ezf8] {
            color: #b71c1c;
        }

.info-banner-icon[b-aqpye7ezf8] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-banner-text[b-aqpye7ezf8] {
    flex: 1;
}

.info-banner-title[b-aqpye7ezf8] {
    font-weight: 700;
    color: #e67e00;
    font-size: .8rem;
    margin-bottom: .15rem;
}

.info-banner-description[b-aqpye7ezf8] {
    color: #666;
    font-size: .75rem;
    line-height: 1.4;
}

.close-btn[b-aqpye7ezf8] {
    background: transparent;
    border: none;
    color: #999;
    font-size: 1rem;
    cursor: pointer;
    padding: .25rem;
    border-radius: 4px;
    transition: all .2s;
    flex-shrink: 0;
}

    .close-btn:hover[b-aqpye7ezf8] {
        background: rgba(255,140,0,.1);
        color: #ff8c00;
    }

/* ── Form section ── */
.form-section[b-aqpye7ezf8] {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.section-title[b-aqpye7ezf8] {
    font-size: .9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #f0f0f0;
}

.form-group[b-aqpye7ezf8] {
    margin-bottom: 1rem;
    width: 100%;
}

.form-label[b-aqpye7ezf8] {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: #444;
    margin-bottom: .35rem;
    letter-spacing: .3px;
}

.required[b-aqpye7ezf8] {
    color: #ff8c00;
}

.form-input[b-aqpye7ezf8],
[b-aqpye7ezf8] .form-input {
    width: 100%;
    padding: .75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
    transition: all .2s;
    background: #fff;
    color: #333;
    box-sizing: border-box;
}

    .form-input:focus[b-aqpye7ezf8],
    [b-aqpye7ezf8] .form-input:focus {
        outline: none;
        border-color: #ff8c00;
        box-shadow: 0 0 0 3px rgba(255,140,0,.1);
    }

    .form-input[b-aqpye7ezf8]::placeholder {
        color: #bbb;
    }

    .form-input.error[b-aqpye7ezf8] {
        border-color: #c62828;
    }

.form-helper[b-aqpye7ezf8] {
    font-size: .65rem;
    color: #999;
    margin-top: .25rem;
    display: block;
}

.validation-error[b-aqpye7ezf8] {
    color: #c62828;
    font-size: .65rem;
    margin-top: .25rem;
    display: block;
}

.form-row[b-aqpye7ezf8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

/* ── Debtor card ── */
.debtor-card[b-aqpye7ezf8] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border: 1px solid #ffe0b2;
    border-left: 4px solid #ff8c00;
    border-radius: 10px;
    padding: .875rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .875rem;
}

.debtor-avatar[b-aqpye7ezf8] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(255,140,0,.3);
    flex-shrink: 0;
}

.debtor-card-label[b-aqpye7ezf8] {
    font-size: .6rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .5px;
}

.debtor-name[b-aqpye7ezf8] {
    font-size: .95rem;
    font-weight: 700;
    color: #222;
}

.debtor-id[b-aqpye7ezf8] {
    font-size: .72rem;
    color: #666;
    font-family: 'Courier New', monospace;
}

/* ── Toggle PIX / Boleto ── */
.payment-toggle[b-aqpye7ezf8] {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: .875rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    transition: border-color .25s, background .25s;
}

    .payment-toggle.is-boleto[b-aqpye7ezf8] {
        border-color: #ff8c00;
        background: #fff8f0;
    }

.toggle-switch[b-aqpye7ezf8] {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

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

.toggle-track[b-aqpye7ezf8] {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    background: #ccc;
    transition: background .25s;
    cursor: pointer;
}

    .toggle-track[b-aqpye7ezf8]::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        top: 3px;
        left: 3px;
        transition: transform .25s;
        box-shadow: 0 1px 4px rgba(0,0,0,.2);
    }

.toggle-switch input:checked + .toggle-track[b-aqpye7ezf8] {
    background: #ff8c00;
}

    .toggle-switch input:checked + .toggle-track[b-aqpye7ezf8]::after {
        transform: translateX(20px);
    }

.toggle-content[b-aqpye7ezf8] {
    flex: 1;
}

.toggle-title[b-aqpye7ezf8] {
    font-size: .875rem;
    font-weight: 700;
    color: #333;
}

.toggle-desc[b-aqpye7ezf8] {
    font-size: .74rem;
    color: #666;
    margin-top: .2rem;
    line-height: 1.5;
}

.pix-badge[b-aqpye7ezf8], .boleto-badge[b-aqpye7ezf8] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 700;
    margin-top: .4rem;
}

.pix-badge[b-aqpye7ezf8] {
    background: #e8f5e9;
    color: #2e7d32;
}

.boleto-badge[b-aqpye7ezf8] {
    background: #fff3e0;
    color: #e65100;
}

/* ── Upload section ── */
.upload-section[b-aqpye7ezf8] {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.125rem;
    margin-bottom: 1rem;
}

.upload-sub[b-aqpye7ezf8] {
    font-size: .72rem;
    color: #999;
    margin-bottom: .875rem;
}

.upload-slot[b-aqpye7ezf8] {
    margin-bottom: .875rem;
}

    .upload-slot:last-child[b-aqpye7ezf8] {
        margin-bottom: 0;
    }

.slot-label[b-aqpye7ezf8] {
    font-size: .72rem;
    font-weight: 700;
    color: #555;
    margin-bottom: .4rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.slot-tag[b-aqpye7ezf8] {
    font-size: .6rem;
    padding: .1rem .45rem;
    border-radius: 20px;
    font-weight: 700;
}

.tag-optional[b-aqpye7ezf8] {
    background: #e0e0e0;
    color: #888;
}

.tag-required[b-aqpye7ezf8] {
    background: #fff3e0;
    color: #e65100;
}

.tag-disabled[b-aqpye7ezf8] {
    background: #eee;
    color: #bbb;
}

.upload-dropzone[b-aqpye7ezf8] {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: #fff;
    position: relative;
}

    .upload-dropzone.disabled[b-aqpye7ezf8] {
        opacity: .45;
        pointer-events: none;
        cursor: not-allowed;
    }

    .upload-dropzone:not(.disabled):hover[b-aqpye7ezf8] {
        border-color: #ff8c00;
        background: rgba(255,140,0,.06);
    }

.upload-input[b-aqpye7ezf8] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.upload-icon[b-aqpye7ezf8] {
    font-size: 1.6rem;
    margin-bottom: .35rem;
}

.upload-title[b-aqpye7ezf8] {
    font-size: .82rem;
    font-weight: 600;
    color: #333;
    margin-bottom: .2rem;
}

.upload-hint[b-aqpye7ezf8] {
    font-size: .68rem;
    color: #999;
}

    .upload-hint b[b-aqpye7ezf8] {
        color: #ff8c00;
    }

.upload-progress[b-aqpye7ezf8] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    background: #fff8f0;
    border: 2px solid #ff8c00;
    border-radius: 8px;
    padding: .75rem 1rem;
}

.upload-progress-header[b-aqpye7ezf8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upload-progress-label[b-aqpye7ezf8] {
    font-size: .72rem;
    font-weight: 600;
    color: #e67e00;
}

.upload-progress-pct[b-aqpye7ezf8] {
    font-size: .72rem;
    font-weight: 700;
    color: #ff8c00;
}

.progress-bar-bg[b-aqpye7ezf8] {
    background: #e0e0e0;
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill[b-aqpye7ezf8] {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #ff8c00, #e67e00);
}

.progress-indeterminate[b-aqpye7ezf8] {
    position: absolute;
    animation: indeterminate 1.4s ease infinite;
}

.upload-file-done[b-aqpye7ezf8] {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #e8f5e9;
    border: 2px solid #4caf50;
    border-radius: 8px;
    padding: .875rem 1rem;
}

.upload-file-icon[b-aqpye7ezf8] {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.upload-file-info[b-aqpye7ezf8] {
    flex: 1;
    min-width: 0;
}

.upload-file-name[b-aqpye7ezf8] {
    font-size: .85rem;
    font-weight: 600;
    color: #2e7d32;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-file-size[b-aqpye7ezf8] {
    font-size: .65rem;
    color: #558b2f;
    margin-top: .1rem;
}

.file-remove-btn[b-aqpye7ezf8] {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 1.1rem;
    padding: .25rem;
    border-radius: 4px;
    transition: color .2s;
    flex-shrink: 0;
}

    .file-remove-btn:hover[b-aqpye7ezf8] {
        color: #c62828;
    }

/* ── Success card ── */
.success-card[b-aqpye7ezf8] {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border: 1px solid #c8e6c9;
    border-left: 4px solid #4caf50;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.success-icon[b-aqpye7ezf8] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    animation: scaleIn .6s ease-out;
}

.success-title[b-aqpye7ezf8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: .75rem;
}

.success-message[b-aqpye7ezf8] {
    font-size: .9rem;
    color: #558b2f;
    line-height: 1.5;
    margin: 0;
}

.success-submessage[b-aqpye7ezf8] {
    font-size: .8rem;
    color: #689f38;
    margin-top: .5rem;
}

/* ── Summary ── */
.summary-section[b-aqpye7ezf8] {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.summary-title[b-aqpye7ezf8] {
    font-size: .7rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 1rem;
    text-align: center;
}

.summary-grid[b-aqpye7ezf8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.summary-item[b-aqpye7ezf8] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

    .summary-item.full-width[b-aqpye7ezf8] {
        grid-column: span 2;
    }

.summary-label[b-aqpye7ezf8] {
    font-size: .6rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
}

.summary-value[b-aqpye7ezf8] {
    font-size: .88rem;
    color: #333;
    font-weight: 600;
}

    .summary-value.highlight[b-aqpye7ezf8] {
        font-size: 1.25rem;
        color: #4caf50;
    }

.summary-nf[b-aqpye7ezf8] {
    font-size: .8rem;
    color: #558b2f;
}

/* ── Next steps ── */
.next-steps[b-aqpye7ezf8] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border-left: 4px solid #ff8c00;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.next-steps-header[b-aqpye7ezf8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .75rem;
}

.next-steps-title[b-aqpye7ezf8] {
    font-size: .85rem;
    font-weight: 700;
    color: #e67e00;
}

.steps-list[b-aqpye7ezf8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .steps-list li[b-aqpye7ezf8] {
        padding: .5rem 0 .5rem 1.75rem;
        position: relative;
        color: #666;
        font-size: .8rem;
        line-height: 1.4;
    }

        .steps-list li[b-aqpye7ezf8]::before {
            content: '✓';
            position: absolute;
            left: 0;
            top: .5rem;
            width: 18px;
            height: 18px;
            background: #4caf50;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .55rem;
            font-weight: 700;
        }

/* ── Buttons ── */
.btn-group-footer[b-aqpye7ezf8] {
    display: flex;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.btn[b-aqpye7ezf8] {
    flex: 1;
    padding: .875rem 1rem;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: inherit;
}

    .btn:disabled[b-aqpye7ezf8] {
        opacity: .55;
        cursor: not-allowed;
    }

.btn-primary[b-aqpye7ezf8] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255,140,0,.3);
}

    .btn-primary:hover:not(:disabled)[b-aqpye7ezf8] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255,140,0,.4);
    }

.btn-secondary[b-aqpye7ezf8] {
    background: #fff;
    color: #666;
    border: 2px solid #e0e0e0;
}

    .btn-secondary:hover:not(:disabled)[b-aqpye7ezf8] {
        border-color: #ff8c00;
        color: #ff8c00;
    }

/* ── Spinner ── */
.spinner[b-aqpye7ezf8] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

/* ── Responsividade ── */
@media (max-width: 768px) {
    .jatai-send[b-aqpye7ezf8] {
        padding: 1.5rem;
    }

    .step[b-aqpye7ezf8] {
        max-width: 120px;
    }

    .step-circle[b-aqpye7ezf8] {
        width: 32px;
        height: 32px;
        font-size: .8rem;
    }

    .step-line[b-aqpye7ezf8] {
        top: 16px;
        left: calc(50% + 20px);
        width: calc(100% - 40px);
    }
}

@media (max-width: 480px) {
    .jatai-send[b-aqpye7ezf8] {
        padding: 1rem;
    }

    .page-title[b-aqpye7ezf8] {
        font-size: 1.25rem;
    }

    .form-row[b-aqpye7ezf8] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-aqpye7ezf8] {
        grid-template-columns: 1fr;
    }

    .detail-item.full-width[b-aqpye7ezf8] {
        grid-column: span 1;
    }

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

    .summary-item.full-width[b-aqpye7ezf8] {
        grid-column: span 1;
    }

    .btn-group-footer[b-aqpye7ezf8] {
        flex-direction: column;
    }

    .success-icon[b-aqpye7ezf8] {
        font-size: 3rem;
    }

    .success-title[b-aqpye7ezf8] {
        font-size: 1.1rem;
    }
}
/* /Pages/Charges/SendKollecta.razor.rz.scp.css */
/* ============================================
   BOMBUS - Enviar Cobrança
   CSS Isolado (scoped)
   ============================================ */

/* ========== CONTAINER ========== */
.collections-send[b-45e3vlzaqm] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    box-sizing: border-box;
    min-height: calc(100vh - 200px);
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* ========== HEADER ========== */
.page-header[b-45e3vlzaqm] {
    margin-bottom: 1rem;
}

.page-title[b-45e3vlzaqm] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.badge[b-45e3vlzaqm] {
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.badge-orange[b-45e3vlzaqm] {
    background: #ff8c00;
    color: white;
}

.badge-green[b-45e3vlzaqm] {
    background: #4caf50;
    color: white;
}

.page-subtitle[b-45e3vlzaqm] {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* ========== STEPPER ========== */
.stepper[b-45e3vlzaqm] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 1rem 0 1.5rem;
    padding: 0 0.5rem;
}

.step[b-45e3vlzaqm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    max-width: 150px;
}

.step-circle[b-45e3vlzaqm] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    z-index: 1;
}

.step.active .step-circle[b-45e3vlzaqm] {
    background: #ff8c00;
    color: white;
    box-shadow: 0 3px 12px rgba(255,140,0,.4);
}

.step.completed .step-circle[b-45e3vlzaqm] {
    background: #4caf50;
    color: white;
}

.step-label[b-45e3vlzaqm] {
    font-size: 0.65rem;
    color: #999;
    margin-top: 0.35rem;
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step.active .step-label[b-45e3vlzaqm],
.step.completed .step-label[b-45e3vlzaqm] {
    color: #333;
}

.step-line[b-45e3vlzaqm] {
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 3px;
    background: #e0e0e0;
    z-index: 0;
    transition: background 0.3s ease;
}

.step:last-child .step-line[b-45e3vlzaqm] {
    display: none;
}

.step.completed .step-line[b-45e3vlzaqm] {
    background: #4caf50;
}

/* ========== DIVIDER ========== */
.divider[b-45e3vlzaqm] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
    margin: 0.75rem 0;
}

/* ========== CONTENT AREA ========== */
.content-area[b-45e3vlzaqm] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.step-content[b-45e3vlzaqm] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ========== ANIMATIONS ========== */
.fade-in[b-45e3vlzaqm] {
    animation: fadeIn-b-45e3vlzaqm 0.3s ease-out;
}

@keyframes fadeIn-b-45e3vlzaqm {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn-b-45e3vlzaqm {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

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

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

@keyframes indeterminate-b-45e3vlzaqm {
    0% {
        left: -40%;
        width: 40%;
    }

    60% {
        left: 100%;
        width: 40%;
    }

    100% {
        left: 100%;
        width: 40%;
    }
}

/* ========== INFO BANNER ========== */
.info-banner[b-45e3vlzaqm] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border-left: 4px solid #ff8c00;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

    .info-banner.info[b-45e3vlzaqm] {
        background: linear-gradient(135deg, #e3f2fd, #bbdefb);
        border-left-color: #2196f3;
    }

        .info-banner.info .info-banner-title[b-45e3vlzaqm] {
            color: #1976d2;
        }

    .info-banner.error-banner[b-45e3vlzaqm] {
        background: linear-gradient(135deg, #ffebee, #ffcdd2);
        border-left-color: #c62828;
    }

        .info-banner.error-banner .info-banner-title[b-45e3vlzaqm] {
            color: #c62828;
        }

        .info-banner.error-banner .info-banner-description[b-45e3vlzaqm] {
            color: #b71c1c;
        }

.info-banner-icon[b-45e3vlzaqm] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-banner-text[b-45e3vlzaqm] {
    flex: 1;
}

.info-banner-title[b-45e3vlzaqm] {
    font-weight: 700;
    color: #e67e00;
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.info-banner-description[b-45e3vlzaqm] {
    color: #666;
    font-size: 0.75rem;
    line-height: 1.4;
}

.close-btn[b-45e3vlzaqm] {
    background: transparent;
    border: none;
    color: #999;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .close-btn:hover[b-45e3vlzaqm] {
        background: rgba(255,140,0,.1);
        color: #ff8c00;
    }

/* ========== FORM SECTION ========== */
.form-section[b-45e3vlzaqm] {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.section-title[b-45e3vlzaqm] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.optional-label[b-45e3vlzaqm] {
    font-size: 0.7rem;
    font-weight: 400;
    color: #aaa;
    font-style: italic;
}

.form-group[b-45e3vlzaqm] {
    margin-bottom: 1rem;
    width: 100%;
}

.form-label[b-45e3vlzaqm] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.35rem;
    letter-spacing: 0.3px;
}

.required[b-45e3vlzaqm] {
    color: #ff8c00;
}

.form-input[b-45e3vlzaqm],
[b-45e3vlzaqm] .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.2s;
    background: white;
    color: #333;
    box-sizing: border-box;
}

    .form-input:focus[b-45e3vlzaqm],
    [b-45e3vlzaqm] .form-input:focus {
        outline: none;
        border-color: #ff8c00;
        box-shadow: 0 0 0 3px rgba(255,140,0,.1);
    }

    .form-input[b-45e3vlzaqm]::placeholder {
        color: #bbb;
    }

    .form-input.error[b-45e3vlzaqm] {
        border-color: #c62828;
    }

.form-helper[b-45e3vlzaqm] {
    font-size: 0.65rem;
    color: #999;
    margin-top: 0.25rem;
    display: block;
}

.validation-error[b-45e3vlzaqm],
[b-45e3vlzaqm] .validation-message {
    color: #c62828;
    font-size: 0.65rem;
    margin-top: 0.25rem;
    display: block;
}

.form-row[b-45e3vlzaqm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.calculated-field[b-45e3vlzaqm] {
    background: #e8f5e9 !important;
    border-color: #4caf50 !important;
    color: #2e7d32 !important;
    font-weight: 600;
}

/* ========== SEARCH RESULTS ========== */
.search-results[b-45e3vlzaqm] {
    margin-bottom: 1rem;
}

.empty-state[b-45e3vlzaqm] {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #999;
}

.empty-state-icon[b-45e3vlzaqm] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.empty-state h3[b-45e3vlzaqm] {
    font-size: 1rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.empty-state p[b-45e3vlzaqm] {
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

.loading-state[b-45e3vlzaqm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    gap: 0.75rem;
}

.loading-spinner[b-45e3vlzaqm] {
    width: 36px;
    height: 36px;
    border: 3px solid #f0f0f0;
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-45e3vlzaqm 1s linear infinite;
}

.loading-text[b-45e3vlzaqm] {
    color: #666;
    font-size: 0.8rem;
}

/* ========== RESULT CARD ========== */
.result-card[b-45e3vlzaqm] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}

.result-header[b-45e3vlzaqm] {
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

    .result-header.success[b-45e3vlzaqm] {
        background: linear-gradient(135deg,#e8f5e9,#f1f8e9);
        border-color: #c8e6c9;
    }

    .result-header.error[b-45e3vlzaqm] {
        background: linear-gradient(135deg,#ffebee,#fce4ec);
        border-color: #ffcdd2;
    }

.result-title[b-45e3vlzaqm] {
    font-size: 1rem;
    font-weight: 600;
    color: #2e7d32;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.result-header.error .result-title[b-45e3vlzaqm] {
    color: #c62828;
}

.result-subtitle[b-45e3vlzaqm] {
    font-size: 0.75rem;
    color: #558b2f;
    margin-top: 0.25rem;
}

.result-header.error .result-subtitle[b-45e3vlzaqm] {
    color: #666;
}

.result-body[b-45e3vlzaqm] {
    padding: 1rem;
}

.detail-grid[b-45e3vlzaqm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.detail-item[b-45e3vlzaqm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

    .detail-item.full-width[b-45e3vlzaqm] {
        grid-column: span 2;
    }

.detail-label[b-45e3vlzaqm] {
    font-size: 0.6rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.detail-value[b-45e3vlzaqm] {
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
}

.status-badge[b-45e3vlzaqm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

    .status-badge.active[b-45e3vlzaqm] {
        background: #e8f5e9;
        color: #2e7d32;
    }

/* ========== DEBTOR CARD ========== */
.debtor-card[b-45e3vlzaqm] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border: 1px solid #ffe0b2;
    border-left: 4px solid #ff8c00;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.debtor-card-title[b-45e3vlzaqm] {
    font-size: 0.65rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.debtor-info[b-45e3vlzaqm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.debtor-avatar[b-45e3vlzaqm] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 3px 10px rgba(255,140,0,.3);
    flex-shrink: 0;
}

.debtor-name[b-45e3vlzaqm] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.debtor-id[b-45e3vlzaqm] {
    font-size: 0.75rem;
    color: #666;
    font-family: 'SF Mono','Courier New',monospace;
}

/* ========== UPLOAD NOTA FISCAL ========== */
.upload-section[b-45e3vlzaqm] {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* Dropzone */
.upload-dropzone[b-45e3vlzaqm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: white;
    position: relative;
    gap: 0.25rem;
}

    .upload-dropzone:hover[b-45e3vlzaqm] {
        border-color: #ff8c00;
        background: rgba(255,140,0,.04);
    }

/* Oculta o InputFile nativo mas mantém clicável */
.upload-input[b-45e3vlzaqm] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.upload-icon[b-45e3vlzaqm] {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.upload-title[b-45e3vlzaqm] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.upload-hint[b-45e3vlzaqm] {
    font-size: 0.75rem;
    color: #999;
}

    .upload-hint b[b-45e3vlzaqm] {
        color: #ff8c00;
    }

/* Estado: enviando (barra indeterminada) */
.upload-progress[b-45e3vlzaqm] {
    background: #fff8f0;
    border: 2px solid #ff8c00;
    border-radius: 8px;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.upload-progress-header[b-45e3vlzaqm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upload-progress-label[b-45e3vlzaqm] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #e67e00;
}

.upload-progress-pct[b-45e3vlzaqm] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff8c00;
}

.progress-bar-bg[b-45e3vlzaqm] {
    background: #e0e0e0;
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill[b-45e3vlzaqm] {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #ff8c00, #e67e00);
}

.progress-indeterminate[b-45e3vlzaqm] {
    position: absolute;
    animation: indeterminate-b-45e3vlzaqm 1.4s ease infinite;
}

/* Estado: arquivo enviado */
.upload-file-done[b-45e3vlzaqm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #e8f5e9;
    border: 2px solid #4caf50;
    border-radius: 8px;
    padding: 0.875rem 1rem;
}

.upload-file-icon[b-45e3vlzaqm] {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.upload-file-info[b-45e3vlzaqm] {
    flex: 1;
    min-width: 0;
}

.upload-file-name[b-45e3vlzaqm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2e7d32;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-file-size[b-45e3vlzaqm] {
    font-size: 0.65rem;
    color: #558b2f;
    margin-top: 0.1rem;
}

.file-remove-btn[b-45e3vlzaqm] {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 1.1rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s;
    flex-shrink: 0;
}

    .file-remove-btn:hover[b-45e3vlzaqm] {
        color: #c62828;
    }

/* ========== PREVIEW PARCELAS ========== */
.preview-section[b-45e3vlzaqm] {
    background: #f8f9fa;
    border: 1px dashed #ddd;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.preview-title[b-45e3vlzaqm] {
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.preview-grid[b-45e3vlzaqm] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0.5rem;
}

.preview-item[b-45e3vlzaqm] {
    background: white;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

    .preview-item.preview-more[b-45e3vlzaqm] {
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .preview-item.preview-more .preview-item-value[b-45e3vlzaqm] {
            color: #999;
        }

.preview-item-label[b-45e3vlzaqm] {
    font-size: 0.6rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
}

.preview-item-value[b-45e3vlzaqm] {
    font-size: 0.85rem;
    color: #333;
    font-weight: 600;
}

.preview-item-date[b-45e3vlzaqm] {
    font-size: 0.65rem;
    color: #999;
    margin-top: 0.2rem;
}

/* ========== SUCCESS CARD ========== */
.success-card[b-45e3vlzaqm] {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border: 1px solid #c8e6c9;
    border-left: 4px solid #4caf50;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.success-icon[b-45e3vlzaqm] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    animation: scaleIn-b-45e3vlzaqm 0.6s ease-out;
}

.success-title[b-45e3vlzaqm] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 0.75rem;
}

.success-message[b-45e3vlzaqm] {
    font-size: 0.9rem;
    color: #558b2f;
    line-height: 1.5;
    margin: 0;
}

.success-submessage[b-45e3vlzaqm] {
    font-size: 0.8rem;
    color: #689f38;
    margin-top: 0.5rem;
}

/* ========== SUMMARY SECTION ========== */
.summary-section[b-45e3vlzaqm] {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.summary-title[b-45e3vlzaqm] {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    text-align: center;
}

.summary-grid[b-45e3vlzaqm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.summary-item[b-45e3vlzaqm] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.summary-label[b-45e3vlzaqm] {
    font-size: 0.6rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
}

.summary-value[b-45e3vlzaqm] {
    font-size: 0.85rem;
    color: #333;
    font-weight: 600;
}

    .summary-value.highlight[b-45e3vlzaqm] {
        font-size: 1.25rem;
        color: #4caf50;
    }

.summary-nf[b-45e3vlzaqm] {
    font-size: 0.8rem;
    color: #558b2f;
}

/* ========== NEXT STEPS ========== */
.next-steps[b-45e3vlzaqm] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border-left: 4px solid #ff8c00;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.next-steps-header[b-45e3vlzaqm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.next-steps-title[b-45e3vlzaqm] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e67e00;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.steps-list[b-45e3vlzaqm] {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .steps-list li[b-45e3vlzaqm] {
        padding: 0.5rem 0 0.5rem 1.75rem;
        position: relative;
        color: #666;
        font-size: 0.8rem;
        line-height: 1.4;
    }

        .steps-list li[b-45e3vlzaqm]::before {
            content: '✓';
            position: absolute;
            left: 0;
            top: 0.5rem;
            width: 18px;
            height: 18px;
            background: #4caf50;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.55rem;
            font-weight: bold;
        }

/* ========== BUTTON GROUP FOOTER ========== */
.btn-group-footer[b-45e3vlzaqm] {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.btn[b-45e3vlzaqm] {
    flex: 1;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
}

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

.btn-primary[b-45e3vlzaqm] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: white;
    box-shadow: 0 4px 15px rgba(255,140,0,.3);
}

    .btn-primary:hover:not(:disabled)[b-45e3vlzaqm] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255,140,0,.4);
    }

.btn-secondary[b-45e3vlzaqm] {
    background: white;
    color: #666;
    border: 2px solid #e0e0e0;
}

    .btn-secondary:hover:not(:disabled)[b-45e3vlzaqm] {
        border-color: #ff8c00;
        color: #ff8c00;
    }

/* ========== SPINNER ========== */
.spinner[b-45e3vlzaqm] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-45e3vlzaqm 0.8s linear infinite;
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
    .collections-send[b-45e3vlzaqm] {
        padding: 1.5rem;
    }

    .stepper[b-45e3vlzaqm] {
        padding: 0;
    }

    .step[b-45e3vlzaqm] {
        max-width: 120px;
    }

    .step-circle[b-45e3vlzaqm] {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .step-line[b-45e3vlzaqm] {
        top: 16px;
        left: calc(50% + 20px);
        width: calc(100% - 40px);
    }
}

@media (max-width: 480px) {
    .collections-send[b-45e3vlzaqm] {
        padding: 1rem;
    }

    .page-title[b-45e3vlzaqm] {
        font-size: 1.25rem;
    }

    .form-row[b-45e3vlzaqm] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-45e3vlzaqm] {
        grid-template-columns: 1fr;
    }

    .detail-item.full-width[b-45e3vlzaqm] {
        grid-column: span 1;
    }

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

    .preview-grid[b-45e3vlzaqm] {
        grid-template-columns: 1fr;
    }

    .btn-group-footer[b-45e3vlzaqm] {
        flex-direction: column;
    }

    .success-icon[b-45e3vlzaqm] {
        font-size: 3rem;
    }

    .success-title[b-45e3vlzaqm] {
        font-size: 1.1rem;
    }
}
/* /Pages/Charges/Sent.razor.rz.scp.css */
*[b-plercawsum] {
    box-sizing: border-box;
}

.page-content[b-plercawsum] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    font-family: Arial, sans-serif;
    min-height: calc(100vh - 200px);
}

/* Cabeçalho */
.page-header[b-plercawsum] {
    margin-bottom: 1.5rem;
}

.page-title[b-plercawsum] {
    font-size: 2rem;
    font-weight: normal;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.send-badge[b-plercawsum] {
    background: #ff8c00;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.page-subtitle[b-plercawsum] {
    font-size: 0.95rem;
    color: #666;
}

hr[b-plercawsum] {
    height: 1px;
    background-color: #666;
    border: none;
    margin: 1.0rem 0;
}

/* Loading */
.loading-state[b-plercawsum] {
    text-align: center;
    padding: 4rem 2rem;
    color: #666;
}

.spinner[b-plercawsum] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #ff8c00;
    border-radius: 50%;
    animation: spin-b-plercawsum 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-plercawsum {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mensagens */
.message[b-plercawsum] {
    padding: 1rem 1.25rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.message-error[b-plercawsum] {
    background: #ffebee;
    color: #c62828;
    border-left: 4px solid #c62828;
}

/* Cards de resumo */
.summary-cards[b-plercawsum] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card[b-plercawsum] {
    background: #f8f8f8;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

    .summary-card.pending[b-plercawsum] {
        border-left: 4px solid #ff8c00;
    }

    .summary-card.approved[b-plercawsum] {
        border-left: 4px solid #4caf50;
    }

    .summary-card.rejected[b-plercawsum] {
        border-left: 4px solid #c62828;
    }

    .summary-card:hover[b-plercawsum] {
        border-color: #999;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

.summary-label[b-plercawsum] {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.summary-value[b-plercawsum] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
}

.summary-subvalue[b-plercawsum] {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Filtros */
.filters-section[b-plercawsum] {
    background: #f8f8f8;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.filters-header[b-plercawsum] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    cursor: pointer;
}

.filters-title[b-plercawsum] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-icon[b-plercawsum] {
    font-size: 1.125rem;
}

.toggle-icon[b-plercawsum] {
    font-size: 1.25rem;
    color: #999;
    transition: transform 0.3s ease;
}

    .toggle-icon.expanded[b-plercawsum] {
        transform: rotate(180deg);
    }

.filters-content[b-plercawsum] {
    animation: fadeIn-b-plercawsum 0.3s ease-out;
}

@keyframes fadeIn-b-plercawsum {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filters-grid[b-plercawsum] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.filter-group[b-plercawsum] {
    display: flex;
    flex-direction: column;
}

.filter-label[b-plercawsum] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.filter-input[b-plercawsum] {
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-family: Arial, sans-serif;
}

    .filter-input:focus[b-plercawsum] {
        outline: none;
        border-color: #ff8c00;
    }

.filter-actions[b-plercawsum] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.btn[b-plercawsum] {
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    border: none;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: Arial, sans-serif;
}

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

.btn-primary[b-plercawsum] {
    background: #ff8c00;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-plercawsum] {
        background: #e67e00;
        transform: translateY(-1px);
    }

.btn-secondary[b-plercawsum] {
    background: white;
    color: #666;
    border: 2px solid #e0e0e0;
}

    .btn-secondary:hover:not(:disabled)[b-plercawsum] {
        background: #f8f8f8;
        border-color: #999;
    }

/* Lista de cobranças */
.collections-list[b-plercawsum] {
    margin-bottom: 2rem;
}

.list-header[b-plercawsum] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.list-title[b-plercawsum] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
}

.list-count[b-plercawsum] {
    font-size: 0.875rem;
    color: #666;
}

.collection-item[b-plercawsum] {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

    .collection-item:hover[b-plercawsum] {
        border-color: #ff8c00;
        box-shadow: 0 2px 8px rgba(255, 140, 0, 0.1);
    }

.item-header[b-plercawsum] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.item-info[b-plercawsum] {
    flex: 1;
}

.item-debtor-name[b-plercawsum] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.item-debtor-id[b-plercawsum] {
    font-size: 0.875rem;
    color: #666;
    font-family: 'Courier New', monospace;
    margin-bottom: 0.5rem;
}

.item-description[b-plercawsum] {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0.75rem;
}

.item-status[b-plercawsum] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pending[b-plercawsum] {
    background: #fff8f0;
    color: #e67e00;
    border: 2px solid #ff8c00;
}

.status-approved[b-plercawsum] {
    background: #e8f5e9;
    color: #2e7d32;
    border: 2px solid #4caf50;
}

.status-rejected[b-plercawsum] {
    background: #ffebee;
    color: #c62828;
    border: 2px solid #ef5350;
}

.item-details[b-plercawsum] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.detail-item[b-plercawsum] {
    display: flex;
    flex-direction: column;
}

.detail-label[b-plercawsum] {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.detail-value[b-plercawsum] {
    font-size: 0.95rem;
    color: #333;
    font-weight: 600;
}

    .detail-value.highlight[b-plercawsum] {
        font-size: 1.125rem;
        color: #ff8c00;
    }

/* Paginação */
.pagination[b-plercawsum] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-bottom: 2.0rem;
}

.page-btn[b-plercawsum] {
    padding: 0.5rem 1rem;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    transition: all 0.3s ease;
    font-family: Arial, sans-serif;
}

    .page-btn:hover:not(.active):not(:disabled)[b-plercawsum] {
        border-color: #ff8c00;
        color: #ff8c00;
    }

    .page-btn.active[b-plercawsum] {
        background: #ff8c00;
        color: white;
        border-color: #ff8c00;
    }

    .page-btn:disabled[b-plercawsum] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Empty state */
.empty-state[b-plercawsum] {
    text-align: center;
    padding: 4rem 2rem;
    color: #999;
}

.empty-icon[b-plercawsum] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-title[b-plercawsum] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #666;
}

.empty-message[b-plercawsum] {
    font-size: 0.95rem;
}

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

    .page-title[b-plercawsum] {
        font-size: 1.5rem;
    }

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

    .filters-grid[b-plercawsum] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-plercawsum] {
        flex-direction: column;
    }

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

    .item-header[b-plercawsum] {
        flex-direction: column;
    }

    .item-status[b-plercawsum] {
        align-self: flex-start;
    }

    .item-details[b-plercawsum] {
        grid-template-columns: 1fr 1fr;
    }

    .pagination[b-plercawsum] {
        flex-wrap: wrap;
    }
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* ============================================
   BOMBUS - Dashboard Full Corporate
   CSS Isolado (scoped)
   Paleta: Cinzas + Laranja (#ff8c00 e #e94e1b)
   ============================================ */

/* Container Principal */
.dashboard-full[b-l98kpb7gis] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    box-sizing: border-box;
    min-height: 100vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* ========== 1. HEADER - SAUDAÇÃO ========== */
.dashboard-header[b-l98kpb7gis] {
    margin-bottom: 2rem;
}

.greeting[b-l98kpb7gis] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.25rem 0;
}

.subtitle[b-l98kpb7gis] {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
}

/* ========== 2. CARDS ROW ========== */
.cards-row[b-l98kpb7gis] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.balance-card[b-l98kpb7gis] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-radius: 12px;
    padding: 0.875rem 1.25rem;
    border: 1.5px solid #e0e0e0;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;
}

    /* Estado: saldo disponível */
    .balance-card.has-balance[b-l98kpb7gis] {
        border-color: #c8e6c9;
        background: #f1f8f1;
    }

    /* Estado: saldo baixo (≤ 5) */
    .balance-card.low-balance[b-l98kpb7gis] {
        border-color: #ffe082;
        background: #fffde7;
        border-left: 4px solid #ffc107;
    }

    /* Estado: sem saldo */
    .balance-card.no-balance[b-l98kpb7gis] {
        border-color: #ffe0b2;
        background: #fff8f0;
        border-left: 4px solid #ff8c00;
    }

.balance-left[b-l98kpb7gis] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.balance-icon[b-l98kpb7gis] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.has-balance .balance-icon[b-l98kpb7gis] {
    background: #e8f5e9;
}

.low-balance .balance-icon[b-l98kpb7gis] {
    background: #fff8e1;
}

.no-balance .balance-icon[b-l98kpb7gis] {
    background: #fff3e0;
}

.balance-label[b-l98kpb7gis] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.has-balance .balance-label[b-l98kpb7gis] {
    color: #388e3c;
}

.low-balance .balance-label[b-l98kpb7gis] {
    color: #f57f17;
}

.no-balance .balance-label[b-l98kpb7gis] {
    color: #e65100;
}

.balance-meta[b-l98kpb7gis] {
    font-size: 0.8rem;
    color: #555;
}

/* Número de envios em destaque */
.balance-count[b-l98kpb7gis] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-family: 'Courier New', monospace;
    letter-spacing: -1px;
    text-align: right;
}

    .balance-count small[b-l98kpb7gis] {
        display: inline;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-left: 0.3rem;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        opacity: 0.7;
    }

.has-balance .balance-count[b-l98kpb7gis] {
    color: #388e3c;
}

.low-balance .balance-count[b-l98kpb7gis] {
    color: #f57f17;
}

.no-balance .balance-count[b-l98kpb7gis] {
    color: #ff8c00;
}

/* Pills de status do saldo */
.balance-pill[b-l98kpb7gis] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pill-ok[b-l98kpb7gis] {
    background: #e8f5e9;
    color: #388e3c;
}

.pill-low[b-l98kpb7gis] {
    background: #fff3e0;
    color: #e65100;
}

.pill-empty[b-l98kpb7gis] {
    background: #fbe9e7;
    color: #e94e1b;
}

/* Botão Recarregar */
.btn-reload[b-l98kpb7gis] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    border: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}

.has-balance .btn-reload[b-l98kpb7gis] {
    background: #f0f0f0;
    color: #555;
    border: 1.5px solid #e0e0e0;
}

    .has-balance .btn-reload:hover[b-l98kpb7gis] {
        border-color: #ff8c00;
        color: #ff8c00;
        background: rgba(255, 140, 0, 0.08);
    }

.low-balance .btn-reload[b-l98kpb7gis] {
    background: linear-gradient(135deg, #ffc107, #f9a825);
    color: #fff;
    box-shadow: 0 3px 12px rgba(255, 193, 7, 0.4);
}

    .low-balance .btn-reload:hover[b-l98kpb7gis] {
        transform: translateY(-1px);
        box-shadow: 0 5px 18px rgba(255, 193, 7, 0.5);
    }

.no-balance .btn-reload[b-l98kpb7gis] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: #fff;
    box-shadow: 0 3px 12px rgba(255, 140, 0, 0.3);
}

    .no-balance .btn-reload:hover[b-l98kpb7gis] {
        transform: translateY(-1px);
        box-shadow: 0 5px 18px rgba(255, 140, 0, 0.4);
    }

/* Alerta inline — só visível quando saldo = 0 */
.balance-alert[b-l98kpb7gis] {
    width: 100%;
    font-size: 0.75rem;
    color: #bf360c;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid #ffccbc;
    margin-top: 0.25rem;
}


/* Footer do card — linha divisória + botão */
.balance-footer[b-l98kpb7gis] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(76, 175, 80, 0.2);
    gap: 0.5rem;
}

.low-balance .balance-footer[b-l98kpb7gis],
.no-balance .balance-footer[b-l98kpb7gis] {
    border-top-color: rgba(255, 140, 0, 0.2);
}

.balance-footer-meta[b-l98kpb7gis] {
    font-size: 0.68rem;
    color: #888;
}

.moneybox-updated[b-l98kpb7gis] {
    font-size: 0.68rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ========== CTA BANNER — estado desabilitado ========== */
.cta-banner[b-l98kpb7gis] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(255, 140, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .cta-banner:hover[b-l98kpb7gis] {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(255, 140, 0, 0.4);
    }

    .cta-banner.cta-disabled[b-l98kpb7gis] {
        background: linear-gradient(135deg, #bdbdbd, #9e9e9e);
        cursor: not-allowed;
        box-shadow: none;
        opacity: 0.75;
    }

        .cta-banner.cta-disabled:hover[b-l98kpb7gis] {
            transform: none;
            box-shadow: none;
        }

.cta-content[b-l98kpb7gis] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cta-icon[b-l98kpb7gis] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.cta-text h2[b-l98kpb7gis] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.25rem 0;
}

.cta-text p[b-l98kpb7gis] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.cta-arrow[b-l98kpb7gis] {
    font-size: 2rem;
    color: white;
}

/* ========== 3. KPI CARDS - CARROSSEL ========== */
.kpi-carousel-container[b-l98kpb7gis] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.kpi-nav-btn[b-l98kpb7gis] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: white;
    color: #666;
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    line-height: 1;
    padding: 0;
}

.kpi-nav-prev[b-l98kpb7gis] {
    padding-right: 2px;
}

.kpi-nav-next[b-l98kpb7gis] {
    padding-left: 2px;
}

.kpi-nav-btn:hover:not(:disabled)[b-l98kpb7gis] {
    border-color: #ff8c00;
    color: #ff8c00;
    background: #fff8f0;
}

.kpi-nav-btn:disabled[b-l98kpb7gis] {
    opacity: 0.3;
    cursor: not-allowed;
}

.kpi-grid[b-l98kpb7gis] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding: 0.25rem 0;
}

    .kpi-grid[b-l98kpb7gis]::-webkit-scrollbar {
        display: none;
    }

.kpi-indicators[b-l98kpb7gis] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0 1.5rem;
    position: relative;
    z-index: 1;
}

.kpi-dot[b-l98kpb7gis] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d0d0;
    transition: all 0.3s;
    cursor: pointer;
}

    .kpi-dot.active[b-l98kpb7gis] {
        background: #ff8c00;
        width: 24px;
        border-radius: 4px;
    }

.kpi-card[b-l98kpb7gis] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s;
    min-width: calc((100% - 2rem) / 3);
    flex-shrink: 0;
    scroll-snap-align: start;
    box-sizing: border-box;
}

    .kpi-card.highlight[b-l98kpb7gis] {
        border: 2px solid #ff8c00;
        box-shadow: 0 2px 12px rgba(255, 140, 0, 0.1);
    }

    .kpi-card:hover[b-l98kpb7gis] {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

.kpi-icon-label[b-l98kpb7gis] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kpi-emoji[b-l98kpb7gis] {
    font-size: 1.5rem;
}

.kpi-label[b-l98kpb7gis] {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.kpi-value[b-l98kpb7gis] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
}

    .kpi-value.orange[b-l98kpb7gis] {
        font-size: 2rem;
        color: #ff8c00;
    }

.kpi-trend[b-l98kpb7gis] {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

/* ========== ALERTAS RÁPIDOS ========== */
.alerts-row[b-l98kpb7gis] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.alert-card[b-l98kpb7gis] {
    background: white;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    flex: 1;
    min-width: 200px;
}

    .alert-card.warning[b-l98kpb7gis] {
        border: 1px solid #ffe0b2;
        border-left: 4px solid #ff9800;
        color: #e65100;
    }

    .alert-card.danger[b-l98kpb7gis] {
        border: 1px solid #ffcdd2;
        border-left: 4px solid #e94e1b;
        color: #c62828;
    }

    .alert-card.success[b-l98kpb7gis] {
        border: 1px solid #c8e6c9;
        border-left: 4px solid #4caf50;
        color: #2e7d32;
    }

/* ========== GRÁFICOS ========== */
.charts-grid[b-l98kpb7gis] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.chart-card[b-l98kpb7gis] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
}

.chart-header[b-l98kpb7gis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 1rem;
}

    .chart-title[b-l98kpb7gis],
    .chart-header h3[b-l98kpb7gis] {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0 0 1.5rem 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid #f0f0f0;
    }

.chart-legend[b-l98kpb7gis] {
    display: flex;
    gap: 1.5rem;
}

.legend-item[b-l98kpb7gis] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

.legend-dot[b-l98kpb7gis] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

    .legend-dot.primary[b-l98kpb7gis] {
        background: #ff8c00;
    }

    .legend-dot.secondary[b-l98kpb7gis] {
        background: #d0d0d0;
    }

.bar-chart[b-l98kpb7gis] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 1rem;
    height: 280px;
    padding-bottom: 1.5rem;
}

.bar-group[b-l98kpb7gis] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    height: 100%;
}

.bars-container[b-l98kpb7gis] {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 100%;
}

.bar[b-l98kpb7gis] {
    width: 20px;
    border-radius: 6px 6px 0 0;
    transition: height 0.6s ease;
}

    .bar.received[b-l98kpb7gis] {
        background: linear-gradient(180deg, #ff8c00, #e67e00);
    }

    .bar.expected[b-l98kpb7gis] {
        background: linear-gradient(180deg, #d0d0d0, #b0b0b0);
        opacity: 0.5;
    }

.bar-label[b-l98kpb7gis] {
    font-size: 0.75rem;
    color: #999;
    font-weight: 600;
}

.status-stats[b-l98kpb7gis] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.status-item[b-l98kpb7gis] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-bar[b-l98kpb7gis] {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.status-fill[b-l98kpb7gis] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

    .status-fill.pago[b-l98kpb7gis] {
        background: linear-gradient(90deg, #4caf50, #388e3c);
    }

    .status-fill.aprovado[b-l98kpb7gis] {
        background: linear-gradient(90deg, #ff8c00, #e67e00);
    }

    .status-fill.pendente[b-l98kpb7gis] {
        background: linear-gradient(90deg, #999, #777);
    }

    .status-fill.vencido[b-l98kpb7gis] {
        background: linear-gradient(90deg, #e94e1b, #d43d0f);
    }

.status-info[b-l98kpb7gis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-label[b-l98kpb7gis] {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.status-value[b-l98kpb7gis] {
    font-size: 0.85rem;
    color: #1a1a1a;
    font-weight: 600;
}

/* ========== LOADING SPINNER ========== */
.loading-spinner[b-l98kpb7gis] {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-l98kpb7gis 1s linear infinite;
    margin: 0 auto 1rem;
}

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

/* ========== EMPTY STATE ========== */
.empty-state[b-l98kpb7gis] {
    background: white;
    border-radius: 12px;
    padding: 3rem 2rem;
    border: 2px dashed #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 360px;
}

.empty-icon[b-l98kpb7gis] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state h3[b-l98kpb7gis] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-l98kpb7gis] {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
    max-width: 320px;
}

.empty-legend[b-l98kpb7gis] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 280px;
    margin-top: 1.5rem;
}

.legend-item-empty[b-l98kpb7gis] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #999;
}

    .legend-item-empty .dot[b-l98kpb7gis] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

        .legend-item-empty .dot.pago[b-l98kpb7gis] {
            background: #ff8c00;
        }

        .legend-item-empty .dot.pendente[b-l98kpb7gis] {
            background: #999;
        }

        .legend-item-empty .dot.vencido[b-l98kpb7gis] {
            background: #e94e1b;
        }

/* ========== ATIVIDADE RECENTE ========== */
.activity-section[b-l98kpb7gis] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid #e0e0e0;
}

.section-header[b-l98kpb7gis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

    .section-header h3[b-l98kpb7gis] {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0;
    }

.view-all[b-l98kpb7gis] {
    color: #ff8c00;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s;
}

    .view-all:hover[b-l98kpb7gis] {
        color: #e67e00;
    }

.activity-list[b-l98kpb7gis] {
    display: flex;
    flex-direction: column;
}

.activity-item[b-l98kpb7gis] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f5f5f5;
}

    .activity-item:last-child[b-l98kpb7gis] {
        border-bottom: none;
    }

.activity-icon[b-l98kpb7gis] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

    .activity-icon.success[b-l98kpb7gis] {
        background: linear-gradient(135deg, #fff8f0, #fff4e6);
        color: #ff8c00;
    }

    .activity-icon.pending[b-l98kpb7gis] {
        background: linear-gradient(135deg, #f5f5f5, #ebebeb);
        color: #666;
    }

    .activity-icon.alert[b-l98kpb7gis] {
        background: linear-gradient(135deg, #fff0ed, #ffe8e3);
        color: #e94e1b;
    }

.activity-content[b-l98kpb7gis] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.activity-title[b-l98kpb7gis] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
}

.activity-description[b-l98kpb7gis] {
    font-size: 0.85rem;
    color: #666;
}

.activity-meta[b-l98kpb7gis] {
    font-size: 0.75rem;
    color: #999;
}

.activity-amount[b-l98kpb7gis] {
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

    .activity-amount.success[b-l98kpb7gis] {
        color: #ff8c00;
    }

    .activity-amount.pending[b-l98kpb7gis] {
        color: #666;
    }

    .activity-amount.alert[b-l98kpb7gis] {
        color: #e94e1b;
    }

/* ---- SentBy Area ----------- */

.sentby-badge[b-l98kpb7gis] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 700;
}

    .sentby-badge.kollecta[b-l98kpb7gis] {
        background: #ede9fe;
        color: #6d28d9;
    }

    .sentby-badge.email[b-l98kpb7gis] {
        background: #fff7ed;
        color: #c2410c;
    }

/* ========== AÇÕES RÁPIDAS ========== */
.quick-actions[b-l98kpb7gis] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
}

    .quick-actions h3[b-l98kpb7gis] {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0 0 1rem 0;
    }

.actions-grid[b-l98kpb7gis] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.action-btn[b-l98kpb7gis] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: white;
    color: #666;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.3s;
}

    .action-btn:hover[b-l98kpb7gis] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        border-color: #ff8c00;
        color: #ff8c00;
    }

.action-icon[b-l98kpb7gis] {
    font-size: 2rem;
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 1200px) {
    .charts-grid[b-l98kpb7gis] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-full[b-l98kpb7gis] {
        padding: 1.5rem;
    }

    .greeting[b-l98kpb7gis] {
        font-size: 1.5rem;
    }

    .kpi-nav-btn[b-l98kpb7gis] {
        display: none;
    }

    .kpi-carousel-container[b-l98kpb7gis] {
        margin-bottom: 0;
    }

    .kpi-grid[b-l98kpb7gis] {
        display: flex;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        gap: 0;
        padding: 0;
        margin-bottom: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
        z-index: 1;
        min-height: 140px;
    }

        .kpi-grid[b-l98kpb7gis]::-webkit-scrollbar {
            display: none;
        }

    .kpi-card[b-l98kpb7gis] {
        min-width: 100%;
        width: 100%;
        flex-shrink: 0;
        scroll-snap-align: center;
        margin: 0;
        box-sizing: border-box;
    }

    .kpi-indicators[b-l98kpb7gis] {
        display: flex;
        margin-bottom: 1.5rem;
    }

    .balance-card[b-l98kpb7gis] {
        gap: 0.75rem;
    }

    .balance-count[b-l98kpb7gis] {
        font-size: 1.6rem;
        min-width: 50px;
    }

    .cta-banner[b-l98kpb7gis] {
        flex-direction: column;
        gap: 1rem;
        margin-top: 0;
    }

    .cta-text h2[b-l98kpb7gis] {
        font-size: 1.25rem;
    }

    .alerts-row[b-l98kpb7gis] {
        flex-direction: column;
    }

    .charts-grid[b-l98kpb7gis] {
        grid-template-columns: 1fr;
    }

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

    .activity-item[b-l98kpb7gis] {
        flex-wrap: wrap;
    }

    .activity-amount[b-l98kpb7gis] {
        width: 100%;
        text-align: right;
    }
}

@media (max-width: 480px) {
    .dashboard-full[b-l98kpb7gis] {
        padding: 1rem;
    }

    .greeting[b-l98kpb7gis] {
        font-size: 1.35rem;
    }

    .kpi-value[b-l98kpb7gis] {
        font-size: 1.5rem;
    }

        .kpi-value.orange[b-l98kpb7gis] {
            font-size: 1.75rem;
        }

    .cta-text h2[b-l98kpb7gis] {
        font-size: 1.1rem;
    }

    .cta-text p[b-l98kpb7gis] {
        font-size: 0.85rem;
    }

    .actions-grid[b-l98kpb7gis] {
        grid-template-columns: 1fr;
    }

    .balance-card[b-l98kpb7gis] {
        flex-direction: column;
        align-items: flex-start;
    }

    .balance-count[b-l98kpb7gis] {
        align-self: center;
        font-size: 2rem;
    }

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

/* ========== MONEYBOX CARD ========== */
.moneybox-card[b-l98kpb7gis] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-radius: 12px;
    padding: 0.875rem 1.25rem;
    border: 1.5px solid #c8e6c9;
    background: linear-gradient(135deg, #f1f8f1, #e8f5e9);
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .moneybox-card:hover[b-l98kpb7gis] {
        border-color: #4caf50;
        box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15);
    }

.moneybox-icon[b-l98kpb7gis] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.moneybox-label[b-l98kpb7gis] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #388e3c;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pill-moneybox[b-l98kpb7gis] {
    background: #e8f5e9;
    color: #388e3c;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.moneybox-value-row[b-l98kpb7gis] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.25rem;
}

.moneybox-currency[b-l98kpb7gis] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #388e3c;
    opacity: 0.8;
}

.moneybox-value[b-l98kpb7gis] {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: -1px;
    color: #388e3c;
    line-height: 1;
}

.moneybox-loading[b-l98kpb7gis] {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

.moneybox-card .balance-footer[b-l98kpb7gis] {
    border-top-color: rgba(76, 175, 80, 0.2);
}

.btn-moneybox[b-l98kpb7gis] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 7px;
    border: 1.5px solid #4caf50;
    background: #e8f5e9;
    color: #388e3c;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

    .btn-moneybox:hover[b-l98kpb7gis] {
        background: #4caf50;
        color: #fff;
        box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
        transform: translateY(-1px);
    }

@media (max-width: 600px) {
    .cards-row[b-l98kpb7gis] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Debtors/DebtorsListing.razor.rz.scp.css */
*[b-nojddmwom9] {
    box-sizing: border-box;
}

.page-content[b-nojddmwom9] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    font-family: Arial, sans-serif;
    min-height: calc(100vh - 200px);
}

/* Cabeçalho */
.page-header[b-nojddmwom9] {
    margin-bottom: 1.5rem;
}

.page-title[b-nojddmwom9] {
    font-size: 2rem;
    font-weight: normal;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.send-badge[b-nojddmwom9] {
    background: #ff8c00;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.page-subtitle[b-nojddmwom9] {
    font-size: 0.95rem;
    color: #666;
}

hr[b-nojddmwom9] {
    height: 1px;
    background-color: #666;
    border: none;
    margin: 1.0rem 0;
}

/* Loading */
.loading-state[b-nojddmwom9] {
    text-align: center;
    padding: 4rem 2rem;
    color: #666;
}

.spinner[b-nojddmwom9] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #ff8c00;
    border-radius: 50%;
    animation: spin-b-nojddmwom9 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-nojddmwom9 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Filtros */
.filters-section[b-nojddmwom9] {
    background: #f8f8f8;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.filters-header[b-nojddmwom9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    cursor: pointer;
}

.filters-title[b-nojddmwom9] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-icon[b-nojddmwom9] {
    font-size: 1.125rem;
}

.toggle-icon[b-nojddmwom9] {
    font-size: 1.25rem;
    color: #999;
    transition: transform 0.3s ease;
}

    .toggle-icon.expanded[b-nojddmwom9] {
        transform: rotate(180deg);
    }

.filters-content[b-nojddmwom9] {
    animation: fadeIn-b-nojddmwom9 0.3s ease-out;
}

@keyframes fadeIn-b-nojddmwom9 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filters-grid[b-nojddmwom9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.filter-group[b-nojddmwom9] {
    display: flex;
    flex-direction: column;
}

.filter-label[b-nojddmwom9] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.filter-input[b-nojddmwom9] {
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-family: Arial, sans-serif;
}

    .filter-input:focus[b-nojddmwom9] {
        outline: none;
        border-color: #ff8c00;
    }

.filter-actions[b-nojddmwom9] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.btn[b-nojddmwom9] {
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    border: none;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: Arial, sans-serif;
}

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

.btn-primary[b-nojddmwom9] {
    background: #ff8c00;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-nojddmwom9] {
        background: #e67e00;
        transform: translateY(-1px);
    }

.btn-secondary[b-nojddmwom9] {
    background: white;
    color: #666;
    border: 2px solid #e0e0e0;
}

    .btn-secondary:hover:not(:disabled)[b-nojddmwom9] {
        background: #f8f8f8;
        border-color: #999;
    }

/* Lista de devedores */
.collections-list[b-nojddmwom9] {
    margin-bottom: 2rem;
}

.list-header[b-nojddmwom9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.list-title[b-nojddmwom9] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
}

.list-count[b-nojddmwom9] {
    font-size: 0.875rem;
    color: #666;
}

.collection-item[b-nojddmwom9] {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .collection-item:hover[b-nojddmwom9] {
        border-color: #ff8c00;
        box-shadow: 0 2px 8px rgba(255, 140, 0, 0.1);
    }

.item-header[b-nojddmwom9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.item-info[b-nojddmwom9] {
    flex: 1;
}

.item-debtor-name[b-nojddmwom9] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.item-debtor-id[b-nojddmwom9] {
    font-size: 0.875rem;
    color: #666;
    font-family: 'Courier New', monospace;
    margin-bottom: 0.5rem;
}

.item-status[b-nojddmwom9] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pending[b-nojddmwom9] {
    background: #fff8f0;
    color: #e67e00;
    border: 2px solid #ff8c00;
}

.item-details[b-nojddmwom9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.detail-item[b-nojddmwom9] {
    display: flex;
    flex-direction: column;
}

.detail-label[b-nojddmwom9] {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.detail-value[b-nojddmwom9] {
    font-size: 0.95rem;
    color: #333;
    font-weight: 600;
}

/* Paginação */
.pagination[b-nojddmwom9] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.page-btn[b-nojddmwom9] {
    padding: 0.5rem 1rem;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    transition: all 0.3s ease;
    font-family: Arial, sans-serif;
}

    .page-btn:hover:not(.active):not(:disabled)[b-nojddmwom9] {
        border-color: #ff8c00;
        color: #ff8c00;
    }

    .page-btn.active[b-nojddmwom9] {
        background: #ff8c00;
        color: white;
        border-color: #ff8c00;
    }

    .page-btn:disabled[b-nojddmwom9] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Empty state */
.empty-state[b-nojddmwom9] {
    text-align: center;
    padding: 4rem 2rem;
    color: #999;
}

.empty-icon[b-nojddmwom9] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-title[b-nojddmwom9] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #666;
}

.empty-message[b-nojddmwom9] {
    font-size: 0.95rem;
}

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

    .page-title[b-nojddmwom9] {
        font-size: 1.5rem;
    }

    .filters-grid[b-nojddmwom9] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-nojddmwom9] {
        flex-direction: column;
    }

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

    .item-header[b-nojddmwom9] {
        flex-direction: column;
    }

    .item-status[b-nojddmwom9] {
        align-self: flex-start;
    }

    .item-details[b-nojddmwom9] {
        grid-template-columns: 1fr 1fr;
    }

    .pagination[b-nojddmwom9] {
        flex-wrap: wrap;
    }
}
/* /Pages/Iwant.razor.rz.scp.css */
/* ============================================
   BOMBUS – Iwant
   Solicitação de acesso ao time comercial
   ============================================ */

/* Container principal — segue padrão do SubscriberRegister */
.iwant-page[b-ajbjntlz7c] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size:14px;
}

/* Animação de fade-in */
.fade-in[b-ajbjntlz7c] {
    animation: fadeIn-b-ajbjntlz7c 0.3s ease-out;
}

@keyframes fadeIn-b-ajbjntlz7c {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes shake-b-ajbjntlz7c {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-5px);
    }

    40%, 80% {
        transform: translateX(5px);
    }
}

/* ========== BLOCO DE CONTEXTO ========== */

.context-block[b-ajbjntlz7c] {
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    border-left: 4px solid #999;
    border-radius: 8px;
    padding: 1rem 1.125rem;
    margin-bottom: 1.75rem;
}

.context-title[b-ajbjntlz7c] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #666;
    margin-bottom: 0.25rem;
}

.context-desc[b-ajbjntlz7c] {
    font-size: 0.78rem;
    color: #555;
    line-height: 1.55;
}

    .context-desc strong[b-ajbjntlz7c] {
        color: #1a1a1a;
    }

/* ========== FORMULÁRIO ========== */

.form-group[b-ajbjntlz7c] {
    margin-bottom: 1.1rem;
    width: 100%;
}

.form-row[b-ajbjntlz7c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-label[b-ajbjntlz7c] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #444;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

    .form-label svg[b-ajbjntlz7c] {
        width: 13px;
        height: 13px;
        color: #aaa;
        flex-shrink: 0;
    }

    .form-label .required[b-ajbjntlz7c] {
        color: #ff8c00;
    }

    .form-label .optional[b-ajbjntlz7c] {
        font-weight: 400;
        color: #aaa;
        text-transform: none;
        font-size: 0.68rem;
    }

.form-input[b-ajbjntlz7c],
[b-ajbjntlz7c] .form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #fff;
    color: #333;
    box-sizing: border-box;
}

    .form-input:focus[b-ajbjntlz7c],
    [b-ajbjntlz7c] .form-input:focus {
        outline: none;
        border-color: #ff8c00;
        box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.10);
    }

    .form-input[b-ajbjntlz7c]::placeholder {
        color: #bbb;
    }

.validation-error[b-ajbjntlz7c],
[b-ajbjntlz7c] .validation-message {
    font-size: 0.7rem;
    color: #c62828;
    margin-top: 0.3rem;
    display: block;
}

/* ========== DIVISOR ========== */

.form-divider[b-ajbjntlz7c] {
    position: relative;
    text-align: center;
    margin: 1.5rem 0 1.25rem;
}

    .form-divider[b-ajbjntlz7c]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: #e0e0e0;
    }

    .form-divider span[b-ajbjntlz7c] {
        position: relative;
        background: #fff;
        padding: 0 0.75rem;
        font-size: 0.7rem;
        font-weight: 700;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

/* ========== BANNER DE ERRO ========== */

.error-banner[b-ajbjntlz7c] {
    background: #ffebee;
    color: #c62828;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    border-left: 4px solid #c62828;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.error-banner-icon[b-ajbjntlz7c] {
    font-size: 1rem;
    flex-shrink: 0;
}

.error-banner-content[b-ajbjntlz7c] {
    flex: 1;
}

.error-banner-title[b-ajbjntlz7c] {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.error-banner-text[b-ajbjntlz7c] {
    font-size: 0.8rem;
    opacity: 0.9;
    line-height: 1.4;
}

/* ========== BOTÕES ========== */

.btn-group[b-ajbjntlz7c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding-top: 1.25rem;
    width: 100%;
}

.btn[b-ajbjntlz7c] {
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
}

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

.btn-primary[b-ajbjntlz7c] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-ajbjntlz7c] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4);
    }

.btn-link[b-ajbjntlz7c] {
    background: none;
    border: none;
    color: #ff8c00;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.35rem 0;
    font-family: inherit;
}

    .btn-link:hover[b-ajbjntlz7c] {
        text-decoration: underline;
    }

/* ========== RODAPÉ DO FORMULÁRIO ========== */

.back-row[b-ajbjntlz7c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid #e8e8e8;
}

.privacy-note[b-ajbjntlz7c] {
    font-size: 0.7rem;
    color: #aaa;
}

/* ========== SPINNER ========== */

.spinner[b-ajbjntlz7c] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-ajbjntlz7c 0.8s linear infinite;
}

/* ========== SUCESSO ========== */

.success-card[b-ajbjntlz7c] {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    border: 1px solid #c8e6c9;
}

.success-icon[b-ajbjntlz7c] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.success-title[b-ajbjntlz7c] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 0.5rem;
}

.success-message[b-ajbjntlz7c] {
    font-size: 0.95rem;
    color: #558b2f;
    line-height: 1.5;
}

/* ========== PRÓXIMOS PASSOS ========== */

.connect-section[b-ajbjntlz7c] {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.connect-title[b-ajbjntlz7c] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.875rem;
}

.next-step[b-ajbjntlz7c] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0;
}

    .next-step + .next-step[b-ajbjntlz7c] {
        border-top: 1px solid #e0e0e0;
    }

.step-num[b-ajbjntlz7c] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ff8c00;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-text[b-ajbjntlz7c] {
    font-size: 0.8rem;
    color: #555;
    line-height: 1.5;
}

    .step-text strong[b-ajbjntlz7c] {
        color: #1a1a1a;
    }

/* ========== STEP CONTENT ========== */

.step-content[b-ajbjntlz7c] {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

/* ========== RESPONSIVIDADE ========== */

@media (max-width: 768px) {
    .iwant-page[b-ajbjntlz7c] {
        padding: 1.5rem;
    }

    .form-row[b-ajbjntlz7c] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .iwant-page[b-ajbjntlz7c] {
        padding: 1rem;
    }

    .back-row[b-ajbjntlz7c] {
        flex-direction: column;
        align-items: flex-start;
    }

    .success-icon[b-ajbjntlz7c] {
        font-size: 3rem;
    }

    .success-title[b-ajbjntlz7c] {
        font-size: 1.15rem;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Container principal do formulário - ADICIONA espaçamento INTERNO */
/*.login-form {
    display: flex;
    flex-direction: column;
    width: 100%;*/ /* ← 100% da largura disponível */
    /*max-width: 1200px;*/ /* ← Limita largura máxima para legibilidade */
    /*margin: 0 auto;*/ /* ← Centraliza horizontalmente */
    /*padding: 2rem;*/ /* ← Espaçamento INTERNO (não cria bordas externas) */
    /*background-color: white;
    font-family: Arial, sans-serif;
    box-sizing: border-box;*/ /* ← CRÍTICO: padding incluído na largura */
/*}

h3 {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px;
    margin-top: 0;
}

hr {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin-bottom: 30px;
    width: 100%;
}*/

/* Texto introdutório */
/*.intro-text {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
    text-align: justify;
}*/

/* Form groups */
/*.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
}

    .form-group label {
        display: block;
        font-size: 14px;
        color: #555555;
        margin-bottom: 5px;
    }*/

    /* ===========================================
   FORM CONTROLS - Estilos dos inputs
   Sobrescreve TODOS os estados de validação do Blazor
   =========================================== */

    /* Estado base */
    /*::deep .form-control,
    ::deep input.form-control,
    ::deep input[type="text"],
    ::deep input[type="password"],
    ::deep input[type="email"],
    .form-group .form-control,
    .form-group input {
        width: 100%;
        height: 35px;
        border: 1px solid #ff8c00 !important;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 14px;
        background-color: #ffffff !important;
        box-sizing: border-box;
        outline: none !important;
        box-shadow: none !important;
    }*/

        /* Estado de foco */
        /*::deep .form-control:focus,
        ::deep input.form-control:focus,
        ::deep input[type="text"]:focus,
        ::deep input[type="password"]:focus,
        ::deep input[type="email"]:focus,
        .form-group .form-control:focus,
        .form-group input:focus {
            border: 1px solid #e94e1b !important;
            box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
            background-color: #ffffff !important;
            outline: none !important;
        }*/

        /* =========================================== 
   ANULA estilos de validação do Blazor
   Classes: .valid, .invalid, .modified
   =========================================== */

        /*::deep .form-control.valid,
        ::deep .form-control.invalid,
        ::deep .form-control.modified,
        ::deep .form-control.valid.modified,
        ::deep .form-control.invalid.modified,
        ::deep input.valid,
        ::deep input.invalid,
        ::deep input.modified,
        ::deep input.valid.modified,
        ::deep input.invalid.modified,
        .form-group .form-control.valid,
        .form-group .form-control.invalid,
        .form-group .form-control.modified,
        .form-group input.valid,
        .form-group input.invalid,
        .form-group input.modified {
            background-color: #ffffff !important;
            border: 1px solid #ff8c00 !important;
            box-shadow: none !important;
            outline: none !important;
            background-image: none !important;
        }*/

            /* Foco nos estados de validação */
            /*::deep .form-control.valid:focus,
            ::deep .form-control.invalid:focus,
            ::deep .form-control.modified:focus,
            ::deep input.valid:focus,
            ::deep input.invalid:focus,
            ::deep input.modified:focus,
            .form-group .form-control.valid:focus,
            .form-group .form-control.invalid:focus,
            .form-group input.valid:focus,
            .form-group input.invalid:focus {
                border: 1px solid #e94e1b !important;
                box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
                background-color: #ffffff !important;
                outline: none !important;
                background-image: none !important;
            }*/

/* Mensagens de validação */
/*::deep .validation-message,
.validation-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}*/

/* Container do botão */
/*.button-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    width: 100%;
}*/

/* Botões de ação */
/*.buttonAction,
.buttonEfect {
    width: 130px;
    height: 35px;
    background-color: #FF8C00;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .buttonAction:hover,
    .buttonEfect:hover {
        background-color: #e67e00;
    }

    .buttonAction:focus,
    .buttonEfect:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.4);
    }*/

/* Alertas de erro */
/*.alert {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}*/

/* Link de assinatura centralizado */
/*.centralizar-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin-top: 10px;
}

::deep .nav-link {
    color: #FF8C00;
    font-size: 14px;
    text-decoration: none;
}

    ::deep .nav-link:hover {
        color: #e67e00;
        text-decoration: underline;
    }*/

/* Responsividade */
/*@media (max-width: 768px) {
    .login-form {
        padding: 1.5rem;*/ /* Menos padding em telas pequenas */
    /*}

    .button-container {
        justify-content: center;
    }

    .buttonAction,
    .buttonEfect {
        width: 100%;
        max-width: 250px;
    }
}*/

/* Telas muito pequenas */
/*@media (max-width: 480px) {
    .login-form {
        padding: 1rem;
    }
}*/

/* Container principal do formulário - ADICIONA espaçamento INTERNO */
.login-form[b-cqrb8zz0bu] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

h3[b-cqrb8zz0bu] {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px;
    margin-top: 0;
}

hr[b-cqrb8zz0bu] {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin-bottom: 30px;
    width: 100%;
}

/* Texto introdutório */
.intro-text[b-cqrb8zz0bu] {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
    text-align: justify;
}

/* ============================================
   TOGGLE SWITCH - SELEÇÃO DE TIPO DE USUÁRIO
============================================ */
.user-type-selector[b-cqrb8zz0bu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0;
    padding: 20px;
    background-color: #fafafa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.selector-label[b-cqrb8zz0bu] {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
    font-weight: 500;
}

.toggle-container[b-cqrb8zz0bu] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.toggle-text[b-cqrb8zz0bu] {
    font-size: 14px;
    font-weight: bold;
    color: #999;
    transition: color 0.3s ease;
    min-width: 100px;
    text-align: center;
}

    .toggle-text.active[b-cqrb8zz0bu] {
        color: #ff8c00;
    }

/* O Toggle Switch propriamente dito */
.toggle-switch[b-cqrb8zz0bu] {
    position: relative;
    width: 80px;
    height: 40px;
    background-color: #e0e0e0;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .toggle-switch.active[b-cqrb8zz0bu] {
        background-color: #ff8c00;
    }

/* O círculo que desliza */
.toggle-slider[b-cqrb8zz0bu] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active .toggle-slider[b-cqrb8zz0bu] {
    transform: translateX(40px);
}

/* Ícones dentro do toggle */
.toggle-icon[b-cqrb8zz0bu] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    transition: opacity 0.3s ease;
}

.toggle-icon-left[b-cqrb8zz0bu] {
    left: 10px;
    opacity: 1;
}

.toggle-icon-right[b-cqrb8zz0bu] {
    right: 10px;
    opacity: 0.3;
}

.toggle-switch.active .toggle-icon-left[b-cqrb8zz0bu] {
    opacity: 0.3;
}

.toggle-switch.active .toggle-icon-right[b-cqrb8zz0bu] {
    opacity: 1;
}

/* ============================================
   FORM GROUPS
============================================ */
.form-group[b-cqrb8zz0bu] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
}

    .form-group label[b-cqrb8zz0bu] {
        display: block;
        font-size: 14px;
        color: #555555;
        margin-bottom: 5px;
    }

    /* ===========================================
   FORM CONTROLS - Estilos dos inputs
   Sobrescreve TODOS os estados de validação do Blazor
=========================================== */

    /* Estado base */
    [b-cqrb8zz0bu] .form-control,
    [b-cqrb8zz0bu] input.form-control,
    [b-cqrb8zz0bu] input[type="text"],
    [b-cqrb8zz0bu] input[type="password"],
    [b-cqrb8zz0bu] input[type="email"],
    .form-group .form-control[b-cqrb8zz0bu],
    .form-group input[b-cqrb8zz0bu] {
        width: 100%;
        height: 35px;
        border: 1px solid #ff8c00 !important;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 14px;
        background-color: #ffffff !important;
        box-sizing: border-box;
        outline: none !important;
        box-shadow: none !important;
    }

        /* Estado de foco */
        [b-cqrb8zz0bu] .form-control:focus,
        [b-cqrb8zz0bu] input.form-control:focus,
        [b-cqrb8zz0bu] input[type="text"]:focus,
        [b-cqrb8zz0bu] input[type="password"]:focus,
        [b-cqrb8zz0bu] input[type="email"]:focus,
        .form-group .form-control:focus[b-cqrb8zz0bu],
        .form-group input:focus[b-cqrb8zz0bu] {
            border: 1px solid #e94e1b !important;
            box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
            background-color: #ffffff !important;
            outline: none !important;
        }

        /* =========================================== 
   ANULA estilos de validação do Blazor
   Classes: .valid, .invalid, .modified
=========================================== */

        [b-cqrb8zz0bu] .form-control.valid,
        [b-cqrb8zz0bu] .form-control.invalid,
        [b-cqrb8zz0bu] .form-control.modified,
        [b-cqrb8zz0bu] .form-control.valid.modified,
        [b-cqrb8zz0bu] .form-control.invalid.modified,
        [b-cqrb8zz0bu] input.valid,
        [b-cqrb8zz0bu] input.invalid,
        [b-cqrb8zz0bu] input.modified,
        [b-cqrb8zz0bu] input.valid.modified,
        [b-cqrb8zz0bu] input.invalid.modified,
        .form-group .form-control.valid[b-cqrb8zz0bu],
        .form-group .form-control.invalid[b-cqrb8zz0bu],
        .form-group .form-control.modified[b-cqrb8zz0bu],
        .form-group input.valid[b-cqrb8zz0bu],
        .form-group input.invalid[b-cqrb8zz0bu],
        .form-group input.modified[b-cqrb8zz0bu] {
            background-color: #ffffff !important;
            border: 1px solid #ff8c00 !important;
            box-shadow: none !important;
            outline: none !important;
            background-image: none !important;
        }

            /* Foco nos estados de validação */
            [b-cqrb8zz0bu] .form-control.valid:focus,
            [b-cqrb8zz0bu] .form-control.invalid:focus,
            [b-cqrb8zz0bu] .form-control.modified:focus,
            [b-cqrb8zz0bu] input.valid:focus,
            [b-cqrb8zz0bu] input.invalid:focus,
            [b-cqrb8zz0bu] input.modified:focus,
            .form-group .form-control.valid:focus[b-cqrb8zz0bu],
            .form-group .form-control.invalid:focus[b-cqrb8zz0bu],
            .form-group input.valid:focus[b-cqrb8zz0bu],
            .form-group input.invalid:focus[b-cqrb8zz0bu] {
                border: 1px solid #e94e1b !important;
                box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
                background-color: #ffffff !important;
                outline: none !important;
                background-image: none !important;
            }

/* Mensagens de validação */
[b-cqrb8zz0bu] .validation-message,
.validation-message[b-cqrb8zz0bu] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}

/* Container do botão */
.button-container[b-cqrb8zz0bu] {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    width: 100%;
}

/* Botões de ação */
.buttonAction[b-cqrb8zz0bu],
.buttonEfect[b-cqrb8zz0bu] {
    width: 130px;
    height: 35px;
    background-color: #FF8C00;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .buttonAction:hover[b-cqrb8zz0bu],
    .buttonEfect:hover[b-cqrb8zz0bu] {
        background-color: #e67e00;
    }

    .buttonAction:focus[b-cqrb8zz0bu],
    .buttonEfect:focus[b-cqrb8zz0bu] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.4);
    }

    .buttonAction:disabled[b-cqrb8zz0bu],
    .buttonEfect:disabled[b-cqrb8zz0bu] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Alertas de erro */
.alert[b-cqrb8zz0bu] {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
}

.alert-danger[b-cqrb8zz0bu] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsividade */
@media (max-width: 768px) {
    .login-form[b-cqrb8zz0bu] {
        padding: 1.5rem;
    }

    .toggle-container[b-cqrb8zz0bu] {
        flex-direction: column;
        gap: 10px;
    }

    .toggle-text[b-cqrb8zz0bu] {
        min-width: auto;
    }

    .button-container[b-cqrb8zz0bu] {
        justify-content: center;
    }

    .buttonAction[b-cqrb8zz0bu],
    .buttonEfect[b-cqrb8zz0bu] {
        width: 100%;
        max-width: 250px;
    }
}

/* Telas muito pequenas */
@media (max-width: 480px) {
    .login-form[b-cqrb8zz0bu] {
        padding: 1rem;
    }

    h3[b-cqrb8zz0bu] {
        font-size: 20px;
    }
}
/* /Pages/MoneyBox.razor.rz.scp.css */
/* ============================================
   BOMBUS - MoneyBox
   CSS Isolado (scoped)
   Paleta: Cinzas + Laranja (#ff8c00 e #e94e1b)
   ============================================ */

/* Container Principal */
.moneybox-page[b-6zb13f9d0u] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    box-sizing: border-box;
    min-height: calc(100vh - 200px);
}

/* ========== HEADER ========== */
.page-header[b-6zb13f9d0u] {
    margin-bottom: 1.5rem;
}

.page-title[b-6zb13f9d0u] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-subtitle[b-6zb13f9d0u] {
    font-size: 0.95rem;
    color: #666;
    margin: 0.5rem 0 0 0;
    line-height: 1.4;
}

/* ========== INFO BANNER ========== */
.info-banner[b-6zb13f9d0u] {
    background: linear-gradient(135deg, #fff8f0 0%, #fff4e6 100%);
    border-left: 4px solid #ff8c00;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-banner-icon[b-6zb13f9d0u] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-banner-text[b-6zb13f9d0u] {
    flex: 1;
}

.info-banner-title[b-6zb13f9d0u] {
    font-weight: 700;
    color: #e67e00;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.info-banner-description[b-6zb13f9d0u] {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.6;
}

.close-btn[b-6zb13f9d0u] {
    background: transparent;
    border: none;
    color: #999;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
    line-height: 1;
}

    .close-btn:hover[b-6zb13f9d0u] {
        background: rgba(255, 140, 0, 0.1);
        color: #ff8c00;
    }

/* ========== BALANCE CARD ========== */
.balance-card[b-6zb13f9d0u] {
    background: linear-gradient(135deg, #ff8c00 0%, #e67e00 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.3);
    color: white;
}

.balance-header[b-6zb13f9d0u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.balance-icon[b-6zb13f9d0u] {
    font-size: 2rem;
}

.balance-label[b-6zb13f9d0u] {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.balance-amount[b-6zb13f9d0u] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 4rem;
    align-items: center;
}

.currency[b-6zb13f9d0u] {
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.9;
}

.value[b-6zb13f9d0u] {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.balance-footer[b-6zb13f9d0u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.last-update[b-6zb13f9d0u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.9;
}

.update-icon[b-6zb13f9d0u] {
    font-size: 1rem;
}

.update-text[b-6zb13f9d0u] {
    font-weight: 400;
}

/* ========== ACCOUNT INFO CARD ========== */
.account-info-card[b-6zb13f9d0u] {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.account-header[b-6zb13f9d0u] {
    margin-bottom: 1rem;
}

.account-title[b-6zb13f9d0u] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-details[b-6zb13f9d0u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.account-row[b-6zb13f9d0u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

    .account-row:last-child[b-6zb13f9d0u] {
        border-bottom: none;
    }

.account-label[b-6zb13f9d0u] {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

.account-value[b-6zb13f9d0u] {
    font-size: 0.9rem;
    color: #333;
    font-weight: 600;
    font-family: 'SF Mono', 'Courier New', monospace;
}

.account-notice[b-6zb13f9d0u] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 3px solid #2196f3;
    border-radius: 8px;
    margin-top: 1rem;
}

.notice-icon[b-6zb13f9d0u] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.notice-text[b-6zb13f9d0u] {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
}

    .notice-text strong[b-6zb13f9d0u] {
        color: #1976d2;
        font-weight: 600;
    }

/* ========== TRANSACTIONS SECTION ========== */
.transactions-section[b-6zb13f9d0u] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.transactions-header[b-6zb13f9d0u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.transactions-title[b-6zb13f9d0u] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.transactions-list[b-6zb13f9d0u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.transaction-item[b-6zb13f9d0u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fafafa;
    border-radius: 8px;
    border-left: 3px solid #e0e0e0;
    transition: all 0.2s;
}

    .transaction-item.credit[b-6zb13f9d0u] {
        border-left-color: #4caf50;
    }

    .transaction-item.debit[b-6zb13f9d0u] {
        border-left-color: #ff6b6b;
    }

    .transaction-item:hover[b-6zb13f9d0u] {
        background: #f5f5f5;
        transform: translateX(4px);
    }

.transaction-icon[b-6zb13f9d0u] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.transaction-info[b-6zb13f9d0u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.transaction-description[b-6zb13f9d0u] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.transaction-date[b-6zb13f9d0u] {
    font-size: 0.75rem;
    color: #999;
}

.transaction-amount[b-6zb13f9d0u] {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Courier New', monospace;
}

    .transaction-amount.credit[b-6zb13f9d0u] {
        color: #4caf50;
    }

    .transaction-amount.debit[b-6zb13f9d0u] {
        color: #ff6b6b;
    }

/* ========== ALERTS ========== */
.alert[b-6zb13f9d0u] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.alert-success[b-6zb13f9d0u] {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border-left: 4px solid #4caf50;
}

.alert-error[b-6zb13f9d0u] {
    background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%);
    border-left: 4px solid #f44336;
}

.alert-icon[b-6zb13f9d0u] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert-content[b-6zb13f9d0u] {
    flex: 1;
}

.alert-title[b-6zb13f9d0u] {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.alert-success .alert-title[b-6zb13f9d0u] {
    color: #2e7d32;
}

.alert-error .alert-title[b-6zb13f9d0u] {
    color: #c62828;
}

.alert-message[b-6zb13f9d0u] {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* ========== ACTION AREA ========== */
.action-area[b-6zb13f9d0u] {
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 2.0rem;
}

.btn-group[b-6zb13f9d0u] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.helper-text[b-6zb13f9d0u] {
    text-align: center;
    font-size: 0.85rem;
    color: #999;
    padding: 0.5rem;
}

/* ========== BUTTONS ========== */
.btn[b-6zb13f9d0u] {
    flex: 1;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
}

    .btn:disabled[b-6zb13f9d0u] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-primary[b-6zb13f9d0u] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: white;
    box-shadow: 0 4px 16px rgba(255, 140, 0, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-6zb13f9d0u] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4);
    }

    .btn-primary:active:not(:disabled)[b-6zb13f9d0u] {
        transform: translateY(0);
    }

.btn-secondary[b-6zb13f9d0u] {
    background: white;
    color: #666;
    border: 2px solid #e0e0e0;
}

    .btn-secondary:hover:not(:disabled)[b-6zb13f9d0u] {
        border-color: #ff8c00;
        color: #ff8c00;
        background: #fff8f0;
    }

.btn-link[b-6zb13f9d0u] {
    background: transparent;
    border: none;
    color: #ff8c00;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: all 0.2s;
}

    .btn-link:hover[b-6zb13f9d0u] {
        color: #e67e00;
        text-decoration: underline;
    }

/* ========== MODAL ========== */
.modal-overlay[b-6zb13f9d0u] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fadeIn-b-6zb13f9d0u 0.2s ease-out;
}

.modal-content[b-6zb13f9d0u] {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-6zb13f9d0u 0.3s ease-out;
}

.modal-header[b-6zb13f9d0u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.modal-title[b-6zb13f9d0u] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-body[b-6zb13f9d0u] {
    padding: 1.5rem;
}

.confirm-info[b-6zb13f9d0u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.confirm-row[b-6zb13f9d0u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

    .confirm-row:last-child[b-6zb13f9d0u] {
        border-bottom: none;
    }

.confirm-label[b-6zb13f9d0u] {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.confirm-value[b-6zb13f9d0u] {
    font-size: 0.95rem;
    color: #333;
    font-weight: 600;
    text-align: right;
}

    .confirm-value.highlight[b-6zb13f9d0u] {
        color: #ff8c00;
        font-size: 1.5rem;
    }

.warning-box[b-6zb13f9d0u] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #fff8f0;
    border-left: 3px solid #ff8c00;
    border-radius: 8px;
}

.warning-icon[b-6zb13f9d0u] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.warning-text[b-6zb13f9d0u] {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

.modal-footer[b-6zb13f9d0u] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

/* ========== LOADING STATES ========== */
.loading-container[b-6zb13f9d0u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.loading-spinner-large[b-6zb13f9d0u] {
    width: 48px;
    height: 48px;
    border: 4px solid #f0f0f0;
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-6zb13f9d0u 1s linear infinite;
}

.loading-spinner[b-6zb13f9d0u] {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-6zb13f9d0u 0.8s linear infinite;
}

.loading-text[b-6zb13f9d0u] {
    font-size: 0.95rem;
    opacity: 0.9;
}

.spinner[b-6zb13f9d0u] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-6zb13f9d0u 0.8s linear infinite;
}

.empty-state-small[b-6zb13f9d0u] {
    text-align: center;
    padding: 1rem;
    color: #999;
    font-size: 0.85rem;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn-b-6zb13f9d0u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-6zb13f9d0u {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.fade-in[b-6zb13f9d0u] {
    animation: fadeIn-b-6zb13f9d0u 0.3s ease-out;
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
    .moneybox-page[b-6zb13f9d0u] {
        padding: 1.5rem;
    }

    .page-title[b-6zb13f9d0u] {
        font-size: 1.5rem;
    }

    .balance-card[b-6zb13f9d0u] {
        padding: 1.5rem;
    }

    .balance-amount[b-6zb13f9d0u] {
        min-height: 3rem;
    }

    .value[b-6zb13f9d0u] {
        font-size: 2.5rem;
    }

    .currency[b-6zb13f9d0u] {
        font-size: 1.25rem;
    }

    .btn-group[b-6zb13f9d0u] {
        flex-direction: column;
    }

    .modal-content[b-6zb13f9d0u] {
        max-width: 100%;
        margin: 0 1rem;
    }
}

@media (max-width: 480px) {
    .moneybox-page[b-6zb13f9d0u] {
        padding: 1rem;
    }

    .page-title[b-6zb13f9d0u] {
        font-size: 1.35rem;
    }

    .info-banner[b-6zb13f9d0u] {
        padding: 0.875rem 1rem;
    }

    .info-banner-description[b-6zb13f9d0u] {
        font-size: 0.8rem;
    }

    .balance-card[b-6zb13f9d0u] {
        padding: 1.25rem;
    }

    .value[b-6zb13f9d0u] {
        font-size: 2rem;
    }

    .currency[b-6zb13f9d0u] {
        font-size: 1rem;
    }

    .account-info-card[b-6zb13f9d0u],
    .transactions-section[b-6zb13f9d0u] {
        padding: 1rem;
    }

    .transaction-item[b-6zb13f9d0u] {
        padding: 0.75rem;
    }

    .modal-header[b-6zb13f9d0u],
    .modal-body[b-6zb13f9d0u],
    .modal-footer[b-6zb13f9d0u] {
        padding: 1rem;
    }

    .modal-title[b-6zb13f9d0u] {
        font-size: 1.1rem;
    }
}

/* ========== DARK MODE CONSIDERATIONS (opcional) ========== */
@media (prefers-color-scheme: dark) {
    /* Mantenha sempre claro para consistência corporativa */
    .moneybox-page[b-6zb13f9d0u] {
        background-color: white;
    }
}
/* /Pages/Reload/Packs.razor.rz.scp.css */
/* ============================================
   Bombus – Packs (Reload)
   CSS Isolado (scoped)
   Paleta: Cinzas + Laranja (#ff8c00 / #e67e00)
   ============================================ */

/* ── Container ── */
.packs-page[b-s5sysvq507] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    box-sizing: border-box;
}

/* ── Header ── */
.page-header[b-s5sysvq507] {
    margin-bottom: 1.5rem;
}

.page-title[b-s5sysvq507] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.badge[b-s5sysvq507] {
    padding: .2rem .55rem;
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 700;
    background: #ff8c00;
    color: #fff;
}

.page-subtitle[b-s5sysvq507] {
    font-size: .82rem;
    color: #9e9e9e;
    margin: .25rem 0 0 0;
}

.divider[b-s5sysvq507] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
    margin: 1rem 0 1.5rem;
}

/* ── Info Banner ── */
.info-banner[b-s5sysvq507] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border-left: 4px solid #ff8c00;
    border-radius: 10px;
    padding: .875rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: .8rem;
    color: #555;
    line-height: 1.5;
}

    .info-banner strong[b-s5sysvq507] {
        color: #e67e00;
    }

/* ── Carrossel ── */
.carousel-wrapper[b-s5sysvq507] {
    position: relative;
    margin-bottom: 1.5rem;
}

.carousel-track-outer[b-s5sysvq507] {
    overflow: hidden;
    border-radius: 10px;
    padding-top: 20px; /* espaço para badge "Mais Popular" */
    padding-bottom: 8px; /* espaço para box-shadow inferior */
}

.carousel-track[b-s5sysvq507] {
    display: flex;
    gap: 1rem;
}

/* ── Pack Card ── */
.pack-card[b-s5sysvq507] {
    flex: 0 0 calc(33.333% - .67rem);
    background: #fafafa;
    border: 2px solid #e0e0e0;
    border-radius: 14px;
    padding: 1.25rem 1rem 1rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    position: relative;
    text-align: center;
    user-select: none;
    box-sizing: border-box;
}

    .pack-card:hover[b-s5sysvq507] {
        border-color: #ff8c00;
        box-shadow: 0 4px 16px rgba(255, 140, 0, .15);
    }

    .pack-card.selected[b-s5sysvq507] {
        border-color: #ff8c00;
        background: #fff8f0;
        box-shadow: 0 6px 24px rgba(255, 140, 0, .22);
    }

    .pack-card.featured[b-s5sysvq507] {
        border-color: #ff8c00;
        background: linear-gradient(160deg, #fff8f0, #fff4e6);
        box-shadow: 0 4px 16px rgba(255, 140, 0, .14);
    }

/* ── Badge Mais Popular ── */
.popular-badge[b-s5sysvq507] {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .3px;
    z-index: 2;
}

/* ── Check icon (selecionado) ── */
.check-icon[b-s5sysvq507] {
    display: none;
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4caf50;
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
}

.pack-card.selected .check-icon[b-s5sysvq507] {
    display: flex;
}

/* ── Conteúdo do card ── */
.pack-name[b-s5sysvq507] {
    font-size: .72rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: .5rem;
}

.pack-credits[b-s5sysvq507] {
    font-size: 2.4rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: .1rem;
}

.pack-credits-label[b-s5sysvq507] {
    font-size: .68rem;
    color: #9e9e9e;
    margin-bottom: .875rem;
}

.pack-price-total[b-s5sysvq507] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e67e00;
    margin-bottom: .1rem;
}

.pack-price-unit[b-s5sysvq507] {
    font-size: .68rem;
    color: #9e9e9e;
    font-family: 'Courier New', monospace;
    margin-bottom: .875rem;
}

.pack-validity[b-s5sysvq507] {
    font-size: .65rem;
    color: #9e9e9e;
    background: #f0f0f0;
    border-radius: 20px;
    padding: .2rem .55rem;
    display: inline-block;
}

/* ── Nav & Dots ── */
.carousel-nav[b-s5sysvq507] {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
}

.nav-btn[b-s5sysvq507] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: #fff;
    color: #555;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

    .nav-btn:hover[b-s5sysvq507] {
        border-color: #ff8c00;
        color: #ff8c00;
    }

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

.carousel-dots[b-s5sysvq507] {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: .6rem;
}

.dot[b-s5sysvq507] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e0e0e0;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

    .dot.active[b-s5sysvq507] {
        background: #ff8c00;
        transform: scale(1.3);
    }

/* ── Resumo da seleção ── */
.selection-summary[b-s5sysvq507] {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border: 1.5px solid #ffe0b2;
    border-radius: 10px;
    padding: .875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    transition: opacity .3s;
}

    .selection-summary.hidden[b-s5sysvq507] {
        opacity: 0;
        pointer-events: none;
    }

.summary-left[b-s5sysvq507] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.summary-pack[b-s5sysvq507] {
    font-size: .8rem;
    font-weight: 700;
    color: #333;
}

.summary-detail[b-s5sysvq507] {
    font-size: .7rem;
    color: #9e9e9e;
    font-family: 'Courier New', monospace;
}

.summary-price[b-s5sysvq507] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e67e00;
}

/* ── Botão Comprar ── */
.btn[b-s5sysvq507] {
    width: 100%;
    padding: .85rem 1rem;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: box-shadow .2s;
}

    .btn:disabled[b-s5sysvq507] {
        opacity: .4;
        cursor: not-allowed;
    }

.btn-primary[b-s5sysvq507] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 140, 0, .25);
}

    .btn-primary:not(:disabled):hover[b-s5sysvq507] {
        box-shadow: 0 6px 20px rgba(255, 140, 0, .35);
    }

/* ── Responsividade ── */
@media (max-width: 640px) {
    .packs-page[b-s5sysvq507] {
        padding: 1.25rem;
    }

    .pack-card[b-s5sysvq507] {
        flex: 0 0 100%;
    }

    .pack-credits[b-s5sysvq507] {
        font-size: 2rem;
    }
}

@media (min-width: 641px) and (max-width: 860px) {
    .pack-card[b-s5sysvq507] {
        flex: 0 0 calc(50% - .5rem);
    }
}
/* /Pages/Subscription.razor.rz.scp.css */
/* ============================================
   BOMBUS - Cadastro de Assinante/Credor
   CSS Isolado (scoped)
   Versão com validação de Chave de Convite
   ============================================ */

/* Container principal - SEGUE PADRÃO DO LOGIN */
.creditor-register[b-sc31dn1j2w] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    box-sizing: border-box;
}

/* Animação de fade-in */
.fade-in[b-sc31dn1j2w] {
    animation: fadeIn-b-sc31dn1j2w 0.3s ease-out;
}

@keyframes fadeIn-b-sc31dn1j2w {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn-b-sc31dn1j2w {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

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

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

@keyframes shake-b-sc31dn1j2w {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-5px);
    }

    40%, 80% {
        transform: translateX(5px);
    }
}

/* ========== LANDING ========== */

.landing-hero[b-sc31dn1j2w] {
    text-align: center;
    padding: 1rem 0 1.5rem;
}

.landing-title[b-sc31dn1j2w] {
    font-size: 1.35rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

    .landing-title .highlight[b-sc31dn1j2w] {
        color: #ff8c00;
    }

.landing-subtitle[b-sc31dn1j2w] {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

.benefits-list[b-sc31dn1j2w] {
    list-style: none;
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

    .benefits-list li[b-sc31dn1j2w] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 0;
        font-size: 0.9rem;
        color: #333;
    }

        .benefits-list li:not(:last-child)[b-sc31dn1j2w] {
            border-bottom: 1px solid #e0e0e0;
        }

.benefit-icon[b-sc31dn1j2w] {
    width: 28px;
    height: 28px;
    background: #e8f5e9;
    color: #4caf50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    font-weight: bold;
}

/* ── Divisor da Landing ── */
.landing-divider[b-sc31dn1j2w] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
    margin: 0 0 1.5rem;
}

/* ── Como você chegou até aqui? ── */
.section-headline[b-sc31dn1j2w] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 0.3rem;
}

.section-sub[b-sc31dn1j2w] {
    font-size: 0.8rem;
    color: #888;
    text-align: center;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* ── Choice Cards ── */
.choice-grid[b-sc31dn1j2w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}

.choice-card[b-sc31dn1j2w] {
    border: 2px solid #e0e0e0;
    border-radius: 14px;
    padding: 1.25rem 1.1rem 1rem;
    cursor: pointer;
    position: relative;
    background: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .choice-card:hover[b-sc31dn1j2w] {
        border-color: #ff8c00;
        transform: translateY(-2px);
        box-shadow: 0 6px 22px rgba(255, 140, 0, 0.18);
    }

    .choice-card.featured[b-sc31dn1j2w] {
        border-color: #ff8c00;
        background: #999;
    }

.card-badge[b-sc31dn1j2w] {
    position: absolute;
    top: -0.7rem;
    right: 0.9rem;
    background: #ff8c00;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.card-icon[b-sc31dn1j2w] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.choice-card:hover .card-icon[b-sc31dn1j2w],
.choice-card.featured .card-icon[b-sc31dn1j2w] {
    background: rgba(255, 255, 255, 0.25);
}

.card-title[b-sc31dn1j2w] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.card-desc[b-sc31dn1j2w] {
    font-size: 0.72rem;
    color: #888;
    line-height: 1.55;
    flex: 1;
    margin-bottom: 0.875rem;
}

.card-pill[b-sc31dn1j2w] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    align-self: flex-start;
}

.pill-key[b-sc31dn1j2w] {
    background: #fff3e0;
    color: #c45200;
}

.pill-contact[b-sc31dn1j2w] {
    background: #eaeaea;
    color: #ff8c00;
}

/* Overrides para o card featured (fundo cinza #999) */
.choice-card.featured .card-title[b-sc31dn1j2w] {
    color: #fff;
}

.choice-card.featured .card-desc[b-sc31dn1j2w] {
    color: rgba(255,255,255,.85);
}

.choice-card.featured .card-arrow[b-sc31dn1j2w] {
    color: #fff;
    border-top-color: rgba(255,255,255,.25);
}

.choice-card.featured .pill-key[b-sc31dn1j2w] {
    background: rgba(255,255,255,.22);
    color: #fff;
}

.card-arrow[b-sc31dn1j2w] {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e8e8e8;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff8c00;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap 0.2s ease;
}

.choice-card:hover .card-arrow[b-sc31dn1j2w] {
    gap: 0.6rem;
}

/* ── Nota informativa da Landing ── */
.landing-info-note[b-sc31dn1j2w] {
    background: #fffbf4;
    border: 1px solid #ffe0b2;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.landing-info-note-icon[b-sc31dn1j2w] {
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.landing-info-note-text[b-sc31dn1j2w] {
    font-size: 0.7rem;
    color: #7c2d12;
    line-height: 1.55;
}

    .landing-info-note-text strong[b-sc31dn1j2w] {
        color: #c2410c;
    }

/* ── Rodapé da Landing ── */
.landing-back-row[b-sc31dn1j2w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.login-hint[b-sc31dn1j2w] {
    font-size: 0.75rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.btn-link.inline[b-sc31dn1j2w] {
    font-size: 0.75rem;
    padding: 0;
    color: #ff8c00;
    font-weight: 600;
}

/* ========== MINI STEPPER (4 steps) ========== */

.mini-stepper[b-sc31dn1j2w] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.mini-step[b-sc31dn1j2w] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
    transition: all 0.3s ease;
}

    .mini-step.active[b-sc31dn1j2w] {
        background: #ff8c00;
        width: 24px;
        border-radius: 4px;
    }

    .mini-step.completed[b-sc31dn1j2w] {
        background: #4caf50;
    }

/* ========== FORMULÁRIO ========== */

.form-title[b-sc31dn1j2w] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.form-subtitle[b-sc31dn1j2w] {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.form-group[b-sc31dn1j2w] {
    margin-bottom: 1.15rem;
    width: 100%;
}

.form-row[b-sc31dn1j2w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-label[b-sc31dn1j2w] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .form-label .optional[b-sc31dn1j2w] {
        font-weight: 400;
        color: #999;
        text-transform: none;
    }

    .form-label .required[b-sc31dn1j2w] {
        color: #ff8c00;
    }

.input-with-icon[b-sc31dn1j2w] {
    position: relative;
    width: 100%;
}

.input-icon[b-sc31dn1j2w] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #999;
    pointer-events: none;
}

.form-input[b-sc31dn1j2w],
[b-sc31dn1j2w] .form-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #fff;
    color: #333;
    box-sizing: border-box;
}

    .form-input:focus[b-sc31dn1j2w],
    [b-sc31dn1j2w] .form-input:focus {
        outline: none;
        border-color: #ff8c00;
        box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
    }

    .form-input[b-sc31dn1j2w]::placeholder {
        color: #bbb;
    }

    .form-input.error[b-sc31dn1j2w] {
        border-color: #c62828;
        animation: shake-b-sc31dn1j2w 0.4s ease;
    }

    /* Input específico para chave de convite */
    .form-input.invitation-key-input[b-sc31dn1j2w] {
        font-family: 'Courier New', monospace;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

.form-helper[b-sc31dn1j2w] {
    font-size: 0.7rem;
    color: #999;
    margin-top: 0.3rem;
    display: block;
}

.validation-error[b-sc31dn1j2w],
[b-sc31dn1j2w] .validation-message {
    font-size: 0.7rem;
    color: #c62828;
    margin-top: 0.3rem;
    display: block;
}

/* ========== INFO BOX (explicação da chave) ========== */

.info-box[b-sc31dn1j2w] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #eaeaea; /*linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);*/
    border: 1px solid #eaeaea; /*#bbdefb;*/
    border-left: 4px solid #ff8c00;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.info-box-icon[b-sc31dn1j2w] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-box-content[b-sc31dn1j2w] {
    flex: 1;
}

.info-box-title[b-sc31dn1j2w] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ff8c00;
    margin-bottom: 0.25rem;
}

.info-box-text[b-sc31dn1j2w] {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
}

/* ========== LOADING CARD ========== */

.loading-card[b-sc31dn1j2w] {
    background: #f8f9fa;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}

    .loading-card p[b-sc31dn1j2w] {
        margin-top: 1rem;
        color: #666;
        font-size: 0.9rem;
    }

.spinner-large[b-sc31dn1j2w] {
    width: 48px;
    height: 48px;
    border: 4px solid #f0f0f0;
    border-top-color: #ff8c00;
    border-radius: 50%;
    animation: spin-b-sc31dn1j2w 1s linear infinite;
    margin: 0 auto;
}

/* ========== CREDITOR CARD (credor do convite) ========== */

.creditor-card[b-sc31dn1j2w] {
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
}

    .creditor-card.found[b-sc31dn1j2w] {
        border-color: #4caf50;
        background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    }

.creditor-header[b-sc31dn1j2w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.creditor-avatar[b-sc31dn1j2w] {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #4caf50, #45a049);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.creditor-details[b-sc31dn1j2w] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.creditor-label[b-sc31dn1j2w] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4caf50;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.creditor-name[b-sc31dn1j2w] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.creditor-fantasia[b-sc31dn1j2w] {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}

.creditor-info[b-sc31dn1j2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.creditor-info-item[b-sc31dn1j2w] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #666;
}

    .creditor-info-item span:first-child[b-sc31dn1j2w] {
        opacity: 0.7;
    }

/* Badge de verificado */
.verified-badge[b-sc31dn1j2w] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
}

/* ========== CREDITOR SUMMARY CARD (resumo na etapa CNPJ) ========== */

.creditor-summary-card[b-sc31dn1j2w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border: 1px solid #c8e6c9;
    border-left: 4px solid #4caf50;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.creditor-summary-icon[b-sc31dn1j2w] {
    font-size: 1.25rem;
}

.creditor-summary-info[b-sc31dn1j2w] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.creditor-summary-label[b-sc31dn1j2w] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4caf50;
    font-weight: 600;
}

.creditor-summary-name[b-sc31dn1j2w] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

/* ========== COMPANY CARD (empresa do assinante) ========== */

.company-card[b-sc31dn1j2w] {
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
}

    .company-card.found[b-sc31dn1j2w] {
        border-color: #4caf50;
        background: #e8f5e9;
    }

.company-header[b-sc31dn1j2w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.company-avatar[b-sc31dn1j2w] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.company-card.found .company-avatar[b-sc31dn1j2w] {
    background: linear-gradient(135deg, #4caf50, #45a049);
}

.company-details[b-sc31dn1j2w] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.company-name[b-sc31dn1j2w] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.company-fantasia[b-sc31dn1j2w] {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}

.company-cnpj[b-sc31dn1j2w] {
    font-size: 0.8rem;
    color: #666;
    font-family: 'Courier New', monospace;
}

.company-status[b-sc31dn1j2w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4caf50;
    font-weight: 600;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(0,0,0,0.1);
}

    .company-status.inactive[b-sc31dn1j2w] {
        color: #ff9800;
    }

    .company-status.pending[b-sc31dn1j2w] {
        color: #ff8c00;
    }

.company-address[b-sc31dn1j2w] {
    font-size: 0.8rem;
    color: #666;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    line-height: 1.5;
}

/* ========== COMPANY SUMMARY CARD ========== */

.company-summary-card[b-sc31dn1j2w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fff8f0 0%, #fff4e6 100%);
    border: 1px solid #ffe0b2;
    border-left: 4px solid #ff8c00;
    border-radius: 8px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

.company-summary-icon[b-sc31dn1j2w] {
    font-size: 1.5rem;
}

.company-summary-info[b-sc31dn1j2w] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.company-summary-name[b-sc31dn1j2w] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.company-summary-cnpj[b-sc31dn1j2w] {
    font-size: 0.75rem;
    color: #666;
    font-family: 'Courier New', monospace;
}

.btn-change[b-sc31dn1j2w] {
    background: transparent;
    border: 1px solid #ff8c00;
    color: #ff8c00;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-change:hover[b-sc31dn1j2w] {
        background: #ff8c00;
        color: white;
    }

/* ========== SUCCESS CARD ========== */

.success-card[b-sc31dn1j2w] {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    border: 1px solid #c8e6c9;
}

.success-icon[b-sc31dn1j2w] {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: bounceIn-b-sc31dn1j2w 0.6s ease-out;
}

.success-title[b-sc31dn1j2w] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 0.5rem;
}

.success-message[b-sc31dn1j2w] {
    font-size: 0.95rem;
    color: #558b2f;
    line-height: 1.5;
}

.success-spid[b-sc31dn1j2w] {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #666;
}

    .success-spid code[b-sc31dn1j2w] {
        background: rgba(0,0,0,0.05);
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
    }

/* ========== CONNECT SECTION ========== */

.connect-section[b-sc31dn1j2w] {
    background: #fff8f0;
    border-left: 4px solid #ff8c00;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.connect-title[b-sc31dn1j2w] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e67e00;
    margin-bottom: 0.35rem;
}

.connect-description[b-sc31dn1j2w] {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* ========== BANNERS ========== */

.error-banner[b-sc31dn1j2w] {
    background: #ffebee;
    color: #c62828;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin: 1rem 0;
    border-left: 4px solid #c62828;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.error-banner-icon[b-sc31dn1j2w] {
    font-size: 1rem;
    flex-shrink: 0;
}

.error-banner-content[b-sc31dn1j2w] {
    flex: 1;
}

.error-banner-title[b-sc31dn1j2w] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.error-banner-text[b-sc31dn1j2w] {
    font-size: 0.8rem;
    opacity: 0.9;
    line-height: 1.4;
}

.warning-banner[b-sc31dn1j2w] {
    background: #fff3e0;
    color: #e65100;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    border-left: 4px solid #ff9800;
}

/* ========== BOTÕES ========== */

.btn-group[b-sc31dn1j2w] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
    width: 100%;
}

.btn[b-sc31dn1j2w] {
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
}

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

.btn-primary[b-sc31dn1j2w] {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
}

    .btn-primary:hover:not(:disabled)[b-sc31dn1j2w] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4);
    }

.btn-secondary[b-sc31dn1j2w] {
    background: #fff;
    color: #666;
    border: 2px solid #e0e0e0;
}

    .btn-secondary:hover:not(:disabled)[b-sc31dn1j2w] {
        border-color: #ff8c00;
        color: #ff8c00;
    }

.btn-link[b-sc31dn1j2w] {
    background: none;
    border: none;
    color: #ff8c00;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem;
    font-family: inherit;
    text-align: center;
}

    .btn-link:hover:not(:disabled)[b-sc31dn1j2w] {
        text-decoration: underline;
    }

    .btn-link:disabled[b-sc31dn1j2w] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ========== SPINNER ========== */

.spinner[b-sc31dn1j2w] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-sc31dn1j2w 0.8s linear infinite;
}

/* ========== STEP CONTENT ========== */

.step-content[b-sc31dn1j2w] {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

/* ========== RESPONSIVIDADE ========== */

@media (max-width: 768px) {
    .creditor-register[b-sc31dn1j2w] {
        padding: 1.5rem;
    }

    .btn-group[b-sc31dn1j2w] {
        align-items: center;
    }

    .btn[b-sc31dn1j2w] {
        max-width: 100%;
    }

    .form-row[b-sc31dn1j2w] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .creditor-register[b-sc31dn1j2w] {
        padding: 1rem;
    }

    .landing-title[b-sc31dn1j2w] {
        font-size: 1.2rem;
    }

    .choice-grid[b-sc31dn1j2w] {
        grid-template-columns: 1fr;
    }

    .success-icon[b-sc31dn1j2w] {
        font-size: 3rem;
    }

    .success-title[b-sc31dn1j2w] {
        font-size: 1.15rem;
    }

    .company-summary-card[b-sc31dn1j2w] {
        flex-wrap: wrap;
    }

    .btn-change[b-sc31dn1j2w] {
        width: 100%;
        margin-top: 0.5rem;
    }

    .creditor-header[b-sc31dn1j2w] {
        flex-wrap: wrap;
    }

    .verified-badge[b-sc31dn1j2w] {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .landing-back-row[b-sc31dn1j2w] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Users.razor.rz.scp.css */
/* Container principal da página */
.users-page[b-eepf1wnglf] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    background-color: white;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

h3[b-eepf1wnglf] {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px;
}

hr[b-eepf1wnglf] {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin-bottom: 30px;
}

/* ============================================
   ALERTAS
============================================ */
.alert[b-eepf1wnglf] {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success[b-eepf1wnglf] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger[b-eepf1wnglf] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ============================================
   SEÇÃO DE CADASTRO (FORMULÁRIO)
============================================ */
.form-section[b-eepf1wnglf] {
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

    .form-section h4[b-eepf1wnglf] {
        font-size: 18px;
        color: #ff8c00;
        margin-bottom: 20px;
        font-weight: bold;
    }

.form-row[b-eepf1wnglf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-eepf1wnglf] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-eepf1wnglf] {
        font-size: 14px;
        color: #555;
        margin-bottom: 5px;
        font-weight: 500;
    }

    /* Form controls */
    [b-eepf1wnglf] .form-control,
    [b-eepf1wnglf] input.form-control,
    [b-eepf1wnglf] input[type="text"],
    [b-eepf1wnglf] input[type="password"],
    [b-eepf1wnglf] input[type="email"],
    .form-group .form-control[b-eepf1wnglf],
    .form-group input[b-eepf1wnglf] {
        width: 100%;
        height: 35px;
        border: 1px solid #ff8c00 !important;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 14px;
        background-color: #ffffff !important;
        box-sizing: border-box;
        outline: none !important;
        box-shadow: none !important;
    }

        [b-eepf1wnglf] .form-control:focus,
        [b-eepf1wnglf] input.form-control:focus,
        [b-eepf1wnglf] input[type="text"]:focus,
        [b-eepf1wnglf] input[type="password"]:focus,
        [b-eepf1wnglf] input[type="email"]:focus,
        .form-group .form-control:focus[b-eepf1wnglf],
        .form-group input:focus[b-eepf1wnglf] {
            border: 1px solid #e94e1b !important;
            box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
            background-color: #ffffff !important;
            outline: none !important;
        }

        /* Anula estilos de validação do Blazor */
        [b-eepf1wnglf] .form-control.valid,
        [b-eepf1wnglf] .form-control.invalid,
        [b-eepf1wnglf] .form-control.modified,
        [b-eepf1wnglf] .form-control.valid.modified,
        [b-eepf1wnglf] .form-control.invalid.modified,
        [b-eepf1wnglf] input.valid,
        [b-eepf1wnglf] input.invalid,
        [b-eepf1wnglf] input.modified,
        .form-group .form-control.valid[b-eepf1wnglf],
        .form-group .form-control.invalid[b-eepf1wnglf],
        .form-group input.valid[b-eepf1wnglf],
        .form-group input.invalid[b-eepf1wnglf] {
            background-color: #ffffff !important;
            border: 1px solid #ff8c00 !important;
            box-shadow: none !important;
            outline: none !important;
            background-image: none !important;
        }

            [b-eepf1wnglf] .form-control.valid:focus,
            [b-eepf1wnglf] .form-control.invalid:focus,
            [b-eepf1wnglf] .form-control.modified:focus,
            [b-eepf1wnglf] input.valid:focus,
            [b-eepf1wnglf] input.invalid:focus,
            .form-group .form-control.valid:focus[b-eepf1wnglf],
            .form-group .form-control.invalid:focus[b-eepf1wnglf],
            .form-group input.valid:focus[b-eepf1wnglf],
            .form-group input.invalid:focus[b-eepf1wnglf] {
                border: 1px solid #e94e1b !important;
                box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
                background-color: #ffffff !important;
                outline: none !important;
                background-image: none !important;
            }

/* Mensagens de validação */
[b-eepf1wnglf] .validation-message,
.validation-message[b-eepf1wnglf] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}

.button-row[b-eepf1wnglf] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn[b-eepf1wnglf] {
    height: 35px;
    padding: 0 25px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary[b-eepf1wnglf] {
    background-color: #ff8c00;
    color: white;
}

    .btn-primary:hover[b-eepf1wnglf] {
        background-color: #e67e00;
    }

    .btn-primary:focus[b-eepf1wnglf] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.4);
    }

.btn-secondary[b-eepf1wnglf] {
    background-color: #e0e0e0;
    color: #555;
}

    .btn-secondary:hover[b-eepf1wnglf] {
        background-color: #d0d0d0;
    }

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

/* ============================================
   SEÇÃO DE LISTAGEM (TABELA)
============================================ */
.list-section[b-eepf1wnglf] {
    margin-top: 30px;
}

    .list-section h4[b-eepf1wnglf] {
        font-size: 18px;
        color: #333;
        margin-bottom: 20px;
        font-weight: bold;
    }

.table-container[b-eepf1wnglf] {
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

table[b-eepf1wnglf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed; /* ← Ativa controle manual de larguras */
}

thead[b-eepf1wnglf] {
    background-color: #ff8c00;
    color: white;
}

    thead th[b-eepf1wnglf] {
        padding: 12px;
        text-align: left;
        font-weight: bold;
    }

        /* ✅ Larguras específicas por coluna */
        thead th:nth-child(1)[b-eepf1wnglf] { /* Nome */
            width: 35%;
        }

        thead th:nth-child(2)[b-eepf1wnglf] { /* E-mail (Login) */
            width: 35%;
        }

        thead th:nth-child(3)[b-eepf1wnglf] { /* Status */
            width: 15%;
        }

        thead th:nth-child(4)[b-eepf1wnglf] { /* Ações */
            width: 15%;
        }

tbody tr[b-eepf1wnglf] {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

    tbody tr:hover[b-eepf1wnglf] {
        background-color: #fff8f0;
    }

tbody td[b-eepf1wnglf] {
    padding: 12px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge de status */
.status-badge[b-eepf1wnglf] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.status-permitido[b-eepf1wnglf] {
    background-color: #d4edda;
    color: #155724;
}

.status-bloqueado[b-eepf1wnglf] {
    background-color: #f8d7da;
    color: #721c24;
}

/* Ícones de ação na tabela */
.action-buttons[b-eepf1wnglf] {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-start; /* ← Alinha os ícones à esquerda */
}

.action-icon[b-eepf1wnglf] {
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 5px;
    border-radius: 4px;
}

    .action-icon:hover[b-eepf1wnglf] {
        transform: scale(1.2);
    }

/* Ícone de editar (lápis) */
.icon-edit[b-eepf1wnglf] {
    color: #0066cc;
}

    .icon-edit:hover[b-eepf1wnglf] {
        background-color: #e7f3ff;
    }

/* Ícone de bloquear (cadeado fechado) */
.icon-lock[b-eepf1wnglf] {
    color: #ffc107;
}

    .icon-lock:hover[b-eepf1wnglf] {
        background-color: #fff8e7;
    }

/* Ícone de desbloquear (cadeado aberto) */
.icon-unlock[b-eepf1wnglf] {
    color: #4caf50;
}

    .icon-unlock:hover[b-eepf1wnglf] {
        background-color: #e8f5e9;
    }

/* Ícone de excluir (lixeira) */
.icon-delete[b-eepf1wnglf] {
    color: #dc3545;
}

    .icon-delete:hover[b-eepf1wnglf] {
        background-color: #f8d7da;
    }

/* Estados especiais */
.loading-state[b-eepf1wnglf],
.empty-state[b-eepf1wnglf] {
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 14px;
}

    .empty-state i[b-eepf1wnglf] {
        font-size: 48px;
        margin-bottom: 15px;
        display: block;
    }

/* ============================================
   RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
    .users-page[b-eepf1wnglf] {
        padding: 1.5rem;
    }

    .form-row[b-eepf1wnglf] {
        grid-template-columns: 1fr;
    }

    .button-row[b-eepf1wnglf] {
        flex-direction: column;
    }

    .btn[b-eepf1wnglf] {
        width: 100%;
    }

    table[b-eepf1wnglf] {
        font-size: 12px;
        table-layout: auto; /* ← Remove fixed em mobile */
    }

    /* Remove larguras fixas em mobile */
    thead th:nth-child(1)[b-eepf1wnglf],
    thead th:nth-child(2)[b-eepf1wnglf],
    thead th:nth-child(3)[b-eepf1wnglf],
    thead th:nth-child(4)[b-eepf1wnglf] {
        width: auto;
    }

    thead th[b-eepf1wnglf],
    tbody td[b-eepf1wnglf] {
        padding: 8px;
    }

    tbody td[b-eepf1wnglf] {
        white-space: normal; /* ← Permite quebra de linha em mobile */
    }

    .action-buttons[b-eepf1wnglf] {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .users-page[b-eepf1wnglf] {
        padding: 1rem;
    }

    h3[b-eepf1wnglf] {
        font-size: 20px;
    }
}