/* Painel Asimov Agentes. Um arquivo só, sem build, sem framework.
   Vira `backend/app/painel/estaticos/painel.css` quando o painel virar backend. */

:root {
  --fundo: #f6f7f9;
  --carta: #ffffff;
  --borda: #e2e5ea;
  --texto: #14181f;
  --fraco: #667085;
  --acento: #0b7285;
  --acento-fraco: #e3f2f4;
  --ok: #15803d;
  --ok-fraco: #e7f6ec;
  --alerta: #b45309;
  --alerta-fraco: #fdf3e3;
  --erro: #b42318;
  --erro-fraco: #fdeceb;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --raio: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1216;
    --carta: #161a20;
    --borda: #272d36;
    --texto: #e8ecf2;
    --fraco: #98a2b3;
    --acento: #22b8cf;
    --acento-fraco: #10272c;
    --ok: #4ade80;
    --ok-fraco: #10261a;
    --alerta: #fbbf24;
    --alerta-fraco: #2a2112;
    --erro: #f87171;
    --erro-fraco: #2b1616;
    --sombra: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

/* Casca */

.topo {
  position: sticky; top: 0; z-index: 10;
  background: var(--carta);
  border-bottom: 1px solid var(--borda);
}
.topo-linha {
  max-width: 1120px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 16px;
}
.marca { font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.marca .ponto {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--acento); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.marca small { display: block; color: var(--fraco); font-weight: 400; font-size: 12px; }
.topo-fim { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.nav {
  max-width: 1120px; margin: 0 auto; padding: 0 16px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 9px 12px; color: var(--fraco); font-size: 14px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav a:hover { color: var(--texto); text-decoration: none; }
.nav a.ativo { color: var(--acento); border-bottom-color: var(--acento); font-weight: 550; }

main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; }
.rodape { max-width: 1120px; margin: 0 auto; padding: 0 16px 32px; color: var(--fraco); font-size: 12.5px; }

/* Texto */

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0 0 12px; letter-spacing: -.005em; }
h3 { font-size: 13px; margin: 0 0 8px; color: var(--fraco); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sub { color: var(--fraco); margin: 0 0 20px; }
.cabeca { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cabeca .acoes { margin-left: auto; display: flex; gap: 8px; }

/* Cartas e grades */

.carta {
  background: var(--carta); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra);
}
.carta + .carta { margin-top: 16px; }
a.carta { display: block; }
a.carta:hover { border-color: var(--acento); text-decoration: none; }
.grade { display: grid; gap: 16px; }
.grade.g2 { grid-template-columns: repeat(2, 1fr); }
.grade.g3 { grid-template-columns: repeat(3, 1fr); }
.grade.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grade.g3, .grade.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grade.g2, .grade.g3, .grade.g4 { grid-template-columns: 1fr; } }

.numero { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.numero small { font-size: 13px; font-weight: 400; color: var(--fraco); }
.rotulo { color: var(--fraco); font-size: 13px; }
.rotulo.mono { white-space: nowrap; }

/* Listas de ficha */

.ficha { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; font-size: 14px; }
.ficha dt { color: var(--fraco); }
.ficha dd { margin: 0; }
@media (max-width: 560px) { .ficha { grid-template-columns: 1fr; gap: 2px; } .ficha dd { margin-bottom: 8px; } }

/* Tabelas */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--fraco); font-weight: 550; font-size: 12.5px; padding: 0 12px 8px; }
td { padding: 11px 12px; border-top: 1px solid var(--borda); vertical-align: middle; }
tr.clicavel:hover td { background: var(--acento-fraco); cursor: pointer; }
td.fim, th.fim { text-align: right; }
.tabela-rola { overflow-x: auto; }

/* Selos */

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 550;
  background: var(--acento-fraco); color: var(--acento);
}
.selo.ok { background: var(--ok-fraco); color: var(--ok); }
.selo.alerta { background: var(--alerta-fraco); color: var(--alerta); }
.selo.erro { background: var(--erro-fraco); color: var(--erro); }
.selo.neutro { background: var(--fundo); color: var(--fraco); }
.selo .bolinha { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pisca { animation: pisca 1.6s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .25; } }

