/* ===========================================================================
   ESTILO DAS TELAS VINDAS DO PORTAL COMERCIAL  (unificacao, 21/08/2026)

   As 15 telas do Comercial chegaram pedindo 95 classes que a folha da Gestao
   nao define -- renderizavam sem estilo. Este arquivo traz do Comercial APENAS
   as regras cujo alvo e uma classe que a Gestao NAO tem.

   Regra de corte, de proposito conservadora: se o compound mais a direita do
   seletor (o que de fato recebe o estilo) mencionar qualquer classe que a
   Gestao ja define, a regra e DESCARTADA. Assim nada do visual atual muda --
   .card, .btn e .tbl continuam sendo os da Gestao, e as telas migradas passam
   a herdar o padrao da casa em vez de trazer o antigo.

   Seletor de elemento puro (table, h3) tambem e descartado: repintaria o
   portal inteiro.

   Carregado por ULTIMO no index.html, depois de style.css e brascamp-ui.css.
   =========================================================================== */

/* variaveis que estas regras usam e a Gestao nao declara */
:root{
  --az-logo: #0c63a4;
  --azlogo: #0c63a4;
  --brand: var(--azlogo);
  --line: #e3e8f0;
  --mut: #6b7686;
  --no: #e03131;
  --r-btn: 10px;
  --r-campo: 10px;
  --r-chip: 999px;
  --rubi: #b3202f;
}

.tier-tabs{display:flex;gap:10px;margin-bottom:14px}
.tier{flex:1;max-width:200px;border:2px solid var(--tc);background:#fff;color:var(--tc);
  padding:11px 6px;border-radius:12px;font-weight:800;font-size:15px;letter-spacing:.5px}
