/* ============================================================================
   ReduzziTech - Tema institucional
   Criado por Marco Aurelio em 16/07/2026
   Motivo: identidade visual azul da Reduzzi aplicada sobre o Bootstrap 5.

   ORIGEM DAS CORES: os valores abaixo sao os do prototipo PHP
   (startup/reduzzi_tech/assets/css/style.css). O prototipo NAO usa Bootstrap -
   e CSS proprio. Aqui a identidade dele foi portada para o Bootstrap, que e
   exigido pelo CLAUDE.md (secao 14.3).

   TECNICA: customizacao por override de CSS custom properties (--bs-*), sem
   recompilar o Sass. E a mesma tecnica do theme.css do InssObra, o que mantem
   o padrao da casa. O que muda em relacao ao InssObra e a paleta: la o acento
   e verde (--green-600 #099250); aqui e o azul da Reduzzi.

   O verde da Reduzzi (#22A63F) NAO e cor de acento: e reservado para o "TECH"
   do logotipo e para estados de sucesso, exatamente como no prototipo.
   ============================================================================ */

:root {
    /* ---- Paleta Reduzzi (valores exatos do prototipo) ---- */
    --azul-escuro: #001F4E;   /* sidebar, titulos de pagina */
    --azul: #003B82;          /* hover de botao primario, texto de badge */
    --azul-acao: #0057D9;     /* acao primaria: links, botoes, item ativo, foco */
    --verde: #22A63F;         /* logo "TECH", sucesso */
    --vermelho: #E53935;
    --laranja: #F59E0B;

    --fundo: #F7FAFF;
    --texto: #07142F;
    --texto-sec: #52627A;
    --borda: #D8E0EC;

    /* ---- Tons suaves (fundo de badge/alert/icone) ---- */
    --verde-suave: #E8F7EC;
    --verde-texto: #1B7F31;
    --vermelho-suave: #FDEAEA;
    --vermelho-texto: #C62828;
    --laranja-suave: #FEF3E2;
    --laranja-texto: #B45309;
    --azul-suave: #EEF4FF;

    /* ---- Neutros de apoio (literais do prototipo) ---- */
    --cinza-th: #FBFCFE;      /* fundo de cabecalho de tabela */
    --cinza-hover: #F9FBFF;   /* hover de linha de tabela */
    --cinza-linha: #EDF1F7;   /* borda inferior de celula, badge neutro */
    --cinza-placeholder: #9AA7BA;
    --cinza-vazio: #B9C4D4;   /* icone do estado vazio */

    /* ---- Metricas de layout ---- */
    --sidebar-largura: 264px;
    --topbar-altura: 64px;

    /* ---- Raios ---- */
    --raio: 14px;
    --raio-sm: 10px;

    /* ---- Sombras ---- */
    --sombra-1: 0 1px 3px rgba(7, 20, 47, 0.06), 0 1px 2px rgba(7, 20, 47, 0.04);
    --sombra-2: 0 8px 24px rgba(7, 20, 47, 0.12);

    /* ---- Tipografia: stack de sistema, igual ao prototipo ----
       O prototipo nao usa webfont. Mantido de proposito: nao ha download de
       fonte, nao ha dependencia de CDN do Google Fonts (o InssObra tem essa
       dependencia) e nao ha flash de texto sem estilo. */
    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

    /* ======================================================================
       OVERRIDES DO BOOTSTRAP
       Valores literais (e nao var()) porque o Bootstrap consome estas
       propriedades em contextos onde a indirecao nao resolve.
       ====================================================================== */
    --bs-primary: #0057D9;
    --bs-primary-rgb: 0, 87, 217;
    --bs-secondary: #52627A;
    --bs-secondary-rgb: 82, 98, 122;
    --bs-success: #22A63F;
    --bs-success-rgb: 34, 166, 63;
    --bs-danger: #E53935;
    --bs-danger-rgb: 229, 57, 53;
    --bs-warning: #F59E0B;
    --bs-warning-rgb: 245, 158, 11;
    --bs-info: #003B82;
    --bs-info-rgb: 0, 59, 130;

    --bs-body-bg: #F7FAFF;
    --bs-body-color: #07142F;
    --bs-border-color: #D8E0EC;
    --bs-link-color: #0057D9;
    --bs-link-hover-color: #003B82;
    --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                          "Helvetica Neue", Arial, sans-serif;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
}

/* ============================================================================
   1. BASE
   ============================================================================ */
body {
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.55;
    background: var(--fundo);
    color: var(--texto);
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.3;
}

strong {
    font-weight: 600;
}

::placeholder {
    color: var(--cinza-placeholder) !important;
}

/* Foco visivel e consistente em todo componente interativo (acessibilidade).
   O anel azul e o do prototipo: 0 0 0 3px rgba(0,87,217,0.14). */
.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.form-check-input:focus {
    border-color: var(--azul-acao);
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.14);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.14);
}

/* ============================================================================
   2. LOGOTIPO
   Wordmark "Reduzzi" + "TECH" em verde, como no prototipo.
   ============================================================================ */
.logo {
    display: inline-flex;
    align-items: baseline;
    text-decoration: none;
    gap: 2px;
}

.logo-nome {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #FFFFFF;
}

.logo-tech {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--verde);
}

/* Variante para fundo claro (telas publicas: login, pre-cadastro). */
.logo-dark .logo-nome {
    color: var(--azul-escuro);
}

/* ============================================================================
   3. LAYOUT: SIDEBAR / TOPBAR / CONTEUDO
   ============================================================================ */
.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-largura);
    background: var(--azul-escuro);
    display: flex;
    flex-direction: column;
    z-index: 60;
    transition: transform 0.25s ease;
}

.sidebar-logo {
    padding: 20px 20px 16px;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Firefox: barra fina e discreta sobre o azul escuro. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
    /* Esmaece o topo/base do menu quando ha conteudo alem da area visivel. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.sidebar-nav:hover,
.sidebar-nav:focus-within {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

/* WebKit/Blink: barra sobreposta, sem setas, visivel apenas no hover. */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

.sidebar-nav:hover::-webkit-scrollbar-thumb,
.sidebar-nav:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.28);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

.sidebar-nav::-webkit-scrollbar-button {
    display: none;
}

.nav-section-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 14px 10px 4px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--raio-sm);
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #FFFFFF;
}

/* Item ativo: fundo azul de acao + sombra, exatamente como o prototipo. */
.sidebar-link.active {
    background: var(--azul-acao);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 87, 217, 0.35);
}

.sidebar-user {
    padding: 12px;
}

.sidebar-user-card {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px;
}

.sidebar-user-perfil {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--verde);
}

.sidebar-user-nome {
    display: block;
    color: #FFFFFF;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-codigo {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
}

