/* =====================================================================
   Componentes reutilizáveis: campos, botões, avisos e notificações.
   ===================================================================== */

/* --- Campos ---------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }

.campo label { font-size: 13px; font-weight: 600; }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 5px;
  padding: 9px 11px;
  width: 100%;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible,
.botao:focus-visible,
.menu-item:focus-visible {
  outline: 2px solid var(--marca-secundaria);
  outline-offset: 1px;
}

.campo input[aria-invalid="true"] { border-color: var(--erro); }

.campo-erro { color: var(--erro); font-size: 12.5px; }

/* --- Botões ---------------------------------------------------------- */
.botao {
  font: inherit; font-weight: 600;
  padding: 9px 16px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--superficie-alt);
  color: var(--texto);
}
.botao:hover { filter: brightness(.97); }
.botao[disabled] { opacity: .6; cursor: not-allowed; }

.botao--primario { background: var(--marca-primaria); color: #fff; }
.botao--primario:hover { background: var(--marca-primaria-escura); }

.botao--largo { width: 100%; margin-top: 6px; }

.botao--texto {
  background: none; border-color: transparent;
  color: var(--marca-secundaria); padding: 6px 8px;
}
.botao--texto:hover { background: var(--superficie-alt); }

/* --- Avisos ---------------------------------------------------------- */
.aviso {
  padding: 10px 13px;
  border-radius: 5px;
  border-left: 3px solid;
  font-size: 14px;
  margin-bottom: 14px;
}
.aviso--erro     { background: var(--erro-fundo);     border-color: var(--erro);     color: var(--erro); }
.aviso--atencao  { background: var(--atencao-fundo);  border-color: var(--atencao);  color: var(--atencao); }
.aviso--sucesso  { background: var(--sucesso-fundo);  border-color: var(--sucesso);  color: var(--sucesso); }
.aviso--info     { background: var(--info-fundo);     border-color: var(--info);     color: var(--info); }

/* --- Notificações flutuantes ------------------------------------------ */
.notificacoes {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
}

.notificacao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--marca-primaria);
  border-radius: 5px;
  padding: 11px 14px;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  animation: surgir .16s ease-out;
}
.notificacao--erro    { border-left-color: var(--erro); }
/* Existia no JS desde a agenda, e nunca aqui: as chamadas com
   'sucesso' caiam no estilo neutro e ficavam iguais as de 'info'. */
.notificacao--sucesso { border-left-color: var(--sucesso); }
.notificacao--atencao { border-left-color: var(--atencao); }
.notificacao--critico { border-left-color: var(--erro); }

.notificacao b { display: block; margin-bottom: 2px; }
.notificacao .regra { color: var(--texto-apagado); font-size: 12px; }

@keyframes surgir { from { opacity: 0; transform: translateY(6px); } }

/* --- Cartões e estados vazios ----------------------------------------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: 20px;
}

/* Cartão dentro de outro cartão: recua o fundo em vez de empilhar duas
   bordas, que a essa altura já viraram moldura sobre moldura. */
.cartao--interno {
  background: var(--fundo);
  border-style: dashed;
  padding: 16px;
}

/* Recolhível DENTRO de um cartão: `.cartao--recolhivel` zera o padding
   para o summary ocupar a largura inteira, então a separação de quem está
   em volta tem de vir de margem. Sem isto o painel encosta no parágrafo
   acima e na tabela abaixo. */
.cartao--interno.cartao--recolhivel { margin: 14px 0; }
/* A calha do marcador é menor aqui: 20px de recuo dentro de um cartão que
   já tem 20px de padding empurrariam o conteúdo para o meio da tela. */
.cartao--interno.cartao--recolhivel > summary { padding: 11px 14px; }
.cartao--interno.cartao--recolhivel > summary::before { left: 5px; top: 11px; }
.cartao--interno.cartao--recolhivel > *:not(summary) {
  margin-left: 14px; margin-right: 14px;
}
.cartao--interno.cartao--recolhivel > *:last-child { margin-bottom: 14px; }

/* Cartão que abre só quando alguém vai mexer.
   `<details>` guarda o estado sozinho e abre pelo teclado; a única coisa
   que falta é tirar o triângulo padrão e pôr um que acompanhe o texto. */
.cartao--recolhivel { padding: 0; }
.cartao--recolhivel > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px; cursor: pointer; list-style: none;
  border-radius: 7px;
  /* Âncora do marcador, que sai do fluxo logo abaixo. */
  position: relative;
}
.cartao--recolhivel > summary::-webkit-details-marker { display: none; }

/* O MARCADOR FICA NA CALHA, FORA DO FLUXO.
   Em fluxo, ele empurrava o título uns 18px para a direita e o conteúdo
   ficava desalinhado do próprio cabeçalho — o olho lia duas colunas de
   início onde deveria haver uma. Absoluto, título e conteúdo começam no
   mesmo x e o triângulo ocupa a borda do cartão. */
