/* Painel web do Vyza.IA. Mesma linguagem visual do aplicativo desktop. */
:root {
  color-scheme: dark;
  --bg: #0c0d10; --card: #14151a; --lateral: #101115; --input: #101115;
  --linha: #272930; --linha-input: #30323c; --hover: #1d1e26; --ativo: #262139;
  --texto: #f0f0f5; --corpo: #d7d8e0; --fraco: #9698a6;
  --destaque: #ab9cff; --botao: #c8bdff; --botao-texto: #231b3d;
  --verde: #77d5b0; --ambar: #e9a441; --erro: #f8a0ab;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f7f8fb; --card: #fff; --lateral: #fcfcfe; --input: #fff;
    --linha: #e3e5ed; --linha-input: #d9dce7; --hover: #f0f1f6; --ativo: #efebfb;
    --texto: #20212b; --corpo: #383a49; --fraco: #646877;
    --destaque: #6e51ce; --botao: #7155cb; --botao-texto: #fff;
    --verde: #247653; --ambar: #b26a00; --erro: #b52943;
  }
}
* { box-sizing: border-box; }
/* Sem isto, as regras de display abaixo anulam o atributo hidden e a tela de
   entrada fica desenhada por cima do painel. */
[hidden] { display: none !important; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; background: var(--bg); color: var(--texto); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; }
button, input, textarea, select { font: inherit; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }

/* Entrada */
.entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--destaque) 16%, var(--bg)) 0%, var(--bg) 62%); }
.cartao-entrada { width: 100%; max-width: 380px; padding: 34px 30px; border: 1px solid var(--linha); border-radius: 20px; background: var(--card); }
.cartao-entrada h1 { font-size: 30px; letter-spacing: -1.2px; }
.cartao-entrada h1 span, .marca span { color: var(--fraco); font-weight: 400; }
.cartao-entrada .apoio { margin: 6px 0 26px; }
.apoio { color: var(--fraco); font-size: 12px; line-height: 1.6; margin: 6px 0 0; }
label { display: block; margin: 16px 0 6px; font-size: 11px; color: var(--corpo); }
input, textarea, select { width: 100%; padding: 11px 12px; border: 1px solid var(--linha-input); border-radius: 9px; background: var(--input); color: var(--texto); }
textarea { resize: vertical; line-height: 1.5; }
.lembrar { display: flex; gap: 8px; align-items: center; margin: 18px 0 22px; font-size: 12px; color: var(--corpo); }
.lembrar input { width: auto; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
#botao-entrar, .botao { min-height: 40px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 9px; background: var(--card); color: var(--texto); }
#botao-entrar, .botao.primario { border-color: transparent; background: var(--botao); color: var(--botao-texto); font-weight: 600; }
#botao-entrar { width: 100%; }
.botao:hover:not(:disabled) { filter: brightness(1.08); }
.botao.largo { width: 100%; margin-top: 18px; }
.aviso { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--erro) 14%, transparent); color: var(--erro); font-size: 12px; }

