/* Painel da clinica — paleta neutra quente com acento rose/terracota.
   Placeholder ate a marca da Maira chegar; cores centralizadas no :root.
   Layout no padrao SaaS: sidebar agrupada, topo com breadcrumb, KPIs com icone. */
:root {
  --fundo: #faf7f5;
  --superficie: #ffffff;
  --borda: #e8ded9;
  --texto: #2e2724;
  --texto-suave: #8a7c74;
  --acento: #a86b5d;
  --acento-forte: #96594c;
  --acento-suave: #f3e5e1;
  --ok: #4e8a5e;
  --alerta: #b0483c;
  --sombra: 0 1px 3px rgba(46, 39, 36, 0.06);
  --sombra-alta: 0 18px 45px rgba(46, 39, 36, 0.22);
  --fonte-titulo: "Fraunces", Georgia, serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 15px;
}
.oculto { display: none !important; }
button { cursor: pointer; font: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ic {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Login ---- */
#tela-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 16px;
}
.cartao-login {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 18px; box-shadow: var(--sombra);
  padding: 44px 32px; width: 100%; max-width: 360px; text-align: center;
}
.cartao-login h1 {
  font-family: var(--fonte-titulo);
  font-size: 28px; font-weight: 600; color: var(--acento);
}
.cartao-login p { color: var(--texto-suave); margin: 4px 0 26px; }
.cartao-login input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--borda);
  border-radius: 10px; font: inherit; margin-bottom: 12px; background: var(--fundo);
}
.cartao-login button {
  width: 100%; padding: 12px; border: 0; border-radius: 10px;
  background: var(--acento); color: #fff; font-weight: 600;
  transition: background 180ms ease, transform 120ms ease;
}
.cartao-login button:hover { background: var(--acento-forte); }
.cartao-login button:active { transform: translateY(1px); }
.erro { color: var(--alerta); margin-top: 10px; min-height: 1.2em; font-size: 14px; }

/* ---- Estrutura ---- */
#app { display: flex; height: 100dvh; }
#menu {
  width: 240px; flex-shrink: 0; background: var(--superficie);
  border-right: 1px solid var(--borda);
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column;
}
.marca {
  font-family: var(--fonte-titulo);
  font-size: 22px; font-weight: 600; color: var(--acento);
  padding: 24px 24px 18px; line-height: 1.05;
}
.marca span {
  font-family: "Outfit", sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--texto-suave);
}
#menu nav { flex: 1; overflow-y: auto; padding-bottom: 12px; }
#menu nav .grupo {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--texto-suave); padding: 18px 24px 6px;
}
#menu nav a {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 12px; padding: 9px 12px; border-radius: 10px;
  color: var(--texto); text-decoration: none; font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}
#menu nav a .ic { color: var(--texto-suave); transition: color 150ms ease; }
#menu nav a:hover { background: var(--fundo); }
#menu nav a.ativo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
#menu nav a.ativo .ic { color: var(--acento); }
#menu nav a em { margin-left: auto; font-size: 10px; color: var(--texto-suave); font-style: normal; }
.badge {
  margin-left: auto; min-width: 20px; text-align: center;
  background: var(--acento); color: #fff; border-radius: 99px;
  font-size: 11px; font-weight: 600; font-style: normal; padding: 2px 7px;
}
.badge:empty { display: none; }
.menu-rodape {
  border-top: 1px solid var(--borda); padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
}
.menu-rodape .avatar {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  background: var(--acento-suave); color: var(--acento);
  font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.menu-rodape .quem { line-height: 1.25; min-width: 0; }
.menu-rodape .quem strong { display: block; font-size: 14px; }
.menu-rodape .quem span { font-size: 12px; color: var(--texto-suave); }

#principal { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#topo {
  background: var(--superficie); border-bottom: 1px solid var(--borda);
  padding: 14px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
}
.migalha { font-size: 13px; color: var(--texto-suave); }
.migalha span { margin: 0 4px; opacity: 0.6; }
.migalha strong { color: var(--texto); font-weight: 600; }
.topo-data { font-size: 13px; color: var(--texto-suave); }
.topo-data::first-letter { text-transform: uppercase; }
/* Sem limite de largura: o conteudo ocupa o canvas inteiro. Coluna flex pra que
   o ultimo bloco da tela possa esticar ate o rodape. */
#conteudo {
  flex: 1; width: 100%; padding: 28px 32px 40px;
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
}
/* Conversas ocupa o canvas inteiro, sem moldura nem limite de largura */
#conteudo.tela-cheia { max-width: none; padding: 0; display: flex; min-height: 0; }
#conteudo.tela-cheia .chat-caixa.cheia {
  flex: 1; width: 100%; height: auto; min-height: 0;
  border: 0; border-radius: 0; box-shadow: none;
}
#conteudo.tela-cheia { overflow: hidden; }

/* O nome da tela vive so na migalha, la em cima. Aqui ficam so as acoes,
   encostadas na direita; a agenda e a excecao, com a navegacao de mes na esquerda. */