.cartao--recolhivel > summary::before {
  content: '▸'; color: var(--texto-apagado);
  position: absolute; left: 7px; top: 14px;
  transition: transform .12s ease;
}
.cartao--recolhivel[open] > summary::before { transform: rotate(90deg); }
.cartao--recolhivel[open] > summary { border-bottom: 1px solid var(--borda); }
.cartao--recolhivel > summary:hover { background: var(--fundo); }

.cartao--recolhivel > *:not(summary) { margin-left: 20px; margin-right: 20px; }

/* O primeiro elemento depois do summary precisa de ar: sem isto ele
   encosta na borda que separa o cabeçalho do corpo. Antes só um `<p>`
   inicial ganhava margem — painel que começa com grade ou tabela ficava
   colado. */
.cartao--recolhivel > summary + * { margin-top: 16px; }
.cartao--recolhivel > *:last-child { margin-bottom: 18px; }

/* As duas notas lado a lado: elas se leem juntas, e empilhadas a segunda
   caía abaixo da dobra. `auto-fit` com mínimo de 320px empilha sozinho no
   celular, sem media query. `align-items: start` impede que a de
   complexidade estique só porque a de custo tem observação. */
.notas-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

/* Aberta, ocupa a linha inteira: meia largura para uma tabela de cinco
   colunas com texto explicativo é ilegível, e rolagem horizontal dentro
   de meio cartão é pior que a mudança de largura. */
.notas-par > .cartao--nota[open] { grid-column: 1 / -1; }

/* Cartão de nota: o resumo tem DUAS partes — a linha e a observação.
   Por isso o summary é bloco aqui, e é a linha de dentro que vira flex;
   com o summary em flex, a observação iria para o lado do número. */
.cartao--nota > summary { display: block; }
.nota-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nota-valor { font-size: 22px; margin-left: auto; }
/* A observação recupera a margem que o summary não dá, e perde a de
   baixo: ela é o último elemento do resumo. */
.cartao--nota > summary .aviso { margin: 10px 0 0; }
.cartao--nota[open] > summary .aviso { margin-bottom: 12px; }

/* O painel de ações em massa: a contagem de marcados fica na linha
   fechada, empurrada para a direita, para se ver a seleção sem abrir. */
.painel-conta { margin-left: auto; font-weight: 600; }

/* Quadro de numeros: os indicadores de um periodo, lado a lado. Mesmo
   `auto-fit` de `.notas-par` — empilha sozinho no celular, sem media
   query. O numero grande e o rotulo pequeno em cima, porque a leitura
   e "o que e" antes de "quanto e". */
.quadro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 16px 0;
  align-items: start;
}
.quadro-item {
  background: var(--superficie, #fff);
  border: 1px solid var(--borda, #d8dee6);
  border-radius: 8px;
  padding: 12px 14px;
}
.quadro-item > span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--texto-apagado, #6d7c89);
}
.quadro-numero { display: block; font-size: 26px; line-height: 1.2; margin: 2px 0 4px; }

/* Grade de campos do painel: colunas que se ajustam, sem media query.
   `linha-campos` (flex) deixava um campo sozinho na segunda linha quando
   a soma das larguras não fechava; a grade mantém as colunas alinhadas. */
.grade-massa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px;
  align-items: end;
}
.grade-massa .campo { margin-bottom: 0; }

/* O rótulo carrega uma etiqueta discreta — "escopo", "local", "RN-042" —
   que substitui o parágrafo que explicava a mesma coisa em três linhas.
   `white-space: nowrap` no rótulo inteiro: quebrar "Margem %" da etiqueta
   "imposta · RN-156" desalinharia essa coluna das outras, porque a grade
   alinha os campos pela base. */
.grade-massa label { white-space: nowrap; }
.grade-massa label .apoio { font-weight: 400; font-size: 11.5px; }

/* A contagem dentro do botão: sem espaço quando vazia. */
#massa-sem-selecao:not(:empty) { margin-left: 5px; }

/* Separa as seções do painel sem virar mais uma borda de cartão. */
.divisor {
  border: 0; border-top: 1px solid var(--borda);
  margin: 18px 0 14px;
}
.cartao--recolhivel h3 { font-size: 15px; margin-bottom: 4px; }

.tabela th.marcar, .tabela td.marcar { width: 34px; text-align: center; }
.marcar-local { margin-right: 6px; }

.vazio {
  text-align: center;
  color: var(--texto-apagado);
  padding: 48px 20px;
}
.vazio h2 { color: var(--texto); }

