/*=====================================================
  CARTEIRA INTELIGENTE — v25 (evolução)

  Módulo criado v24 (2026-07-18): consolida a carteira por modalidade
  (Tipo + Participantes, nunca por Grupo) e mostra como as cotas estão
  distribuídas ao longo da numeração. Reaproveita ao máximo o que já
  existe — cartão base e cartões coloridos de resumo
  (.card/.dash-card/.dash-card--*, css/cards.css e css/dashboard.css),
  toggle de Tipo no header (.tipo-toggle/.status-btn, já usado em
  Assembleias), aviso azul (.info-card, css/comissoes.css), lista de
  sorteios (.numero-sorteado-linha/.seta, css/assembleias.css) e o
  padrão de barra de progresso (.parcelas-bar/.parcelas-bar-fill,
  css/comissoes.css). Só o que é genuinamente novo (filtro de
  modalidade, lista de faixas com barra própria e o "mapa" da
  modalidade) ganha CSS aqui.

  Evolução v25 (pedido do usuário): Diagnóstico da Carteira, badges de
  classificação de Cobertura/Concentração e Resumo da Modalidade — só
  reaproveitando componentes já existentes (.badge, css/comissoes.css;
  paleta de níveis de css/assembleias.css) e a mesma tipografia de
  rótulo já usada em .dash-card (css/dashboard.css). Nenhuma cor nova,
  nenhuma mudança de tipografia geral.

  Evolução v26 (pedido do usuário): indicador de situação geral
  (.carteira-dot, variantes de cor novas reaproveitando hex já usados
  no projeto), escala visual de 5 blocos pra Cobertura/Concentração
  (removida na v30, a pedido do usuário), 4º card "Índice GCA"
  (.dash-card--roxo, já existente em css/dashboard.css, nunca usado
  neste módulo), blocos "Pontos Fortes"/"Pontos de Atenção"
  (substituídos na v31 pelos blocos horizontais .diagnostico-bloco,
  mockup aprovado pelo usuário) e botão de Ajuda no header (.carteira-botao-ajuda,
  modelado em .card-tooltip) que abre o modal #modalAjudaCarteira —
  reaproveitando 100% o CSS de modal já existente
  (css/comissoes.css:867-1050). Nenhuma cor nova, nenhuma mudança de
  tipografia geral, sidebar ou paleta do sistema.

  Remoção v29 (pedido do usuário): a seção "Resumo da Modalidade" (v25)
  saiu da tela — números redundantes com os cards de resumo/cabeçalho.
  Removidas .carteira-resumo-grid/.carteira-resumo-item. Última
  evolução planejada deste módulo — daqui em diante só
  revalidação/testes.
=====================================================*/

.carteira-filtros{

    display:flex;
    align-items:flex-end;
    gap:20px;
    flex-wrap:wrap;

    margin-bottom:22px;

}

.carteira-filtros .form-group{

    min-width:260px;

}

.carteira-vazio{

    background:white;
    border-radius:16px;
    padding:40px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    color:#888;

}

.carteira-cards{

    margin-bottom:25px;

}

.carteira-secao{

    margin-bottom:22px;

}

.carteira-secao-titulo{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:6px;

}

.carteira-secao-titulo i{

    width:19px;
    height:19px;
    color:#8B0000;

}

.carteira-secao-titulo h3{

    font-size:17px;

}

/* ---- Diagnóstico da Carteira ----
   Texto gerado por regra simples (montarDiagnosticoCarteira,
   js/carteira-inteligente.js) — cada frase vira um parágrafo. Sem
   componente novo, só tipografia legível dentro do .carteira-secao já
   existente.

   Compactado na v30 (pedido do usuário: "ficou muito grande — deixar
   igual os outros cards, só que um pouco maior"): padding e tipografia
   próximos dos .dash-card (12px 16px, ver css/dashboard.css), só um
   degrau acima — o card continua de largura cheia, mas com a mesma
   densidade visual dos cards de resumo. */