.topo-tela {
  display: flex; align-items: center; justify-content: flex-end;
  margin-bottom: 20px; gap: 12px; flex-wrap: wrap; flex-shrink: 0;
}
.topo-tela:has(.agenda-nav) { justify-content: space-between; }
.titulo-secao { font-size: 17px; font-weight: 600; margin: 26px 0 12px; }
/* Linha de contexto logo abaixo do titulo da tela: explica a regra da lista */
.aviso-tela {
  margin: -8px 0 18px; max-width: 62ch;
  font-size: 13px; line-height: 1.5; color: var(--texto-suave);
}
.botao {
  border: 0; border-radius: 10px; background: var(--acento); color: #fff;
  padding: 10px 16px; font-weight: 600;
  transition: background 180ms ease, transform 120ms ease, border-color 150ms ease;
}
.botao:hover { background: var(--acento-forte); }
.botao:active { transform: translateY(1px); }
.botao.claro { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); }
.botao.claro:hover { background: var(--fundo); border-color: var(--texto-suave); }
.botao.mini { padding: 5px 10px; font-size: 13px; font-weight: 500; }
.botao.perigo { background: transparent; color: var(--alerta); border: 1px solid var(--borda); }
.botao.perigo:hover { background: #f7e3e0; border-color: var(--alerta); }

/* ---- Cards ---- */
.grade-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 14px; margin-bottom: 24px;
}
/* Seis KPIs: coluna mais estreita pra caberem numa linha so em vez de sobrar
   um card sozinho na segunda fileira. */
/* 158px e o que faz os seis caberem numa fileira ate num notebook de 1366.
   A fileira do KPI e o que sobra ou falta pras duas fileiras de grafico. */
.grade-cards.seis { grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr)); }
.card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; padding: 18px; box-shadow: var(--sombra);
}
.card .rotulo { color: var(--texto-suave); font-size: 13px; font-weight: 500; }
.card .valor { font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card .valor.ok { color: var(--ok); }
.card .valor.alerta { color: var(--alerta); }
.kpi-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kpi-icone {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--acento-suave); color: var(--acento);
  display: flex; align-items: center; justify-content: center;
}
.kpi-icone .ic { width: 17px; height: 17px; }
.kpi-sub { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }

