:root {
  --fundo: #f4f6fa; --cartao: #ffffff; --texto: #1c2333; --suave: #667085; --borda: #e3e7ef;
  --primaria: #3b5bdb; --primaria-escura: #2f4ac0;
  --ok: #2b8a3e; --ok-fundo: #e6f4ea; --erro: #c92a2a; --erro-fundo: #fdecec;
  --alerta: #b8590b; --alerta-fundo: #fff4e5; --neutro-fundo: #eef0f4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #12151c; --cartao: #1b2029; --texto: #e6e9ef; --suave: #98a2b3; --borda: #2b3240;
    --primaria: #6b8bff; --primaria-escura: #5576f0;
    --ok: #69db7c; --ok-fundo: #1d3324; --erro: #ff8787; --erro-fundo: #3a1f22;
    --alerta: #ffc078; --alerta-fundo: #3a2c18; --neutro-fundo: #262c38;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }

.topo { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: .75rem 1.5rem;
  background: var(--cartao); border-bottom: 1px solid var(--borda); }
.topo nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.topo nav a { padding: .4rem .75rem; border-radius: 6px; color: var(--suave); }
.topo nav a.ativo, .topo nav a:hover { background: var(--neutro-fundo); color: var(--texto); text-decoration: none; }
.quem { color: var(--suave); font-size: .9rem; }
.marca { font-weight: 600; color: var(--texto); display: inline-flex; align-items: center; gap: .5rem; }
.marca.grande { font-size: 1.3rem; justify-content: center; margin-bottom: 1rem; display: flex; }
.logo { background: var(--primaria); color: #fff; border-radius: 6px; padding: .1rem .4rem; font-size: .85rem; }

.conteudo { max-width: 1180px; margin: 0 auto; padding: 1.5rem; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grade-2 { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .grade-2 { grid-template-columns: 1fr; } }
.grade-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.numero { font-size: 1.8rem; font-weight: 600; }
.rotulo { color: var(--suave); font-size: .85rem; }
.linha-titulo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.linha-titulo h1, .linha-titulo h2 { margin: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--suave); font-weight: 500; font-size: .85rem; }
tr:last-child td { border-bottom: 0; }
.tabela-rolagem { overflow-x: auto; }

label { display: block; margin-bottom: .75rem; font-size: .9rem; color: var(--suave); }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; font: inherit;
  color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaria); outline-offset: -1px; }
.campos { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.em-linha { display: inline; }

.botao { display: inline-block; padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--borda);
  background: var(--cartao); color: var(--texto); font: inherit; cursor: pointer; }
.botao:hover { background: var(--neutro-fundo); text-decoration: none; }
.botao.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.botao.primario:hover { background: var(--primaria-escura); }
.botao.perigo { color: var(--erro); border-color: var(--erro); }
.botao.pequeno { padding: .2rem .55rem; font-size: .85rem; }
.botao.largo { width: 100%; }

