/* =========================================================
   Mind GEO — complemento das páginas renderizadas no servidor
   Só o que dashboard.css não cobria. Nada aqui redefine classe existente:
   duplicar regra é como as duas folhas começam a brigar.
   ========================================================= */

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Página dentro do .d-content */
.pg { padding: 18px 18px 0; }
.pg-h { margin-bottom: 16px; }
.pg-h h1 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.pg-h .muted { font-size: 13.5px; }

.pequeno { font-size: 12.5px; }

/* A margem de erro anda colada no número, em corpo menor — ela qualifica o
   valor, não é uma métrica à parte. */
.moe { font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: 0; }

.linha-propria { background: #f7faff; }
.linha-propria td:first-child { box-shadow: inset 2px 0 0 #2f6fe0; }

/* Recado do padrão POST → redirect → GET */
.recado { margin: 0 14px 12px 0; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; border: 1px solid; }
.recado-ok    { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.recado-erro  { background:#fef2f2; border-color:#f6d5d5; color:#b91c1c; }
.recado-aviso { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.login .recado { margin: 0 0 14px; max-width: 380px; width: 100%; }

/* Barra de filtros e troca de empresa */
.filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filtros select.chip-s { padding-right: 8px; }
.troca-empresa { flex: 1; min-width: 0; display: flex; gap: 6px; }
.troca-empresa select { width: 100%; height: 34px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; padding: 0 8px; font-size: 14px; color: var(--text); }

/* Gráfico desenhado por JS a partir de dados já impressos pelo PHP */
.grafico { width: 100%; height: 260px; }
.grafico svg { width: 100%; height: 100%; display: block; }
.grafico .eixo { stroke: #ececef; stroke-width: 1; }
.grafico .rotulo { fill: #71717a; font-size: 11px; font-family: inherit; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.grafico-legenda i { display: inline-block; width: 10px; height: 2.5px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* Paginação de tabela longa */
.paginacao { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 16px; font-size: 13.5px; }
.paginacao .atual { color: var(--muted); }

@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .d-side { height: auto; }
  .d-main { height: auto; }
  .d-content { margin: 0 12px 12px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr; }
  .pg { padding: 14px 12px 0; }
}

/* Resposta literal da IA — precisa respeitar quebras de linha e não esticar
   a linha além do que se lê confortavelmente. */
.resposta-texto { font-size: 14.5px; line-height: 1.72; max-width: 78ch; white-space: pre-wrap; word-break: break-word; }

/* =========================================================
   Cadastro de empresa em seis etapas (páginas do servidor)
   Só o que app.css ainda não tinha: a coluna da direita, a trilha das etapas,
   os rádios de frequência e a lista da revisão. O resto das telas reusa as
   classes que o cadastro antigo já usava.
   ========================================================= */

/* --- Coluna da direita: onde a pessoa está e o que já decidiu --- */
.ob-right { background: #fafafa; border-left: 1px solid var(--border); overflow-y: auto; }
.resumo { padding: 40px 36px; max-width: 360px; }
.resumo-titulo { margin: 0 0 18px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.trilha { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.trilha li { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 14px; }
.trilha-n { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; background: #ececef; color: var(--muted); }
.trilha-feita .trilha-n { background: #dcfce7; color: #166534; }
.trilha-agora .trilha-n { background: var(--blue, #2f6fe0); color: #fff; }
.trilha-depois { color: var(--muted); }
.trilha a { color: var(--text-2); text-decoration: none; }
.trilha a:hover { color: var(--text); text-decoration: underline; }
.trilha-agora { font-weight: 500; }

.resumo-bloco { padding: 12px 0; border-top: 1px solid var(--border); }
.resumo-rot { margin: 0 0 3px; font-size: 12px; color: var(--muted); }
.resumo-val { margin: 0; font-size: 14.5px; }
.resumo-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); word-break: break-word; }
.resumo-nota { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* --- Frequência: rádios de verdade, que funcionam sem JavaScript --- */
.radio-linha { display: flex; flex-direction: column; gap: 8px; }
.radio-opcao { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 9px; background: #fff; cursor: pointer; font-size: 14.5px; }
.radio-opcao:hover { border-color: var(--border-strong); }
.radio-opcao:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }

/* --- Revisão final --- */
.revisao { margin: 0 0 22px; display: flex; flex-direction: column; }
.revisao > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--border); }
.revisao dt { font-size: 13.5px; color: var(--muted); }
.revisao dd { margin: 0; font-size: 14.5px; word-break: break-word; }

/* --- Celular ---
   A coluna da direita continua escondida (o app.css já a esconde em 900px):
   empilhada, ela vira um resumo DEPOIS dos botões, que ninguém rola até lá
   para ler. O que ela tinha de insubstituível — qual empresa está sendo
   cadastrada — subiu para o cabeçalho, onde aparece em toda etapa e em
   qualquer largura. */
@media (max-width: 900px) {
  .ob-scroll { mask-image: none; -webkit-mask-image: none; }
  .revisao > div { grid-template-columns: 1fr; gap: 2px; }
  .cliente-fixo { max-width: 46vw; }
}

/* Qual empresa está sendo cadastrada, no cabeçalho de todas as etapas. */
.cliente-fixo { font-size: 13px; color: var(--muted); border-left: 1px solid var(--border);
  padding-left: 12px; margin-left: 2px; }
.cliente-fixo b { color: var(--text-2); font-weight: 500; }

/* Atalhos "todos / nenhum" ao lado do contador das listas do cadastro */
.counter .link-btn { padding: 0 2px; margin-left: 8px; font-size: 12.5px; text-decoration: underline; }

/* =========================================================
   Área do operador
   ========================================================= */

/* Barra de consumo: teto contratado contra consultas feitas no mês. É a
   coluna que decide as duas conversas comerciais — quem está pagando por
   capacidade que não usa, e quem está raspando o teto. */
.barra { height: 4px; border-radius: 2px; background: #ececef; margin-top: 6px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--blue, #2f6fe0); border-radius: 2px; }
.barra.cheia i { background: var(--danger, #dc2626); }

.etiqueta { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; vertical-align: 1px; }
.etiqueta-parada { background: #fef2f2; color: #b91c1c; }
.etiqueta-ok     { background: #f0fdf4; color: #166534; }

.linha-suspensa td { background: #fffbfb; }
.linha-suspensa td:first-child { box-shadow: inset 2px 0 0 #dc2626; }

/* Ficha da conta: blocos de ação lado a lado */
.grade-operador { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.historico { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.historico li { padding: 9px 0; border-bottom: 1px solid var(--border); display: flex; gap: 10px; }
.historico li:last-child { border-bottom: 0; }
.historico time { flex: 0 0 110px; color: var(--muted); font-size: 12.5px; }

/* --- Prévia do cadastro: o que o robô vai realmente fazer --- */
.previa-lista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.previa-lista li { font-size: 13px; line-height: 1.45; color: var(--text-2);
  padding-left: 11px; position: relative; }
.previa-lista li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 4px; height: 4px; border-radius: 50%; background: #c7c7cc; }
.previa-aspas li { font-style: italic; }
.previa-aspas li::before { content: "“"; width: auto; height: auto; background: none;
  top: 0; color: #c7c7cc; font-style: normal; font-size: 15px; line-height: 1.2; }
.previa-propria { font-weight: 500; color: var(--text); }
.previa-propria::before { background: var(--blue, #2f6fe0) !important; }
.previa-frase { font-size: 14px; font-style: italic; line-height: 1.5; }
.previa-conta { float: right; margin-left: 8px; font-variant-numeric: tabular-nums;
  color: var(--text-2); font-weight: 500; }

/* --- Chips por cima da caixa de texto (só com JavaScript) --- */
.chips-campo { display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  min-height: 42px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
.chips-campo:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.chips-campo .chip { height: 28px; font-size: 13.5px; }
.chips-campo .chip button { width: 24px; }
.chips-novo { flex: 1; min-width: 140px; border: 0; outline: none; height: 28px; font: inherit; font-size: 14px; background: transparent; }
.chips-troca { margin-top: 6px; }

/* --- Chaves de IA: uma ficha por provedor --- */
.chaves { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.chave-card .card-h { align-items: flex-start; }
.chave-form { display: flex; gap: 8px; align-items: center; }
.chave-form .input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.chave-card .link-btn { margin-right: 14px; }

/* --- Acordeão dos prompts: <details> nativo, sem JavaScript --- */
.acordeao { display: flex; flex-direction: column; gap: 10px; }
.acc { border: 1px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; }
.acc > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  cursor: pointer; font-size: 14.5px; font-weight: 500; list-style: none; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before { content: "›"; display: inline-block; width: 12px; color: var(--muted);
  transition: transform .15s; font-size: 17px; line-height: 1; }
.acc[open] > summary::before { transform: rotate(90deg); }
.acc > summary:hover { background: #fafafa; }
.acc-nome { flex: 1; min-width: 0; }
.acc-conta { color: var(--muted); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.acc-corpo { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.acc-acoes { padding: 8px 0 10px; font-size: 13px; }
.acc-corpo .check-row { border-color: #ececef; }

/* Remover um item que a pessoa mesma digitou */
.icone-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 17px;
  line-height: 1; padding: 0 4px; border-radius: 4px; }
.icone-x:hover { color: var(--danger, #dc2626); background: #fef2f2; }
.etiqueta-seu { background: #eef2ff; color: #3730a3; }

/* Monograma do cliente dentro do campo de domínio.
   Nada de favicon de terceiro: ver o comentário em cadastro.js. */
.input-logo.tem-marca { display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 5px; background: #eef2ff; color: #3730a3; font-size: 10.5px;
  font-weight: 600; letter-spacing: .02em; }