/*=====================================================
  AGENDA COMERCIAL — v1 (sub-fase 2: Lista + Mês)

  Reaproveita os tokens de tema (css/tema.css) e os componentes
  compartilhados de modal/formulário (css/comissoes.css) — só o que é
  genuinamente novo (lista agrupada por urgência + grade mensal) ganha
  CSS próprio aqui.
=====================================================*/

/* Cabeçalho único da Agenda (2026-09-20) — navegação de mês + toggle
   Lista/Mês à esquerda, Hoje + Novo compromisso à direita, tudo numa
   linha só (antes eram duas: esta + .agenda-mes-header, removida).
   space-between entre os dois grupos; cada grupo quebra pra baixo no
   mobile (flex-wrap) em vez de espremer. */
.agenda-topo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.agenda-topo-navegacao{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.agenda-topo-acoes{
    display:flex;
    align-items:center;
    gap:10px;
}

.agenda-topo-acoes .agenda-mes-hoje{
    display:flex;
    align-items:center;
    gap:6px;
}

/* [hidden] sozinho não basta — mesma causa-raiz já corrigida várias
   vezes no projeto (ver css/funil-vendas.css, css/assinaturas.css
   etc.): a regra de autor acima (display:flex, sem guarda) ganha do
   "display:none" padrão do navegador pra [hidden]. agendaAlternarVisualizacao()
   (js/agenda.js) esconde os dois na visão Lista. */
.agenda-topo-mesnav[hidden],
.agenda-topo-acoes .agenda-mes-hoje[hidden]{
    display:none;
}

/* svg, não i — o Lucide substitui <i data-lucide> por <svg> no DOM
   (createIcons()), um seletor de tag "i" nunca alcança o ícone depois
   de renderizado (mesmo achado documentado em css/sidebar.css, linha
   ~279 — vale pra qualquer ícone Lucide do projeto, não só o menu). */
.agenda-topo-acoes .agenda-mes-hoje svg{
    width:15px;
    height:15px;
}

.agenda-visualizacao-toggle{
    display:flex;
    background:var(--gca-fundo-elevado);
    border:1px solid var(--gca-borda);
    border-radius:10px;
    padding:3px;
}

.agenda-visualizacao-toggle button{
    border:none;
    background:transparent;
    color:var(--gca-texto-secundario);
    font-size:13px;
    font-weight:600;
    padding:6px 14px;
    border-radius:7px;
    cursor:pointer;
}

.agenda-visualizacao-toggle button.ativo{
    background:var(--gca-fundo-card-solido);
    color:var(--gca-texto-principal);
    box-shadow:0 1px 4px rgba(0,0,0,.12);
}

/* .form-group (css/comissoes.css) só estiliza input/select — o
   <textarea> de Descrição ficava com a aparência crua do navegador
   (fundo branco, quebrando o tema dark). Mesmo bug já corrigido em
   Funil de Vendas (.funil-form-grid textarea) — aqui escopado só ao
   modal da Agenda (#modalCompromisso), não em .form-group genérico,
   pra não mudar nenhuma outra tela sem pedido. */
#modalCompromisso textarea{

    width:100%;
    min-width:0;

    padding:12px 14px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:14px;
    font-family:inherit;
    resize:vertical;

    transition:.2s;

}

#modalCompromisso textarea:focus{
    border-color:#8B1E3F;
}

[data-theme="dark-premium"] #modalCompromisso textarea{
    background:var(--gca-fundo-elevado);
    border-color:var(--gca-borda-sutil);
    color:var(--gca-texto-principal);
    color-scheme:dark;
}

[data-theme="dark-premium"] #modalCompromisso textarea:focus{
    border-color:#E63950;
}

.agenda-campo-opcional{
    color:var(--gca-texto-terciario);
    font-weight:400;
    font-size:12.5px;
}


/* ===========================
   CONVITES ENTRE EQUIPE (2026-09-15)
=========================== */

/* Indicador pequeno na Lista (compromisso-titulo) — contagem de
   convidados (dono) ou a própria resposta (convidado). Mesma técnica
   de --cor-status já usada em .compromisso-linha/.agenda-mes-pill,
   só que numa pílula inline em vez de borda. */
