/* Visual do sistema. As cores ficam todas aqui em cima: trocar uma muda o sistema inteiro. */
:root {
  --fundo: #f7f8fa;
  --cartao: #ffffff;
  --superficie: #f6f7f9;      /* fundo de blocos dentro de cartões */
  --texto: #0f172a;
  --texto-suave: #64748b;
  --texto-apagado: #94a3b8;
  --borda: #e8ebf0;
  --borda-forte: #d5dae2;
  --escuro: #0f172a;          /* avisos no canto da tela */
  --menu: #ffffff;
  --menu-texto: #475569;
  --menu-ativo: #eef2ff;
  --destaque: #4f46e5;
  --destaque-escuro: #4338ca;
  --destaque-claro: #eef2ff;
  --destaque-anel: #e0e7ff;
  --verde: #047857;
  --verde-claro: #ecfdf5;
  --vermelho: #dc2626;
  --vermelho-claro: #fef2f2;
  --rosa: #db2777;
  --rosa-claro: #fdf2f8;
  --azul: #2563eb;
  --azul-claro: #eff6ff;
  --amarelo: #b45309;
  --amarelo-claro: #fffbeb;
  --cinza-claro: #f1f3f6;
  --campo: #ffffff;           /* fundo dos campos de digitar */
  --borda-hover: #c4cad4;
  --destaque-hover: #4338ca;  /* botão principal com o mouse em cima */
  --texto-invertido: #ffffff; /* texto sobre fundo da cor do texto */
  --verde-texto: #065f46;     /* texto sobre fundo verde-claro */
  --alternar-ativo: #ffffff;
  --forca-sessao: 13%;        /* quanto da cor do profissional pinta a sessão na agenda */
  --serie-1: #4f46e5;         /* gráficos (validadas para daltonismo) */
  --serie-2: #eb6834;
  --grafico-grade: #eef0f3;
  --grafico-base: #cbd5e1;
  --grafico-destaque: #f5f6fa;
  --grafico-eixo: #64748b;
  --grafico-eixo-x: #475569;
  --sobe: #006300;
  --desce: #c03535;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04);
  --largura-menu: 232px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}

/* Tema escuro (Configurações → Aparência). Só troca as cores; o resto do visual é o mesmo. */
:root[data-tema="escuro"] {
  --fundo: #0c0f15;
  --cartao: #141821;
  --superficie: #1a1f29;
  --texto: #e7eaf0;
  --texto-suave: #9ba5b7;
  --texto-apagado: #6b7588;
  --borda: #242a35;
  --borda-forte: #333b49;
  --escuro: #262d3b;
  --menu: #10141b;
  --menu-texto: #aeb6c4;
  --menu-ativo: #1f2142;
  --destaque: #6366f1;
  --destaque-escuro: #a5b4fc;
  --destaque-claro: #1f2142;
  --destaque-anel: #3730a3;
  --verde: #34d399;
  --verde-claro: #0f2a22;
  --vermelho: #ef4444;
  --vermelho-claro: #2c1618;
  --rosa: #f472b6;
  --rosa-claro: #2d1625;
  --azul: #60a5fa;
  --azul-claro: #122238;
  --amarelo: #fbbf24;
  --amarelo-claro: #2a2112;
  --cinza-claro: #1e2430;
  --campo: #10141c;
  --borda-hover: #454e5f;
  --destaque-hover: #4f46e5;
  --texto-invertido: #0f172a;
  --verde-texto: #6ee7b7;
  --alternar-ativo: #2d3546;
  --forca-sessao: 24%;
  --serie-1: #6b6ff0;
  --serie-2: #d9703c;
  --grafico-grade: #232a36;
  --grafico-base: #3a4352;
  --grafico-destaque: #1c2230;
  --grafico-eixo: #8b95a8;
  --grafico-eixo-x: #aeb6c4;
  --sobe: #4ade80;
  --desce: #f87171;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* "hidden" sempre esconde, mesmo em elementos com display próprio */
body { margin: 0; min-height: 100vh; background: var(--fundo); font-size: 15px; line-height: 1.45; }
h1, h2 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
a { color: inherit; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: var(--cinza-claro); padding: 1px 6px; border-radius: 6px; }
.icone { width: 18px; height: 18px; flex-shrink: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sub { color: var(--texto-suave); margin: 4px 0 0; font-size: 14px; }

/* ---------- Menu lateral ---------- */
.menu {
  position: fixed; inset: 0 auto 0 0; width: var(--largura-menu); z-index: 20;
  background: var(--menu); color: var(--menu-texto); border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; overflow-y: auto;
}
.menu-topo { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.menu-topo strong { display: block; color: var(--texto); font-size: 14.5px; font-weight: 600; }
.menu-topo small { display: block; font-size: 12px; color: var(--texto-suave); }
.logo img { width: 34px; height: 34px; display: block; border-radius: 9px; }
#menu-links { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 1px; }
#menu-links a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  text-decoration: none; font-weight: 500; font-size: 14px; transition: background .15s, color .15s;
}
#menu-links a .icone { width: 17px; height: 17px; color: var(--texto-apagado); transition: color .15s; }
#menu-links a:hover { background: var(--cinza-claro); color: var(--texto); }
#menu-links a:hover .icone { color: var(--texto-suave); }
#menu-links a.ativo { background: var(--menu-ativo); color: var(--destaque-escuro); }
#menu-links a.ativo .icone { color: var(--destaque); }
.selo-caixa { margin-left: auto; padding: 1px 7px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 600; }
.selo-caixa.aberto { background: var(--verde-claro); color: var(--verde); }
.selo-caixa.fechado { background: var(--cinza-claro); color: var(--texto-suave); }
.menu-rodape { margin: auto 0 0; padding: 14px 20px; font-size: 12px; color: var(--texto-suave); border-top: 1px solid var(--borda); }
.menu-fundo { display: none; }

/* ---------- Barra do topo ---------- */
.principal { margin-left: var(--largura-menu); min-width: 0; }
.barra {
  position: sticky; top: 0; z-index: 10; height: 56px; padding: 0 28px;
  display: flex; align-items: center; gap: 12px;
  background: var(--cartao); border-bottom: 1px solid var(--borda);
}
#abrir-menu { display: none; }
.barra-titulo { font-size: 14.5px; font-weight: 600; }
.barra-usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--texto-suave); }
.barra-usuario .avatar { width: 30px; height: 30px; font-size: 11.5px; }
main { padding: 28px; max-width: 1280px; margin: 0 auto; }
.carregando { color: var(--texto-suave); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--borda-forte); background: var(--cartao);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--texto); text-decoration: none; cursor: pointer;
  white-space: nowrap; box-shadow: var(--sombra); transition: background .15s, border-color .15s, transform .05s;
}
.botao .icone { width: 16px; height: 16px; }
.botao:hover { border-color: var(--borda-hover); background: var(--superficie); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .6; cursor: wait; }
.botao-principal { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.botao-principal:hover { background: var(--destaque-hover); border-color: var(--destaque-hover); }
.botao-perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.botao-perigo:hover { background: #b91c1c; border-color: #b91c1c; }
.botao-icone {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--texto-suave); cursor: pointer; text-decoration: none;
}
.botao-icone:hover { background: var(--cinza-claro); color: var(--texto); }
.botao-icone.perigo:hover { background: var(--vermelho-claro); color: var(--vermelho); }
.botao-icone.whats { color: var(--verde); background: var(--verde-claro); }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* ---------- Peças comuns ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; }
.cartao h2 { font-size: 15.5px; font-weight: 600; }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.selo { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; background: var(--destaque-claro); color: var(--destaque-escuro); white-space: nowrap; }
.selo-verde { background: var(--verde-claro); color: var(--verde); }
.selo-cinza { background: var(--cinza-claro); color: var(--texto-suave); }
.avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: var(--destaque-claro); color: var(--destaque-escuro); font-size: 12.5px; font-weight: 600;
}
.pagina-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.pagina-topo h1 { font-size: 22px; font-weight: 600; }
.erro-pagina { display: flex; align-items: center; gap: 12px; color: var(--vermelho); }

/* ---------- Início ---------- */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.hero h1 { font-size: 24px; font-weight: 600; }
.hero-data { margin: 0 0 4px; font-size: 13px; color: var(--texto-suave); }
.hero-lado { display: flex; align-items: center; gap: 10px; }
.hero-relogio {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
  background: var(--cartao); border: 1px solid var(--borda); color: var(--texto-suave);
  font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.hero-relogio .icone { width: 15px; height: 15px; }
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.atalho {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px;
  background: var(--cartao); border: 1px solid var(--borda);
  color: var(--menu-texto); text-decoration: none; font-size: 13px; font-weight: 500; transition: border-color .15s, color .15s;
}
.atalho .icone { width: 15px; height: 15px; color: var(--texto-apagado); }
.atalho:hover { border-color: var(--destaque-anel); color: var(--destaque-escuro); }
.atalho:hover .icone { color: var(--destaque); }

.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.numero {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  color: var(--texto-suave); font-size: 13px; transition: border-color .15s;
}
a.numero:hover { border-color: var(--destaque-anel); }
.numero strong { display: block; margin-bottom: 1px; font-size: 22px; font-weight: 600; color: var(--texto); line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.numero-icone { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; background: var(--destaque-claro); color: var(--destaque); }
.numero-icone .icone { width: 18px; height: 18px; }
.numero-icone.verde { background: var(--verde-claro); color: var(--verde); }
.numero-icone.rosa { background: var(--rosa-claro); color: var(--rosa); }
.numero-icone.azul { background: var(--azul-claro); color: var(--azul); }
.numero-icone.amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.numero-icone.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.negativo { color: var(--vermelho) !important; }
.numeros-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grade-inicio { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.coluna-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.hoje-estudio .cartao-topo { align-items: center; margin-bottom: 12px; }
.hoje-estudio .vazio-pequeno { margin-bottom: 12px; }
.link-discreto { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 600; color: var(--destaque-escuro); text-decoration: none; white-space: nowrap; }
.link-discreto .icone { width: 15px; height: 15px; }
.progresso { height: 6px; border-radius: 99px; background: var(--cinza-claro); margin: 18px 0 8px; overflow: hidden; }
.progresso span { display: block; height: 100%; background: var(--destaque); border-radius: 99px; transition: width .4s; }
.lista-passos { list-style: none; margin: 0; padding: 0; }
.passo { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--borda); }
.passo:last-child { border-bottom: 0; }
.passo-numero {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--cinza-claro); color: var(--texto-suave); font-size: 13px; font-weight: 600;
}
.passo-textos { flex: 1; min-width: 0; }
.passo-textos strong { display: block; font-size: 14.5px; }
.passo-textos small { color: var(--texto-suave); font-size: 13px; }
.passo-acao { flex-shrink: 0; }
.passo.feito .passo-numero { background: var(--verde-claro); color: var(--verde); }
.passo.feito .passo-textos strong { color: var(--texto-suave); text-decoration: line-through; }
.passo.proximo .passo-numero { background: var(--destaque); color: #fff; }
.passo.bloqueado { opacity: .62; }

.aniversarios h2 { margin-bottom: 12px; }
.lista-aniversarios { list-style: none; margin: 0; padding: 0; }
.lista-aniversarios li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.lista-aniversarios li:last-child { border-bottom: 0; }
.lista-aniversarios .dia {
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
  background: var(--rosa-claro); color: var(--rosa); font-weight: 600; font-variant-numeric: tabular-nums;
}
.lista-aniversarios li.hoje .dia { background: var(--rosa); color: #fff; }
.aniversariante { flex: 1; min-width: 0; }
.aniversariante strong { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aniversariante small { color: var(--texto-suave); font-size: 13px; }
.vazio-pequeno { color: var(--texto-suave); font-size: 14px; margin: 0; }

/* ---------- Clientes ---------- */
.busca {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; margin-bottom: 14px;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto-suave);
}
.busca:focus-within { border-color: var(--destaque); background: var(--campo); }
.busca input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; padding: 11px 0; color: var(--texto); }
.tabela-rolagem { position: relative; overflow-x: auto; } /* "relative" prende textos invisíveis dentro da rolagem */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); padding: 8px 12px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr { cursor: pointer; transition: background .1s; }
.tabela tbody tr:hover { background: var(--superficie); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela small { color: var(--texto-suave); }
.tabela a { text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.pessoa { display: flex; align-items: center; gap: 12px; }
.pessoa strong { display: block; }
.pessoa small { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-whats { display: inline-flex; align-items: center; gap: 6px; color: var(--verde); font-weight: 500; white-space: nowrap; }
.link-whats .icone { width: 16px; height: 16px; }
.traco { color: var(--borda-forte); }
.sem-quebra { white-space: nowrap; }
.acoes { text-align: right; white-space: nowrap; }
.vazio { text-align: center; padding: 36px 16px; color: var(--texto-suave); }
.vazio strong { display: block; color: var(--texto); font-size: 16px; margin-top: 10px; }
.vazio p { margin: 4px 0 18px; }
.vazio-icone { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--destaque-claro); color: var(--destaque-escuro); }
.vazio-icone .icone { width: 26px; height: 26px; }

/* ---------- Formulários e janelas ---------- */
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario .largo { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; }
.campo input, .campo textarea, .campo select, .com-prefixo {
  font: inherit; font-weight: 400; font-size: 15px; color: var(--texto);
  padding: 9px 12px; border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--campo); width: 100%;
}
.campo textarea { resize: vertical; min-height: 80px; }
.campo input:focus, .campo textarea:focus, .campo select:focus, .com-prefixo:focus-within { outline: 0; border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-anel); }
.com-prefixo { display: flex; align-items: center; gap: 2px; padding: 0 0 0 12px; }
.com-prefixo span { color: var(--texto-suave); white-space: nowrap; }
.com-prefixo input { min-width: 0; width: 100%; border: 0; padding: 10px 12px 10px 0; background: transparent; outline: 0; font: inherit; color: inherit; box-shadow: none !important; }
.erro-form { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--vermelho-claro); color: var(--vermelho); font-size: 14px; font-weight: 500; }
.ok-form { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--verde-claro); color: var(--verde-texto); font-size: 14px; font-weight: 500; line-height: 1.45; }
.form-acoes { grid-column: 1 / -1; }
.cartao .formulario { max-width: 720px; }