/* Resumo: tabela do dia + coluna lateral (laser + avisos) */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.coluna-titulo { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.coluna-lado { display: flex; flex-direction: column; gap: 14px; }
.agora-linha {
  background: var(--acento-suave); color: var(--texto);
  border-radius: 10px; padding: 9px 14px; font-size: 13px; margin-bottom: 12px;
}
.agora-linha strong { color: var(--acento); }
.avisos-card .kpi-topo { margin-bottom: 8px; }
.aviso {
  display: block; padding: 9px 12px; margin-top: 6px; border-radius: 10px;
  background: var(--fundo); border: 1px solid var(--borda);
  color: var(--texto); text-decoration: none; font-size: 13px; line-height: 1.4;
  transition: border-color 130ms ease, background 130ms ease;
}
.aviso:hover { border-color: var(--acento); }
.aviso.alerta { background: #f7e3e0; border-color: #eccfca; }
.laser-destaque .data-grande {
  font-family: var(--fonte-titulo); font-size: 27px; font-weight: 600; color: var(--acento);
}
.laser-destaque .kpi-sub { margin-top: 2px; }
.laser-destaque .meta { color: var(--texto-suave); font-size: 13px; margin-top: 12px; }
.laser-destaque .botao { margin-top: 14px; width: 100%; }

/* ---- Tabelas ---- */
.envelope-tabela {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; overflow-x: auto; box-shadow: var(--sombra);
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--texto-suave); background: var(--fundo); font-weight: 600;
}
tr:last-child td { border-bottom: 0; }
tr.clicavel { transition: background 120ms ease; }
tr.clicavel:hover { background: var(--fundo); cursor: pointer; }
.vazio { padding: 36px; text-align: center; color: var(--texto-suave); }

.etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; background: var(--acento-suave); color: var(--acento);
}
.etiqueta:not(.neutra)::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px;
}
.etiqueta.ok { background: #e4efe6; color: var(--ok); }
.etiqueta.alerta { background: #f7e3e0; color: var(--alerta); }
.etiqueta.neutra { background: var(--fundo); color: var(--texto-suave); }
/* Coluna de tags na listagem: quebra em varias linhas em vez de esticar a tabela
   — cliente com quatro tags nao pode empurrar a coluna de observacoes pra fora. */
.tags-celula { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }

/* ---- Barra de ocupacao (laser) ---- */
.barra { height: 8px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.barra > i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }
.laser-card { margin-bottom: 0; }
.laser-card .linha1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.laser-card .linha1 strong { font-size: 17px; }
.laser-card .meta { color: var(--texto-suave); font-size: 13px; margin-top: 4px; }

/* ---- Agenda ---- */
.agenda-nav { display: flex; align-items: center; gap: 10px; }
.agenda-nav strong { min-width: 160px; text-align: center; }
.agenda-nav strong::first-letter { text-transform: uppercase; }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.calendario .dia-semana { text-align: center; font-size: 12px; color: var(--texto-suave); padding: 4px 0; text-transform: uppercase; }
.calendario .dia {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  min-height: 64px; padding: 6px; font-size: 13px; cursor: pointer;
  transition: border-color 130ms ease;
}
.calendario .dia:hover { border-color: var(--acento); }
.calendario .dia.fora { opacity: 0.35; }
.calendario .dia.hoje { border-color: var(--acento); border-width: 2px; }
.calendario .dia.selecionado { background: var(--acento-suave); }
.calendario .dia .num { font-weight: 600; }
.calendario .dia .pontos { margin-top: 4px; color: var(--acento); font-size: 12px; font-weight: 600; }
.calendario .dia .laser-flag { display: inline-block; font-size: 10px; background: var(--acento); color: #fff; border-radius: 5px; padding: 1px 5px; margin-top: 4px; }

/* ---- Conversas (chat) ---- */
.chat-caixa {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; box-shadow: var(--sombra); overflow: hidden;
  height: calc(100dvh - 190px); min-height: 420px;
}
/* Cada coluna rola por dentro; nenhuma empurra a caixa. */
.chat-caixa > * { min-height: 0; }
.chat-caixa.cheia { height: calc(100dvh - 130px); }
.chat-lista { border-right: 1px solid var(--borda); overflow-y: auto; }
.chat-busca {
  position: sticky; top: 0; z-index: 2; background: var(--superficie);
  padding: 10px 12px; border-bottom: 1px solid var(--borda);
}
.chat-busca input {
  width: 100%; padding: 9px 14px; border: 1px solid var(--borda);
  border-radius: 99px; font: inherit; font-size: 13px; background: var(--fundo);
}
.chat-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  cursor: pointer; border-bottom: 1px solid var(--borda);
  transition: background 120ms ease;
}
.chat-item:hover { background: var(--fundo); }
.chat-item.ativo { background: var(--acento-suave); }
.chat-item .badge { margin-left: 0; }
.chat-item-fim {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; flex-shrink: 0;
}
.chat-item-fim time { font-size: 11px; color: var(--texto-suave); }
.chat-item-meio { flex: 1; min-width: 0; line-height: 1.3; }
.chat-item-meio strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-meio span {
  display: block; font-size: 12px; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avatar {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  background: var(--acento-suave); color: var(--acento);
  font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.avatar svg { width: 20px; height: 20px; fill: currentColor; }
.avatar.grande svg { width: 30px; height: 30px; }
.chat-painel { display: flex; flex-direction: column; min-width: 0; }
.chat-painel > .vazio { margin: auto; }
.chat-cabecalho {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--borda); background: var(--superficie);
}
.chat-cabecalho strong { display: block; font-size: 15px; }
.chat-voltar { display: none; }
@media (max-width: 940px) { .chat-voltar { display: inline-block; } }
.chat-cabecalho span { font-size: 12px; color: var(--texto-suave); }
.chat-mensagens {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--fundo) radial-gradient(rgba(168, 107, 93, 0.06) 1px, transparent 1.4px);
  background-size: 20px 20px;
}
.dia-separador { text-align: center; margin: 10px 0 4px; }
.dia-separador span {
  display: inline-block; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 99px; padding: 3px 12px; font-size: 11px; font-weight: 600;
  color: var(--texto-suave);
}
.bolha {
  max-width: min(72%, 560px); padding: 9px 12px; border-radius: 14px;
  font-size: 14px; line-height: 1.4; overflow-wrap: break-word;
}
.bolha time { display: block; font-size: 10px; color: var(--texto-suave); margin-top: 4px; text-align: right; }
.bolha.entrada { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.bolha.saida { align-self: flex-end; background: var(--acento-suave); border: 1px solid #ead6d0; border-bottom-right-radius: 4px; }
.chat-envio {
  display: flex; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--borda); background: var(--superficie);
}
.chat-envio input {
  flex: 1; padding: 11px 18px; border: 1px solid var(--borda);
  border-radius: 99px; font: inherit; background: var(--fundo); min-width: 0;
}
.chat-enviar {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.chat-enviar svg {
  width: 19px; height: 19px; fill: none; stroke: #fff;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  margin-right: 2px;
}
.chat-lista-vazia { padding: 24px 16px; font-size: 13px; }
.chat-lista-vazia a { color: var(--acento); }
.cabecalho-acoes { margin-left: auto; }

/* Perfil do contato (coluna direita do chat) */
.chat-caixa.com-perfil { grid-template-columns: 280px minmax(0, 1fr) 300px; }
.chat-perfil { display: none; border-left: 1px solid var(--borda); overflow-y: auto; min-width: 0; }
.chat-caixa.com-perfil .chat-perfil { display: block; }
.perfil-topo {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--superficie);
}
.perfil-topo strong { font-size: 14px; }
.perfil-corpo { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.avatar.grande { width: 56px; height: 56px; font-size: 24px; border-radius: 16px; margin: 4px auto 0; }
.perfil-nome { text-align: center; font-size: 16px; }
.perfil-numero { text-align: center; color: var(--texto-suave); font-size: 12px; }
.perfil-tipo { text-align: center; margin-bottom: 6px; }
.perfil-secao {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--texto-suave); margin-top: 12px;
}
.perfil-nome-linha { display: flex; align-items: center; justify-content: center; gap: 6px; }
.perfil-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  border: 1px solid transparent; background: var(--acento-suave); color: var(--acento);
  border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 600;
  transition: background 130ms ease;
}
.tag:hover { background: #ead6d0; }
/* Seletor de tags do perfil. Reaproveita o dropdown da casa (.select-botao e
   .select-lista) em vez de desenhar outro: a lista do <datalist> que estava aqui
   era pintada pelo navegador, nao seguia token nenhum e crescia sem teto. Aqui a
   lista herda sombra, canto e o limite de 260px com rolagem. */
.tag-picker { position: relative; margin-top: 8px; }
.tag-picker .select-botao { padding: 8px 11px; font-size: 13px; }
.tag-picker .select-lista { padding: 8px; }
.tag-picker.aberto .select-botao {
  border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave);
}
.tag-picker.aberto .tag-picker-lista { display: block; }
.tag-picker-busca {
  width: 100%; padding: 7px 10px; margin-bottom: 8px; font: inherit; font-size: 13px;
  color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px;
}
.tag-picker-busca:focus { outline: none; border-color: var(--acento); }
.tag-picker-grupos { display: flex; flex-direction: column; gap: 11px; }
.tag-picker-grupo { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-picker-titulo {
  width: 100%; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texto-suave);
}
.tag-picker-opcao {
  border: 1px dashed var(--borda); background: var(--fundo); color: var(--texto-suave);
  border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}
.tag-picker-opcao:hover { border-style: solid; border-color: var(--acento); color: var(--acento); }
.tag-picker-opcao.marcada {
  background: var(--acento-suave); color: var(--acento);
  border-style: solid; border-color: transparent; font-weight: 600;
}
.tag-picker-opcao.criar { border-style: solid; }
.tag-picker-vazio { padding: 2px; }
.perfil-historico { display: flex; flex-direction: column; gap: 6px; }
.perfil-atendimento {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: 13px;
}
#perfil-obs {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 8px; font: inherit; background: var(--fundo); resize: vertical;
}

/* ---- Configuracao ---- */
.config-card { margin-bottom: 0; }
.config-texto { font-size: 14px; color: var(--texto-suave); margin: 10px 0; line-height: 1.5; }
.config-texto code {
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 6px; padding: 1px 6px; font-size: 12px;
}
.config-texto.erro-config { color: var(--alerta); }
/* Par de campos que so faz sentido junto: minimo e maximo, inicio e fim. */
.par-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.par-campos + .kpi-sub, input + .kpi-sub { display: block; margin: 6px 0 4px; }
.config-passos { margin: 10px 0 4px 18px; font-size: 14px; line-height: 1.9; color: var(--texto); }
.qr-imagem {
  display: block; width: 240px; max-width: 100%; margin: 14px 0 4px;
  border: 1px solid var(--borda); border-radius: 12px; background: #fff; padding: 10px;
}

/* ---- Automacoes ---- */
/* Quatro ferramentas independentes numa tela so davam metros de scroll. Agora a
   barra troca de painel e o estado geral fica sempre visivel do lado direito,
   pra nao ter que entrar em cada aba so pra saber se esta ligado. */
.barra-automacoes {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px; flex-shrink: 0;
}
.abas-internas {
  display: flex; gap: 4px; padding: 4px; background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 12px; flex-wrap: wrap;
}
.aba-interna {
  border: 1px solid transparent; background: transparent; color: var(--texto-suave);
  padding: 7px 14px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 130ms ease, color 130ms ease;
}
.aba-interna:hover { color: var(--texto); background: var(--superficie); }
.aba-interna.ativa {
  background: var(--superficie); color: var(--acento); font-weight: 600;
  border-color: var(--borda); box-shadow: var(--sombra);
}
.linha-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.barra-automacoes .linha-chips { margin-bottom: 0; }

/* Aviso de envio pendente. Fica acima dos paineis e nao dentro de um deles,
   porque a pendencia e da tela inteira — quem esta na aba do Agente tambem
   precisa saber que tem convite parado no Ciclo. */
.painel-pendencias {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--acento-suave); border: 1px solid var(--acento);
}
.painel-pendencias > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.painel-pendencias strong { font-size: 14px; color: var(--acento-forte); }
.painel-pendencias span { font-size: 14px; color: var(--texto); }
.painel-pendencias em { font-size: 13px; color: var(--texto-suave); font-style: normal; }
.painel-pendencias .botao { margin-left: auto; flex-shrink: 0; }
.pend-icone { display: grid; place-items: center; flex-shrink: 0; color: var(--acento); }
.pend-icone .ic { width: 20px; height: 20px; }