/* --- Abas e barra de ações -------------------------------------------- */
.abas {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--borda);
  margin: 16px 0 14px;
}
.aba {
  font: inherit; font-size: 14px;
  padding: 8px 14px; border: 0; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; color: var(--texto-suave);
}
.aba:hover { color: var(--texto); background: var(--superficie-alt); }
.aba--ativa {
  color: var(--marca-primaria-escura); font-weight: 600;
  border-bottom-color: var(--marca-primaria);
}

.barra-acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.barra-acoes input[type="search"] {
  font: inherit; padding: 8px 11px; min-width: 220px;
  border: 1px solid var(--borda); border-radius: 5px; background: var(--superficie);
}
.barra-acoes .botao--primario { margin-left: auto; }

/* A mesma barra, usada como rodape de lista: a margem vira para cima, e
   o conjunto fica centrado entre os dois botoes. */
.barra-acoes--paginacao { margin: 14px 0 0; justify-content: center; }

.marcador {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; cursor: pointer;
}

/* --- Tabelas ---------------------------------------------------------- */
.rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-apagado); padding: 10px 14px; background: var(--superficie-alt);
  border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--superficie-alt); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tfoot th { background: var(--superficie); border-top: 1px solid var(--borda); }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela input { font: inherit; padding: 6px 9px; border: 1px solid var(--borda); border-radius: 4px; }

.linha--inativa td { opacity: .55; }

.etiqueta {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 3px;
  background: var(--superficie-alt); color: var(--texto-apagado);
}
.etiqueta--alerta { background: var(--atencao-fundo); color: var(--atencao); margin-top: 4px; }

/* Conferência das doses pedidas contra a projeção, no briefing. */
.etiqueta--coerente { background: var(--sucesso-fundo); color: var(--sucesso); }
.etiqueta--abaixo   { background: var(--atencao-fundo); color: var(--atencao); }
.etiqueta--acima    { background: var(--info-fundo);    color: var(--info); }

/* --- Formulário ------------------------------------------------------- */
.formulario { max-width: 620px; }

/* FORMULÁRIO DE CATÁLOGO, EM TRÊS COLUNAS.
   Escopo restrito a `.formulario--catalogo`, e não a `.formulario` — essa
   classe base é usada por mais de dez formulários (pedido, briefing,
   escopo, bloqueio de agenda, decisões de proposta...), muitos já com o
   próprio agrupamento deliberado via `.linha-campos`. Uma grade genérica
   ali dentro brigaria com esse agrupamento.

   O de catálogo é diferente: é gerado por `campoHtml()` a partir da
   definição em `catalogos.php`, sempre a mesma receita — um `.campo` por
   campo, sem aninhamento. Uma tela como "Editar local" tinha dez campos
   empilhados, cada um com a largura toda, exigindo rolagem para ver o
   botão Salvar. Em grade, cabem três por linha.

   `auto-fit, minmax(230px, 1fr)` decide sozinho quantas colunas cabem —
   três na largura típica do conteúdo, menos num painel estreito ou no
   celular — e por isso nunca força rolagem lateral. O `max-width` do
   contêiner é o que trava em três: mais largo que isso e uma quarta
   coluna caberia, deixando os campos finos demais. */
.formulario--catalogo {
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 4px 18px;
  align-items: start;
}
/* O gap substitui a margem individual do `.campo` — as duas juntas
   dobrariam o espaço entre linhas. */
.formulario--catalogo > .campo { margin-bottom: 10px; }
/* Aviso de erro e barra de botões continuam ocupando a largura toda: são
   o "antes" e o "depois" da grade, não mais um campo dela. */
.formulario--catalogo > .aviso,
.formulario--catalogo > .botoes { grid-column: 1 / -1; }
/* GRUPO DE BOTÕES, EM QUALQUER LUGAR.
   Isto vivia atrás de `.formulario .botoes`, e todo bloco de botões fora
   de um formulário caía no fluxo inline: espaçamento vindo do espaço em
   branco do HTML, alturas desencontradas e nenhuma margem em cima. Era o
   que deixava o painel de ações em massa com os botões colados nos
   campos. */
.botoes {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 16px;
}
/* Dentro de formulário a margem é menor: lá o último campo já traz a
   sua, e 16px viravam 30. */
.formulario .botoes { margin-top: 8px; }

/* No painel recolhível, o botão de texto é a saída — "Limpar seleção" —
   e vai para a ponta, separado das ações que gravam. Escopo estreito de
   propósito: hoje nenhum outro `.botoes` tem botão de texto, e alinhar à
   direita por regra global surpreenderia a próxima tela que tivesse. */
.cartao--recolhivel .botoes .botao--texto { margin-left: auto; }
.obrigatorio { color: var(--erro); }
.ajuda { color: var(--texto-apagado); font-size: 12.5px; }