/* "Sair" e um <button> dentro de <form> POST (nunca link GET), por causa do
   CSRF: um GET que encerra sessao seria acionavel de fora por <img src>. */
.sidebar-sair {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sidebar-sair:hover {
    background: rgba(229, 57, 53, 0.35);
    color: #FFFFFF;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(7, 20, 47, 0.5);
    z-index: 55;
}

.main-wrap {
    margin-left: var(--sidebar-largura);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.25s ease;
}

.topbar {
    position: sticky;
    top: 0;
    height: var(--topbar-altura);
    background: #FFFFFF;
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    z-index: 50;
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--texto-sec);
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease;
}

.icon-btn:hover {
    background: var(--azul-suave);
    color: var(--azul-acao);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--azul-acao);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.topbar-user-info strong {
    display: block;
    font-size: 13.5px;
    line-height: 1.2;
}

.topbar-user-info small {
    font-size: 11.5px;
    color: var(--texto-sec);
}

.content {
    flex: 1;
    padding: 28px 32px 20px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

.app-footer {
    padding: 14px 32px;
    font-size: 12.5px;
    color: var(--texto-sec);
    border-top: 1px solid var(--borda);
}

/* ============================================================================
   4. CABECALHO DE PAGINA
   ============================================================================ */
.page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--azul-escuro);
    margin: 0;
}

.page-subtitle {
    font-size: 14.5px;
    color: var(--texto-sec);
    margin: 4px 0 0;
}

/* ============================================================================
   5. CARDS
   ============================================================================ */
.card {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
}

.card-title {
    font-size: 16.5px;
    font-weight: 700;
    margin: 0;
}

/* Card de indicador (KPI). Faixa lateral colorida, como no prototipo. */
.summary-card {
    border-left: 4px solid var(--azul-acao);
}

.summary-card.accent-verde    { border-left-color: var(--verde); }
.summary-card.accent-vermelho { border-left-color: var(--vermelho); }
.summary-card.accent-laranja  { border-left-color: var(--laranja); }
.summary-card.accent-cinza    { border-left-color: #7C8DA6; }

.summary-card-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--texto-sec);
}

.summary-card-valor {
    font-size: 22px;
    font-weight: 700;
    color: var(--azul-escuro);
}

.summary-card-extra {
    font-size: 12.5px;
    color: var(--texto-sec);
}

/* Circulo de destaque no topo dos cards de fluxo. */
.icone-destaque {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.icone-azul     { background: var(--azul-suave);     color: var(--azul-acao); }
.icone-verde    { background: var(--verde-suave);    color: var(--verde-texto); }
.icone-vermelho { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.icone-laranja  { background: var(--laranja-suave);  color: var(--laranja-texto); }

/* ============================================================================
   6. BADGES DE STATUS
   Recolorizacao dos badges do Bootstrap para os tons do prototipo.
   ============================================================================ */
.badge {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
}

.badge.bg-primary   { background: var(--azul-suave) !important;     color: var(--azul) !important; }
.badge.bg-success   { background: var(--verde-suave) !important;    color: var(--verde-texto) !important; }
.badge.bg-warning   { background: var(--laranja-suave) !important;  color: var(--laranja-texto) !important; }
.badge.bg-danger    { background: var(--vermelho-suave) !important; color: var(--vermelho-texto) !important; }
.badge.bg-secondary { background: var(--cinza-linha) !important;    color: var(--texto-sec) !important; }

/* ============================================================================
   7. TABELAS
   ============================================================================ */
.table > thead th {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--texto-sec);
    background: var(--cinza-th);
    white-space: nowrap;
}

.table > tbody td {
    font-size: 13.5px;
    border-bottom-color: var(--cinza-linha);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--cinza-hover);
}

/* Estado vazio da listagem. */
.empty-state {
    padding: 48px 16px;
    text-align: center;
    color: var(--texto-sec);
}

.empty-state .bi {
    font-size: 40px;
    color: var(--cinza-vazio);
    display: block;
    margin-bottom: 12px;
}

/* ============================================================================
   8. BOTOES
   ============================================================================ */
.btn {
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--raio-sm);
    padding: 10px 18px;
    white-space: nowrap;
}

.btn-sm {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
}

.btn-primary {
    --bs-btn-bg: #0057D9;
    --bs-btn-border-color: #0057D9;
    --bs-btn-hover-bg: #003B82;
    --bs-btn-hover-border-color: #003B82;
    --bs-btn-active-bg: #003B82;
    --bs-btn-active-border-color: #003B82;
    --bs-btn-disabled-bg: #0057D9;
    --bs-btn-disabled-border-color: #0057D9;
}

.btn-success {
    --bs-btn-bg: #22A63F;
    --bs-btn-border-color: #22A63F;
    --bs-btn-hover-bg: #1B8A33;
    --bs-btn-hover-border-color: #1B8A33;
}

.btn-danger {
    --bs-btn-bg: #E53935;
    --bs-btn-border-color: #E53935;
    --bs-btn-hover-bg: #C62828;
    --bs-btn-hover-border-color: #C62828;
}

.btn-outline-primary {
    --bs-btn-color: #0057D9;
    --bs-btn-border-color: #D8E0EC;
    --bs-btn-hover-bg: #0057D9;
    --bs-btn-hover-border-color: #0057D9;
}

/* ============================================================================
   9. FORMULARIOS
   ============================================================================ */