/* Enviar todos fica antes das tres listas: e a acao do bloco inteiro, e depois
   delas ficaria a uma rolagem de distancia do que descreve. */
.linha-enviar-tudo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--borda);
}
.linha-enviar-tudo .kpi-sub { flex: 1; min-width: 200px; }
.form-config label, .rotulo-campo {
  display: block; font-size: 13px; color: var(--texto-suave); margin: 12px 0 4px;
}
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.linha-botoes { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.lista-escolha {
  margin-top: 12px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; background: var(--fundo);
}
.lista-escolha label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lista-escolha .escolha-todas { padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
.lista-escolha + .botao { margin-top: 14px; }
.codigo-copiar { display: flex; gap: 8px; align-items: center; }
.codigo-copiar code {
  flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 8px; padding: 8px 10px;
}
.codigo-copiar input { flex: 1; }
.lista-convite, .lembrete-bloco { border-top: 1px solid var(--borda); margin-top: 16px; padding-top: 14px; }
.lembrete-bloco .botao { margin-top: 10px; }
.bloco-cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.lista-convite .lista-escolha { max-height: 160px; }
.lista-convite .botao { margin-top: 12px; }

/* ---- Modal ---- */
/* ---- Campos de formulário: uma regra pro painel inteiro ---- */
/* Isso vivia repetido em quatro seletores diferentes (.form-config, #modal,
   .lista-convite, #convite-texto) e todo campo novo nascia sem estilo — foi o que
   aconteceu com o cartao de Ritmo de envio. Agora e um lugar so. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--texto);
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
input::placeholder, textarea::placeholder { color: var(--texto-suave); }
input:disabled, select:disabled, textarea:disabled {
  opacity: 0.6; cursor: not-allowed;
}
textarea { resize: vertical; min-height: 70px; }
/* O relogio e o calendario nativos ficam na cor do painel, nao no azul do Chrome */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: grayscale(1) opacity(0.5); cursor: pointer;
}
input[type="checkbox"] { accent-color: var(--acento); }
/* Campo de tabela e menor: a linha nao pode crescer por causa dele */
td select, td input { padding: 5px 8px; border-radius: 8px; font-size: 13px; }

/* ---- Dropdown proprio ---- */
/* O popup do <select> nativo e desenhado pelo sistema operacional — CSS nao
   alcanca, e era dele o azul que destoava. O <select> real continua na pagina,
   escondido: todo onchange e .value que ja existiam seguem funcionando. */
.campo-select { position: relative; }
.campo-select > select {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.select-botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px; font: inherit; color: var(--texto); text-align: left;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px;
  cursor: pointer; transition: border-color 130ms ease, box-shadow 130ms ease;
}
.select-botao:hover { border-color: var(--texto-suave); }
.campo-select.aberto .select-botao {
  border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave);
}
.select-botao::after {
  content: ""; flex-shrink: 0; width: 8px; height: 8px; margin-right: 2px;
  border-right: 1.5px solid var(--texto-suave); border-bottom: 1.5px solid var(--texto-suave);
  transform: translateY(-2px) rotate(45deg); transition: transform 150ms ease;
}
.campo-select.aberto .select-botao::after { transform: translateY(1px) rotate(-135deg); }
.select-lista {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: var(--sombra-alta); padding: 5px; max-height: 260px; overflow-y: auto;
  display: none;
}
.campo-select.aberto .select-lista { display: block; }
.campo-select.acima .select-lista { top: auto; bottom: calc(100% + 6px); }
.select-opcao {
  display: block; width: 100%; text-align: left; padding: 9px 11px;
  border: 0; background: transparent; border-radius: 8px; font: inherit;
  color: var(--texto); cursor: pointer;
}
.select-opcao:hover { background: var(--fundo); }
.select-opcao.escolhida { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
td .select-botao { padding: 5px 8px; font-size: 13px; border-radius: 8px; }
td .select-lista { min-width: 160px; }

/* ---- Data e hora ---- */
/* O indicador nativo sai de cena e o icone do painel entra no lugar. O input
   continua ali, editavel pelo teclado — quem sabe a data digita e nem abre. */
.campo-data { position: relative; }
.campo-data > input { padding-right: 40px; }
.campo-data > input::-webkit-calendar-picker-indicator { display: none; }
.campo-data > input::-webkit-inner-spin-button { display: none; }
.campo-data-icone {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--texto-suave); transition: background 130ms ease, color 130ms ease;
}
.campo-data-icone:hover { background: var(--acento-suave); color: var(--acento); }
.campo-data-icone .ic { width: 17px; height: 17px; }
/* fixed, e nao absolute: o modal tem overflow-y auto e cortaria o calendario.
   A posicao quem calcula e o JS, a partir do retangulo do icone. */
