/* =============================================================
   CADASTROS — cidades, procedimentos e clínicas
   ============================================================= */

.cd-item{
  display:flex;
  align-items:center;
  gap:var(--s3);
  width:100%;
  min-height:var(--tap);
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  background:none;
  border:none;
  border-bottom:1px solid var(--edge-2);
  padding:var(--s3) var(--s5);
  transition:background var(--t1) var(--ease);
}
.cd-item:last-child{border-bottom:none}
.cd-item:hover{background:var(--card-2)}
.cd-item:active{background:var(--bg-sunk)}

.cd-ic{
  width:34px;height:34px;
  flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-sm);
  background:var(--bg-sunk);
  color:var(--fg-2);
}
.cd-ic svg{width:18px;height:18px;display:block}

.cd-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cd-nome{font-weight:600;font-size:var(--fs-md);letter-spacing:var(--ls-tight)}
.cd-sub{
  font-size:var(--fs-sm);
  color:var(--fg-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* a seta reaproveita o ícone de voltar, espelhado */
.cd-seta{
  width:16px;height:16px;
  flex:none;
  color:var(--fg-3);
  transform:scaleX(-1);
}
.cd-seta svg{width:100%;height:100%;display:block}

/* arquivado continua ligado às caravanas antigas — some, mas não apaga */
.cd-item.arquivado{opacity:.55}
.cd-item.arquivado .cd-nome{text-decoration:line-through}

/* ---------- coordenada da cidade ---------- */
.coord .btn{margin-top:0}
.coord-ok{
  display:flex;
  align-items:center;
  gap:var(--s2);
  font-size:var(--fs-sm);
  color:var(--go-fg);
  font-weight:600;
  margin-bottom:var(--s2);
  padding:var(--s2) var(--s3);
  background:var(--go-soft);
  border:1px solid var(--go-edge);
  border-radius:var(--r-sm);
}
.coord-ok svg{width:15px;height:15px;flex:none}
.coord-ok .mono{font-weight:500;color:var(--fg)}

/* ---------- formulário da empresa ---------- */
.field.ultimo{margin-bottom:0}

/* dica de campo que tem consequência: preço, limites, escalonamento */
.hint.firme{
  color:var(--warn-fg);
  font-weight:500;
  padding-left:var(--s3);
  border-left:2px solid var(--warn-edge);
}

#cd-corpo textarea{line-height:1.55}

/* =============================================================
   INTELIGÊNCIA — as duas chaves de IA

   São dois cartões densos numa tela de 380px: papel da conta,
   campo de chave, o passo a passo de onde pegar e a escolha do
   modelo. A hierarquia tem que segurar isso sem virar parede.
   ============================================================= */

/* a etiqueta de status fica na eyebrow, e a eyebrow pinta o último
   span de cinza — a cor da tag tem que ganhar */
.eyebrow > .tag{color:inherit}
.eyebrow > .tag.go  {color:var(--go-fg)}
.eyebrow > .tag.warn{color:var(--warn-fg)}
.eyebrow > .tag.heat{color:var(--heat-fg)}
.eyebrow > .tag svg{width:11px;height:11px}

/* eyebrow que abre bloco novo, depois de um cartão fechado.
   Escopada à aba: mexer na .eyebrow solta reposicionaria o
   formulário de Empresa, que já está do jeito que deve. */
.ia-eyebrow{margin-top:var(--s6)}
#cd-corpo > p.hint + .ia-eyebrow{margin-top:0}

/* dentro do cartão a eyebrow separa seção, não abre bloco */
.ia-card .eyebrow.rente{margin:var(--s5) 0 var(--s3)}

.ia-card.pendente{border-color:var(--warn-edge)}

/* ---------- cabeçalho do cartão ---------- */
.ia-topo{
  display:flex;
  gap:var(--s3);
  align-items:flex-start;
  margin-bottom:var(--s4);
}
.ia-ic{
  width:36px;height:36px;
  flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-sm);
  background:var(--bg-sunk);
  color:var(--fg-2);
}
.ia-ic svg{width:19px;height:19px;display:block}

.ia-papel{font-size:var(--fs-sm);line-height:1.5;color:var(--fg)}
.ia-quem{
  font-size:var(--fs-xs);
  color:var(--fg-2);
  margin-top:3px;
}
.ia-quem b{color:var(--fg);font-weight:600}

/* ---------- campo de chave ---------- */
.ia-senha{display:flex;gap:var(--s2);align-items:stretch}
.ia-senha input{
  flex:1;
  min-width:0;
  font-size:var(--fs-sm);
  letter-spacing:.02em;
}
.ia-olho{
  flex:none;
  width:var(--tap);
  min-height:var(--tap);
  display:grid;place-items:center;
  border:1px solid var(--edge);
  border-radius:var(--r-sm);
  background:var(--card-2);
  color:var(--fg-2);
  cursor:pointer;
  transition:color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.ia-olho:hover{color:var(--fg);border-color:var(--fg-3)}
.ia-olho svg{width:19px;height:19px;display:block}

/* ---------- passo a passo ---------- */
.ia-passos{
  border:1px solid var(--edge-2);
  border-radius:var(--r-sm);
  background:var(--card-2);
  padding:0 var(--s4);
}
.ia-passos summary{
  display:flex;
  align-items:center;
  gap:var(--s2);
  min-height:var(--tap);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--fg);
  cursor:pointer;
  list-style:none;
}
.ia-passos summary::-webkit-details-marker{display:none}
.ia-passos summary svg{width:16px;height:16px;flex:none;color:var(--fg-2)}
.ia-passos summary::after{
  content:'+';
  margin-left:auto;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-lg);
  color:var(--fg-2);
  line-height:1;
}
.ia-passos[open] summary::after{content:'–'}