.form-label {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Asterisco de campo obrigatorio. */
.form-label .req {
    color: var(--vermelho);
    margin-left: 2px;
}

.form-control,
.form-select {
    font-size: 14.5px;
    border-radius: var(--raio-sm);
    border-color: var(--borda);
    padding: 9px 12px;
}

/* O padding acima esmagava o padding-right que o Bootstrap reserva para a
   seta do <select>: o texto encavalava no chevron (visto em /convites,
   varredura 28/07). Restaura a folga da seta. */
.form-select {
    padding-right: 2.25rem;
}

/* Wrapper de tabela SEM scroll horizontal (pedido do dono, 29/07 — tela
   Parâmetros de Remuneração). Diferente do .table-responsive do Bootstrap
   (overflow-x:auto, que no Windows exibe barra por 1px de estouro), aqui a
   tabela ocupa 100% e as células QUEBRAM linha; use somente em tabelas cujas
   colunas cabem na tela. */
.tabela-sem-scroll { width: 100%; overflow: visible; }
.tabela-sem-scroll table { width: 100%; }
.tabela-sem-scroll th,
.tabela-sem-scroll td { white-space: normal; word-break: break-word; }

/* PROIBIDO scroll horizontal em qualquer lista (decisao do dono, 29/07/2026:
   "em todas as listas nao quero que tenha scroll horizontal de forma
   nenhuma"). O .table-responsive do Bootstrap vira um wrapper neutro: a
   tabela e obrigada a caber na largura da tela e as celulas quebram linha.
   O text-nowrap dentro de tabela e neutralizado (senao a soma dos nowrap
   forca a tabela alem do container e o conteudo vazaria); datas e valores
   sem espaco continuam inteiros porque nao tem onde quebrar. */
.table-responsive { overflow-x: visible; }
.table-responsive > .table { width: 100%; }
.table-responsive th,
.table-responsive td { white-space: normal; word-break: break-word; }
.table-responsive .text-nowrap { white-space: normal !important; }

/* Excecao pontual ao wrap acima: celula que NAO pode partir no meio (numeros
   como o m2 viravam "200,0 / 0"). Vence o .text-nowrap neutralizado porque o
   conteudo e curto e nunca forca a largura da tabela. */
.table-responsive td.sem-quebra,
.table-responsive th.sem-quebra {
    white-space: nowrap !important;
    word-break: normal;
}

.form-hint {
    font-size: 12.5px;
    color: var(--texto-sec);
}

.form-error,
.invalid-feedback {
    font-size: 12.5px;
    color: var(--vermelho-texto);
}

/* Caixa de aceite (LGPD) do pre-cadastro. */
.check-box {
    background: var(--azul-suave);
    border: 1px solid #D5E3FA;
    border-radius: var(--raio-sm);
    padding: 14px;
}

/* ============================================================================
   10. ALERTAS / INFO
   ============================================================================ */
.alert {
    font-size: 14px;
    border-radius: var(--raio-sm);
}

.alert-info    { background: var(--azul-suave);     border-color: #D5E3FA; color: var(--azul); }
.alert-success { background: var(--verde-suave);    border-color: #C9EDD2; color: var(--verde-texto); }
.alert-danger  { background: var(--vermelho-suave); border-color: #F6C9C7; color: var(--vermelho-texto); }
.alert-warning { background: var(--laranja-suave);  border-color: #FBE3BC; color: var(--laranja-texto); }

.info-box {
    background: var(--azul-suave);
    border: 1px solid #D5E3FA;
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--azul);
}

/* ============================================================================
   11. TELAS PUBLICAS (login, pre-cadastro, credenciamento)
   ============================================================================ */
body.public-page {
    background: linear-gradient(165deg, #F7FAFF 0%, #EAF1FD 55%, #E1EBFB 100%);
    min-height: 100vh;
}

.public-topbar {
    padding: 22px 36px;
}

.public-footer {
    padding: 20px 36px;
    text-align: center;
    font-size: 12.5px;
    color: var(--texto-sec);
}

.card-login {
    max-width: 440px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: var(--sombra-2);
}

/* QR do link de aceite (/convites). A lib desenha um <canvas> (e um <img> de
   fallback); a moldura branca garante contraste mesmo sobre fundo colorido -
   leitor de QR falha quando o codigo encosta em area escura. */
.qr-aceite {
    background: #FFFFFF;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    line-height: 0;
}

.qr-aceite canvas,
.qr-aceite img {
    display: block;
}

/* Tela de aceite do cliente (/aceite): um pouco mais larga que a de login,
   porque traz o resumo do convite e a lista do que esta sendo autorizado. */
.card-aceite {
    max-width: 560px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: var(--sombra-2);
}

/* Resumo do convite (CPF mascarado e parceiro responsavel). */
.aceite-resumo {
    background: var(--cinza-th);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 4px 16px;
    font-size: 14.5px;
}

/* Selo LGPD sob o formulario. */
.texto-protecao {
    font-size: 12.5px;
    color: var(--texto-sec);
}

.texto-protecao .bi {
    color: var(--verde);
}

/* ----------------------------------------------------------------------------
   11.1 LOGIN EM DUAS COLUNAS

   Painel esquerdo institucional (azul escuro) + painel direito com o
   formulario. O painel esquerdo e 100% CSS: nao ha imagem raster de hero no
   projeto e o CLAUDE.md (secao 14.4) proibe puxar arte do dominio da Reduzzi
   em producao. Os "cards" flutuantes sao mock visual estatico - nao exibem
   dado real, porque a tela e publica.
   ---------------------------------------------------------------------------- */
body.login-page {
    background: #FFFFFF;
    min-height: 100vh;
    overflow-x: hidden;
}

.login-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* ---- Coluna institucional ---- */
.login-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 20% 0%, #013A7E 0%, rgba(1, 58, 126, 0) 60%),
        radial-gradient(80% 60% at 88% 104%, rgba(0, 87, 217, 0.55) 0%, rgba(0, 87, 217, 0) 60%),
        linear-gradient(160deg, #001B45 0%, #001F4E 45%, #00153A 100%);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 36px 48px 28px;
}

/* Malha discreta por cima do gradiente, para o azul nao ficar chapado. */
.login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(120% 100% at 50% 30%, #000 0%, transparent 75%);
    pointer-events: none;
}

.login-hero > * {
    position: relative;
    z-index: 1;
}

.login-hero .logo-nome {
    color: #FFFFFF;
}

.login-hero .logo-tech {
    color: var(--verde);
}

.login-hero-titulo {
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}

.login-hero-titulo .destaque {
    color: #4ADE80;
    display: block;
}

.login-hero-texto {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 34ch;
    margin: 0;
}


/* ---- Tres selos institucionais ---- */
.login-selos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.login-selo-icone {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #4ADE80;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.25);
}

.login-selo-titulo {
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 2px;
}

.login-selo-texto {
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ---- Coluna do formulario ---- */
.login-form-col {
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 32px;
}

/* Duas formas suaves nos cantos, para o branco nao ficar vazio. */
.login-form-col::before,
.login-form-col::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 90px;
    background: linear-gradient(140deg, rgba(0, 87, 217, 0.07), rgba(34, 166, 63, 0.06));
    transform: rotate(38deg);
    pointer-events: none;
}

.login-form-col::before {
    top: -150px;
    right: -110px;
}

.login-form-col::after {
    bottom: -170px;
    left: -130px;
}

.login-form-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.login-form-icone {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--azul-acao);
    background: var(--azul-suave);
    border: 1px solid #D5E3FA;
}

.login-form-titulo {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--azul-escuro);
    text-align: center;
    margin-bottom: 6px;
}

.login-form-sub {
    text-align: center;
    font-size: 14px;
    color: var(--texto-sec);
    margin-bottom: 28px;
}

/* Campo com icone fixo a esquerda (o icone nao e um botao). */
.login-campo {
    position: relative;
}

.login-campo .login-campo-icone {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--cinza-placeholder);
    pointer-events: none;
    /* Acima do 5 que o Bootstrap da ao .form-control focado dentro de
       .input-group - senao o fundo do campo cobre o icone no foco. */
    z-index: 6;
}

.login-campo .form-control {
    padding-left: 42px;
    height: 50px;
}

.login-campo .btn {
    border-color: var(--borda);
    color: var(--texto-sec);
}

.login-campo .btn:hover,
.login-campo .btn:focus {
    background: var(--azul-suave);
    border-color: var(--azul-acao);
    color: var(--azul-acao);
}

.login-form-box .btn-entrar {
    height: 52px;
    font-size: 15.5px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(0, 87, 217, 0.24);
}

/* Selo LGPD com filete dos dois lados. */
.login-rodape-selo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    color: var(--texto-sec);
    font-size: 12.5px;
}

.login-rodape-selo::before,
.login-rodape-selo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borda);
}