.campo-data-painel {
  display: none; position: fixed; z-index: 60; top: 0; left: 0;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 12px; box-shadow: var(--sombra-alta, var(--sombra)); padding: 12px;
}
.campo-data.aberto .campo-data-painel { display: block; }

.dp-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; font-size: 14px;
}
.dp-nav {
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave);
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
}
.dp-nav:hover { background: var(--fundo); color: var(--acento); border-color: var(--acento); }
.dp-semana, .dp-grade { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; }
.dp-semana span {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--texto-suave); padding-bottom: 4px;
}
.dp-dia {
  height: 32px; border: 1px solid transparent; background: transparent; color: var(--texto);
  border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums; transition: background 110ms ease;
}
.dp-dia:hover { background: var(--fundo); }
.dp-dia.hoje { border-color: var(--borda); font-weight: 600; }
.dp-dia.escolhido { background: var(--acento); color: #fff; font-weight: 600; border-color: var(--acento); }
.dp-hoje {
  width: 100%; margin-top: 10px; padding: 7px; border: 1px solid var(--borda);
  background: var(--fundo); color: var(--acento); border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.dp-hoje:hover { background: var(--acento-suave); }

.dp-horas { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; width: 108px; }
.dp-hora {
  border: 1px solid transparent; background: transparent; color: var(--texto);
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums; text-align: left;
}
.dp-hora:hover { background: var(--fundo); }
.dp-hora.escolhido { background: var(--acento); color: #fff; font-weight: 600; }

/* ---- Avisos do sistema (no lugar do alert do navegador) ---- */
/* Encostam no canto e nao bloqueiam nada: o disparo corre no servidor, entao a
   Maira fecha o aviso e continua usando o painel. */
#avisos {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 40px)); pointer-events: none;
}
.aviso-flutuante {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--texto-suave);
  border-radius: 12px; padding: 13px 14px; box-shadow: var(--sombra-alta);
  font-size: 13px; line-height: 1.45;
  animation: aviso-entra 200ms ease;
}
.aviso-flutuante.ok { border-left-color: var(--ok); }
.aviso-flutuante.alerta { border-left-color: var(--alerta); }
.aviso-flutuante.saindo { opacity: 0; transform: translateX(12px); transition: all 200ms ease; }
.aviso-corpo { flex: 1; min-width: 0; }
.aviso-corpo strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
.aviso-corpo span { color: var(--texto-suave); }
.aviso-flutuante.alerta .aviso-corpo span { color: var(--texto); }
.aviso-fechar {
  border: 0; background: transparent; color: var(--texto-suave);
  font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; flex-shrink: 0;
}
.aviso-fechar:hover { color: var(--texto); }
@keyframes aviso-entra {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  #avisos { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

#fundo-modal {
  position: fixed; inset: 0; background: rgba(46, 39, 36, 0.4);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50;
}
#modal {
  background: var(--superficie); border-radius: 16px; padding: 24px;
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--sombra-alta);
}
#modal h3 { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; margin-bottom: 16px; }
#modal label { display: block; font-size: 13px; color: var(--texto-suave); margin: 12px 0 4px; }
/* Campo de tags do modal: chip apagado e tag que existe no CRM e nao esta nessa
   ficha; chip aceso e tag marcada. O mesmo par de estados do resto do painel
   (borda tracejada = disponivel, fundo de acento = ligado). */
