/* Área do usuário ("Você") — escopo .op-voce. Usa só as variáveis do tema
 * operacional (--exp-*); funciona no escuro (padrão) e no claro. */

/* Escala de texto: preferência guardada em html[data-op-escala]. Vale para
 * #app e para os diálogos (.modal), que L.ui pendura em body, irmão de #app. */
html[data-op-escala="menor"] #app, html[data-op-escala="menor"] .modal { zoom: .92; }
html[data-op-escala="normal"] #app, html[data-op-escala="normal"] .modal { zoom: 1; }
html[data-op-escala="maior"] #app, html[data-op-escala="maior"] .modal { zoom: 1.1; }
html[data-op-escala="maximo"] #app, html[data-op-escala="maximo"] .modal { zoom: 1.22; }
/* O Studio e um viewport completo dentro de um iframe. Aplicar `zoom` no
 * ancestral muda a caixa pintada sem mudar o viewport interno no Safari:
 * sobra uma faixa branca e o editor vira uma miniatura. A preferencia continua
 * guardada e volta a valer assim que a pessoa sai do Editor. */
html[data-op-escala] #app:has(.op-main--editor) { zoom: 1; }
/* O player do YouTube tem a mesma fronteira de viewport do Studio. Quando o
 * app inteiro usa `zoom`, o Safari reduz o conteúdo do iframe, mas conserva a
 * caixa externa: aparecem faixas brancas à direita e embaixo do vídeo. A sala
 * ao vivo trabalha em escala real enquanto estiver aberta; ao fechá-la, a
 * preferência da pessoa volta a valer sem ser apagada. */
html[data-op-escala] #app:has(.op-live-room:not([hidden])) { zoom: 1; }

/* Sem teto próprio (rebranding de 26/09/2026, "a tela não fecha tudo"): a área ocupa a casca inteira,
 * alinhada à esquerda como as outras abas, e a grade abaixo ganha colunas com a largura. Vale nos dois temas. */
.op-voce { display: grid; gap: 20px; color: var(--exp-ink); }
/* Só os ícones do módulo de ícones (.op-icone). Os SVGs que vêm de outros módulos
 * (selo de rede do L.previas.avatar, por exemplo) mantêm o próprio desenho. */
.op-voce .op-icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.op-voce__glifo { display: inline-block; min-width: 1em; font-size: 15px; font-weight: 600; line-height: 1; text-align: center; }

