/*=====================================================
  MÓDULO ASSEMBLEIAS — v4

  Isolado de propósito: este arquivo só é responsável pelo que é
  realmente específico da tela de Assembleias (cards, tabela, chips de
  status e o bloco de "Resultado" do modal). Tudo o que já é
  componente compartilhado do sistema — botões (.btn-primary/
  .btn-secondary), modal (.modal-overlay/.modal/.form-grid/
  .form-group), filtros (.status-buttons/.status-btn), busca
  (.search-box), paginação (.pagination-bar/.pagination-btn) e o cartão
  base (.card, de css/cards.css) — é REAPROVEITADO das folhas de estilo
  já existentes (css/comissoes.css e css/cards.css, carregadas
  globalmente em todas as páginas). Nada deste arquivo sobrescreve
  regras de outro módulo.

  v4 reorganizou a tela em torno de um filtro de Tipo no topo — v5
  moveu esse toggle para DENTRO do header compartilhado, ao lado do
  título "Assembleias" (#headerExtra, ver js/app.js/css/header.css e
  montarTipoPaginaNoHeader em js/assembleias.js), e deixou os 4 cards
  mais compactos — os dois só para reduzir a altura total da página
  (pedido explícito do consultor: em notebook de 14", a tela ficava
  alta demais e exigia zoom fora de 100% pra caber sem rolar). O
  toggle continua reaproveitando o mesmo .tipo-toggle/.status-btn do
  modal, só compacto (não flex:1).
=====================================================*/


/* ===========================
   TIPO DA ASSEMBLEIA (ao lado do título, dentro do
   header compartilhado — ver #headerExtra em
   js/app.js/css/header.css e montarTipoPaginaNoHeader
   em js/assembleias.js)
=========================== */

#headerExtra .tipo-toggle{
    display:inline-flex;
    width:auto;
}

#headerExtra .tipo-toggle .status-btn{
    flex:none;
    padding:8px 18px;
    font-size:13px;
}


/* ===========================
   CARDS
=========================== */

.assembleias-cards{

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:16px;

    margin-bottom:18px;

    align-items:stretch;

}

.assembleias-cards .card{

    padding:14px 16px;

    min-height:0;

    display:flex;

    flex-direction:column;

}

.assembleias-cards .card-icon{

    width:30px;
    height:30px;

    border-radius:9px;

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

    background:#fbe1e6;
    color:#8B0000;

    margin-bottom:8px;

}

.assembleias-cards .card-icon i{
    width:15px;
    height:15px;
}

.assembleias-cards .card-content{

    display:flex;
    flex-direction:column;

}

.assembleias-cards .card-content > span{

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

    margin-bottom:4px;

}

.assembleias-cards .card-content h2{

    font-size:21px;
    color:#8B0000;

    margin-bottom:2px;

}

.assembleias-cards .card-content small{

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

}

/* Card "Assembleia Atual" — badge de Tipo + chips das modalidades já
   cadastradas para o tipo selecionado no topo da página. */
.assembleias-cards .card-content .contemplacao-pill{
    align-self:flex-start;
    margin-bottom:8px;
}

.modalidades-cadastradas{
    margin-top:auto;
    padding-top:6px;
}

.modalidades-cadastradas small{
    display:block;
    color:#888;
    font-size:11.5px;
    margin-bottom:5px;
}