/* Botões e formulários */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--carta); color: var(--texto); font: inherit; font-size: 14px; font-weight: 550;
  cursor: pointer; text-decoration: none;
}
.botao:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.botao.forte { background: var(--acento); border-color: var(--acento); color: #fff; }
.botao.forte:hover { filter: brightness(1.08); color: #fff; }
.botao.perigo:hover { border-color: var(--erro); color: var(--erro); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.pequeno { padding: 6px 10px; font-size: 13px; }

label { display: block; font-size: 13.5px; font-weight: 550; margin-bottom: 6px; }
label .dica { display: block; font-weight: 400; color: var(--fraco); font-size: 12.5px; margin-top: 2px; }
input[type=text], input[type=password], input[type=number], input[type=url], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--fundo); color: var(--texto); font: inherit; font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }
textarea { min-height: 160px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; }
.campo + .campo { margin-top: 16px; }

.opcoes { display: grid; gap: 8px; }
.opcao {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; background: var(--carta);
}
.opcao:hover { border-color: var(--acento); }
.opcao input { margin: 2px 0 0; flex: none; accent-color: var(--acento); }
.opcao.marcada { border-color: var(--acento); background: var(--acento-fraco); }
.opcao b { font-weight: 600; font-size: 14px; }
.opcao span { display: block; color: var(--fraco); font-size: 13px; }

/* Avisos */

.aviso { padding: 12px 14px; border-radius: 8px; font-size: 14px; border: 1px solid; }
.aviso.info { background: var(--acento-fraco); border-color: transparent; color: var(--acento); }
.aviso.ok { background: var(--ok-fraco); border-color: transparent; color: var(--ok); }
.aviso.alerta { background: var(--alerta-fraco); border-color: transparent; color: var(--alerta); }
.aviso.erro { background: var(--erro-fraco); border-color: transparent; color: var(--erro); }
.aviso + * { margin-top: 16px; }

.torrada {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--texto); color: var(--fundo); padding: 11px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 550; opacity: 0; pointer-events: none; transition: .18s; z-index: 50;
}
.torrada.ver { opacity: 1; transform: translateX(-50%); }

/* Conversa */

.conversa { display: flex; flex-direction: column; gap: 10px; }
.balao { max-width: 74%; padding: 9px 13px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; }
.balao .quem { font-size: 11.5px; font-weight: 600; opacity: .7; margin-bottom: 3px; }
.balao .hora { font-size: 11px; opacity: .55; margin-top: 4px; }
.de-contato { align-self: flex-start; background: var(--fundo); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.de-agente { align-self: flex-end; background: var(--acento); color: #fff; border-bottom-right-radius: 4px; }
.de-atendente { align-self: flex-end; background: var(--alerta-fraco); color: var(--alerta); border-bottom-right-radius: 4px; }
.de-sistema { align-self: center; background: transparent; color: var(--fraco); font-size: 12.5px; text-align: center; }
.digitando { align-self: flex-end; color: var(--fraco); font-size: 13px; }

/* Assistente */

.passos { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.passos div {
  flex: 1 1 90px; height: 4px; border-radius: 2px; background: var(--borda); position: relative;
}
.passos div.feito { background: var(--acento); }
.passos div.agora { background: var(--acento); opacity: .45; }
.passos span { position: absolute; top: 10px; left: 0; font-size: 11.5px; color: var(--fraco); white-space: nowrap; }
.passos { margin-bottom: 34px; }

.qr { font-family: ui-monospace, monospace; font-size: 9px; line-height: 9px; letter-spacing: 0; white-space: pre; }

.vazio { text-align: center; color: var(--fraco); padding: 34px 16px; font-size: 14px; }
.entrar { max-width: 380px; margin: 9vh auto; }