.selo { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.selo-ok { background: var(--ok-fundo); color: var(--ok); }
.selo-erro { background: var(--erro-fundo); color: var(--erro); }
.selo-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo-neutro { background: var(--neutro-fundo); color: var(--suave); }

.aviso { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.aviso-ok { background: var(--ok-fundo); color: var(--ok); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); }
.aviso-alerta { background: var(--alerta-fundo); color: var(--alerta); }

.codigo { font-family: Consolas, monospace; font-size: 1.05rem; letter-spacing: .05em;
  background: var(--neutro-fundo); padding: .15rem .5rem; border-radius: 4px; }
.suave { color: var(--suave); }
.pequeno { font-size: .85rem; }
.caixa-login { max-width: 380px; margin: 10vh auto; }
.passos li { margin-bottom: .5rem; }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Cota de IA */
.barra { height: 10px; background: var(--neutro-fundo); border-radius: 999px; overflow: hidden; margin: .4rem 0; }
.barra > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.barra.alerta > span { background: var(--alerta); }
.barra.erro > span { background: var(--erro); }

/* Chat da vaga */
.chat { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; padding: .25rem 0 .75rem; }
.msg { max-width: 85%; padding: .45rem .7rem; border-radius: 10px; font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-usuario { align-self: flex-end; background: var(--primaria); color: #fff; }
.msg-assistente { align-self: flex-start; background: var(--neutro-fundo); }
.msg-assistente.recusado, .msg-assistente.erro { background: var(--alerta-fundo); color: var(--alerta); }
.msg-assistente.aviso { background: var(--erro-fundo); color: var(--erro); }
.msg .quando { display: block; font-size: .72rem; opacity: .7; margin-top: .15rem; }
.chat-form { display: flex; gap: .5rem; }
.chat-form input { flex: 1; }
td.num, th.num { text-align: right; white-space: nowrap; }
/* QR Code do celular (fundo branco também no tema escuro, para a câmera ler) */
.qr-caixa { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
#qr { background: #fff; padding: 6px; border-radius: 8px; line-height: 0; }
#qr svg { width: 200px; height: 200px; }
/* Andamento do aprendizado */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.numeros .rotulo { font-size: .78rem; color: var(--suave); }
.numeros .valor { font-size: 1.35rem; font-weight: 600; }
.prog { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 3.2rem; gap: .5rem; align-items: center; font-size: .85rem; }
.prog .barra { margin: .2rem 0; }
.prog .barra > span { background: var(--primaria); }
.horas { display: flex; align-items: flex-end; gap: 2px; height: 48px; margin-top: .4rem; }
.horas span { flex: 1; background: var(--primaria); border-radius: 2px 2px 0 0; min-height: 2px; }
.horas span.vazio { background: var(--borda); }
.horas-eixo { display: flex; justify-content: space-between; font-size: .7rem; color: var(--suave); }
.evolucao { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: .5rem; }
.evolucao .dia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.evolucao .col { width: 100%; max-width: 28px; background: var(--ok); border-radius: 3px 3px 0 0; min-height: 2px; }
.evolucao .col.vazio { background: var(--borda); }
.evolucao .pct { font-size: .7rem; color: var(--suave); }
.evolucao .data { font-size: .68rem; color: var(--suave); white-space: nowrap; }
.candidata { border-top: 1px solid var(--borda); padding: .5rem 0; }
.candidata summary { cursor: pointer; }

/* Caixas de marcar e opções: sempre ao lado do rótulo (o estilo geral de input é bloco de largura total) */
input[type=checkbox], input[type=radio] { display: inline-block; width: auto; margin: 0 .3rem 0 0; vertical-align: middle; }
/* Dias da semana lado a lado ("Quando executar") */
.dias-semana { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.dias-semana label { display: inline-flex; align-items: center; margin: 0; padding: .25rem .55rem; border: 1px solid var(--borda);
  border-radius: 6px; background: var(--fundo); color: var(--texto); cursor: pointer; white-space: nowrap; }
.dias-semana label:has(input:checked) { border-color: var(--primaria); background: var(--neutro-fundo); }

/* Telas do cliente (público iniciante) */
.botao.grande { padding: .65rem 1.2rem; font-size: 1.05rem; font-weight: 600; }
.ajuda { display: inline-block; width: 1.05rem; height: 1.05rem; line-height: 1.05rem; text-align: center; border-radius: 50%;
  background: var(--neutro-fundo); color: var(--suave); font-size: .72rem; font-weight: 600; cursor: help; }
.computadores { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.computador { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .35rem; }
.computador h3 { margin: 0; font-size: 1.1rem; }
.computador .rodape-cartao { margin-top: auto; padding-top: .5rem; }
.codigo-grande { font-size: 1.35rem; padding: .25rem .7rem; }
.passo-a-passo { margin: .5rem 0; padding-left: 1.4rem; }
.passo-a-passo li { margin-bottom: .2rem; }
.cartoes-tarefa { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
@media (max-width: 800px) { .cartoes-tarefa { grid-template-columns: 1fr; } }
.cartoes-tarefa > .cartao { margin-bottom: 0; }
.cartoes-tarefa > .largura-toda { grid-column: 1 / -1; }
.detalhes-tarefa > summary { cursor: pointer; font-weight: 600; padding: .6rem 0; }
.lista-tarefas td { vertical-align: middle; }
/* "Quando fazer" do cliente: mostra só os campos do tipo escolhido */
.agenda-simples .ag-hora, .agenda-simples .ag-dias, .agenda-simples .ag-intervalo, .agenda-simples .ag-perdida { display: none; }
.agenda-simples[data-tipo=diario] .ag-hora, .agenda-simples[data-tipo=semanal] .ag-hora,
.agenda-simples[data-tipo=semanal] .ag-dias, .agenda-simples[data-tipo=intervalo] .ag-intervalo,
.agenda-simples[data-tipo=diario] .ag-perdida, .agenda-simples[data-tipo=semanal] .ag-perdida,
.agenda-simples[data-tipo=intervalo] .ag-perdida { display: block; }
/* Contador de mensagens novas no menu (Sugestões e problemas / Minhas mensagens) */
.topo nav .contador { display: inline-block; min-width: 1.3em; padding: 0 .35em; margin-left: .3em; border-radius: 999px; background: var(--erro, #e03131); color: #fff; font-size: .75em; line-height: 1.4em; text-align: center; font-weight: 600; }

/* Logo do produto (assets/img/logo.png): cabeçalho do painel e telas de entrada */
.logo-img { height: 34px; width: auto; display: block; }
.logo-img.grande { height: 64px; margin: 0 auto; }