.login-rodape-selo .bi {
    color: var(--verde);
}

.login-copyright {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 12.5px;
    color: var(--texto-sec);
    margin: 40px 0 0;
}

/* Em telas menores o painel institucional sai de cena: em pe, ele empurraria
   o formulario para baixo da dobra. */
@media (max-width: 991.98px) {
    .login-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-hero {
        display: none;
    }

    .login-form-col {
        padding: 40px 20px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .login-hero {
        padding: 32px 32px 28px;
    }
}

/* ============================================================================
   12. RESPONSIVIDADE
   Breakpoints identicos aos do prototipo. O ponto de corte do menu e 1024px
   (o CSS usa max-width: 1023px e o JS usa innerWidth < 1024).
   ============================================================================ */
@media (max-width: 1023px) {
    .app-sidebar {
        transform: translateX(-100%);
    }

    .main-wrap {
        margin-left: 0;
    }

    /* Aberta no mobile: entra POR CIMA do conteudo, com backdrop. */
    body.sidebar-aberta .app-sidebar {
        transform: translateX(0);
    }

    body.sidebar-aberta .sidebar-backdrop {
        display: block;
    }
}

@media (min-width: 1024px) {
    /* Recolhida no desktop: esconde a sidebar e o conteudo ocupa a largura toda. */
    body.sidebar-recolhida .app-sidebar {
        transform: translateX(-100%);
    }

    body.sidebar-recolhida .main-wrap {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .content {
        padding: 20px 16px 16px;
    }

    .topbar {
        padding: 0 14px;
    }

    /* Sobra so o avatar. */
    .topbar-user-info {
        display: none;
    }

    .page-title {
        font-size: 21px;
    }
}

/* Respeita quem pediu menos animacao no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   13. LAYOUT DE FLUXO E DE LISTAGEM
   .center-col / .center-col-larga: telas de fluxo em coluna estreita
   (upload de documentos, analise divergente, credenciamento).
   .bloco-fixo: envolve filtros + cards de resumo nas listagens
   (Minhas Oportunidades, Financeiro, Desempenho Nacional, Correspondentes).
   ============================================================================ */
.center-col {
    max-width: 640px;
    margin: 0 auto;
}

/* Usada junto de .center-col na tela Indicar CCA. */
.center-col-larga {
    max-width: 760px;
}

/* Gruda o bloco de filtros abaixo da topbar ao rolar a listagem.
   O z-index 40 fica abaixo da topbar (50) de proposito: ao rolar, o bloco
   desliza POR BAIXO da topbar em vez de cobri-la. */
.bloco-fixo {
    position: sticky;
    top: var(--topbar-altura);
    z-index: 40;
    background: var(--fundo);
    padding-top: 6px;
    margin-top: -6px;
}

/* ============================================================================
   14. BARRA DE FILTROS
   Telas: Minhas Oportunidades, Financeiro, Desempenho Nacional, Correspondentes.
   ============================================================================ */
.filters-bar {
    background: #FFFFFF;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
    padding: 16px 18px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto auto auto auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 20px;
}

.filter-field {
    display: flex;
    flex-direction: column;
}

.filter-field .form-label {
    margin-bottom: 5px;
    font-size: 12.5px;
}

/* O prototipo usa .form-control tambem nos <select>; no Bootstrap o select e
   .form-select, entao a regra vale para os dois. */
.filter-field .form-control,
.filter-field .form-select {
    padding: 9px 12px;
    font-size: 13.5px;
}

/* Dentro da barra o campo com icone usa 40px (e nao os 42px da secao 15). */
.filter-field .input-icon .form-control {
    padding-left: 40px;
}

/* O Financeiro nao tem campo de busca: as 4 primeiras colunas encolhem e a
   sobra vai para a direita. */
.filters-bar-financeiro {
    grid-template-columns: auto auto auto auto 1fr;
}

/* ============================================================================
   15. CAMPOS COMPLEMENTARES
   .input-icon: busca das listagens e campos do credenciamento.
   .input-senha / .senha-toggle: login.
   .form-contador: observacoes da analise divergente e mensagem do convite.
   .check-group: aceite LGPD do pre-cadastro.
   ============================================================================ */
.input-icon {
    position: relative;
}

/* O prototipo usa SVG (.icon, 20x20); aqui o icone e fonte (Bootstrap Icons),
   entao o tamanho vem de font-size. */
.input-icon > .bi {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: var(--texto-sec);
    pointer-events: none;
}

.input-icon .form-control {
    padding-left: 42px;
}

/* No prototipo o login sempre combina .input-icon com .input-senha, e o
   position vem da primeira. Declarado aqui tambem para a classe funcionar
   sozinha: sem isso o .senha-toggle se ancoraria em outro elemento. */
.input-senha {
    position: relative;
}

.input-senha .form-control {
    padding-right: 46px;
}

.senha-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--texto-sec);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.senha-toggle:hover {
    background: var(--azul-suave);
    color: var(--azul-acao);
}

.form-contador {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--texto-sec);
    text-align: right;
}

.check-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--texto-sec);
    line-height: 1.5;
}

.check-group input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--azul-acao);
    flex-shrink: 0;
    cursor: pointer;
}

.check-group a {
    font-weight: 600;
}

.check-group a:hover {
    text-decoration: underline;
}

/* ============================================================================
   16. INFO-BOX DE AVISO
   Variante laranja do .info-box (secao 10). Tela: upload de documentos,
   bloco "Importante:".
   ============================================================================ */
.info-box-warning {
    background: var(--laranja-suave);
    border-color: #FBE3BC;   /* borda do laranja-suave; literal do prototipo */
    color: var(--laranja-texto);
}

.info-box-warning .bi {
    color: var(--laranja);
}