/* Estrutura do painel */
.app { display: flex; min-height: 100dvh; }
.lateral { width: 216px; flex: none; display: flex; flex-direction: column; padding: 26px 14px 18px; background: var(--lateral); border-right: 1px solid var(--linha); }
.marca { display: block; padding: 0 9px 26px; color: var(--texto); text-decoration: none; }
.marca strong { font-size: 22px; letter-spacing: -1px; }
.marca small { display: block; margin-top: 6px; color: var(--fraco); font-size: 7px; letter-spacing: 1.4px; }
.lateral nav { display: flex; flex-direction: column; gap: 4px; }
.item { min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--fraco); text-align: left; }
.item:hover { background: var(--hover); color: var(--texto); }
.item[aria-current=true] { background: var(--ativo); color: var(--destaque); }
.rodape-lateral { margin-top: auto; }
.estado { display: flex; gap: 7px; align-items: center; margin: 0 3px 14px; color: var(--fraco); font-size: 10px; }
.ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--fraco); opacity: .6; }
.ponto.ligado { background: var(--verde); opacity: 1; }
.perfil { display: flex; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--linha); }
.perfil strong { display: block; font-size: 12px; }
.perfil small { display: block; margin-top: 2px; color: var(--fraco); font-size: 10px; }
.perfil button { margin-left: auto; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--fraco); }
.perfil button:hover { background: var(--hover); color: var(--texto); }
.avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ativo); color: var(--destaque); font-weight: 600; }
.conteudo { flex: 1; min-width: 0; padding: 30px 32px 36px; }
.recado { margin: 0 0 18px; padding: 13px 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--card); color: var(--corpo); font-size: 12px; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.linha-apoio { margin: 0 0 8px; color: var(--fraco); font-size: 9px; letter-spacing: 1.6px; }
.cabeca h2 { font-size: 30px; letter-spacing: -1.1px; font-weight: 600; }
.painel { padding: 20px; border: 1px solid var(--linha); border-radius: 18px; background: var(--card); min-width: 0; }
.painel.estreito { max-width: 460px; margin-bottom: 18px; }
.titulo-painel { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.titulo-painel h3, .cabeca-chat h3 { font-size: 14px; font-weight: 550; }
.contador { padding: 2px 7px; border-radius: 5px; background: var(--hover); color: var(--fraco); font-size: 10px; }
.nota { margin: 12px 0 0; color: var(--fraco); font-size: 11px; line-height: 1.6; }
.rolagem { overflow: auto; }

/* Caixa de entrada */
.caixa-entrada { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr) minmax(250px, 310px); gap: 16px; align-items: start; }
.lista .rolagem { max-height: 62dvh; display: flex; flex-direction: column; gap: 3px; margin: 0 -8px; }
.conversa { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 9px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--texto); text-align: left; }
.conversa:hover { background: var(--hover); }
.conversa[aria-current=true] { background: var(--ativo); }
.conversa strong { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa p { margin: 3px 0 0; color: var(--fraco); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa .quando { color: var(--fraco); font-size: 10px; text-align: right; }
.marca-pausada { display: block; margin-top: 4px; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--ambar) 18%, transparent); color: var(--ambar); font-size: 9.5px; }
.chat { display: flex; flex-direction: column; }
.cabeca-chat { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--linha); }
.cabeca-chat > div { flex: 1; min-width: 0; }
.historico { flex: 1; min-height: 240px; max-height: 50dvh; display: flex; flex-direction: column; gap: 10px; padding: 16px 2px; }
.balao { max-width: 78%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: var(--hover); align-self: flex-start; }
.balao.de-zyva, .balao.de-dono { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--ativo); }
.balao.de-dono { background: color-mix(in srgb, var(--destaque) 22%, var(--card)); }
.balao p { margin: 0; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.balao .quem { margin-bottom: 4px; color: var(--fraco); font-size: 10px; }
.balao.de-zyva .quem, .balao.de-dono .quem { text-align: right; }
.redigir { display: flex; gap: 10px; align-items: flex-end; padding-top: 14px; border-top: 1px solid var(--linha); }
.redigir textarea { max-height: 150px; }
.redigir .botao { min-height: 44px; }
.vazio { margin: auto; padding: 24px; text-align: center; color: var(--fraco); font-size: 12px; line-height: 1.6; }

/* Planilha */
.tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabela th, .tabela td { padding: 11px 13px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--linha); }
.tabela th { position: sticky; top: 0; background: var(--card); color: var(--fraco); font-size: 9px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.tabela td { color: var(--corpo); }
.etiqueta { padding: 2px 8px; border-radius: 5px; background: var(--hover); color: var(--fraco); font-size: 10px; }
.etiqueta.positivo { background: color-mix(in srgb, var(--verde) 18%, transparent); color: var(--verde); }
.etiqueta.negativo { background: color-mix(in srgb, var(--erro) 18%, transparent); color: var(--erro); }
.etiqueta.nao_resolvido { background: color-mix(in srgb, var(--ambar) 18%, transparent); color: var(--ambar); }
.contas { margin-top: 20px; border-top: 1px solid var(--linha); }
.contas > div { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.contas small { display: block; color: var(--fraco); font-size: 10px; margin-top: 2px; }

@media (max-width: 1180px) {
  .caixa-entrada { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
  .contexto { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .app { flex-direction: column; }
  .lateral { width: auto; flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--linha); overflow-x: auto; }
  .marca { padding: 0 8px 0 4px; }
  .marca small { display: none; }
  .lateral nav { flex-direction: row; }
  .rodape-lateral { margin: 0 0 0 auto; display: flex; align-items: center; gap: 12px; }
  .estado { margin: 0; }
  .perfil { padding: 0; border: 0; }
  .perfil span:nth-child(2) { display: none; }
  .conteudo { padding: 20px 16px 28px; }
  .cabeca { flex-direction: column; align-items: flex-start; }
  .cabeca h2 { font-size: 25px; }
  .caixa-entrada { grid-template-columns: 1fr; }
  .lista .rolagem { max-height: 34dvh; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Cartão do aprendizado */
.aprendizado { margin-bottom: 16px; border-color: color-mix(in srgb, var(--destaque) 35%, var(--linha)); }
.aprendizado textarea { margin-top: 14px; }
.aprendizado .acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Balão de ajuda 24h */
.balao-ajuda { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: flex; gap: 9px; align-items: center; min-height: 52px; padding: 0 18px 0 12px; border: 1px solid var(--linha); border-radius: 26px; background: var(--card); color: var(--texto); box-shadow: 0 10px 30px #0006; }
.balao-ajuda img { width: 30px; height: 30px; object-fit: contain; }
.balao-ajuda:hover { border-color: var(--destaque); }
.janela-ajuda { position: fixed; right: 22px; bottom: 22px; z-index: 31; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 44px)); display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 18px; background: var(--card); box-shadow: 0 18px 50px #0007; overflow: hidden; }
.janela-ajuda header { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.janela-ajuda header img { width: 28px; height: 28px; object-fit: contain; }
.janela-ajuda header strong { display: block; font-size: 13px; }
.janela-ajuda header small { display: block; margin-top: 2px; color: var(--fraco); font-size: 10px; }
.janela-ajuda header button { margin-left: auto; padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--fraco); }
.janela-ajuda header button:hover { background: var(--hover); color: var(--texto); }
.conversa-ajuda { flex: 1; min-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.conversa-ajuda .balao { max-width: 88%; }
#form-ajuda { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px 14px; border-top: 1px solid var(--linha); }
#form-ajuda textarea { max-height: 120px; }
#form-ajuda .botao { min-height: 42px; white-space: nowrap; }
@media (max-width: 820px) {
  .balao-ajuda { right: 14px; bottom: 14px; min-height: 48px; padding: 0 15px 0 10px; }
  .balao-ajuda span { display: none; }
  .janela-ajuda { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* Relatórios */
#aba-relatorios label { display: block; margin-bottom: 6px; color: var(--fraco); font-size: 12px; }
.relatorio-texto { margin: 14px 0; padding: 14px; border: 1px solid var(--linha); border-radius: 9px; background: var(--input); color: var(--corpo); font: inherit; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.relatorio-texto:empty { display: none; }

/* Assinatura */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 14px 0; }
.plano { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--input); color: var(--corpo); text-align: left; cursor: pointer; }
.plano:hover:not(:disabled) { background: var(--hover); }
.plano[aria-pressed="true"] { border-color: var(--destaque); background: var(--ativo); }
.plano:disabled { opacity: .55; cursor: default; }
.plano strong { color: var(--texto); font-size: 15px; }
.plano-preco { color: var(--destaque); font-size: 20px; font-weight: 700; }
.plano small { color: var(--fraco); line-height: 1.5; }
#form-assinar { display: grid; gap: 8px; max-width: 360px; margin: 10px 0 14px; }
#form-assinar label { color: var(--fraco); font-size: 12px; }
a.botao { display: inline-block; text-decoration: none; text-align: center; }
.ciclos { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--linha); border-radius: 10px; margin-top: 10px; }
.ciclo { padding: 8px 14px; border: 0; border-radius: 7px; background: transparent; color: var(--fraco); cursor: pointer; }
.ciclo small { margin-left: 6px; color: var(--verde); font-size: 11px; }
.ciclo[aria-pressed="true"] { background: var(--ativo); color: var(--texto); }

/* Respostas prontas e Treino */
#aba-respostas label, #aba-treino label { display: block; margin: 12px 0 6px; color: var(--fraco); font-size: 12px; }
.form-treino { display: grid; gap: 4px; max-width: 640px; margin-top: 14px; }
.form-treino button[type="submit"], #form-resposta .acoes { margin-top: 12px; }
#form-resposta { max-width: 640px; }
.lista-cartoes { display: grid; gap: 10px; margin-top: 18px; }
.cartao-item { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--input); }
.cartao-item p { margin: 0; white-space: pre-wrap; }
.topo-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.erro-texto { color: var(--erro); font-size: 13px; }
.cartao-item summary { cursor: pointer; color: var(--destaque); font-size: 13px; }
#resposta-rapida { max-width: 100%; margin-bottom: 6px; }

/* ===== Atendimento no estilo do WhatsApp ===== */
:root {
  --wa-fundo: #0b141a; --wa-painel: #111b21; --wa-barra: #202c33; --wa-hover: #1a2730; --wa-ativo: #2a3942;
  --wa-entra: #202c33; --wa-sai: #005c4b; --wa-texto: #e9edef; --wa-fraco: #8696a0; --wa-verde: #00a884;
  --wa-linha: #222d34; --wa-campo: #2a3942; --wa-ia: #53bdeb;
}
@media (prefers-color-scheme: light) {
  :root {
    --wa-fundo: #efeae2; --wa-painel: #ffffff; --wa-barra: #f0f2f5; --wa-hover: #f5f6f6; --wa-ativo: #e9edef;
    --wa-entra: #ffffff; --wa-sai: #d9fdd3; --wa-texto: #111b21; --wa-fraco: #667781; --wa-verde: #00a884;
    --wa-linha: #e9edef; --wa-campo: #ffffff; --wa-ia: #027eb5;
  }
}
.caixa-entrada { position: relative; display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 0; align-items: stretch; height: calc(100dvh - 190px); min-height: 520px; border: 1px solid var(--wa-linha); border-radius: 14px; overflow: hidden; background: var(--wa-painel); }
.caixa-entrada > .painel { padding: 0; border: 0; border-radius: 0; background: transparent; min-height: 0; }
.caixa-entrada .lista { display: flex; flex-direction: column; border-right: 1px solid var(--wa-linha); background: var(--wa-painel); }
.barra-lista { display: flex; align-items: center; gap: 10px; height: 59px; padding: 0 14px 0 16px; background: var(--wa-barra); }
.barra-lista h3 { flex: 1; font-size: 16px; font-weight: 600; color: var(--wa-texto); }
.barra-lista .contador { color: var(--wa-fraco); font-size: 11px; }
.botao-icone { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--wa-fraco); font-size: 22px; line-height: 1; cursor: pointer; }
.botao-icone:hover { background: var(--wa-ativo); color: var(--wa-texto); }
.busca { padding: 8px 12px; background: var(--wa-painel); border-bottom: 1px solid var(--wa-linha); }
.busca input { width: 100%; height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--wa-barra); color: var(--wa-texto); font-size: 13px; }
.busca input::placeholder { color: var(--wa-fraco); }
.caixa-entrada .lista .rolagem { flex: 1; max-height: none; margin: 0; gap: 0; }
.conversa { grid-template-columns: 49px minmax(0, 1fr) auto; gap: 14px; padding: 0 16px; min-height: 72px; border-radius: 0; border-bottom: 1px solid var(--wa-linha); color: var(--wa-texto); }
.conversa:hover { background: var(--wa-hover); }
.conversa[aria-current=true] { background: var(--wa-ativo); }
.conversa .avatar { width: 49px; height: 49px; font-size: 18px; background: #6a7175; color: #fff; }
.conversa strong { font-size: 16px; font-weight: 400; }
.conversa p { margin-top: 2px; color: var(--wa-fraco); font-size: 13.5px; }
.conversa .quando { align-self: start; margin-top: 14px; color: var(--wa-fraco); font-size: 12px; }
.marca-pausada { background: transparent; color: var(--wa-verde); padding: 0; font-size: 11px; }
.caixa-entrada .chat { display: flex; flex-direction: column; min-width: 0; background: var(--wa-fundo); background-image: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--wa-texto) 4%, transparent) 1.2px, transparent 1.6px), radial-gradient(circle at 70% 65%, color-mix(in srgb, var(--wa-texto) 4%, transparent) 1.2px, transparent 1.6px); background-size: 46px 46px, 62px 62px; }
.cabeca-chat { height: 59px; padding: 0 16px; gap: 14px; border: 0; background: var(--wa-barra); }
.cabeca-chat .avatar { width: 40px; height: 40px; background: #6a7175; color: #fff; }
.cabeca-chat h3 { font-size: 16px; font-weight: 400; color: var(--wa-texto); }
.cabeca-chat .apoio { margin: 1px 0 0; color: var(--wa-fraco); font-size: 12.5px; }
.cabeca-chat .botao { border-radius: 18px; padding: 6px 14px; background: var(--wa-ativo); border-color: transparent; color: var(--wa-texto); }
.caixa-entrada .historico { flex: 1; max-height: none; min-height: 0; gap: 3px; padding: 18px 7% 12px; overflow-y: auto; }
.balao { position: relative; max-width: min(75%, 560px); padding: 6px 8px 6px 9px; border-radius: 8px; background: var(--wa-entra); color: var(--wa-texto); box-shadow: 0 1px .5px #0000002e; }
.balao.de-zyva, .balao.de-dono { align-self: flex-end; border-radius: 8px; background: var(--wa-sai); }
.balao.de-dono { background: var(--wa-sai); }
.balao .quem { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--wa-ia); text-align: left; }
.balao.de-dono .quem { color: var(--wa-verde); }
.balao p.texto { font-size: 14.2px; line-height: 1.4; color: var(--wa-texto); }
.balao .hora-balao { display: block; margin-top: 2px; text-align: right; color: color-mix(in srgb, var(--wa-texto) 60%, transparent); font-size: 11px; }
.balao .quem[hidden] { display: none; }
.vazio { margin: auto; padding: 8px 14px; border-radius: 8px; background: var(--wa-barra); color: var(--wa-fraco); font-size: 12.5px; }
.redigir { align-items: center; gap: 10px; padding: 10px 16px; border: 0; background: var(--wa-barra); }
.redigir select { max-width: 150px; height: 42px; padding: 0 10px; border: 0; border-radius: 21px; background: var(--wa-campo); color: var(--wa-texto); font-size: 12.5px; }
.redigir textarea { flex: 1; min-height: 42px; max-height: 120px; padding: 11px 16px; border: 0; border-radius: 21px; background: var(--wa-campo); color: var(--wa-texto); font-size: 14.5px; resize: none; }
.redigir .botao-enviar { width: 42px; height: 42px; min-height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--wa-verde); color: #fff; font-size: 18px; }
.redigir .botao-enviar:disabled { opacity: .45; }
.caixa-entrada .chat > .nota { margin: 0; padding: 4px 16px 8px; background: var(--wa-barra); color: var(--wa-fraco); font-size: 11px; }
/* Contexto da IA: gaveta à direita, aberta pelo botão ⓘ. */
.caixa-entrada .contexto { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 100%); padding: 16px; overflow: auto; border-left: 1px solid var(--wa-linha); background: var(--wa-painel); box-shadow: -8px 0 24px #0004; z-index: 5; }
.caixa-entrada.com-contexto .contexto { display: block; }
@media (max-width: 900px) {
  .caixa-entrada { grid-template-columns: 1fr; height: auto; }
  .caixa-entrada .lista { max-height: 38dvh; border-right: 0; border-bottom: 1px solid var(--wa-linha); }
  .caixa-entrada .chat { min-height: 60dvh; }
  .caixa-entrada .historico { padding: 14px 10px; }
}
/* Perfil do WhatsApp */
.perfil-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.perfil-foto { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.perfil-foto img, .avatar-grande { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; background: #6a7175; }
.avatar-grande { display: grid; place-items: center; color: #fff; font-size: 56px; }
.perfil-campos { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.perfil-campos label { margin-top: 10px; }
.perfil-campos label.marcar { display: flex; gap: 8px; align-items: center; margin-top: 6px; color: var(--fraco); font-size: 12px; }
.perfil-campos label.marcar input { width: auto; }
@media (max-width: 760px) { .perfil-grid { grid-template-columns: 1fr; } }
.redigir select { flex: none; width: 150px; }
.redigir textarea { flex: 1 1 auto; width: auto; min-width: 0; }
.redigir textarea { height: 42px; }

#area-contexto { margin-top: 18px; }
#area-contexto form { display: flex; flex-direction: column; gap: 6px; }
#area-contexto label { margin-top: 8px; }