/* ============================================================================
   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;
    overflow-y: auto;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.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;
}

.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);
}

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

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

/* ============================================================================
   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%;
    }
}