.card.carteira-diagnostico{

    padding:16px 20px;

}

.carteira-diagnostico .carteira-secao-titulo{

    margin-bottom:4px;

}

.carteira-diagnostico .carteira-secao-titulo i{

    width:17px;
    height:17px;

}

.carteira-diagnostico .carteira-secao-titulo h3{

    font-size:15.5px;

}

.carteira-diagnostico p{

    font-size:13.5px;
    color:#333;
    line-height:1.5;

    margin-bottom:2px;

}

.carteira-diagnostico p:last-child{

    margin-bottom:0;

}

/* ---- Blocos horizontais do Diagnóstico (layout v31) ----
   Linha de blocos lado a lado (Cobertura, Maior concentração,
   Ausências e recomendações — mockup aprovado pelo usuário), com
   divisória entre eles e quebra de linha em telas estreitas. Todos os
   valores/badges são dinâmicos (renderizarDiagnosticoCarteira,
   js/carteira-inteligente.js) — reaproveitam .badge-nivel-1..5 abaixo
   e as mesmas cores de ícone já usadas no módulo. */
.diagnostico-blocos{

    display:flex;
    flex-wrap:wrap;

    margin-top:8px;

}

.diagnostico-bloco{

    display:flex;
    align-items:flex-start;
    gap:10px;

    flex:1 1 180px;

    padding:6px 18px 6px 0;
    margin-right:18px;

    border-right:1px solid #f0f0f0;

}

.diagnostico-bloco:last-child{

    border-right:none;
    margin-right:0;
    padding-right:0;

}

.diagnostico-bloco-icone{

    width:22px;
    height:22px;
    flex-shrink:0;
    margin-top:2px;

}

