/* SOS Perfil — visual 2026.2 "instrumento de campo": feito para vender na rua, sob sol, com uma mão.
   Identidade fixa da SOS: roxo #510037 (moldura e seleção) e amarelo-ouro #FFB800 (só a ação principal); laranja #F58220 de destaque.
   Tipografia única Atkinson Hyperlegible Next (desenhada para leitura difícil), corpo de 17 px e pesos firmes; números tabulares
   como na leitura de um medidor. O white-label do parceiro Master sobrescreve as variáveis --cor-* (/api/eu → css).
   Ícones: Lucide (ISC), em /assets/icones.svg. */
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/assets/fontes/AtkinsonHyperlegibleNext.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
:root {
  --cor-primaria: #510037; --cor-secundaria: #FFB800; --cor-destaque: #F58220; --texto-sobre-primaria: #FFFFFF;
  /* tons com contraste garantido (o servidor recalcula para a cor de cada Master: Branding::css) */
  --cor-primaria-texto: #510037; --texto-sobre-secundaria: #510037; --texto-sobre-destaque: #1A1A1A; --cor-destaque-texto: #AC5B16;
  /* papel quente, superfícies brancas e linhas visíveis ao sol; o texto de apoio é escuro (nada de cinza fraco) */
  --fundo: #F2EEF1; --superficie: #FFFFFF; --superficie-2: #F2ECEF; --texto: #1C1019; --sub: #4D3C47; --linha: #D9CCD3; --linha-forte: #B9A7B2;
  --ok: #17663B; --ok-fundo: #E3F2E8; --perigo: #A8231B; --perigo-fundo: #FBE7E4; --atencao: #7A4A00; --atencao-fundo: #FFF0CF;
  --raio: 12px; --raio-g: 16px; --altura-menu: 128px; /* do pé da tela ao topo do botão "+" */
  /* escala fixa (razão ~1,15): rótulos 13–14, apoio 15, corpo 17, títulos 19–30 */
  --t-xs: 13px; --t-sm: 14px; --t-md: 15px; --t-base: 17px; --t-lg: 19px; --t-xl: 22px; --t-2xl: 26px; --t-3xl: 30px;
  /* tons derivados da cor principal: valem para a SOS e para a marca de cada parceiro Master */
  --primaria-tenue: color-mix(in srgb, var(--cor-primaria) 5%, #fff);
  --primaria-suave: color-mix(in srgb, var(--cor-primaria) 10%, #fff);
  --primaria-borda: color-mix(in srgb, var(--cor-primaria) 38%, #fff);
  --primaria-anel: color-mix(in srgb, var(--cor-primaria) 18%, transparent);
  --primaria-escura: color-mix(in srgb, var(--cor-primaria) 82%, #000);
  --neutro-suave: #ECE4E9; --tinta: #24121E;
  --sombra: 0 1px 2px rgb(36 18 30 / .07), 0 2px 8px rgb(36 18 30 / .05);
  --sombra-media: 0 2px 4px rgb(36 18 30 / .08), 0 10px 24px rgb(36 18 30 / .10);
  --sombra-forte: 0 8px 24px color-mix(in srgb, var(--cor-primaria) 24%, transparent);
  --ease: cubic-bezier(.16, 1, .3, 1);
  accent-color: var(--cor-primaria); caret-color: var(--cor-primaria);
  scrollbar-color: color-mix(in srgb, var(--cor-primaria) 35%, #fff) transparent;
  font-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 450;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* classes com display (grid/flex) não podem vencer o atributo hidden */
::selection { background: color-mix(in srgb, var(--cor-secundaria) 60%, #fff); color: var(--texto); }
html { -webkit-tap-highlight-color: transparent; text-size-adjust: 100%; }
a { color: var(--cor-primaria-texto); text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 650; }
a:hover { text-decoration-thickness: 2px; }
::placeholder { color: #6A5A64; opacity: 1; }
table, .atalho b, .parcelas-lista, .chip, .situacao, .dias, .limites-usinas, .leitura dd { font-variant-numeric: tabular-nums; }
h1, h2, h3, legend, .titulo-tela { text-wrap: balance; } p, .nota, li { text-wrap: pretty; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-size: var(--t-base); line-height: 1.5; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--altura-menu) + 28px + env(safe-area-inset-bottom, 0px)); }
body:has(#menu[hidden]) { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
b, strong { font-weight: 750; }
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }

/* ---------------- topo ---------------- */
.topo { background: var(--cor-primaria); color: var(--texto-sobre-primaria); padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 0 0 var(--raio-g) var(--raio-g); }
.marca-topo { display: flex; align-items: center; gap: 10px; font-size: var(--t-lg); font-weight: 750; letter-spacing: -.015em; min-width: 0; }
.pagina-publica .topo strong { font-size: var(--t-lg); letter-spacing: -.015em; }
.marca-topo strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cor-secundaria); color: var(--texto-sobre-secundaria); }
.selo .ic { width: 20px; height: 20px; }
.selo.grande { width: 64px; height: 64px; border-radius: 20px; box-shadow: var(--sombra-forte); }
.selo.grande .ic { width: 34px; height: 34px; }
.topo .sub { color: inherit; font-size: var(--t-sm); }
.usuario-chip:not(:empty) { background: rgb(255 255 255 / .14); padding: 6px 12px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%; flex: none; }
.faixa-offline { background: var(--tinta); color: #fff; padding: 10px 16px; font-size: var(--t-md); display: flex; gap: 8px; align-items: center; }

/* ---------------- estrutura ---------------- */
.conteudo { max-width: 720px; margin: 0 auto; padding: 18px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tela, .aba { min-width: 0; display: grid; gap: 14px; align-content: start; }
.tela > *, .aba > *, .lista > *, .formulario > * { min-width: 0; } /* tabela larga rola dentro da própria caixa, nunca a página */
.tabela { max-width: 100%; }
h1 { font-size: var(--t-2xl); line-height: 1.2; margin: 2px 0; letter-spacing: -.025em; font-weight: 800; }
h2 { font-size: var(--t-lg); line-height: 1.3; margin: 12px 0 -4px; letter-spacing: -.015em; font-weight: 750; }
h3 { font-size: var(--t-base); line-height: 1.35; margin: 4px 0 -4px; }
.cartao h2, .cartao h3, fieldset h2 { margin: 0; }
.titulo-tela { display: flex; align-items: center; gap: 12px; }
.titulo-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--superficie-2); color: var(--cor-primaria-texto); }
.titulo-icone .ic { width: 22px; height: 22px; }
.nota { font-size: var(--t-sm); color: var(--sub); margin: 0; line-height: 1.45; } .passos { padding-left: 20px; margin: 0; display: grid; gap: 4px; }

/* ---------------- login ---------------- */
.boas-vindas { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px 0 6px; }
.cartao-form { background: var(--superficie); border-radius: var(--raio-g); padding: 18px; box-shadow: var(--sombra); }

/* ---------------- formulários ---------------- */
.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--sub); }
.campo input, .campo select, .campo textarea { font: inherit; font-size: var(--t-base); font-weight: 400; color: var(--texto); padding: 12px 14px; border: 1.5px solid var(--linha);
  border-radius: var(--raio); background: var(--superficie); transition: border-color .15s, box-shadow .15s; width: 100%; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--primaria-borda); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 4px var(--primaria-anel); }
.campo input:disabled, .campo select:disabled { background: var(--superficie-2); color: var(--sub); cursor: not-allowed; }
.campo input:user-invalid { border-color: var(--perigo); }
.campo input[type=file] { padding: 10px; background: var(--superficie-2); border-style: dashed; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-md); }
.check input { width: 20px; height: 20px; accent-color: var(--cor-primaria); margin-top: 2px; }
.docs, fieldset { border: 1.5px solid var(--linha); border-radius: var(--raio-g); display: grid; gap: 10px; padding: 12px 14px 14px; background: var(--superficie); margin: 0; }
legend { font-size: var(--t-sm); font-weight: 750; color: var(--cor-primaria-texto); padding: 0 6px; }
.dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.formulario, .cartao, .campo, .dupla > * { min-width: 0; }

/* ---------------- botões ---------------- */
button, .botao-principal { font: inherit; cursor: pointer; }
.botao-principal, .botao-secundario, .botao-perigo, .botao-naoha { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  min-height: 44px; transition: transform .1s ease-out, box-shadow .15s ease-out, background-color .15s ease-out, filter .15s ease-out; }
.botao-principal { background: var(--cor-secundaria); color: var(--texto-sobre-secundaria); font-weight: 800; border: 0; border-radius: var(--raio); padding: 12px 18px;
  box-shadow: 0 1px 2px rgb(36 20 31 / .12), 0 3px 8px color-mix(in srgb, var(--cor-secundaria) 35%, transparent); }
.botao-principal:hover { filter: brightness(1.04) saturate(1.05); box-shadow: 0 2px 4px rgb(36 20 31 / .14), 0 6px 14px color-mix(in srgb, var(--cor-secundaria) 40%, transparent); }
.botao-principal:active, .botao-secundario:active, .botao-perigo:active, .botao-naoha:active { transform: translateY(1px); }
.botao-principal:disabled, .botao-secundario:disabled, .botao-perigo:disabled { opacity: .55; cursor: wait; transform: none; filter: none; }
.botao-secundario { background: var(--superficie); color: var(--cor-primaria-texto); border: 1.5px solid var(--cor-primaria); border-radius: var(--raio); padding: 10px 14px; font-weight: 700; font-size: var(--t-md); }
.botao-secundario:hover { background: var(--primaria-tenue); }
:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.cta-venda { width: 100%; justify-content: flex-start; text-align: left; gap: 14px; padding: 16px; border-radius: var(--raio-g); box-shadow: var(--sombra-forte); }
.cta-venda b { display: block; font-size: var(--t-lg); letter-spacing: -.01em; } .cta-venda small { display: block; font-weight: 500; font-size: var(--t-sm); opacity: .85; }
.cta-venda .seta { margin-left: auto; }
.cta-icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--cor-primaria); color: var(--cor-secundaria); flex: none; }
.cta-icone .ic { width: 26px; height: 26px; }

/* ---------------- avisos ---------------- */
.alerta { background: var(--cor-destaque); color: #1A1A1A; padding: 12px 14px; border-radius: var(--raio); font-weight: 700; box-shadow: var(--sombra); }
.alerta-botao { border: 0; text-align: left; font: inherit; font-weight: 700; cursor: pointer; width: 100%; }
.aviso { background: var(--atencao-fundo); color: #4A3000; padding: 10px 14px; border-radius: var(--raio); margin: 0; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); bottom: calc(var(--altura-menu) + 10px + env(safe-area-inset-bottom, 0px));
  background: var(--tinta); color: #fff; font-size: var(--t-md); line-height: 1.45;
  padding: 14px 16px; border-radius: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .25); z-index: 20; }
@media (prefers-reduced-motion: no-preference) { .toast:not([hidden]) { animation: aviso-entra .2s cubic-bezier(.16, 1, .3, 1); }
  @keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 8px); } } }

/* ---------------- início ---------------- */
.grade-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.atalho { background: var(--superficie); border: 0; border-radius: var(--raio-g); padding: 14px; text-align: left; display: grid; gap: 4px; align-content: start;
  box-shadow: var(--sombra); color: var(--texto); transition: box-shadow .15s ease-out, transform .1s ease-out; }
button.atalho:hover { box-shadow: 0 2px 4px rgb(36 20 31 / .08), 0 8px 20px rgb(36 20 31 / .09); } button.atalho:active { transform: translateY(1px); }
.atalho b { font-size: var(--t-xl); color: var(--cor-primaria-texto); letter-spacing: -.02em; overflow-wrap: anywhere; }
.atalho span:last-child { font-size: var(--t-sm); color: var(--sub); line-height: 1.3; }
.atalho-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 6px; }
.atalho-icone .ic { width: 22px; height: 22px; }
.atalho-icone.roxo { background: var(--primaria-suave); color: var(--cor-primaria-texto); } .atalho-icone.verde { background: var(--ok-fundo); color: var(--ok); }
.atalho-icone.laranja { background: #FDEBDC; color: #B5560C; } .atalho-icone.ouro { background: #FFF4D1; color: #8A6100; }
.atalho-icone.cinza { background: var(--neutro-suave); color: var(--sub); }

/* ---------------- venda ---------------- */
.etapas { display: flex; gap: 6px; list-style: none; padding: 4px; margin: 0; background: var(--superficie); border-radius: 999px; box-shadow: var(--sombra); }
.etapas li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border-radius: 999px; color: var(--sub); font-size: var(--t-sm); font-weight: 600;
  transition: background-color .2s ease-out, color .2s ease-out; }
.etapas li .ic { width: 16px; height: 16px; }
.etapas li.ativa { background: var(--cor-primaria); color: var(--texto-sobre-primaria); }
.dropzone { display: grid; place-items: center; min-height: 170px; border: 2px dashed var(--primaria-borda); border-radius: var(--raio-g);
  background: var(--superficie); text-align: center; padding: 18px; gap: 6px; cursor: pointer; }
.dropzone small { color: var(--sub); }
.dropzone-icone { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--primaria-suave); color: var(--cor-primaria-texto); }
.dropzone-icone .ic { width: 30px; height: 30px; }
.dropzone input { max-width: 100%; font-size: var(--t-sm); }
.servicos { grid-template-columns: 1fr 1fr; }
.status-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: var(--t-md); }
.status-lista li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.status-lista li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--linha); transform: translateY(-1px); }
.status-lista .ok::before { background: var(--ok); } .status-lista .esperando::before { background: var(--cor-secundaria); }
.status-lista .alerta-doc { color: var(--perigo); } .status-lista .alerta-doc::before { background: var(--perigo); }
.lista-docs-item { display: grid; gap: 2px; }