textarea {
  font: inherit; width: 100%; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 5px;
  background: var(--superficie); color: var(--texto);
}

/* --- Soma dos pesos --------------------------------------------------- */
.soma { font-family: ui-monospace, Consolas, monospace; font-size: 14px; padding: 2px 8px; border-radius: 3px; }
.soma--ok   { background: var(--sucesso-fundo); color: var(--sucesso); }
.soma--erro { background: var(--erro-fundo);    color: var(--erro); }

hr { border: 0; border-top: 1px solid var(--borda); margin: 28px 0; }

/* --- Autocompletar de cidade ------------------------------------------ */
.campo { position: relative; }

.sugestoes {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  max-height: 280px; overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 5px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.sugestao {
  display: block; width: 100%; text-align: left;
  font: inherit; padding: 9px 12px;
  border: 0; border-bottom: 1px solid var(--superficie-alt);
  background: none; cursor: pointer;
}
.sugestao:last-child { border-bottom: 0; }
.sugestao:hover { background: var(--marca-primaria-clara); }
.sugestao--vazia { color: var(--texto-apagado); cursor: default; }

.sugestao-regiao,
.sugestao-sem-regiao { display: block; font-size: 12px; }
.sugestao-regiao     { color: var(--sucesso); }
.sugestao-sem-regiao { color: var(--atencao); }

/* --- Estado da consulta de CEP ---------------------------------------- */
.cep-estado { display: block; font-size: 12.5px; color: var(--texto-apagado); }
.cep-estado--ok    { color: var(--sucesso); }
.cep-estado--aviso { color: var(--atencao); }

/* --- Cabeçalho de registro e rodapé de ação --------------------------- */
.cabecalho-registro {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.cabecalho-registro h1 { margin-bottom: 2px; }

.barra-rodape {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda);
}
.barra-rodape .botao--primario { margin-left: auto; }

.formulario--largo { max-width: 860px; margin-bottom: 16px; }
.formulario--largo h2 { margin-top: 22px; }
.formulario--largo h2:first-child { margin-top: 0; }

.linha-campos { display: flex; gap: 14px; flex-wrap: wrap; }
.linha-campos .campo { flex: 1 1 200px; }

.tabela .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.aviso ul { margin: 6px 0 0; padding-left: 20px; }

/* Status do pedido: a cor separa o que anda do que parou. */
.etiqueta--rascunho, .etiqueta--briefing { background: var(--superficie-alt); color: var(--texto-suave); }
.etiqueta--planejamento, .etiqueta--orcamento { background: var(--info-fundo); color: var(--info); }
.etiqueta--aguardando_aprovacao, .etiqueta--proposta_enviada { background: var(--atencao-fundo); color: var(--atencao); }
.etiqueta--aceita, .etiqueta--aprovada_internamente { background: var(--sucesso-fundo); color: var(--sucesso); }
.etiqueta--perdida, .etiqueta--cancelada, .etiqueta--reprovada { background: var(--erro-fundo); color: var(--erro); }

/* Caixas de marcação em grupo, para escolhas que não são exclusivas.
   O título do grupo usa .rotulo porque cada opção já tem seu <label>, e
   dois labels no mesmo campo confundem o leitor de tela. */
.campo .rotulo { font-size: 13px; font-weight: 600; }

.marcacoes { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 4px 0; }

.marcacao {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 400;   /* .campo label é 600; aqui o negrito é do grupo */
  cursor: pointer;
}

/* .campo input está em width:100%, o que esticaria a caixa. */
.marcacao input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

/* Os sete dias da escala, lado a lado.
   Quebra sozinho no celular: sete pares de caixa e rótulo nao cabem em
   320px, e forcar a linha empurraria domingo para fora da tela. */
.dias-semana {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* Dia da semana que a vigência escolhida não contém. Fica apagado e no
   lugar: escondê-lo mudaria o numero de caixas a cada troca de data, e a
   linha inteira dancaria embaixo do cursor. */
.marcacao--fora {
  opacity: .4;
  cursor: not-allowed;
}

/* Número que passou do limite, no meio de um texto comum. */
.texto-erro { color: var(--erro); }

/* Linha que merece atenção sem ser erro: escopo abaixo do mínimo. */
.linha--alerta td { background: var(--atencao-fundo); }

/* Escopo da campanha: a primeira linha de cada local ganha um traço
   acima, para as vacinas seguintes lerem como continuação do mesmo
   endereço e não como locais diferentes. */
.grupo-local > td { border-top: 2px solid var(--borda); }
.grupo-local:first-child > td { border-top: 0; }

/* =====================================================================
   Calendário de capacidade (M6).

   A cor é a informação. O planejador escolhe a data de relance, e o que
   ele precisa ler é "esta semana está cara" — não uma tabela de
   percentuais. Por isso a escala vai do verde ao vermelho seguindo
   exatamente as faixas da RN-124, e o cinza fica reservado para o dia
   que ninguém abriu ainda: ausência de agenda não é agenda livre.
   ===================================================================== */

.grade-calendario {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 14px;
}

.dia-cabecalho {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-apagado);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding-bottom: 2px;
}

.dia {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 74px;
  padding: 7px 8px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--superficie);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dia:hover  { border-color: var(--marca-primaria); }
.dia:focus-visible { outline: 2px solid var(--marca-secundaria); outline-offset: 1px; }

.dia--vazio { border: 0; background: none; cursor: default; min-height: 0; }

.dia-numero  { font-weight: 700; font-size: 15px; }
.dia-nivel   { font-size: 12px; font-weight: 600; }
.dia-detalhe { font-size: 11px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* A escala da RN-124. Cada degrau é uma faixa do fator de escassez. */
.dia--livre    { background: var(--sucesso-fundo);  border-color: #bcdccd; }
.dia--livre    .dia-nivel { color: var(--sucesso); }
.dia--media    { background: var(--info-fundo);     border-color: #bfd6ea; }
.dia--media    .dia-nivel { color: var(--info); }
.dia--alta     { background: var(--atencao-fundo);  border-color: #e6d0a8; }
.dia--alta     .dia-nivel { color: var(--atencao); }
.dia--critica  { background: #fbe6d8;               border-color: #edc4a5; }
.dia--critica  .dia-nivel { color: var(--nota-alto); }
.dia--esgotada { background: var(--erro-fundo);     border-color: #e8bdb8; }
.dia--esgotada .dia-nivel { color: var(--erro); }

/* Bloqueio é o único "não" do calendário (RN-143): não é caro, é
   impossível — e por isso não entra na escala de cor, sai dela. */
.dia--bloqueada {
  background: repeating-linear-gradient(
    -45deg, var(--superficie-alt), var(--superficie-alt) 5px, #e2e6ec 5px, #e2e6ec 10px);
  border-color: #c4ccd6;
  cursor: pointer;
}
.dia--bloqueada .dia-nivel { color: var(--texto-apagado); }

.legenda-calendario {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--texto-suave);
}

.legenda-calendario span { display: flex; align-items: center; gap: 6px; }

.legenda-calendario i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--borda);
}

/* ---------------------------------------------------------------------
   Sobreposição para decisão pontual.

   Usada onde sair da tela custa: escolher a data do atendimento exige
   olhar o calendário, e navegar até lá abandonaria o formulário pela
   metade. Fora desse caso, tela cheia continua sendo melhor.
   --------------------------------------------------------------------- */

.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(22, 32, 42, .45);
}

.modal {
  width: 100%;
  max-width: 720px;
  background: var(--superficie);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(22, 32, 42, .28);
}

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

.modal-cabecalho h2 { margin: 0; font-size: 17px; }
.modal-corpo { padding: 16px 18px 20px; }

/* Popup de disponibilidade: a mesma grade do calendário, mais apertada
   porque divide espaço com o formulário atrás. */
.grade-calendario--compacta .dia { min-height: 62px; padding: 5px 6px; }
.grade-calendario--compacta .dia-numero { font-size: 14px; }

/* Data já passada continua clicável — remarcar campanha para trás é
   erro de digitação, não decisão, e o servidor é quem recusa. Aqui só
   apaga, para não competir com os dias que interessam. */
.dia--passado { opacity: .45; }

.dia--escolhido { outline: 2px solid var(--marca-primaria); outline-offset: 1px; }

.dia[disabled] { cursor: not-allowed; }
.dia[disabled]:hover { border-color: var(--borda); }

/* Dia que cabe assim mesmo e abre necessidade de recrutamento. Não é
   impedimento: é o preço da escolha aparecendo antes dela. */
.dia-recruta { color: var(--erro); font-weight: 600; }

/* ---------------------------------------------------------------------
   Efetivo do dia.

   O painel que responde a pergunta de quem gerencia: quantas pessoas
   tenho neste dia, e quanto da agenda delas esta ocupada. O − ao lado do
   número é a razão de existir: tirar gente é rotina, e precisa ser tão
   fácil quanto acrescentar.
   --------------------------------------------------------------------- */

.painel-efetivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie-alt);
}

.efetivo-numero { display: flex; align-items: center; gap: 12px; }
.efetivo-numero b { display: block; font-size: 30px; line-height: 1; }
.efetivo-numero span { font-size: 12px; color: var(--texto-suave); }

.botao--redondo {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
}

.efetivo-agenda { flex: 1 1 260px; }
.efetivo-agenda p { margin: 6px 0 0; }

.barra-ocupacao {
  height: 10px;
  border-radius: 5px;
  background: var(--borda);
  overflow: hidden;
}

.barra-ocupacao span {
  display: block;
  height: 100%;
  background: var(--marca-primaria);
}

.efetivo-ajuste { display: flex; align-items: center; gap: 8px; }
.efetivo-ajuste label { font-size: 12px; color: var(--texto-suave); }
.efetivo-ajuste input { width: 80px; }

/* Hora a hora em barras. Dezessete linhas de tabela com zero em todas as
   colunas era ruido: o olho procura onde ha gente, nao onde nao ha. */
.horas-do-dia { display: flex; flex-direction: column; gap: 3px; }

.hora-linha {
  display: grid;
  grid-template-columns: 42px 1fr 80px auto;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}

.hora-linha--bloqueada { opacity: .6; }

.hora-rotulo { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hora-numero { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }

.hora-barra {
  position: relative;
  display: block;
  height: 16px;
  border-radius: 3px;
  background: var(--superficie-alt);
  overflow: hidden;
}

.hora-barra i { position: absolute; top: 0; height: 100%; display: block; }

.hora-capacidade { left: 0; background: var(--marca-primaria-clara); }
.hora-ocupada    { left: 0; background: var(--marca-primaria); }
/* Reserva alem do efetivo: nao e proibido, e caro e precisa saltar. */
.hora-excesso    { background: var(--erro); }

/* ---------------------------------------------------------------------
   Orcamento: numeros grandes, lado a lado.

   O preco e a unica coisa que todo mundo ve, entao ele vem primeiro e
   maior. Custo, margem e piso ficam ao lado, no mesmo tamanho entre si —
   sao detalhe do mesmo assunto, nao tres assuntos.
   --------------------------------------------------------------------- */

.painel-preco {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  align-items: flex-end;
}

.painel-preco .rotulo {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-apagado);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.painel-preco b { display: block; font-variant-numeric: tabular-nums; }
.painel-preco .apoio { display: block; font-size: 12px; }

/* PAR: a mesma fileira de rótulo+valor do documento da proposta
   (proposta.php tem a própria, porque é um HTML impresso à parte — mas o
   marcador de "3 estatísticas lado a lado" é o mesmo, e as telas de
   adendo e proposta usam essa marcação sem precisar do `class="rotulo"`
   que `.painel-preco` exige. Sem esta regra, os `<span>`/`<b>` caíam no
   bloco padrão do navegador — cada estatística na própria linha, sem o
   respiro entre elas. */
.par { display: flex; flex-wrap: wrap; gap: 6px 40px; margin-top: 6px; }
.par > div { min-width: 170px; }
.par span {
  display: block; font-size: 11px; color: var(--texto-apagado);
  text-transform: uppercase; letter-spacing: .3px;
}
.par b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }

.preco-principal b { font-size: 30px; line-height: 1.15; color: var(--marca-primaria); }
.preco-detalhe b   { font-size: 19px; line-height: 1.2; }

/* Status proprios da proposta. Os do projeto ja existem acima; estes
   quatro sao do documento e nao da campanha. */
.etiqueta--gerada, .etiqueta--substituida { background: var(--superficie-alt); color: var(--texto-suave); }
.etiqueta--enviada { background: var(--info-fundo); color: var(--info); }

/* ---------------------------------------------------------------------
   Trilha do funil: onde a proposta esta e o que falta.

   Vale mais que uma etiqueta de status porque mostra o CAMINHO — quem
   abre a tela pela primeira vez entende o processo sem ninguem explicar.
   --------------------------------------------------------------------- */

.trilha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etapa;
}

.trilha-etapa {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 120px;
  font-size: 13px;
  color: var(--texto-apagado);
}

/* A linha que liga uma etapa a outra: e ela que faz ler como caminho, e
   nao como quatro selos soltos. */
.trilha-etapa + .trilha-etapa::before {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--borda);
  margin-right: 4px;
}