.campo-tags { display: flex; flex-direction: column; gap: 8px; }
.campo-tags-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-opcao {
  border: 1px dashed var(--borda); background: var(--fundo); color: var(--texto-suave);
  border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 500;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}
.tag-opcao:hover { border-style: solid; border-color: var(--acento); color: var(--acento); }
.tag-opcao.marcada {
  background: var(--acento-suave); color: var(--acento);
  border: 1px solid transparent; font-weight: 600;
}
.tag-opcao.marcada:hover { background: #ead6d0; }
.campo-tags-nova { display: flex; gap: 8px; }
.campo-tags-nova input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 8px; font: inherit; background: var(--fundo);
}
.acoes-modal { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.acoes-modal .direita { display: flex; gap: 10px; margin-left: auto; }

@media (max-width: 940px) {
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .chat-caixa, .chat-caixa.com-perfil { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 240px); }
  .chat-caixa.cheia { height: calc(100dvh - 175px); }
  /* A regra de tela cheia do desktop deixa a altura em auto e conta com o flex
     pra travar. No celular nao ha flex que trave, entao a altura volta a ser
     explicita — senao o perfil do contato estica a pagina inteira. */
  #conteudo.tela-cheia .chat-caixa.cheia { flex: none; height: calc(100dvh - 175px); }
  .chat-lista { display: none; border-right: 0; }
  .chat-caixa.sem-conversa-aberta .chat-lista { display: block; }
  .chat-caixa.sem-conversa-aberta .chat-painel { display: none; }
  /* perfil aberto no celular ocupa a tela toda do chat */
  .chat-caixa.com-perfil .chat-lista, .chat-caixa.com-perfil .chat-painel { display: none; }
  .chat-caixa.com-perfil .chat-perfil { display: block; border-left: 0; }
}
@media (max-width: 760px) {
  #app { flex-direction: column; height: auto; min-height: 100dvh; }
  #principal { min-height: 0; }
  #conteudo { overflow-y: visible; }
  /* Painel de altura travada nao faz sentido no celular: la a tela e alta e
     estreita, e travar a altura so cortaria card. Volta a empilhar e rolar. */
  #conteudo.tela-painel { overflow: visible; }
  #conteudo.tela-painel .grade-visao.cresce { flex: 0 0 auto; min-height: 0; }
  #conteudo.tela-painel .card { overflow: visible; }
  .anel-linha { flex-direction: column; }
  .anel-linha .donut-area { flex: 0 0 auto; width: 100%; max-width: 220px; align-self: center; }
  .colunas { min-height: 160px; }
  #menu { width: 100%; height: auto; position: static; }
  #menu nav { display: flex; overflow-x: auto; padding: 8px; }
  #menu nav .grupo { display: none; }
  #menu nav a { margin: 0 2px; white-space: nowrap; }
  #menu nav a em { margin-left: 6px; }
  .badge { margin-left: 6px; }
  .marca, .menu-rodape { display: none; }
  #topo { padding: 12px 16px; }
  #conteudo { padding: 16px 16px 32px; }
}