.ia-passos ol{
  margin:0 0 var(--s3);
  padding-left:1.35em;
  font-size:var(--fs-sm);
  line-height:1.55;
  color:var(--fg);
}
.ia-passos li{margin-bottom:var(--s2)}
.ia-passos li::marker{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-xs);
  color:var(--fg-2);
}
.ia-passos .btn{margin-bottom:var(--s3)}
.ia-passos .hint{margin:0 0 var(--s4)}

/* ---------- escolha do modelo ---------- */
.ia-modelos{display:flex;flex-direction:column;gap:var(--s2)}

.ia-modelo{
  display:flex;
  flex-direction:column;
  gap:3px;
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  padding:var(--s3) var(--s4);
  border:1px solid var(--edge);
  border-radius:var(--r-sm);
  background:var(--card);
  transition:border-color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.ia-modelo:hover{border-color:var(--fg-3)}
.ia-modelo.on{
  border-color:var(--acao);
  background:var(--card-2);
  box-shadow:inset 3px 0 0 var(--acao);
}

.ia-m-topo{display:flex;align-items:baseline;gap:var(--s3)}
.ia-m-nome{font-weight:600;font-size:var(--fs-base);letter-spacing:var(--ls-tight)}
.ia-m-preco{
  margin-left:auto;
  flex:none;
  font-size:var(--fs-xs);
  color:var(--fg-2);
}
.ia-modelo.on .ia-m-preco{color:var(--fg)}

.ia-m-etiq{
  align-self:flex-start;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--fg-2);
}
.ia-modelo.on .ia-m-etiq{color:var(--acao)}

.ia-m-txt{font-size:var(--fs-sm);line-height:1.45;color:var(--fg)}
.ia-m-quando{font-size:var(--fs-xs);line-height:1.5;color:var(--fg-2)}

.ia-card > .btn.primary{margin-top:var(--s5)}

/* =============================================================
   TESTAR — a caixa de areia

   Conversa, não cadastro. O visual toma emprestado o do WhatsApp
   dentro do fio, porque é assim que ela vai ler a mensagem depois,
   mas os avisos são do painel: cor de alerta e fonte mono.
   ============================================================= */

.teste-aviso{
  display:flex;
  gap:var(--s3);
  align-items:flex-start;
  padding:var(--s3) var(--s4);
  border-radius:var(--r);
  background:var(--card-2);
  border:1px solid var(--edge-2);
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--fg-2);
  margin-bottom:var(--s3);
}
.teste-aviso svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--fg-2)}
.teste-aviso b{color:var(--fg)}
.teste-aviso.alerta{
  background:var(--warn-soft);
  border-color:var(--warn-edge);
  color:var(--warn-fg);
}
.teste-aviso.alerta svg,
.teste-aviso.alerta b{color:var(--warn-fg)}

.link{
  background:none;border:none;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
  padding:12px 2px;margin:-12px 0;   /* 44px de alvo sem mudar o desenho */
}

.teste-quem{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}

/* ---------- o fio ---------- */
.fio-teste{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:var(--s4);
  min-height:220px;
  max-height:52vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  margin-bottom:var(--s3);
}

.teste-vazio{text-align:center;color:var(--fg-2);padding:var(--s6) var(--s3);font-size:var(--fs-sm);line-height:1.55}
.teste-vazio svg{width:26px;height:26px;color:var(--fg-3);margin-bottom:var(--s3)}
.teste-vazio b{color:var(--fg)}
.teste-vazio p+p{margin-top:var(--s2)}

.bt{
  max-width:86%;
  padding:var(--s2) var(--s3);
  border-radius:var(--r);
  font-size:var(--fs-base);
  line-height:1.5;
  white-space:pre-wrap;
}
.bt.ela{align-self:flex-end;background:var(--go-soft);border:1px solid var(--go-edge);color:var(--go-fg)}
.bt.ele{align-self:flex-start;background:var(--card-2);border:1px solid var(--edge-2)}

