/* ============================================================
   Agenda · telas do médico (financeiro, configurações, grade)
   ------------------------------------------------------------
   O que só o médico vê. Carregado DEPOIS do agenda.css; as cores
   continuam vindo do tokens.css/identidade.css (nada de cor solta aqui),
   então tudo acompanha o tema claro e o escuro.

   A parte mais importante deste arquivo é o gráfico do financeiro: ele é
   um <svg> escrito no próprio Jinja (sem biblioteca e sem JavaScript, que
   a CSP recusaria), e as cores das barras vêm daqui — um atributo
   fill="var(--...)" no SVG não resolveria a variável em todo navegador.
   ============================================================ */

/* --- Placar do mês: receita, despesas, saldo --- */
.placar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 20px 0;
}
.placar-item {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: 12px; padding: 14px 18px;
}
.placar-item .numero {
  display: block; font-size: 26px; font-weight: 700;
  line-height: 1.2; margin: 2px 0;
}
.placar-item .sub-linha { display: block; }

/* Verde e vermelho de dinheiro: os mesmos tokens do "deu certo" e do
   "cuidado" do resto do sistema. A cor NUNCA vem sozinha — ao lado dela
   sempre há o sinal de menos e uma frase ("o mês fechou no vermelho"). */
.positivo { color: var(--nt-ok); }
.negativo { color: var(--nt-risk); }

/* --- Lançar despesa: descrição larga, valor curto, botão no fim --- */
.linha-despesa {
  display: grid; grid-template-columns: 3fr 1fr auto;
  gap: 8px 16px; align-items: end;
}
.linha-despesa .acoes { margin: 0; }

/* --- O gráfico dos 12 meses --- */
.grafico { display: block; min-width: 620px; max-width: 100%; height: auto; }
.grafico .g-receita { fill: var(--nt-ok); }
.grafico .g-despesa { fill: var(--nt-risk); }
.grafico .g-saldo { fill: none; stroke: var(--nt-brand); stroke-width: 2; }
.grafico .g-ponto { fill: var(--nt-brand); }
.grafico .g-linha { stroke: var(--nt-line); stroke-width: 1; }
.grafico .g-zero { stroke: var(--nt-muted); stroke-width: 1; }
/* 13 px: os rótulos dos meses e dos valores são lidos no celular também. */
.grafico .g-texto { fill: var(--nt-muted); font-size: 13px; }

.legenda-grafico { color: var(--cinza); font-size: 13px; margin: 0 0 8px; }
.legenda-grafico .chave {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin: 0 4px 0 14px; vertical-align: baseline;
}
.legenda-grafico .chave:first-child { margin-left: 0; }
.legenda-grafico .chave.receita { background: var(--nt-ok); }
.legenda-grafico .chave.despesa { background: var(--nt-risk); }
.legenda-grafico .chave.saldo { background: var(--nt-brand); border-radius: 50%; }

/* Os mesmos números do gráfico, em tabela, para quem prefere ler (e para
   quem usa leitor de tela). Fechada por padrão, para não encher a página. */
.numeros-grafico { margin-top: 16px; }
.numeros-grafico summary {
  cursor: pointer; color: var(--azul); font-weight: 600; font-size: 14px;
}
.numeros-grafico .tabela { margin-top: 10px; }
.tabela tr.linha-atual { background: var(--nt-brand-soft); }

/* --- Configurações: o modelo da mensagem e o exemplo, lado a lado --- */
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lado-a-lado > label { margin: 0; }
.exemplo-mensagem { margin: 0; align-self: start; }
.exemplo-mensagem h3 { margin-top: 0; }
.mensagem-exemplo {
  background: var(--fundo); border: 1px solid var(--linha);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 0 0 8px;
  white-space: pre-wrap;
}

/* Lacuna da mensagem ({nome}, {hora}…) escrita como código, para se
   distinguir do texto ao redor. Escopo curto de propósito: só onde a
   tela realmente mostra uma lacuna. */
.dica code, .sub-linha code, .formulario code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em; background: var(--fundo);
  border: 1px solid var(--linha); border-radius: 5px; padding: 1px 5px;
}

@media (max-width: 900px) {
  .placar { grid-template-columns: 1fr; }
  .lado-a-lado { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .linha-despesa { grid-template-columns: 1fr; }
  .linha-despesa .acoes button { width: 100%; }
}

/* ============================================================
   Estoque e vendas (OS-6) — só o médico
   ============================================================ */

/* O placar do financeiro passou a ter seis itens (as quatro parcelas, a
   receita total e o saldo): as colunas se acomodam sozinhas, em vez de
   ficarem presas em três. */
.placar { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Linha estornada: continua na tela, riscada — nada se apaga. A cor
   sozinha não informa; ao lado há sempre a etiqueta "estornada". */
.tabela tr.estornado td { text-decoration: line-through; }
.tabela tr.estornado td .etiqueta,
.tabela tr.estornado td a { text-decoration: none; }

/* Estornar exige motivo: o campo e o botão ficam na própria linha da
   tabela, para não abrir outra tela só por causa de uma frase. Empilhados
   (campo em cima, botão embaixo) porque lado a lado a coluna empurrava o
   botão para fora da tela numa tabela de oito colunas. */
.formulario-estorno {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; margin: 0; width: 8.5em;
}
.formulario-estorno input {
  width: 100%; min-width: 0; padding: 4px 8px; font-size: 13px; margin: 0;
}

/* O `@media (max-width: 900px)` lá de cima cai por causa da ordem (a regra
   de auto-fit vem depois e tem a mesma força), e isso é de propósito: com
   seis itens, duas colunas no tablet leem melhor que uma. No celular,
   volta a ser uma coluna só. */
@media (max-width: 560px) {
  .placar { grid-template-columns: 1fr; }
}

/* Estornar no celular: o campo do motivo cabia em 8,5em e ficava com 13 px
   (o iOS dá zoom em campo abaixo de 16 px) e 26 px de altura. */
@media (max-width: 640px) {
  .formulario-estorno { width: auto; }
  .formulario-estorno input { font-size: 16px; min-height: 44px; }
}