.convite-pill{
    display:inline-flex;
    align-items:center;
    gap:3px;
    vertical-align:middle;
    background:color-mix(in srgb, var(--cor-status, #8891A0) 16%, transparent);
    color:var(--cor-status, #8891A0);
    border-radius:99px;
    padding:1px 8px;
    font-size:10.5px;
    font-weight:700;
}

.convite-pill svg{
    width:11px;
    height:11px;
}

/* Pontinho equivalente na grade do Mês — sem espaço pra texto ali. */
.agenda-mes-pill-convite-ponto{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cor-status, #8891A0);
    flex:0 0 auto;
    margin-left:2px;
}

/* Participantes — campo de busca + chips, não checkbox (2026-09-15,
   substitui a lista de checkbox original: não escala bem visualmente
   pra equipes grandes). Container com a mesma cara de input do resto
   do form — chips e busca dividem o mesmo "campo", como um seletor de
   destinatários de e-mail. */
.agenda-participantes{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:6px;
    border:1px solid var(--gca-borda);
    border-radius:10px;
    padding:8px 10px;
    background:var(--gca-fundo-elevado);
}

.agenda-participantes-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.agenda-participantes-chips[hidden]{
    display:none;
}

.agenda-participante-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--gca-fundo-card-solido);
    border:1px solid var(--gca-borda);
    border-radius:99px;
    padding:3px 6px 3px 12px;
    font-size:13px;
    color:var(--gca-texto-principal);
}

.agenda-participante-chip--travado{
    color:var(--gca-texto-terciario);
    padding-right:12px;
}

.agenda-participante-chip-remover{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border:none;
    border-radius:50%;
    background:none;
    color:var(--gca-texto-terciario);
    cursor:pointer;
    flex:0 0 auto;
}

.agenda-participante-chip-remover:hover{
    background:rgba(230,57,80,.14);
    color:#E63950;
}

.agenda-participante-chip-remover svg{
    width:12px;
    height:12px;
}

.agenda-participante-chip-travado{
    font-size:10.5px;
    color:var(--gca-texto-terciario);
}

.agenda-participantes-busca{
    width:100%;
    min-width:0;
    border:none;
    background:none;
    padding:4px 2px;
    font-size:13.5px;
    font-family:inherit;
    color:var(--gca-texto-principal);
    outline:none;
}

.agenda-participantes-busca::placeholder{
    color:var(--gca-texto-terciario);
}

/* Painel flutuante de resultados — mesmo padrão visual/posicionamento
   de .conta-painel/.notif-painel (floating panel ancorado no campo),
   só mais simples (sem cabeçalho). */
.agenda-participantes-dropdown{
    position:absolute;
    z-index:20;
    top:calc(100% + 6px);
    left:0;
    right:0;

    max-height:220px;
    overflow-y:auto;

    display:flex;
    flex-direction:column;
    gap:2px;
    padding:6px;

    background:var(--gca-fundo-flutuante);
    border:1px solid var(--gca-borda-sutil);
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.agenda-participantes-dropdown[hidden]{
    display:none;
}

.agenda-participantes-dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    border:none;
    background:none;
    border-radius:8px;
    padding:8px 10px;
    font-size:13.5px;
    color:var(--gca-texto-principal);
    text-align:left;
    cursor:pointer;
}

.agenda-participantes-dropdown-item:hover{
    background:var(--gca-fundo-elevado-hover);
}

.agenda-participantes-avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#8F1730;
    color:#fff;
    font-size:11.5px;
    font-weight:700;
    flex:0 0 auto;
}

.agenda-participantes-dropdown-vazio{
    padding:10px;
    font-size:13px;
    color:var(--gca-texto-terciario);
}

/* Resumo curto no topo da lista de status — "2 confirmou · 1 talvez"
   (2026-09-15), mesma agregação do badge na Lista/Mês. */
.agenda-convidados-status-resumo{
    font-size:12.5px;
    color:var(--gca-texto-secundario);
    margin-bottom:8px;
}