.diagnostico-bloco-icone--verde{ color:#0b7d38; }
.diagnostico-bloco-icone--laranja{ color:#ea580c; }
.diagnostico-bloco-icone--vermelho{ color:#c62828; }
.diagnostico-bloco-icone--azul{ color:#2563eb; }

.diagnostico-bloco-conteudo{

    display:flex;
    flex-direction:column;
    gap:3px;

}

.diagnostico-bloco-titulo{

    font-size:11.5px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:#555;

}

.diagnostico-bloco-valor{

    font-size:14.5px;
    color:#222;
    line-height:1.35;

}

.diagnostico-bloco-valor--azul{ color:#2563eb; }
.diagnostico-bloco-valor--laranja{ color:#ea580c; }

/* ---- Lista de faixas do bloco "Ausências" (correção v31) ----
   Antes, cada faixa vinha empilhada verticalmente dentro do
   .diagnostico-bloco-conteudo (flex-direction:column) — com mais de 3
   faixas vazias, a lista só crescia pra baixo e "empurrava" a altura
   do card inteiro. Grid de 2 colunas: preenche 2 e 2 (como pedido),
   crescendo em largura controlada em vez de puxar o card pra baixo. */
.diagnostico-bloco-lista{

    display:grid;
    grid-template-columns:repeat(2,auto);
    column-gap:14px;
    row-gap:2px;

}

.diagnostico-bloco-apoio{

    font-size:12.5px;
    color:#777;
    line-height:1.45;

}

.diagnostico-bloco .badge{

    align-self:flex-start;

}

/* ---- Badges de classificação (Cobertura/Concentração) ----
   Reaproveita a base .badge já existente (css/comissoes.css) e a mesma
   paleta de 5 níveis já usada em Assembleias
   (.badge-contemplada/.badge-muito-proxima/.badge-proxima/.badge-media/
   .badge-distante, css/assembleias.css) e o vermelho de .badge-cancelado
   (css/comissoes.css) — nenhuma cor nova. Nomeado por nível (não pelo
   nome da métrica) pra servir tanto Cobertura quanto Concentração sem
   duplicar CSS entre as duas escalas. Nível 1 é sempre o melhor
   resultado, nível 5 o pior. */
.badge-nivel-1{ background:#0b7d38; color:#fff; }
.badge-nivel-2{ background:#dff5e5; color:#0b7d38; }
.badge-nivel-3{ background:#fff6d6; color:#8a6d00; }
.badge-nivel-4{ background:#ffe3c7; color:#b35a00; }
.badge-nivel-5{ background:#fde3e3; color:#c62828; }

/* Dentro do .dash-card, o badge fica entre o valor (h2) e o card-chip —
   sem isto, herdaria align-items:stretch de .card-content (flex coluna)
   e ocuparia a largura inteira do card. Mesmo tipo de ajuste escopado
   que .dash-card .card-chip já faz (css/dashboard.css). */
.dash-card .card-content .badge{

    align-self:flex-start;
    margin-bottom:8px;

}

/* ---- Indicador de situação geral (evolução v26) ----
   Dot colorido + rótulo no cabeçalho do Diagnóstico — reaproveita a
   base .carteira-dot já existente (css/comissoes.css:198), só com 4
   variantes de cor novas. Nenhuma cor nova de verdade: os 4 tons já
   existem no projeto (.carteira-dot--ativo, .carteira-dot--inadimplente,
   .dash-card--laranja e .carteira-dot--cancelado). */
.carteira-dot--excelente{ background:#0b7d38; }
.carteira-dot--boa{ background:#bb7a00; }
.carteira-dot--atencao{ background:#ea580c; }
.carteira-dot--critica{ background:#c62828; }

.carteira-situacao{

    display:flex;
    align-items:center;
    gap:7px;

    margin-left:auto;

    font-size:13.5px;
    color:#444;

}

/* ---- Botão de Ajuda no header (evolução v26) ----
   Modelado em .card-tooltip (css/comissoes.css:212) — mesmo tamanho e
   cor de ícone, só que como botão clicável (abre o modal
   #modalAjudaCarteira) em vez de tooltip on-hover. Fica dentro de
   #headerExtra, ao lado do toggle de Tipo (montarTipoPaginaCarteiraNoHeader,
   js/carteira-inteligente.js). */
.carteira-botao-ajuda{

    display:flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;
    margin-left:10px;

    border-radius:50%;
    border:none;
    background:transparent;

    color:#bbb;
    cursor:pointer;

}

.carteira-botao-ajuda:hover,
.carteira-botao-ajuda:focus{

    background:#f2f2f2;
    color:#888;
    outline:none;

}

.carteira-botao-ajuda i{

    width:17px;
    height:17px;

}

/* ---- Modal de Ajuda (evolução v26) ----
   O texto reaproveita 100% o CSS de modal já existente
   (.modal-overlay/.modal--pequeno/.modal-header/.modal-body/
   .modal-footer, css/comissoes.css) — só a tipografia interna de cada
   item precisa de um pequeno ajuste (título + parágrafo), que nenhum
   outro modal do sistema tinha (todos os outros são formulário). */
.carteira-ajuda-item{

    margin-bottom:16px;

}

.carteira-ajuda-item:last-child{

    margin-bottom:0;

}

.carteira-ajuda-item h4{

    font-size:13px;
    color:#2F3640;

    margin-bottom:4px;

}

.carteira-ajuda-item p{

    font-size:13.5px;
    color:#555;
    line-height:1.5;

}

/* Aviso final ("não prevê contemplações") com o mesmo destaque de
   ícone+texto já usado em .info-card (css/comissoes.css), sem repetir
   o componente inteiro (o modal já tem seu próprio espaçamento). */
.carteira-ajuda-item--aviso{

    display:flex;
    align-items:flex-start;
    gap:8px;

    padding:10px 12px;
    border-radius:10px;
    background:#f7f7f7;

}

.carteira-ajuda-item--aviso i{

    width:16px;
    height:16px;
    flex-shrink:0;
    margin-top:2px;

    color:#8B0000;

}

.carteira-ajuda-item--aviso p{

    color:#444;

}

/* ---- Distribuição das cotas: uma linha por faixa ----
   Mesmo padrão visual de .parcelas-bar/.parcelas-bar-fill
   (css/comissoes.css) — barra fina, cantos arredondados, preenchimento
   vermelho da marca — só que numa linha própria (rótulo + contagem +
   barra + percentual), não dentro de uma célula de tabela. */
.faixa-linha{

    display:grid;
    grid-template-columns:110px 70px 1fr 60px;
    align-items:center;
    gap:14px;

    padding:8px 0;

}

.faixa-linha + .faixa-linha{

    border-top:1px solid #f2f2f2;

}

.faixa-rotulo{

    font-size:13px;
    color:#2F3640;
    font-weight:600;

}

.faixa-quantidade{

    font-size:13px;
    color:#666;

}

.faixa-bar{

    height:10px;
    border-radius:20px;
    background:#e8e8e8;
    overflow:hidden;

}

.faixa-bar-fill{

    height:100%;
    border-radius:20px;
    background:#8B0000;

}

.faixa-percentual{

    font-size:12.5px;
    color:#888;
    text-align:right;

}

/* Faixa sugerida (menos representada) fica com o rótulo destacado,
   mesma cor de aviso já usada em Configurações (.info-card--alerta,
   css/comissoes.css) — sem criar uma paleta nova. */
.faixa-linha--sugerida .faixa-rotulo{

    color:#c62828;

}

/* ---- Mapa da modalidade ----
   Uma faixa horizontal com um bloco por faixa de numeração — quanto
   mais escuro, mais cotas próprias naquele trecho. Não marca número a
   número (a modalidade pode ter até 9999 posições, um ponto por
   número não escalaria nem seria legível); é um resumo visual da
   mesma distribuição já mostrada em detalhe na seção acima.
   Evolução v25 (pedido do usuário: "maior destaque visual"/"melhorar a
   leitura"): mais alto, com o rótulo da faixa embaixo do número —
   mesma cor/lógica de opacidade de antes, só maior e mais legível.
   Evolução v26 (pedido do usuário: "um pouco mais de destaque visual"):
   mais alto ainda (78px → 90px) e piso de opacidade maior (ver
   renderizarMapaModalidade, js/carteira-inteligente.js: 0.12 → 0.18)
   pra blocos vazios ficarem mais legíveis contra o fundo — mesmo
   padrão visual, sem cor nova. */
.carteira-mapa{

    display:flex;
    gap:4px;

    height:90px;

}

.carteira-mapa-bloco{

    flex:1;
    border-radius:8px;
    background:#f0f0f0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;

    color:#fff;

}

.carteira-mapa-bloco-quantidade{

    font-size:16px;
    font-weight:700;

}

.carteira-mapa-bloco-rotulo{

    font-size:9.5px;
    font-weight:600;
    opacity:.85;

}

.carteira-mapa-bloco--vazio{

    color:#bbb;

}

.carteira-mapa-legenda{

    display:flex;
    justify-content:space-between;

    margin-top:8px;

    font-size:12px;
    color:#999;

}

/* ---- Histórico dos últimos sorteios ----
   Mesma linha de css/assembleias.css (.numero-sorteado-linha/.seta),
   só que o chip colorido por modalidade não faz sentido aqui (a
   modalidade já é sempre a mesma na lista inteira) — troca por um
   rótulo de competência simples. */
.carteira-historico-mes{

    min-width:90px;
    color:#666;
    font-size:13px;

}

.carteira-sem-dados{

    color:#bbb;
    font-size:13px;

}

@media(max-width:700px){

    .faixa-linha{
        grid-template-columns:90px 55px 1fr 50px;
        gap:10px;
    }

    .carteira-mapa{
        height:50px;
    }

    /* 10 blocos numa tela estreita não sobra espaço pro rótulo embaixo
       do número sem espremer demais — mantém só a quantidade, que já
       aparece no title (tooltip) com o rótulo completo. */
    .carteira-mapa-bloco-rotulo{
        display:none;
    }

}