/* Cabeçalho */
.op-voce__cabecalho { display: flex; align-items: center; gap: 18px; padding: 6px 4px 2px; }
.op-voce__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(.68 .19 262.9), var(--exp-accent) 55%, oklch(.42 .2 262.9)); color: #fff;
  font-size: 22px; font-weight: 600; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px var(--exp-line);
}
.op-voce__quem { display: grid; gap: 2px; min-width: 0; }
.op-voce__quem h1 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--exp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-voce__quem p { margin: 0; font-size: 14px; color: var(--exp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-voce__quem small { font-size: 11.5px; color: var(--exp-muted); letter-spacing: .02em; }

/* Grade e cartões */
/* Colunas independentes: um cartão comprido não deixa buracos entre os
 * cartões curtos das outras colunas. A ordem de leitura vem do HTML. */
.op-voce__grade { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
.op-voce__coluna { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; }
.op-voce__coluna > .op-voce__cartao { grid-column: auto; }
.op-voce__cartao {
  min-width: 0; padding: 16px 18px 14px; border: 1px solid var(--exp-line); border-radius: 14px;
  background: var(--exp-paper); color: var(--exp-ink); box-shadow: none;
  container: voce-cartao / inline-size;
}
.op-voce__cartao--uso { grid-column: span 2; }
.op-voce__cartao-intro { margin: -2px 0 8px; font-size: 13px; line-height: 1.45; color: var(--exp-muted); }
.op-voce__titulo {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--exp-muted);
}
.op-voce__titulo .op-icone { width: 15px; height: 15px; }

/* Linhas: ícone grande | rótulo | controle */
.op-voce__linhas { list-style: none; margin: 0; padding: 0; }
.op-voce__linha {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 0; border-top: 1px solid var(--exp-line);
}
.op-voce__linha:first-child { border-top: 0; }
.op-voce__icone {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; background: var(--surface-soft); color: var(--exp-muted);
}
.op-voce__icone .op-icone { width: 20px; height: 20px; }
.op-voce__rotulo { min-width: 0; font-size: 14px; font-weight: 500; color: var(--exp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-voce__rotulo-dica { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; line-height: 1.35; color: var(--exp-muted); white-space: normal; }
.op-voce__rotulo--valor { font-weight: 500; }
.op-voce__controle { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.op-voce__valor { max-width: 240px; font-size: 13.5px; color: var(--exp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-voce__grupo { display: inline-flex; gap: 6px; }
.op-voce__grupo--tema {
  gap: 3px; padding: 3px; border: 1px solid var(--exp-line); border-radius: 12px;
  background: var(--surface-soft);
}
.op-voce__grupo--tema .op-voce__ib--tema {
  width: auto; height: 34px; gap: 7px; padding: 0 11px; border: 0; border-radius: 9px;
  background: transparent; color: var(--exp-muted); font-size: 12px;
}
.op-voce__grupo--tema .op-voce__ib--tema .op-icone { width: 15px; height: 15px; }
.op-voce__grupo--tema .op-voce__ib--tema[aria-pressed="true"] {
  background: var(--exp-paper); color: var(--exp-ink); box-shadow: 0 1px 3px rgba(16,24,42,.12);
}
.op-voce__linha--vazia .op-voce__rotulo { color: var(--exp-muted); }
.op-voce__plano-nome { font-weight: 600; letter-spacing: -.01em; }

/* Botões-ícone */
.op-voce__ib {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  width: 40px; height: 40px; padding: 0; border: 1px solid var(--exp-line); border-radius: 10px;
  background: transparent; color: var(--exp-muted); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.op-voce__ib:hover { background: var(--surface-soft); color: var(--exp-ink); }
.op-voce__ib[aria-pressed="true"] { background: var(--exp-accent-soft); color: var(--exp-accent-text); border-color: transparent; }
.op-voce__ib:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 2px; }
.op-voce__ib--rotulado { width: auto; padding: 0 14px 0 12px; }
.op-voce__ib--rotulado span { white-space: nowrap; }
/* O idioma no ar sem revisão nativa (idiomas.mjs, beta): a marca discreta ao lado do nome. */
.op-voce__ib--rotulado .op-voce__beta { margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; line-height: 14px; opacity: .75; }
.op-voce__ib--fundador { color: var(--exp-accent-text); border-color: var(--exp-accent-soft); }
.op-voce__ib--texto span { font-weight: 600; line-height: 1; }
.op-voce__ib--menor span { font-size: 11px; }
.op-voce__ib--normal span { font-size: 14px; }
.op-voce__ib--maior span { font-size: 17px; }
.op-voce__ib--maximo span { font-size: 20px; }

/* Campo de telefone */
.op-voce__campo { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.op-voce__dica { flex-basis: 100%; font-size: 11.5px; line-height: 1.3; color: oklch(.62 .2 25); text-align: right; }
.op-voce__dica[hidden] { display: none; }
.op-voce__campo input {
  box-sizing: border-box; width: 156px; height: 40px; padding: 0 12px; border: 1px solid var(--exp-line); border-radius: 8px;
  background: var(--surface-soft); color: var(--exp-ink); font-size: 14px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
}
.op-voce__campo input::placeholder { color: var(--exp-muted); opacity: .7; }
.op-voce__campo input:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 1px; }
.op-voce__campo input[aria-invalid="true"] { border-color: oklch(.62 .2 25); }
/* Tema escuro: o contorno de linha (#333) some sobre o preenchimento #202020;
 * o campo usa a linha de campo da identidade (--line-strong, #777). O vermelho
 * de inválido continua valendo. O claro não muda. */
body.produto-operacional[data-op-tema="escuro"] .op-voce__campo input:not([aria-invalid="true"]) { border-color: var(--line-strong); }

/* Selos e estados */
.op-voce__selo {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--exp-accent-soft); color: var(--exp-accent-text);
}
.op-voce__selo .op-icone { width: 14px; height: 14px; stroke-width: 2.2; }
.op-voce__selo[hidden] { display: none; }
/* "Guardado neste aparelho": neutro, para não parecer um segundo botão de confirmar. */
.op-voce__selo--aparelho { background: var(--surface-soft); color: var(--exp-muted); }
.op-voce__selo--ok { background: oklch(.65 .17 150 / .18); color: oklch(.72 .15 150); }
.op-voce__selo--alerta { background: oklch(.75 .17 60 / .2); color: oklch(.78 .16 65); }
.op-voce__estado {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface-soft); color: var(--exp-muted);
}
.op-voce__estado--ok { background: oklch(.65 .17 150 / .18); color: oklch(.72 .15 150); }
.op-voce__estado--espera { background: oklch(.75 .17 60 / .2); color: oklch(.78 .16 65); }
body.produto-operacional[data-op-tema="claro"] .op-voce__selo--ok,
body.produto-operacional[data-op-tema="claro"] .op-voce__estado--ok { background: oklch(.94 .05 150); color: oklch(.45 .13 150); }
body.produto-operacional[data-op-tema="claro"] .op-voce__selo--alerta,
body.produto-operacional[data-op-tema="claro"] .op-voce__estado--espera { background: oklch(.95 .06 75); color: oklch(.5 .13 60); }
/* Tema claro: vermelhos mais escuros para passar de 4,5:1 sobre branco. */
body.produto-operacional[data-op-tema="claro"] .op-voce__dica { color: oklch(.5 .2 25); }
body.produto-operacional[data-op-tema="claro"] .op-voce__campo input[aria-invalid="true"] { border-color: oklch(.5 .2 25); }
body.produto-operacional[data-op-tema="claro"] .op-voce__sair:hover { color: oklch(.55 .19 25); border-color: oklch(.55 .19 25 / .4); background: oklch(.55 .19 25 / .08); }

/* Barras de uso do plano */
/* Coluna do número com largura fixa: as três barras começam no mesmo x, mesmo
 * quando "700 MB / 2048 MB" é mais largo que "2 / 3". Os 108px de antes estouravam o cartão com
 * "1144.4 MB / 4768.4 MB" (124px): a coluna passa a 132px e só cresce se um número ainda maior pedir.
 * O rótulo nunca é cortado: num cartão estreito quem cede é a barra (de 120 até 56px), não a palavra. */
.op-voce__linha--barra { grid-template-columns: 40px minmax(max-content, 1fr) auto; }
.op-voce__controle--barra { display: inline-grid; grid-template-columns: minmax(56px, 120px) minmax(132px, max-content); align-items: center; gap: 10px; }
.op-voce__barra { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
/* A largura entra por --pc (CSSOM em montar), nunca por style="width" no HTML. */
.op-voce__barra i { display: block; width: var(--pc, 0%); height: 100%; border-radius: inherit; background: var(--exp-accent); }
.op-voce__controle--barra small { font-size: 11.5px; color: var(--exp-muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.op-voce__controle--barra small span { margin: 0 2px; opacity: .6; }
.op-voce__controle--uso-livre { display: grid; justify-items: end; gap: 2px; }
.op-voce__controle--uso-livre strong { color: var(--exp-ink); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.op-voce__controle--uso-livre small { color: var(--exp-muted); font-size: 10.5px; white-space: nowrap; }

/* Contas conectadas */
.op-voce__conta-avatar { position: relative; width: 40px; height: 40px; }
.op-voce__conta-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.op-voce__avatar--mini { width: 40px; height: 40px; font-size: 14px; }
.op-voce__rede {
  position: absolute; right: -4px; bottom: -4px; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--exp-paper); color: var(--exp-ink); border: 1px solid var(--exp-line);
}
.op-voce__rede .op-icone { width: 11px; height: 11px; stroke-width: 2.2; }
.op-voce__rede .op-voce__glifo { font-size: 8px; }
/* Avatar do módulo de prévias dentro do tile de 40px: só o tamanho, nunca o desenho do selo. */
.op-voce__conta-avatar .pv-avatar { --pv-av: 40px; display: block; }

/* Rodapés */
.op-voce__rodape-cartao { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--exp-line); }
.op-voce__acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 4px; }
.op-voce__acoes [hidden] { display: none; }
.op-voce__rodape { display: flex; justify-content: flex-end; padding: 0 4px; }
.op-voce__sair {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1px solid var(--exp-line); border-radius: 10px;
  background: transparent; color: var(--exp-muted); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.op-voce__sair:hover { color: oklch(.68 .19 25); border-color: oklch(.68 .19 25 / .4); background: oklch(.68 .19 25 / .08); }
.op-voce__sair:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 2px; }

@media (max-width: 520px) {
  .op-voce__cartao--uso { grid-column: span 1; }
  .op-voce__cabecalho { gap: 14px; }
  .op-voce__avatar { width: 52px; height: 52px; font-size: 18px; }
  .op-voce__valor { max-width: 170px; }
  /* Telefone e barras de uso: o controle desce para a própria linha, sob o rótulo,
   * com o ícone atravessando as duas linhas. Rótulo inteiro, campo com espaço. */
  .op-voce__linha--telefone, .op-voce__linha--barra { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .op-voce__linha--telefone .op-voce__icone, .op-voce__linha--barra .op-voce__icone { grid-row: 1 / 3; }
  .op-voce__linha--telefone .op-voce__controle, .op-voce__linha--barra .op-voce__controle { grid-column: 2; justify-content: flex-start; }
  .op-voce__campo { width: 100%; justify-content: flex-start; }
  .op-voce__campo input { flex: 1 1 120px; width: auto; min-width: 0; }
  /* Salvar vira só ícone (aria-label e title mantêm o nome): campo, selo e botão cabem numa linha. */
  .op-voce__linha--telefone .op-voce__ib--rotulado { width: 40px; padding: 0; }
  .op-voce__linha--telefone .op-voce__ib--rotulado span { display: none; }
  .op-voce__dica { text-align: left; }
  .op-voce__controle--barra { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
  .op-voce__barra { width: auto; }
  .op-voce__linha--uso-livre { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .op-voce__linha--uso-livre .op-voce__icone { grid-row: 1 / 3; }
  .op-voce__linha--uso-livre .op-voce__controle { grid-column: 2; justify-items: start; }
}

@media (min-width: 521px) and (max-width: 960px) {
  .op-voce__cartao--uso { grid-column: span 1; }
}

@media (min-width: 1100px) {
  .op-voce__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-voce__coluna--empresa {
    grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "empresa uso" "suporte uso"; grid-template-rows: auto 1fr; align-items: start;
  }
  .op-voce__coluna--empresa > .op-voce__cartao:first-child { grid-area: empresa; }
  .op-voce__coluna--empresa > .op-voce__cartao--uso { grid-area: uso; }
  .op-voce__coluna--empresa > .op-voce__cartao:last-child { grid-area: suporte; }
}

@media (min-width: 1640px) {
  .op-voce__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-voce__coluna--empresa { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; }
  .op-voce__coluna--empresa > .op-voce__cartao:first-child,
  .op-voce__coluna--empresa > .op-voce__cartao--uso,
  .op-voce__coluna--empresa > .op-voce__cartao:last-child { grid-area: auto; }
}

/* Empresa — largura (rebranding de 26/09/2026, "a tela não fecha tudo"). Geometria, vale nos dois temas.
 * As contas conectadas eram uma coluna só de 260-420px (langris.css) e deixavam o painel vazio à direita;
 * o consumo do mês ganha medida de leitura para a barra não atravessar 2000px na tela larga. */
.produto-operacional[data-op-tema] .op-social-connected-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.produto-operacional[data-op-tema] .op-usage { max-width: 880px; }

/* Pele Pulso — Você (rebranding de 26/09/2026: a identidade do Início na área "Você").
 * Só escuro: toda regra começa pelo prefixo só-escuro e pelo contêiner .op-voce; o claro continua como
 * está. Cores só por var(--lg-*) (operacao-unificada.css). O cartão .op-voce__cartao é da casca (G0). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__avatar {
  background: linear-gradient(135deg, var(--lg-limao), var(--lg-amarelo) 38%, var(--lg-rosa) 70%, var(--lg-violeta));
  color: var(--lg-sobre-pilula); font-weight: 650; box-shadow: 0 0 0 1px var(--lg-linha);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__quem h1 { font-weight: 640; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__quem p { color: var(--lg-subtitulo); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__quem small { color: var(--lg-apagado); }
/* Títulos dos cartões: kicker com ponto limão, como os rótulos do Início; o ícone decorativo sai. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__titulo {
  font-size: var(--lg-kicker); font-weight: var(--lg-kicker-peso); letter-spacing: var(--lg-kicker-tracking); color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__titulo::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lg-limao); box-shadow: 0 0 10px var(--lg-limao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__titulo :is(.op-icone, .op-voce__glifo) { display: none; }
/* Linhas: divisória fina; ícone num poço neutro (selo neutro do Início). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce :is(.op-voce__linha, .op-voce__rodape-cartao) { border-top-color: var(--lg-linha-suave); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__icone {
  box-sizing: border-box; border: 1px solid var(--lg-linha); border-radius: 12px; background: var(--lg-fundo); color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__rotulo { color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__linha--vazia .op-voce__rotulo,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__valor { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__cartao-intro,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__rotulo-dica,
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__controle--uso-livre small { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__controle--uso-livre strong { color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__plano-nome { font-weight: 640; letter-spacing: -.02em; }
/* Botões-ícone: círculo de 40px; com rótulo, o secundário do Início (raio 12). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__ib {
  border-color: var(--lg-linha); border-radius: 50%; background: transparent; color: var(--lg-tinta-2);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__ib--rotulado { border-color: var(--lg-linha-forte); border-radius: var(--lg-raio-botao); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__ib:hover:not(:disabled) { border-color: var(--lg-linha-forte); background: var(--lg-realce); color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__ib[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--lg-limao) 33%, transparent); background: color-mix(in srgb, var(--lg-limao) 7%, transparent); color: var(--lg-limao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__ib--fundador { border-color: color-mix(in srgb, var(--lg-limao) 33%, transparent); color: var(--lg-limao); }
/* Tema e tamanho do texto: seletor segmentado, o ativo em pílula clara. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__grupo {
  gap: 2px; padding: 3px; border: 1px solid var(--lg-linha); border-radius: var(--lg-raio-pilula); background: var(--lg-trilho);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__grupo .op-voce__ib {
  width: 32px; height: 32px; min-height: 32px; border-color: transparent; border-radius: var(--lg-raio-pilula); color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__grupo .op-voce__ib:hover:not(:disabled) { border-color: transparent; background: var(--lg-realce-2); color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__grupo .op-voce__ib[aria-pressed="true"] {
  border-color: transparent; background: var(--lg-pilula-ativa); color: var(--lg-sobre-pilula);
}
/* Tema tem rótulos; a especialização fica depois do seletor compacto de texto
 * para Claro/Escuro nunca herdarem os 32px dos botões A/A+/A++. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__grupo.op-voce__grupo--tema .op-voce__ib.op-voce__ib--tema {
  width: auto; height: 34px; min-height: 34px; gap: 7px; padding: 0 11px;
  border: 0; border-radius: 9px; background: transparent; color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__grupo.op-voce__grupo--tema .op-voce__ib.op-voce__ib--tema:hover:not(:disabled) {
  border: 0; background: var(--lg-realce); color: var(--lg-tinta);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__grupo.op-voce__grupo--tema .op-voce__ib.op-voce__ib--tema[aria-pressed="true"] {
  border: 0; background: var(--lg-realce-2); color: var(--lg-tinta);
  box-shadow: inset 0 0 0 1px var(--lg-linha);
}
/* Telefone: campo do Início (o contorno #777 do trabalho de contraste continua). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__campo input {
  border-radius: var(--lg-raio-campo); background: var(--lg-campo); color: var(--lg-tinta);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__campo input::placeholder { color: var(--lg-apoio); opacity: 1; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__campo input[aria-invalid="true"] { border-color: var(--lg-erro); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__dica { color: var(--lg-erro); }
/* Selos e estados: o tingido do Início (limão ok, âmbar atenção, neutro "neste aparelho"). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__selo {
  box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--lg-limao) 33%, transparent);
  background: color-mix(in srgb, var(--lg-limao) 7%, transparent); color: var(--lg-limao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce :is(.op-voce__selo--alerta, .op-voce__selo--espera) {
  border-color: color-mix(in srgb, var(--lg-ambar) 33%, transparent); background: color-mix(in srgb, var(--lg-ambar) 7%, transparent); color: var(--lg-ambar);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__selo--aparelho { border-color: var(--lg-linha); background: var(--lg-realce); color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__estado {
  box-sizing: border-box; padding: 0 8px; border: 1px solid var(--lg-linha-selo); background: transparent; color: var(--lg-tinta-2);
  font-weight: 650; letter-spacing: .02em; text-transform: none;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__estado--ok {
  border-color: color-mix(in srgb, var(--lg-limao) 33%, transparent); background: color-mix(in srgb, var(--lg-limao) 7%, transparent); color: var(--lg-limao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__estado--espera {
  border-color: color-mix(in srgb, var(--lg-ambar) 33%, transparent); background: color-mix(in srgb, var(--lg-ambar) 7%, transparent); color: var(--lg-ambar);
}
/* Barras de uso: trilho fino e o degradê de progresso do Início. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__barra { background: var(--lg-linha-suave); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__barra i { background: var(--lg-progresso); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__controle--barra small { color: var(--lg-apoio); }
/* Selo de rede do avatar de reserva (sem o módulo de prévias). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__rede { border-color: var(--lg-linha); background: var(--lg-cartao); color: var(--lg-tinta); }
/* Sair: secundário; no hover, o par de erro. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__sair {
  border-color: var(--lg-linha-forte); border-radius: var(--lg-raio-botao); color: var(--lg-tinta-2);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-voce__sair:hover {
  border-color: color-mix(in srgb, var(--lg-erro) 33%, transparent); background: color-mix(in srgb, var(--lg-erro) 7%, transparent); color: var(--lg-erro-texto);
}
/* Fim Pele Pulso */

/* Você — hierarquia editorial. Os três grupos de dados continuam separados,
 * mas não viram três colunas concorrentes. Nenhuma regra alcança outra aba. */
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada {
  width: 100%; max-width: 1180px; margin-inline: auto; gap: 24px;
}
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cabecalho { gap: 18px; padding: 12px 2px 8px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cabecalho > .op-voce__avatar { width: 68px; height: 68px; font-size: 23px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__quem { min-width: 0; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__quem h1 { margin: 3px 0 6px; font-size: 27px; font-weight: 620; letter-spacing: -.045em; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__quem p { font-size: 13px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__quem small { display: inline-block; margin-top: 5px; font-size: 11px; }
.op-voce__sobretitulo { color: var(--exp-muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__grade {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas: "dados redes" "aparencia uso" "empresa uso" ". suporte";
  gap: 18px 24px; align-items: start;
}
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna { gap: 18px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--pessoa { display: contents; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--pessoa > .op-voce__cartao:first-child { grid-area: dados; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--pessoa > .op-voce__cartao:last-child { grid-area: aparencia; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--redes { grid-area: redes; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--empresa {
  display: contents;
}
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--empresa > .op-voce__cartao:first-child { grid-area: empresa; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--empresa > .op-voce__cartao--uso { grid-area: uso; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--empresa > .op-voce__cartao:last-child { grid-area: suporte; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao {
  padding: 21px 24px 18px; border-radius: 20px; background: var(--exp-paper); border-color: var(--exp-line); box-shadow: none;
}
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__titulo {
  margin-bottom: 15px; font-size: 15px; line-height: 1.2; letter-spacing: -.025em; text-transform: none;
  font-weight: 600; color: var(--exp-ink); gap: 10px;
}
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__titulo::before { display: none; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__titulo :is(.op-icone, .op-voce__glifo) { display: inline-block; width: 17px; height: 17px; color: var(--exp-muted); }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__linha { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding-block: 10px; min-height: 48px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__icone {
  width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--exp-muted);
}
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__icone .op-icone { width: 17px; height: 17px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__rotulo { font-size: 13px; font-weight: 450; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__valor { font-size: 13px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__ib--rotulado { border-color: transparent; background: var(--surface-soft); border-radius: 10px; font-size: 12px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__campo input { width: 175px; font-size: 13px; height: 42px; border-radius: 10px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__rodape-cartao { margin-top: 5px; padding-top: 12px; }

/* O tema tem uma miniatura reconhecível, não dois botões genéricos. */
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__linha--tema { align-items: start; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__linha--tema > .op-voce__rotulo { padding-top: 8px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__grupo.op-voce__grupo--tema { gap: 10px; padding: 0; border: 0; background: transparent; border-radius: 0; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__grupo.op-voce__grupo--tema .op-voce__ib.op-voce__ib--tema {
  display: flex; flex-direction: column; width: 112px; height: auto; min-height: 98px; gap: 9px; padding: 8px;
  border: 1px solid var(--exp-line); border-radius: 13px; background: transparent; box-shadow: none; color: var(--exp-muted);
}
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__grupo.op-voce__grupo--tema .op-voce__ib.op-voce__ib--tema[aria-pressed="true"] {
  border-color: var(--exp-accent-text); color: var(--exp-ink); background: var(--exp-accent-soft); box-shadow: none;
}
/* O hover antigo do Pulso zerava o contorno. A miniatura selecionada não
 * pode perder a indicação de estado enquanto o ponteiro está sobre ela. */
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__grupo.op-voce__grupo--tema .op-voce__ib.op-voce__ib--tema:hover:not(:disabled) {
  border: 1px solid var(--exp-line); background: var(--surface-soft); color: var(--exp-ink);
}
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__grupo.op-voce__grupo--tema .op-voce__ib.op-voce__ib--tema[aria-pressed="true"]:hover:not(:disabled) {
  border-color: var(--exp-accent-text); background: var(--exp-accent-soft);
}
.op-voce__tema-nome { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.op-voce__tema-mini { display: grid; grid-template-columns: 18px 1fr 1fr; grid-template-rows: 8px 1fr; gap: 5px; padding: 7px; box-sizing: border-box; width: 94px; height: 53px; border: 1px solid #ffffff12; border-radius: 7px; overflow: hidden; }
.op-voce__tema-mini::before { content: ''; grid-column: 1 / -1; width: 45%; height: 3px; align-self: center; background: currentColor; border-radius: 3px; opacity: .35; }
.op-voce__tema-mini i { border-radius: 3px; background: currentColor; opacity: .1; }
.op-voce__tema-mini i:first-of-type { opacity: .2; }
.op-voce__tema-mini--claro { background: #f7f7f5; color: #131519; }
.op-voce__tema-mini--escuro { background: #101216; color: #f7f7f5; }

/* Uma única linha para ferramentas ocasionais; o resultado continua visível
 * após a ação porque o HTML reabre o details quando recebe o resultado. */
.op-voce__avancado { min-width: 0; border: 1px solid var(--exp-line); border-radius: 15px; background: var(--exp-paper); }
.op-voce__avancado > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; align-items: center; gap: 10px; min-height: 66px; padding: 12px 20px; box-sizing: border-box; list-style: none; cursor: pointer; color: var(--exp-ink); font-size: 12px; }
.op-voce__avancado > summary::-webkit-details-marker { display: none; }
.op-voce__avancado > summary small { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--exp-muted); }
.op-voce__avancado > summary:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 3px; border-radius: inherit; }
.op-voce__avancado-icone { color: var(--exp-muted); }
.op-voce__avancado-seta { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; color: var(--exp-muted); }
.op-voce__avancado[open] .op-voce__avancado-seta { transform: rotate(225deg); }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__avancado .op-voce__cartao { border: 0; border-top: 1px solid var(--exp-line); border-radius: 0; background: transparent; padding: 20px; }

/* Cotas: quatro indicadores pequenos, mais a barra real de imagens. Quando
 * não há teto, não se desenha percentual ou limite inventado. */
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__linhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__linha { grid-column: 1 / -1; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso :is(.op-voce__linha--uso-livre, .op-voce__linha--barra:not(:last-child)) {
  grid-column: auto; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--exp-line); border-radius: 12px; min-width: 0;
}
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso :is(.op-voce__linha--uso-livre, .op-voce__linha--barra:not(:last-child)) .op-voce__icone { width: 24px; height: 24px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso :is(.op-voce__linha--uso-livre, .op-voce__linha--barra:not(:last-child)) .op-voce__rotulo { font-size: 11px; white-space: normal; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso :is(.op-voce__linha--uso-livre, .op-voce__linha--barra:not(:last-child)) .op-voce__controle { grid-column: 1 / -1; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__controle--uso-livre { grid-column: 1 / -1; justify-items: start; gap: 5px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__controle--uso-livre strong { font-size: 21px; font-weight: 560; letter-spacing: -.035em; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__controle--uso-livre small { font-size: 10px; white-space: normal; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__linha--barra:not(:last-child) .op-voce__controle--barra { display: flex; flex-direction: column-reverse; align-items: stretch; width: 100%; gap: 10px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__linha--barra:not(:last-child) .op-voce__controle--barra small { text-align: left; font-size: 14px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__linha--barra:last-child { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding-top: 16px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__linha--barra:last-child .op-voce__controle--barra { grid-column: 2; display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 9px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao--uso .op-voce__linha--barra:last-child .op-voce__controle--barra small { white-space: normal; text-align: left; font-size: 11px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao-intro { font-size: 11px; line-height: 1.5; margin-bottom: 8px; }

/* O suporte é um rodapé, não mais um cartão que disputa atenção. */
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--empresa > .op-voce__cartao:last-child { padding: 2px; border: 0; background: transparent; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--empresa > .op-voce__cartao:last-child .op-voce__titulo { display: none; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--empresa > .op-voce__cartao:last-child .op-voce__ib { background: transparent; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__rodape { justify-content: flex-start; border-top: 1px solid var(--exp-line); padding-top: 15px; }
body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__sair { height: 36px; border-color: transparent; padding-left: 0; font-size: 12px; }

@media (max-width: 800px) {
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dados" "aparencia" "redes" "empresa" "uso" "suporte"; }
}
@container voce-cartao (max-width: 450px) {
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--pessoa .op-voce__linha { grid-template-columns: 28px minmax(0, 1fr); row-gap: 6px; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--pessoa .op-voce__controle { grid-column: 2; justify-content: flex-start; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__coluna--pessoa .op-voce__icone { grid-row: 1 / 3; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__campo { justify-content: flex-start; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__valor { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 520px) {
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada { gap: 18px; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cartao { padding: 18px; border-radius: 17px; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__quem h1 { font-size: 22px; white-space: normal; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__quem p { white-space: normal; overflow-wrap: anywhere; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__cabecalho > .op-voce__avatar { width: 54px; height: 54px; font-size: 18px; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__linha--telefone .op-voce__ib--rotulado { width: auto; padding: 0 10px; }
  body.produto-operacional[data-op-tema] .op-voce.op-voce--organizada .op-voce__linha--telefone .op-voce__ib--rotulado span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .op-voce__avancado-seta { transition: none; }
}
body.sem-movimento .op-voce__avancado-seta { transition: none; }

/* Idioma é texto completo, não o controle compacto de escala A/A+/A++.
 * A especialização vence os 32px do Pulso sem alterar tema, tamanho do texto
 * ou a marca Beta. Rótulo e controles têm linhas próprias em qualquer largura. */
.op-voce .op-voce__linha--idioma {
  grid-template-columns: 40px minmax(0, 1fr); align-items: start; row-gap: 6px;
}
.op-voce .op-voce__linha--idioma > .op-voce__icone { grid-row: 1 / 3; }
.op-voce .op-voce__linha--idioma > .op-voce__rotulo { grid-column: 2; padding-top: 3px; white-space: normal; }
.op-voce .op-voce__linha--idioma > .op-voce__controle { grid-column: 2; width: 100%; justify-content: flex-start; }
.op-voce .op-voce__linha--idioma .op-voce__campo { width: 100%; min-width: 0; justify-content: flex-start; }
body.produto-operacional[data-op-tema] .op-voce .op-voce__grupo.op-voce__grupo--idioma {
  display: flex; flex-wrap: wrap; max-width: 100%; gap: 6px;
  padding: 0; border: 0; border-radius: 0; background: transparent;
}
body.produto-operacional[data-op-tema] .op-voce .op-voce__grupo.op-voce__grupo--idioma .op-voce__ib.op-voce__ib--rotulado {
  flex: 0 0 auto; width: auto; height: auto; min-height: 44px; gap: 6px;
  padding: 10px 12px; border-radius: 10px; white-space: nowrap;
}
body.produto-operacional[data-op-tema] .op-voce .op-voce__grupo.op-voce__grupo--idioma .op-voce__ib:not([aria-pressed="true"]) { border-color: var(--exp-line); }
.op-voce .op-voce__grupo--idioma .op-voce__beta { flex: none; margin-left: 0; }
.op-voce .op-voce__linha--idioma .op-voce__dica { text-align: left; }

/* O cartão, não o monitor, determina quando rótulo e controle precisam de
 * linhas separadas. Também funciona nas três colunas e com texto ampliado. */
@container voce-cartao (max-width: 520px) {
  .op-voce__linha--telefone,
  .op-voce__linha--barra,
  .op-voce__linha--uso-livre,
  .op-voce__linha:has(> .op-voce__controle .op-voce__grupo) {
    grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px;
  }
  .op-voce__linha--telefone > .op-voce__icone,
  .op-voce__linha--barra > .op-voce__icone,
  .op-voce__linha--uso-livre > .op-voce__icone,
  .op-voce__linha:has(> .op-voce__controle .op-voce__grupo) > .op-voce__icone { grid-row: 1 / 3; }
  .op-voce__linha--telefone > .op-voce__controle,
  .op-voce__linha--barra > .op-voce__controle,
  .op-voce__linha--uso-livre > .op-voce__controle,
  .op-voce__linha:has(> .op-voce__controle .op-voce__grupo) > .op-voce__controle {
    grid-column: 2; width: 100%; justify-content: flex-start; justify-items: start;
  }
  .op-voce__linha--telefone .op-voce__campo { width: 100%; min-width: 0; justify-content: flex-start; }
  .op-voce__linha--telefone .op-voce__campo input { flex: 1 1 150px; width: auto; min-width: 0; }
  .op-voce .op-voce__linha--telefone .op-voce__ib--rotulado { flex: none; width: auto; min-height: 44px; padding: 0 12px; }
  .op-voce .op-voce__linha--telefone .op-voce__ib--rotulado span { display: inline; }
  .op-voce__controle .op-voce__grupo { flex-wrap: wrap; max-width: 100%; }
  .op-voce__controle--barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .op-voce__controle--barra small { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
  .op-voce__controle--uso-livre small { white-space: normal; line-height: 1.4; }
  .op-voce__linha--telefone .op-voce__dica { text-align: left; }
}

/* Pele Pulso — Empresa (Contexto e equipe, Contas e redes, Plano). A Empresa não tem folha própria e as regras-base
 * dela (langris.css, experiencia.css) não recebem regra nova: a pele mora aqui. Só escuro. Cada regra é qualificada
 * pela sub-aba ATIVA da própria tela (o botão .ativo da .op-subnav, filha direta da .op-main), que é o contêiner
 * dessas telas; o fluxo de conectar rede (Escolher rede, Instagram, X) acende "Contas e redes". Assim a pele vence
 * as receitas da casca (G0) e as listas :is() antigas sem alcançar nenhuma outra aba. */

/* Contexto e equipe — cabeçalho do contexto: o número em tinta, o rótulo em apoio, sem caixa alta. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context-intro h2 { font-weight: 640; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context-intro p { font-size: 14px; line-height: 1.5; color: var(--lg-subtitulo); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context-progress { border-color: var(--lg-linha-suave); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context-progress strong {
  color: var(--lg-tinta); font-weight: 640; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context-progress span {
  color: var(--lg-apoio); font-size: 13px; letter-spacing: 0; text-transform: none;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context-progress small { color: var(--lg-apoio); }
/* Importar: vazio tracejado com convite; no foco e no arrastar, o contorno acende em limão. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-import h2 { font-weight: 640; letter-spacing: -.02em; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-import p { font-size: 13px; color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-import__zone {
  border: 1px dashed var(--lg-linha-vazia); border-radius: var(--lg-raio-cartao); background: var(--lg-vazio-fundo); color: var(--lg-tinta-2);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-import__zone:is(:hover, :focus-visible, .sobre) {
  border-color: var(--lg-limao); background: color-mix(in srgb, var(--lg-limao) 5%, var(--lg-vazio-fundo));
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-import__zone strong { font-size: 14px; font-weight: 620; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-import__zone span { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-import__status { border-top-color: var(--lg-linha-suave); color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-import__status.erro { color: var(--lg-erro); }
/* Diretor: título a 640, vazio tracejado (sai o traço marrom), listas em cartões de item, rótulos em Instrument. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-director__head h2 { font-weight: 640; letter-spacing: -.02em; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-director__head p { font-size: 13px; color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-director__empty {
  padding: 16px; border: 1px dashed var(--lg-linha-vazia); border-radius: var(--lg-raio-cartao); background: var(--lg-vazio-fundo); color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) :is(.op-director__notice, .op-director__actions) {
  border: 1px solid var(--lg-linha); border-radius: var(--lg-raio-item); background: var(--lg-realce);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-director__notice strong { color: var(--lg-rosa); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) :is(.op-director__notice span, .op-director__actions span) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) :is(.op-director__summary span, .op-director__result section h3) {
  font-family: var(--lg-fonte); font-size: var(--lg-kicker); font-weight: var(--lg-kicker-peso); letter-spacing: var(--lg-kicker-tracking); color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-director__summary p { font-size: 13px; color: var(--lg-subtitulo); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-director__provider {
  font-family: var(--lg-fonte); letter-spacing: 0; text-transform: none; color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-director__list article {
  border: 1px solid var(--lg-linha-suave); border-radius: var(--lg-raio-item); background: var(--lg-cartao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-director__list strong { font-size: 14px; font-weight: 620; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) :is(.op-director__list p, .op-director__list small) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-director__list p b { color: var(--lg-tinta-2); }
/* Hipóteses: números de 22px/640 num bloco de raio 14 com divisórias finas; cartões de item; "revisão humana" em selo rosa. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-discovery-stats {
  gap: 1px; border: 1px solid var(--lg-linha-suave); border-radius: var(--lg-raio-item); background: var(--lg-linha-suave); overflow: hidden;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-discovery-stats span {
  background: var(--lg-cartao); color: var(--lg-apoio); font-size: 12px; letter-spacing: 0; text-transform: none;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-discovery-stats b {
  color: var(--lg-tinta); font-size: 22px; font-weight: 640; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-candidates article {
  border: 1px solid var(--lg-linha-suave); border-radius: var(--lg-raio-cartao); background: var(--lg-cartao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-candidates h3 { font-weight: 620; letter-spacing: -.02em; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-candidate-head small {
  font-size: var(--lg-kicker); font-weight: var(--lg-kicker-peso); letter-spacing: .1em; color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) :is(.op-radar-candidates code, .op-radar-candidates > article > p, .op-radar-candidate-facets span, .op-radar-candidates footer) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-candidates > article > p { font-size: 13px; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-candidate-facets { border-color: var(--lg-linha-suave); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-candidate-facets b { color: var(--lg-tinta-2); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-candidates footer em {
  padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--lg-rosa) 33%, transparent); border-radius: var(--lg-raio-pilula);
  background: color-mix(in srgb, var(--lg-rosa) 7%, transparent); color: var(--lg-rosa);
  font-size: 11px; font-weight: 650; letter-spacing: .02em; text-transform: none; white-space: nowrap;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-law strong {
  font-size: var(--lg-kicker); font-weight: var(--lg-kicker-peso); letter-spacing: var(--lg-kicker-tracking); color: var(--lg-apoio);
}
/* Formulário em 4 etapas: um contorno só (o do formulário); as etapas ficam com divisória fina. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context { gap: 0; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context > .op-company-context__section {
  border: 0; border-top: 1px solid var(--lg-linha-suave); border-radius: 0; background: transparent; box-shadow: none;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context > .op-company-context__section:first-child { border-top: 0; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context__section .op-section-title p { font-size: 13px; color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context__grid label { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context__grid small { font-weight: 400; color: var(--lg-apoio); }
/* A barra de salvar fica presa ao pé da tela: vidro do Início, recolhida para dentro do contorno do formulário. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context__save {
  margin: 0 12px 12px; border: 1px solid var(--lg-linha); border-radius: var(--lg-raio-cartao); background: var(--lg-vidro); box-shadow: var(--lg-sombra-aviso);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-company-context__save span { color: var(--lg-apoio); }
/* Alvos: lista em bloco de raio 16 com divisórias; ícone em selo tingido violeta; tipo em selo de pílula. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-targets {
  border: 1px solid var(--lg-linha-suave); border-radius: var(--lg-raio-cartao); background: var(--lg-linha-suave);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-targets article { background: var(--lg-cartao); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-target-icon {
  border: 1px solid color-mix(in srgb, var(--lg-violeta) 33%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--lg-violeta) 7%, transparent); color: var(--lg-violeta-texto);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-targets strong { font-size: 14px; font-weight: 620; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) :is(.op-radar-targets small, .op-radar-targets p) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-targets p { font-size: 13px; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) :is(.op-radar-targets b, .op-row > b) {
  padding: 2px 8px; border: 1px solid var(--lg-linha-selo); border-radius: var(--lg-raio-pilula); color: var(--lg-tinta-2);
  font-size: 11px; font-weight: 650; letter-spacing: .02em; text-transform: none; white-space: nowrap;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-targets em { color: var(--lg-apoio); letter-spacing: 0; text-transform: none; }
/* "Adicionar ao mapa" divide a fileira com "O que acompanhar" (título de seção da casca, 17px): mesma medida. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-new h2 { font-size: var(--lg-titulo-secao); font-weight: 640; letter-spacing: -.01em; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-new label { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-limit { padding: 4px 2px; border: 0; background: transparent; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-radar-limit small { color: var(--lg-apoio); }
/* Equipe: linhas com divisória fina, avatar neutro, "membro" em selo neutro, "Convidar por e-mail" em kicker. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) :is(.op-row, .op-inline-form) { border-top-color: var(--lg-linha-suave); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-row strong { font-weight: 620; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) :is(.op-row small, .op-help) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-mini-avatar {
  border: 1px solid var(--lg-linha); border-radius: 50%; background: var(--lg-cartao); color: var(--lg-tinta-2);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="empresa"].ativo) .op-inline-form label > span {
  font-family: var(--lg-fonte); font-size: var(--lg-kicker); font-weight: var(--lg-kicker-peso); letter-spacing: var(--lg-kicker-tracking); text-transform: uppercase; color: var(--lg-apoio);
}

/* Contas e redes — contas conectadas: cartões de item (raio 16, borda fina), selo da rede escuro com a cor da rede. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-social-company, .op-social-count small, .op-social-add > div:first-child small) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-count strong {
  font-family: var(--lg-fonte); font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--lg-tinta);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-social-account, .op-network-card) {
  border-color: var(--lg-linha-suave); border-radius: var(--lg-raio-cartao); background: var(--lg-cartao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-social-account__preview strong, .op-network-card strong) { font-weight: 620; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-social-account__preview small, .op-social-account__details p, .op-social-account__details small, .op-network-card small) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-account__details { border-color: var(--lg-linha-suave); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-account__details p strong { color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-social-account__details > summary, .op-social-account__details a) { color: var(--lg-limao); font-size: 13px; font-weight: 650; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-account__details a.op-social-remove { color: var(--lg-erro); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-avatar > .op-instagram-icon {
  border-color: var(--lg-cartao); background: var(--lg-cartao); color: var(--lg-rosa); box-shadow: inset 0 0 0 1px var(--lg-linha-forte);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-avatar > .op-x-icon { color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-avatar > span:not(.pv-avatar) { background: var(--lg-cartao-hover); box-shadow: inset 0 0 0 1px var(--lg-linha); color: var(--lg-tinta); }
/* Adicionar rede: kicker; ladrilhos como cartões de item; "Mais" como vazio com convite. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-add > div:first-child span {
  font-size: var(--lg-kicker); font-weight: var(--lg-kicker-peso); letter-spacing: var(--lg-kicker-tracking); text-transform: uppercase; color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-network {
  border-color: var(--lg-linha-suave); border-radius: var(--lg-raio-item); background: var(--lg-cartao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-network > strong { font-weight: 620; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-network > small { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-network.mais { border-color: var(--lg-linha-vazia); background: var(--lg-vazio-fundo); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-social-network.mais > i { border-color: var(--lg-linha); background: var(--lg-realce); color: var(--lg-limao); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-social-network.disponivel:hover, .op-social-network.mais:hover, .op-network-card.disponivel:hover, .op-network-card.disponivel:focus-visible) {
  border-color: var(--lg-linha-forte); background: var(--lg-cartao-hover);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-roadmap { border-top-color: var(--lg-linha-suave); color: var(--lg-apoio); }
/* Escolher rede: "Continuar →" em limão e numa linha só (a seta era um bloco e caía para baixo). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-networks__intro h2 { font-weight: 640; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-networks__intro p { color: var(--lg-subtitulo); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-card > b { font-size: 13px; font-weight: 650; white-space: nowrap; color: var(--lg-limao); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-card > b > span { display: inline; margin: 0; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-card.em-breve > b { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-later { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-later:hover { color: var(--lg-tinta); }
/* Conectar Instagram e X: "Voltar" vira botão fantasma; sai o contorno do meio (.op-network-fields) e fica um por nível. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 0; padding: 0 14px 0 12px;
  border: 1px solid var(--lg-linha); border-radius: var(--lg-raio-item); background: transparent; color: var(--lg-tinta-2); font-size: 14px;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-back:hover { border-color: var(--lg-linha-forte); background: var(--lg-realce); color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-fields { padding: 0; border-color: transparent; background: transparent; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-network-fields label, .op-network-fields > p) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-fields label span { color: var(--lg-limao); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-fields label > div {
  border-color: var(--line-strong); border-radius: var(--lg-raio-campo); background: var(--lg-campo);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-fields label > div:focus-within {
  border-color: var(--lg-limao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-limao) 16%, transparent);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-fields input { color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-fields .op-dialog__nota {
  border-color: var(--lg-linha); border-radius: var(--lg-raio-item); background: var(--lg-realce); color: var(--lg-apoio);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-network-fields .op-dialog__nota strong { color: var(--lg-tinta); }
/* Acesso ao piloto: cartão de item com kicker limão; a etapa atual acende em limão. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-pilot-access, .op-instagram-profissional) {
  border-color: var(--lg-linha-suave); border-radius: var(--lg-raio-cartao); background: var(--lg-cartao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-pilot-access > span, .op-instagram-profissional > span) {
  font-size: var(--lg-kicker); font-weight: var(--lg-kicker-peso); letter-spacing: var(--lg-kicker-tracking); color: var(--lg-limao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-pilot-access h3, .op-instagram-profissional h3) {
  font-family: var(--lg-fonte); font-weight: 620; letter-spacing: -.02em; color: var(--lg-tinta);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) :is(.op-pilot-access > p, .op-pilot-access__invite p, .op-instagram-profissional p, .op-instagram-profissional ol) { color: var(--lg-apoio); }
/* A pendência do Instagram (conta pessoal, convite pendente…) é um aviso de atenção: o kicker vai para o âmbar. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-instagram-profissional > span { color: var(--lg-ambar); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-instagram-profissional__ajuda { color: var(--lg-limao); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-pilot-access__invite { border-color: var(--lg-linha-suave); border-radius: var(--lg-raio-item); background: var(--lg-realce); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-pilot-access__invite strong { color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-pilot-status li:not(.ativo) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-pilot-status li:not(.ativo)::before { border-color: var(--lg-linha); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-pilot-status li.ativo { color: var(--lg-limao); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="redes"].ativo) .op-pilot-status li.ativo::before { border-color: var(--lg-limao); background: var(--lg-limao); color: var(--lg-sobre-limao); }

/* Plano — nome a 640, barras com trilho fino e o degradê de progresso, linhas com divisória fina, recibo em link limão. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-plan-card h2 { font-weight: 640; letter-spacing: -.02em; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-plan-card p { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-usage strong { font-size: 13px; font-weight: 620; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-usage span { color: var(--lg-apoio); font-variant-numeric: tabular-nums; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-usage i { border-radius: var(--lg-raio-pilula); background: var(--lg-linha-suave); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-usage i b { border-radius: var(--lg-raio-pilula); background: var(--lg-progresso); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-row { border-top-color: var(--lg-linha-suave); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-row strong { font-weight: 620; color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-row small { color: var(--lg-apoio); }
/* O recibo ia colado à data (a linha tem 3 colunas e 2 filhos): vai para a direita, como o resto das listas. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-row > b { justify-self: end; }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-main:has(> .op-subnav [data-aba="plano"].ativo) .op-row .op-link {
  font-family: var(--lg-fonte); font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--lg-limao);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Fim Pele Pulso */