:root {
  color-scheme: dark;
  --fundo: #0a0d0b; --cartao: #121714; --texto: #e6ede9; --suave: #8b978f; --borda: #232c27;
  --azul: #22c55e; --ambar: #f59e0b; --verde: #4ade80; --vermelho: #f87171; --marinho: #050706;
  --destaque: #22c55e; --destaque-escuro: #16a34a; --destaque-claro: rgba(34,197,94,.12); --destaque-borda: rgba(34,197,94,.35); --ciano: #4ade80;
  --sobre-destaque: #03140a; --campo: #0d110f; --realce: #18201b;
  --tom-verde: rgba(34,197,94,.14); --tom-vermelho: rgba(248,113,113,.14); --tom-ambar: rgba(245,158,11,.14);
  --coluna: #0f1411; --texto-celula: #fff;
}
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #f3f5f9; --cartao: #fff; --texto: #1d2433; --suave: #657089; --borda: #dde2ec;
  --azul: #16a34a; --ambar: #b06f00; --verde: #15803d; --vermelho: #d6453d; --marinho: #0b1a12;
  --destaque: #16a34a; --destaque-escuro: #15803d; --destaque-claro: #e7f6ee; --destaque-borda: #b9e4cd; --ciano: #4ade80;
  --sobre-destaque: #fff; --campo: #fff; --realce: #eef1f5;
  --tom-verde: #e7f6ee; --tom-vermelho: #fdecea; --tom-ambar: #fff4e0;
  --coluna: #eaedf3; --texto-celula: #1d2433;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo); color: var(--texto); font-size: 14px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 10px; }
h3 small, .dica { color: var(--suave); font-weight: 400; }