/* ---------------- listas e cartões ---------------- */
.lista { display: grid; gap: 12px; }
.cartao { background: var(--superficie); border: 0; border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); }
.cartao.perigo { background: color-mix(in srgb, var(--perigo-fundo) 55%, #fff); }
.cartao .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.situacao { display: inline-block; font-size: var(--t-xs); font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--atencao-fundo); color: var(--atencao); margin-left: 4px; vertical-align: 1px; }
.situacao.ENVIADO, .cartao.ok .situacao { background: var(--ok-fundo); color: var(--ok); }
.situacao.ERRO_VALIDACAO, .situacao.EXPIRADO, .cartao.perigo .situacao { background: var(--perigo-fundo); color: var(--perigo); }
.pendencias { margin: 8px 0 0; padding-left: 18px; color: var(--perigo); font-size: var(--t-md); }
.reenvio { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 12px; }
.badge { background: var(--cor-destaque); color: #1A1A1A; border-radius: 999px; padding: 0 6px; font-size: var(--t-xs); font-weight: 800; position: absolute; top: 2px; right: 10px; }

/* ---------------- painel ---------------- */
.abas { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.abas button { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--superficie); border: 0; border-radius: 999px; padding: 9px 14px;
  color: var(--texto); font-size: var(--t-md); font-weight: 600; box-shadow: var(--sombra); transition: background-color .15s ease-out; }
.abas button:not(.ativa):hover { background: var(--primaria-tenue); }
.abas button .ic { width: 16px; height: 16px; color: var(--cor-primaria-texto); }
.abas button.ativa { background: var(--cor-primaria); color: var(--texto-sobre-primaria); }
.abas button.ativa .ic { color: var(--cor-secundaria); }
.opcoes { display: grid; gap: 8px; }
.opcao { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--linha); border-radius: var(--raio); padding: 12px; background: var(--superficie); cursor: pointer; }
.opcao:hover { border-color: var(--primaria-borda); }
.opcao:has(input:checked) { border-color: var(--cor-primaria); background: var(--primaria-tenue); }
.opcao:focus-within { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.opcao input { accent-color: var(--cor-primaria); margin-top: 4px; }
.opcao small { display: block; color: var(--sub); }
.copiavel { width: 100%; font: 12px/1.4 ui-monospace, monospace; padding: 10px; border: 1.5px solid var(--linha); border-radius: var(--raio); word-break: break-all; background: var(--superficie-2); }
.qr-pix { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: var(--raio); box-shadow: var(--sombra); }
.niveis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.niveis .campo { min-width: 0; font-size: var(--t-xs); }
.niveis .campo input { width: 100%; min-width: 0; padding: 10px 6px; }
details summary { cursor: pointer; font-weight: 700; color: var(--cor-primaria-texto); padding: 8px 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-md); } th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--linha); }
.tabela { overflow-x: auto; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra); }
.tabela-simples { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela-simples th { font-size: var(--t-xs); color: var(--sub); font-weight: 700; background: var(--superficie-2); white-space: nowrap; }
.tabela-simples tbody tr:hover td { background: var(--primaria-tenue); }
.tabela-simples th, .tabela-simples td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--linha); }
.tabela-simples td.n, .tabela-simples th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- desempenho ---------------- */
.grafico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 170px; padding: 12px 10px 6px;
  background: var(--superficie); border-radius: 14px 14px 0 0; box-shadow: var(--sombra); clip-path: inset(-20px -20px 0 -20px); }

.grafico .barra { background: var(--cor-primaria); border-radius: 5px 5px 2px 2px; min-height: 3px; position: relative; }
.grafico .barra.fechadas { background: var(--cor-secundaria); }
.grafico-rotulos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; font-size: var(--t-xs); overflow: hidden; color: var(--sub); text-align: center;
  background: var(--superficie); padding: 6px 10px 10px; border-radius: 0 0 14px 14px; margin-top: -14px; box-shadow: var(--sombra); clip-path: inset(0 -20px -20px -20px); }
.legenda { display: flex; gap: 14px; font-size: var(--t-sm); color: var(--sub); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; background: var(--cor-primaria); }
.legenda i.fechadas { background: var(--cor-secundaria); }

/* ---------------- navegação inferior ---------------- */
.menu-inferior { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--superficie); border-radius: 22px;
  display: flex; justify-content: space-around; align-items: center; padding: 6px; box-shadow: 0 8px 30px rgb(36 20 31 / .16); z-index: 10; max-width: 700px; margin: 0 auto; }
.menu-inferior button { position: relative; background: none; border: 0; padding: 6px 4px; color: var(--sub); font-size: var(--t-xs); font-weight: 600;
  transition: background-color .15s ease-out, color .15s ease-out;
  display: grid; justify-items: center; gap: 2px; border-radius: 14px; min-width: 0; flex: 1 1 0; max-width: 92px; }
.menu-inferior button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-inferior button .ic { width: 22px; height: 22px; }
.menu-inferior button.ativo { color: var(--cor-primaria-texto); background: var(--primaria-suave); }
.menu-inferior button:not(.flutuante):not(.ativo):hover { color: var(--texto); }
.menu-inferior .flutuante { background: var(--cor-secundaria); color: var(--texto-sobre-secundaria); width: 58px; height: 58px; min-width: 0; flex: 0 0 58px; border-radius: 20px;
  place-items: center; margin-top: -30px; box-shadow: var(--sombra-forte); }
.menu-inferior .flutuante .ic { width: 28px; height: 28px; stroke-width: 2.5; }

