/* donna.css — o design system do painel: tokens, layout e os componentes usados pelas
   telas (login, casca, tabela de Clientes). Sem framework, sem fonte de terceiro: só o
   que está aqui. Referência visual: .superpowers/brainstorm/46519-1790599990/content/
   operador.html (opção A da tabela) — as classes abaixo reproduzem aquele layout, mas
   com os tokens e nomes deste arquivo, não com o CSS inline do rascunho. */

:root {
  --fundo: #f6f7f9; --superficie: #ffffff; --borda: #e5e7eb; --borda-forte: #d1d5db;
  --texto: #111827; --texto-2: #374151; --apagado: #6b7280; --sutil: #9ca3af;
  --lateral: #111827; --lateral-texto: #cbd5e1; --lateral-ativo: #1f2937;
  --primaria: #2563eb; --primaria-fundo: #eff6ff; --primaria-anel: #dbeafe;
  --ok: #16a34a; --ok-fundo: #dcfce7; --ok-texto: #166534;
  --aviso: #f59e0b; --aviso-fundo: #fef3c7; --aviso-texto: #92400e;
  --erro: #ef4444; --erro-fundo: #fee2e2; --erro-texto: #991b1b;
  --neutro-fundo: #f1f5f9; --neutro-texto: #64748b;
  --raio: 10px; --raio-p: 7px; --sombra: 0 1px 2px rgba(15, 23, 42, .06);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0b1220; --superficie: #111a2e; --borda: #1f2a44; --borda-forte: #2b3a5c;
    --texto: #e5e7eb; --texto-2: #cbd5e1; --apagado: #94a3b8; --sutil: #64748b;
    --lateral: #070d18; --lateral-ativo: #152038;
    --primaria-fundo: #11214a; --primaria-anel: #1d3a80;
    --ok-fundo: #0f2e1d; --ok-texto: #86efac; --aviso-fundo: #33240a; --aviso-texto: #fcd34d;
    --erro-fundo: #3a1214; --erro-texto: #fca5a5; --neutro-fundo: #1a2438; --neutro-texto: #94a3b8;
  }
}

/* ── base ── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.45 var(--fonte);
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; }
a { color: inherit; }
button { font: inherit; }

/* foco visível em todo controle, sempre */
:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

/* ── casca: barra lateral fixa + conteúdo ── */
.casca {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}
.lateral {
  width: 200px;
  flex-shrink: 0;
  background: var(--lateral);
  color: var(--lateral-texto);
  padding: 18px 12px;
}
.lateral .logo {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  margin: 0 8px 18px;
}
.lateral .logo small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: #fbbf24;
  letter-spacing: .04em;
}
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--lateral-texto);
  text-decoration: none;
  font-size: 13px;
}
.lateral nav a:hover { background: var(--lateral-ativo); color: #fff; }
.lateral nav a[aria-current="page"] { background: var(--lateral-ativo); color: #fff; }

.conteudo {
  flex: 1;
  min-width: 0;
  padding: 24px 28px;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 860px) {
  .casca { flex-direction: column; }
  .lateral {
    width: 100%;
    overflow-x: auto;
    padding: 10px 12px;
  }
  .lateral nav { flex-direction: row; gap: 4px; white-space: nowrap; }
  .lateral .logo { margin: 0 8px 10px; }
  .conteudo { padding: 16px; max-width: 100%; }
}

/* ── avisos flutuantes (aria-live) ── */
.avisos {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}

/* ── cabeçalho de tela ── */
.tela-cabecalho {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tela-cabecalho h1 { font-size: 19px; }
.tela-resumo { color: var(--apagado); font-size: 13px; }
.tela-acao { margin-left: auto; }

/* ── KPIs ── */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
.kpi {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 10px 14px;
}
.kpi .rotulo {
  font-size: 11px;
  color: var(--apagado);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kpi .valor { font-size: 21px; font-weight: 700; margin-top: 2px; }

/* ── cartão genérico ── */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
}

/* ── tabela ── */
.tabela-caixa { overflow-x: auto; }
table.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  font-size: 13px;
}
.tabela th {
  text-align: left;
  font-size: 11px;
  color: var(--apagado);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 9px 12px;
  background: var(--neutro-fundo);
  border-bottom: 1px solid var(--borda);
}
.tabela td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
.tabela tr:last-child td { border-bottom: none; }
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela b { display: block; }
.tabela small { color: var(--apagado); }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover { background: var(--primaria-fundo); }
.tabela a { text-decoration: none; }
.tabela a:hover { text-decoration: underline; }

/* ── pílula de status ── */
.pilula {
  display: inline-block;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pilula.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.pilula.warn { background: var(--aviso-fundo); color: var(--aviso-texto); }
.pilula.err { background: var(--erro-fundo); color: var(--erro-texto); }
.pilula.off { background: var(--neutro-fundo); color: var(--neutro-texto); }

/* ── chip ── */
.chip {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--neutro-fundo);
  color: var(--texto-2);
  margin-right: 3px;
}
/* achado 6 do fix round 1: o chip de canal quando falta WhatsApp ("WhatsApp pendente")
   não pode ler igual a um canal conectado — mesmo fundo, texto mais apagado e em itálico. */
.chip-mudo { color: var(--apagado); font-style: italic; }

/* ── botão ── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  min-width: 36px;
  padding: 7px 14px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: none;
}
.botao:hover { background: var(--fundo); }
.botao.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.botao.primario:hover { filter: brightness(1.08); }
.botao:disabled { opacity: .6; cursor: not-allowed; }

/* ── campo de formulário ── */
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.campo label { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.campo input, .campo select, .campo textarea, .mapa-crm select {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}
.campo input:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }

/* ── gaveta lateral ── */
.gaveta-fundo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .4);
  z-index: 40;
}
.gaveta {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--superficie);
  border-left: 1px solid var(--borda);
  box-shadow: var(--sombra);
  z-index: 41;
  display: flex;
  flex-direction: column;
}
.gaveta-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda);
}
.gaveta-conteudo { padding: 16px; overflow-y: auto; }

/* ── passos (fluxo de várias etapas) ── */
.passos { display: flex; gap: 0; margin-bottom: 18px; }
.passos > * {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--apagado);
}

/* ── avisos (banners e notas) ── */
.aviso {
  padding: 10px 14px;
  border-radius: var(--raio-p);
  font-size: 13px;
  margin-bottom: 12px;
}
.aviso-info { background: var(--primaria-fundo); color: var(--texto-2); }
.aviso-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.aviso-warn { background: var(--aviso-fundo); color: var(--aviso-texto); }
.aviso-err { background: var(--erro-fundo); color: var(--erro-texto); }
/* Achado do minor do fix round 1: um erro (de `aviso()`, ui.js) não some sozinho — ganha
   um botão de fechar, lado a lado com o texto. Só a notificação avulsa (`.aviso-dispensavel`)
   vira uma linha — `.aviso-err` sozinha também veste a caixa de VÁRIAS linhas do painel de
   falha de Versões (`versoes-painel-falha`), que precisa continuar empilhada. */
.aviso-dispensavel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aviso-mensagem { flex: 1; }
.aviso-fechar {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 2px;
}

/* ── estado da tela (carregando / vazio / erro) ── */
.estado-tabela {
  padding: 48px 20px;
  text-align: center;
  color: var(--apagado);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.estado-tabela p { margin: 0 0 12px; }

/* ── tela de login ── */
.entrada-tela {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.entrada-cartao {
  width: 100%;
  max-width: 360px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 28px 24px;
}
.logo-entrada {
  color: var(--texto);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
}
.logo-entrada small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--aviso);
  letter-spacing: .04em;
}
.entrada-erro {
  color: var(--erro-texto);
  background: var(--erro-fundo);
  border-radius: var(--raio-p);
  padding: 8px 10px;
  font-size: 12.5px;
  margin: 0 0 14px;
}
.entrada-botao { width: 100%; }

/* ── tela "seu escritório" (papel não-operador) ── */
.tela-escritorio h1 { font-size: 19px; margin-bottom: 4px; }
.tela-escritorio .pilula { margin: 10px 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   Task 11 — assistente "Novo cliente" e a página do cliente. Referência visual:
   .superpowers/brainstorm/46519-1790599990/content/operador.html (fim, o fluxo em 5
   passos) e .../integracoes.html (opção A, cartões + gaveta) — layout e densidade
   daqueles rascunhos, com os tokens e nomes deste arquivo.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── botão: variantes pequeno/perigo (além de .primario, já existente) ── */
.botao.pequeno { min-height: 28px; padding: 4px 10px; font-size: 11.5px; }
.botao.perigo { border-color: var(--erro); color: var(--erro-texto); }
.botao.perigo:hover { background: var(--erro-fundo); }

/* ── campo: erro em linha, dica, grupo de checkbox ── */
.campo-erro { color: var(--erro-texto); font-size: 12px; margin: 2px 0 0; }
.campo-dica { color: var(--apagado); font-size: 12px; margin: 2px 0 10px; }
.campo-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 14px; cursor: pointer; }
.campo-rotulo-grupo { font-size: 12.5px; color: var(--texto-2); font-weight: 600; display: block; margin-bottom: 6px; }

