/* Visual comum das telas do bot (painel, simulador). Cinza-gelo e carvão; a cor de destaque só onde pede ação. A cor de destaque aqui é a neutra:
   cada instalação troca --accent e --accent-soft pelas cores da sua marca (config marca.cores, via src/marca.js). */
:root {
  --bg: #EDF1F3; --surface: #FFFFFF; --surface-2: #E2E8EB; --fg: #1E2326; --fg-soft: #56626A;
  --line: #CBD4D9; --accent: #2F6F7E; --accent-soft: #DCECEF; --bolha-bot: #DDEFD9; --bolha-lead: #FFFFFF;
  --ok: #2F7D4F; --ok-soft: #DDEFD9; --aviso: #A3560A; --aviso-soft: #FBEBD3; --ruim: #A33A2A; --ruim-soft: #F8DDD8;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181A; --surface: #1D2326; --surface-2: #283034; --fg: #E8EDEF; --fg-soft: #9AA7AE; --line: #364146;
    --accent: #7FC1CE; --accent-soft: #1E3338; --bolha-bot: #1F3A2A; --bolha-lead: #283034; --ok: #6CC28D; --ok-soft: #1F3A2A;
    --aviso: #E8A55A; --aviso-soft: #3A2D16; --ruim: #E58A7A; --ruim-soft: #3E2420; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--texto); font-size: 16px; line-height: 1.5; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.15rem; }
p { margin: 0; }
.topo { background: var(--surface); border-bottom: 1px solid var(--line); }
.topo nav { max-width: 96rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: center; padding: 0.7rem max(16px, env(safe-area-inset-left, 0px)); }
.topo strong { font-family: var(--display); margin-right: auto; }
.topo .marca-logo { display: block; height: 1.7rem; width: auto; max-width: 12rem; }
.topo a { color: var(--fg-soft); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
@media (max-width: 640px) { .topo a.sec { display: none; } } /* ferramentas de teste (simulador e captura) não cabem na barra do celular */
.topo a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.pagina { max-width: 96rem; margin: 0 auto; padding: 1.5rem max(16px, env(safe-area-inset-right, 0px)) 3rem max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 1.25rem; }
.soft { color: var(--fg-soft); }
.mono { font-family: var(--mono); font-size: 0.82rem; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 0.45rem 0.85rem; font-weight: 500; }
.btn:hover { border-color: var(--fg-soft); }
a.btn { display: inline-block; color: var(--fg); text-decoration: none; }
.btn.primario { background: var(--accent); border-color: var(--accent); color: #fff; }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 0.45rem 0.65rem; min-width: 0; width: 100%; }
.selo { display: inline-block; font-family: var(--mono); font-size: 0.74rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--surface-2); color: var(--fg-soft); white-space: nowrap; }
.selo.ok { background: var(--ok-soft); color: var(--ok); }
.selo.aviso { background: var(--aviso-soft); color: var(--aviso); }
.selo.ruim { background: var(--ruim-soft); color: var(--ruim); }
.selo.raio { background: var(--accent); color: #fff; }
/* Etiqueta de lead: bolinha da cor e nome. A cor só tinge o fundo; o texto usa a cor do tema (lê bem no claro e no escuro). */
.etq { --c: #6B7B86; display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; min-width: 0; font-size: 0.78rem; line-height: 1.35; padding: 0.05rem 0.55rem 0.05rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 48%, var(--surface)); color: var(--fg); }
.etq::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c); flex: none; }
.etq > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lista do WhatsApp (menu de opções no formato lista, desenhado por MenuOpcoes.htmlDaLista no construtor e no simulador):
   o balão com o texto e o botão com ícone de lista; a folha com as opções e a bolinha de seleção. */
.wa-lista { display: flex; flex-direction: column; gap: 0.35rem; white-space: normal; }
.wa-lista-titulo { font-weight: 600; }
.wa-lista-corpo { white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-lista-botao { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 40px; margin: 0.15rem -0.75rem -0.5rem; padding: 0.45rem 0.75rem; border: 0; border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); background: none; color: var(--accent); font-weight: 600; border-radius: 0 0 10px 10px; }
.wa-lista-botao:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.wa-icone { flex: none; }
.wa-folha { flex: none; align-self: flex-end; width: min(22rem, 92%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.wa-folha[hidden] { display: none; }
.wa-folha-topo { text-align: center; font-weight: 600; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.wa-folha-opcoes { list-style: none; margin: 0; padding: 0; }
.wa-folha-opcoes li + li { border-top: 1px solid var(--line); }
.wa-opcao { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 44px; padding: 0.55rem 0.9rem; border: 0; background: none; text-align: left; overflow-wrap: anywhere; }
.wa-opcao:hover { background: var(--surface-2); }
.wa-radio { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--fg-soft); }
.wa-opcao[aria-pressed="true"] .wa-radio { border-color: var(--ok); background: radial-gradient(circle, var(--ok) 0 45%, transparent 50%); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }