/* Painel VC Farm.
   Identidade definida em "App VC Farm, Especificacao.md", secao 1.5, e
   desenhada no prototipo em "4. App/prototipo-painel.html".

   Regra que nao se quebra: azul age, verde informa. Se o verde virar cor de
   botao, ele deixa de significar "esta bom" e a leitura de estado morre.

   Nenhuma cor e escrita direto num componente. Tudo sai de token, e e por
   isso que o tema escuro e a redefinicao de trinta linhas ali embaixo, e nao
   uma folha de estilo paralela. */

:root{
  --ground:#F6F9F8;
  --surface:#FFFFFF;
  --surface-2:#EEF3F2;
  --line:#DCE5E3;
  --line-soft:#E8EEED;
  --ink:#12211E;
  --ink-2:#4A5C58;
  --ink-3:#7C8C88;
  --brand:#0F5C73;
  --brand-ink:#0B4557;
  --brand-wash:#E3EEF2;
  --good:#2E9E6B;
  --good-wash:#E2F2EA;
  --warn:#C08A2B;
  --warn-wash:#F7EEDC;
  --bad:#BE4A3E;
  --bad-wash:#F8E6E4;
  --bot:#EAF1F4;
  --human:#E6F1EA;
  --sobre-brand:#FFFFFF;
  --shadow:0 1px 2px rgba(18,33,30,.06),0 4px 12px rgba(18,33,30,.05);
  --radius:10px;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0D1719; --surface:#131F21; --surface-2:#18272A;
    --line:#25383B; --line-soft:#1D2E31;
    --ink:#E6EFED; --ink-2:#A3B5B1; --ink-3:#758884;
    --brand:#4FA8C4; --brand-ink:#7FC4DA; --brand-wash:#14313B;
    --good:#4CBE87; --good-wash:#123327;
    --warn:#D9A64A; --warn-wash:#33280F;
    --bad:#DC6B5E; --bad-wash:#361A17;
    --bot:#1A2B30; --human:#163024;
    --sobre-brand:#08191F;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --ground:#0D1719; --surface:#131F21; --surface-2:#18272A;
  --line:#25383B; --line-soft:#1D2E31;
  --ink:#E6EFED; --ink-2:#A3B5B1; --ink-3:#758884;
  --brand:#4FA8C4; --brand-ink:#7FC4DA; --brand-wash:#14313B;
  --good:#4CBE87; --good-wash:#123327;
  --warn:#D9A64A; --warn-wash:#33280F;
  --bad:#DC6B5E; --bad-wash:#361A17;
  --bot:#1A2B30; --human:#163024;
  --sobre-brand:#08191F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.centro{display:grid;place-items:center;min-height:100vh;padding:20px}
a{color:var(--brand-ink)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0 0 10px}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}

.faixa-ambiente{
  background:var(--warn-wash); color:var(--warn); text-align:center;
  padding:5px 16px; font-size:12.5px; font-weight:600;
}

/* Vencimento de infraestrutura. Amarelo antes, vermelho depois, e some so
   quando alguem marcar como renovado. Dominio vencido derruba todos os
   clientes de uma vez, e por isso ele fala mais alto que a tela. */