.hint{color:var(--mut);font-size:12.5px}
.linha-prod{cursor:pointer}
.fam-chip{display:inline-block;background:#eef2f7;color:#4a5a6e;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:20px;white-space:nowrap}
.semfam{color:#c9a227;font-weight:900;margin-left:4px}
.selo{font-size:11px;font-weight:700;white-space:nowrap}
.selo.no{color:var(--no)}
.itens-box{padding:6px 2px}
.itens-titulo{font-size:13.5px;font-weight:700;color:#33465c;margin:6px 0 8px}
.itens-load, .itens-vazio{color:var(--mut);font-size:13.5px;padding:8px 2px;display:flex;align-items:center;gap:8px}
.subtab{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 6px rgba(20,50,90,.08)}
@keyframes spin{to{transform:rotate(360deg)}}
.sec{font-size:15px;margin:0 0 12px}
.lbl{display:block;font-size:12.5px;font-weight:700;color:#5a6a7d;margin:8px 0 6px}
.grid2especiais{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
/* `dense` fecha os buracos: a grade preenche LINHA A LINHA e o opcional "por
   área" (Transfer) ocupa as duas colunas — o que sobrava ao lado dele virava
   célula vazia, e o Joel viu "linhas em branco entre os opcionais". Com dense,
   o opcional seguinte volta e ocupa o buraco. */
.opc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-bottom:6px;
  grid-auto-flow:row dense}
/* Opcional que cobra por AREA (Transfer): a medida fica na propria caixinha, e
   so aparece depois de marcar. A linha ocupa as duas colunas porque com dois
   campos numericos ela nao cabe em meia largura sem espremer o rotulo. */
.opc-area{grid-column:1 / -1}
/* QUANTIDADE DO OPCIONAL (09/09/2026): o mesmo refletivo pode entrar 2x.
   Segue a mesma linguagem do bloco de medidas — aparece só depois de marcar. */
.opc-qtd{display:inline-flex;align-items:center;gap:4px;margin-left:8px;
  color:var(--ink-3,#5a6a7d);font-size:12.5px}
.opc-qtd input{width:56px;min-height:34px;padding:4px 7px;text-align:center;
  border:1px solid var(--linha,#dbe4ee);border-radius:8px;font-size:13.5px}
.opc-med{display:inline-flex;align-items:center;gap:5px;margin-left:8px;flex-wrap:wrap}
.opc-med input{width:84px;min-height:34px;padding:4px 7px;border:1px solid var(--linha,#dbe4ee);
  border-radius:5px;font-size:13.5px;background:#fff}
.opc-med span{color:var(--ink-3,#5a6a7d);font-size:12.5px}
.opc-med em{color:var(--ink-3,#5a6a7d);font-size:11px;font-style:normal}
.opc{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#33465c;cursor:pointer}
.opc-c{color:var(--mut);font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.res-card{margin-top:14px;border:1.5px solid var(--line);border-radius:12px;padding:14px;background:#fafcff}
.res-precos{display:flex;gap:10px;margin-bottom:10px}
.rp{flex:1;text-align:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 4px}
.res-selo{margin-bottom:10px}
.res-linha{font-size:12.5px;color:#33465c;margin-top:4px}
.orc-total{text-align:right;font-size:15px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.tag{background:#eef2f7;color:#6b7686;font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px}
.pin{width:82px;padding:5px 7px;border:1.5px solid var(--line);border-radius:7px;font-size:13.5px;text-align:right;outline:none}
.pin:focus{border-color:var(--brand)}
.chips-status{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip-st{border:1.5px solid var(--line);background:#fff;color:#4a5a6e;border-radius:20px;padding:6px 14px;font-size:13.5px;font-weight:600;border-left:4px solid var(--c)}
.det-l{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #eef1f5;font-size:13.5px}
.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,112px);gap:10px;margin-top:10px}
.foto-item{width:112px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f6f8fb}
.foto-cap{font-size:11px;color:var(--mut);padding:4px 6px}
.venc{color:var(--rubi);font-weight:700}
.bar-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px}
.bar-lab{width:120px;flex-shrink:0;color:#33465c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;background:#eef2f7;border-radius:6px;height:14px;overflow:hidden}
/* display:block e' obrigatorio, nao decoracao. Em <span> a caixa e' inline,
   e largura/altura NAO se aplicam a caixa inline: a barra vira 0x0 com o
   HTML aparentemente correto, e some sem erro nenhum. Foi o que apagou as
   barras do painel de Faturamento em 25/08/2026. */
.bar-fill{display:block;height:100%;background:var(--azlogo);border-radius:6px}
.bar-val{width:78px;text-align:right;color:#33465c}
.rank-scroll{max-height:380px;overflow-y:auto;padding-right:4px}
.rank-scroll .bar-lab{width:auto;flex:0 0 210px;font-weight:600}
/* 200px e não 148: com 148 o nome do atendimento não cabia e saía cortado com
   reticências — "Brascamp - Atendimen…" (Joel, 02/09/2026). `align-items:
   stretch` mantém os cartões da mesma faixa terminando juntos mesmo quando um
   nome quebra em duas linhas e o outro não. */
.gauge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;align-items:stretch}
/* coluna flex para o nome empurrar os valores para baixo e os cartões da mesma
   faixa fecharem alinhados na base */
.gauge-card{position:relative;background:var(--superficie-2);border:1px solid var(--line);
  border-radius:14px;padding:10px 8px 12px;text-align:center;
  display:flex;flex-direction:column}
.gauge-card .gauge-mv{margin-top:auto}
.gauge-svg{width:100%;height:auto;display:block}
.gauge-pct{font-size:15px;font-weight:800;font-family:'Cairo',sans-serif}
/* NOME INTEIRO, quebrando linha. Era `nowrap` + reticências, e o atendimento
   ficava "Brascamp - Atendimen…" — o nome é o que identifica o cartão, então é
   ele que não pode faltar. `overflow-wrap` cobre o nome sem espaço que não
   caiba na coluna. */
.gauge-nome{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.25;
  margin-top:4px;white-space:normal;overflow-wrap:anywhere;padding:0 2px}
.gauge-tag{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--ink-3);text-transform:uppercase}
.gauge-mv{font-size:11px;color:var(--mut);margin-top:4px;font-variant-numeric:tabular-nums}
.gauge-medal{position:absolute;top:6px;right:8px;font-size:17px;line-height:1}
.gauge-rank{position:absolute;top:7px;right:9px;font-size:11px;font-weight:800;color:var(--ink-3)}
.mv-scroll{max-height:380px;overflow-y:auto;padding-right:4px}
.mv-item{margin:9px 0}
.mv-nome{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.2}
/* Ranking de margem: nome à esquerda, número à direita, na MESMA linha, com a
   barra embaixo (03/09/2026). O valor era uma terceira linha solta e, por usar
   a classe `hint`, ainda ganhava quadro azul de nota. `min-width:0` no nome é
   o que deixa o ellipsis funcionar dentro do flex. */
.mv-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mv-topo .mv-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-val{flex:none;font-size:12px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.mv-val b{color:var(--ink);font-weight:700}
/* A legenda do bloco ("🟢 Maiores margens") é rótulo de seção, não nota. */
.mv-leg{display:block;margin-bottom:6px}
/* O par de quadros com rolagem e ajustado LA EMBAIXO, junto da regra que
   declara a grade — aqui a intencao era anulada por ela. Ver `.grid2-1` abaixo. */
.legenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11px;color:var(--mut)}
.legenda .lg{display:inline-flex;align-items:center;gap:5px}
.per{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut)}
.subtabs{display:flex;gap:6px;margin:0 0 16px}
.subtab{border:1px solid var(--borda-forte);background:#fff;color:var(--mut);padding:8px 14px;border-radius:9px;
  font-size:13.5px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif}
.abc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.abc-card{background:#fff;border:1px solid var(--line);border-left:5px solid var(--c,#8ea3b9);border-radius:14px;padding:14px 16px}
.abc-t{font-size:12.5px;font-weight:800;letter-spacing:.4px;color:var(--c);text-transform:uppercase}
.abc-n{font-size:26px;font-weight:800;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.abc-l{font-size:11px;color:var(--mut);margin-top:-2px}
.abc-v{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums}
.abc-p{font-size:11px;color:var(--mut)}
.abc-bar{display:flex;height:22px;border-radius:8px;overflow:hidden;background:var(--superficie-2)}
.abc-badge{display:inline-block;min-width:20px;padding:1px 7px;border-radius:20px;color:#fff;font-weight:800;font-size:12.5px}
.res-precos.sel3 .rp{cursor:pointer;border:2px solid transparent;transition:.12s}
.res-precos.sel3 .rp:hover{border-color:var(--borda-forte)}
.res-precos.sel3 .rp.sel{border-color:var(--az-logo);background:#eaf2fb;box-shadow:0 2px 10px rgba(12,99,164,.18)}
.aviso-manual{background:#fff7e6;border:1px solid #f5d99a;color:#8a5a00;border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:600;margin:6px 0}
.chk-reps{border:1.5px solid var(--line);border-radius:8px;padding:6px 10px;max-height:160px;overflow-y:auto;background:#fff;display:flex;flex-direction:column;gap:1px}
.chk-reps.sm{max-height:120px;width:230px;padding:5px 8px}
.chk-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);padding:3px 2px;cursor:pointer;border-radius:5px}
.chk-item:hover{background:var(--superficie-2)}
.chip-sl{display:inline-block;background:#fff7e6;border:1px solid #f5d99a;color:#8a5a00;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;margin:2px 3px 2px 0;white-space:nowrap}
.pp-pan{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:2px 0}
.pp-lv{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--ink)}
.swatch{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.2);vertical-align:middle}
.cores-cel{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:76px}
.cores-cel .cor-i{display:inline-flex;align-items:center;gap:4px}
.cores-cel .bola{width:15px;height:15px;border-radius:50%;border:1px solid rgba(16,32,58,.30);display:inline-block;flex:0 0 auto}
.cores-cel .bola.inc{background:linear-gradient(135deg,#fff 45%,#c9d6e4 50%,#fff 55%)}
.cores-cel .cor-n{font-size:11px;color:#46586e;font-weight:600}
.cores-cel .cor-txt{font-size:12.5px;color:#46586e}
.adm-tabs{flex-wrap:wrap;gap:8px;max-width:none}
.adm-tabs .tier{flex:0 1 auto;max-width:none;min-width:auto;padding:7px 12px;font-size:13.5px;letter-spacing:0;border-radius:10px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.cg-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cg-cell{display:flex;flex-direction:column;gap:2px}
@media(max-width:640px){
.cg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.cel-num{width:88px;text-align:right;border:1.5px solid var(--line);border-radius:6px;padding:4px 6px;font-size:13.5px;font-variant-numeric:tabular-nums}
.cel-num:focus{border-color:var(--brand);outline:none}
/* Irmãos de .cel-num, para célula editável que não é número (25/08/2026).
   A Classificação desenhava os campos com `style=` cru: sem borda do portal,
   sem raio, sem foco — caixa padrão do navegador no meio de uma tabela do
   portal. Mesma moldura para tudo que se digita dentro de tabela. */
.cel-txt{border:1.5px solid var(--line);border-radius:6px;padding:4px 6px;font-size:13.5px}
.cel-txt:focus{border-color:var(--brand);outline:none}
.cel-cor{border:1.5px solid var(--line);border-radius:6px;padding:0;width:34px;height:28px;
  background:#fff;cursor:pointer;flex:0 0 auto}
.cel-area{border:1.5px solid var(--line);border-radius:6px;padding:5px 7px;font-size:13.5px;
  font-family:inherit;width:100%;resize:vertical}
.cel-area:focus{border-color:var(--brand);outline:none}
/* Campos que moram na MESMA célula ficam numa linha só, alinhados pelo meio.
   Empilhados (o que acontecia) a coluna crescia três vezes de altura e as
   linhas da tabela deixavam de bater entre si. */
.cel-grupo{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.au-badge{padding:1px 8px;border-radius:20px;font-size:11px;font-weight:700}
.au-INSERT{background:#e7f6dd;color:#3f7d1e}
.au-UPDATE{background:#e2f1fb;color:#0c63a4}
.au-DELETE{background:#fbe3e4;color:#b42318}
input.editavel{background:#fffdf5!important;border-color:#f0c96a!important}
.per-sel{border:1.5px solid var(--borda-forte);border-radius:9px;padding:8px 10px;font-size:13.5px;font-weight:600;
  color:var(--ink);background:#fff;font-family:'Cairo',sans-serif;cursor:pointer}
/* A caixa em si (16px, azul da marca) vem do `brascamp-ui.css`. Aqui so o
   rotulo, na altura e na tipografia dos campos de filtro ao lado — antes eram
   12,5px cinza-claro ao lado de campos de 34px. */
.chk{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 2px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none;white-space:nowrap}
.per-lbl{margin:-6px 0 14px}
.cli-open{background:none;border:none;padding:2px 0;color:var(--ink);font-weight:700;font-size:13.5px;cursor:pointer;
  text-align:left;font-family:'Cairo',sans-serif;display:inline-flex;align-items:center;gap:6px}
.cli-open .cev, .grp-cli .cev{display:inline-block;color:var(--ink-3);font-size:11px;transition:transform .15s}
.cli-open.ativo .cev, .grp-cli .cev.ab{transform:rotate(90deg);color:var(--az-logo)}
.cli-open:hover{color:var(--az-logo)}
tr.cli-open{display:table-row}
.grp-row{cursor:pointer;background:#f7f9fc}
.grp-row:hover{background:#eef4fb}
.grp-cli{display:inline-flex;align-items:center;gap:7px}
.grp-tag{font-size:11px;font-weight:700;color:var(--ink-3);background:var(--superficie-2);border-radius:20px;padding:1px 8px;text-transform:uppercase;letter-spacing:.3px}
.grp-child .filho{padding-left:22px;color:var(--ink);font-weight:600}
.det-cli{display:flex;flex-direction:column;gap:14px;padding:20px 22px}
.det-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);padding-bottom:12px}
.det-head .x{background:none;border:none;font-size:17px;color:var(--mut);cursor:pointer;line-height:1;padding:2px 4px}
/* .det-kpis saiu em 08/09/2026: virou .dados-grade no design system. */
.det-tabela{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rel-kpis{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:10px;font-size:13.5px;color:#33465c}
/* ---------------------------------------------------------------------------
   PAR DE QUADROS COM ROLAGEM — os dois terminam na mesma linha (01/09/2026)

   A intencao estava declarada DUAS vezes neste arquivo e se contradizia: mais
   acima pedia-se `align-items:stretch` (com `flex:1` na area de rolagem, que so
   faz sentido se o cartao esticar) e AQUI vinha `align-items:start`. Ganhava
   esta, por vir depois. O Ranking terminava cortado no meio de um item e o
   Meta x Venda terminava depois dele, com a legenda.

   E o `flex:1` nunca teria funcionado de qualquer jeito: `.card` nao e flex.
   Sao tres coisas juntas — esticar, o cartao virar coluna flex, e a area de
   rolagem poder encolher (`min-height:0`; sem isso o conteudo empurra por
   dentro e a rolagem nunca aparece).

   O teto vai para o CARTAO, nao para a area de rolagem: e o cartao que precisa
   de altura previsivel para os dois terminarem juntos. 460px fica na mesma
   ordem de grandeza do que havia (380 de rolagem + cabecalho + respiro).
   --------------------------------------------------------------------------- */
.grid2-1{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch}
/* SEM teto no cartao, de proposito. `.grid2-1` tambem serve Engenharia (uma
   TABELA dentro do cartao) e Analise de Margem (barras) — nenhum dos dois tem
   area de rolagem, e um `max-height` ali faria o conteudo transbordar por cima
   do que vem embaixo, que e pior do que o desalinhamento. Quem manda na altura
   continua sendo o conteudo; o `stretch` so iguala os dois. */
.grid2-1 > .card{display:flex;flex-direction:column}
/* `min-height:0` e a peca que falta com frequencia: sem ela o conteudo empurra
   por dentro, o filho nunca fica menor que o proprio conteudo e a rolagem nao
   aparece. O teto de 380px continua sendo o do conteudo rolavel. */
.grid2-1 > .card > .rank-scroll,.grid2-1 > .card > .mv-scroll{flex:1;min-height:0}
@media(max-width:820px){
.grid2-1{grid-template-columns:1fr}
}
@media(max-width:900px){
.grid2especiais{grid-template-columns:1fr}
}
.bar-val{font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;}
.su-papel{font-size:11px; color:var(--mut); padding:0 2px; text-transform:uppercase; letter-spacing:.4px;}
.sec{font-weight:700; font-size:15px;}
.tier-tabs{gap:var(--e3); margin-bottom:var(--gap-blocos);}
.tier{border-radius:var(--r-btn); font-weight:800; border-width:2px;}
.chips-status{gap:var(--e2); margin-bottom:var(--gap-blocos);}
.chip-st{font-weight:600;}
.pin{border:1.5px solid var(--line); border-radius:var(--r-campo); outline:none; background:#fff; color:var(--ink);}
.fam-chip{background:#eef2f7; color:#46586e; border-radius:var(--r-chip); font-weight:700;}
.selo.no{color:var(--erro);}
.bar-fill{background:var(--az-logo);}
.bar-track{background:#eef2f7;}
.lbl{color:#5a6a7d; font-weight:700; font-size:12.5px;}
@keyframes sk{ 0%{background-position:100% 0} 100%{background-position:0 0} }
.venc{color:var(--erro); font-weight:700;}
@media (max-width:1023px){
.su-papel{display:none;}
}
@media (max-width:767px){
.su-papel{display:block;}
.grid2-1, .grid2especiais{min-width:0;}
.tier{white-space:nowrap;}
.tier{font-size:13.5px; padding:10px 4px;}
.tier-tabs{overflow-x:auto;}
}

/* ==========================================================================
   ESTADO SELECIONADO DOS SELETORES DE PAINEL  (29/08/2026)

   O QUE ESTAVA ERRADO: `.tier`, `.subtab` e `.chip-st` recebem a classe `on`
   quando o painel está selecionado — e NÃO EXISTIA NENHUMA REGRA para `.on`
   neste arquivo nem em nenhum outro. Ou seja: o botão do painel aberto ficava
   visualmente idêntico aos demais, em 11 telas. Quem abria a tela não tinha
   como saber qual aba estava vendo a não ser pelo conteúdo.

   Telas afetadas:
     .tier.on     amostras · clientes · ficha · painel-metas · precos · margem
                  · ocorrencias
     .subtab.on   clientes · dre-painel · faturamento-painel · orcamentos
     .chip-st.on  amostras · ocorrencias

   Sinal de que a falta era real e incomodava: `faturamento-painel.js` já
   contornava o problema escrevendo o azul no `style=` inline do botão ativo.
   Com a regra abaixo aquele remendo vira redundante (fica, é inofensivo —
   pinta do mesmo azul).

   POR QUE NEM TODOS FICAM AZUIS. O `.chip.ativo` do resto do portal é azul de
   marca, e `.subtab` segue esse padrão. Mas `.tier` e `.chip-st` carregam UMA
   COR PRÓPRIA por botão, escrita inline (`--tc` nas abas, `--c` nos status:
   solicitada, superada, devolvida, homologada…). Pintar esses de azul apagaria
   a informação que a cor carrega. Eles preenchem com a própria cor — que é o
   "muda de cor para cada sinalização" pedido pelo Joel.
   ========================================================================== */
.tier.on{background:var(--tc);color:#fff;box-shadow:0 2px 10px rgba(12,99,164,.22)}
.subtab.on{background:var(--az-logo);border-color:var(--az-logo);color:#fff}
.chip-st.on{background:var(--c);border-color:var(--c);color:#fff}