.modal {
  width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  border: 0; border-radius: 14px; box-shadow: 0 20px 50px rgba(15, 23, 42, .18); color: var(--texto); background: var(--cartao);
}
.modal::backdrop { background: rgba(15, 23, 42, .4); }
.modal[open] { animation: modal-entra .16s ease-out; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0 24px; }
.modal-topo h2 { font-size: 19px; }
.modal-corpo { padding: 18px 24px 24px; }
.modal-texto { margin: 0 0 20px; }
.modal-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.lista-termos { margin: -8px 0 20px; padding-left: 20px; display: grid; gap: 8px; }
.cadastro-em { margin-right: auto; color: var(--texto-suave); }

.info-dados { display: flex; gap: 16px; margin-top: 20px; }
.info-dados p { margin: 6px 0; }
.info-dados .caminho { display: block; padding: 8px 10px; margin: 6px 0 10px; word-break: break-all; }

/* Configurações → Aparência: dois cartõezinhos com o desenho de cada tema */
.aparencia { margin-bottom: 20px; }
.temas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.tema-opcao {
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 210px; padding: 8px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--cartao); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.tema-opcao:hover { border-color: var(--borda-hover); }
.tema-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.tema-opcao:has(input:checked) { border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-anel); }
.tema-opcao:has(input:focus-visible) { outline: 2px solid var(--destaque); outline-offset: 2px; }
.tema-nome { display: flex; align-items: baseline; gap: 6px; padding: 0 4px 2px; font-size: 14px; }
.tema-nome small { color: var(--texto-suave); font-size: 12px; }
.tema-marca { display: none; margin-left: auto; align-self: center; color: var(--destaque); }
.tema-marca .icone { width: 16px; height: 16px; }
.tema-opcao:has(input:checked) .tema-marca { display: inline-flex; }
/* O desenho usa as cores fixas de cada tema (não as da tela atual) */
.tema-previa {
  display: grid; grid-template-columns: 32% 1fr; height: 104px; overflow: hidden;
  border: 1px solid var(--p-borda); border-radius: 8px; background: var(--p-fundo);
}
.tema-previa.claro { --p-fundo: #f7f8fa; --p-menu: #ffffff; --p-borda: #e8ebf0; --p-cartao: #ffffff; --p-linha: #e2e6ec; --p-titulo: #cbd5e1; --p-destaque: #4f46e5; --p-tinta: #e0e7ff; }
.tema-previa.escuro { --p-fundo: #0c0f15; --p-menu: #10141b; --p-borda: #242a35; --p-cartao: #141821; --p-linha: #2a313d; --p-titulo: #3a4352; --p-destaque: #6366f1; --p-tinta: #2a2d5c; }
.tema-previa i { display: block; border-radius: 3px; }
.tp-menu { display: flex; flex-direction: column; gap: 6px; padding: 10px 7px; background: var(--p-menu); border-right: 1px solid var(--p-borda); }
.tp-menu i { height: 6px; background: var(--p-linha); }
.tp-menu i.ativo { background: var(--p-tinta); }
.tp-corpo { display: flex; flex-direction: column; gap: 7px; padding: 10px; }
.tp-titulo { width: 55%; height: 7px; background: var(--p-titulo); }
.tp-cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tp-cartoes i { height: 30px; border: 1px solid var(--p-borda); border-radius: 5px; background: var(--p-cartao); }
.tp-botao { width: 42%; height: 9px; background: var(--p-destaque); }


/* ---------- Partes de formulário usadas na Etapa 2 ---------- */
.espaco { flex: 1; }
.ajuda { font-weight: 400; font-size: 12.5px; color: var(--texto-suave); }
.com-prefixo.sufixo { padding: 0 12px 0 0; }
.com-prefixo.sufixo input { padding: 10px 0 10px 12px; }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.campo legend { padding: 0; margin-bottom: 6px; }
.lista-cores { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 4px; }
.cor { position: relative; cursor: pointer; }
.cor input { position: absolute; opacity: 0; }
.cor span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--cor); }
.cor input:checked + span { box-shadow: 0 0 0 2px var(--cartao), 0 0 0 4px var(--cor); }
.cor input:focus-visible + span { outline: 2px solid var(--texto); outline-offset: 5px; }
.caixa-marcar { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 8px; background: var(--superficie); font-size: 14px; cursor: pointer; }
.caixa-marcar input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--destaque); }
.botao-whats { color: var(--verde); border-color: #bfe3d0; background: var(--verde-claro); }
.botao-whats:hover { background: #d3eee1; border-color: #a6d8bf; }
.botao-whats .icone { width: 16px; height: 16px; }
.resta { margin: -4px 0 0; font-size: 14px; font-weight: 600; color: var(--verde); }
.resta:empty { display: none; }
.resta.ruim { color: var(--vermelho); }

/* Escolher cliente digitando */
.escolher-cliente { position: relative; }
.escolher-lista {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 290px; overflow-y: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16, 24, 32, .15);
}
.escolher-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 400; cursor: pointer; }
.escolher-lista li small { color: var(--texto-suave); font-size: 13px; white-space: nowrap; }
.escolher-lista li:hover, .escolher-lista li.marcada { background: var(--destaque-claro); }
.escolher-lista .opcao-novo { justify-content: flex-start; gap: 6px; color: var(--destaque-escuro); font-weight: 600; }
.escolher-lista .opcao-novo:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--borda); border-radius: 0 0 8px 8px; }

/* ---------- Situação das sessões ---------- */
.selo.status-agendado { background: var(--cinza-claro); color: var(--menu-texto); }
.selo.status-confirmado { background: var(--verde-claro); color: var(--verde); }
.selo.status-concluido { background: var(--azul-claro); color: var(--azul); }
.selo.status-faltou { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.status-cancelado { background: var(--cinza-claro); color: var(--texto-apagado); text-decoration: line-through; }

/* ---------- Agenda ---------- */
.agenda-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.navegar { display: flex; align-items: center; gap: 6px; }
.campo-data, .campo-select { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--campo); color: var(--texto); }
#agenda-prof { margin-left: auto; }
.alternar { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--cinza-claro); }
.alternar button { padding: 5px 14px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--texto-suave); cursor: pointer; }
.alternar button.ativo { background: var(--alternar-ativo); color: var(--texto); box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.nota { margin: 14px 0 0; font-size: 13px; color: var(--texto-suave); }

.grade-rolagem { overflow-x: auto; }
.grade-dia { display: grid; grid-template-columns: 52px repeat(var(--colunas), minmax(170px, 1fr)); }
.grade-canto { border-bottom: 1px solid var(--borda); }
.grade-cabeca { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borda); border-left: 1px solid var(--borda); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.avatar.pequeno { width: 26px; height: 26px; font-size: 10.5px; color: #fff; }
.grade-horas, .grade-trilho { margin: 10px 0; }
.grade-horas { position: relative; }
.grade-horas span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.grade-trilho {
  position: relative; border-left: 1px solid var(--borda);
  background-image: repeating-linear-gradient(to bottom, var(--borda) 0 1px, transparent 1px 60px);
}
.vaga { position: absolute; left: 0; right: 0; height: 30px; display: flex; align-items: center; padding: 0 0 0 8px; border: 0; background: transparent; cursor: pointer; font: inherit; }
.vaga.meia { border-top: 1px dashed var(--cinza-claro); }
.vaga:hover { background: var(--destaque-claro); }
.vaga:hover::after { content: "+ " attr(data-hora); font-size: 12px; font-weight: 600; color: var(--destaque-escuro); }
.sessao {
  position: absolute; left: 4px; right: 4px; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 8px;
  border: 0; border-left: 4px solid var(--cor); border-radius: 8px;
  background: var(--superficie); background: color-mix(in srgb, var(--cor) var(--forca-sessao), var(--cartao));
  color: var(--texto); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .08);
}
.sessao:hover { box-shadow: 0 4px 12px rgba(16, 24, 32, .14); }
.sessao-hora { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.sessao-hora .icone { width: 13px; height: 13px; color: var(--verde); }
.sessao strong { font-size: 13.5px; line-height: 1.2; }
.sessao small { color: var(--texto-suave); font-size: 12px; line-height: 1.25; }
.sessao.status-concluido { opacity: .6; }
.sessao.status-faltou { opacity: .6; }
.sessao.status-faltou strong { text-decoration: line-through; }
.agora { position: absolute; left: 0; right: 0; z-index: 2; height: 2px; background: var(--vermelho); pointer-events: none; }
.agora::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--vermelho); }

.semana { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.semana-dia { padding: 10px 14px; border: 1px solid var(--borda); border-radius: 12px; }
.semana-dia.hoje { border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-anel); }
.semana-dia.passado { background: var(--superficie); }
.semana-dia header { display: flex; align-items: center; gap: 10px; }
.semana-titulo { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border: 0; background: none; font: inherit; color: var(--texto); cursor: pointer; }
.semana-titulo:hover strong { text-decoration: underline; }
.semana-titulo span { color: var(--texto-suave); font-size: 13px; }
.livre { margin: 0 0 4px; color: var(--texto-apagado); font-size: 13.5px; }
.lista-sessoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 4px 0; padding: 0; list-style: none; }
.sessao-linha {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 0; border-radius: 10px; background: var(--superficie);
  font: inherit; color: var(--texto); text-align: left; cursor: pointer; transition: background .15s;
}
/* Tracinho com a cor do profissional, entre o horário e o nome */
.sessao-linha::before { content: ""; align-self: stretch; width: 3px; flex-shrink: 0; border-radius: 2px; background: var(--cor); }
.sessao-linha:hover { background: var(--cinza-claro); }
.sessao-linha-hora { order: -1; display: flex; flex-direction: column; min-width: 44px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sessao-linha-hora small { font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.sessao-linha-info { flex: 1; min-width: 0; }
.sessao-linha-info strong { display: block; font-size: 14.5px; }
.sessao-linha-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-suave); font-size: 13px; }
.sessao-linha-fim { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sessao-linha-fim small { color: var(--texto-suave); font-size: 12px; white-space: nowrap; }
.sessao-linha.status-cancelado, .sessao-linha.status-faltou { opacity: .65; }
.sessao-linha.status-cancelado strong { text-decoration: line-through; }

/* Feriados (Agenda: dia, semana e mês) */
.selo.selo-feriado { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.selo-feriado.facultativo { background: var(--amarelo-claro); color: var(--amarelo); }
.legenda-feriados { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.legenda-cor.feriado { background: var(--vermelho); }
.legenda-cor.facultativo { background: var(--amarelo); }
.mes-lista-feriados { display: none; } /* só no celular, onde o nome não cabe no quadrinho */

/* Visão Mês: calendário com um quadrinho por dia */
.mes-cabeca, .mes-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mes-cabeca span { padding: 0 8px 8px; font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }
.mes-grade { border-top: 1px solid var(--borda); border-left: 1px solid var(--borda); }
.mes-dia {
  position: relative; min-width: 0; min-height: 116px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: var(--cartao);
}
.mes-dia.fora { background: var(--superficie); }
.mes-numero {
  align-self: flex-start; min-width: 26px; height: 26px; padding: 0 6px; border: 0; border-radius: 99px;
  background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--texto); cursor: pointer; font-variant-numeric: tabular-nums;
}
.mes-numero:hover { background: var(--cinza-claro); }
.mes-dia.fora .mes-numero { color: var(--texto-apagado); font-weight: 500; }
.mes-dia.com-feriado .mes-numero { color: var(--vermelho); }
.mes-dia.com-facultativo .mes-numero { color: var(--amarelo); }
.mes-dia.hoje .mes-numero { background: var(--destaque); color: #fff; }
.mes-novo { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; opacity: 0; transition: opacity .15s; }
.mes-novo .icone { width: 15px; height: 15px; }
.mes-dia:hover .mes-novo, .mes-novo:focus-visible { opacity: 1; }
.mes-feriado {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: 1px 6px; border-radius: 6px;
  background: var(--vermelho-claro); color: var(--vermelho); font-size: 11px; font-weight: 500; line-height: 1.3;
}
.mes-dia.com-facultativo .mes-feriado { background: var(--amarelo-claro); color: var(--amarelo); }
.mes-sessoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.mes-sessao {
  display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 6px;
  border: 0; border-radius: 6px; background: color-mix(in srgb, var(--cor) var(--forca-sessao), var(--cartao));
  font: inherit; font-size: 12px; color: var(--texto); text-align: left; cursor: pointer;
}
.mes-sessao:hover { background: color-mix(in srgb, var(--cor) 30%, var(--cartao)); }
.mes-sessao::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--cor); vertical-align: 1px; }
.mes-hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.mes-sessao.status-concluido, .mes-sessao.status-faltou { opacity: .55; }
.mes-sessao.status-faltou { text-decoration: line-through; }
.mes-mais { padding: 1px 6px; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--texto-suave); text-align: left; cursor: pointer; }
.mes-mais:hover { color: var(--destaque-escuro); }
.mes-qtd { display: none; }