/* ============================================================================
   17. DRAWER (painel lateral de detalhe)
   Tela: Minhas Oportunidades - "Linha do Tempo do Processo".

   O equivalente no Bootstrap 5.3 e o .offcanvas, mas o drawer foi portado do
   prototipo em vez de reaproveitado: o offcanvas tem largura, backdrop, raio e
   animacao proprios, e trocar por ele mudaria a aparencia da tela. Aqui vale a
   fidelidade visual. Modal, dropdown e toast continuam sendo do Bootstrap.

   z-index: overlay 90 e painel 95, ou seja, acima da sidebar (60) e abaixo do
   modal do Bootstrap (1055) - um modal aberto sobre o drawer continua por cima.
   ============================================================================ */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 20, 47, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 90;
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Fechado: visibility hidden tira o conteudo da ordem de tabulacao (o foco nao
   cai dentro de um painel invisivel). O atraso de 0.25s no visibility espera a
   animacao de saida terminar antes de esconder. */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 94vw;
    background: #FFFFFF;
    box-shadow: var(--sombra-2);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    z-index: 95;
    display: flex;
    flex-direction: column;
}

.drawer.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}

.drawer-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* margin: 0 porque o titulo e um <h3> e o reboot do Bootstrap daria a ele um
   margin-bottom que desalinharia o header (o prototipo zera todo margin). */
.drawer-title {
    font-size: 16.5px;
    font-weight: 700;
    margin: 0;
}

/* Rola sozinho: o header e o footer ficam fixos. */
.drawer-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}

.drawer-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--borda);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.drawer-footer .btn {
    flex: 1;
}

/* ============================================================================
   18. LISTA DE DETALHE (dl / dt / dd)
   Telas: upload de documentos (Situacao, CPF do Cliente, Status) e suporte.
   Estrutura: <dl class="detalhe-lista"> > <div class="detalhe-item"> > dt + dd.
   ============================================================================ */
/* Os margin: 0 / margin-bottom: 0 daqui e do <dd> anulam o que o reboot do
   Bootstrap aplica a <dl> e <dd>. O prototipo nao precisa deles porque zera
   todo margin no reset; sem isso a lista ganharia folga que ele nao tem. */
.detalhe-lista {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.detalhe-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--borda);
    font-size: 13.5px;
}

.detalhe-item:last-child {
    border-bottom: none;
}

.detalhe-item dt {
    color: var(--texto-sec);
}

.detalhe-item dd {
    font-weight: 600;
    text-align: right;
    margin-bottom: 0;
}

/* ============================================================================
   19. LINHA DO TEMPO DO PROCESSO
   Tela: drawer de Minhas Oportunidades. Sao sempre 5 etapas, cada uma em um
   dos 4 estados: done, atual, falha ou pendente.
   ============================================================================ */
.timeline {
    padding: 4px 0 0 4px;
}

.timeline-item {
    position: relative;
    padding: 0 0 24px 38px;
}

/* O fio de 2px que liga um ponto ao proximo. */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: 2px;
    width: 2px;
    background: var(--borda);
}

.timeline-item:last-child {
    padding-bottom: 4px;
}

/* A ultima etapa nao liga a nada. */
.timeline-item:last-child::before {
    display: none;
}

.timeline-ponto {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cinza-linha);
    border: 2px solid var(--borda);
    color: var(--texto-sec);
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-ponto .bi {
    font-size: 12px;
    line-height: 1;
}

.timeline-item strong {
    display: block;
    font-size: 13.5px;
}

.timeline-item p {
    font-size: 12.5px;
    color: var(--texto-sec);
    margin: 1px 0 0;
}

.timeline-data {
    display: block;
    font-size: 11.5px;
    color: var(--texto-sec);
    margin-top: 3px;
}

.timeline-item.done .timeline-ponto {
    background: var(--verde-suave);
    border-color: var(--verde);
    color: var(--verde-texto);
}

/* Etapa corrente: o halo de 4px e o que a destaca das demais. */
.timeline-item.atual .timeline-ponto {
    background: var(--azul-suave);
    border-color: var(--azul-acao);
    color: var(--azul-acao);
    box-shadow: 0 0 0 4px rgba(0, 87, 217, 0.12);
}

.timeline-item.falha .timeline-ponto {
    background: var(--vermelho-suave);
    border-color: var(--vermelho);
    color: var(--vermelho-texto);
}

/* Pendente nao tem ponto proprio: herda o cinza padrao e esmaece o item. */
.timeline-item.pendente {
    opacity: 0.75;
}

/* ============================================================================
   20. PASSOS (wizard)
   O prototipo declara este componente mas nenhuma pagina dele o renderiza.
   Portado para o wizard das telas de fluxo (nova oportunidade, credenciamento).
   ============================================================================ */
.steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--azul-suave);
    color: var(--azul-acao);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step.done .step-num {
    background: var(--verde-suave);
    color: var(--verde-texto);
}

.step-texto {
    font-size: 13.5px;
}

.step-texto strong {
    display: block;
    font-size: 14px;
}

.step-texto small {
    color: var(--texto-sec);
}

/* ============================================================================
   21. UPLOAD DE DOCUMENTOS
   Tela: upload de documentos (4 obrigatorios + SCPO opcional).
   Estados: neutro (pendente, icone vermelho), .ok (anexado) e .divergente.
   ============================================================================ */
.upload-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.upload-item {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--borda);
    border-radius: 12px;   /* literal do prototipo: entre --raio-sm e --raio */
    padding: 15px 18px;
    transition: border-color 0.15s ease, background 0.15s ease;
    flex-wrap: wrap;
}

/* No estado inicial o icone e VERMELHO: sinaliza documento pendente. */
.upload-item-icone {
    width: 44px;
    height: 44px;
    border-radius: var(--raio-sm);
    background: var(--vermelho-suave);
    color: var(--vermelho);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

.upload-item-info {
    flex: 1;
    min-width: 200px;
}

.upload-item-info strong {
    display: block;
    font-size: 14px;
}

.upload-item-hint {
    display: block;
    font-size: 12.5px;
    color: var(--texto-sec);
    margin-top: 1px;
}

/* Motivo da divergencia daquele documento. */
.upload-item-motivo {
    display: block;
    font-size: 12.5px;
    color: var(--vermelho-texto);
    margin-top: 2px;
}

/* Chip com o nome do arquivo anexado. Nasce com o atributo hidden; o reboot do
   Bootstrap ja aplica [hidden]{display:none!important}, por isso nao ha regra
   .upload-item-arquivo[hidden] aqui (o prototipo precisa dela porque nao usa
   Bootstrap). Nome longo e truncado com reticencias. */
.upload-item-arquivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--verde-texto);
    background: var(--verde-suave);
    border-radius: 999px;
    padding: 3px 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-item-acao {
    flex-shrink: 0;
}