body { display: flex; min-height: 100vh; }
.topo { background: var(--marinho); color: #fff; padding: 20px 14px; width: 220px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca strong { display: block; font-size: 17px; }
.marca span { font-size: 12px; opacity: .7; }
.selo { font-size: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: 5px 12px; border-radius: 999px; }

.menu { display: flex; flex-direction: column; gap: 4px; }
.menu a { color: #fff; text-decoration: none; padding: 10px 12px; border-radius: 6px; opacity: .75; }
.grupo summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; cursor: pointer; opacity: .75; }
.grupo summary::-webkit-details-marker { display: none; }
.grupo summary:hover, .grupo[open] summary { opacity: 1; }
.grupo summary:hover { background: rgba(255,255,255,.08); }
.grupo svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* O ícone vem recortado do print enviado (static/image.png, 470x422): o ícone ocupa ~34px a partir de (36,48).
   "lighten" some com o fundo escuro do print sobre o azul-marinho da lateral. */
.icone-agenda { width: 20px; height: 20px; flex-shrink: 0; background: url("/static/image.png") -21px -28px / 276px auto no-repeat; mix-blend-mode: lighten; }
.grupo .seta { margin-left: auto; width: 16px; transition: transform .15s; }
.grupo:not([open]) .seta { transform: rotate(180deg); }
.subitens { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0 20px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.2); }
.menu .subitens a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; }
.menu .subitens a[aria-current] { background: rgba(255,255,255,.1); }
.menu .subitens a[aria-current]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); margin-left: auto; }
.subitens .grupo summary { gap: 6px; padding: 8px 0 8px 4px; font-size: 12.5px; }
.subitens .grupo summary span { flex: 1; min-width: 0; }
.subitens .grupo .seta { margin-left: 0; width: 14px; }
.com-icone { display: inline-flex; align-items: center; gap: 6px; }
.com-icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.publico { display: block; padding: 32px 16px; }
.cartao-publico { max-width: 720px; margin: 0 auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 24px; }
.cartao-publico h1 { margin: 0 0 4px; font-size: 22px; }
.horarios { border: 0; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.horarios legend { font-weight: 600; margin-bottom: 8px; }
.horario { flex-direction: row; align-items: center; gap: 6px; border: 1px solid var(--borda); border-radius: 8px; padding: 8px; color: var(--texto); cursor: pointer; }
.horario:has(input:checked) { border-color: var(--azul); background: #e8eefc; }
.seletor { margin-top: auto; }
.seletor label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; opacity: .8; }
.seletor select { width: 100%; }
.menu a:hover, .menu a[aria-current] { opacity: 1; background: rgba(255,255,255,.14); }
.seletor select { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 5px 8px; }
.seletor option { color: var(--texto); }
.em-linha { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.cliente { display: block; font-weight: 600; margin: 4px 0; }
.pendente-tarefa { display: block; font-size: 12px; color: var(--ambar); margin-top: 4px; }
section.tabela, section.novo { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th { color: var(--suave); font-weight: 500; font-size: 12px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; align-items: end; }
.grade label, .linha label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); }
.linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.linha .largo { flex: 1; min-width: 220px; }
.grade-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grade-areas .tabela { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.lista small { display: block; color: var(--suave); }
.lista li.atrasada { border-left: 3px solid var(--vermelho); padding-left: 8px; }
.vazio { color: var(--suave); }
.contagem { background: var(--fundo); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--suave); }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.indicador { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 14px; }
.indicador small { display: block; color: var(--suave); }
.indicador strong { font-size: 20px; }
.indicador.alerta strong { color: var(--vermelho); }
.situacao { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--fundo); }
.situacao-recebida { background: #e7f6ee; color: var(--verde); }
.situacao-vencida { background: #fdecea; color: var(--vermelho); }
.barras { list-style: none; margin: 0; padding: 0; }
.barras li { display: grid; grid-template-columns: 260px 1fr 40px; gap: 10px; align-items: center; padding: 6px 0; }
.barra { background: var(--fundo); border-radius: 4px; height: 12px; }
.barra i { display: block; height: 100%; background: var(--azul); border-radius: 4px; }

.conteudo { padding: 20px 28px 40px; max-width: 1600px; flex: 1; min-width: 0; }
.mensagem { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 500; }
.mensagem.erro { background: #fdecea; color: #9b2620; border: 1px solid #f5c2be; }
.mensagem.aviso { background: #e7f6ee; color: #136640; border: 1px solid #b9e4cd; }

.novo, .coluna, .painel { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; }
.novo { padding: 16px 18px; margin-bottom: 18px; }
.linha { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-top: 10px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); font-weight: 500; }
label.largo { flex: 1; min-width: 200px; }
input, select { font: inherit; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
button { font: inherit; font-weight: 600; padding: 9px 14px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.primario { background: var(--azul); color: #fff; }
.primario:hover { background: #2349c8; }
.secundario { background: #fff; color: var(--texto); border-color: var(--borda); }
.secundario:hover { border-color: var(--azul); color: var(--azul); }

.area { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.area.com-painel { grid-template-columns: minmax(0, 1fr) 420px; }
.quadro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.coluna { padding: 14px; border-top: 4px solid var(--azul); min-height: 300px; }
.coluna-2 { border-top-color: var(--ambar); }
.coluna-3 { border-top-color: var(--verde); }
.coluna h3 { display: flex; justify-content: space-between; align-items: center; }
.contagem { background: var(--fundo); color: var(--suave); border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.vazio { color: var(--suave); font-size: 13px; text-align: center; padding: 24px 0; }

.tarefas { background: #fff6e6; border: 1px solid #f3d9a6; border-radius: 8px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.tarefas a { color: #8a5600; font-weight: 600; }

.card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--azul); box-shadow: 0 2px 8px rgba(47,91,234,.12); }
.card.ativo { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(47,91,234,.25); }
.card-topo { display: flex; justify-content: space-between; align-items: center; gap: 4px 8px; margin-bottom: 4px; flex-wrap: wrap; }
.card-topo strong { white-space: nowrap; }
.origem { color: var(--suave); font-size: 12px; margin-bottom: 6px; overflow-wrap: anywhere; }
.proxima { font-size: 13px; }
.checks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.checks span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #fdecea; color: #9b2620; }
.checks span.ok { background: #e7f6ee; color: #136640; }

.etapa { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.etapa-entrada { background: #e8eefc; color: #2349c8; }
.etapa-agendada { background: #fff1d6; color: #8a5600; }
.etapa-ausencia { background: #fdecea; color: #9b2620; }
.etapa-liberado { background: #e7f6ee; color: #136640; }

.painel { padding: 18px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.painel-topo { display: flex; justify-content: space-between; align-items: flex-start; }
.painel-topo h2 { font-size: 20px; margin: 0; }
.painel-topo p { margin: 4px 0 0; color: var(--suave); }
.fechar { color: var(--suave); padding: 4px; }
.proxima-acao { background: var(--marinho); color: #fff; border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.proxima-acao small { display: block; opacity: .7; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.dados { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; margin: 0 0 6px; }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.ok { color: var(--verde); font-weight: 600; }
.pendente { color: var(--vermelho); font-weight: 600; }
.bloco { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; }
.bloco form + form { margin-top: 10px; }
.lista { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.lista em { color: var(--suave); }
.historico { list-style: none; padding: 0 0 0 14px; margin: 0; border-left: 2px solid var(--borda); }
.historico li { position: relative; padding: 0 0 12px 10px; display: flex; flex-direction: column; gap: 1px; }
.historico li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); }
.historico span { color: var(--suave); font-size: 12px; }
.historico small { color: var(--suave); font-size: 11px; overflow-wrap: anywhere; }

/* Funil de vendas */
.botao { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--borda); text-decoration: none; cursor: pointer; white-space: nowrap; }
.botao.verde { background: var(--destaque); color: #fff; border-color: var(--destaque); }
.botao.verde:hover { background: var(--destaque-escuro); }
.funil-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.funil-topo h1 { margin: 0 0 4px; font-size: 24px; }
.funil-topo p { margin: 0; }
.funil-acoes { display: flex; gap: 8px; align-items: center; }
.menu-suspenso { position: relative; }
.menu-suspenso summary { list-style: none; }
.menu-suspenso summary::-webkit-details-marker { display: none; }
.suspenso { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px rgba(20,33,61,.14); padding: 8px; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.suspenso a { color: var(--texto); text-decoration: none; padding: 6px 8px; border-radius: 6px; }
.suspenso a:hover { background: var(--fundo); }
.form-lead { width: 320px; padding: 14px; gap: 10px; }
.abas { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; }
.abas a { color: var(--suave); text-decoration: none; padding: 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.abas a[aria-current] { color: var(--texto); border-bottom-color: var(--destaque); }
.abas .dica { margin-left: 8px; font-size: 12px; }
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filtros .busca { flex-direction: row; align-items: center; gap: 0; position: relative; flex: 1; max-width: 420px; }
.filtros .busca svg { position: absolute; left: 10px; width: 16px; height: 16px; fill: none; stroke: var(--suave); stroke-width: 2; }
.filtros .busca input { width: 100%; padding-left: 34px; }
.filtros .em-linha { flex-direction: row; }
.link-perdidos { margin-left: auto; color: var(--suave); text-decoration: none; font-weight: 600; }
.link-perdidos[aria-current] { color: var(--vermelho); }
.funil-quadro { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.funil-coluna { flex: 0 0 290px; background: #eaedf3; border-radius: 12px; padding: 10px; min-height: 360px; transition: background .15s; }
.funil-coluna.alvo { background: #dfe7fb; outline: 2px dashed var(--azul); outline-offset: -2px; }
.funil-coluna header { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; }
.funil-coluna .ponto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.funil-coluna .exportar { margin-left: auto; color: var(--suave); display: inline-flex; }
.funil-coluna .exportar svg, .cartao-funil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.funil-cartoes { display: flex; flex-direction: column; gap: 8px; }
.cartao-funil { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: grab; }
.cartao-funil.arrastando { opacity: .5; }
.cartao-topo { display: flex; align-items: center; gap: 6px; }
.cartao-topo .nome { font-weight: 700; color: var(--texto); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-topo .nome:hover { color: var(--azul); }
.tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: #e8eefc; color: #2349c8; }
.iniciais { width: 24px; height: 24px; border-radius: 50%; background: var(--marinho); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.menu-cartao summary { cursor: pointer; color: var(--suave); display: inline-flex; padding: 2px; border-radius: 4px; }
.menu-cartao summary:hover { background: var(--fundo); }
.menu-cartao .suspenso { min-width: 240px; }
.pilula { align-self: flex-start; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #fff6e6; color: #8a5600; }
.telefone { font-size: 13px; }
.telefone a { color: var(--verde); display: inline-flex; }
.datas { color: var(--suave); font-size: 11px; }
.funil-vazio { display: flex; flex-direction: column; gap: 4px; border: 1px dashed #c9d0dd; border-radius: 10px; padding: 28px 10px; }
.perigo { color: var(--vermelho); }
textarea { font: inherit; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; resize: vertical; }

/* Acompanhamento dos clientes (quadro por fases) */
.funil-acoes { flex-wrap: wrap; }
.funil-acoes .filtros.sem-margem { margin: 0; min-width: 300px; }
.funil-acoes svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.segmentos-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.segmentos { display: inline-flex; background: #eaedf3; border-radius: 10px; padding: 3px; gap: 2px; }
.segmentos a { color: var(--suave); text-decoration: none; font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 8px; }
.segmentos a[aria-current] { background: var(--cartao); color: var(--texto); box-shadow: 0 1px 3px rgba(20,33,61,.12); }
.segmentos svg { width: 14px; height: 14px; fill: none; stroke: #c27a00; stroke-width: 2; }
.aviso-info { display: flex; align-items: center; gap: 10px; background: #eef3ff; border: 1px solid #d4e0fb; color: #23376b; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.aviso-info svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--azul); stroke-width: 2; }
.aviso-info span { flex: 1; }
.aviso-info .link { background: none; border: 0; color: var(--azul); font-weight: 700; cursor: pointer; padding: 4px 8px; }
.cabecalho-fase { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px; row-gap: 2px; }
.cabecalho-fase strong { grid-column: 1 / -1; }
.numero-fase { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.cartao-topo .ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ponto.em-dia { background: var(--verde); }
.ponto.atraso { background: #e58a00; }
.fase-de { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); font-size: 11px; font-family: ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; }
.rodape-cartao { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--suave); font-size: 12px; border-top: 1px solid var(--borda); padding-top: 8px; }
.rodape-cartao svg { width: 14px; height: 14px; }

/* Início */
.inicio { max-width: 1040px; }
.inicio h2 { margin: 28px 0 10px; }
.inicio svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atalho-largo { display: flex; align-items: center; gap: 14px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 16px 18px; color: var(--texto); text-decoration: none; margin-top: 8px; }
.atalho-largo:hover, .lista-inicio a:hover, .linha-indicador[href]:hover { background: #f7f9fc; }
.atalho-largo small, .lista-inicio small { display: block; color: var(--suave); font-size: 13px; margin-top: 2px; }
.seta-direita { width: 18px; height: 18px; margin-left: auto; color: var(--suave); flex-shrink: 0; }
.icone-redondo { width: 38px; height: 38px; border-radius: 50%; background: #eaf0ff; color: var(--azul); display: grid; place-items: center; flex-shrink: 0; }
.icone-redondo svg { width: 18px; height: 18px; }
.icone-redondo.perigo { background: #fdecea; color: var(--vermelho); }
.rotulo-secao { font-family: ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin: 28px 0 10px; }
.indicadores-inicio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cartao-indicadores { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.linha-indicador { display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: var(--texto); text-decoration: none; border-top: 1px solid var(--borda); }
.linha-indicador:first-child { border-top: 0; }
.linha-indicador strong { margin-left: auto; font-size: 18px; }
.linha-indicador svg { width: 16px; height: 16px; color: var(--suave); }
.lista-inicio { list-style: none; margin: 0; padding: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.lista-inicio li + li { border-top: 1px solid var(--borda); }
.lista-inicio a { display: flex; align-items: center; gap: 14px; padding: 12px 18px; color: var(--texto); text-decoration: none; }
.lista-inicio time { margin-left: auto; font-family: ui-monospace, monospace; font-size: 12px; color: var(--suave); white-space: nowrap; }
.vazio-tracejado { border: 1px dashed var(--borda); border-radius: 10px; padding: 28px; text-align: center; color: var(--suave); }

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 18px; }
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi + .kpi { border-left: 1px solid var(--borda); }
.kpi small, .rotulo-mono { font-family: ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.kpi strong { font-size: 22px; }
.kpi span { font-size: 12px; color: var(--suave); }
.verde-texto { color: var(--destaque); }
.vermelho-texto { color: var(--vermelho); }
.faturamento-barra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.faturamento-barra .filtros { flex: 1; margin: 0; }
.navegar-mes { display: flex; align-items: center; gap: 6px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 6px 10px; }
.navegar-mes strong { min-width: 150px; text-align: center; font-size: 14px; }
.navegar-mes a { display: inline-flex; color: var(--suave); }
.navegar-mes svg, .link-exportar svg, .acoes-cobranca svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.link-exportar { color: var(--texto); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tabela-cobrancas th { font-family: ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.tabela-cobrancas td { padding: 12px 8px; }
.tabela-cobrancas .sub { display: block; color: var(--suave); font-size: 12px; margin-top: 2px; }
.mono { font-family: ui-monospace, monospace; font-size: 13px; }
.direita { text-align: right; }
.pilula { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.pilula-pago { background: #e7f6ee; color: var(--verde); }
.pilula-a-vencer { background: #fff4e0; color: #b06f00; }
.pilula-vencido { background: #fdecea; color: var(--vermelho); }
.pilula-cancelado { background: #eef0f2; color: var(--suave); text-decoration: line-through; }
.acoes-cobranca { display: inline-flex; align-items: center; gap: 10px; }
.acoes-cobranca > a { color: var(--destaque); display: inline-flex; }
.acoes-cobranca .suspenso { text-align: left; }
.kpis.quatro { grid-template-columns: repeat(4, 1fr); }
.pilula-concluida { background: #e8f0fb; color: #2f5fa8; }
.pilula-pessoa { background: var(--destaque-claro); color: var(--destaque); border: 1px solid var(--destaque-borda); align-self: center; }
.cartao-perfil { padding: 22px 24px; }
.cartao-perfil h2 { margin: 0 0 4px; font-size: 17px; }
.cartao-perfil > .dica { margin: 0 0 18px; }
.cartao-perfil .subtitulo-cartao { margin: 22px 0 12px; font-size: 15px; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.duas-colunas label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto); }
.duas-colunas input, .duas-colunas select { padding: 10px 12px; }
.duas-colunas input[readonly], .duas-colunas input:disabled { background: #f4f6f8; color: var(--suave); }
.duas-colunas p { margin: 4px 0 0; }
.rotulo-com-acao { display: flex; justify-content: space-between; }
.rotulo-com-acao a { color: var(--destaque); font-weight: 600; text-decoration: none; }
.obrigatorio { color: var(--vermelho); }
.rodape-cartao { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 20px; }
.rodape-cartao .dica { margin-right: auto; }
.rodape-cartao button:disabled { opacity: .55; cursor: not-allowed; }
.lista-permissoes { columns: 2; margin: 0 0 14px; padding-left: 18px; }
@media (max-width: 700px) { .duas-colunas { grid-template-columns: 1fr; } .lista-permissoes { columns: 1; } }
.vazio-recorrencias { padding: 56px 28px; background: var(--cartao); }
.vazio-recorrencias h2 { color: var(--texto); font-size: 17px; margin: 0 0 6px; }
.vazio-recorrencias p { margin: 0 0 18px; }

@media (max-width: 1100px) {
  .area.com-painel { grid-template-columns: 1fr; }
  .painel { position: static; max-height: none; order: -1; }
}
@media (max-width: 760px) {
  .conteudo { padding: 14px; }
  body { flex-direction: column; }
  .topo { width: auto; height: auto; position: static; padding: 12px 14px; gap: 12px; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .menu a { padding: 6px 10px; }
  .seletor { margin-top: 0; }
  .quadro { grid-template-columns: 1fr; }
  .coluna { min-height: 0; }
  .indicadores-inicio { grid-template-columns: 1fr; }
  .kpis, .kpis.quatro { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--borda); }
  .tabela-cobrancas { overflow-x: auto; }
}

.painel-grafico { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
.painel-grafico h2 small { color: var(--suave); font-weight: 400; font-size: 13px; margin-left: 6px; }
.grafico-linha svg { width: 100%; height: 220px; display: block; }
.grafico-linha .grade { stroke: var(--borda); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.grafico-linha .area { fill: #eceef2; }
.grafico-linha .linha { fill: none; stroke: #6b7180; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.grafico-linha .eixo { display: grid; margin-top: 8px; color: var(--suave); font-size: 12px; }
.grafico-linha .eixo span { text-align: center; white-space: nowrap; }
.linha-graficos { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; align-items: start; }
.rosca { display: flex; align-items: center; gap: 24px; }
.rosca svg { width: 120px; height: 120px; flex-shrink: 0; transform: rotate(-90deg); }
.rosca circle { fill: none; stroke-width: 12; }
.rosca .trilho { stroke: #eceef2; }
.rosca text { transform: rotate(90deg); transform-origin: 50px 50px; font-size: 20px; font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: var(--texto); }
.rosca ul { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 12px; }
.rosca li { white-space: nowrap; display: flex; align-items: center; gap: 8px; color: var(--suave); }
.rosca li strong { margin-left: auto; color: var(--texto); }
.fatia-link { stroke: #5fd89a; background: #5fd89a; }
.fatia-equipe { stroke: #2a5ea8; background: #2a5ea8; }
.ponto { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
.numeros-agenda { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.numeros-agenda div { padding: 22px 26px; }
.numeros-agenda div + div { border-left: 1px solid var(--borda); }
.numeros-agenda small { display: block; text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 600; color: var(--suave); }
.numeros-agenda strong { display: block; font-size: 30px; margin: 8px 0 4px; }
.numeros-agenda p { margin: 0; color: var(--suave); }
.mapa-calor { display: grid; gap: 6px; align-items: center; }
.mapa-calor .hora { text-align: center; color: var(--suave); font-size: 12px; }
.mapa-calor .dia { color: var(--suave); font-size: 13px; }
.mapa-calor .celula { height: 34px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, #4b5263 calc(var(--forca) * 70%), #eceef2); color: #fff; }
@media (max-width: 760px) {
  .linha-graficos, .numeros-agenda { grid-template-columns: 1fr; }
  .numeros-agenda div + div { border-left: 0; border-top: 1px solid var(--borda); }
  .painel-grafico { overflow-x: auto; }
}

/* Tema preto com verde: troca os fundos claros fixos das regras acima por tons sobre o preto. */
input, select, textarea, .duas-colunas input[readonly], .duas-colunas input:disabled { background: var(--campo); }
.seletor option { background: var(--cartao); }
.primario, .botao.verde { color: var(--sobre-destaque); }
.primario:hover { background: var(--destaque-escuro); }
.secundario { background: var(--cartao); }
.card:hover { box-shadow: 0 2px 10px rgba(34,197,94,.15); }
.card.ativo { box-shadow: 0 0 0 2px rgba(34,197,94,.3); }
.suspenso, .segmentos a[aria-current] { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.pilula, .pilula-a-vencer, .etapa-agendada { background: var(--tom-ambar); color: var(--ambar); }
.situacao-recebida, .pilula-pago, .checks span.ok, .etapa-liberado { background: var(--tom-verde); color: var(--verde); }
.mensagem.aviso { background: var(--tom-verde); color: var(--verde); border-color: var(--destaque-borda); }
.situacao-vencida, .pilula-vencido, .checks span, .etapa-ausencia, .icone-redondo.perigo { background: var(--tom-vermelho); color: var(--vermelho); }
.mensagem.erro { background: var(--tom-vermelho); color: var(--vermelho); border-color: rgba(248,113,113,.35); }
.tarefas { background: var(--tom-ambar); border-color: rgba(245,158,11,.35); }
.tarefas a { color: var(--ambar); }
.etapa-entrada, .tag, .pilula-concluida, .icone-redondo, .horario:has(input:checked) { background: var(--destaque-claro); color: var(--destaque); }
.horario:has(input:checked) { color: var(--texto); }
.pilula-cancelado { background: var(--realce); }
.aviso-info { background: var(--destaque-claro); border-color: var(--destaque-borda); color: var(--texto); }
.funil-coluna, .segmentos { background: var(--coluna); border: 1px solid var(--borda); }
.funil-coluna.alvo { background: var(--destaque-claro); }
.funil-vazio { border-color: var(--borda); }
.atalho-largo:hover, .lista-inicio a:hover, .linha-indicador[href]:hover { background: var(--realce); }
.iniciais { background: var(--destaque-escuro); color: var(--sobre-destaque); }
.segmentos svg { stroke: var(--ambar); }
.grafico-linha .area { fill: var(--destaque-claro); }
.grafico-linha .linha { stroke: var(--destaque); }
.rosca .trilho { stroke: var(--borda); }
.fatia-equipe { stroke: #166534; background: #166534; }
.mapa-calor .celula { background: color-mix(in srgb, var(--destaque) calc(var(--forca) * 80%), var(--realce)); color: var(--texto-celula); }
.topo { border-right: 1px solid var(--borda); }
.alternar-tema { display: inline-flex; align-items: center; gap: 8px; width: 100%; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); font-size: 13px; padding: 7px 10px; }
.alternar-tema:hover { background: rgba(255,255,255,.16); }
.alternar-tema svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alternar-tema .p-claro, :root[data-tema="claro"] .alternar-tema .p-escuro { display: none; }
:root[data-tema="claro"] .alternar-tema .p-claro { display: inline-flex; align-items: center; gap: 8px; }
.alternar-tema .p-escuro { display: inline-flex; align-items: center; gap: 8px; }