.trilha-ponto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--borda);
  background: var(--superficie);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

.trilha-etapa--feita { color: var(--texto); font-weight: 600; }
.trilha-etapa--feita .trilha-ponto {
  border-color: var(--marca-primaria);
  background: var(--marca-primaria);
  color: #fff;
}
.trilha-etapa--feita + .trilha-etapa::before { background: var(--marca-primaria); }

/* Reprovada ou perdida: o caminho parou aqui, e a cor diz isso sem
   precisar de legenda. */
.trilha-etapa--desvio .trilha-ponto {
  border-color: var(--erro);
  background: var(--erro);
}

/* ---------------------------------------------------------------------
   Cronograma. O D-7 e a informacao mais densa da linha: e ele que diz se
   o marco e preparacao, execucao ou fechamento, sem precisar ler o nome.
   --------------------------------------------------------------------- */

.etiqueta-offset {
  display: inline-block;
  min-width: 40px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--superficie-alt);
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.dia-agenda { display: flex; align-items: baseline; gap: 10px; margin-top: 0; }
.dia-agenda--hoje { color: var(--marca-primaria); }

/* Marco feito continua legivel — riscar esconderia justamente o que a
   operacao quer conferir. So perde o peso. */
.marco--feito { font-weight: 400; color: var(--texto-suave); }