/* Anexado e valido. */
.upload-item.ok {
    border-color: #C9EDD2;   /* borda do verde-suave; literal do prototipo */
    background: #FBFEFC;     /* branco esverdeado; literal do prototipo */
}

.upload-item.ok .upload-item-icone {
    background: var(--verde-suave);
    color: var(--verde);
}

/* Documento marcado como divergente na analise. */
.upload-item.divergente {
    border-color: #F6C9C7;   /* borda do vermelho-suave; literal do prototipo */
    background: #FFFDFC;     /* branco avermelhado; literal do prototipo */
}

/* .upload-item.opcional (SCPO) e marcador semantico, SEM regra visual: existe
   para o servidor e o script saberem que o item nao entra na obrigatoriedade.
   O que o usuario ve de "opcional" e o badge e o hint. Assim no prototipo. */

/* Esconde o <input type="file"> SEM display:none, de proposito: o campo
   continua focavel pelo teclado e o <label> continua acionando o seletor. */
.input-arquivo {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* ============================================================================
   22. LISTA DE DIVERGENCIAS
   Tela: analise concluida com divergencias. A lista mistura itens de erro
   (icone vermelho) com itens positivos (.diverg-icone.ok, icone verde).
   ============================================================================ */
.diverg-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px dashed var(--borda);
}

.diverg-item:last-child {
    border-bottom: none;
}

.diverg-icone {
    width: 34px;
    height: 34px;
    border-radius: var(--raio-sm);
    background: var(--vermelho-suave);
    color: var(--vermelho);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.diverg-icone.ok {
    background: var(--verde-suave);
    color: var(--verde);
}

.diverg-item strong {
    display: block;
    font-size: 14px;
}

.diverg-item p {
    font-size: 13px;
    color: var(--texto-sec);
    margin: 1px 0 0;
}

/* ============================================================================
   23. DOCUMENTOS RECEBIDOS
   Tela: analise aprovada. Nome do documento a esquerda e o status a direita.
   ============================================================================ */
.doc-check-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.doc-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    font-size: 13.5px;
    font-weight: 500;
}

.doc-check .doc-check-nome {
    display: flex;
    align-items: center;
    gap: 10px;
}

.doc-check .doc-check-nome .bi {
    color: var(--texto-sec);
}

/* ============================================================================
   24. SELECT DE STATUS NA LINHA DA TABELA
   Telas: Minhas Oportunidades (is-info = aguardando docs, is-warning = ass.
   financ. pend., is-success = assinado, is-danger = negado) e Correspondentes
   (is-success = ativo, is-danger = inativo).
   ============================================================================ */
.table-select {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    font-size: 12.5px;
    font-weight: 600;
    background: #FFFFFF;
    color: var(--texto);
    cursor: pointer;
    max-width: 200px;
}

/* O prototipo so faz outline:none aqui, o que deixa o foco quase invisivel.
   Mantido o anel azul padrao do projeto (secao 1) porque o select e operavel
   por teclado e precisa de foco visivel. */
.table-select:focus {
    outline: none;
    border-color: var(--azul-acao);
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.14);
}

.table-select.is-warning {
    background: var(--laranja-suave);
    color: var(--laranja-texto);
    border-color: #FBE3BC;   /* borda do laranja-suave; literal do prototipo */
}

.table-select.is-success {
    background: var(--verde-suave);
    color: var(--verde-texto);
    border-color: #C9EDD2;   /* borda do verde-suave; literal do prototipo */
}

.table-select.is-danger {
    background: var(--vermelho-suave);
    color: var(--vermelho-texto);
    border-color: #F6C9C7;   /* borda do vermelho-suave; literal do prototipo */
}

.table-select.is-info {
    background: var(--azul-suave);
    color: var(--azul);
    border-color: #D5E3FA;   /* borda do azul-suave; literal do prototipo */
}

/* ============================================================================
   25. CABECALHO DE TABELA ORDENAVEL
   Tela: Correspondentes (as 8 colunas ordenam por clique).
   A seta e preenchida por texto (triangulo para cima/para baixo) e fica vazia
   nas colunas que nao sao a ordenada.
   ============================================================================ */
.th-ordenavel {
    cursor: pointer;
    user-select: none;
}

.th-ordenavel:hover,
.th-ordenavel.ativa {
    color: var(--azul-acao);
}

.th-ordenavel .th-seta {
    font-size: 9px;
}

/* ============================================================================
   26. GRAFICO DE BARRAS VERTICAIS
   Telas: Financeiro (evolucao dos ganhos) e Desempenho Nacional (evolucao dos
   ganhos ANCCA). Uma coluna por mes do periodo.

   A ALTURA de cada barra e inline (style="height:NNpx"), calculada pelo
   servidor/script como proporcao do maior mes do periodo, com piso de 3px para
   o mes sem movimento continuar visivel. A escala e relativa ao periodo
   filtrado: nao ha eixo Y nem linhas de grade.
   ============================================================================ */
.chart-scroll {
    overflow-x: auto;
}

/* align-items: flex-end e o que faz as barras crescerem de baixo para cima. */
.chart-barras {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-width: 560px;
    padding-top: 6px;
}

.chart-coluna {
    flex: 1;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.chart-valor {
    font-size: 11px;
    font-weight: 700;
    color: var(--azul);
    margin-bottom: 5px;
    white-space: nowrap;
}

.chart-barra {
    width: 100%;
    max-width: 44px;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, var(--azul-acao) 0%, var(--azul) 100%);
    transition: height 0.25s ease;
}

/* Escala de calor. #2FBF4F, #5D8FE0, #4571BE, #A9C3EC e #E3EAF4 sao literais
   do prototipo (tons intermediarios do gradiente, sem variavel na paleta). */
.chart-barra.melhor {
    background: linear-gradient(180deg, #2FBF4F 0%, var(--verde) 100%);
}

/* Repete o gradiente padrao de proposito: deixa a faixa "alto" explicita. */
.chart-barra.alto {
    background: linear-gradient(180deg, var(--azul-acao) 0%, var(--azul) 100%);
}

.chart-barra.medio {
    background: linear-gradient(180deg, #5D8FE0 0%, #4571BE 100%);
}

.chart-barra.baixo {
    background: #A9C3EC;
}

.chart-barra.zero {
    background: #E3EAF4;
}

/* A coluna do melhor mes tambem pinta o valor de verde. */
.chart-coluna.calor-melhor .chart-valor {
    color: var(--verde-texto);
}

.chart-rotulo {
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--texto-sec);
    white-space: nowrap;
}

.chart-qtd {
    font-size: 10.5px;
    color: var(--texto-sec);
    white-space: nowrap;
}

.chart-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--borda);
    font-size: 12px;
    color: var(--texto-sec);
}