.aviso-vencimento{
  background:var(--warn-wash); color:var(--warn);
  padding:8px 20px; font-size:13px; font-weight:500;
  display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.aviso-vencimento.vencido{background:var(--bad-wash);color:var(--bad)}
.aviso-vencimento b{font-weight:700}
.aviso-vencimento a{color:inherit}

/* --------------------------------------------------------------- topo */
.topo{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.topo-linha{display:flex;align-items:center;gap:13px;padding:10px 20px;flex-wrap:wrap}
.marca{
  display:flex;align-items:center;gap:10px;font-weight:700;
  letter-spacing:-.02em;font-size:15px;color:var(--ink);text-decoration:none;
}
.marca.grande{font-size:18px;justify-content:center;margin-bottom:4px}
.marca-simbolo{width:31px;height:19px;flex:none;display:block}
.marca.grande .marca-simbolo{width:41px;height:25px}
.marca-simbolo .v{stroke:var(--brand)}
.marca-simbolo .c{stroke:var(--good)}
.divisor-v{width:1px;height:26px;background:var(--line)}

.seletor-forma{display:flex;gap:6px;align-items:center;min-width:0}
.seletor{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 11px;font-weight:500;max-width:290px;cursor:pointer;
}
.seletor:hover{border-color:var(--brand)}

.estado{
  display:inline-flex;align-items:center;gap:7px;border-radius:99px;
  padding:5px 11px 5px 9px;font-size:12.5px;font-weight:500;
  background:var(--surface-2);color:var(--ink-3);text-decoration:none;
}
.estado.aberto{background:var(--good-wash);color:var(--good)}
.estado.conectando{background:var(--warn-wash);color:var(--warn)}
.estado.caiu{background:var(--bad-wash);color:var(--bad)}
.ponto{width:7px;height:7px;border-radius:99px;background:currentColor;flex:none}
.estado.conectando .ponto{animation:pulsa 1.6s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.estado .ponto{animation:none}}

.topo-fim{margin-left:auto;display:flex;align-items:center;gap:12px}
.contador{font-size:12.5px;color:var(--ink-2);text-decoration:none}
.contador b{color:var(--brand-ink);font-weight:600}
.sair{font-size:13px;color:var(--ink-3);text-decoration:none}
.sair:hover{color:var(--brand-ink)}
.usuario{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.avatar{
  width:27px;height:27px;border-radius:99px;background:var(--brand-wash);
  color:var(--brand-ink);display:grid;place-items:center;font-size:11.5px;font-weight:700;
}
.tema{
  border:1px solid var(--line);border-radius:8px;width:30px;height:30px;
  display:grid;place-items:center;color:var(--ink-2);font-size:14px;
  background:none;cursor:pointer;
}
.tema:hover{border-color:var(--brand);color:var(--brand)}

.abas{display:flex;gap:2px;padding:0 12px;overflow-x:auto;scrollbar-width:thin}
.aba{
  padding:9px 13px 11px;font-size:13.5px;font-weight:500;color:var(--ink-2);
  border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none;
}
.aba:hover{color:var(--ink)}
.aba[aria-current="page"]{color:var(--brand-ink);border-bottom-color:var(--brand);font-weight:600}
.aba .n{
  font-size:11px;background:var(--brand);color:var(--sobre-brand);border-radius:99px;
  padding:1px 6px;margin-left:6px;font-weight:600;vertical-align:1px;
}

/* ------------------------------------------------------------ conteudo */
main{max-width:1220px;margin:0 auto;padding:22px 20px 60px}
main.largo{max-width:1440px}
.cabeca{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.cabeca h1{font-size:21px;font-weight:700}
.cabeca p{margin:2px 0 0;color:var(--ink-2);font-size:13.5px}
.cabeca .acoes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.sub-abas{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.sub-aba{
  border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:12.5px;
  color:var(--ink-2);text-decoration:none;font-weight:500;background:var(--surface);
}
.sub-aba:hover{border-color:var(--brand);color:var(--brand-ink)}
.sub-aba[aria-current="page"]{background:var(--brand-wash);border-color:var(--brand);color:var(--brand-ink);font-weight:600}

.btn{
  border:1px solid var(--line);background:var(--surface);border-radius:8px;
  padding:7px 13px;font-size:13.5px;font-weight:500;color:var(--ink);
  cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;
}
.btn:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn.forte{background:var(--brand);border-color:var(--brand);color:var(--sobre-brand)}
.btn.forte:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--sobre-brand)}
.btn.pequeno{padding:5px 10px;font-size:12.5px}
.btn.largo{width:100%;padding:10px;margin-top:6px}
.btn.perigo:hover{border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-linha{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.embutido{display:inline}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:22px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px}
.tile .rotulo{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600}
.tile .valor{font-size:27px;font-weight:700;letter-spacing:-.03em;margin-top:5px;font-variant-numeric:tabular-nums}
.tile .nota{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.tile .nota.sobe{color:var(--good)}
.tile .nota.atencao{color:var(--warn)}
.tile .nota.ruim{color:var(--bad)}

.faixa{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
.faixa-topo{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.faixa-topo h2{font-size:14.5px;font-weight:600}
.faixa-topo .direita{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.faixa-corpo{padding:15px}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:start}

.limite{padding:15px}
.limite-linha{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px;gap:12px}
.limite-linha b{font-variant-numeric:tabular-nums}
.barra{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:var(--good)}
.barra i.cheio{background:var(--warn)}
.barra i.estourou{background:var(--bad)}
.barra.fina{height:5px}
.limite-nota{font-size:12.5px;color:var(--ink-3);margin-top:8px}

.dados{display:flex;flex-direction:column;gap:0;margin:0}
.dado{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.dado:last-child{border-bottom:none}
.dado dt{color:var(--ink-2)}
.dado dd{margin:0;font-weight:500;text-align:right}

/* ---------------------------------------------------------- conversas */
.conversas{
  display:grid;grid-template-columns:315px 1fr;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;height:min(640px,calc(100vh - 250px));min-height:440px;
}
.coluna-lista{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.filtros{display:flex;gap:5px;padding:10px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.filtro{
  border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:12px;
  color:var(--ink-2);white-space:nowrap;font-weight:500;text-decoration:none;background:var(--surface);
}
.filtro:hover{border-color:var(--brand)}
.filtro[aria-pressed="true"]{background:var(--brand-wash);border-color:var(--brand);color:var(--brand-ink)}
.lista{overflow-y:auto;flex:1}
.item{
  display:block;width:100%;text-align:left;padding:11px 13px;
  border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit;
}
.item:hover{background:var(--surface-2)}
.item[aria-current="true"]{background:var(--brand-wash)}
.item-topo{display:flex;align-items:baseline;gap:8px}
.item-nome{font-weight:600;font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-hora{font-size:11.5px;color:var(--ink-3);font-family:var(--mono);flex:none}
.item-previa{font-size:12.5px;color:var(--ink-2);margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-marcas{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.marca-mini{
  font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;background:var(--surface-2);color:var(--ink-3);
}
.marca-mini.nao-lida{background:var(--brand);color:var(--sobre-brand)}
.marca-mini.humano{background:var(--human);color:var(--good)}
.marca-mini.erro{background:var(--bad-wash);color:var(--bad)}
.marca-mini.optout{background:var(--warn-wash);color:var(--warn)}

.coluna-conversa{display:flex;flex-direction:column;min-width:0}
.conversa-topo{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.conversa-topo .quem{font-weight:600;font-size:14px}
.conversa-topo .fone{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.conversa-topo .botoes{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.mensagens{flex:1;overflow-y:auto;padding:16px 15px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:74%;padding:9px 12px;border-radius:12px;font-size:13.5px}
.msg .quando{display:block;font-size:10.5px;color:var(--ink-3);margin-top:4px;font-family:var(--mono)}
.msg.lead{background:var(--surface-2);border-bottom-left-radius:3px;align-self:flex-start}
.msg.bot{background:var(--bot);border-bottom-right-radius:3px;align-self:flex-end}
.msg.humano{background:var(--human);border-bottom-right-radius:3px;align-self:flex-end}
.msg.sistema{background:transparent;border:1px dashed var(--line);align-self:center;color:var(--ink-3);font-size:12.5px;max-width:90%}
.msg .autor{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;color:var(--ink-3)}
.msg.humano .autor{color:var(--good)}
.msg.bot .autor{color:var(--brand)}
.msg .transcricao{display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-2);font-style:italic}
.msg .falhou{display:block;margin-top:5px;font-size:11.5px;color:var(--bad);font-weight:600}
.msg audio{display:block;margin-top:6px;max-width:100%}
.responder{display:flex;gap:8px;padding:11px 15px;border-top:1px solid var(--line-soft)}
.responder input{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--ground);min-width:0}
.responder input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.pausado{font-size:12px;color:var(--warn);background:var(--warn-wash);padding:7px 15px;border-bottom:1px solid var(--line-soft)}
.pausado.desligado{color:var(--bad);background:var(--bad-wash)}

/* ------------------------------------------------------------- tabela */
.envolve-tabela{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);font-weight:600;padding:9px 13px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:10px 13px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
td a{text-decoration:none;font-weight:500}
td a:hover{text-decoration:underline}
.vazio{padding:26px 15px;text-align:center;color:var(--ink-3);font-size:13.5px}
.direita{text-align:right}

.pilula{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.pilula.novo{background:var(--brand-wash);color:var(--brand-ink)}
.pilula.andamento{background:var(--warn-wash);color:var(--warn)}
.pilula.agendado{background:var(--good-wash);color:var(--good)}
.pilula.perdido{background:var(--surface-2);color:var(--ink-3)}
.pilula.optout{background:var(--bad-wash);color:var(--bad)}
.pilula.admin{background:var(--brand-wash);color:var(--brand-ink)}
.pilula.cliente{background:var(--good-wash);color:var(--good)}
.pilula.inativo{background:var(--bad-wash);color:var(--bad)}
.pilula.boa{background:var(--good-wash);color:var(--good)}
.pilula.atencao{background:var(--warn-wash);color:var(--warn)}
.pilula.ruim{background:var(--bad-wash);color:var(--bad)}

.busca{border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:var(--surface);min-width:210px}
.busca:focus{outline:2px solid var(--brand);outline-offset:-1px}
.paginacao{display:flex;gap:8px;align-items:center;justify-content:center;padding:12px;color:var(--ink-3);font-size:13px}

/* ------------------------------------------------------------ importar */
.solta{border:2px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center;background:var(--surface);margin-bottom:16px}
.solta h3{font-size:15px;font-weight:600}
.solta p{color:var(--ink-2);margin:5px 0 13px;font-size:13.5px}
.solta .formatos{font-size:12px;color:var(--ink-3);margin-top:11px}
.solta input[type=file]{margin:0 auto 12px;display:block;max-width:100%}
.relatorio{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-bottom:16px}
.rel{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--surface)}
.rel .n{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rel .q{font-size:12.5px;color:var(--ink-2);margin-top:1px}
.rel.ok .n{color:var(--good)}
.rel.dup .n{color:var(--warn)}
.rel.ruim .n{color:var(--bad)}

/* ----------------------------------------------------------- instancia */
.qr-caixa{text-align:center}
.qr-caixa img{width:190px;height:190px;border-radius:var(--radius);background:#fff;padding:6px;margin:0 auto 12px;display:block}
.qr{
  width:170px;height:170px;border-radius:var(--radius);margin:0 auto 12px;
  background:
    repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px),
    repeating-linear-gradient(0deg,var(--ink) 0 6px,transparent 6px 12px);
  background-color:var(--surface);opacity:.16;
}

/* -------------------------------------------------------------- funil */
.funil{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.coluna-funil{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.coluna-funil h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:8px}
.coluna-funil h3 b{color:var(--ink);font-variant-numeric:tabular-nums}
.cartao{padding:9px 12px;border-bottom:1px solid var(--line-soft);display:block;text-decoration:none;color:inherit}
.cartao:hover{background:var(--surface-2)}
.cartao .n{font-weight:600;font-size:13px}
.cartao .f{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* -------------------------------------------------------------- agenda */
.semana{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:8px}
.dia{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-height:150px;display:flex;flex-direction:column}
.dia.hoje{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.dia-topo{padding:8px 10px;border-bottom:1px solid var(--line-soft)}
.dia-topo .nome{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.dia-topo .num{font-size:17px;font-weight:700;letter-spacing:-.02em}
.dia.hoje .dia-topo .num{color:var(--brand-ink)}
.hora-item{padding:7px 10px;border-bottom:1px solid var(--line-soft);font-size:12.5px;text-decoration:none;color:inherit;display:block}
.hora-item:last-child{border-bottom:none}
.hora-item:hover{background:var(--surface-2)}
.hora-item .h{font-family:var(--mono);font-weight:600;color:var(--brand-ink)}
.hora-item .q{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hora-item.cancelado{opacity:.5;text-decoration:line-through}
.hora-item.no_show .h{color:var(--bad)}

/* --------------------------------------------------------- conhecimento */
.editor{width:100%;min-height:420px;border:1px solid var(--line);border-radius:8px;padding:13px;background:var(--ground);font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical}
.editor:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.versao{display:flex;gap:10px;align-items:center;padding:9px 13px;border-bottom:1px solid var(--line-soft);font-size:13px}
.versao:last-child{border-bottom:none}
.versao .v{font-family:var(--mono);font-weight:600;min-width:34px}
.versao .quando{color:var(--ink-3);font-size:12.5px}
.versao .direita{margin-left:auto;display:flex;gap:6px;align-items:center}

/* ---------------------------------------------------------- formularios */
.campo{display:block;margin-bottom:13px}
.campo > span,.campo-rotulo{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.campo input,.campo select,.campo textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--ground);
}
.campo textarea{resize:vertical;min-height:80px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.campo .dica{font-size:12px;color:var(--ink-3);font-weight:400;margin-top:4px;display:block}
.linha-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.linha-campos.duas-colunas{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.campo.linha{display:flex;align-items:center;gap:10px}
.campo.linha input[type=checkbox]{width:auto}
.campo.linha > span{margin:0}

.caixa-entrada{width:100%;max-width:370px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:var(--shadow)}
.caixa-entrada .sub{text-align:center;color:var(--ink-2);font-size:13px;margin:0 0 20px}
.rodape-caixa{text-align:center;font-size:12px;color:var(--ink-3);margin:16px 0 0}

.erro{background:var(--bad-wash);color:var(--bad);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:14px}
.aviso-bom{background:var(--good-wash);color:var(--good);border-radius:8px;padding:11px 13px;font-size:13px;margin-bottom:14px}
.aviso-atencao{background:var(--warn-wash);color:var(--warn);border-radius:8px;padding:11px 13px;font-size:13px;margin-bottom:14px}
.link-convite{
  display:block;font-family:var(--mono);font-size:12.5px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-top:8px;
  word-break:break-all;color:var(--ink);
}
.legenda{font-size:12.5px;color:var(--ink-3);margin-top:10px}
.legenda-caixa{background:var(--surface-2);border-radius:8px;padding:11px 13px;font-size:12.5px;color:var(--ink-2)}

.variante{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;background:var(--ground);font-size:13px}
.variante .cabeca-variante{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600;margin-bottom:4px}

@media (max-width:980px){
  .duas{grid-template-columns:1fr}
  .semana{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .conversas{grid-template-columns:1fr;height:auto}
  .coluna-lista{border-right:none;border-bottom:1px solid var(--line);max-height:260px}
}