/* ---------------------------------------------------------------------
   Abas: duas visoes do mesmo assunto.
   --------------------------------------------------------------------- */

.abas {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--borda);
  margin: 10px 0 14px;
}

.aba {
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--texto-suave);
  cursor: pointer;
}

.aba:hover { color: var(--texto); }

.aba--ativa {
  color: var(--marca-primaria);
  border-bottom-color: var(--marca-primaria);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Trilha do funil, em bolinhas.

   Vale mais que a coluna de status porque mostra o CAMINHO: da para ver
   de relance que a campanha travou entre a proposta e a aprovacao, sem
   ler nenhum numero.
   --------------------------------------------------------------------- */

.funil-trilha { display: flex; align-items: center; gap: 3px; }

.funil-passo {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--borda);
  background: var(--superficie);
  cursor: help;
}

.funil-passo--feito {
  border-color: var(--marca-primaria);
  background: var(--marca-primaria);
}

/* A linha entre as bolinhas fecha a leitura de caminho. */
.funil-passo + .funil-passo { margin-left: 6px; position: relative; }
.funil-passo + .funil-passo::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: 6px;
  height: 2px;
  background: var(--borda);
}
.funil-passo--feito + .funil-passo--feito::before { background: var(--marca-primaria); }

/* ---------------------------------------------------------------------
   A faixa do proximo passo.

   Aparece no topo de cinco telas, entao precisa ser densa: alta demais e
   empurra para fora justamente o conteudo que a pessoa veio usar. Duas
   colunas — o que fazer a esquerda, quanto falta e o botao a direita.
   --------------------------------------------------------------------- */