.chart-legenda span {
    display: inline-flex;
    align-items: center;
}

/* Os pontos da legenda usam cor chapada; as barras usam gradiente. */
.chart-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 6px;
}

.chart-dot.dot-melhor { background: var(--verde); }
.chart-dot.dot-alto   { background: var(--azul-acao); }
.chart-dot.dot-medio  { background: #5D8FE0; }
.chart-dot.dot-baixo  { background: #A9C3EC; }
.chart-dot.dot-zero   { background: #E3EAF4; }

/* ============================================================================
   27. BARRAS HORIZONTAIS POR REGIAO
   Tela: Desempenho Nacional (portal ANCCA). Cada barra e clicavel e funciona
   como filtro de regiao: clicar aplica, clicar na regiao ja filtrada remove.

   A LARGURA do preenchimento e inline (style="width:NN%") e e relativa a MAIOR
   regiao (a lider desenha 100%) - nao e a participacao percentual, que aparece
   escrita no cabecalho da barra.
   ============================================================================ */
.barras-h {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.barra-h-item {
    cursor: pointer;
    padding: 8px 10px;
    border-radius: var(--raio-sm);
    transition: background 0.15s ease, opacity 0.15s ease;
}

.barra-h-item:hover {
    background: var(--azul-suave);
}

/* Regiao filtrada no momento. */
.barra-h-item.ativa {
    background: var(--azul-suave);
    box-shadow: inset 0 0 0 1px #D5E3FA;   /* borda do azul-suave; literal do prototipo */
}

/* Demais regioes quando ha filtro ativo: esmaecidas, mas ainda clicaveis. */
.barra-h-item.desativada {
    opacity: 0.45;
}

.barra-h-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 6px;
}

.barra-h-cabecalho strong {
    font-size: 13.5px;
}

.barra-h-cabecalho .text-muted {
    font-size: 12.5px;
}

.barra-h-trilha {
    height: 10px;
    background: var(--cinza-linha);
    border-radius: 999px;
    overflow: hidden;
}

.barra-h-preenchimento {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--azul-acao), var(--azul));
    transition: width 0.3s ease;
}

/* Regiao lider do periodo. */
.barra-h-preenchimento.melhor {
    background: linear-gradient(90deg, #2FBF4F, var(--verde));   /* literal do prototipo */
}

/* ============================================================================
   28. TELA DE CONCLUSAO
   Tela: cadastro concluido (analise aprovada). Card estreito centralizado com o
   valor do potencial de ganho em destaque.
   ============================================================================ */
.card-conclusao {
    width: 100%;
    max-width: 460px;
}

.conclusao-titulo {
    font-size: 26px;
    color: var(--azul-escuro);
    margin-bottom: 6px;
}

.ganho-destaque {
    background: var(--verde-suave);
    border: 1px solid #C9EDD2;   /* borda do verde-suave; literal do prototipo */
    border-radius: var(--raio);
    padding: 18px 20px;
    margin: 22px 0;
}

.ganho-destaque-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--verde-texto);
}

.ganho-destaque strong {
    display: block;
    font-size: 38px;
    font-weight: 700;
    color: var(--verde-texto);
    line-height: 1.2;
    margin-top: 2px;
}

/* ============================================================================
   29. INDICACAO DE CCA
   Telas: Indicar CCA (portal ANCCA) e Nova Oportunidade (link de pre-cadastro).
   ============================================================================ */
/* white-space: pre-wrap e o que faz a linha em branco entre o texto pessoal e
   a mensagem padrao aparecer, mesmo o conteudo saindo escapado com <c:out>. */
.convite-previa {
    background: #FBFCFE;   /* branco-gelo do prototipo (mesmo tom do --cinza-th) */
    border: 1px dashed var(--borda);
    border-radius: var(--raio-sm);
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--texto-sec);
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Link somente leitura + botao copiar lado a lado. */
.link-compartilhar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.link-compartilhar .form-control {
    flex: 1;
    min-width: 220px;
    background: #FBFCFE;   /* branco-gelo do prototipo (mesmo tom do --cinza-th) */
    color: var(--texto-sec);
    font-size: 13px;
}

/* ============================================================================
   30. RESPONSIVIDADE DOS COMPONENTES DAS SECOES 13 A 29
   Mesmos pontos de corte da secao 12. O 1180px e do proprio prototipo e existe
   so para a barra de filtros: com 6 colunas ela aperta antes de 1023px.
   ============================================================================ */
@media (max-width: 1180px) {
    .filters-bar,
    .filters-bar-financeiro {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .filters-bar,
    .filters-bar-financeiro {
        grid-template-columns: 1fr;
    }

    /* Sticky no mobile roubaria altura demais da tela. */
    .bloco-fixo {
        position: static;
        padding-top: 0;
        margin-top: 0;
    }

    /* O botao de anexar passa a ocupar a linha inteira. */
    .upload-item {
        align-items: flex-start;
    }

    .upload-item-acao,
    .upload-item-acao .btn {
        width: 100%;
    }
}

/* ============================================================================
   31. PARAMETROS DE REMUNERACAO (configuracao/remuneracao.jsp)
   Alterado por Marco Aurelio em 23/07/2026.
   Motivo: a tela tinha cinco blocos empilhados com formulario colado na
   tabela. Agora ha navegacao por ancoras (pilulas), chip de icone no
   cabecalho de cada card, faixa "form-inclusao" que separa visualmente o
   formulario da listagem e callout suave para o valor vigente.
   ============================================================================ */

/* Pilulas de navegacao entre os blocos. Sao ancoras (nao abas): apos um POST
   com erro a pagina inteira recarrega e uma aba escondida engoliria o campo
   invalido; a ancora so rola ate o card. */
.nav-remuneracao {
    gap: 8px;
}

.nav-remuneracao .nav-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--azul-acao);
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 6px 14px;
    white-space: nowrap;
}

.nav-remuneracao .nav-link:hover,
.nav-remuneracao .nav-link:focus {
    background: var(--azul-suave);
    border-color: var(--azul-acao);
    color: var(--azul);
}

/* A topbar fixa cobriria o comeco do card ao navegar pela ancora. */
.bloco-remuneracao {
    scroll-margin-top: calc(var(--topbar-altura) + 20px);
}

/* Chip de icone no cabecalho do card (versao 34px do .icone-destaque). */
.card-icon-chip {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--raio-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--azul-suave);
    color: var(--azul-acao);
}

/* Faixa do formulario de inclusao, separada da tabela pelo fundo e borda. */
.form-inclusao {
    background: var(--cinza-th);
    border-top: 1px solid var(--borda);
    border-radius: 0 0 var(--raio) var(--raio);
}