/* ---- Canvas cheio: o ultimo bloco da tela vai ate o rodape ---- */
/* Lista de cards e um bloco so, senao o ultimo card e que ficaria mais alto. */
/* Lista de cards: grade que enche a largura e comeca de cima. Um bloco so,
   senao seria o ultimo card a esticar, e ele ficaria mais alto que os irmaos. */
.lista-cards, .grade-config {
  display: grid; gap: 14px; align-content: start;
  /* o min() e o que impede a coluna de 420px estourar a tela do celular */
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
}
#conteudo > .envelope-tabela:last-child,
#conteudo > .lista-cards:last-child,
#conteudo > .calendario:last-child,
#conteudo > .grade-config:last-child { flex: 1 1 auto; min-height: 0; }
#conteudo > .duas-colunas:last-child {
  flex: 1 1 auto; min-height: 0; align-items: stretch;
}
#conteudo > .duas-colunas:last-child > * { display: flex; flex-direction: column; min-height: 0; }
#conteudo > .duas-colunas:last-child .envelope-tabela:last-child { flex: 1 1 auto; }

/* ---- Visao geral: painel de uma tela so ---- */
/* Nada rola na pagina. As duas fileiras de card dividem a altura que sobra e o
   que nao couber rola dentro do proprio card. */
#conteudo.tela-painel { overflow: hidden; }
#conteudo.tela-painel .grade-visao.cresce { flex: 1 1 0; min-height: 185px; margin-bottom: 14px; }
#conteudo.tela-painel .grade-visao.cresce:last-child { margin-bottom: 0; }
/* Rede de segurança: em tela baixa o card rola por dentro em vez de cortar
   conteudo pela metade. Com os pisos de agora isso so acontece abaixo de ~860px. */
#conteudo.tela-painel .card { overflow-y: auto; }
#conteudo.tela-painel .grade-cards { margin-bottom: 14px; }

/* KPI compacto: seis cabem numa fileira sem comer a altura dos graficos. */
.grade-cards.seis .card { padding: 12px 14px; }
.grade-cards.seis .kpi-topo { margin-bottom: 6px; gap: 8px; }
.grade-cards.seis .kpi-icone { width: 28px; height: 28px; border-radius: 8px; }
.grade-cards.seis .kpi-icone .ic { width: 14px; height: 14px; }
.grade-cards.seis .valor { font-size: 20px; }
.grade-cards.seis .kpi-sub { margin-top: 2px; }

.barra-visao {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-shrink: 0;
}
.barra-visao .fila-avisos { flex: 1; margin-bottom: 0; overflow: hidden; }
.fila-avisos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fila-avisos .aviso { margin-top: 0; padding: 7px 11px; font-size: 12.5px; }

/* Anel e legenda lado a lado: empilhados, a legenda comia a altura toda e a
   rosca virava enfeite de 90px. Lado a lado ela usa a largura, que sobra. */
.anel-linha { flex: 1; min-height: 0; display: flex; align-items: center; gap: 14px; }
.anel-linha .donut-area { flex: 0 1 168px; min-width: 120px; height: 100%; }
.anel-linha .legenda { flex: 1; min-width: 0; }
.donut-area { flex: 1; min-height: 0; align-items: center; }
.donut { max-height: 100%; }
.grafico-card .legenda { flex-shrink: 0; }
.painel-rolavel { flex: 1; min-height: 0; overflow-y: auto; margin-bottom: 10px; }
.lista-linhas.apertada { gap: 7px; margin: 2px 0 8px; }
.lista-linhas.apertada em { display: block; color: var(--texto-suave); font-style: normal; font-size: 12px; }
.lista-linhas strong.ok { color: var(--ok); }

/* ---- Visao geral ---- */
.grade-visao {
  display: grid; gap: 14px; margin-bottom: 24px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Colunas mes a mes. Trilho fixo, marca em % — sem SVG pra nao distorcer texto. */
.colunas {
  display: flex; align-items: flex-end; gap: 8px; margin-top: 6px;
  flex: 1; min-height: 110px; /* cresce com o card; o piso so garante que da pra ler */
}
.coluna { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; gap: 4px; }
.coluna-topo { font-size: 11px; color: var(--texto-suave); font-variant-numeric: tabular-nums; height: 14px; }
.coluna-trilho {
  flex: 1; width: 100%; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--borda);
}
.coluna-marca {
  width: 100%; border-radius: 4px 4px 0 0; background: var(--acento);
  transition: opacity 130ms ease;
}
/* Mes em curso: mesma cor, preenchimento vazado — le como "ainda contando". */
.coluna.parcial .coluna-marca {
  background: repeating-linear-gradient(135deg,
    var(--acento) 0 5px, var(--acento-suave) 5px 10px);
}
.colunas:hover .coluna-marca { opacity: 0.45; }
.coluna:hover .coluna-marca { opacity: 1; }
.coluna-rotulo { font-size: 11px; color: var(--texto-suave); }