.roteiro {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--marca-primaria-clara);
  border-left: 4px solid var(--marca-primaria);
  border-radius: 8px;
  background: var(--superficie);
}

.roteiro--pronto { border-left-color: var(--sucesso); background: var(--sucesso-fundo); }

.roteiro-passo { flex: 1 1 340px; }

.roteiro-rotulo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--marca-primaria);
}

.roteiro-passo b { display: block; font-size: 17px; margin: 2px 0 3px; }
.roteiro-porque { display: block; font-size: 13px; color: var(--texto-suave); }

.roteiro-falta {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

.roteiro-falta li { margin-bottom: 2px; }

.roteiro-lado {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 190px;
}

.roteiro-contagem { font-size: 12px; color: var(--texto-suave); }
.roteiro-contagem b { font-size: 15px; color: var(--texto); }

.roteiro-barra {
  height: 6px;
  margin: 4px 0 2px;
  border-radius: 3px;
  background: var(--borda);
  overflow: hidden;
}

.roteiro-barra span { display: block; height: 100%; background: var(--marca-primaria); }

/* O que nao trava (RN-008) fica FORA da faixa e em tom de aviso. Dentro
   dela, com a mesma cor, viraria mais um item da lista do que falta — e
   a pessoa iria atras de um dado que o cliente ainda nao mandou. */
.roteiro-avisos {
  padding: 10px 14px;
  margin: -6px 0 14px;
  border: 1px solid var(--borda);
  border-radius: 0 0 8px 8px;
  background: var(--superficie-alt);
  font-size: 13px;
  color: var(--texto-suave);
}

.roteiro-avisos ul { margin: 4px 0 0; padding-left: 18px; }

/* O caminho todo, no modal. */
.roteiro-lista { list-style: none; margin: 0; padding: 0; }

.roteiro-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}

.roteiro-item:last-child { border-bottom: 0; }

.roteiro-marca {
  flex: 0 0 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--borda);
  font-size: 13px;
  font-weight: 700;
}

.roteiro-item--feito { color: var(--texto-suave); }
.roteiro-item--feito .roteiro-marca {
  border-color: var(--marca-primaria);
  background: var(--marca-primaria);
  color: #fff;
}

.roteiro-item--atual .roteiro-marca {
  border-color: var(--marca-primaria);
  color: var(--marca-primaria);
}
.roteiro-item--atual b { color: var(--marca-primaria); }

/* ---------------------------------------------------------------------
   Painel de vendas — as abas são as etapas da venda, e cada uma carrega
   quantas campanhas estão paradas nela.

   O `flex-wrap` é do painel, e não do cronograma: com duas abas nada
   quebra de linha nunca, com oito quebra em tela estreita. Sem ele, a
   última etapa sai da tela — e a última etapa é "Perdidas", que é
   exatamente a que ninguém pode deixar de ver.
   --------------------------------------------------------------------- */