.pagina-publica { padding-bottom: 24px; }
@media (min-width: 760px) { .conteudo { padding-top: 28px; } h1 { font-size: var(--t-3xl); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }
@media (prefers-reduced-motion: no-preference) { .tela { animation: entrar .2s ease-out; } @keyframes entrar { from { opacity: 0; transform: translateY(4px) } } }
.menu-inferior .flutuante.ativo { background: var(--cor-secundaria); color: var(--texto-sobre-secundaria); }
.conteudo:has(> #tela-admin:not([hidden])) { max-width: 1100px; } /* painel administrativo aproveita tablet e computador */

/* ---------------- app do vendedor: venda, conferência, contrato e pendências ---------------- */
.logo-login { width: 120px; height: auto; margin-bottom: 4px; }
.oculto { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
label:has(> .oculto) { position: relative; } /* o campo escondido fica preso ao botão e não alarga a página */
.botoes-captura { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.botoes-captura > label { flex: 1 1 170px; cursor: pointer; position: relative; }
.botoes-captura > label:focus-within { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.servicos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.servico-opcao { display: flex; align-items: center; gap: 12px; padding: 16px; border: 2px solid var(--linha); border-radius: var(--raio-g); cursor: pointer;
  background: var(--superficie); min-height: 84px; transition: border-color .15s, background .15s; }
.servico-opcao input { width: 28px; height: 28px; accent-color: var(--cor-primaria); flex: none; margin: 0; }
.servico-opcao b { display: block; font-size: var(--t-base); color: var(--texto); } .servico-opcao small { color: var(--sub); font-size: var(--t-sm); }
.servico-opcao:hover { border-color: var(--primaria-borda); }
.servico-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primaria-suave); color: var(--cor-primaria-texto); flex: none;
  transition: background-color .15s ease-out, color .15s ease-out; }
.servico-icone .ic { width: 24px; height: 24px; }
.servico-opcao:has(input:checked) { border-color: var(--cor-primaria); background: var(--primaria-tenue); }
.servico-opcao:has(input:checked) .servico-icone { background: var(--cor-primaria); color: var(--cor-secundaria); }
.servico-opcao:focus-within { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.contato { border-color: var(--primaria-borda); background: var(--primaria-tenue); }
.contato legend, .docs legend { display: flex; align-items: center; gap: 6px; }
.tipo-manual summary { font-size: var(--t-sm); font-weight: 600; color: var(--sub); }
.lista-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista-docs .doc { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: var(--superficie-2); border: 1px solid transparent; }
.lista-docs .doc.ok .nota { color: var(--ok); } .lista-docs .doc.erro { border-color: color-mix(in srgb, var(--perigo) 35%, #fff); background: var(--perigo-fundo); }
.lista-docs .doc.erro .nota { color: var(--perigo); }
.miniatura { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; background: #fff; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 800; color: var(--sub);
  box-shadow: inset 0 0 0 1px var(--linha); }
.miniatura .ic { width: 22px; height: 22px; color: color-mix(in srgb, var(--sub) 70%, #fff); }
.doc-texto { display: grid; min-width: 0; flex: 1; } .doc-texto .nota { overflow-wrap: anywhere; }
.conferencia { display: grid; gap: 14px; }
.servicos-escolhidos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.etiqueta { background: var(--cor-primaria); color: var(--texto-sobre-primaria); font-size: var(--t-sm); font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.campo.conferir > span:first-child { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.campo.conferir.ia input, .campo.conferir.ia select { border-color: var(--primaria-borda); background: var(--primaria-tenue); }
.fonte-ia { font-size: var(--t-xs); font-weight: 700; color: var(--cor-primaria-texto); background: var(--primaria-suave); padding: 1px 8px; border-radius: 999px; }
.acoes-fixas { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; position: sticky; bottom: calc(var(--altura-menu) + 6px + env(safe-area-inset-bottom, 0px));
  background: var(--fundo); padding: 10px 0; z-index: 5; box-shadow: 0 -10px 14px -10px rgb(36 20 31 / .18); }
@media (max-width: 380px) { .acoes-fixas { grid-template-columns: 1fr; } }
.acoes-contrato { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.botao-secundario.whatsapp { border-color: #1E8E4E; color: #146C3A; }
.painel-pendencias { background: var(--perigo-fundo); border: 1.5px solid var(--perigo); border-radius: var(--raio-g); overflow: hidden; }
.painel-pendencias .cabeca { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--perigo); color: #fff;
  border: 0; padding: 12px 14px; font: inherit; cursor: pointer; text-align: left; }
.painel-pendencias .cabeca span { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.painel-pendencias ul { list-style: none; margin: 0; padding: 4px 14px 12px; display: grid; }
.painel-pendencias li { padding: 8px 0; border-bottom: 1px solid #F3C7C2; color: #5C1410; font-size: var(--t-md); display: grid; }
.painel-pendencias li:last-child { border-bottom: 0; }
.painel-pendencias li span { color: var(--perigo); font-size: var(--t-sm); }
.cartao.pendencia { background: color-mix(in srgb, var(--perigo-fundo) 70%, #fff); }
.justificativa { margin-top: 10px; padding: 10px 12px; background: #fff; border: 1px solid #F3C7C2; border-radius: 10px; color: #5C1410; }
.justificativa > b { color: var(--perigo); font-size: var(--t-sm); }
.justificativa p { margin: 4px 0 0; font-size: var(--t-md); }
.link-cadastro { display: grid; gap: 10px; }
.link-cadastro h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.etapas li span { white-space: nowrap; }
@media (max-width: 380px) { .etapas li span { display: none; } }

/* ---------------- painel do Parceiro Master: rede, usinas, avisos e identidade visual ---------------- */
.logo-topo { height: 34px; width: auto; max-width: 120px; object-fit: contain; border-radius: 8px; background: #fff; padding: 2px 4px; }
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.filtros-titulo, .filtros .acoes { grid-column: 1 / -1; }
.filtros-titulo { display: flex; align-items: center; gap: 8px; color: var(--cor-primaria-texto); }
.chips-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 0; background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); font: inherit; font-size: var(--t-sm); padding: 6px 12px; border-radius: 999px; }
button.chip { cursor: pointer; } button.chip:hover { background: var(--superficie-2); }
.chip.forte { background: var(--cor-primaria); color: var(--texto-sobre-primaria); font-weight: 700; }
.chip.ok { background: var(--ok-fundo); color: var(--ok); box-shadow: none; } .chip.alerta { background: var(--perigo-fundo); color: var(--perigo); box-shadow: none; font-weight: 700; }
.vazio { color: var(--sub); background: var(--superficie); border: 1.5px dashed var(--linha); border-radius: 14px; padding: 18px; text-align: center; margin: 0; }
.situacao.cancelada { background: var(--neutro-suave); color: var(--sub); }
.alerta-txt { color: var(--perigo); font-weight: 700; }
.botao-secundario.pequeno { padding: 6px 12px; font-size: var(--t-sm); min-height: 38px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.botao-icone { border: 0; background: transparent; color: var(--sub); width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background-color .15s ease-out, color .15s ease-out; }
.botao-icone:hover { background: var(--perigo-fundo); color: var(--perigo); }
.atalho.alerta-n b { color: var(--perigo); }
/* pendências */
.pend-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.dias { font-size: var(--t-xs); font-weight: 800; padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--sub); white-space: nowrap; }
.dias.atrasada { background: var(--perigo); color: #fff; }
.justificativa ul { margin: 4px 0 0; padding-left: 18px; font-size: var(--t-md); }
.cartao.pendencia.parada { background: color-mix(in srgb, var(--atencao-fundo) 75%, #fff); }
.cartao.pendencia.parada .justificativa { border-color: #F1D39A; color: #4A3000; } .cartao.pendencia.parada .justificativa > b { color: var(--atencao); }
.cartao.pendencia .acoes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aviso-rapido { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #F3C7C2; }
/* contas de energia por distribuidora */
.grupo-dist { background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra); padding: 4px 14px 12px; min-width: 0; max-width: 100%; overflow-x: clip; }
.grupo-dist .tabela { overflow-x: auto; }
.grupo-dist > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; list-style: none; }
.grupo-dist > summary::-webkit-details-marker { display: none; }
.grupo-nome { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-base); }
.grupo-dist .tabela { box-shadow: none; border: 1px solid var(--linha); }
.tabela-simples select { font: inherit; font-size: var(--t-sm); padding: 6px 8px; border: 1.5px solid var(--linha); border-radius: 8px; background: #fff; max-width: 160px; min-height: 36px; }
/* usinas */
.cartao.usina { display: grid; gap: 12px; }
.cartao.usina.fora { opacity: .7; }
.cartao.usina.ligada .usina-icone { background: var(--ok-fundo); color: var(--ok); }
.usina-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.usina-topo > div { display: grid; } .usina-topo .interruptor, .usina-topo > .situacao { grid-column: 1 / -1; justify-self: start; margin: 0; }
.usina-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--atencao-fundo); color: var(--atencao); }
.interruptor { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-md); font-weight: 700; cursor: pointer; }
.interruptor input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--linha); position: relative; transition: background .15s; cursor: pointer; margin: 0; flex: none; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s; }
.interruptor input:checked { background: var(--ok); } .interruptor input:checked::after { transform: translateX(18px); }
.interruptor input:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.regra-atual { background: var(--superficie-2); border-radius: 10px; padding: 10px 12px; font-size: var(--t-md); display: grid; gap: 6px; }
.parcelas-lista { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.parcelas { display: grid; gap: 8px; }
.parcela { display: grid; grid-template-columns: 36px repeat(3, minmax(0, 1fr)) 40px; gap: 8px; align-items: end; background: var(--superficie-2); border-radius: 12px; padding: 8px; }
.parcela-n { font-weight: 800; color: var(--cor-primaria-texto); align-self: center; text-align: center; }
.parcela .campo input { padding: 10px; }
.total-regra { font-weight: 700; color: var(--texto); }
@media (max-width: 520px) {
  .parcela { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .parcela .campo:nth-of-type(3) { grid-column: 2 / 4; }
  .parcela .botao-icone { grid-row: 1; grid-column: 4; }
}
@media (prefers-reduced-motion: reduce) { .interruptor input, .interruptor input::after { transition: none; } }
/* avisos */
.opcoes.duas { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.opcao span { display: grid; } .opcao small { color: var(--sub); font-size: var(--t-sm); }
.destinatarios { display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 10px; border: 1.5px solid var(--linha); border-radius: var(--raio); }
.painel-avisos { background: var(--superficie); border: 2px solid var(--cor-destaque); border-radius: var(--raio-g); overflow: hidden; }
.avisos-topo { display: flex; align-items: center; gap: 8px; background: var(--cor-destaque); color: #1A1A1A; padding: 10px 14px; font-size: var(--t-md); }
.aviso-item { padding: 12px 14px; border-bottom: 1px solid var(--linha); display: grid; gap: 4px; }
.aviso-item:last-child { border-bottom: 0; }
.aviso-item p { margin: 0; white-space: pre-line; font-size: var(--t-md); }
.aviso-item .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* usina na venda */
.usina-venda .opcao b { font-size: var(--t-base); } .opcao small.comissao-usina { color: var(--ok); font-weight: 700; }
.etiqueta.usina { background: var(--atencao-fundo); color: var(--atencao); }
/* identidade visual */
.marca-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 860px) { .marca-editor { grid-template-columns: minmax(0, 1fr) 300px; } .previa-marca { position: sticky; top: 16px; } }
.campo-cor { display: grid; grid-template-columns: 52px minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 8px; border: 1.5px solid var(--linha); border-radius: var(--raio); }
.campo-cor input[type=color] { width: 52px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 10px; }
.campo-cor span { display: grid; } .campo-cor small { color: var(--sub); font-size: var(--t-sm); }
.campo-cor .hex { font: inherit; font-size: var(--t-md); font-variant-numeric: tabular-nums; text-transform: uppercase; padding: 8px; border: 1.5px solid var(--linha); border-radius: 8px; width: 100%; }
.logo-atual { min-height: 64px; display: flex; align-items: center; padding: 10px; background: var(--superficie-2); border-radius: var(--raio); }
.logo-atual img { max-height: 64px; max-width: 200px; object-fit: contain; }
.previa-marca { display: grid; gap: 8px; justify-items: center; }
.celular { width: 260px; max-width: 100%; border-radius: 30px; border: 8px solid #2A1A24; background: #FBF8F4; overflow: hidden; box-shadow: var(--sombra-forte); font-size: var(--t-sm); }
.cel-topo { background: var(--p); color: var(--tp); display: flex; align-items: center; gap: 8px; padding: 14px 12px; border-radius: 0 0 14px 14px; }
.cel-topo img { height: 28px; max-width: 90px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px 4px; }
.cel-selo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--s); color: var(--p); }
.cel-corpo { padding: 12px; display: grid; gap: 10px; }
.cel-cta { background: var(--s); color: var(--p); border-radius: 12px; padding: 10px; display: flex; gap: 8px; align-items: center; }
.cel-cta span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--p); color: var(--s); }
.cel-abas { display: flex; gap: 6px; } .cel-abas span { padding: 4px 10px; border-radius: 999px; background: #fff; font-weight: 600; }
.cel-abas .ativa { background: var(--p); color: var(--tp); }
.cel-cartao { background: #fff; border: 1px solid color-mix(in srgb, var(--d) 45%, #fff); border-radius: 10px; padding: 8px 10px; display: grid; } .cel-cartao small { color: var(--sub); }
.cel-botao { border: 1.5px solid var(--p); color: var(--p); background: #fff; border-radius: 10px; padding: 8px; font: inherit; font-weight: 700; }
@media (max-width: 520px) { .marca-topo:has(#logo-marca:not([hidden])) #nome-marca { display: none; } }

/* ---------------- venda: operação, documentos em etapas e usinas para o vendedor ---------------- */
.operacao-venda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: var(--t-sm); color: var(--sub); }
.operacao-venda b { background: var(--cor-primaria); color: var(--texto-sobre-primaria); padding: 3px 12px; border-radius: 999px; font-size: var(--t-sm); }
.etapas-docs { gap: 12px; }
.etapa-doc { display: grid; gap: 10px; padding: 12px; border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--superficie); min-width: 0;
  transition: border-color .2s ease-out, background-color .2s ease-out; }
.etapa-doc.completa { border-color: color-mix(in srgb, var(--ok) 30%, #fff); background: color-mix(in srgb, var(--ok-fundo) 35%, #fff); }
.etapa-cabeca { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.etapa-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--t-md);
  background: var(--primaria-suave); color: var(--cor-primaria-texto); transition: background-color .2s ease-out, color .2s ease-out; }
.etapa-num .ic { width: 16px; height: 16px; stroke-width: 3; }
.etapa-doc.completa .etapa-num { background: var(--ok); color: #fff; }
.etapa-cabeca b { display: block; font-size: var(--t-base); letter-spacing: -.01em; } .etapa-cabeca small { display: block; color: var(--sub); font-size: var(--t-sm); }
.etapa-estado { font-size: var(--t-xs); font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--atencao-fundo); color: var(--atencao); white-space: nowrap; }
.etapa-doc.completa .etapa-estado { background: var(--ok-fundo); color: var(--ok); }
.escolha-doc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.escolha-doc label { display: grid; place-items: center; padding: 10px 6px; min-height: 44px; border: 1.5px solid var(--linha); border-radius: var(--raio); font-weight: 700; font-size: var(--t-md);
  cursor: pointer; background: var(--superficie); text-align: center; line-height: 1.25; transition: border-color .15s ease-out, background-color .15s ease-out; }
.escolha-doc label:hover { border-color: var(--primaria-borda); }
.escolha-doc label:has(input:checked) { border-color: var(--cor-primaria); background: var(--primaria-tenue); color: var(--cor-primaria-texto); }
.escolha-doc input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-doc label:focus-within { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.slot { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 10px; border-radius: 12px;
  background: var(--superficie-2); border: 1px solid transparent; min-width: 0; transition: background-color .2s ease-out, border-color .2s ease-out; }
.slot.ok .nota { color: var(--ok); font-weight: 600; }
.slot.erro { border-color: color-mix(in srgb, var(--perigo) 35%, #fff); background: var(--perigo-fundo); } .slot.erro .nota { color: var(--perigo); }
.slot.esperando .nota { color: var(--atencao); } .slot.naoha { background: var(--superficie); border-color: var(--linha); }
.slot-texto { display: grid; min-width: 0; } .slot-texto b { font-size: var(--t-md); } .slot-texto b small { font-weight: 500; color: var(--sub); }
.slot-texto .nota { overflow-wrap: anywhere; }
.slot-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.slot-acoes > * { flex: 1 1 130px; }
.slot-acoes label { cursor: pointer; position: relative; }
.slot-acoes label:focus-within { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.botao-naoha { background: var(--superficie); color: var(--sub); border: 1.5px dashed color-mix(in srgb, var(--sub) 45%, #fff); border-radius: var(--raio); padding: 10px 14px; font: inherit; font-weight: 700;
  font-size: var(--t-md); cursor: pointer; }
.botao-naoha:hover { color: var(--texto); border-color: var(--sub); }
.botao-naoha[aria-pressed="true"] { background: var(--neutro-suave); color: var(--texto); border-style: solid; border-color: color-mix(in srgb, var(--sub) 45%, #fff); }
.ver-regras { justify-self: start; }
/* tela Usinas do vendedor */
.usina-regras { display: grid; gap: 12px; }
.usina-regras dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.usina-regras dl div { background: var(--superficie-2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.usina-regras dt { font-size: var(--t-xs); color: var(--sub); font-weight: 700; } .usina-regras dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.texto-regras { white-space: pre-line; margin: 0; background: var(--superficie-2); border-radius: 10px; padding: 10px 12px; font-size: var(--t-md); max-width: 72ch; }
/* painel: e-mails da operação, limites e ações de usina */
.cartao-operacao { display: grid; gap: 10px; }
.email-fixo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-md); }
.email-fixo code { background: var(--superficie-2); padding: 4px 10px; border-radius: 8px; font-size: var(--t-md); overflow-wrap: anywhere; font-family: inherit; font-weight: 700; color: var(--cor-primaria-texto); }
.limites-usinas { display: flex; flex-wrap: wrap; gap: 8px; }
.limites-usinas span { background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 999px; padding: 4px 12px; font-size: var(--t-sm); font-weight: 700; }
.limites-usinas span.cheio { border-color: var(--atencao); color: var(--atencao); }
.acoes-usina { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.acoes-usina .campo { flex: 1 1 220px; }
.usina-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dono-usina { font-size: var(--t-xs); font-weight: 700; color: var(--sub); background: var(--superficie-2); padding: 1px 8px; border-radius: 999px; }
.dono-usina.propria { color: var(--cor-primaria-texto); background: var(--primaria-suave); }
.botao-perigo { background: var(--superficie); color: var(--perigo); border: 1.5px solid var(--perigo); border-radius: var(--raio); padding: 10px 14px; font: inherit; font-weight: 700;
  font-size: var(--t-md); cursor: pointer; justify-self: start; }
.botao-perigo:hover { background: var(--perigo-fundo); }
.tabela-simples .interruptor { font-size: var(--t-sm); white-space: nowrap; }
.opcao.indisponivel { opacity: .5; cursor: not-allowed; }
.opcao.indisponivel::after { content: attr(title); font-size: var(--t-xs); font-weight: 700; color: var(--atencao); margin-left: auto; align-self: center; }

/* ---------------- tela "Instale o app" (depois do cadastro) ---------------- */
html.instalando, html.instalando body { overflow: hidden; }
.instalar-app { position: fixed; inset: 0; z-index: 200; background: #C8102E; color: #fff; display: grid; place-items: center; cursor: pointer;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center; outline: none; }
.instalar-app.ios { cursor: default; }
.instalar-conteudo { display: grid; justify-items: center; gap: 18px; max-width: 420px; }
.instalar-logo { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 28px; background: #fff; padding: 14px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.instalar-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.instalar-app h1 { color: #fff; font-size: var(--t-3xl); line-height: 1.15; letter-spacing: -.025em; margin: 0; }
.instalar-sub { margin: 0; font-size: var(--t-lg); line-height: 1.45; color: #FFE3E6; }
.instalar-sub .ic, .instalar-sub svg { vertical-align: -0.2em; }
.instalar-alternativa { font-size: var(--t-base); }
.instalar-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; width: 100%; counter-reset: passo; }
.instalar-passos li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; background: rgb(255 255 255 / .12);
  border-radius: 14px; padding: 10px 14px; font-size: var(--t-base); line-height: 1.4; }
.instalar-icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; color: #0A84FF; }
.instalar-depois { margin-top: 8px; background: transparent; border: 1.5px solid rgb(255 255 255 / .55); color: #fff; border-radius: 999px; padding: 10px 18px;
  font: inherit; font-size: var(--t-md); font-weight: 700; min-height: 44px; cursor: pointer; }
.instalar-depois:hover { background: rgb(255 255 255 / .12); }
.instalar-app :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: no-preference) { .instalar-app:not(.ios).pronto .instalar-logo { animation: instalar-pulso 1.8s ease-in-out infinite; }
  @keyframes instalar-pulso { 50% { transform: scale(1.04); } } }

/* ---------------- premiação ---------------- */
.campanha { display: grid; gap: 4px; }
.campanha-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .campanha-topo h2 { margin: 0; }
.podio { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.colocacao { display: grid; grid-template-columns: 40px 56px minmax(0, 1fr); grid-template-areas: "pos foto nome" "pos foto premio"; gap: 2px 12px; align-items: center;
  background: var(--superficie); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra); }
.colocacao .posicao { grid-area: pos; font-size: var(--t-xl); font-weight: 800; color: var(--sub); text-align: center; }
.colocacao .avatar { grid-area: foto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--primaria-suave);
  color: var(--cor-primaria-texto); font-weight: 800; font-size: var(--t-lg); }
.colocacao .avatar img { width: 100%; height: 100%; object-fit: cover; }
.colocacao .colocado { grid-area: nome; display: grid; min-width: 0; } .colocacao .colocado b { font-size: var(--t-base); overflow-wrap: anywhere; }
.colocacao .premio { grid-area: premio; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 700; color: var(--atencao); }
.colocacao.ouro { background: color-mix(in srgb, var(--cor-secundaria) 16%, #fff); }
.colocacao.ouro .posicao { color: #9A6B00; } .colocacao.ouro .avatar { box-shadow: 0 0 0 3px var(--cor-secundaria); }
.colocacao.prata .avatar { box-shadow: 0 0 0 3px #B8BCC4; } .colocacao.bronze .avatar { box-shadow: 0 0 0 3px #C58A55; }
.colocacao.vaga { box-shadow: none; background: var(--superficie-2); } .colocacao.vaga .avatar { background: var(--neutro-suave); color: var(--sub); }
@media (min-width: 560px) { .colocacao { grid-template-columns: 48px 64px minmax(0, 1fr) minmax(0, 220px); grid-template-areas: "pos foto nome premio"; }
  .colocacao .avatar { width: 64px; height: 64px; } .colocacao .premio { justify-self: end; text-align: right; } }
/* ---------------- perfil ---------------- */
.usuario-chip { border: 0; font: inherit; cursor: pointer; color: inherit; display: inline-flex; align-items: center; gap: 8px; }
.usuario-chip:hover { background: rgb(255 255 255 / .22); }
.usuario-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-foto { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; margin-left: -6px; }
.perfil-cabeca { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; }
.perfil-cabeca > div { display: grid; gap: 6px; justify-items: start; min-width: 0; } .perfil-cabeca b { font-size: var(--t-lg); }
.perfil-foto { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--primaria-suave); color: var(--cor-primaria-texto);
  box-shadow: var(--sombra); }
.perfil-foto img { width: 100%; height: 100%; object-fit: cover; } .perfil-foto .ic { width: 40px; height: 40px; }
.colocacao.vaga .avatar { box-shadow: none; }
input[type=file]::file-selector-button { font: inherit; font-size: var(--t-sm); font-weight: 700; color: var(--cor-primaria-texto); background: var(--superficie);
  border: 1.5px solid var(--cor-primaria); border-radius: 8px; padding: 6px 12px; margin-right: 10px; cursor: pointer; transition: background-color .15s ease-out; }
input[type=file]::file-selector-button:hover { background: var(--primaria-tenue); }

/* ---------- repasse do RCI ---------- */
fieldset.repasse { display: grid; gap: var(--esp-2, 10px); }
fieldset.repasse .aviso { margin: 0; }
.dupla.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .dupla.trio { grid-template-columns: 1fr 1fr; } .dupla.trio > :first-child { grid-column: 1 / -1; } }
.repasse-resumo { display: inline-block; margin-top: 2px; }
details.corrigir-repasse { margin-top: 8px; }
details.corrigir-repasse > summary { cursor: pointer; color: var(--cor-primaria-texto); font-weight: 600; font-size: var(--t-sm); }

/* ---------- agentes ---------- */
.agentes-topo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.agentes-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.cartao.agente header { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.estado-agente { font-size: var(--t-xs); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--neutro-suave); color: var(--tinta); white-space: nowrap; }
.estado-agente.ok { background: #E5F5EA; color: #145C2C; }
.estado-agente.executando { background: var(--primaria-suave); color: var(--cor-primaria-texto); }
.estado-agente.atencao { background: #FFF4D6; color: #7A5200; }
.estado-agente.falha { background: #FDE7E7; color: #9B1C1C; }
.agente-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 8px 0; }
.agente-numeros dt { font-size: var(--t-xs); color: var(--tinta-suave, #5b5b66); }
.agente-numeros dd { margin: 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
.agente .agenda { margin: 0; }
.agentes-metricas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.cartao.metrica { display: grid; gap: 2px; }
.cartao.metrica > b { font-size: var(--t-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cartao.metrica small { color: var(--tinta-suave, #5b5b66); }
.cartao.metrica.grafico { grid-column: 1 / -1; }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 72px; margin-top: 6px; }
.barras i { flex: 1; min-width: 4px; background: var(--cor-primaria); border-radius: 3px 3px 0 0; min-height: 2px; }
.barras i.com-falha { background: #C8102E; }
.filtros-historico .check { margin: 0; }
.historico { gap: 0; }
.linha-historico { display: grid; grid-template-columns: auto auto auto 1fr; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--neutro-suave); font-size: var(--t-sm); }
.linha-historico time { color: var(--tinta-suave, #5b5b66); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-historico.erro .etiqueta { background: #FDE7E7; color: #9B1C1C; }
.linha-historico.alerta .etiqueta { background: #FFF4D6; color: #7A5200; }
@media (max-width: 560px) { .linha-historico { grid-template-columns: auto 1fr; } .linha-historico > span:last-child { grid-column: 1 / -1; } }
.tabela-rolagem { overflow-x: auto; }
.ampliar-slots { margin-bottom: 12px; }
.condicoes-acordo ol { margin: 6px 0 0; padding-left: 20px; }
.aceites-obrigatorios .check { align-items: flex-start; }
.registro-profissional { margin-top: 12px; }

/* ---------- botão de monitoramento ---------- */
.botao-monitoramento { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left;
  font: inherit; color: var(--texto); background: var(--superficie); border: 1.5px dashed var(--primaria-borda, #c9b3c2); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.botao-monitoramento small { display: block; color: var(--sub); font-size: var(--t-sm); line-height: 1.4; }
.botao-monitoramento .estado-monit { font-size: var(--t-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--neutro-suave, #eee); white-space: nowrap; }
.botao-monitoramento[aria-pressed="true"] { border-style: solid; border-color: var(--cor-primaria); background: var(--primaria-tenue, #f6eef3); }
.botao-monitoramento[aria-pressed="true"] .estado-monit { background: var(--cor-primaria); color: var(--texto-sobre-primaria, #fff); }
.botao-monitoramento:focus-visible { outline: 3px solid var(--primaria-anel, #e2c6d7); outline-offset: 2px; }
.etiqueta.monit { background: var(--primaria-suave, #ead7e3); color: var(--cor-primaria-texto); }
.etiqueta.pequena { font-size: var(--t-xs); padding: 2px 8px; }
.nota-monit { margin: 4px 0 8px; }

/* ---------- exceções da automação e edição de cadastros ---------- */
.filtro-excecoes { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px 12px; }
.filtro-excecoes [aria-pressed="true"] { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.cartao.excecao { display: grid; gap: 8px; }
.cartao.excecao header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.cartao.excecao p { margin: 0; }
.campos-excecao { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px 14px; }
.campo-excecao { display: grid; gap: 4px; align-content: start; padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.campo-excecao.na { background: var(--neutro-suave); }
.campo-excecao.na .campo { color: var(--sub); text-decoration: line-through; }
.campo-excecao .check { font-size: var(--t-sm); margin: 0; }
.obrig { font-size: var(--t-xs); font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; }
.resolucao { font-size: var(--t-sm); }
details.descartar { width: 100%; }
details.descartar summary { cursor: pointer; color: var(--sub); font-size: var(--t-sm); }
.badge-ex { margin-left: 6px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--perigo); color: #fff; font-size: var(--t-xs); font-weight: 700; line-height: 20px; text-align: center; }
.item-cadastro { display: grid; gap: 2px; text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer; }
.item-cadastro:hover { border-color: var(--cor-primaria); }
.edicao-cadastro { margin-top: 14px; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px 14px; }

/* operações com RCI: linha do tempo, conferência da auditoria, conclusão e 2ª etapa */
.cartao.operacao { display: grid; gap: 6px; }
.cartao.operacao header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.cartao.operacao p { margin: 0; }
.etapa-atual { font-weight: 700; color: var(--cor-primaria-texto); }
.detalhe-op { display: grid; gap: 18px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--linha); }
.detalhe-op h3 { margin: 0 0 8px; font-size: var(--t-base); }
.detalhe-op section { min-width: 0; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--primaria-borda); display: grid; gap: 10px; }
.linha-tempo li { position: relative; display: grid; gap: 2px; }
.linha-tempo li::before { content: ''; position: absolute; left: -25px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--primaria-borda); }
.linha-tempo li.atual::before { background: var(--cor-secundaria); border-color: var(--texto-sobre-secundaria); }
.linha-tempo li.fase2::before { border-style: dashed; }
.linha-tempo span { font-size: var(--t-md); color: var(--sub); overflow-wrap: anywhere; }
.linha-tempo time { font-size: var(--t-xs); color: var(--sub); font-variant-numeric: tabular-nums; }
.docs-auditoria { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.docs-auditoria li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); min-width: 0; overflow-wrap: anywhere; }
.docs-auditoria .acoes { margin: 0; }
label.arquivo { display: inline-flex; align-items: center; cursor: pointer; }
.conclusao { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--raio); background: var(--neutro-suave); }
.conclusao.ok { background: var(--ok-fundo); color: #14432A; }
.conclusao ul { margin: 4px 0 0; padding-left: 18px; }
.etapa-op { display: grid; gap: 6px; margin-top: 8px; }
.etiqueta-etapa { justify-self: start; font-size: var(--t-sm); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--primaria-suave); color: var(--cor-primaria-texto); }
.etiqueta-etapa.ok { background: var(--ok-fundo); color: var(--ok); }
.etapa-op summary { cursor: pointer; font-size: var(--t-md); color: var(--cor-primaria-texto); font-weight: 600; }
.etapa-op .conteudo-op { display: grid; gap: 10px; margin-top: 8px; }

/* nova versão do contrato: aviso obrigatório na tela Meus contratos */
.alerta-obrigatorio { display: grid; gap: 4px; margin-block: 0 14px; padding: 14px 16px; border-radius: var(--raio); background: var(--perigo-fundo);
  color: var(--perigo); border: 1.5px solid color-mix(in srgb, var(--perigo) 40%, #fff); }
.alerta-obrigatorio b { font-size: var(--t-base); }
.alerta-obrigatorio span { color: var(--texto); font-size: var(--t-md); }

/* =====================================================================================================================
   Visual 2026.2 — camada de componentes do "instrumento de campo". Vale por cima das regras anteriores: os mesmos
   seletores (o JavaScript e os testes não mudam), com leitura mais firme, alvos de toque maiores e uma elevação só
   por elemento (borda nos cartões; sombra apenas no que flutua: menu, avisos e a ação principal).
   ===================================================================================================================== */

/* ---- tipografia e textos de apoio ---- */
h1 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: var(--t-lg); font-weight: 800; letter-spacing: -.01em; margin: 18px 0 2px; }
h3 { font-size: var(--t-base); font-weight: 750; }
.nota { font-size: var(--t-md); color: var(--sub); line-height: 1.5; }
.titulo-tela { gap: 12px; }
.titulo-icone { width: 44px; height: 44px; border-radius: 14px; background: var(--cor-primaria); color: var(--cor-secundaria); }
@media (min-width: 760px) { h1 { font-size: var(--t-3xl); } }

/* ---- topo ---- */
.topo { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 14px; border-radius: 0 0 20px 20px; box-shadow: 0 6px 18px color-mix(in srgb, var(--cor-primaria) 22%, transparent); }
.marca-topo { font-weight: 800; letter-spacing: -.01em; }
.usuario-chip:not(:empty) { background: rgb(255 255 255 / .16); font-size: var(--t-sm); font-weight: 650; padding: 7px 12px; }
.faixa-offline { font-weight: 650; }

/* ---- campos ---- */
.campo { font-size: var(--t-sm); font-weight: 700; color: var(--texto); gap: 7px; }
.campo input, .campo select, .campo textarea { font-size: var(--t-base); font-weight: 500; min-height: 52px; padding: 13px 14px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio); }
.campo textarea { min-height: 96px; line-height: 1.5; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--cor-primaria); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 4px var(--primaria-anel); }
.campo select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--cor-primaria) 50%), linear-gradient(135deg, var(--cor-primaria) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.check { font-size: var(--t-md); font-weight: 500; color: var(--texto); }
.check input { width: 22px; height: 22px; }
fieldset, .docs { border: 1.5px solid var(--linha); border-radius: var(--raio-g); padding: 14px 16px 16px; }
legend { font-size: var(--t-md); font-weight: 800; padding: 0 6px; }

/* ---- botões: alvo de toque ≥ 48 px, ação principal só em ouro ---- */
.botao-principal, .botao-secundario, .botao-perigo, .botao-naoha { min-height: 48px; border-radius: var(--raio); transition: transform .12s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), filter .2s var(--ease); }
.botao-principal { font-size: var(--t-base); font-weight: 800; padding: 13px 20px; color: var(--primaria-escura);
  box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 4px 12px color-mix(in srgb, var(--cor-secundaria) 40%, transparent); }
.botao-principal:hover { filter: brightness(1.05); box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 8px 18px color-mix(in srgb, var(--cor-secundaria) 48%, transparent); }
.botao-principal:active, .botao-secundario:active, .botao-naoha:active { transform: scale(.98); }
.botao-secundario { border-width: 2px; font-size: var(--t-md); font-weight: 750; padding: 11px 16px; }
.botao-secundario:hover { background: var(--primaria-suave); }
.botao-secundario.pequeno { min-height: 44px; font-size: var(--t-sm); padding: 8px 14px; }
.botao-secundario.whatsapp { border-color: #17663B; color: #0F5530; }
.botao-secundario.whatsapp:hover { background: #E3F2E8; }
:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 3px; border-radius: 6px; }

/* ---- início: ação principal e atalhos em linhas (como as linhas de uma conta: nome à esquerda, valor à direita) ---- */
.cta-venda { padding: 18px 16px; border-radius: 20px; min-height: 88px; box-shadow: var(--sombra-forte); }
.cta-venda b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.cta-venda small { font-size: var(--t-md); font-weight: 600; opacity: 1; color: color-mix(in srgb, var(--primaria-escura) 82%, transparent); }
.cta-icone { width: 52px; height: 52px; border-radius: 16px; }
#tela-inicio .grade-atalhos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 18px; overflow: hidden; }
#tela-inicio .atalho { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 18px; align-items: center; gap: 0 14px; padding: 14px 14px 14px 16px; min-height: 72px;
  border-radius: 0; box-shadow: none; border-top: 1px solid var(--linha); background: var(--superficie); transition: background-color .15s var(--ease); }
#tela-inicio .atalho:first-child { border-top: 0; }
#tela-inicio .atalho:hover { background: var(--primaria-tenue); box-shadow: none; }
#tela-inicio .atalho:active { transform: none; background: var(--primaria-suave); }
#tela-inicio .atalho-icone { margin: 0; width: 44px; height: 44px; border-radius: 13px; }
#tela-inicio .atalho .rot { display: grid; min-width: 0; }
#tela-inicio .atalho .rot b { font-size: var(--t-base); font-weight: 750; color: var(--texto); letter-spacing: 0; }
#tela-inicio .atalho .rot small { font-size: var(--t-sm); color: var(--sub); font-weight: 500; line-height: 1.35; }
#tela-inicio .atalho .valor { font-size: var(--t-xl); font-weight: 800; color: var(--cor-primaria-texto); letter-spacing: -.01em; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tela-inicio .atalho .valor#ref-code { font-size: var(--t-sm); font-weight: 750; background: var(--primaria-suave); padding: 4px 10px; border-radius: 999px; }
#tela-inicio .atalho .seta { width: 18px; height: 18px; color: var(--linha-forte); }
#tela-inicio .atalho.alerta-n .valor { color: var(--perigo); }
@media (min-width: 680px) {
  #tela-inicio .grade-atalhos { grid-template-columns: 1fr 1fr; }
  #tela-inicio .atalho:nth-child(2) { border-top: 0; }
  #tela-inicio .atalho:nth-child(even) { border-left: 1px solid var(--linha); }
}

/* ---- avisos da rede no Início ---- */
.painel-avisos { border: 1.5px solid var(--linha); border-radius: 18px; box-shadow: none; }
.avisos-topo { background: var(--cor-primaria); color: var(--texto-sobre-primaria); font-weight: 750; padding: 12px 16px; }
.avisos-topo .ic { color: var(--cor-secundaria); }
.aviso-item { padding: 14px 16px; }
.aviso-item p { font-size: var(--t-md); color: var(--texto); }

/* ---- cartões e listas: borda, sem sombra (uma elevação só) ---- */
.cartao { border: 1.5px solid var(--linha); box-shadow: none; border-radius: var(--raio-g); padding: 16px; }
.cartao.ok { border-color: color-mix(in srgb, var(--ok) 28%, var(--linha)); }
.cartao.perigo, .cartao.pendencia { border-color: color-mix(in srgb, var(--perigo) 35%, #fff); }
.situacao { font-size: var(--t-xs); font-weight: 800; padding: 3px 10px; letter-spacing: .01em; }
.etiqueta { font-weight: 750; }
.etiqueta.pequena, .etiqueta.monit.pequena { font-size: var(--t-xs); padding: 2px 10px; }
.etiqueta.link { background: #FDEBDC; color: #8A3E05; }
.vazio { border-color: var(--linha-forte); color: var(--sub); font-weight: 500; }
.tabela { box-shadow: none; border: 1.5px solid var(--linha); }
.tabela-simples th { color: var(--texto); font-size: var(--t-xs); letter-spacing: .02em; text-transform: uppercase; }
.tabela-simples td, .tabela-simples th { padding: 10px; }
.chip { box-shadow: none; border: 1.5px solid var(--linha); font-weight: 650; }
.chip.forte { border-color: transparent; }
.toast { font-weight: 600; border-radius: 16px; padding: 15px 18px; box-shadow: var(--sombra-media); }
details summary { font-weight: 750; min-height: 44px; display: flex; align-items: center; }

/* ---- navegação inferior ---- */
.menu-inferior { border: 1.5px solid var(--linha); box-shadow: var(--sombra-media); border-radius: 24px; padding: 6px 6px; }
.menu-inferior button { font-size: var(--t-xs); font-weight: 700; color: var(--sub); padding: 7px 4px; min-height: 54px; }
.menu-inferior button .ic { width: 24px; height: 24px; }
.menu-inferior button.ativo { color: var(--cor-primaria-texto); background: var(--primaria-suave); }
.menu-inferior .flutuante { width: 62px; height: 62px; flex-basis: 62px; border-radius: 22px; margin-top: -32px; }

/* ---- venda: etapas e serviços ---- */
.etapas { border: 1.5px solid var(--linha); box-shadow: none; padding: 5px; position: sticky; top: 8px; z-index: 4; }
.etapas li { font-size: var(--t-sm); font-weight: 700; color: var(--sub); min-height: 40px; }
.servico-opcao { border-width: 2px; border-radius: 18px; min-height: 88px; }
.servico-opcao b { font-weight: 800; }
.servico-opcao small { font-weight: 500; }
.slot, .etapa-doc { border-radius: 14px; }
.etapa-cabeca b { font-weight: 800; }

/* ---- painel: menu lateral no computador (mesma ordem das abas), faixa rolável no celular ---- */
.abas button { box-shadow: none; border: 1.5px solid var(--linha); font-weight: 700; min-height: 44px; }
.abas button.ativa { border-color: transparent; }
@media (min-width: 1000px) {
  .conteudo:has(> #tela-admin:not([hidden])) { max-width: 1320px; }
  #tela-admin { grid-template-columns: 236px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  #tela-admin > .titulo-tela { grid-column: 1 / -1; }
  #tela-admin > #abas-admin { grid-column: 1; grid-row: 2 / span 40; flex-direction: column; overflow: visible; gap: 2px;
    padding: 8px; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 18px; }
  #tela-admin > .aba { grid-column: 2; }
  #abas-admin button { width: 100%; justify-content: flex-start; border: 0; border-radius: 12px; padding: 10px 12px; min-height: 42px; background: transparent; font-size: var(--t-md); }
  #abas-admin button:not(.ativa):hover { background: var(--primaria-tenue); }
  #abas-admin button.ativa { background: var(--cor-primaria); }
  #abas-admin .badge-ex { margin-left: auto; }
}

/* ---- painel: leituras da visão geral (números como no visor de um medidor) ---- */
.leituras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 18px; overflow: hidden; }
.leitura { padding: 14px 16px; border-left: 1px solid var(--linha); border-top: 1px solid var(--linha); margin: -1px 0 0 -1px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.leitura dt { font-size: var(--t-sm); font-weight: 650; color: var(--sub); }
.leitura dd { margin: 0; font-size: var(--t-3xl); font-weight: 800; color: var(--cor-primaria-texto); line-height: 1.1; letter-spacing: -.02em; }
.leitura.em-alerta dd { color: var(--perigo); }
.leitura.rede { background: var(--primaria-tenue); }
.grupo-canal { background: var(--superficie); border: 1.5px solid var(--linha); border-radius: var(--raio-g); padding: 4px 16px; }
.grupo-canal + .grupo-canal { margin-top: 8px; }
.grupo-canal > summary { justify-content: space-between; gap: 12px; color: var(--texto); list-style: none; }
.grupo-canal > summary::-webkit-details-marker { display: none; }
.grupo-canal[open] > summary { border-bottom: 1px solid var(--linha); margin-bottom: 12px; }
.grupo-canal form { padding-bottom: 14px; }

/* ---- segmentado (Minhas vendas / Todas da rede) ---- */
.segmentado { display: inline-flex; padding: 4px; gap: 4px; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 14px; justify-self: start; }
.segmentado button { border: 0; background: transparent; font: inherit; font-size: var(--t-sm); font-weight: 750; color: var(--sub); padding: 9px 14px; border-radius: 10px; min-height: 40px; cursor: pointer; }
.segmentado button[aria-pressed="true"] { background: var(--cor-primaria); color: var(--texto-sobre-primaria); }

/* ---- Meu link e QR Code ---- */
.cartao-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 20px; padding: 18px; }
@media (min-width: 620px) { .cartao-link { grid-template-columns: 240px minmax(0, 1fr); align-items: center; } }
.cartao-link .qr { margin: 0; display: grid; justify-items: center; gap: 8px; padding: 14px; background: var(--primaria-tenue); border-radius: 16px; }
.cartao-link .qr img { width: 220px; height: 220px; max-width: 100%; background: #fff; border-radius: 12px; padding: 6px; border: 1.5px solid var(--linha); }
.cartao-link .qr figcaption { font-size: var(--t-sm); font-weight: 650; color: var(--sub); }
.link-dados { display: grid; gap: 10px; min-width: 0; }
.link-texto { margin: 0; font-size: var(--t-base); font-weight: 750; color: var(--cor-primaria-texto); overflow-wrap: anywhere; background: var(--superficie-2); border-radius: 10px; padding: 10px 12px; user-select: all; }
.acoes-link { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sobretitulo { font-size: var(--t-sm); font-weight: 750; color: var(--sub); }
.numeros-link { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 16px; overflow: hidden; }
.numeros-link div { padding: 12px 14px; display: grid; border-left: 1px solid var(--linha); }
.numeros-link div:first-child { border-left: 0; }
.numeros-link b { font-size: var(--t-2xl); font-weight: 800; color: var(--cor-primaria-texto); font-variant-numeric: tabular-nums; }
.numeros-link span { font-size: var(--t-sm); color: var(--sub); font-weight: 600; }
.subtitulo { margin-top: 6px; }
.linha-cadastro { display: grid; gap: 2px; }

/* ---- painel: aba Vender ---- */
.grade-vender { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.cartao-acao { display: grid; gap: 4px; justify-items: start; text-align: left; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 18px; padding: 18px; cursor: pointer;
  font: inherit; color: var(--texto); transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.cartao-acao:hover { border-color: var(--cor-primaria); background: var(--primaria-tenue); }
.cartao-acao b { font-size: var(--t-lg); font-weight: 800; margin-top: 8px; }
.cartao-acao span:last-child { color: var(--sub); font-size: var(--t-md); }

/* ---- páginas públicas ---- */
.pagina-publica .conteudo { max-width: 680px; }
.pagina-publica .topo strong { font-weight: 800; }

/* ---- autocadastro do cliente (/cliente/{código}) ---- */
.cliente-capa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.cliente-logo { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 16px; padding: 6px; border: 1.5px solid var(--linha); }
.cliente-capa h1 { margin: 0; }
.cliente-capa .sobretitulo { margin: 0; }
.trilho-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; counter-reset: passo; }
.trilho-etapas li { display: grid; justify-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 700; color: var(--sub); text-align: center; line-height: 1.2; }
.trilho-etapas li span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--superficie); border: 2px solid var(--linha-forte); color: var(--sub);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.trilho-etapas li.ativa { color: var(--cor-primaria-texto); }
.trilho-etapas li.ativa span { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--texto-sobre-primaria); }
.trilho-etapas li.feita span { background: var(--ok); border-color: var(--ok); color: #fff; }
.formulario.cliente fieldset { gap: 12px; }
.opcao-servico { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 2px solid var(--linha); border-radius: 16px; cursor: pointer; background: var(--superficie);
  transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.opcao-servico input { width: 24px; height: 24px; margin: 2px 0 0; }
.opcao-servico span { display: grid; gap: 2px; } .opcao-servico b { font-size: var(--t-base); font-weight: 800; } .opcao-servico small { font-size: var(--t-md); color: var(--sub); }
.opcao-servico:has(input:checked) { border-color: var(--cor-primaria); background: var(--primaria-tenue); }
.opcao-servico:focus-within { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.rotulo { font-size: var(--t-sm); font-weight: 800; margin: 4px 0 0; }
.lista-usinas { display: grid; gap: 8px; }
.usina-opcao { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: 14px; cursor: pointer; }
.usina-opcao input { width: 20px; height: 20px; margin-top: 3px; }
.usina-opcao span { display: grid; gap: 2px; min-width: 0; } .usina-opcao small { color: var(--sub); font-size: var(--t-sm); }
.usina-opcao:has(input:checked) { border-color: var(--cor-primaria); background: var(--primaria-tenue); }
.usina-opcao.indisponivel { opacity: .6; cursor: not-allowed; }
.soltar-arquivo { position: relative; display: grid; place-items: center; text-align: center; min-height: 150px; padding: 18px; border: 2px dashed var(--primaria-borda); border-radius: 18px; background: var(--primaria-tenue); cursor: pointer; }
.soltar-arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.soltar-arquivo span { display: grid; gap: 4px; } .soltar-arquivo b { font-size: var(--t-lg); color: var(--cor-primaria-texto); } .soltar-arquivo small { color: var(--sub); font-size: var(--t-sm); }
.soltar-arquivo:focus-within { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.status-leitura { margin: 0; font-size: var(--t-md); font-weight: 650; }
.status-leitura.lendo { color: var(--atencao); } .status-leitura.ok { color: var(--ok); }
input.lido-ia { background: var(--primaria-tenue); border-color: var(--primaria-borda); }
.repasse-cliente { display: grid; gap: 10px; padding: 14px; background: var(--superficie-2); border-radius: 14px; }
.grade-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.doc-slot { position: relative; display: grid; gap: 4px; align-content: center; min-height: 104px; padding: 14px; border: 2px dashed var(--linha-forte); border-radius: 16px; background: var(--superficie); cursor: pointer; }
.doc-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.doc-titulo { font-weight: 800; } .doc-titulo small { font-weight: 500; color: var(--sub); }
.doc-estado { font-size: var(--t-sm); color: var(--sub); overflow-wrap: anywhere; }
.doc-slot.ok { border-style: solid; border-color: var(--ok); background: var(--ok-fundo); } .doc-slot.ok .doc-estado { color: var(--ok); font-weight: 700; }
.doc-slot:focus-within { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.revisao { margin: 0; display: grid; border: 1.5px solid var(--linha); border-radius: 14px; overflow: hidden; }
.revisao div { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 10px; padding: 10px 14px; border-top: 1px solid var(--linha); }
.revisao div:first-child { border-top: 0; }
.revisao dt { font-size: var(--t-sm); font-weight: 700; color: var(--sub); } .revisao dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.barra-passos { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--fundo); }
.barra-passos #cli-voltar[hidden] + #cli-avancar { grid-column: 1 / -1; }
.erro-form { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--perigo-fundo); color: var(--perigo); font-weight: 700; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.resultado-cliente { display: grid; gap: 12px; justify-items: center; text-align: center; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 20px; padding: 28px 20px; }
.resultado-cliente h2 { margin: 0; font-size: var(--t-xl); }
.resultado-cliente p { margin: 0; max-width: 52ch; }
.resultado-icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #fff; background: var(--ok); }
.resultado-icone.atencao { background: var(--atencao); }
@media (max-width: 359px) { .trilho-etapas li { font-size: 0; gap: 0; } .trilho-etapas li span { font-size: var(--t-sm); } }
.cliente-capa { align-items: start; }
.etapa-op details summary { min-height: 40px; }
.etapa-op { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .cta-venda, .botao-principal { transition: none; } }

/* ---- aba Monitor (SOS): agentes e operações em tempo real ---- */
.monitor-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.ao-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 750; color: var(--ok); background: var(--ok-fundo); padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.ao-vivo::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ao-vivo.parado { color: var(--perigo); background: var(--perigo-fundo); }
@media (prefers-reduced-motion: no-preference) { .ao-vivo:not(.parado)::before { animation: pulsar 1.6s var(--ease) infinite; } @keyframes pulsar { 50% { opacity: .3; } } }
.monitor-agentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.agente-mon { display: grid; gap: 10px; align-content: start; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: var(--raio-g); padding: 14px 16px; min-width: 0; }
.agente-mon.atencao { border-color: color-mix(in srgb, var(--atencao) 45%, var(--linha)); }
.agente-mon.falha { border-color: color-mix(in srgb, var(--perigo) 45%, var(--linha)); }
.agente-mon header { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.agente-mon header b { display: block; font-size: var(--t-base); line-height: 1.25; }
.grupo-mon { font-size: var(--t-xs); font-weight: 700; color: var(--sub); }
.pulso { width: 12px; height: 12px; border-radius: 50%; background: var(--linha-forte); }
.pulso.ok { background: var(--ok); } .pulso.executando { background: var(--cor-primaria); } .pulso.atencao { background: #C98400; } .pulso.falha { background: var(--perigo); }
@media (prefers-reduced-motion: no-preference) { .pulso.executando { animation: pulsar 1.2s var(--ease) infinite; } }
.atividade-mon { margin: 0; font-weight: 650; font-size: var(--t-md); overflow-wrap: anywhere; }
.atividade-mon time { display: block; font-weight: 500; font-size: var(--t-sm); color: var(--sub); }
.eficiencia { display: grid; gap: 4px; font-size: var(--t-sm); color: var(--sub); }
.eficiencia b { color: var(--texto); font-variant-numeric: tabular-nums; }
.barra-ef { height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.barra-ef i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.barra-ef i.media { background: #C98400; } .barra-ef i.baixa { background: var(--perigo); }
.numeros-mon { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linha); }
.numeros-mon div { padding: 8px 0; border-bottom: 1px solid var(--linha); display: grid; }
.numeros-mon div:nth-child(odd) { padding-right: 10px; } .numeros-mon div:nth-child(even) { padding-left: 10px; border-left: 1px solid var(--linha); }
.numeros-mon dt { font-size: var(--t-xs); font-weight: 700; color: var(--sub); }
.numeros-mon dd { margin: 0; font-size: var(--t-lg); font-weight: 800; color: var(--cor-primaria-texto); font-variant-numeric: tabular-nums; }
.agente-mon details summary { min-height: 36px; font-size: var(--t-sm); }
.monitor-duas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) { .monitor-duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.monitor-duas section { display: grid; gap: 10px; align-content: start; min-width: 0; }
.monitor-duas h2 { margin-top: 10px; }
tr.fila-velha td { color: var(--perigo); font-weight: 700; }
.funil { display: grid; gap: 6px; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: var(--raio-g); padding: 14px 16px; }
.funil-linha { display: grid; grid-template-columns: minmax(120px, 42%) minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: var(--t-sm); }
.funil-barra { height: 10px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; }
.funil-barra i { display: block; height: 100%; background: var(--cor-primaria); border-radius: inherit; }
.funil-linha b { text-align: right; font-variant-numeric: tabular-nums; }
.etapas-mon { display: grid; gap: 12px; }
.fase-mon { background: var(--superficie); border: 1.5px solid var(--linha); border-radius: var(--raio-g); padding: 14px 16px; overflow-x: auto; }
.fase-mon h3 { margin: 0 0 10px; }
.fase-mon ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.fase-mon li { flex: 1 0 118px; display: grid; gap: 2px; align-content: start; padding: 10px; border-radius: 12px; background: var(--superficie-2); font-size: var(--t-xs); color: var(--sub); line-height: 1.3; }
.fase-mon li b { font-size: var(--t-xl); color: var(--sub); font-variant-numeric: tabular-nums; }
.fase-mon li.com { background: var(--primaria-suave); color: var(--texto); } .fase-mon li.com b { color: var(--cor-primaria-texto); }
.feed { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: var(--raio-g); max-height: 520px; overflow-y: auto; }
.feed li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 2px 10px; padding: 10px 14px; border-top: 1px solid var(--linha); font-size: var(--t-sm); }
.feed li:first-child { border-top: 0; }
.feed time { color: var(--sub); font-variant-numeric: tabular-nums; grid-row: span 2; }
.feed-origem { font-size: var(--t-xs); font-weight: 800; color: var(--cor-primaria-texto); letter-spacing: .02em; }
.feed-texto { overflow-wrap: anywhere; }
.feed-erro .feed-origem, .feed-alerta .feed-origem { color: var(--perigo); }


/* ---------- Recuperação de senha (tela de entrada) ---------- */
.link-acao { justify-self: center; background: none; border: 0; padding: 12px 8px; min-height: 48px; color: var(--cor-primaria-texto);
  font: inherit; font-size: var(--t-md); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.link-acao:hover { color: var(--primaria-escura); }
.painel-senha .nota { margin: 0; }
.estado-senha { display: grid; gap: 14px; justify-items: center; text-align: center; }
.estado-senha p { margin: 0; font-size: var(--t-base); line-height: 1.5; max-width: 42ch; color: var(--texto); }
.estado-senha .botao-secundario, .estado-senha .botao-principal { width: 100%; }
.estado-icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--primaria-suave); color: var(--cor-primaria-texto); }
.estado-icone .ic { width: 28px; height: 28px; }
#redefinir-invalido .estado-icone, #redefinir-invalido p { color: var(--texto); }
#redefinir-regra { font-size: var(--t-sm); }

/* =====================================================================================================================
   Visual 2026.3 — "Central de comando" (painel de controle da SOS e dos Masters) + telas da versão 03.
   O app de rua continua claro e legível ao sol; no modo Controle, no computador, o painel ganha um trilho escuro na cor
   da marca (qualquer cor de Master: o tom é derivado por color-mix e o texto do trilho é sempre claro), leituras em visor
   e tabelas densas. Ouro só na ação principal e no "hoje". Caminhos e abas na mesma ordem de antes.
   ===================================================================================================================== */
:root {
  --trilho: var(--trilho-marca, color-mix(in oklab, var(--cor-primaria) 62%, #0B0509));
  --trilho-2: var(--trilho-marca-2, color-mix(in oklab, var(--cor-primaria) 50%, #0B0509));
  --destaque-trilho: var(--destaque-trilho-marca, var(--cor-secundaria));
  --trilho-linha: rgb(255 255 255 / .10);
  --trilho-texto: #F6EEF3; --trilho-sub: #CDBBC6;
  --serie-atual: color-mix(in oklab, var(--cor-secundaria) 82%, #3A2600);
  --serie-anterior: color-mix(in oklab, var(--cor-primaria) 62%, #fff);
  --casa: #4B3B8F; --casa-fundo: #ECE8FA; --neutro: #4D3C47; --neutro-fundo: #EFE8EC;
}

/* ---- modo Controle × Vendas (mesmo login) ---- */
.modo-painel { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(255 255 255 / .12); margin-left: auto; flex: none; }
.modo-painel button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--texto-sobre-primaria);
  font: inherit; font-size: var(--t-sm); font-weight: 750; padding: 7px 12px; border-radius: 9px; min-height: 36px; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease); }
.modo-painel button .ic { width: 16px; height: 16px; }
.modo-painel button[aria-pressed="true"] { background: var(--cor-secundaria); color: var(--texto-sobre-secundaria); box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.modo-painel button:focus-visible { outline: 3px solid var(--cor-secundaria); outline-offset: 2px; }
@media (max-width: 520px) { .modo-painel span { display: none; } .modo-painel button { padding: 7px 10px; } }
.faixa-leitura { background: #EDE6FF; color: #2E2163; border-bottom: 1.5px solid #CBBDF5; padding: 9px 16px; font-size: var(--t-md); font-weight: 650; display: flex; gap: 8px; align-items: center; }

/* ---- central de comando no computador ---- */
@media (min-width: 1000px) {
  body[data-modo="controle"] { background: #F4F0F3; padding-bottom: 0; }
  body[data-modo="controle"] .topo { border-radius: 0; background: var(--trilho-2); color: #FFF; padding-left: 24px; padding-right: 24px; }
  body[data-modo="controle"] .conteudo:has(> #tela-admin:not([hidden])) { max-width: none; padding: 0 28px 32px 0; margin: 0; min-height: calc(100vh - 66px);
    background: linear-gradient(to right, var(--trilho) 272px, transparent 272px); } /* o trilho vai até o fim da página */
  body[data-modo="controle"] #tela-admin { grid-template-columns: 272px minmax(0, 1fr); column-gap: 32px; }
  body[data-modo="controle"] #tela-admin > .titulo-tela { grid-column: 2; padding-top: 24px; }
  body[data-modo="controle"] #tela-admin > #abas-admin { grid-row: 1 / span 60; position: static; align-self: start; max-height: none; overflow: visible;
    background: var(--trilho); border: 0; border-radius: 0; padding: 18px 12px 28px; } /* todas as abas à vista; o trilho rola com a página */
  body[data-modo="controle"] #abas-admin button { color: var(--trilho-texto); font-weight: 650; font-size: var(--t-md); gap: 10px; padding: 10px 12px; }
  body[data-modo="controle"] #abas-admin button .ic { color: var(--trilho-sub); width: 18px; height: 18px; }
  body[data-modo="controle"] #abas-admin button:not(.ativa):hover { background: rgb(255 255 255 / .08); }
  body[data-modo="controle"] #abas-admin button.ativa { background: rgb(255 255 255 / .14); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
  body[data-modo="controle"] #abas-admin button.ativa .ic { color: var(--destaque-trilho); }
  body[data-modo="controle"] #abas-admin button:focus-visible { outline: 3px solid var(--cor-secundaria); outline-offset: -3px; }
  body[data-modo="controle"] .grupo-abas { color: var(--trilho-sub); border-top: 1px solid var(--trilho-linha); margin-top: 10px; }
  body[data-modo="controle"] #menu { display: none; }
}
.grupo-abas { display: block; flex: none; font-size: var(--t-xs); font-weight: 750; letter-spacing: .04em; color: var(--sub); padding: 14px 12px 6px; }
@media (max-width: 999px) { .grupo-abas { display: none; } }

.cabeca-aba { display: flex; justify-content: space-between; gap: 16px; align-items: end; flex-wrap: wrap; }
.cabeca-aba h2 { margin: 0 0 4px; font-size: var(--t-xl); letter-spacing: -.02em; }
.cabeca-aba .nota { max-width: 72ch; }
.filtros-aba { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.campo.compacto { min-width: 180px; }
.campo.compacto input, .campo.compacto select { min-height: 44px; }
.exportar-mes { display: flex; gap: 10px; align-items: end; margin-left: auto; }
.secao { background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 18px; padding: 18px; display: grid; gap: 14px; min-width: 0; }
.secao > h3, fieldset.secao > legend { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-lg); color: var(--texto); }
fieldset.secao > legend { padding: 0 6px; font-weight: 800; }
.secao > h3 .ic { color: var(--cor-primaria-texto); }
.teste-email { align-items: end; } .teste-email .campo { flex: 1; min-width: 240px; }
.linha-acoes { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.grade-2 .largo { grid-column: 1 / -1; }
@media (max-width: 720px) { .grade-2, .grade-3 { grid-template-columns: 1fr; } }
.ic.mini { width: 14px; height: 14px; }

/* ---- comparativo diário (MoM): visor de leituras + barras do mês ---- */
.comparativo { display: grid; gap: 0; border-radius: 20px; overflow: hidden; border: 1.5px solid var(--linha); background: var(--superficie); }
.comparativo:empty { display: none; }
.comparativo-cabeca { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding: 18px 20px 14px;
  background: var(--trilho); color: var(--trilho-texto); }
.comparativo-cabeca h2 { margin: 0; color: #fff; font-size: var(--t-xl); letter-spacing: -.02em; }
.comparativo-cabeca .nota, .comparativo-cabeca .campo { color: var(--trilho-sub); }
.leituras-mom { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0; background: var(--trilho); border-top: 1px solid var(--trilho-linha); }
.leitura-mom { padding: 14px 20px 18px; display: grid; gap: 2px; border-left: 1px solid var(--trilho-linha); color: var(--trilho-sub); }
.leitura-mom:first-child { border-left: 0; }
.leitura-mom dt { font-size: var(--t-sm); font-weight: 700; }
.leitura-mom dd { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.leitura-mom dd b { font-size: 40px; line-height: 1.05; font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.leitura-mom.destaque dd b { color: var(--destaque-trilho); }
.leitura-mom small { font-size: var(--t-sm); }
.leitura-mom .de { font-size: var(--t-md); font-weight: 650; }
.variacao { font-size: var(--t-sm); font-weight: 800; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.variacao.alta { background: #CFF2DC; color: #0E4D2B; }
.variacao.baixa { background: #FFD9D3; color: #7A1810; }
.variacao.neutro { background: rgb(255 255 255 / .14); color: var(--trilho-texto); }
.grafico-mom { margin: 0; padding: 16px 20px 6px; display: grid; gap: 8px; }
.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--t-sm); font-weight: 650; color: var(--sub); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legenda i.chave-atual { background: var(--serie-atual); } .legenda i.chave-anterior { background: var(--serie-anterior); }
.grafico-caixa { position: relative; }
.grafico-caixa svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico-mom .grade { stroke: #E7DEE3; stroke-width: 1; }
.grafico-mom .eixo-y, .grafico-mom .eixo-x { fill: var(--sub); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grafico-mom .eixo-y { text-anchor: end; }
.grafico-mom .eixo-x { text-anchor: middle; }
.grafico-mom .eixo-x.hoje { fill: var(--texto); font-weight: 800; }
.grafico-mom .serie-atual { fill: var(--serie-atual); }
.grafico-mom .serie-anterior { fill: var(--serie-anterior); }
.grafico-mom .faixa-hoje { fill: color-mix(in srgb, var(--cor-secundaria) 16%, #fff); }
.grafico-mom .rotulo-valor { fill: var(--texto); font-size: 12px; font-weight: 800; }
.grafico-mom .alvo { fill: transparent; cursor: crosshair; }
.grafico-mom g.dia:hover .serie-atual, .grafico-mom g.dia:hover .serie-anterior { filter: brightness(.92); }
.dica-grafico { position: absolute; z-index: 2; max-width: 240px; background: var(--tinta); color: #fff; font-size: var(--t-sm); font-weight: 600;
  padding: 8px 10px; border-radius: 10px; box-shadow: var(--sombra-media); pointer-events: none; }
.tabela-mom { padding: 0 20px 14px; font-size: var(--t-sm); }
.tabela-mom summary { cursor: pointer; font-weight: 700; color: var(--cor-primaria-texto); padding: 6px 0; }
.tabela-mom tr.hoje td { font-weight: 800; background: color-mix(in srgb, var(--cor-secundaria) 14%, #fff); }

/* ---- governança de campo ---- */
.contagem-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.status-cartao { background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.status-cartao dt { font-size: var(--t-sm); font-weight: 700; color: var(--sub); display: flex; align-items: center; gap: 8px; }
.status-cartao dt::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--cor-ponto, var(--neutro)); flex: none; }
.status-cartao dd { margin: 0; font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.status-cartao.ok { --cor-ponto: var(--ok); } .status-cartao.atencao { --cor-ponto: #C77C00; } .status-cartao.casa { --cor-ponto: var(--casa); }
.status-cartao.neutro { --cor-ponto: #8D7A86; } .status-cartao.parado { --cor-ponto: var(--perigo); }
.pilula { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 750; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pilula.ok { background: var(--ok-fundo); color: var(--ok); } .pilula.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.pilula.perigo { background: var(--perigo-fundo); color: var(--perigo); } .pilula.casa { background: var(--casa-fundo); color: var(--casa); }
.pilula.neutro { background: var(--neutro-fundo); color: var(--neutro); } .pilula.parado { background: #F6E3E1; color: #7A1810; }
.tabela-campo { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.tabela-campo th { position: sticky; top: 0; background: var(--superficie-2); text-align: left; font-size: var(--t-sm); color: var(--sub); padding: 10px 12px; white-space: nowrap; }
.tabela-campo td { padding: 10px 12px; border-top: 1px solid var(--linha); vertical-align: top; }
.tabela-campo tbody tr:hover td { background: var(--primaria-tenue); }
.tabela-campo td small, #aba-backups td small { display: block; color: var(--sub); font-size: var(--t-xs); }
.tabela-campo .num { text-align: right; font-variant-numeric: tabular-nums; }
.aviso-n { color: var(--perigo); }
.vazio-tabela, .vazio-tela { color: var(--sub); text-align: center; padding: 22px 12px; font-size: var(--t-md); }
.linha-visita { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; background: var(--superficie);
  border: 1.5px solid var(--linha); border-radius: 14px; padding: 10px 14px; }
.linha-visita .hora { font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cor-primaria-texto); }
.linha-visita small { display: block; color: var(--sub); font-size: var(--t-sm); }
@media (max-width: 560px) { .linha-visita { grid-template-columns: 48px minmax(0, 1fr); } .linha-visita > :nth-child(n+3) { grid-column: 2; justify-self: start; } }

/* ---- comunicação (painel) ---- */
.lista-slots { display: grid; gap: 10px; }
.slot-video, .slot-atalho, .slot-email { display: grid; gap: 12px; align-items: end; background: var(--superficie-2); border-radius: 14px; padding: 12px; }
.slot-video { grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) 120px auto; }
.slot-video .largo { grid-column: 2 / 4; }
.slot-atalho { grid-template-columns: 40px repeat(4, minmax(0, 1fr)) auto auto; }
.slot-email { grid-template-columns: 40px minmax(0, 1.6fr) minmax(0, 1fr) auto; }
.numero-slot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cor-primaria); color: var(--texto-sobre-primaria);
  font-weight: 800; align-self: center; font-variant-numeric: tabular-nums; }
.mini-video { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; align-self: center; }
.mini-video.vazio { display: grid; place-items: center; background: var(--linha); color: var(--sub); font-size: var(--t-xs); font-weight: 700; }
@media (max-width: 900px) {
  .slot-video, .slot-atalho, .slot-email { grid-template-columns: 40px minmax(0, 1fr); }
  .slot-video > *:not(.numero-slot), .slot-atalho > *:not(.numero-slot), .slot-email > *:not(.numero-slot), .slot-video .largo { grid-column: 2; }
}
.soltar-arte { display: flex; align-items: center; gap: 12px; padding: 18px; border: 2px dashed var(--linha-forte); border-radius: 14px; background: var(--primaria-tenue);
  font-weight: 700; color: var(--cor-primaria-texto); cursor: pointer; flex-wrap: wrap; }
.soltar-arte input { font: inherit; font-size: var(--t-sm); color: var(--sub); margin-left: auto; max-width: 100%; }
.soltar-arte:focus-within { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.compliance { display: flex; align-items: center; gap: 6px; }
.linha-chave { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: end; }
@media (max-width: 640px) { .linha-chave { grid-template-columns: 1fr; } }
.linha-acesso { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; background: var(--superficie);
  border: 1.5px solid var(--linha); border-radius: 14px; padding: 10px 14px; }
.linha-acesso small { display: block; color: var(--sub); font-size: var(--t-sm); }
.linha-acesso.inativo b { color: var(--sub); }
.estado-google { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--t-md); flex-wrap: wrap; }
.estado-google.ok .ic { color: var(--ok); }
.link-acao.perigo { color: var(--perigo); }
code { font-size: .92em; background: var(--superficie-2); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }

/* ---- visualizador: tudo à vista, nada de ações ---- */
body.somente-leitura .aba form:not(:has([data-consulta])):not([data-consulta]) button[type="submit"], body.somente-leitura .aba [data-remover-comunicado],
body.somente-leitura .aba [data-arte], body.somente-leitura .aba .interruptor:has([data-arte]), body.somente-leitura #menu [data-ir=tela-fila], body.somente-leitura .aba [data-limpar-chave],
body.somente-leitura .aba [data-reenviar-backup], body.somente-leitura .aba [data-visualizador], body.somente-leitura .aba .soltar-arte,
body.somente-leitura #aba-comunicacao form, body.somente-leitura #atalho-visita, body.somente-leitura .cta-venda,
body.somente-leitura #menu .flutuante { display: none !important; }
body.somente-leitura .aba input[readonly], body.somente-leitura .aba textarea[readonly] { background: var(--superficie-2); }

/* ---- início (vendedor): atalhos de outros sistemas, comunicados e mural ---- */
.atalhos-rede { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.atalho-rede { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 52px; padding: 8px 14px 8px 8px; background: var(--superficie);
  border: 1.5px solid var(--linha); border-radius: 14px; color: var(--texto); text-decoration: none; font-weight: 750; font-size: var(--t-md); }
.atalho-rede:hover { border-color: var(--primaria-borda); text-decoration: none; }
.atalho-rede img, .atalho-rede-icone { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; }
.atalho-rede-icone { display: grid; place-items: center; background: var(--primaria-suave); color: var(--cor-primaria-texto); }
.atalho-rede > .ic.mini { color: var(--sub); }
.bloco-comunicados { display: grid; gap: 10px; }
.bloco-cabeca { display: flex; justify-content: space-between; align-items: center; }
.bloco-cabeca h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.bloco-cabeca h2 .ic { color: var(--cor-primaria-texto); }
.comunicado { background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; }
.comunicado.fixado { border-color: color-mix(in srgb, var(--cor-secundaria) 70%, #000); background: color-mix(in srgb, var(--cor-secundaria) 8%, #fff); }
.comunicado header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-sm); }
.comunicado header time { margin-left: auto; color: var(--sub); font-variant-numeric: tabular-nums; }
.comunicado p { margin: 0; font-size: var(--t-base); line-height: 1.55; max-width: 70ch; }
.comunicado footer { font-size: var(--t-sm); color: var(--sub); }
.selo-nivel { font-size: var(--t-xs); font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.selo-nivel.sos { background: var(--cor-primaria); color: var(--texto-sobre-primaria); }
.selo-nivel.rede { background: var(--cor-secundaria); color: var(--texto-sobre-secundaria); }
.fixado-rotulo { display: inline-flex; align-items: center; gap: 4px; font-weight: 750; color: var(--atencao); }
.boas-vindas-feed { margin: 0; background: var(--primaria-tenue); border: 1.5px solid var(--primaria-borda); border-radius: 16px; padding: 16px; font-size: var(--t-base); font-weight: 600; }
.faixa-mural { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: thin; }
.miniatura-arte { flex: none; width: 168px; scroll-snap-align: start; border: 0; padding: 0; background: var(--superficie); border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 1.5px var(--linha); text-align: left; cursor: pointer; font: inherit; }
.miniatura-arte img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.miniatura-arte span { display: block; padding: 8px 10px; font-size: var(--t-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.arte { margin: 0; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 16px; overflow: hidden; display: grid; align-content: start; }
.arte img { width: 100%; height: auto; display: block; background: var(--superficie-2); }
.arte figcaption { padding: 10px 12px 12px; display: grid; gap: 4px; justify-items: start; }
.arte.retirada img { filter: grayscale(1); opacity: .55; }
.feed-comunicados { display: grid; gap: 10px; }

/* ---- Suporte de Vendas ---- */
.grade-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.grade-videos > .vazio-tela { grid-column: 1 / -1; }
.video { background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 18px; overflow: hidden; display: grid; align-content: start; }
.video-capa { position: relative; border: 0; padding: 0; cursor: pointer; display: block; width: 100%; aspect-ratio: 16 / 9; background: #120A10; }
.video-capa img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity .2s var(--ease); }
.video-capa:hover img { opacity: 1; }
.video-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cor-secundaria); color: var(--texto-sobre-secundaria); box-shadow: 0 6px 18px rgb(0 0 0 / .35); transition: transform .2s var(--ease); }
.video-play .ic { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.video-capa:hover .video-play { transform: scale(1.06); }
.video-capa:focus-visible { outline: 4px solid var(--cor-destaque); outline-offset: -4px; }
.video-quadro { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }
.video-texto { padding: 12px 14px 14px; display: grid; gap: 6px; justify-items: start; }
.video-texto h3 { margin: 0; font-size: var(--t-lg); }
.video.vazio { border-style: dashed; place-items: center; text-align: center; padding: 24px 18px; gap: 8px; min-height: 180px; background: transparent; }
.video-vazio-icone { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--superficie-2); color: var(--sub); }

/* ---- Informar visita (folha) e aviso de conflito (não bloqueia) ---- */
dialog.folha { border: 0; padding: 0; border-radius: 22px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: var(--superficie);
  color: var(--texto); box-shadow: 0 24px 60px rgb(20 8 16 / .35); }
dialog.folha::backdrop { background: rgb(20 8 16 / .5); }
dialog.folha form { padding: 20px; }
dialog.folha h2 { margin: 0; display: flex; gap: 8px; align-items: center; }
dialog.folha h2 .ic { color: var(--cor-primaria-texto); }
@media (max-width: 640px) { dialog.folha { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } }
@media (prefers-reduced-motion: no-preference) { dialog.folha[open] { animation: folha-sobe .24s var(--ease); } @keyframes folha-sobe { from { transform: translateY(16px); opacity: .6 } } }
.gps-estado { margin: 0; font-size: var(--t-md); font-weight: 650; padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); color: var(--sub); }
.gps-estado.ok { background: var(--ok-fundo); color: var(--ok); } .gps-estado.sem { background: var(--atencao-fundo); color: var(--atencao); }
.acoes-folha { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.alerta-conflito { position: fixed; z-index: 40; left: 12px; right: 12px; top: calc(76px + env(safe-area-inset-top, 0px)); max-width: 560px; margin: 0 auto;
  max-height: calc(100dvh - 96px); overflow-y: auto;
  background: var(--superficie); border: 2px solid #C77C00; border-radius: 18px; box-shadow: 0 16px 40px rgb(20 8 16 / .28); overflow: hidden; }
.progresso-envio { height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin: 8px 0 2px; }
.progresso-envio span { display: block; height: 100%; background: var(--cor-primaria); border-radius: inherit; }
.alerta-conflito .cabeca { display: flex; align-items: center; gap: 8px; background: var(--atencao-fundo); color: var(--atencao); padding: 10px 14px; font-size: var(--t-base); }
.alerta-conflito ul { margin: 0; padding: 10px 14px 0 34px; display: grid; gap: 6px; font-size: var(--t-md); }
.alerta-conflito .nota { padding: 6px 14px 0; }
.alerta-conflito > button { margin: 12px 14px 14px; width: calc(100% - 28px); justify-content: center; }
@media (prefers-reduced-motion: no-preference) { .alerta-conflito:not([hidden]) { animation: aviso-entra .22s var(--ease); } }

/* ---- entrada com Google ---- */
.entrar-google { display: grid; gap: 10px; justify-items: stretch; text-align: center; }
.ou { display: flex; align-items: center; gap: 12px; color: var(--sub); font-size: var(--t-sm); font-weight: 700; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.botao-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: var(--raio); border: 1.5px solid #747775;
  background: #FFF; color: #1F1F1F; font: inherit; font-weight: 700; font-size: var(--t-base); cursor: pointer; }
.botao-google:hover { background: #F8F9FA; }
.botao-google:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.botao-google .ic { width: 20px; height: 20px; }

/* ---- versão 04: assistente de treinamento e suporte ---- */
.botao-ajuda { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid rgb(255 255 255 / .45); background: rgb(255 255 255 / .14); color: inherit;
  font: inherit; font-size: var(--t-sm); font-weight: 750; padding: 7px 12px; border-radius: 999px; min-height: 40px; cursor: pointer; margin-left: auto; }
.botao-ajuda:hover { background: rgb(255 255 255 / .24); }
.botao-ajuda:focus-visible { outline: 3px solid var(--cor-secundaria); outline-offset: 2px; }
.botao-ajuda .ic { width: 18px; height: 18px; }
@media (max-width: 520px) { .botao-ajuda span { display: none; } .botao-ajuda { padding: 0; width: 40px; justify-content: center; flex: none; } .usuario-chip:not(:empty) { max-width: 42%; } }
.faixa-treinamento { position: sticky; top: 0; z-index: 30; background: #FFF4D6; color: #6B4200; border-bottom: 1.5px solid #F0C96A; padding: 6px 16px;
  font-size: var(--t-sm); font-weight: 700; display: flex; gap: 10px; align-items: center; }
.faixa-treinamento > span { flex: 1; min-width: 0; }
.faixa-treinamento .link-acao { min-height: 40px; padding: 8px 4px; white-space: nowrap; }
.cartao-tutorial { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; font: inherit;
  color: var(--texto); background: var(--primaria-tenue); border: 1.5px dashed var(--primaria-borda); border-radius: var(--raio-g); padding: 14px 16px; }
.cartao-tutorial > .ic { width: 28px; height: 28px; color: var(--cor-primaria-texto); }
.cartao-tutorial b { display: block; font-size: var(--t-base); }
.cartao-tutorial small { color: var(--sub); font-size: var(--t-sm); }
.cartao-tutorial:hover { border-style: solid; }
.barra-painel { display: flex; justify-content: flex-end; gap: 8px; margin: -4px 0 4px; }
@media (min-width: 1000px) { body[data-modo="controle"] #tela-admin > .barra-painel { grid-column: 2; margin: 0; } }
.saudacao { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(var(--altura-menu, 72px) + 16px + env(safe-area-inset-bottom, 0px)); max-width: 460px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--superficie); color: var(--texto);
  border: 1.5px solid var(--primaria-borda); border-radius: 18px; padding: 12px 8px 12px 14px; box-shadow: 0 16px 40px rgb(20 8 16 / .25); }
.saudacao p { margin: 0; font-size: var(--t-md); font-weight: 600; }
.saudacao-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-primaria); color: var(--texto-sobre-primaria); }
@media (prefers-reduced-motion: no-preference) { .saudacao:not([hidden]) { animation: folha-sobe .3s var(--ease); } }
.ajuda-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 16px 8px 20px; }
.ajuda-abas { margin: 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); justify-self: stretch; }
.ajuda-abas button { padding: 9px 6px; }
.ajuda-corpo { padding: 16px 20px 22px; display: grid; gap: 14px; overflow-y: auto; max-height: calc(100dvh - 170px); }
.ajuda-corpo .formulario { padding: 0; }
.opcoes-treino { display: grid; gap: 10px; }
.opcao-treino { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 16px; padding: 14px; }
.opcao-treino:hover { border-color: var(--cor-primaria); background: var(--primaria-tenue); }
.opcao-treino > .ic { width: 26px; height: 26px; color: var(--cor-primaria-texto); margin-top: 2px; }
.opcao-treino b { display: block; font-size: var(--t-base); }
.opcao-treino small { color: var(--sub); font-size: var(--t-sm); }
.interruptor { display: flex; gap: 10px; align-items: center; font-weight: 650; font-size: var(--t-md); }
.interruptor input { width: 22px; height: 22px; accent-color: var(--cor-primaria); }
.chips-duvidas { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-duvida { font: inherit; font-size: var(--t-sm); font-weight: 650; text-align: left; border: 1.5px solid var(--linha); background: var(--superficie-2); color: var(--texto);
  border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.chip-duvida:hover { border-color: var(--cor-primaria); }
.anexar-prints { position: relative; display: flex; gap: 10px; align-items: center; justify-content: center; border: 1.5px dashed var(--linha-forte); border-radius: 14px;
  padding: 14px; font-weight: 700; color: var(--cor-primaria-texto); cursor: pointer; }
.anexar-prints input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.anexar-prints:focus-within { outline: 3px solid var(--cor-secundaria); outline-offset: 2px; }
.miniaturas-prints { display: flex; gap: 8px; flex-wrap: wrap; }
.miniaturas-prints img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--linha); }
.resposta-assistente { border-radius: 16px; border: 1.5px solid var(--primaria-borda); background: var(--primaria-tenue); padding: 12px 14px; display: grid; gap: 8px; }
.resposta-assistente.encaminhado { border-color: #F0C96A; background: #FFF8E6; }
.resposta-assistente header { display: flex; gap: 8px; align-items: center; }
.resposta-assistente header .botao-icone { margin-left: auto; }
.resposta-assistente p { margin: 0; font-size: var(--t-md); line-height: 1.5; }
.linha-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pedido { border: 1.5px solid var(--linha); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.pedido header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pedido small { color: var(--sub); }
.pedido p, .chamado p { margin: 0; font-size: var(--t-md); }
.pedido .pergunta, .chamado .pergunta { font-weight: 650; }
dialog.folha-contrato { width: min(860px, calc(100vw - 24px)); height: min(88dvh, 1100px); z-index: 60; position: fixed; inset: 0; margin: auto; }
dialog.folha-contrato[open] { display: grid; grid-template-rows: auto auto 1fr; }
dialog.folha-contrato > .nota { margin: 0 20px 8px; }
.moldura-contrato { width: 100%; height: 100%; border: 0; border-top: 1px solid var(--linha); background: #fff; border-radius: 0 0 22px 22px; }
.tour { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.tour[hidden] { display: none; }
.tour-veu { position: absolute; inset: 0; background: rgb(20 8 16 / .55); pointer-events: auto; }
.tour:has(.tour-foco:not([hidden])) .tour-veu { background: transparent; }
.tour-foco { position: fixed; border-radius: 14px; box-shadow: 0 0 0 4px #FFD34D, 0 0 0 9999px rgb(20 8 16 / .55); pointer-events: none; transition: all .25s var(--ease); }
.tour-foco[hidden] { display: none; }
.tour-cartao { position: fixed; width: min(380px, calc(100vw - 24px)); background: var(--superficie); color: var(--texto); border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 24px 60px rgb(20 8 16 / .4); pointer-events: auto; display: grid; gap: 8px; }
.tour-cartao.centro { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-cartao h2 { margin: 0; font-size: var(--t-lg); }
.tour-cartao p { margin: 0; font-size: var(--t-md); line-height: 1.5; }
.tour-cartao .tour-progresso { color: var(--cor-primaria-texto); font-weight: 750; font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; }
.tour-acoes { display: flex; gap: 8px; align-items: center; }
.tour-acoes [data-tour=proximo] { margin-left: auto; }
.tour-cartao .link-acao { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .tour-foco { transition: none; } }
.passos-local { display: grid; gap: 10px; padding-left: 22px; font-size: var(--t-md); }
.aviso-local { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--atencao-fundo); color: var(--atencao); }
.aviso-local .ic { width: 32px; height: 32px; }
.lista-chamados { display: grid; gap: 10px; margin: 16px 0; }
.chamado { background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 16px; padding: 12px 16px; display: grid; gap: 10px; }
.chamado.aberto { border-color: #F0C96A; }
.chamado summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }
.chamado summary small { color: var(--sub); }
.contexto-chamado { display: grid; gap: 6px; margin: 0; font-size: var(--t-sm); background: var(--superficie-2); border-radius: 12px; padding: 10px 12px; }
.contexto-chamado div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.contexto-chamado dt { color: var(--sub); font-weight: 700; }
.contexto-chamado dd { margin: 0; word-break: break-word; }
.linha-acesso.inativo { opacity: .6; }
.localizacao-obrigatoria { border: 1.5px solid #F0C96A; border-radius: 14px; padding: 12px 14px; background: #FFFBF0; }
.localizacao-obrigatoria .nota.ok { color: var(--ok); font-weight: 700; } .localizacao-obrigatoria .nota.erro { color: var(--perigo); font-weight: 700; }
body.sem-localizacao #menu, body.sem-localizacao .alerta-conflito, body.sem-localizacao .saudacao, body.sem-localizacao #botao-ajuda { display: none !important; }

/* ---- versão 04: backup no Drive em 5 pastas ---- */
.destino-backup { display: grid; gap: 12px; }
.cabeca-destino { display: flex; justify-content: space-between; gap: 12px; align-items: start; flex-wrap: wrap; }
.cabeca-destino h3 { margin: 0; } .cabeca-destino small { color: var(--sub); }
.copias-backup { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 10px; }
.copia-backup { border: 1.5px solid var(--linha); border-radius: 14px; padding: 10px 12px; background: var(--superficie); }
.copia-backup.atual { border-color: var(--cor-primaria); }
.copia-backup small { display: block; color: var(--sub); font-size: var(--t-sm); margin-top: 4px; }
.pastas-backup { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.pasta-backup { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; border: 1.5px solid var(--linha); border-radius: 14px; padding: 10px 12px; background: var(--superficie); }
.pasta-backup b { display: block; font-size: var(--t-md); } .pasta-backup small { color: var(--sub); font-size: var(--t-sm); }
.pasta-num { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--primaria-tenue); color: var(--cor-primaria-texto); font-weight: 800; }
.nota.erro { color: var(--perigo); font-weight: 650; }
.documento-perguntas { display: grid; gap: 10px; }
.doc-ativo { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1.5px solid var(--primaria-borda); background: var(--primaria-tenue);
  border-radius: 14px; padding: 10px 14px; }
.doc-ativo b { display: block; } .doc-ativo small { color: var(--sub); }
.lista-perguntas { display: grid; gap: 8px; padding-left: 22px; font-size: var(--t-md); max-height: 420px; overflow-y: auto; }
.lista-perguntas li span { display: block; color: var(--sub); } .lista-perguntas small { color: var(--cor-primaria-texto); font-weight: 700; }

/* ---- linha "Redução" das pendências (observação da gestão para o vendedor) ---- */
.linha-reducao { display: grid; gap: 6px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--primaria-tenue); border: 1.5px dashed var(--primaria-borda); }
.linha-reducao .campo { gap: 4px; }
.rotulo-reducao { font-weight: 800; color: var(--cor-primaria-texto); letter-spacing: .02em; }
.linha-reducao textarea { min-height: 54px; }
.obs-reducao { margin: 8px 0 4px; padding: 8px 12px; border-left: 4px solid var(--cor-primaria); background: var(--primaria-tenue); border-radius: 0 10px 10px 0; }
.obs-reducao b { color: var(--cor-primaria-texto); } .obs-reducao p { margin: 2px 0; font-size: var(--t-md); }

/* Integração de API (webhook do parceiro) */
.secao-integracao h3 { display: flex; align-items: center; gap: 8px; }
.chave-webhook { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-md); padding: 6px 12px; flex: 1 1 260px; }
/* entrada: acesso ao cadastro de vendedor novo (pelo link da rede) */
.novo-cadastro { text-align: center; margin: 4px 0 0; } .novo-cadastro .link-acao { display: inline; min-height: 48px; padding: 12px 4px; }
/* Meu perfil: leitura por padrão; edição com Salvar alterações / Cancelar */
#form-perfil[data-modo="ver"] input[readonly] { background: var(--superficie-2); color: var(--texto); cursor: default; }
.acoes-perfil { display: grid; gap: 10px; }
/* Comissões: percentual de cada dedução da conta ao lado da caixa */
.linha-deducao { display: grid; grid-template-columns: 1fr minmax(110px, 140px); gap: 10px; align-items: end; }
.linha-deducao .pct-deducao { margin: 0; }
/* Chaves e credenciais: versões salvas (histórico) */
.historico-chave { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; grid-column: 1 / -1; }
.historico-chave .campo { margin: 0; min-width: 220px; }

/* ===================================================================== Versão 06: botão SOS e demonstração para novos Masters */
.botao-sos { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  transition: transform .15s ease; -webkit-tap-highlight-color: transparent; }
.botao-sos img { width: 40px; height: 40px; display: block; border-radius: 50%; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .28)); }
.botao-sos:hover { transform: scale(1.06); }
.botao-sos:active { transform: scale(.94); }
.botao-sos:focus-visible { outline: 3px solid var(--cor-secundaria); outline-offset: 2px; }
.botao-sos:not([hidden]) ~ .botao-ajuda { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .botao-sos { transition: none; } }
.faixa-demo { position: sticky; top: 0; z-index: 30; background: var(--ok-fundo); color: var(--ok); border-bottom: 1.5px solid #A9D5B8; padding: 6px 16px;
  font-size: var(--t-sm); font-weight: 650; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.faixa-demo > span { flex: 1; min-width: 220px; }
.faixa-demo .link-acao { min-height: 40px; padding: 8px 4px; white-space: nowrap; color: var(--ok); font-weight: 800; }
body.treinando .faixa-demo { display: none; } /* o tutorial tem a faixa dele */
.demo-dialogo { display: grid; gap: 14px; }
.demo-estado { display: grid; gap: 12px; }
.demo-ativa { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.demo-ativa small { color: var(--sub); }
.demo-envio { flex-wrap: wrap; }
.form-botao-sos { margin-bottom: 16px; display: grid; gap: 12px; }
.botao-sos-previa { display: flex; gap: 14px; align-items: center; }
.botao-sos-previa img { flex: none; border-radius: 50%; }
.botao-sos-previa h3 { margin: 0 0 4px; }