.chips-linha{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.chips-linha .participante-chip{
    padding:3px 9px;
    font-size:12px;
}

/* Card "Números Sorteados (1ª Chamada)" — uma linha por modalidade
   cadastrada, com o mesmo chip colorido usado no card "Assembleia
   Atual" e no modal (mesma cor por participantes = mesma modalidade em
   qualquer lugar da tela). */
.numeros-sorteados-lista{
    display:flex;
    flex-direction:column;
    gap:6px;

    margin-top:2px;
}

.numero-sorteado-linha{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:13px;
}

.numero-sorteado-linha .participante-chip{
    padding:3px 9px;
    font-size:11.5px;
    min-width:42px;
    text-align:center;
}

.numero-sorteado-linha .seta{
    color:#ccc;
}

.numero-sorteado-linha strong{
    color:#8B0000;
    font-size:14.5px;
}

.numeros-sorteados-vazio,
.modalidades-cadastradas-vazio{
    color:#bbb;
    font-size:13px;
}


/* ===========================
   TOOLBAR (mesmo padrão de Comissões)
=========================== */

.assembleias-toolbar{

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

    gap:20px;

    margin-bottom:22px;

    flex-wrap:wrap;

}


/* ===========================
   TABELA
=========================== */

.assembleias-table{

    width:100%;

    border-collapse:collapse;

}

.assembleias-table th{

    /* Sem isso, o cabeçalho ficava transparente — como .table-scroll
       (css/comissoes.css) já torna o <thead> "sticky" (fixo ao rolar)
       pra qualquer tabela dentro dele, sem fundo sólido as linhas de
       baixo apareciam por trás do texto do cabeçalho ao descer a
       rolagem. Mesma cor de fundo já usada em .comissoes-table th,
       onde esse problema não acontecia. */
    background:#fafafa;

    text-align:left;

    font-size:13px;

    color:#888;

    font-weight:600;

    padding:14px 16px;

    border-bottom:1px solid #f0f0f0;

}

.assembleias-table td{

    padding:16px;

    border-bottom:1px solid #f5f5f5;

    font-size:14px;

    vertical-align:middle;

}

.assembleias-table tbody tr:hover{

    background:#fafafa;

}


/* ===========================
   STATUS (proximidade / contemplação)

   Paleta pedida na atualização: verde para Muito Próxima e Contemplada
   (a última em tom sólido, para se destacar como resultado final),
   amarelo para Próxima, laranja para Média e cinza para Distante.
=========================== */

.badge-contemplada{
    background:#0b7d38;
    color:#fff;
}

/* Contemplação vinda de uma chamada supletiva (2ª a 5ª) — mesmo status
   "contemplada" por trás, mas com rótulo e cor diferentes ("Atenção
   para Xª Chamada" em vez de "Contemplada", laranja em vez de verde)
   pra não confundir com o resultado da 1ª chamada. Ver
   contemplacaoPorChamadaSupletiva() em js/assembleias.js. */
.badge-atencao{
    background:#ea580c;
    color:#fff;
}

.badge-muito-proxima{
    background:#dff5e5;
    color:#0b7d38;
}

.badge-proxima{
    background:#fff6d6;
    color:#8a6d00;
}

.badge-media{
    background:#ffe3c7;
    color:#b35a00;
}

.badge-distante{
    background:#ececec;
    color:#666;
}

.badge-indefinido{
    background:#f2f2f2;
    color:#999;
}


/* ===========================
   COLUNA "CONTEMPLAÇÃO"
=========================== */

.contemplacao-pill{
    display:inline-block;

    padding:4px 12px;

    border-radius:999px;

    font-size:12.5px;
    font-weight:600;

    background:#fbe1e6;
    color:#8B0000;
}

/* ===========================
   MODAL - MÊS/ANO E TIPO
=========================== */

/* Input nativo de mês, com um ícone à esquerda no mesmo espírito da
   .search-box já existente (ícone + campo) — mantém o padrão de input
   de css/comissoes.css (.form-group input), só adiciona o ícone. */
.mes-ano-campo{

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

    height:46px;

    border:1px solid #d9d9d9;
    border-radius:10px;

    padding:0 14px;

}

.mes-ano-campo i{
    width:18px;
    height:18px;
    color:#999;
    flex:none;
}

.mes-ano-campo input{
    border:none;
    outline:none;
    height:100%;
    width:100%;
    padding:0;
    font-size:15px;
}

/* Segmented control do Tipo — reaproveita .status-btn (o mesmo botão
   dos filtros da toolbar, css/comissoes.css) em vez de criar um botão
   novo, só ajustando o alinhamento do ícone dentro dele. */
.tipo-toggle{
    display:flex;
    gap:10px;
}

.tipo-toggle .status-btn{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    height:46px;
}

.tipo-toggle .status-btn i{
    width:16px;
    height:16px;
}

.modal-divisor{
    border:none;
    border-top:1px solid #ececec;
    margin:26px 0;
}


/* ===========================
   MODAL - ABAS "CADASTRAR"/"HISTÓRICO" (2026-07-16)
   Reaproveita 100% o visual de .tipo-toggle/.status-btn (mesmo
   componente do toggle Imóveis/Veículos) — só posiciona a faixa dentro
   do padding lateral do modal, já que aqui ela fica fora do
   .modal-body (que tem padding próprio).
=========================== */

.abas-modal-assembleia{
    margin:0 30px;
    padding-top:18px;
}

.historico-hint{
    font-size:13px;
    color:#999;
    margin-bottom:14px;
}

/* Filtro de Mês/Ano da aba Histórico (2026-07-16) */
.historico-filtro{

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

    margin-bottom:16px;

}

.historico-filtro label{
    font-size:13px;
    font-weight:600;
    color:#555;
}

.historico-filtro select{

    height:36px;

    padding:0 12px;

    border:1px solid #e2e2e2;
    border-radius:8px;

    font-size:13px;
    font-family:inherit;
    color:#333;

    background:#fff;

}

.historico-filtro select:focus{
    outline:none;
    border-color:#8B0000;
}


/* ===========================
   MODAL - BLOCO "RESULTADOS DA ASSEMBLEIA"
=========================== */

.resultado-titulo{

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

    margin-bottom:16px;

}

.resultado-titulo i:first-child{
    width:18px;
    height:18px;
    color:#8B0000;
}

.resultado-titulo h3{
    font-size:16px;
    margin:0;
}

/* .card-tooltip já vem com margin-left:auto (css/comissoes.css), então
   naturalmente encosta a direita do título sem precisar de regra extra
   aqui. */

.resultados-scroll{
    max-height:none;
    overflow-x:auto;
}

.resultados-table th{
    white-space:nowrap;
}

.resultados-table th.coluna-destaque,
.resultados-table td.coluna-destaque{
    background:#fbf0f2;
}

.resultados-table th.coluna-destaque{
    color:#8B0000;
}

.resultados-table td{
    padding:10px 10px;
}

.resultados-table th{
    padding:14px 10px;
}

.resultados-table input{
    width:100%;
    min-width:88px;

    height:42px;

    border:1px solid #d9d9d9;
    border-radius:8px;

    padding:0 10px;

    font-size:14px;

    outline:none;

    transition:.2s;
}

.resultados-table input:focus{
    border-color:#8B1E3F;
}

.participante-chip{

    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

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

}

.participante-chip--0{ background:#fbe1e6; color:#8B0000; }
.participante-chip--1{ background:#dbeafe; color:#1d4ed8; }
.participante-chip--2{ background:#ede9fe; color:#6d28d9; }
.participante-chip--3{ background:#fff3d6; color:#bb7a00; }
.participante-chip--4{ background:#dcfce7; color:#0b7d38; }


/* ===========================
   RODAPÉ INFORMATIVO

   Reaproveita .card (css/cards.css) para os dois primeiros blocos e
   .info-card (css/comissoes.css) para o terceiro — o mesmo componente
   já usado na Observação do modal — em vez de criar um cartão de
   informação novo.
=========================== */

.assembleias-rodape{

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr;

    gap:18px;

    margin-top:22px;

}

.assembleias-rodape .card{
    padding:22px;
}

.rodape-titulo{

    display:block;

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

    margin-bottom:16px;

}

/* "Números Sorteados — Mês/Ano (Tipo)" — um bloco por chamada (2ª a
   5ª; a 1ª já aparece nos cards do topo), cada um com a lista das
   modalidades cadastradas e seu número naquela chamada. */
.chamadas-blocos{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));

    gap:14px;

}

.chamada-bloco{

    border:1px solid #f0f0f0;
    border-radius:12px;

    padding:14px;

}

.chamada-bloco-titulo{

    display:block;

    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;

    margin-bottom:12px;

}

.chamada-bloco--2 .chamada-bloco-titulo{ color:#1d4ed8; }
.chamada-bloco--3 .chamada-bloco-titulo{ color:#6d28d9; }
.chamada-bloco--4 .chamada-bloco-titulo{ color:#bb7a00; }
.chamada-bloco--5 .chamada-bloco-titulo{ color:#0b7d38; }

.chamada-bloco-lista{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.chamada-bloco-linha{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    font-size:13px;
}

.chamada-bloco-linha .participante-chip{
    padding:3px 9px;
    font-size:11.5px;
}

.chamada-bloco-vazio{
    color:#bbb;
    font-size:13px;
}

.legenda-lista{

    list-style:none;

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

    margin:0;
    padding:0;

}

.legenda-lista li{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:14px;
    color:#333;
}

.legenda-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    flex:none;
}

.legenda-dot--contemplada{ background:#0b7d38; }
.legenda-dot--atencao{ background:#ea580c; }
.legenda-dot--muito-proxima{ background:#4cbf7a; }
.legenda-dot--proxima{ background:#e6b800; }
.legenda-dot--media{ background:#e8821e; }
.legenda-dot--distante{ background:#999; }

.rodape-info{
    align-items:flex-start;
}


/* ===========================
   RESPONSIVO
=========================== */

@media(max-width:1200px){

    .assembleias-cards{
        grid-template-columns:repeat(2, 1fr);
    }

    .assembleias-toolbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .assembleias-toolbar .toolbar-actions{
        width:100%;
        flex-wrap:wrap;
    }

    .assembleias-toolbar .search-box{
        width:100%;
    }

    .assembleias-rodape{
        grid-template-columns:1fr;
    }

}

@media(max-width:620px){

    .assembleias-cards{
        grid-template-columns:1fr;
    }

    /* O header compartilhado (js/app.js/css/header.css) não tem
       breakpoints próprios — mantemos o toggle compacto aqui só para
       ele não estourar a altura fixa do header em telas estreitas. */
    #headerExtra .tipo-toggle .status-btn{
        padding:6px 12px;
        font-size:12px;
    }

    .chamadas-blocos{
        grid-template-columns:repeat(2, 1fr);
    }

}