/* Lista de status dos convidados — visão do dono. */
.agenda-convidados-status-lista{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.agenda-convidado-status-linha{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 12px;
    background:var(--gca-fundo-elevado);
    border-radius:8px;
    font-size:13.5px;
    color:var(--gca-texto-principal);
}

.agenda-convidado-status-pill{
    flex:0 0 auto;
    background:color-mix(in srgb, var(--cor-status, #8891A0) 18%, transparent);
    color:var(--cor-status, #8891A0);
    border-radius:99px;
    padding:2px 10px;
    font-size:11px;
    font-weight:700;
}


/* ===========================
   SEÇÕES (Atrasados/Hoje/Próximos/Concluídos)
=========================== */

.agenda-secao{
    margin-bottom:28px;
}

.agenda-secao-titulo{

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

    font-size:13px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--gca-texto-secundario);

    margin-bottom:12px;

}

.agenda-secao-titulo i{
    width:16px;
    height:16px;
}

.agenda-secao--atrasados .agenda-secao-titulo{ color:#F2495C; }
.agenda-secao-titulo .contagem{
    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-terciario);
    border-radius:99px;
    padding:1px 9px;
    font-size:11.5px;
}


/* ===========================
   LINHA DE COMPROMISSO
=========================== */

.compromisso-linha{

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

    background:var(--gca-fundo-card-solido);
    border:1px solid var(--gca-borda);
    border-left:3px solid var(--cor-status, #8891A0);
    border-radius:12px;

    padding:14px 18px;
    margin-bottom:8px;

    cursor:pointer;
    transition:background-color .15s ease;

}

.compromisso-linha:hover{
    background:var(--gca-fundo-elevado);
}

.compromisso-linha.concluido{
    opacity:.6;
}

.compromisso-linha.concluido .compromisso-titulo{
    text-decoration:line-through;
}

.compromisso-hora{
    font-variant-numeric:tabular-nums;
    font-size:13.5px;
    font-weight:700;
    color:var(--gca-texto-principal);
    flex:0 0 auto;
    width:44px;
}

.compromisso-corpo{
    flex:1;
    min-width:0;
}

.compromisso-titulo{
    font-size:14.5px;
    font-weight:600;
    color:var(--gca-texto-principal);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.compromisso-meta{
    font-size:12.5px;
    color:var(--gca-texto-terciario);
    margin-top:2px;
    display:flex;
    align-items:center;
    gap:6px;
}

.compromisso-meta .etapa-pill{
    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-secundario);
    border-radius:99px;
    padding:1px 8px;
    font-size:11px;
}

.compromisso-acoes{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
}

.compromisso-acoes button{
    width:32px;
    height:32px;
    border-radius:8px;
    border:1px solid var(--gca-borda);
    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-secundario);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.compromisso-acoes button:hover{
    background:var(--gca-fundo-elevado-hover);
    color:var(--gca-texto-principal);
}

.compromisso-acoes button i{
    width:16px;
    height:16px;
}

.compromisso-acoes button.concluir:hover{ color:#16a34a; }
.compromisso-acoes button.cancelar:hover{ color:#F2495C; }

.agenda-vazio{
    color:var(--gca-texto-terciario);
    font-size:14px;
    padding:20px 0;
}


/* ===========================
   TIMELINE (histórico do lead)
=========================== */

.timeline-lista{
    display:flex;
    flex-direction:column;
    max-height:340px;
    overflow-y:auto;
    margin-bottom:18px;
}

.timeline-item{
    display:flex;
    gap:12px;
    padding-bottom:16px;
    position:relative;
}

/* Linha vertical conectando os eventos — some no último item (sem
   filho depois dele pra conectar com). */
.timeline-item:not(:last-child)::before{
    content:"";
    position:absolute;
    left:13px;
    top:28px;
    bottom:0;
    width:1px;
    background:var(--gca-borda-sutil);
}

.timeline-icone{
    flex:0 0 auto;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-secundario);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1;
}

.timeline-icone i{
    width:14px;
    height:14px;
}

.timeline-corpo{
    flex:1;
    min-width:0;
    padding-top:4px;
}

.timeline-data{
    font-size:11px;
    color:var(--gca-texto-terciario);
    font-variant-numeric:tabular-nums;
}

.timeline-corpo p{
    margin:2px 0 0;
    font-size:13.5px;
    color:var(--gca-texto-principal);
    line-height:1.4;
}

.timeline-nota-form{
    border-top:1px solid var(--gca-borda-sutil);
    padding-top:16px;
}

.timeline-nota-form label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--gca-texto-principal);
    margin-bottom:8px;
}

.timeline-nota-form textarea{
    width:100%;
    margin-bottom:10px;
}


/* ===========================
   VISÃO MÊS (sub-fase 2)
=========================== */

.agenda-topo-mesnav{
    display:flex;
    align-items:center;
    gap:8px;
}

.agenda-mes-nav{
    width:32px;
    height:32px;
    border-radius:8px;
    border:1px solid var(--gca-borda);
    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-secundario);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.agenda-mes-nav:hover{
    background:var(--gca-fundo-elevado-hover);
    color:var(--gca-texto-principal);
}

/* svg, não i — mesmo motivo do comentário em .agenda-topo-acoes
   .agenda-mes-hoje svg acima (Lucide troca <i> por <svg> no DOM). Regra
   já existia como "i" antes (nunca alcançava o ícone de verdade,
   achado ao mexer no cabeçalho, 2026-09-20). */
.agenda-mes-nav svg{
    width:16px;
    height:16px;
}

/* Caixa com borda (2026-09-20, antes era texto solto) — bate com os
   botões de navegação ao lado, os três lêem como um grupo só. */
.agenda-mes-titulo{
    font-size:14.5px;
    font-weight:700;
    color:var(--gca-texto-principal);
    min-width:150px;
    text-align:center;
    padding:7px 14px;
    border:1px solid var(--gca-borda);
    border-radius:8px;
    background:var(--gca-fundo-elevado);
}

.agenda-mes-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:1px;
    background:var(--gca-borda);
    border:1px solid var(--gca-borda);
    border-radius:12px;
    overflow:hidden;
}

.agenda-mes-diasemana{
    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-terciario);
    font-size:11.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    text-align:center;
    padding:8px 0;
}

.agenda-mes-dia{
    background:var(--gca-fundo-card-solido);
    min-height:124px;
    padding:8px;
    cursor:pointer;
    transition:background-color .15s ease;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.agenda-mes-dia:hover{
    background:var(--gca-fundo-elevado);
}

.agenda-mes-dia--fora{
    opacity:.4;
}

.agenda-mes-dia-numero{
    font-size:12.5px;
    font-weight:600;
    color:var(--gca-texto-secundario);
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.agenda-mes-dia--hoje .agenda-mes-dia-numero{
    background:#7f77dd;
    color:#fff;
    border-radius:50%;
}

.agenda-mes-dia-pills{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

/* Coluna (não linha) desde 2026-09-07 — a 2ª linha de detalhe
   (crédito · etapa, só quando "houver espaço", ver agendaRenderizarMes
   em js/agenda.js) precisa vir embaixo da hora+nome, não do lado. */
.agenda-mes-pill{
    display:flex;
    flex-direction:column;
    gap:1px;
    background:var(--gca-fundo-elevado);
    border-left:2px solid var(--cor-status, #8891A0);
    border-radius:4px;
    padding:2px 5px;
    font-size:11px;
    color:var(--gca-texto-principal);
    overflow:hidden;
}

.agenda-mes-pill.concluido{
    opacity:.5;
    text-decoration:line-through;
}

.agenda-mes-pill-linha1{
    display:flex;
    align-items:center;
    gap:4px;
    min-width:0;
}

.agenda-mes-pill-hora{
    font-variant-numeric:tabular-nums;
    font-weight:700;
    flex:0 0 auto;
}

.agenda-mes-pill-titulo{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.agenda-mes-pill-detalhe{
    font-size:9.5px;
    font-weight:400;
    color:var(--gca-texto-terciario);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.agenda-mes-pill.concluido .agenda-mes-pill-detalhe{
    text-decoration:none;
}

.agenda-mes-mais{
    font-size:10.5px;
    color:var(--gca-texto-terciario);
    padding:0 5px;
}

/* Extração (calendario_assembleias, 2026-09-07) — cor por EVENTO
   (--cor-evento, ver agendaMontarBadgeExtracaoHtml/AGENDA_COR_POR_EVENTO,
   js/agenda.js — ajustado 2026-09-20 na 2ª rodada de acabamento pra
   bater com a referência oficial: Vencimento/Extração bordô, Oferta de
   lance azul, Assembleia roxo, IGUAL em Imóveis e Veículos — o Tipo
   passou a ser só o ícone da ponta, ver .agenda-mes-extracao-tipo
   abaixo), nunca usada pelos tipos de compromisso (AGENDA_CORES_TIPO,
   js/agenda.js), de propósito: precisa ficar visualmente clara como
   uma coisa DIFERENTE de compromisso pessoal (somente leitura, o
   consultor não cria/edita isso aqui). Sempre visível na célula, não
   entra no limite de 3 pills dos compromissos. Padding/fonte maiores
   de novo (2026-09-20, 3ª rodada — com a célula mais alta, o usuário
   achou o conteúdo do card ainda "estreito"; aproveita o espaço
   ganho). */
.agenda-mes-extracao{
    display:flex;
    align-items:center;
    gap:7px;
    background:color-mix(in srgb, var(--cor-evento, #F2495C) 14%, transparent);
    border-left:3px solid var(--cor-evento, #F2495C);
    border-radius:6px;
    padding:6px 10px;
    font-size:13px;
    font-weight:600;
    color:var(--gca-texto-principal);
    overflow:hidden;
}

/* svg, não i — mesmo motivo de sempre (Lucide troca a tag no DOM). */
.agenda-mes-extracao svg{
    width:14px;
    height:14px;
    flex:0 0 auto;
    color:var(--cor-evento, #F2495C);
}

/* flex:1 (2026-09-20) — o rótulo do evento ("Vencimento", "Extração"...)
   preenche o espaço livre, empurrando o ícone de tipo de bem (casa/
   carro) pra ponta direita do card, igual ao mockup do usuário. Antes
   o texto também trazia "— Imóveis"/"— Veículos" junto; agora esse
   segmento vira só o ícone .agenda-mes-extracao-tipo abaixo. */
.agenda-mes-extracao span{
    flex:1;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Ícone de segmento (casa/carro) — discreto, cor neutra (não a cor de
   marca do ícone de evento à esquerda), só pra identificar Imóveis x
   Veículos sem texto. */
/* "Discreto, porém claramente visível" (pedido do usuário) — texto-
   secundário em vez de terciário: mais claro que o ícone de evento à
   esquerda (que carrega a cor do evento), mas ainda bem legível, sem
   opacidade reduzida. Maior que o ícone de evento (2026-09-20, 4ª
   rodada — usuário achou o ícone de segmento ainda pequeno demais). */
.agenda-mes-extracao-tipo{
    width:16px !important;
    height:16px !important;
    color:var(--gca-texto-secundario) !important;
}

/* Mesma badge, só que no modal do dia (#modalDiaExtracoes) — maior,
   sem precisar caber numa célula minúscula. */
#modalDiaExtracoes .agenda-mes-extracao{
    font-size:14.5px;
    padding:10px 14px;
    margin-bottom:14px;
}

#modalDiaExtracoes .agenda-mes-extracao svg{
    width:17px;
    height:17px;
}

#modalDiaExtracoes .agenda-mes-extracao-tipo{
    width:19px !important;
    height:19px !important;
}

#modalDiaExtracoes:empty{
    display:none;
}

/* Resumo do mês, em 2 colunas Imóveis/Veículos (2026-09-20, pedido do
   usuário — antes era uma lista única "Calendário de outubro", mais
   alta, com um botão grande "Ver Assembleias"). Compacto de propósito:
   é um resumo, não uma segunda agenda — padding/gap bem menores que a
   versão anterior. Some sozinho (:empty) quando o mês em exibição não
   tem nenhum evento relevante nos dois tipos. */
.agenda-resumo-extracoes{
    margin-top:14px;
    display:flex;
    gap:0;
    background:var(--gca-fundo-card-solido);
    border:1px solid var(--gca-borda);
    border-radius:12px;
    overflow:hidden;
}

.agenda-resumo-extracoes:empty{
    display:none;
}

.agenda-resumo-coluna{
    flex:1;
    min-width:0;
    padding:8px 12px;
}

/* Divisor vertical sutil entre as duas colunas — só aparece quando as
   DUAS existem (seletor de irmão adjacente: nasce um "+" antes da 2ª
   coluna). Se um mês só tiver Imóveis ou só Veículos, a única coluna
   ocupa a largura toda, sem borda solta. */
.agenda-resumo-coluna + .agenda-resumo-coluna{
    border-left:1px solid var(--gca-borda);
}

.agenda-resumo-coluna-cabecalho{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
}

.agenda-resumo-coluna-titulo{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    font-weight:700;
}

.agenda-resumo-coluna-titulo svg{
    width:14px;
    height:14px;
}

.agenda-resumo-coluna--imoveis .agenda-resumo-coluna-titulo{ color:#F2495C; }
.agenda-resumo-coluna--veiculos .agenda-resumo-coluna-titulo{ color:#60a5fa; }

/* "Ver todos" — link discreto, não um btn-primary (2026-09-20: o botão
   grande "Ver Assembleias" some daqui, cada coluna leva o próprio link
   pequeno pra mesma tela; CTA principal do cabeçalho continua sendo só
   "Novo compromisso"). */
.agenda-resumo-vertodos{
    display:flex;
    align-items:center;
    gap:3px;
    border:none;
    background:none;
    padding:0;
    font-size:11.5px;
    font-weight:600;
    color:#F2495C;
    cursor:pointer;
}

.agenda-resumo-coluna--veiculos .agenda-resumo-vertodos{ color:#60a5fa; }

.agenda-resumo-vertodos svg{
    width:12px;
    height:12px;
}

.agenda-resumo-coluna-lista{
    display:flex;
    flex-direction:column;
    gap:4px;
}

/* Padding/gap reduzidos (2026-09-20, 2ª rodada — pedido do usuário pra
   o rodapé ocupar ~15-20% menos altura que a 1ª versão). */
.agenda-resumo-linha{
    display:flex;
    align-items:center;
    gap:7px;
    padding:4px 7px;
    background:var(--gca-fundo-elevado);
    border-radius:6px;
    font-size:12px;
    color:var(--gca-texto-secundario);
}

.agenda-resumo-linha-data{
    display:flex;
    flex-direction:column;
    align-items:center;
    line-height:1.1;
    flex:0 0 auto;
    color:var(--gca-texto-principal);
}

.agenda-resumo-linha-data strong{
    font-size:13px;
    font-weight:700;
}

.agenda-resumo-linha-data small{
    font-size:8.5px;
    font-weight:600;
    color:var(--gca-texto-terciario);
    letter-spacing:.03em;
}

/* Cor por EVENTO (--cor-evento, mesma fonte do card na grade —
   AGENDA_COR_POR_EVENTO, js/agenda.js), não mais por Tipo — trocado
   junto com o card na 2ª rodada de acabamento (2026-09-20). */
.agenda-resumo-linha-ponto{
    width:7px;
    height:7px;
    border-radius:50%;
    flex:0 0 auto;
    background:var(--cor-evento, #F2495C);
}

.agenda-resumo-linha-evento{
    flex:1;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.agenda-resumo-linha-icone{
    width:13px;
    height:13px;
    flex:0 0 auto;
    color:var(--gca-texto-secundario);
}

/* No mobile a grade de 7 colunas fica apertada demais pra mostrar
   pill de texto — vira só pontinhos de contagem por dia (mesma ideia
   de "indicador", sem tentar caber texto onde não cabe). */
@media (max-width:640px){

    /* Achado em produção, 2026-09-22: sábado (e em meses com mais
       eventos, até sexta) sumia da grade no celular. .agenda-mes-dia é
       item de um grid de 7 colunas (1fr cada) — sem min-width:0, o
       navegador nunca deixa a coluna ficar menor que o CONTEÚDO
       mínimo dela (aqui, a badge de extração com 2 ícones + padding),
       que passa fácil dos ~48px que sobram por coluna numa tela de
       375px. O grid então cresce além da tela, e o container escondia
       (não rolava) o excesso — sumia coluna inteira. min-width:0
       destrava o encolhimento; o span de texto da badge já vira
       display:none logo abaixo, então só sobra ícone, que cabe.  */
    .agenda-mes-dia{
        min-height:64px;
        padding:4px;
        min-width:0;
    }

    .agenda-mes-pill-titulo{
        display:none;
    }

    /* Sem espaço nenhum sobrando no mobile pra 2ª linha também. */
    .agenda-mes-pill-detalhe{
        display:none;
    }

    .agenda-mes-pill-linha1{
        justify-content:center;
    }

    /* Só na célula minúscula da grade — o modal do dia
       (#modalDiaExtracoes) tem espaço de sobra, mantém o texto. */
    .agenda-mes-dia .agenda-mes-extracao span{
        display:none;
    }

    .agenda-mes-dia .agenda-mes-extracao{
        justify-content:center;
    }

    /* Participantes (2026-09-15) — mesmo cuidado de toque já aplicado
       no resto do app (~44px de alvo, itens maiores). */
    .agenda-participantes-dropdown-item{
        padding:11px 10px;
        min-height:44px;
        font-size:14.5px;
    }

    .agenda-participante-chip-remover{
        width:26px;
        height:26px;
    }

    .agenda-participantes-dropdown{
        max-height:260px;
    }

    .agenda-convidado-status-linha{
        flex-wrap:wrap;
    }

    /* Resumo do mês (2026-09-20) — as 2 colunas lado a lado não cabem
       numa tela de celular, empilha uma em cima da outra; o divisor
       acompanha, vira uma linha horizontal em vez de vertical. */
    .agenda-resumo-extracoes{
        flex-direction:column;
    }

    .agenda-resumo-coluna + .agenda-resumo-coluna{
        border-left:none;
        border-top:1px solid var(--gca-borda);
    }

    /* Cabeçalho único da Agenda — grupo de ações (Hoje/Novo compromisso)
       ocupa a largura toda embaixo da navegação, cada botão dividindo o
       espaço (mesmo alvo de toque confortável do resto do app). */
    .agenda-topo{
        align-items:stretch;
    }

    .agenda-topo-acoes{
        width:100%;
    }

    .agenda-topo-acoes .agenda-mes-hoje{
        flex:0 0 auto;
        justify-content:center;
    }

    /* flex:1, não 50/50 com o Hoje (achado testando 375px: os dois
       exatamente do mesmo tamanho fazia o texto "Novo compromisso"
       quebrar linha) — Hoje fica do tamanho do próprio conteúdo, este
       ocupa o resto, com folga pro texto caber numa linha só. */
    .agenda-topo-acoes #btnNovoCompromisso{
        flex:1;
        justify-content:center;
        white-space:nowrap;
    }

}


/* ===========================
   BLOQUEIO DE PLANO (2026-09-18)
   Tela cheia mostrada no lugar da Agenda (views/bloqueio-plano.html,
   carregarPagina em js/app.js) pra quem não tem assinaturaTemAcessoAdvanced().
   Mesma estrutura de .erro-conexao-card (css/style.css), mas com tokens
   de tema (aquela é só clara, esta precisa valer no Dark Premium também
   — vai aparecer com bem mais frequência que uma falha de rede).
=========================== */

/* Virou overlay de verdade (2026-09-19, pedido do usuário: mostrar a
   Agenda real por trás gera mais interesse) — carregarPagina (js/
   app.js) agora sempre carrega a Agenda de verdade primeiro
   (carregarAgenda(), com os próprios compromissos da pessoa — RLS
   isola por dono, não por plano, então nunca vaza dado de outra
   pessoa) e só then injeta isto por cima, flutuando. position:fixed
   +inset:0 é o mesmo padrão de qualquer .modal-overlay do sistema
   (css/comissoes.css) — cobre a tela toda e, por estar por cima,
   intercepta o clique sozinho: não precisa desabilitar os botões da
   Agenda de verdade por baixo. */
.bloqueio-plano{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.bloqueio-plano-card{
    background:var(--gca-fundo-card-solido);
    border:1px solid rgba(139,0,0,.35);
    border-radius:16px;
    padding:36px;
    max-width:480px;
    width:100%;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    text-align:center;
    box-shadow:0 0 0 1px rgba(139,0,0,.12), var(--gca-sombra-card);
}

.bloqueio-plano-icone{
    position:relative;
    width:56px;
    height:56px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--gca-fundo-elevado);
    color:var(--gca-texto-terciario);
}

.bloqueio-plano-icone > i{
    width:26px;
    height:26px;
}

.bloqueio-plano-cadeado{
    position:absolute;
    right:-6px;
    bottom:-6px;
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#8B0000;
    border:2px solid var(--gca-fundo-card-solido);
}

.bloqueio-plano-cadeado i{
    width:11px;
    height:11px;
    color:#fff;
}

.bloqueio-plano-card h2{
    font-size:19px;
    color:var(--gca-texto-principal);
    margin-bottom:8px;
}

.bloqueio-plano-destaque{
    color:#8B0000;
}

.bloqueio-plano-descricao{
    font-size:14px;
    color:var(--gca-texto-secundario);
    line-height:1.6;
    margin-bottom:20px;
}

/* Card embutido (2026-09-19, redesenho a pedido do usuário — mostra o
   preço/diferencial do Advanced ali mesmo, sem precisar ir pra outra
   tela pra ver quanto custa). Preço vem do banco, ver
   bloqueioPlanoInicializar (js/bloqueio-plano.js). */
.bloqueio-plano-oferta{
    background:var(--gca-fundo-elevado);
    border:1px solid var(--gca-borda-sutil);
    border-radius:12px;
    padding:16px;
    margin-bottom:14px;
    text-align:left;
}

.bloqueio-plano-oferta-topo{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.bloqueio-plano-oferta-icone{
    flex-shrink:0;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#8B0000;
    color:#fff;
}

.bloqueio-plano-oferta-icone i{
    width:18px;
    height:18px;
}

.bloqueio-plano-oferta-nome{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.bloqueio-plano-oferta-nome strong{
    font-size:14.5px;
    color:var(--gca-texto-principal);
}

.bloqueio-plano-oferta-nome span{
    font-size:12px;
    color:var(--gca-texto-terciario);
}

.bloqueio-plano-oferta-preco{
    flex-shrink:0;
    text-align:right;
    color:#8B0000;
    font-weight:700;
}

.bloqueio-plano-oferta-preco span{
    font-size:18px;
}

.bloqueio-plano-oferta-preco small{
    font-size:11px;
    font-weight:500;
    color:var(--gca-texto-terciario);
}

.bloqueio-plano-oferta-features{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.bloqueio-plano-oferta-features li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--gca-texto-secundario);
}

.bloqueio-plano-oferta-features i{
    flex-shrink:0;
    width:14px;
    height:14px;
    color:#8B0000;
}

.bloqueio-plano-atual{
    font-size:12.5px;
    color:var(--gca-texto-terciario);
    margin-bottom:18px;
}

.bloqueio-plano-acoes{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:16px;
}

.bloqueio-plano-acoes .btn-primary,
.bloqueio-plano-acoes .btn-secondary{
    width:100%;
    justify-content:center;
}

.bloqueio-plano-rodape{
    font-size:12px;
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .bloqueio-plano-cadeado{
    background:#E63950;
}

[data-theme="dark-premium"] .bloqueio-plano-card{
    border-color:rgba(230,57,80,.4);
    box-shadow:0 0 0 1px rgba(230,57,80,.15), var(--gca-sombra-card);
}

[data-theme="dark-premium"] .bloqueio-plano-destaque{
    color:#F2495C;
}

[data-theme="dark-premium"] .bloqueio-plano-oferta-icone{
    background:#E63950;
}

[data-theme="dark-premium"] .bloqueio-plano-oferta-preco{
    color:#F2495C;
}

[data-theme="dark-premium"] .bloqueio-plano-oferta-features i{
    color:#F2495C;
}