/* ---------- Secretário ---------- */
.aviso-secretario {
  display: flex; align-items: center; gap: 12px; margin: -8px 0 18px; padding: 12px 14px; border-radius: 12px;
  background: var(--destaque-claro); color: var(--destaque-escuro); font-size: 14px;
}
.aviso-secretario > .icone { flex-shrink: 0; color: var(--destaque); }
.aviso-secretario.ok { background: var(--verde-claro); color: var(--verde-texto); }
.aviso-secretario.ok > .icone { color: var(--verde); }
.aviso-secretario.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.aviso-secretario.erro > .icone { color: var(--vermelho); }
.aviso-secretario > span { flex: 1; min-width: 0; }
.aviso-secretario .botao { flex-shrink: 0; }
.selo-caixa.atrasado { background: var(--vermelho-claro); color: var(--vermelho); }
.cartao-secretario { border-color: var(--destaque-anel); }
.abas { display: flex; gap: 2px; margin: -6px 0 16px; overflow-x: auto; overflow-y: hidden; box-shadow: inset 0 -1px 0 var(--borda); }
.aba {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px;
  border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--texto-suave); white-space: nowrap; cursor: pointer;
}
.aba:hover { color: var(--texto); }
.aba.ativo { color: var(--destaque-escuro); border-bottom-color: var(--destaque); }
.aba-qtd { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--cinza-claro); color: var(--texto-suave); font-size: 11.5px; font-weight: 600; text-align: center; }
.aba-qtd.esperando { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.selo-assunto.cobertura { background: var(--rosa-claro); color: var(--rosa); }
.selo.selo-assunto.tatuagem { background: var(--destaque-claro); color: var(--destaque-escuro); }
.selo.selo-assunto.avaliacao { background: var(--azul-claro); color: var(--azul); }
.selo.selo-assunto.outros { background: var(--cinza-claro); color: var(--menu-texto); }
.selo.situacao-lead.novo { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.situacao-lead.atendendo { background: var(--azul-claro); color: var(--azul); }
.selo.situacao-lead.agendado { background: var(--verde-claro); color: var(--verde); }
.selo.situacao-lead.perdido { background: var(--cinza-claro); color: var(--texto-suave); }
.selo.situacao-lead.conversando { background: var(--cinza-claro); color: var(--menu-texto); }
.tabela-leads td small { display: block; margin-top: 2px; }
.tabela-leads .lead-assunto { min-width: 240px; }
.tabela-leads .lead-assunto .selo { margin-bottom: 4px; }
.lead-previa { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; }
.prazo-lead { display: flex; flex-direction: column; white-space: nowrap; }
.prazo-lead strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabela .prazo-lead small { color: var(--amarelo); font-weight: 500; }
.tabela .prazo-lead.atrasado strong, .tabela .prazo-lead.atrasado small { color: var(--vermelho); }
.tabela-leads tr.atrasado td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }

/* Ficha do cliente que chegou pelo WhatsApp */
.lead-ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lead-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--texto-suave); }
.lead-prazo { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--amarelo-claro); color: var(--amarelo); font-size: 14px; }
.lead-prazo.atrasado { background: var(--vermelho-claro); color: var(--vermelho); }
.lead-prazo .icone { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
.lead-resumo { margin: 0; font-size: 16px; font-weight: 500; }
.lead-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.lead-campos div { padding: 8px 12px; border-radius: 8px; background: var(--superficie); }
.lead-campos dt { font-size: 12px; color: var(--texto-suave); }
.lead-campos dt::first-letter { text-transform: uppercase; }
.lead-campos dd { margin: 0; font-size: 14.5px; }
.lead-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* Lembrete combinado com o cliente (na conversa do Secretário) */
.lead-lembretes { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; }
.lead-lembretes-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lead-lembretes-topo > span { display: grid; gap: 2px; }
.lead-lembretes-topo strong { display: inline-flex; align-items: center; gap: 6px; }
.lead-lembretes-topo strong .icone { width: 16px; height: 16px; }
.lead-lembretes-topo small { color: var(--texto-suave); font-size: 13px; }
.lead-lembretes-topo .botao { flex-shrink: 0; }
.lead-lembretes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lead-lembretes-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 8px; background: var(--superficie); }
.lead-lembretes-lista li > div:first-child { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.lead-lembretes-lista small { color: var(--texto-suave); }
.lead-lembrete-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lead-lembrete-selo { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--destaque-escuro); white-space: nowrap; }
.lead-lembrete-selo .icone { width: 12px; height: 12px; }
.atalhos-lembrete { display: flex; flex-wrap: wrap; flex-direction: row; gap: 6px; }
.atalhos-lembrete legend { font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
.atalho { position: relative; }
.atalho input { position: absolute; opacity: 0; pointer-events: none; }
.atalho span { display: inline-block; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 99px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.atalho input:checked + span { border-color: var(--destaque); background: var(--destaque-claro); color: var(--destaque-escuro); font-weight: 600; }
.atalho input:focus-visible + span { outline: 2px solid var(--destaque); outline-offset: 2px; }
.previa-lembrete { display: grid; gap: 2px; }
.previa-lembrete .lembrete-mensagem { margin: 0; }
.lead-conversa summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--destaque-escuro); }
.conversa {
  display: grid; gap: 10px; max-height: 340px; overflow-y: auto; margin: 10px 0 0; padding: 12px;
  border-radius: 12px; background: var(--superficie); list-style: none;
}
.fala { display: flex; flex-direction: column; align-items: flex-start; justify-self: start; max-width: 85%; }
.fala.secretario, .fala.estudio { justify-self: end; align-items: flex-end; }
.fala-balao {
  padding: 8px 12px; border: 1px solid var(--borda); border-radius: 12px 12px 12px 4px;
  background: var(--cartao); font-size: 14px; white-space: pre-line;
}
.fala.secretario .fala-balao, .fala.estudio .fala-balao { border-color: var(--destaque-anel); border-radius: 12px 12px 4px 12px; background: var(--destaque-claro); }
.fala-tipo { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--texto-suave); }
.fala-tipo .icone { width: 13px; height: 13px; }
.fala small { margin-top: 3px; font-size: 11.5px; color: var(--texto-apagado); }