/* "digitando" — três pontos, o mesmo sinal do WhatsApp */
.bt.pensa{display:flex;gap:5px;padding:var(--s3)}
.bt.pensa i{width:6px;height:6px;border-radius:50%;background:var(--fg-3);animation:pensando 1.3s infinite}
.bt.pensa i:nth-child(2){animation-delay:.18s}
.bt.pensa i:nth-child(3){animation-delay:.36s}
@keyframes pensando{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* O que ele fez por trás. Some no meio do fio de propósito: é
   informação de bastidor, não conversa. */
.bt.nota{
  align-self:flex-start;
  max-width:100%;
  background:none;
  border:none;
  padding:0 var(--s2);
  display:flex;
  gap:var(--s2);
  flex-wrap:wrap;
}
.bt.nota .ferr{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  color:var(--fg-2);
  background:var(--card-2);
  border:1px solid var(--edge-2);
  border-radius:var(--r-full);
  padding:3px var(--s2);
}
.bt.nota code{font:inherit;color:var(--go-fg)}

/* ---------- o que a conferência achou ---------- */
.bt.aviso{
  align-self:stretch;
  max-width:100%;
  display:flex;
  gap:var(--s2);
  align-items:flex-start;
  font-size:var(--fs-sm);
  line-height:1.45;
  border-radius:var(--r-sm);
}
.bt.aviso svg{width:16px;height:16px;flex:none;margin-top:2px}
.bt.aviso.grave{background:var(--heat-soft);border:1px solid var(--heat-edge);color:var(--heat-fg)}
.bt.aviso.leve {background:var(--card-2);border:1px solid var(--edge-2);color:var(--fg-2)}
.bt.aviso.erro {background:var(--warn-soft);border:1px solid var(--warn-edge);color:var(--warn-fg)}
.bt.aviso.parou{background:var(--plum-soft);border:1px solid transparent;color:var(--plum)}
.bt.aviso b{font-weight:600}

/* ---------- as quatro provas ---------- */
.teste-provas{margin-bottom:var(--s3)}
.teste-provas .rot{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-2);
  margin-bottom:var(--s2);
}
.teste-provas .chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.teste-provas .vchip{font-family:inherit;font-size:var(--fs-xs);text-align:left}

/* ---------- a barra de escrever ---------- */
.teste-barra{display:flex;gap:var(--s2);align-items:center;margin-bottom:var(--s3)}
.teste-barra input{
  flex:1;
  min-width:0;          /* sem isto o campo estoura a coluna em 380px */
  min-height:var(--tap);
  padding:0 var(--s3);
  border-radius:var(--r);
  border:1px solid var(--edge);
  background:var(--card);
  color:var(--fg);
  font:inherit;
  font-size:var(--fs-base);
}
.teste-barra input:focus-visible{border-color:var(--heat);outline:none;box-shadow:0 0 0 3px var(--heat-soft)}
.teste-barra .mk.ok{min-width:var(--tap);flex:none}

/* =============================================================
   PROVAS — a biblioteca de foto e vídeo
   ============================================================= */

.prova-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--s3);
  align-items:center;
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--edge-2);
}
.prova-item:last-child{border-bottom:none}
.prova-item .ic{
  width:36px;height:36px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:var(--card-2);color:var(--fg-2);
}
.prova-item .ic svg{width:17px;height:17px}
.prova-item .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.prova-item .nm{font-weight:600;font-size:var(--fs-md)}
.prova-item .sub{font-size:var(--fs-sm);color:var(--fg-2)}

.vazio-simples{
  text-align:center;color:var(--fg-2);
  padding:var(--s7) var(--s4);
  font-size:var(--fs-sm);line-height:1.55;
}
.vazio-simples b{color:var(--fg)}
.vazio-simples p+p{margin-top:var(--s2)}

/* O mapa de qual peça quebra qual objeção. É a única coisa que
   explica por que vale a pena subir cada tipo. */
.prova-quebra{margin-top:var(--s5)}
.prova-quebra .rot{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-2);
  margin-bottom:var(--s2);
}
.prova-quebra .linha{
  display:flex;gap:var(--s3);align-items:baseline;
  padding:var(--s2) 0;
  border-bottom:1px dashed var(--edge-2);
  font-size:var(--fs-sm);
}
.prova-quebra .linha:last-child{border-bottom:none}
.prova-quebra .linha b{flex:none;min-width:118px}
.prova-quebra .linha span{color:var(--fg-2)}

/* O seletor de arquivo do navegador não aceita estilo por dentro;
   o que dá pra fazer é o botão dele. */
.campo input[type=file]{
  font:inherit;font-size:var(--fs-sm);color:var(--fg-2);
  padding:var(--s2) 0;
}
.campo input[type=file]::file-selector-button{
  font:inherit;font-size:var(--fs-sm);font-weight:600;
  min-height:var(--tap);padding:0 var(--s4);
  margin-right:var(--s3);
  border:1px solid var(--edge);border-radius:var(--r-full);
  background:var(--card);color:var(--fg);
  cursor:pointer;
}
.campo input[type=file]::file-selector-button:hover{border-color:var(--fg-3)}