/* Barras de status: magnitude numa cor so, com o numero sempre visivel. */
.lista-barras { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.linha-barra { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.linha-barra-nome { width: 92px; color: var(--texto-suave); flex-shrink: 0; }
.linha-barra-valor { font-variant-numeric: tabular-nums; font-weight: 600; width: 30px; text-align: right; }
.lista-linhas { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 14px; font-size: 13px; }
.lista-linhas > div { display: flex; justify-content: space-between; gap: 10px; }
.lista-linhas span { color: var(--texto-suave); }
.lista-linhas strong { font-variant-numeric: tabular-nums; }
.lista-linhas strong.alerta { color: var(--alerta); }
.grafico-card .data-grande {
  font-family: var(--fonte-titulo); font-size: 27px; font-weight: 600; color: var(--acento);
}
.grafico-card .botao { margin-top: auto; align-self: flex-start; text-decoration: none; }
.grafico-card .barra { margin: 10px 0; }

/* ---- Financeiro: DRE, rosca e barras de lucro ---- */
.acoes-tela { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seletor-mes { width: auto; min-width: 190px; }
.campo-select.seletor-mes .select-botao { background: var(--superficie); }
.aviso-tela.alerta-suave {
  background: #f7e3e0; border: 1px solid #eccfca; color: var(--texto);
  border-radius: 10px; padding: 10px 14px; max-width: none;
}
.dre-grade { grid-template-columns: minmax(0, 1fr) 340px; margin-bottom: 26px; }

/* A demonstracao le de cima pra baixo: total, detalhe indentado, marco em negrito.
   O peso separa os niveis; a cor fica so no resultado final. */
.tabela-dre td { white-space: normal; vertical-align: top; }
.tabela-dre .dre-valor, .tabela-dre .dre-pct {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tabela-dre .dre-pct { color: var(--texto-suave); width: 76px; }
.dre-n1 td:first-child { padding-left: 32px; color: var(--texto-suave); }
.dre-n1 .dre-valor { color: var(--texto); }
.dre-nota {
  display: block; font-size: 11.5px; color: var(--texto-suave);
  line-height: 1.4; margin-top: 2px;
}
.dre-total td, .dre-subtotal td, .dre-marco td, .dre-resultado td {
  font-weight: 700; letter-spacing: 0.2px;
}
.dre-total td { background: var(--fundo); }
.dre-marco td { background: var(--acento-suave); }
.dre-resultado td { font-size: 16px; background: var(--fundo); }
.dre-resultado.bom .dre-valor { color: var(--ok); }
.dre-resultado.ruim .dre-valor { color: var(--alerta); }

/* Rosca. Cor validada no app.js — nao redefinir aqui, senao a paleta passa a
   viver em dois lugares e uma das duas fica desatualizada. */
.grafico-card { display: flex; flex-direction: column; gap: 14px; }
.donut-area { position: relative; display: flex; justify-content: center; }
.donut { width: 100%; max-width: 230px; height: auto; overflow: visible; }
.donut-fatia { transition: opacity 130ms ease; cursor: default; }
.donut-area:hover .donut-fatia { opacity: 0.45; }
.donut-area .donut-fatia:hover { opacity: 1; }
.donut-valor {
  text-anchor: middle; font-family: var(--fonte-titulo);
  font-size: 26px; font-weight: 600; fill: var(--texto);
}
/* Valor em reais no centro e mais largo que a porcentagem: encolhe pra nao
   passar por cima do anel. */
.donut-valor.compacto { font-size: 16px; }
.donut-valor.bom { fill: var(--ok); }
.donut-valor.ruim { fill: var(--alerta); }
.donut-rotulo { text-anchor: middle; font-size: 11px; fill: var(--texto-suave); }
.donut-vazio { padding: 40px 10px; text-align: center; color: var(--texto-suave); font-size: 13px; }
.donut-balao {
  position: absolute; pointer-events: none; opacity: 0;
  transform: translate(-50%, -140%); transition: opacity 120ms ease;
  background: var(--texto); color: var(--superficie);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.4;
  white-space: nowrap; box-shadow: var(--sombra-alta);
}
.donut-balao.visivel { opacity: 1; }
.donut-balao span { display: block; opacity: 0.8; font-variant-numeric: tabular-nums; }

/* A legenda carrega nome e numero: e ela que tira a identidade da fatia
   do "so a cor" e resolve o aviso de contraste da paleta. */
.legenda { display: flex; flex-direction: column; gap: 5px; }
.legenda-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.legenda-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda-cor { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legenda-nome { flex: 1; color: var(--texto-suave); }
.legenda-valor { font-variant-numeric: tabular-nums; font-weight: 600; }
.legenda-pct { color: var(--texto-suave); font-variant-numeric: tabular-nums; width: 34px; text-align: right; }

/* Ranking de procedimento: magnitude e barra, nao mais uma paleta categorica. */
.celula-barra { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.barra-trilho { flex: 1; height: 6px; border-radius: 99px; background: var(--fundo); overflow: hidden; }
.barra-marca { display: block; height: 100%; border-radius: 99px; background: var(--acento); }
.barra-marca.ruim { background: var(--alerta); }
.barra-numero { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.barra-numero.alerta { color: var(--alerta); }

@media (max-width: 1100px) {
  .dre-grade { grid-template-columns: minmax(0, 1fr); }
}