/* Configurar o Secretário */
.chave-ia { margin: 0 0 8px; font-size: 14px; font-weight: 400; color: var(--texto-suave); }
.chave-ia.ok { color: var(--verde); }
.chave-ia.erro { color: var(--vermelho); }
.chaves-ia { display: grid; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.chaves-ia li { display: flex; align-items: center; gap: 6px; margin: 0; }
.chaves-ia .botao-link { padding: 0 0 0 4px; font-size: 12.5px; }
.caixa-marcar .ajuda { display: block; margin-top: 2px; }
#cfg-nuvem + input { margin-bottom: 8px; }
.chave-ia .icone { width: 15px; height: 15px; vertical-align: -2px; }
.linha-chave { display: flex; gap: 8px; }
.linha-chave input { flex: 1; min-width: 0; }
.campo .botao-link { padding: 0 0 0 6px; font-size: 12.5px; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; }
.dia-check { position: relative; cursor: pointer; }
.dia-check input { position: absolute; opacity: 0; }
.dia-check span {
  display: inline-block; min-width: 46px; padding: 6px 10px; border: 1px solid var(--borda-forte); border-radius: 8px;
  background: var(--campo); font-size: 13.5px; font-weight: 500; text-align: center; color: var(--texto-suave);
}
.dia-check input:checked + span { border-color: var(--destaque); background: var(--destaque-claro); color: var(--destaque-escuro); }
.dia-check input:focus-visible + span { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* Simulador: a conversa à esquerda, o que o Secretário entendeu à direita */
.simulador { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.sim-conversa { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sim-nota { margin: 0; }
.sim-mensagens { height: 380px; max-height: none; margin: 0; }
.sim-vazio { align-self: center; justify-self: center; max-width: 260px; color: var(--texto-suave); font-size: 14px; text-align: center; }
.fala.digitando .fala-balao { color: var(--texto-suave); font-style: italic; }
.sim-enviar { display: flex; align-items: center; gap: 8px; }
.sim-enviar input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--borda-forte); border-radius: 8px;
  background: var(--campo); font: inherit; font-size: 15px; color: var(--texto);
}
.sim-enviar input:focus { outline: 0; border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-anel); }
.sim-ficha { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--superficie); min-width: 0; }
.sim-ficha h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }
.sim-ficha .lead-campos { grid-template-columns: minmax(0, 1fr); }
.sim-ficha .lead-campos div { background: var(--cartao); }
.sim-ficha .botao { align-self: flex-start; margin-top: auto; }
.sim-entendeu { display: grid; gap: 10px; }
.sim-entendeu p { margin: 0; }
.sim-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sim-linha span { color: var(--texto-suave); }
.sim-custo { margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.sim-custo:empty { display: none; }

/* ---------- Profissionais ---------- */
.grade-prof { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.prof { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.prof.inativo { opacity: .7; }
.prof-topo { display: flex; align-items: center; gap: 12px; }
.prof-nome { flex: 1; min-width: 0; }
.prof-nome strong { display: block; font-size: 16px; }
.prof-nome small { color: var(--texto-suave); font-size: 13px; }
.avatar.grande { width: 48px; height: 48px; font-size: 16px; color: #fff; }
.prof-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.prof-dados div { padding: 8px 12px; border-radius: 8px; background: var(--superficie); }
.prof-dados dt { font-size: 12px; color: var(--texto-suave); }
.prof-dados dd { margin: 0; font-size: 18px; font-weight: 600; }
.prof-contato { display: flex; flex-wrap: wrap; gap: 6px 14px; min-height: 20px; font-size: 14px; }
.prof-contato a { text-decoration: none; }
.prof-contato a:hover { text-decoration: underline; }
.prof-acoes { display: flex; gap: 8px; margin-top: auto; }
.prof-acoes .botao { flex: 1; }

/* ---------- Lembretes ---------- */
.dica-lembretes { display: flex; gap: 10px; align-items: flex-start; margin: -8px 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--verde-claro); color: var(--verde-texto); font-size: 14px; }
.dica-lembretes .icone { flex-shrink: 0; margin-top: 2px; color: var(--verde); }
.lembretes-bloco { margin-bottom: 20px; }
.lembretes-bloco h3::first-letter { text-transform: uppercase; }
.lista-lembretes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.lembrete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; }
.lembrete.enviado { background: #f6faf8; border-color: #cfe9dc; }
.lembrete-info { flex: 1; min-width: 220px; }
.lembrete-info strong { display: block; font-size: 15px; }
.lembrete-info small { display: block; color: var(--texto-suave); font-size: 13px; }
.lembrete-info details { margin-top: 4px; font-size: 13px; }
.lembrete-info summary { cursor: pointer; color: var(--destaque-escuro); font-weight: 600; }
.lembrete-mensagem { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--superficie); white-space: pre-line; color: var(--texto); }
.lembrete-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lembrete-acoes .icone { width: 15px; height: 15px; }
/* Lembretes automáticos: situação de cada envio e a caixa "Envio automático" */
.auto-lembretes { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.auto { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: var(--destaque-claro); color: var(--destaque-escuro); font-size: 12px; font-weight: 500; white-space: nowrap; }
.auto .icone { width: 12px; height: 12px; }
.auto-ok { background: var(--verde-claro); color: var(--verde); }
.auto-espera { background: var(--amarelo-claro); color: var(--amarelo); }
.auto-ruim { background: var(--vermelho-claro); color: var(--vermelho); }
.auto-cinza { background: var(--cinza-claro); color: var(--texto-suave); }
.selo-amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.lembretes-auto { margin-bottom: 18px; padding: 14px 16px; }
.lembretes-auto-topo { display: flex; align-items: center; gap: 12px; }
.lembretes-auto-topo > div { flex: 1; min-width: 0; }
.lembretes-auto-topo p { margin: 2px 0 0; font-size: 14px; color: var(--texto-suave); }
.lembretes-auto-modelos { margin: 10px 0 0; }
.mais-sessoes { margin-top: 14px; }
.mais-sessoes summary { cursor: pointer; font-weight: 600; color: var(--destaque-escuro); }
.lista-retornos { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.lista-retornos li { padding: 8px 12px; border-radius: 8px; background: var(--superficie); }
.lista-retornos strong { display: block; font-size: 14px; }
.lista-retornos small { color: var(--texto-suave); font-size: 13px; }
/* Comanda: lembrar o retorno */
.retorno-comanda .retorno-dias { width: 64px; margin: 0 4px; padding: 3px 6px; border: 1px solid var(--borda-forte); border-radius: 6px; background: var(--campo); color: var(--texto); font: inherit; text-align: center; }
.campo-resumo { max-width: 260px; margin-top: 12px; }
@media (max-width: 600px) {
  .lembretes-auto-topo { flex-wrap: wrap; }
  .lembretes-auto-topo .botao { width: 100%; justify-content: center; }
}
.modelos-mensagem { padding-top: 8px; border-top: 1px solid var(--borda); }
.lembrete-criado + .lembrete-criado { margin-top: 18px; }
.lembretes-bloco .lembrete-criado h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--texto); }
.lista-meus-lembretes { margin: 10px 0 0; padding: 0; list-style: none; }
.lista-meus-lembretes li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.lista-meus-lembretes li:last-child { border-bottom: 0; }
.meu-lembrete-info { flex: 1; min-width: 0; }
.meu-lembrete-info strong { display: block; }
.meu-lembrete-info small { color: var(--texto-suave); font-size: 13px; }
.escolher-clientes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ec-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ec-barra .busca { flex: 1; min-width: 180px; margin: 0; }
.ec-lista { max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid var(--borda); border-radius: 8px; }
.cliente-opcao { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14.5px; font-weight: 400; cursor: pointer; }
.cliente-opcao:hover { background: var(--superficie); }
.cliente-opcao:has(input:checked) { background: var(--destaque-claro); }
.cliente-opcao input { width: 17px; height: 17px; margin: 0; accent-color: var(--destaque); }
.cliente-opcao span { flex: 1; min-width: 0; }
.cliente-opcao small { color: var(--texto-suave); font-size: 13px; white-space: nowrap; }
.cliente-opcao.sem-zap { opacity: .55; cursor: default; }
.previa-lembrete { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--verde-claro); color: var(--verde-texto); font-size: 14px; white-space: pre-line; }
.modelos-mensagem p { margin: 4px 0 0; }

/* ---------- Anamnese ---------- */
.aviso-saude { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.aviso-saude.alerta { background: var(--vermelho-claro); color: #8f1f1f; }
.aviso-saude.pendente { background: var(--amarelo-claro); color: #92400e; }
.aviso-saude.ok { background: var(--verde-claro); color: var(--verde); }
.aviso-saude > span:not(.aviso-saude-icone) { flex: 1; }
.aviso-saude small { opacity: .8; }
.aviso-saude-icone { font-size: 16px; line-height: 1; }
.aviso-saude-icone .icone { width: 16px; height: 16px; }
.selo-saude { padding: 1px 6px; border-radius: 6px; background: var(--vermelho-claro); color: var(--vermelho); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sem-anamnese { color: var(--amarelo); font-size: 12px; white-space: nowrap; }
.ficha-saude { margin: 0; }
.perguntas-anamnese { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pergunta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; }
.pergunta legend { float: left; padding: 0; font-size: 14.5px; font-weight: 500; }
.pergunta.respondeu-sim { border-color: #f0b4b4; background: #fff8f8; }
.pergunta .detalhe { grid-column: 1 / -1; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: 14.5px; }
.sim-nao { display: inline-flex; gap: 6px; }
.sim-nao label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--borda); border-radius: 99px; font-size: 13.5px; cursor: pointer; }
.sim-nao label:has(input:checked) { border-color: var(--texto); background: var(--texto); color: var(--texto-invertido); }
.sim-nao input { margin: 0; accent-color: var(--destaque); }
.termo { padding: 12px 14px; border-radius: 8px; background: var(--superficie); font-size: 14px; }
.termo-texto { max-height: 160px; margin-top: 6px; overflow-y: auto; white-space: pre-line; color: var(--texto-suave); }
.bloco-assinatura { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.quadro-assinatura { width: 100%; height: 170px; border: 2px dashed var(--borda-forte); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.quadro-assinatura.desligado { opacity: .35; pointer-events: none; }
.assinatura-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
/* Ficha de anamnese pelo celular (na sessão) */
.ficha-sessao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 8px; background: var(--superficie); font-size: 14px; }
.ficha-situacao { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--texto-suave); }
.ficha-situacao svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.ficha-situacao strong { color: var(--texto); }
.ficha-situacao.ok, .ficha-situacao.ok strong { color: var(--verde); }
.ficha-manual { display: grid; gap: 12px; }
.ficha-manual .modal-texto { margin: 0; }
.ficha-notif { display: flex; align-items: center; gap: 6px; flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--destaque); }
.ficha-notif svg { flex: none; width: 16px; height: 16px; }
.ficha-nova-notif:empty { display: none; }
.ficha-nova-notif .ficha-notif { padding: 0 4px; }
/* Configurações → Notificações */
.notif-linha { margin: 8px 0 0; }
.notif-estado { font-weight: 500; }
.notif-estado.ok { color: var(--verde); }
.notif-estado.ruim { color: var(--vermelho); }
.ficha-manual-texto { padding: 12px 14px; border-radius: 8px; background: var(--superficie); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; color: var(--texto-suave); }
.marcar-simples { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.marcar-simples input { width: 16px; height: 16px; accent-color: var(--destaque); }
.ver-anamnese { display: grid; gap: 10px; font-size: 14.5px; }
.ver-anamnese p { margin: 0; }
.respostas-anamnese { display: grid; gap: 4px; margin: 0; padding-left: 20px; }
.respostas-anamnese li span { color: var(--texto-suave); }
.respostas-anamnese li strong { display: block; }
.respostas-anamnese li.sim strong { color: var(--vermelho); }
.assinatura-salva { max-width: 320px; max-height: 120px; padding: 6px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
.folha-respostas { width: 100%; border-collapse: collapse; font-size: 10pt; }
.folha-respostas td { padding: 4px 6px; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
.folha-respostas td:last-child { width: 32%; }
.folha-assinaturas { display: flex; justify-content: center; margin-top: 28px; }
.folha-assinatura { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 300px; font-size: 10pt; color: #444; }
.folha-assinatura img { max-height: 90px; max-width: 300px; }
.folha-assinatura .linha-assinar { width: 300px; height: 60px; border-bottom: 1px solid #333; }
.folha-assinatura span { padding-top: 4px; border-top: 1px solid #333; min-width: 300px; text-align: center; }
.folha-assinatura:has(.linha-assinar) span { border-top: 0; }

/* ---------- Painel (gráficos) ---------- */
#pn-conteudo { transition: opacity .2s; }
#pn-conteudo.recarregando { opacity: .5; } /* segura o desenho anterior enquanto carrega */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--sombra); }
.kpi-rotulo { font-size: 13px; color: var(--texto-suave); }
.kpi-valor { font-size: 24px; font-weight: 650; line-height: 1.15; }
.kpi-delta { font-size: 12.5px; color: var(--texto-suave); }
.kpi-delta.sobe { color: var(--sobe); font-weight: 600; }
.kpi-delta.desce { color: var(--desce); font-weight: 600; }
.cartao-grafico { position: relative; }
.cartao-grafico .cartao-topo { margin-bottom: 8px; }
.largo-grafico { margin-bottom: 20px; }
.grade-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.grafico { min-height: 60px; }
.grafico-svg { display: block; max-width: 100%; overflow: visible; }
.grafico-svg .eixo { font-size: 11px; fill: var(--grafico-eixo); font-variant-numeric: tabular-nums; }
.grafico-svg .eixo-x { font-size: 12px; fill: var(--grafico-eixo-x); }
.grafico-svg .fundo-destaque { opacity: 0; transition: opacity .1s; }
.grafico-svg .grupo-coluna.ativo .fundo-destaque { opacity: 1; }
.grafico-svg .alvo { cursor: pointer; outline: none; }
.grafico-svg .alvo:focus-visible { stroke: var(--destaque); stroke-width: 2; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; font-size: 13px; color: var(--texto-suave); }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cor { width: 10px; height: 10px; border-radius: 2px; }
.dica-grafico {
  position: absolute; z-index: 5; min-width: 140px; padding: 8px 10px; border-radius: 8px; pointer-events: none;
  background: var(--cartao); border: 1px solid var(--borda); box-shadow: 0 8px 24px rgba(16, 24, 32, .14); font-size: 13px;
}
.dica-titulo { margin-bottom: 4px; color: var(--texto-suave); font-size: 12px; }
.dica-titulo::first-letter { text-transform: uppercase; }
.dica-linha { display: flex; align-items: center; gap: 6px; }
.dica-linha strong { font-variant-numeric: tabular-nums; }
.dica-linha span:last-child:not(.dica-chave) { color: var(--texto-suave); }
.dica-chave { width: 10px; height: 2px; border-radius: 1px; }
.barras-h { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.barras-h li { display: grid; grid-template-columns: minmax(70px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; cursor: default; outline: none; }
.barras-h li:hover, .barras-h li:focus-visible { background: var(--grafico-destaque); }
.barras-h-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.barras-h-trilho { display: block; height: 14px; }
.barras-h-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.barras-h-valor { font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Ficha do cliente e cópias de segurança */
.ficha-cliente { padding: 14px 16px; border-radius: 12px; background: var(--superficie); font-size: 14px; }
.ficha-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ficha-numeros dt { font-size: 12px; color: var(--texto-suave); }
.ficha-numeros dd { margin: 0; font-weight: 600; }
.ficha-titulo { margin: 12px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }
.ficha-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ficha-lista li { display: flex; align-items: center; gap: 8px; }
.ficha-orc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ficha-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ficha-acoes .icone { width: 15px; height: 15px; }
.info-dados-texto { flex: 1; min-width: 0; }
.ultimo-backup { margin: 10px 0 0; }
.ultimo-backup .icone { color: var(--verde); vertical-align: -3px; margin-right: 4px; }
.info-dados .caixa-marcar { margin-top: 12px; }

/* ---------- Estoque ---------- */
.selo-caixa.repor { background: #fef3c7; color: #92400e; }
.alerta-estoque { margin-bottom: 20px; border-color: #fecaca; }
.alerta-estoque h2 { display: flex; align-items: center; gap: 8px; color: var(--vermelho); }
.lista-repor { margin: 8px 0 0; padding: 0; list-style: none; }
.lista-repor li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.lista-repor li:last-child { border-bottom: 0; }
.lista-repor strong { display: block; font-size: 14.5px; }
.lista-repor small { color: var(--texto-suave); font-size: 13px; }
.botao-pequeno { padding: 6px 10px; font-size: 13px; }
.tabela-estoque .qtd { font-size: 17px; font-variant-numeric: tabular-nums; }
.tabela-estoque .unidade { color: var(--texto-suave); font-size: 13px; }
.tabela-estoque .qtd-baixa .qtd, .tabela-estoque .qtd-baixa .unidade { color: var(--vermelho); }
.tabela-estoque tr.inativo { opacity: .6; }
.tabela-estoque .acoes .botao + .botao { margin-left: 6px; }
.historico-estoque { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.historico-estoque .mov-linha { cursor: default; }
.historico-estoque .lista-movimentos { max-height: 260px; overflow-y: auto; }
.item-linha.do-estoque .i-descricao { border-color: var(--verde); background: #f3fbf7; }

/* ---------- Caixa do dia e Financeiro ---------- */
.pagina-topo .navegar { flex-wrap: wrap; }
.pagina-topo > .navegar { flex-shrink: 0; } /* não espreme o seletor de mês/dia */
.nome-mes { display: inline-block; min-width: 140px; text-align: center; font-size: 14px; font-weight: 600; }
.nome-mes::first-letter { text-transform: uppercase; }
.selo.caixa-aberto { background: var(--verde-claro); color: var(--verde); }
.selo.caixa-fechado, .selo.caixa-nao_aberto { background: var(--cinza-claro); color: var(--texto-suave); }
.botoes-topo { display: flex; flex-wrap: wrap; gap: 8px; }
.botoes-topo .botao { padding: 6px 12px; font-size: 13.5px; }
.botoes-topo .icone { width: 16px; height: 16px; }
.cartao h3 { margin: 18px 0 0; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }
.lista-movimentos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.mov { display: flex; align-items: center; gap: 6px; }
.mov-linha {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 0; border-radius: 8px; background: var(--superficie); font: inherit; color: var(--texto); text-align: left; cursor: pointer;
}
.mov-linha:hover:not(:disabled) { background: var(--cinza-claro); }
.mov-linha:disabled { cursor: default; color: var(--texto); }
.mov-sinal { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; font-weight: 600; }
.mov-entrada .mov-sinal { background: var(--verde-claro); color: var(--verde); }
.mov-saida .mov-sinal { background: var(--vermelho-claro); color: var(--vermelho); }
.mov-info { flex: 1; min-width: 0; }
.mov-info strong { display: block; font-size: 14.5px; }
.mov-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-suave); font-size: 13px; }
.mov-valor { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mov-entrada .mov-valor { color: var(--verde); }
dl.contas { display: grid; gap: 6px; margin: 10px 0 0; }
dl.contas div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
dl.contas dt { color: var(--texto-suave); }
dl.contas dt small { font-size: 12px; }
dl.contas dd { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
dl.contas .total { padding-top: 6px; border-top: 1px solid var(--borda); }
dl.contas .total dt, dl.contas .total dd { color: var(--texto); font-weight: 600; }
dl.contas .bateu dd { color: var(--verde); }
dl.contas .nao-bateu dt, dl.contas .nao-bateu dd { color: var(--vermelho); font-weight: 600; }
.acoes-gaveta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tabela-formas { margin-top: 6px; }
.tabela-formas th, .tabela-formas td { padding: 8px 6px; }
.tabela-formas th:not(:first-child), .tabela-formas td:not(:first-child) { text-align: right; white-space: nowrap; }
.tabela-formas tbody tr { cursor: default; }
.tabela-formas tfoot td { font-weight: 600; }
.lista-contas { margin: 8px 0 0; padding: 0; list-style: none; }
.lista-contas li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.lista-contas li:last-child { border-bottom: 0; }
.conta-info { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--texto); text-align: left; cursor: pointer; }
.conta-info strong { display: block; }
.conta-info small { color: var(--texto-suave); font-size: 13px; }
.vence.vencida { color: var(--vermelho); font-weight: 600; }
.vence.hoje { color: var(--amarelo); font-weight: 600; }

/* ---------- Comandas ---------- */
.modal.modal-largo { width: min(800px, calc(100vw - 32px)); }
.botao-link { padding: 8px 4px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--texto-suave); text-decoration: underline; cursor: pointer; }
.botao-link.perigo { color: var(--vermelho); }
.selo.com-aberta { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.com-fechada { background: var(--verde-claro); color: var(--verde); }
.selo.com-cancelada { background: var(--cinza-claro); color: var(--texto-apagado); text-decoration: line-through; }
.situacao-comanda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 14px; }
.bloco-comanda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bloco-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.bloco-titulo strong { font-size: 14.5px; }
.bloco-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.bloco-botoes .botao { padding: 6px 12px; font-size: 13.5px; }
.bloco-botoes .icone { width: 16px; height: 16px; }
.itens-cabeca, .item-linha { display: grid; grid-template-columns: minmax(0, 1fr) 64px 124px 44px 100px 36px; gap: 8px; align-items: center; }
.itens-cabeca span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }
.itens-cabeca span:nth-child(4) { text-align: center; }
.itens-cabeca span:nth-child(5) { text-align: right; }
.item-linha > input, .pagamento-linha > select {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--borda-forte); border-radius: 8px;
  background: var(--campo); font: inherit; font-size: 14.5px; color: var(--texto);
}
.item-linha > input:focus, .pagamento-linha > select:focus { outline: 0; border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-anel); }
.com-prefixo.pequeno { padding-left: 10px; font-size: 14.5px; }
.com-prefixo.pequeno input { padding: 8px 10px 8px 4px; }
.com-prefixo.sufixo.pequeno { width: 84px; padding: 0 10px 0 0; }
.com-prefixo.sufixo.pequeno input { padding: 8px 4px 8px 10px; }
.i-comissao { display: grid; place-items: center; }
.i-comissao input { width: 18px; height: 18px; accent-color: var(--destaque); }
.i-total { text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pagamento-linha { display: grid; grid-template-columns: minmax(0, 1fr) 160px 36px; gap: 8px; align-items: center; max-width: 460px; }
.resumo-comanda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--superficie); font-size: 14.5px; }
.resumo-comanda > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.resumo-comanda .com-prefixo { width: 140px; }
.resumo-comanda strong { font-variant-numeric: tabular-nums; }
.resumo-comanda .linha-total { padding-top: 6px; border-top: 1px solid var(--borda); font-size: 16px; }
.resumo-comanda .linha-receber strong { font-size: 18px; color: var(--destaque-escuro); }
.situacao-pagamento { font-size: 13.5px; font-weight: 600; }
.situacao-pagamento.ok { color: var(--verde); }
.situacao-pagamento.falta { color: var(--amarelo); }
.situacao-pagamento.ruim { color: var(--vermelho); }
.linha-comissao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed var(--borda-forte); border-radius: 12px; font-size: 14.5px; }
.valor-comissao { color: var(--verde); }
.travada .bloco-botoes, .travada [data-remover] { display: none; }
.travada input:disabled, .travada select:disabled, .travada .com-prefixo:has(input:disabled) {
  background: var(--superficie); color: var(--texto); -webkit-text-fill-color: var(--texto); opacity: 1;
}
.pago { color: var(--verde) !important; font-weight: 600; }

.sem-comanda { margin-bottom: 20px; }
.sem-comanda h2 { margin-bottom: 10px; }
.sem-comanda .sessao-linha { cursor: default; }
.sem-comanda .sessao-linha:hover { background: var(--superficie); }
.grade-comandas, .grade-caixa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.comissoes .cartao-topo { align-items: center; }
#com-mes { display: inline-block; min-width: 120px; text-align: center; font-size: 14px; font-weight: 600; }
#com-mes::first-letter { text-transform: uppercase; }
.lista-comissoes { margin: 12px 0 0; padding: 0; list-style: none; }
.lista-comissoes li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.comissao-nome { flex: 1; min-width: 0; }
.comissao-nome strong { display: block; }
.comissao-nome small { color: var(--texto-suave); font-size: 12.5px; }
.total-comissoes { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: 15px; }
.total-comissoes strong { color: var(--destaque-escuro); }

/* ---------- Orçamentos ---------- */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.filtros .busca { flex: 1; min-width: 220px; margin: 0; }
.alternar { max-width: 100%; overflow-x: auto; }
.selo.orc-aguardando { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.orc-aprovado { background: var(--verde-claro); color: var(--verde); }
.selo.orc-recusado { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.orc-vencido { background: var(--cinza-claro); color: var(--texto-suave); }
.tabela-orcamentos td small { display: block; margin-top: 3px; }
.orc-numero { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.orc-arte { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acoes-extra { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--borda); }
.acoes-extra .botao .icone { width: 16px; height: 16px; }
.nota-orcamento { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--azul-claro); color: var(--azul); font-size: 13.5px; font-weight: 600; }
.nota-orcamento .icone { width: 16px; height: 16px; }
.sessoes-do-orcamento { padding: 12px 14px; border-radius: 8px; background: var(--superficie); font-size: 14px; }
.sessoes-do-orcamento ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.sessoes-do-orcamento li { display: flex; align-items: center; gap: 8px; }
.sessoes-do-orcamento .selo { margin-left: auto; }
.ponto { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--cor); }

/* Folha do orçamento para imprimir ou salvar em PDF */
.folha-impressao { display: none; color: #1b2228; font-size: 11pt; line-height: 1.5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.folha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 14px; border-bottom: 3px solid var(--destaque); }
.folha-topo h1 { font-size: 20pt; }
.folha-topo p { margin: 4px 0 0; color: #555; font-size: 10pt; }
.folha-numero { text-align: right; white-space: nowrap; }
.folha-numero span { display: block; font-size: 9pt; letter-spacing: .08em; text-transform: uppercase; color: #777; }
.folha-numero strong { display: block; font-size: 16pt; }
.folha-numero small { color: #777; font-size: 9pt; }
.folha-bloco { margin-top: 18px; }
.folha-bloco h2 { margin-bottom: 6px; font-size: 9pt; letter-spacing: .08em; text-transform: uppercase; color: #888; }
.folha-bloco p { margin: 2px 0; }
.folha-arte { font-size: 13pt; font-weight: 600; }
.folha-detalhes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0 0; }
.folha-detalhes div { padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; }
.folha-detalhes dt { font-size: 8.5pt; color: #777; }
.folha-detalhes dd { margin: 0; font-weight: 600; }
.folha-valores { margin-top: 18px; padding: 12px 16px; border-radius: 8px; background: #f4f5f7; }
.folha-valores div { display: flex; justify-content: space-between; padding: 3px 0; }
.folha-valores .folha-total { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid #ddd; font-size: 14pt; }
.folha-valores p { margin: 8px 0 0; font-size: 10pt; color: #555; }
.folha-termos { white-space: pre-line; font-size: 10pt; color: #444; }
.folha-rodape { margin-top: 28px; text-align: center; font-size: 10pt; color: #777; }
/* ---------- Trazer do Google Agenda ---------- */
.pagina-topo-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.google-conteudo { display: grid; gap: 14px; }
.google-form { display: grid; gap: 14px; }
.google-conteudo .modal-texto { margin: 0; }
.google-passos { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--texto-suave); }
.google-passos strong { color: var(--texto); }
.google-barra { height: 8px; border-radius: 999px; background: var(--cinza-claro); overflow: hidden; }
.google-barra span { display: block; height: 100%; background: var(--destaque); border-radius: inherit; transition: width .4s; }
.google-andamento { display: grid; gap: 12px; }
.google-resultado { display: grid; gap: 12px; }
.google-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.google-lista li { display: flex; gap: 8px; align-items: baseline; }
.google-lista .icone { color: var(--verde); flex: none; width: 16px; height: 16px; align-self: center; }
.google-subtitulo { margin: 6px 0 0; font-size: 15px; }
.google-duvidas { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.google-duvidas small { display: block; }

/* ---------- Tela de entrar (sistema na nuvem) ---------- */
.tela-entrar { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; box-sizing: border-box; }
.entrar { width: 100%; max-width: 380px; }
.entrar-cartao { display: grid; gap: 14px; padding: 28px 24px; }
.entrar-cartao h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.entrar-cartao .sub { margin: -8px 0 4px; }
.entrar-logo img { width: 48px; height: 48px; border-radius: 13px; }
.entrar-cartao .campo input { font-size: 16px; } /* 16px: o iPhone não dá zoom ao tocar no campo */
.entrar-cartao .botao { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }

/* ---------- App no iPhone (aberto pelo ícone da tela de início) ---------- */
@media (display-mode: standalone) {
  body { -webkit-tap-highlight-color: transparent; }
  body .avisos { bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media print {
  @page { size: A4; margin: 16mm; }
  body.imprimindo { background: #fff; }
  body.imprimindo > :not(.folha-impressao) { display: none !important; }
  body.imprimindo .folha-impressao { display: block; }
}

/* ---------- Avisos (canto da tela) ---------- */
.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 10px; }
.aviso {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; max-width: 380px;
  background: var(--escuro); color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(16, 24, 32, .25);
  animation: aviso-entra .2s ease-out; transition: opacity .3s, transform .3s;
}
.aviso-ok .icone { color: #5fd39c; }
.aviso-erro .icone { color: #ff8a8a; }
.aviso.saindo { opacity: 0; transform: translateY(6px); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Telas menores (notebook pequeno, tablet, celular) ---------- */
@media (max-width: 1080px) {
  .grade-inicio, .grade-comandas, .grade-caixa { grid-template-columns: minmax(0, 1fr); }
  .grade-graficos { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .tabela .extra { display: none; }
}
@media (max-width: 900px) {
  .menu { transform: translateX(-100%); transition: transform .2s; }
  body.menu-aberto .menu { transform: none; }
  body.menu-aberto .menu-fundo { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(20, 26, 31, .45); }
  .principal { margin-left: 0; }
  #abrir-menu { display: inline-grid; }
  .barra { padding: 0 16px; }
  main { padding: 20px 16px; }
  .tabela .opcional { display: none; }
}
@media (max-width: 640px) {
  .aviso-secretario { flex-wrap: wrap; align-items: flex-start; }
  .aviso-secretario > span { flex-basis: calc(100% - 40px); }
  .aviso-secretario .botao { margin-left: 32px; }
  .lead-campos { grid-template-columns: minmax(0, 1fr); }
  .lead-acoes .botao { flex: 1; }
  .lead-lembretes-topo { flex-direction: column; align-items: stretch; }
  .tabela-leads .lead-assunto { min-width: 180px; }
  .simulador { grid-template-columns: minmax(0, 1fr); }
  .sim-mensagens { height: 300px; }
  .linha-chave { flex-wrap: wrap; }
  .linha-chave input { flex-basis: 100%; }
  /* Mês no celular: só o número do dia e quantas sessões tem */
  .mes-cabeca span { padding: 0 2px 6px; text-align: center; font-size: 10.5px; letter-spacing: 0; }
  .mes-dia { min-height: 56px; padding: 4px 2px; align-items: center; gap: 2px; }
  .mes-numero { align-self: center; min-width: 26px; padding: 0 4px; }
  .mes-novo, .mes-feriado, .mes-sessoes { display: none; }
  .mes-lista-feriados { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
  .mes-lista-feriados li { display: flex; align-items: center; gap: 8px; }
  .mes-lista-feriados strong { font-variant-numeric: tabular-nums; }
  .mes-qtd {
    display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border: 0; border-radius: 99px;
    background: var(--destaque-claro); color: var(--destaque-escuro); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  }
  .hero { flex-direction: column; align-items: stretch; }
  .hero-lado .botao { flex: 1; }
  .hero-relogio { display: none; }
  .numeros, .numeros-3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .ficha-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itens-cabeca { display: none; }
  .item-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 44px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
  .item-linha .i-descricao { grid-column: 1 / -1; }
  .item-linha .i-total { grid-column: 1 / 3; text-align: left; }
  .pagamento-linha { grid-template-columns: minmax(0, 1fr) 130px 36px; }
  .lista-contas li { flex-wrap: wrap; }
  .lista-contas .botao { margin-left: auto; }
  #agenda-prof { margin-left: 0; width: 100%; }
  .sessao-linha-fim small { display: none; }
  .formulario { grid-template-columns: 1fr; }
  .passo { flex-wrap: wrap; }
  .passo-acao { width: 100%; padding-left: 46px; }
  .pagina-topo { flex-direction: column; align-items: stretch; }
  .barra-usuario #barra-nome { display: none; }
}

/* ---------- Tema escuro: peças que têm cor própria ---------- */
:root[data-tema="escuro"] .botao-whats { border-color: #1f4d3d; }
:root[data-tema="escuro"] .botao-whats:hover { background: #133a2e; border-color: #2a6b54; }
:root[data-tema="escuro"] .lembrete.enviado { background: #0f211b; border-color: #1f4d3d; }
:root[data-tema="escuro"] .aviso-saude.alerta { color: #fca5a5; }
:root[data-tema="escuro"] .aviso-saude.pendente { color: #fcd34d; }
:root[data-tema="escuro"] .pergunta.respondeu-sim { border-color: #7f1d1d; background: #221214; }
:root[data-tema="escuro"] .selo-caixa.repor { background: #3a2c10; color: #fcd34d; }
:root[data-tema="escuro"] .alerta-estoque { border-color: #5b2323; }
:root[data-tema="escuro"] .item-linha.do-estoque .i-descricao { background: #0f211b; }
:root[data-tema="escuro"] .aviso { border: 1px solid var(--borda-forte); }
:root[data-tema="escuro"] .modal::backdrop { background: rgba(0, 0, 0, .6); }
/* O quadro da assinatura continua branco, como papel: a assinatura fica escura e aparece na impressão. */

/* Financeiro → Resultado do mês (DRE simples) */
.resultado-mes { margin-bottom: 20px; }
.dre { display: grid; gap: 0; margin: 12px 0 0; }
.dre-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.dre-linha dt { display: grid; gap: 2px; font-size: 14.5px; font-weight: 500; }
.dre-linha dt small { font-size: 12.5px; font-weight: 400; color: var(--texto-suave); }
.dre-linha dd { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dre-receita dd { color: var(--texto); }
.negativo-leve { color: var(--texto-suave); }
.dre-total { border-bottom: 0; padding-top: 12px; }
.dre-total dt { font-size: 16px; font-weight: 700; }
.dre-total dd { font-size: 20px; font-weight: 700; }
.dre-total .positivo { color: var(--verde); }
.dre-aviso { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; }
.dre-aviso .icone { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* Painel → Metas e limite do MEI */
.meta-bloco + .meta-bloco { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.meta-bloco h3 { margin: 0 0 6px; font-size: 14px; }
.meta-linha { margin-top: 10px; }
.meta-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; color: var(--texto-suave); }
.meta-texto strong { color: var(--texto); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.meta-texto strong small { color: var(--texto-suave); font-weight: 400; font-size: 12.5px; }
.meta-pct { margin-left: auto; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.meta-pct.ok { color: var(--verde); }
.meta-pct.ruim { color: var(--vermelho); }
.meta-barra { display: flex; gap: 2px; height: 10px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: var(--cinza-claro); }
.meta-feito { height: 100%; border-radius: 99px; background: var(--destaque); }
.meta-feito.ok { background: var(--verde); }
.meta-feito.alerta { background: var(--vermelho); }
.meta-agenda { height: 100%; border-radius: 99px; background: var(--destaque-anel); }
.meta-previsao { margin: 6px 0 0; font-size: 13px; color: var(--texto-suave); }
.mei-texto { margin: 8px 0 0; font-size: 13.5px; color: var(--texto-suave); }
.mei-perto { color: var(--amarelo); font-weight: 500; }
.mei-passou, .mei-acima20 { color: var(--vermelho); font-weight: 600; }
.formulario-metas .meta-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; }
.formulario-metas legend { padding: 0 4px; font-weight: 600; }
@media (max-width: 600px) {
  .formulario-metas .meta-campos { grid-template-columns: minmax(0, 1fr); }
}

/* Recebimentos (Pix e maquininha) */
.cartao-recebimentos { margin-bottom: 20px; }
.grupo-receb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; padding: 14px; border: 1px solid var(--borda); border-radius: 12px; }
.grupo-receb legend { padding: 0 6px; font-weight: 600; }
.grupo-receb .largo { grid-column: 1 / -1; }
.ok-salva { display: inline-flex; align-items: center; gap: 4px; color: var(--verde) !important; }
.ok-salva .icone { width: 13px; height: 13px; }
.teste-receb:empty { display: none; }
.teste-receb { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.teste-receb.ok { color: var(--verde); }
.teste-receb.ruim { color: var(--vermelho); }
@media (max-width: 600px) { .grupo-receb { grid-template-columns: minmax(0, 1fr); } }
/* Janela de cobrança */
.cobranca-pix, .cobranca-maquininha { display: grid; justify-items: center; gap: 10px; text-align: center; }
.cobranca-qr { width: 220px; height: 220px; image-rendering: pixelated; border-radius: 8px; background: #fff; padding: 8px; }
.cobranca-valor { margin: 0; font-size: 26px; font-weight: 700; }
.cobranca-pix .campo { width: 100%; text-align: left; }
.cobranca-codigo { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; resize: none; }
.cobranca-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cobranca-icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--destaque-claro); color: var(--destaque); }
.cobranca-icone .icone { width: 28px; height: 28px; }
.cobranca-situacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; font-size: 14px; color: var(--texto-suave); text-align: center; }
.cobranca-situacao.pago { color: var(--verde); font-size: 15px; }
.cobranca-situacao .icone { width: 16px; height: 16px; }
.cobranca-situacao small { flex-basis: 100%; }
.girando { width: 14px; height: 14px; border: 2px solid var(--destaque-anel); border-top-color: var(--destaque); border-radius: 50%; animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.cartao-tipo { display: flex; gap: 16px; border: 0; padding: 0; margin: 0; }
.cartao-tipo legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; }

/* ---------- Time (agência de marketing com IA) ---------- */
.time-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.time-atalhos { position: sticky; top: 16px; display: grid; gap: 12px; max-height: calc(100vh - 32px); overflow-y: auto; }
.time-atalhos h2 { margin: 4px 0 0; font-size: 15px; }
.time-escolhas { display: grid; gap: 10px; }
.time-quem { margin: 0; font-size: 15px; }
.time-lista-atalhos { display: grid; gap: 6px; }
.time-atalho { display: grid; gap: 2px; width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); color: var(--texto); text-align: left; cursor: pointer; font: inherit; }
.time-atalho strong { font-size: 14px; }
.time-atalho small { font-size: 12px; color: var(--texto-suave); line-height: 1.35; }
.time-atalho:hover:not(:disabled) { border-color: var(--destaque); background: var(--destaque-claro); }
.time-atalho:disabled { opacity: 0.55; cursor: not-allowed; }
.time-conversa { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 150px); min-height: 520px; }
.time-topo-conversa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.time-topo-conversa h2 { margin: 0; font-size: 16px; }
.time-apresentacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--destaque-claro); color: var(--destaque-escuro); font-size: 14px; }
.time-mensagens { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; align-content: start; gap: 16px; }
.time-conversa > .time-mensagens { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.time-msg { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.time-msg.voce { flex-direction: column; align-items: flex-end; }
.time-msg.voce .time-balao { max-width: min(85%, 620px); background: var(--destaque); color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 14px; white-space: normal; overflow-wrap: break-word; }
.time-anexos { display: flex; align-items: center; gap: 4px; margin-top: 6px; opacity: 0.9; font-size: 12px; }
.time-anexos .icone { width: 13px; height: 13px; }
.time-avatar { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--destaque-claro); color: var(--destaque-escuro); }
.time-avatar .icone { width: 18px; height: 18px; }
.time-corpo { flex: 1; min-width: 0; display: grid; gap: 6px; }
.time-msg.time .time-balao { background: var(--superficie); border-radius: 4px 14px 14px 14px; padding: 12px 16px; min-width: 0; overflow-wrap: break-word; }
.time-participaram { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.time-chip { padding: 2px 8px; border-radius: 99px; background: var(--destaque-claro); color: var(--destaque-escuro); font-weight: 500; }
.time-rodape { display: flex; align-items: center; gap: 12px; }
.time-rodape .botao-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.time-rodape .icone { width: 13px; height: 13px; }
.time-hora { color: var(--texto-suave); font-size: 12px; }
.time-andamento p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.time-trabalhando { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.time-trabalhando li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--cartao); border: 1px solid var(--borda); font-size: 13px; }
.time-trabalhando li.pronto { border-color: var(--verde); color: var(--verde); }
.time-trabalhando li.falhou { border-color: var(--vermelho); color: var(--vermelho); }
.time-trabalhando .icone { width: 13px; height: 13px; }
.time-escrever { display: grid; gap: 8px; padding-top: 10px; background: var(--cartao); border-top: 1px solid var(--borda); }
.time-linha { display: flex; align-items: flex-end; gap: 8px; }
.time-linha textarea { flex: 1; min-height: 44px; max-height: 220px; resize: none; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--campo, var(--cartao)); color: var(--texto); font: inherit; line-height: 1.4; }
.time-linha textarea:focus { outline: 2px solid var(--destaque-anel); border-color: var(--destaque); }
.time-linha .botao-principal { height: 44px; min-width: 48px; }
.time-anexar { height: 44px; width: 44px; display: grid; place-items: center; cursor: pointer; }
.time-atalho-escolhido { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--destaque-claro); color: var(--destaque-escuro); font-size: 13px; }
.time-previas { display: flex; flex-wrap: wrap; gap: 8px; }
.time-previa { position: relative; }
.time-previa img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borda); }
.time-previa .botao-icone { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; padding: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: 50%; }
.time-previa .botao-icone .icone { width: 12px; height: 12px; }

/* Texto do Time (Markdown) */
.md { font-size: 14.5px; line-height: 1.55; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h2 { font-size: 18px; margin: 18px 0 8px; }
.md h3 { font-size: 16px; margin: 16px 0 6px; }
.md h4, .md h5 { font-size: 14.5px; margin: 14px 0 6px; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--destaque); background: var(--cartao); border-radius: 0 8px 8px 0; }
.md code, .time-como code { padding: 1px 5px; border-radius: 4px; background: var(--cartao); font-size: 0.92em; }
.md hr { border: 0; border-top: 1px solid var(--borda); margin: 14px 0; }
.md a { color: var(--destaque); }
.md-tabela { max-width: 100%; overflow-x: auto; margin: 10px 0; }
.md-tabela table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--cartao); }
.md-tabela th, .md-tabela td { padding: 7px 10px; border: 1px solid var(--borda); text-align: left; vertical-align: top; overflow-wrap: normal; }
.md-tabela td:first-child, .md-tabela th:first-child { min-width: 92px; }
.md-tabela th { background: var(--superficie); font-weight: 600; }
.md-caixa { font-size: 15px; }

/* Como o Time funciona */
.modal-time { width: min(980px, 96vw); }
.time-como { display: grid; gap: 12px; }
.time-como h2 { margin: 12px 0 0; font-size: 17px; }
.time-como details { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; }
.time-como summary { cursor: pointer; }
.time-prompt { margin: 10px 0 4px; padding: 12px; max-height: 420px; overflow: auto; white-space: pre-wrap; border-radius: 8px; background: var(--superficie); font-size: 12.5px; line-height: 1.5; }
.time-diagrama { display: grid; gap: 8px; justify-items: center; padding: 12px; border-radius: 12px; background: var(--superficie); }
.time-diretor { display: grid; gap: 2px; padding: 10px 16px; border: 2px solid var(--destaque); border-radius: 10px; background: var(--cartao); text-align: center; max-width: 520px; }
.time-diretor small { color: var(--texto-suave); }
.time-setas { color: var(--texto-suave); font-size: 12.5px; }
.time-grade { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.time-grade li { position: relative; display: grid; align-content: start; gap: 3px; padding: 10px 10px 10px 40px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); }
.time-grade small { color: var(--texto-suave); font-size: 12px; line-height: 1.35; }
.time-numero { position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--destaque-claro); color: var(--destaque-escuro); font-size: 12px; font-weight: 600; }
.time-web { justify-self: start; padding: 1px 7px; border-radius: 99px; background: var(--amarelo-claro); color: var(--amarelo); font-size: 11px; font-style: normal; font-weight: 500; }
.time-exemplo { padding: 12px; border-radius: 12px; background: var(--cartao); border: 1px solid var(--borda); }

@media (max-width: 1100px) {
  .time-layout { grid-template-columns: minmax(0, 1fr); }
  .time-atalhos { position: static; max-height: none; overflow: visible; }
  .time-atalhos h2 { display: none; }
  .time-escolhas { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .time-lista-atalhos { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: thin; }
  .time-atalho { flex: 0 0 auto; width: auto; padding: 8px 12px; border-radius: 99px; }
  .time-atalho strong { white-space: nowrap; font-size: 13.5px; }
  .time-atalho small { display: none; }
  .time-conversa { height: calc(100dvh - 120px); min-height: 440px; }
}
@media (max-width: 600px) {
  .time-msg.voce .time-balao { max-width: 92%; }
  .time-msg.time .time-balao { padding: 10px 12px; }
  .time-avatar { display: none; }
  .md-tabela table { font-size: 12.5px; }
}

/* ---------- Vários estúdios: faixa do plano, cadastro, termos, Minha conta e Plataforma ---------- */
.selo-azul { background: var(--azul-claro); color: var(--azul); }
.selo-vermelho { background: var(--vermelho-claro); color: var(--vermelho); }

.faixa-conta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; padding: 9px 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--borda); background: var(--azul-claro); color: var(--azul); }
.faixa-conta.aviso { background: var(--amarelo-claro); color: var(--amarelo); }
.faixa-conta.perigo { background: var(--vermelho-claro); color: var(--vermelho); }
.faixa-conta .botao { color: var(--texto); }

.entrar-links { margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.entrar-links a { color: var(--texto-suave); }
.cadastro-cartao { max-width: 440px; }
.tela-entrar .entrar:has(.cadastro-cartao) { max-width: 440px; }
.cadastro-escondido { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cadastro-aceite { align-items: flex-start; line-height: 1.45; font-size: 13.5px; }
.cadastro-aceite input { margin-top: 2px; flex: none; }

.tela-legal { padding: 24px 16px 48px; }
.legal { max-width: 820px; margin: 0 auto; padding: 0; display: grid; gap: 14px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-nav a { padding: 7px 12px; border-radius: 99px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--texto-suave); background: var(--cinza-claro); }
.legal-nav a.ativo { background: var(--destaque-claro); color: var(--destaque-escuro); }
.legal-texto { padding: 28px clamp(18px, 4vw, 40px); }
.legal-texto h1 { font-size: 24px; }

.conta, .plataforma { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.conta .pagina-topo, .plataforma .pagina-topo { margin-bottom: 4px; }
.conta h2 { margin: 0 0 8px; font-size: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conta .cartao > p { margin: 0 0 12px; line-height: 1.5; }
.conta .cartao > p:last-child { margin-bottom: 0; }
.conta-plano-topo { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.conta-plano .ajuda { margin: 0; }
.conta-pagar { display: flex; gap: 8px; flex-wrap: wrap; }
.conta-ciclo { margin-bottom: 14px; }
.conta-assinar { display: grid; gap: 14px; max-width: 760px; }
.conta-assinar .campo { max-width: 320px; }
.conta-assinar .ajuda, .conta-assinar .erro-form { margin: 0; }
.conta-assinar [type=submit] { justify-self: start; }
.conta-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.conta-opcao { position: relative; display: block; cursor: pointer; }
.conta-opcao input { position: absolute; opacity: 0; }
.conta-opcao > span { display: grid; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px; border: 1.5px solid var(--borda-forte); border-radius: 10px; background: var(--cartao); transition: border-color .1s; }
.conta-opcao:hover > span { border-color: var(--borda-hover); }
.conta-opcao input:checked + span { border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-anel); }
.conta-opcao input:focus-visible + span { outline: 2px solid var(--destaque); outline-offset: 2px; }
.conta-opcao small { color: var(--texto-suave); font-size: 12.5px; line-height: 1.4; }
.conta-preco { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.conta-preco small { font-size: 13px; font-weight: 500; }
.conta-destaque { justify-self: start; padding: 1px 8px; border-radius: 99px; background: var(--destaque-claro); color: var(--destaque-escuro); font-size: 11.5px; font-style: normal; font-weight: 600; }
.conta-trocar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.conta-trocar select { padding: 9px 10px; border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--campo); color: var(--texto); font: inherit; }
.conta-exportar { display: flex; gap: 8px; flex-wrap: wrap; }
.conta-senha { max-width: 520px; }
.conta-perigo { border-color: #f3c4c4; }
:root[data-tema="escuro"] .conta-perigo { border-color: #5b2626; }
.conta-perigo h2 { color: var(--vermelho); }

.plataforma-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.plataforma-numeros .cartao { display: grid; gap: 4px; padding: 14px 16px; }
.plataforma-numeros .sub { margin: 0; font-size: 12.5px; }
.plataforma-numeros strong { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.plataforma-filtros { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.plataforma-filtros .busca { flex: 1 1 240px; max-width: 360px; }
.plataforma-tabela tbody tr { cursor: default; }
.plataforma-tabela td { vertical-align: top; }
.plataforma-tabela td small { display: block; margin-top: 2px; }
.plataforma-tabela td .icone { width: 15px; height: 15px; vertical-align: -2px; color: var(--verde); }
.plataforma-tabela small.perigo, .plataforma-tabela strong.perigo { color: var(--vermelho); }
.plataforma-saude h2 { margin: 0 0 10px; font-size: 17px; }
.plataforma-saude ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plataforma-saude li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.plataforma-saude li .selo { flex: none; }
.plataforma-saude li span:last-child { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.plataforma-saude .sub { margin: 12px 0 0; font-size: 12.5px; }
.plataforma-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 220px; }
.plataforma-senha { display: block; margin: 10px 0; padding: 12px; border-radius: 8px; background: var(--superficie); font-size: 20px; letter-spacing: .06em; text-align: center; user-select: all; }

@media (max-width: 640px) {
  .faixa-conta { justify-content: space-between; text-align: left; }
  .conta-assinar .campo { max-width: none; }
  .plataforma-acoes { justify-content: flex-start; min-width: 0; }
}

/* ---------- Ajuda: assistente, artigos e chamados ---------- */
.ajuda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ajuda .pagina-topo { margin-bottom: 4px; }
.ajuda h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.ajuda h2 .icone { width: 20px; height: 20px; color: var(--destaque); }
.ajuda-secao-topo, .ajuda-assistente-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ajuda-assistente-topo { margin-bottom: 2px; }
.ajuda-secao-topo .busca { flex: 1 1 220px; max-width: 340px; }
.ajuda-secao-topo h1 { margin: 0; font-size: 20px; }

.ajuda-conversa { display: grid; gap: 10px; margin: 12px 0; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.ajuda-msg { display: grid; gap: 6px; justify-items: start; }
.ajuda-msg.voce { justify-items: end; }
.ajuda-balao { max-width: min(640px, 92%); padding: 10px 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ajuda-msg.voce .ajuda-balao { background: var(--destaque-claro); border-color: var(--destaque-anel); color: var(--texto); }
.ajuda-balao.md > :first-child { margin-top: 0; }
.ajuda-balao.md > :last-child { margin-bottom: 0; }
.ajuda-pensando span { animation: ajuda-ponto 1.2s infinite; opacity: .2; }
.ajuda-pensando span:nth-child(2) { animation-delay: .2s; }
.ajuda-pensando span:nth-child(3) { animation-delay: .4s; }
@keyframes ajuda-ponto { 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ajuda-pensando span { animation: none; opacity: 1; } }
.ajuda-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ajuda-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: var(--cartao); border: 1px solid var(--borda-forte); font-size: 13px; font-weight: 500; color: var(--texto); text-decoration: none; }
.ajuda-chip:hover { border-color: var(--destaque); color: var(--destaque-escuro); }
.ajuda-chip .icone { width: 14px; height: 14px; }
.ajuda-avaliar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding-left: 4px; }
.ajuda-avaliar small { color: var(--texto-suave); }
.ajuda-avaliar .botao-icone .icone { width: 16px; height: 16px; }
.ajuda-avaliar .ajuda-nao .icone { transform: scaleY(-1); }
.ajuda-perguntar { display: flex; gap: 8px; align-items: flex-end; }
.ajuda-perguntar textarea { flex: 1; min-height: 46px; max-height: 160px; resize: vertical; padding: 11px 12px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--campo); color: var(--texto); font: inherit; font-size: 15px; }
.ajuda-perguntar textarea:focus { outline: 0; border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-anel); }
.ajuda-perguntar .botao { height: 46px; padding: 0 16px; }
.ajuda-restantes { display: block; margin-top: 6px; color: var(--texto-suave); }
.ajuda-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ajuda-sugestao { padding: 8px 12px; border: 1px dashed var(--borda-forte); border-radius: 99px; background: none; color: var(--texto-suave); font: inherit; font-size: 13.5px; cursor: pointer; }
.ajuda-sugestao:hover { border-color: var(--destaque); color: var(--destaque-escuro); }

.ajuda-artigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px 22px; }
.ajuda-categoria h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14.5px; }
.ajuda-categoria h3 .icone { width: 17px; height: 17px; color: var(--destaque); }
.ajuda-categoria ul, .ajuda-lista-simples { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ajuda-categoria a { display: grid; gap: 1px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; color: var(--texto); }
.ajuda-categoria a:hover { background: var(--superficie); }
.ajuda-categoria a strong { font-size: 14px; font-weight: 600; }
.ajuda-categoria a small { color: var(--texto-suave); font-size: 12.5px; line-height: 1.35; }
.ajuda-lista-simples a { display: block; padding: 6px 0; }

.ajuda-voltar { display: inline-flex; align-items: center; gap: 4px; justify-self: start; color: var(--texto-suave); text-decoration: none; font-size: 14px; font-weight: 500; }
.ajuda-voltar:hover { color: var(--texto); }
.ajuda-voltar .icone { width: 16px; height: 16px; }
.ajuda-artigo { padding: 24px clamp(18px, 4vw, 36px); }
.ajuda-artigo h1 { margin: 2px 0 12px; font-size: 22px; letter-spacing: -0.01em; }
.ajuda-artigo .sub { margin: 0; }
.ajuda-artigo .md { max-width: 720px; }
.ajuda-ainda { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ajuda-ainda-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.ajuda-chamados { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ajuda-chamado { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); color: var(--texto); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.ajuda-chamado:hover { border-color: var(--borda-hover); background: var(--superficie); }
.ajuda-chamado.novo { border-color: var(--destaque); box-shadow: 0 0 0 2px var(--destaque-anel); }
.ajuda-chamado > span:first-child { display: grid; gap: 2px; min-width: 0; }
.ajuda-chamado small { color: var(--texto-suave); font-size: 12.5px; }
.ajuda-ultima { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ajuda-chamado-aberto { display: grid; gap: 12px; }
.ajuda-chamado-aberto .ajuda-secao-topo { margin-bottom: 0; }
.ajuda-fio { display: grid; gap: 10px; }
.ajuda-quem { display: block; margin-bottom: 3px; color: var(--texto-suave); font-size: 12px; }
.ajuda-texto { white-space: pre-wrap; }
.ajuda-print { display: block; margin-top: 8px; }
.ajuda-print img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--borda); }
.ajuda-dica { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--azul-claro); color: var(--azul); font-size: 14px; }
.ajuda-responder { display: grid; gap: 8px; }
.ajuda-responder textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--campo); color: var(--texto); font: inherit; resize: vertical; }
.ajuda-responder textarea:focus { outline: 0; border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-anel); }
.ajuda-anexo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ajuda-anexo .espaco { flex: 1; }
.ajuda-anexo label.botao { cursor: pointer; }
.ajuda-anexo-previa { display: inline-flex; align-items: center; gap: 4px; }
.ajuda-anexo-previa img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); }

.plataforma-chamados h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plataforma-chamado { display: grid; gap: 12px; }
.plataforma-chamado .ajuda-secao-topo { margin-bottom: 0; }
.plataforma-chamado .sub { margin: 2px 0 0; }
.plataforma-chamado > .botao-whats { justify-self: start; }
.plataforma-contexto summary { cursor: pointer; font-size: 14px; color: var(--texto-suave); }
.plataforma-contexto pre { margin: 8px 0 0; padding: 10px 12px; max-height: 240px; overflow: auto; white-space: pre-wrap; border-radius: 8px; background: var(--superficie); font: inherit; font-size: 13px; }
.plataforma-chamado .ajuda-fio { max-height: 46vh; overflow-y: auto; }

@media (max-width: 640px) {
  .ajuda-chamado { flex-direction: column; align-items: flex-start; }
  .ajuda-balao { max-width: 100%; }
  .ajuda-artigos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Assessor do Secretário (base de conhecimento e funções novas) ---------- */
.assessor .abas { margin: 0; }
.assessor-parte { display: grid; gap: 14px; }
.assessor-parte[hidden] { display: none; }
.assessor-parte > .botao, .assessor-parte fieldset > .botao { justify-self: start; }
.assessor-dica { margin: 0; font-size: 13px; color: var(--texto-suave); line-height: 1.45; }
.assessor-parte fieldset.campo { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.assessor-parte fieldset.campo legend { padding: 0; margin-bottom: 6px; font-size: 13.5px; font-weight: 500; }
.tabela-rolar { overflow-x: auto; }
.assessor-precos input[type="text"], .assessor-precos input:not([type]) {
  width: 100%; min-width: 110px; font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--borda-forte); border-radius: 7px; background: var(--campo); color: var(--texto);
}
.assessor-precos td { padding: 6px; }
.assessor-precos tbody tr { cursor: default; }
.assessor-precos tbody tr:hover { background: transparent; }
.assessor-precos .centro, .assessor-precos th:nth-child(4) { text-align: center; }
.assessor-precos input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--destaque); }
.assessor-contatos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.assessor-contato { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.assessor-contato input { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--borda-forte); border-radius: 7px; background: var(--campo); color: var(--texto); min-width: 0; }
@media (max-width: 640px) {
  .assessor-contato { grid-template-columns: 1fr auto; }
  .assessor-contato input[name="n_telefone"] { grid-column: 1; }
}

/* ---------- Assessor na tela do Secretário: filtros, selos, ficha, pendências e resgate ---------- */
.filtros select { font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--campo); color: var(--texto); }
.filtros-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.chip { font: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--borda-forte); background: var(--cartao); color: var(--texto-suave); cursor: pointer; }
.chip:hover { border-color: var(--destaque); color: var(--texto); }
.chip.ativo { background: var(--destaque-claro); border-color: var(--destaque); color: var(--destaque-escuro); }
.chip span { font-weight: 400; }
.selo-etapa { background: var(--azul-claro); color: var(--azul); }
.selo-etapa.aguardando_avaliacao, .selo-etapa.aguardando_sinal { background: var(--amarelo-claro); color: var(--amarelo); }
.selo-etapa.agendado, .selo-etapa.tatuado, .selo-etapa.pos_venda { background: var(--verde-claro); color: var(--verde); }
.selo-etapa.perdido, .selo-etapa.nao_contatar { background: var(--cinza-claro); color: var(--texto-suave); }
.selo-temperatura.quente { background: var(--vermelho-claro); color: var(--vermelho); }
.selo-temperatura.morno { background: var(--amarelo-claro); color: var(--amarelo); }
.selo-temperatura.frio { background: var(--azul-claro); color: var(--azul); }
.selo-conversa { background: var(--cinza-claro); color: var(--texto-suave); display: inline-flex; align-items: center; gap: 4px; }
.selo-conversa .icone { width: 13px; height: 13px; }
.selo-conversa.pausada { background: var(--amarelo-claro); color: var(--amarelo); }
.selo-pendencia { background: var(--amarelo-claro); color: var(--amarelo); display: inline-flex; align-items: center; gap: 3px; }
.selo-pendencia .icone { width: 12px; height: 12px; }
.lead-assunto .selo { margin: 0 2px 4px 0; }
.lead-assessor { display: grid; gap: 10px; margin: 4px 0 14px; }
.lead-situacao { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lead-proximo { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--superficie); font-size: 14px; }
.lead-proximo .icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--destaque); }
.lead-conversa-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.pendencias-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pendencia { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--borda); border-left: 4px solid var(--amarelo); background: var(--cartao); }
.pendencia.pagamento { border-left-color: var(--verde); }
.pendencia.reclamacao, .pendencia.cicatrizacao, .pendencia.menor { border-left-color: var(--vermelho); }
.pendencia div:first-child { display: grid; gap: 2px; min-width: 0; }
.pendencia strong { font-size: 14px; }
.pendencia span { font-size: 12.5px; color: var(--texto-suave); }
.pendencia p { margin: 4px 0 0; font-size: 13.5px; }
.pendencia-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pendencias-lista.compacta .pendencia { padding: 8px 10px; }
.lead-projeto summary, .lead-midias summary, .lead-linha-tempo summary, .resgate-lista summary { cursor: pointer; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.midias-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.midias-grade figure { margin: 0; display: grid; gap: 4px; }
.midias-grade img, .midias-grade video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--superficie); }
.midias-grade audio { width: 100%; }
.midias-grade figcaption { font-size: 11.5px; color: var(--texto-suave); }
.lead-linha-tempo ol, .registro { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.lead-linha-tempo li, .registro li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.lead-linha-tempo time, .registro time { color: var(--texto-suave); font-size: 12px; padding-top: 1px; }
.lead-linha-tempo li.tatuador span { color: var(--destaque-escuro); }
.registro li.acao strong { font-weight: 600; }
.resgate-relatorio { margin: 16px 0; padding: 14px 16px; border-radius: 10px; background: var(--superficie); }
.resgate-relatorio h3 { margin: 0 0 8px; font-size: 16px; }
.resgate-relatorio h4 { margin: 12px 0 6px; font-size: 14px; }
.resgate-exemplos, .resgate-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.resgate-exemplos p, .resgate-lista p { margin: 3px 0 0; color: var(--texto-suave); }
.resgate-lista { margin-top: 14px; }
@media (max-width: 640px) {
  .pendencia { flex-direction: column; }
  .lead-linha-tempo li, .registro li { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Minha conta: uso do mês e preço de fundador ---------- */
.conta-uso { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.conta-uso li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.conta-uso .uso-barra { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--cinza-claro); overflow: hidden; }
.conta-uso .uso-barra span { display: block; height: 100%; border-radius: 99px; }
.conta-uso .uso-barra .verde { background: var(--verde); }
.conta-uso .uso-barra .amarelo { background: var(--amarelo); }
.conta-uso .uso-barra .vermelho { background: var(--vermelho); }
.conta-fundador { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--verde-claro); color: var(--verde); font-size: 14px; }
.conta-fundador .icone { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.conta-preco s { font-size: 13px; color: var(--texto-suave); font-weight: 400; }

/* ---------- Página de vendas (/planos) ---------- */
.tela-vendas { background: var(--fundo); }
.vendas-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1040px; margin: 0 auto; padding: 16px; }
.vendas-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; font-weight: 650; font-size: 16px; }
.vendas-marca img { width: 32px; height: 32px; border-radius: 9px; }
main.vendas { max-width: 1040px; padding: 0 16px 48px; }
.vendas-hero { text-align: center; padding: 40px 0 24px; }
.vendas-chamada { margin: 0 0 12px; color: var(--destaque); font-weight: 600; font-size: 14px; }
.vendas-hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spacing: -.02em; max-width: 780px; margin: 0 auto; text-wrap: balance; }
.vendas-sub { max-width: 680px; margin: 18px auto 0; color: var(--texto-suave); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.vendas-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.botao-grande { padding: 12px 20px; font-size: 15.5px; border-radius: 10px; }
.vendas-miudo { margin: 12px 0 0; color: var(--texto-suave); font-size: 13.5px; }
.vendas-fundador { display: inline-block; margin: 22px auto 0; padding: 10px 14px; border-radius: 10px; background: var(--verde-claro); color: var(--verde-texto); font-size: 14px; max-width: 560px; }
.vendas-video { margin: 8px auto 0; max-width: 820px; }
.vendas-video-quadro { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); }
.vendas-video-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vendas-bloco { padding: 48px 0 0; }
.vendas-bloco > h2 { text-align: center; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.015em; margin-bottom: 8px; }
.vendas-centro { text-align: center; }
.vendas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; }
.vendas-item h3, .vendas-plano h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: normal; text-transform: none; color: var(--texto); }
.vendas-item p { margin: 0; color: var(--texto-suave); font-size: 14.5px; line-height: 1.5; }
.vendas-ciclo { display: flex; justify-content: center; margin: 18px 0 4px; }
.vendas-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 760px; margin: 18px auto 18px; align-items: start; }
.vendas-plano { position: relative; display: grid; gap: 10px; padding: 24px; }
.vendas-plano.destaque { border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-anel); }
.vendas-plano h3 { margin: 0; font-size: 18px; }
.vendas-selo { justify-self: start; padding: 3px 9px; border-radius: 99px; background: var(--destaque-claro); color: var(--destaque-escuro); font-size: 12px; font-weight: 600; }
.vendas-preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; }
.vendas-preco strong { font-size: 34px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vendas-preco span { color: var(--texto-suave); font-size: 14px; }
.vendas-preco s { color: var(--texto-suave); font-size: 15px; }
.vendas-por-mes { margin: -6px 0 0; color: var(--verde); font-size: 13.5px; font-weight: 500; }
.vendas-plano > .sub { margin: 0; }
.vendas-inclui { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.vendas-inclui li { display: flex; gap: 8px; align-items: flex-start; }
.vendas-inclui .icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--verde); }
.vendas-plano .botao { width: 100%; }
.vendas-passos { max-width: 640px; margin: 20px auto 24px; padding-left: 22px; display: grid; gap: 12px; font-size: 15.5px; line-height: 1.5; }
.vendas-passos li::marker { color: var(--destaque); font-weight: 700; }
.vendas-perguntas { max-width: 720px; margin: 20px auto 0; display: grid; gap: 8px; }
.vendas-perguntas details { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 0 16px; }
.vendas-perguntas summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 15px; }
.vendas-perguntas details p { margin: 0 0 14px; color: var(--texto-suave); line-height: 1.55; }
.vendas-final { padding-bottom: 8px; }
.vendas-final .sub { max-width: 600px; margin: 0 auto; font-size: 15.5px; line-height: 1.55; }
.vendas-rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 24px 16px 40px; border-top: 1px solid var(--borda); font-size: 14px; }
.vendas-rodape a { color: var(--texto-suave); }
@media (max-width: 560px) {
  .vendas-hero { padding-top: 20px; }
  .vendas-sub { font-size: 16px; }
  .vendas-acoes .botao { width: 100%; }
  .vendas-plano { padding: 20px; }
}

/* Minha conta: lembrete para confirmar o e-mail */
.conta-email { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; border-color: var(--destaque-anel); background: var(--destaque-claro); }
.conta-email p { display: flex; gap: 8px; align-items: flex-start; margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; }
.conta-email .icone { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--destaque); }