.form-inclusao-titulo {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--texto-sec);
    margin: 0 0 12px;
}

/* Callout do valor vigente (resumo "Vigente: ..."), mais suave que alert. */
.callout-vigente {
    background: var(--azul-suave);
    border-left: 4px solid var(--azul-acao);
    border-radius: var(--raio-sm);
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--azul-escuro);
}

/* ============================================================================
   32. REPASSES + MINHA AREA (repasse/*.jsp e minha-area/minha-area.jsp)
   Criado por Marco Aurelio em 23/07/2026.
   Motivo: (a) "Minha Area" do Afiliado/Associacao (fusao de oportunidades +
   financeiro + repasses em abas, decisao de 23/07/2026), mobile-first -
   pilulas grandes de navegacao e card destaque escuro com o proximo repasse
   ("quando e quanto") em fonte grande; (b) tela de confirmacao do admin com
   o split como heroi - um card por recebedor + barra proporcional; (c) linha
   do tempo do historico no detalhe. Reusa exclusivamente a paleta.
   ============================================================================ */

/* --- Pilulas grandes da Minha Area (minha-area.jsp) ---
   Abas Bootstrap (tab-content ja carregado no request). No celular a fileira
   NAO quebra: rola na horizontal, padrao de app mobile. */
.nav-minha-area {
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.nav-minha-area::-webkit-scrollbar {
    display: none;
}

.nav-minha-area .nav-link {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--azul-acao);
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 10px 18px;
    white-space: nowrap;
}

.nav-minha-area .nav-link:hover,
.nav-minha-area .nav-link:focus {
    background: var(--azul-suave);
    border-color: var(--azul-acao);
    color: var(--azul);
}

.nav-minha-area .nav-link.active {
    background: var(--azul-acao);
    border-color: var(--azul-acao);
    color: #fff;
}

/* --- Card destaque do proximo repasse (painel Repasses da Minha Area) --- */
.repasse-hero {
    background: linear-gradient(135deg, var(--azul-escuro), var(--azul));
    color: #fff;
    border: 0;
    border-radius: var(--raio);
}

.repasse-hero .card-body {
    padding: 22px 20px;
}

.repasse-hero-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Fonte grande e fluida: legivel no celular sem estourar o card. */
.repasse-hero-valor {
    font-size: clamp(34px, 9vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.repasse-hero-extra {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
}

/* Valor dos dois cards-resumo (A receber / Recebido no mes). */
.repasse-resumo-valor {
    font-size: clamp(19px, 5vw, 24px);
    font-weight: 800;
    color: var(--azul-escuro);
    line-height: 1.2;
}

/* Utilitario ausente no Bootstrap 5: filho flex so trunca (text-truncate)
   quando o container pode encolher abaixo do conteudo. */
.min-w-0 {
    min-width: 0;
}

/* Lista enxuta (repasses e oportunidades da Minha Area):
   data - cliente - valor - badge. */
.lista-meus-repasses .list-group-item {
    padding: 14px 16px;
}

.lista-meus-repasses .repasse-item-valor {
    font-size: 16px;
    font-weight: 700;
    color: var(--azul-escuro);
    white-space: nowrap;
}

/* --- Heroi do split na confirmacao (repasse-confirmar.jsp) --- */

/* Um card por recebedor, com filete superior na cor do papel. */
.split-card {
    border-top: 4px solid var(--borda);
    height: 100%;
}

.split-card-afiliado {
    border-top-color: var(--verde);
}

.split-card-associacao {
    border-top-color: var(--laranja);
}

.split-card-reduzzi {
    border-top-color: var(--azul-acao);
}

.split-card-valor {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 800;
    color: var(--azul-escuro);
    line-height: 1.15;
}

/* Barra proporcional da divisao (largura via style="width:...%"). */
.split-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--cinza-linha);
}

.split-seg-afiliado {
    background: var(--verde);
}

.split-seg-associacao {
    background: var(--laranja);
}

.split-seg-reduzzi {
    background: var(--azul-acao);
}

/* Bolinha da legenda da barra. */
.split-legenda-cor {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
}

/* --- Linha do tempo do historico (repasse-detalhes.jsp) --- */
.timeline-simples {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.timeline-simples li {
    position: relative;
    padding: 12px 20px 12px 60px;
}

/* Fio vertical ligando os eventos. */
.timeline-simples li::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--cinza-linha);
}

.timeline-simples li:first-child::before {
    top: 22px;
}

.timeline-simples li:last-child::before {
    bottom: auto;
    height: 22px;
}

/* Chip de icone do evento, por cima do fio. */
.timeline-icone {
    position: absolute;
    left: 19px;
    top: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--azul-suave);
    color: var(--azul-acao);
    border: 2px solid #fff;
    z-index: 1;
}

.timeline-quando {
    font-size: 12px;
    color: var(--texto-sec);
}

/* ============================================================================
   33. WHATSAPP NO MENU DO PERFIL (include/topbar.jsp + js/whatsapp-topbar.js)
   Criado por Marco Aurelio em 24/07/2026.
   Motivo: decisao do dono do projeto em 24/07/2026 - a tela /meu-whatsapp
   morreu; o status da conexao do Afiliado vive num bloco do dropdown do
   perfil (busca lazy ao abrir) e o pareamento por QR acontece num modal
   Bootstrap, sem tirar o usuario da tela. Aqui ficam so a bolinha de status
   e os ajustes de largura do bloco - o resto e Bootstrap puro.
   ============================================================================ */

/* O dropdown do perfil e estreito; o texto "Conectado como Fulano (+55...)"
   precisa de folga sem estourar em telas pequenas. */
.wapp-menu-bloco {
    min-width: 250px;
    max-width: 320px;
}

.wapp-menu-bloco #wappTexto {
    line-height: 1.35;
    word-break: break-word;
}

/* Bolinha de status (verde conectado / cinza desconectado / vermelho erro). */
.wapp-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7C8DA6;               /* cinza padrao (mesmo do accent-cinza) */
}

.wapp-dot-verde    { background: var(--verde); }
.wapp-dot-cinza    { background: #7C8DA6; }
.wapp-dot-vermelho { background: var(--vermelho); }
/* Amarelo: estado transitorio (aguardando leitura do QR, sessao iniciando).
   Acrescentado em 31/07/2026 com o card do WhatsApp da administracao - o modal
   do Afiliado nao precisava dele porque so distinguia conectado/desconectado. */
.wapp-dot-amarelo  { background: var(--laranja); }

/* Moldura do QR no modal: fundo branco fixo (QR precisa de contraste). */
.wapp-qr-moldura {
    line-height: 0;
}