/* ── assistente "Novo cliente": barra de passos numerada, conteúdo, rodapé ── */
.assistente { max-width: 760px; }
.passos-numeradas { gap: 4px; }
.passo-numero {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--apagado);
  position: relative;
  padding-top: 34px;
}
.passo-numero b {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--neutro-fundo);
  color: var(--neutro-texto);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.passo-numero.done b { background: var(--ok); color: #fff; }
.passo-numero.now b { background: var(--primaria); color: #fff; }
.passo-numero.now { color: var(--texto); font-weight: 600; }
.passo-area {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.passo-conteudo > .campo:last-child { margin-bottom: 0; }
.passo-rodape { display: flex; gap: 8px; justify-content: flex-end; }

/* ── seletor de provedor (grade) ── */
.provedores { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.provedor-opcao {
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  padding: 10px 6px;
  text-align: center;
  font-size: 12.5px;
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
}
.provedor-opcao small { display: block; font-size: 10px; color: var(--apagado); margin-top: 2px; }
.provedor-opcao.on { border-color: var(--primaria); background: var(--primaria-fundo); color: var(--primaria); font-weight: 600; }
.provedor-opcao.soon { opacity: .5; cursor: not-allowed; }
.provedor-opcao:disabled { cursor: not-allowed; }

/* ── campo de segredo já configurado (sha256, "trocar") ── */
.campo-segredo-pronto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  padding: 8px 10px;
  background: var(--fundo);
  color: var(--texto-2);
  font-family: var(--mono);
  font-size: 12px;
}

/* ── resultado de "testar" ── */
.campo-teste { margin-bottom: 14px; }
.resultado-teste { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.resultado-linha {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--raio-p);
  font-size: 12.5px;
}
.resultado-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.resultado-warn { background: var(--aviso-fundo); color: var(--aviso-texto); }
.resultado-err { background: var(--erro-fundo); color: var(--erro-texto); }
.resultado-off { background: var(--neutro-fundo); color: var(--neutro-texto); }

/* ── passos de uma tarefa (subir/atualizar), acompanhados com tarefa.js ── */
.caixa-passos { margin: 10px 0; }
.passos-tarefa { display: flex; flex-direction: column; gap: 2px; }
.linha-passo { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.linha-passo i { width: 18px; text-align: center; font-style: normal; }
.linha-passo span { color: var(--apagado); margin-left: auto; font-size: 12px; }
.linha-passo-espera { color: var(--sutil); }
.linha-passo-falhou { color: var(--erro-texto); }

/* ── acessos: criar/redefinir, senha exibida uma vez ── */
.acesso-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.acesso-resultado { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.acesso-senha { font-family: var(--mono); color: var(--texto); background: var(--fundo); padding: 2px 6px; border-radius: 4px; }

/* ── faixa fixa "há mudanças não aplicadas" ── */
.faixa-fixa {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--aviso-fundo);
  color: var(--aviso-texto);
  border: 1px solid var(--aviso);
  border-radius: var(--raio-p);
  padding: 10px 14px;
  margin-bottom: 14px;
}

/* ── página do cliente: seções e cartões de integração ── */
.tela-cliente .tela-cabecalho a { font-size: 13px; }
.secao-escritorio, .secao-acoes, .secao-acessos, .secao-historico { margin-top: 16px; }
.secao-escritorio h2, .secao-acoes h2, .secao-acessos h2, .secao-historico h2 { font-size: 16px; margin-bottom: 12px; }
.secao-acoes h3, .secao-acessos h3 { font-size: 13px; color: var(--texto-2); margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--borda); }

.integracoes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 4px; }
.integracao-cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
}
.integracao-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.integracao-icone {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: var(--primaria-fundo);
  flex-shrink: 0;
}
.integracao-topo b { font-size: 14.5px; display: block; }
.integracao-topo span { font-size: 12px; color: var(--apagado); }
.integracao-topo .pilula { margin-left: auto; }
.integracao-fatos { font-size: 12.5px; color: var(--texto-2); margin: 0 0 10px; padding: 0; list-style: none; }
.integracao-fatos li { padding: 2px 0; }
.integracao-botoes { display: flex; gap: 8px; }

/* ── formulário de integração (gaveta e passos do assistente) ── */
.formulario-integracao h4 { font-size: 13px; color: var(--texto-2); margin: 14px 0 8px; }
.painel-crm h4, .painel-assinatura h4 { font-size: 13px; color: var(--texto-2); margin: 14px 0 8px; }
.mapa-crm { display: grid; grid-template-columns: 130px 18px 1fr; gap: 6px 8px; align-items: center; font-size: 12.5px; margin-bottom: 12px; }
.mapa-crm .ev b { display: block; font-weight: 600; }
.mapa-crm .arr { color: var(--sutil); text-align: center; }
.mapa-campo { display: flex; flex-direction: column; gap: 2px; }
/* achado 6 do fix round 1: só a borda leva a cor de aviso (o controle continua com o
   mesmo estilo dos outros campos); a pendência é dita por `.nota-pendente`, ao lado. */
.mapa-crm select.campo-pendente { border-color: var(--aviso); }
.nota-pendente { color: var(--aviso-texto); font-size: 11px; }
.lista-chips { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 8px; padding: 0; }
.variaveis-modelo { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════════════
   Task 12 — Versões (canário + reinício), Histórico da frota e Câmbio e preços.
   Mesmos tokens/componentes de cima: cartão, campo, tabela, aviso, pilula.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Versões ── */
.versoes-imagens { margin-bottom: 14px; }
/* Achado do minor do fix round 1: uma tabela de verdade (não mais `.lista-chips`, que é
   `display: flex; flex-wrap: wrap` — pensada para chips curtos lado a lado, o que colava
   as tags umas nas outras numa única faixa) — uma linha por tag. */
.versoes-tabela-imagens td:first-child { font-family: var(--mono); }
.versoes-form { margin-bottom: 14px; }
.versoes-canario-linha { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.versoes-canario-linha .campo { flex: 1; min-width: 180px; margin-bottom: 0; }
/* Achado do minor do fix round 1: a ação mais arriscada do painel ("Atualizar toda a
   frota") separada visualmente do canário (a ação comum) — nunca mais "colada" embaixo do
   campo de cima. */
.versoes-frota-acao { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda); }
.versoes-frota-acao .campo-dica { margin: 0 0 8px; }
.versoes-acompanhamento .aviso p { margin: 0 0 4px; }
.versoes-acompanhamento .aviso p:last-child { margin-bottom: 0; }
.versoes-rollback { margin-top: 10px; }

/* ── Histórico ── */
.campo-filtro { max-width: 320px; margin-bottom: 16px; }

/* ── Câmbio e preços ── */
.cambio-form { max-width: 420px; margin-bottom: 16px; }
.cambio-exemplo { font-variant-numeric: tabular-nums; }
table.tabela-explicacao caption {
  text-align: left;
  font-size: 11px;
  color: var(--apagado);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 9px 12px;
  background: var(--neutro-fundo);
  border: 1px solid var(--borda);
  border-bottom: none;
  border-radius: var(--raio) var(--raio) 0 0;
}
table.tabela-explicacao { border-radius: 0 0 var(--raio) var(--raio); }
table.tabela-explicacao th[scope="row"] {
  text-align: left;
  font-size: 12.5px;
  color: var(--texto-2);
  font-weight: 600;
  white-space: nowrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
table.tabela-explicacao td { font-size: 12.5px; color: var(--texto-2); }