.abas { flex-wrap: wrap; }

.aba .contador {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--superficie-alt);
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.aba--ativa .contador {
  background: var(--marca-primaria-clara);
  color: var(--marca-primaria-escura);
}

/* A ação que a aba está pedindo, em destaque entre as outras da linha.
   Continua sendo `botao--texto` — a tabela ficaria pesada com três
   botões sólidos por linha, e o que se quer é hierarquia, não peso. */
.botao--texto.botao--primeira {
  color: var(--marca-primaria-escura);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Prospecção (TL-078 a TL-081).

   A temperatura ganha cor porque é o que se lê de relance numa lista de
   quarenta oportunidades. Frio usa o cinza do apagado, e não vermelho:
   oportunidade fria não é erro nem urgência — é trabalho parado, e o
   vermelho já significa perda no resto do sistema.
   --------------------------------------------------------------------- */
.etiqueta--temp-quente { background: var(--erro-fundo);     color: var(--erro); }
.etiqueta--temp-morno  { background: var(--atencao-fundo);  color: var(--atencao); }
.etiqueta--temp-frio   { background: var(--superficie-alt); color: var(--texto-suave); }

/* A faixa de números do funil de prospecção. */
.cartao--kpi {
  display: flex; flex-wrap: wrap; gap: 32px;
  padding: 16px 20px;
}
.cartao--kpi .kpi { display: flex; flex-direction: column; }
.cartao--kpi .kpi b { font-size: 20px; color: var(--texto); line-height: 1.3; }

/* ---------------------------------------------------------------------
   Quadro do funil (TL-083).

   Rola na horizontal dentro do próprio container, e nunca no corpo da
   página: com quatro colunas em tela estreita, é a coluna que desliza —
   a tela inteira deslizando levaria o menu junto.
   --------------------------------------------------------------------- */
.quadro {
  display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 8px;
}
.quadro-coluna {
  flex: 0 0 260px; background: var(--superficie-alt);
  border-radius: 6px; padding: 10px;
}
/* A coluna que não recebe: o cinza mais claro diz isso antes do gesto. */
.quadro-coluna--fixa { opacity: .75; }
.quadro-coluna--alvo { outline: 2px dashed var(--marca-primaria); }

.quadro-cabecalho { margin-bottom: 8px; }
.quadro-cabecalho b { font-size: 14px; }
.quadro-itens { display: flex; flex-direction: column; gap: 8px; }

.cartao-quadro {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 5px; padding: 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.cartao-quadro[draggable] { cursor: grab; }
.cartao-quadro.arrastando { opacity: .4; }
.cartao-quadro-rodape {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}

/* =====================================================================
   Etiquetas do cliente e linha do tempo (migration 062).

   As cores da etiqueta sao ESCOLHIDAS por quem a cria, e por isso sao
   nomes de cor e nao nomes de significado: `etiqueta--verde` e o que o
   catalogo guarda, e amanha "fidelizado" pode deixar de ser verde sem
   que ninguem precise mexer no CSS.

   Todas usam as variaveis que ja existem. Nenhum valor de cor novo entra
   aqui: o tema decide, e uma cor solta seria a primeira a destoar no dia
   em que a marca mudar.
   ===================================================================== */
.etiqueta--neutra   { background: var(--superficie-alt); color: var(--texto-apagado); }
.etiqueta--verde    { background: var(--sucesso-fundo);  color: var(--sucesso); }
.etiqueta--azul     { background: var(--info-fundo);     color: var(--info); }
.etiqueta--amarela  { background: var(--atencao-fundo);  color: var(--atencao); }
.etiqueta--vermelha { background: var(--erro-fundo);     color: var(--erro); }
.etiqueta--roxa     { background: var(--superficie-alt); color: var(--texto-suave); }

/* Os tipos da linha do tempo. Discretos de proposito: a etiqueta ali e
   so para separar o que e conversa do que e desfecho quando se percorre
   a coluna com o olho. Colorir as sete faria a lista parecer um alarme. */
.etiqueta--interacao,
.etiqueta--tarefa,
.etiqueta--email    { background: var(--superficie-alt); color: var(--texto-apagado); }
.etiqueta--execucao { background: var(--info-fundo);     color: var(--info); }
.etiqueta--abertura { background: var(--sucesso-fundo);  color: var(--sucesso); }
.etiqueta--desfecho { background: var(--atencao-fundo);  color: var(--atencao); }

/* A linha que o olho deve pegar primeiro na linha do tempo: o cliente
   abriu a proposta, ou a campanha teve desfecho. */
.linha--destaque td { background: var(--superficie-alt); }