/* atlas_mercado.css - a prancha "O Mercado", V3-04a.
   PORTADO do fige-prancha-cnae-src.py, que segue existindo como pagina apartada.

   TRES COISAS FORAM FEITAS AQUI, e cada uma tem um motivo medido:

   1. TODA regra e escopada em `#v-mercado`, inclusive as de dentro do @media. Medido
      antes de portar: 27 nomes de classe colidem com o atlas.css, entre eles `.note`,
      `.lede`, `.stat`, `.grid`, `.num`, `.chip` e `.sel`. Colar sem escopo faria a ultima
      folha ganhar e quebraria as DUAS pranchas. Id nao colide: zero em 18, medido.
   2. O `:root` da pagina SAIU. Medido: os 17 tokens que ela usa ja existem no atlas.css,
      todos. Herdar em vez de redeclarar da o TEMA CLARO de graca, que a pagina apartada
      nao tem, porque ela cravava os valores do slate.
   3. Regras de cromo de pagina sairam: `body`, `header`, `h1`, `.wrap`, `.sub` e `footer`.
      Elas descreviam a pagina que hospedava a tabela, e o Atlas ja tem as suas.

   As regras com `html[data-emp]` ficam e nunca disparam, porque o Atlas nao escreve esse
   atributo: Leonardo escolheu a versao SEM as colunas de empresa e razao. Ficam de
   proposito, para a opcao nao ser destruida em silencio.
*/

/* ══ V3-04m: COR DE TEMA NAO FICA CRAVADA, SAI DE TOKEN ═══════════════════════
   Tres declaracoes usavam #243247 e #2A3A52 na mao, no fundo da linha de grupo e no
   totalizador. No slate passava, porque a pagina apartada tem um tema so e aqueles
   valores foram escolhidos contra ele. No tema claro o fundo continuava azul escuro
   enquanto o texto virava escuro, e o resultado foi medido pela formula do WCAG:
   nome do grupo com contraste 1,06, numeros com 1,35, codigo e ticket com 2,45.
   Ilegivel, e foi o que Leonardo viu.
   Passam a usar `--slab`, que e o token que o cabecalho da tabela ja usava, definido
   nos DOIS temas: #212E3E no slate e #FFFFFF no claro. O hover sai de color-mix sobre
   o mesmo token, entao acompanha o tema em vez de brigar com ele.
   A regra e do proprio projeto e ja estava escrita no CLAUDE.md desde o V3-00a. */

/* ══ RESET DE COLISAO, e ele nao e zelo excessivo: foi medido ═════════════════
   ESCOPAR NAO BASTA, e isto custou uma volta. Escopar em `#v-mercado` aumenta a
   especificidade das propriedades que a regra DECLARA. As que ela nao declara
   continuam vindo da regra de mesmo nome do atlas.css, que tem 27 classes em comum.
   O caso que apareceu na tela: o atlas.css tem `.fx{display:inline-flex;gap:5px}` mais
   um `.fx::before` de 7px, porque `.fx` la e o chip de faixa de tensao com bolinha
   colorida. A regra da prancha declara padding e borda, nao declara display, entao os
   filtros viraram linha em vez de coluna e os selects transbordaram a celula em
   50 a 69 px, com a pagina passando a rolar na horizontal.
   Medido nas 27: SETE recebiam propriedade injetada, `.fx`, `.p`, `.seg`, `.chip`,
   `.on`, `.o` e o trio `.al`, `.note` e `.stat` com border-radius.

   Como funciona: `revert` devolve o valor do navegador, e este bloco vem ANTES das
   regras da prancha. Onde a prancha declara, ela vence por ordem de fonte com a mesma
   especificidade, ou por especificidade maior nas regras de descendente. Onde ela nao
   declara, este reset impede o vazamento.

   ISTO E FRAGILIDADE DECLARADA, nao conserto definitivo: regra nova no atlas.css com
   um desses 27 nomes volta a vazar propriedade que nao esteja na lista abaixo. O
   conserto duravel e RENOMEAR as classes da prancha com prefixo proprio, e ele nao foi
   feito hoje porque oito dos 27 nomes sao de uma letra, usados dentro de literais de
   template no JS, e renomear por expressao regular ali e onde eu introduziria bug
   silencioso. O teste de aceite existe e e automatico: comparar o estilo computado da
   prancha dentro do Atlas contra a pagina apartada, elemento por elemento.
   Nenhum `::before` da prancha e usado nessas 27 classes, so `::after` em duas, entao
   zerar o content de `::before` nelas nao tira nada dela. */
#v-mercado .al,#v-mercado .b,#v-mercado .c,#v-mercado .chip,#v-mercado .d,#v-mercado .dica,#v-mercado .dim,#v-mercado .fx,#v-mercado .grid,#v-mercado .hd,#v-mercado .k,#v-mercado .lbl,#v-mercado .lede,#v-mercado .marca,#v-mercado .note,#v-mercado .num,#v-mercado .o,#v-mercado .on,#v-mercado .ord,#v-mercado .p,#v-mercado .r,#v-mercado .seg,#v-mercado .sel,#v-mercado .stat,#v-mercado .sub,#v-mercado .t,#v-mercado .vazio{
  display:revert;position:revert;float:revert;gap:revert;align-items:revert;
  justify-content:revert;flex-direction:revert;grid-template-columns:revert;
  border-radius:revert;margin:revert;padding:revert;font-size:revert;
  line-height:revert;text-align:revert;white-space:revert;letter-spacing:revert;
  font-family:revert;font-weight:revert;text-transform:revert;
  color:revert;background:revert;border:revert;width:revert;height:revert;
  /* V3-04n: `box-shadow` entrou na lista porque a tag de persona da arvore aparecia com
     um ANEL VERDE de 1px mais sombra grande, e Leonardo apontou que estava destacada sem
     necessidade. A causa e colisao de DUAS classes ao mesmo tempo: a arvore escreve
     `class="sel p"` e o atlas.css tem `.p.sel{border-color:var(--amber);
     box-shadow:0 0 0 1px var(--amber),var(--sh-md)}`, que e o cartao de persona
     SELECIONADO da prancha de Concessoes. O reset ja cobria `border`, e por isso a borda
     nao aparecia, mas nao cobria `box-shadow`. Lido no proprio navegador: o elemento
     casava com `.p.sel` duas vezes, e a segunda pintava o anel.
     As demais entraram pelo mesmo motivo: sao propriedades que a regra de mesmo nome
     pode injetar e que a prancha nunca declara. */
  box-shadow:revert;transform:revert;filter:revert;opacity:revert;transition:revert;
  outline:revert;text-decoration:revert;vertical-align:revert;cursor:revert;
  background-image:revert;border-color:revert
}
#v-mercado .al::before,#v-mercado .b::before,#v-mercado .c::before,#v-mercado .chip::before,#v-mercado .d::before,#v-mercado .dica::before,#v-mercado .dim::before,#v-mercado .fx::before,#v-mercado .grid::before,#v-mercado .hd::before,#v-mercado .k::before,#v-mercado .lbl::before,#v-mercado .lede::before,#v-mercado .marca::before,#v-mercado .note::before,#v-mercado .num::before,#v-mercado .o::before,#v-mercado .on::before,#v-mercado .ord::before,#v-mercado .p::before,#v-mercado .r::before,#v-mercado .seg::before,#v-mercado .sel::before,#v-mercado .stat::before,#v-mercado .sub::before,#v-mercado .t::before,#v-mercado .vazio::before{content:none}
#v-mercado h2{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink3);
 text-transform:uppercase;margin:30px 0 11px;padding-bottom:7px;border-bottom:1px solid var(--edge)}
#v-mercado h2 b{color:var(--amber);font-weight:600}
#v-mercado .lede{color:var(--ink2);font-size:13.5px;max-width:100ch;margin-bottom:14px}
/* painel de filtros */
#v-mercado .painel{border:1px solid var(--edge2);border-radius:3px;
 background:color-mix(in srgb,var(--pit) 96%,transparent);backdrop-filter:blur(10px);
 padding:0;margin-bottom:10px;position:sticky;top:0;z-index:20;
 box-shadow:0 6px 18px -10px var(--void)}
#v-mercado .pl{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:0;
 border-bottom:1px solid var(--edge)}
#v-mercado .fx{padding:7px 11px 8px;border-right:1px solid var(--edge)}
#v-mercado .corte-l{display:flex;align-items:center;gap:8px;margin-top:2px}
#v-mercado .corte-l .seg{flex:none}
#v-mercado .corte-l .seg button{padding:3px 6px;font-size:9px}
#v-mercado .fx:last-child{border-right:0}
#v-mercado .lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;color:var(--ink3);
 text-transform:uppercase;margin-bottom:5px;display:block;line-height:1.3}
#v-mercado select,#v-mercado input[type=text]{width:100%;background:var(--slab);border:1px solid var(--edge2);
 color:var(--ink);font-family:var(--body);font-size:12px;padding:4px 7px;border-radius:2px}
#v-mercado input[type=range]{margin:0;height:16px}
#v-mercado select:focus,#v-mercado input:focus{outline:1px solid var(--amber-d)}
#v-mercado .seg{display:flex;border:1px solid var(--edge2);border-radius:2px;overflow:hidden}
#v-mercado .seg button{flex:1;background:none;border:0;border-right:1px solid var(--edge2);color:var(--ink3);
 font-family:var(--mono);font-size:10px;padding:6px 4px;cursor:pointer;letter-spacing:.05em;
 text-transform:uppercase}
#v-mercado .seg button:last-child{border-right:0}
#v-mercado .seg button:hover{color:var(--ink)}
#v-mercado .seg button.on{color:var(--void);font-weight:700;background:var(--amber)}
#v-mercado .chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
#v-mercado .chips .dica{font-size:9.5px;color:var(--ink3);white-space:nowrap;padding-left:6px;flex:none}
#v-mercado .chip{white-space:nowrap}
#v-mercado .chip{font-family:var(--mono);font-size:9px;padding:2px 6px;border:1px solid var(--edge2);
 border-radius:2px;color:var(--ink3);cursor:pointer;background:none;letter-spacing:.04em}
#v-mercado .chip:hover{color:var(--ink)}
#v-mercado .chip.on{background:var(--amber-d);border-color:var(--amber-d);color:var(--ink)}
#v-mercado .chip.tudo.on{background:var(--edge2);border-color:var(--edge2)}
#v-mercado input[type=range]{width:100%;accent-color:var(--amber);background:none}
#v-mercado .corteval{font-family:var(--mono);font-size:14px;color:var(--amber);
 font-variant-numeric:tabular-nums;flex:none;min-width:62px}
#v-mercado .corteval small{font-size:10.5px;color:var(--ink3)}
#v-mercado .recorte{padding:6px 11px;font-size:11px;color:var(--ink3);display:flex;gap:18px;flex-wrap:wrap}
#v-mercado .recorte b{color:var(--ink2);font-family:var(--mono);font-variant-numeric:tabular-nums}
/* numeros */
#v-mercado .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px;margin:12px 0}
/* mesma correcao do `.stat` geral: a caixa FECHA, com a borda fina em volta mais a
   espessa a esquerda. A folha propria da prancha sobrescrevia a geral e por isso ela
   precisa da correcao tambem. */
#v-mercado .stat{border:1px solid var(--edge);border-left:2px solid var(--amber);
 border-radius:2px;padding:11px 14px;
 background:color-mix(in srgb,var(--ink) 3%,transparent)}
#v-mercado .stat.warn{border-left-color:var(--at)}
#v-mercado .stat .k{font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:var(--ink3);
 text-transform:uppercase}
#v-mercado .stat .val{font-size:25px;font-weight:600;line-height:1.15;margin-top:4px;
 font-variant-numeric:tabular-nums}
#v-mercado .stat .val small{font-size:12.5px;color:var(--ink2);font-weight:400}
#v-mercado .stat .d{font-size:11.5px;color:var(--ink3);margin-top:4px;line-height:1.4}
#v-mercado .note{border-left:2px solid var(--amber);padding:12px 16px;
 background:color-mix(in srgb,var(--amber) 5%,transparent);font-size:12.5px;color:var(--ink2);
 margin:14px 0;line-height:1.55}
#v-mercado .note b{color:var(--amber)}
#v-mercado .note.al{border-left-color:var(--at);background:color-mix(in srgb,var(--at) 6%,transparent)}
#v-mercado .note.al b{color:var(--at)}
/* tabela */
#v-mercado .rows{border:1px solid var(--edge);border-radius:3px;background:var(--pit);overflow:hidden}
#v-mercado .hd,#v-mercado .row{display:grid;
 grid-template-columns:minmax(0,1fr) 86px 84px 96px 64px 44px 58px;align-items:center}
html[data-emp] #v-mercado .hd,html[data-emp] #v-mercado .row{grid-template-columns:minmax(0,1fr) 86px 52px 86px 84px 96px 64px 44px 58px}
html:not([data-emp]) #v-mercado .cemp,html:not([data-emp]) #v-mercado .craz{display:none}
#v-mercado .hd{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;color:var(--ink3);
 text-transform:uppercase;height:31px;padding:0 14px;
 border-bottom:1px solid var(--edge2);background:var(--slab)}
/* o cabecalho mora DENTRO do container rolavel, senao a barra de rolagem o deixa
   15px mais largo que as linhas e as divisorias nao casam */
#v-mercado .scroll .hd{position:sticky;top:0;z-index:5}
#v-mercado .scroll{max-height:calc(100vh - 200px);min-height:340px;overflow-y:auto}
#v-mercado .hd span{text-align:right;padding-left:8px}
#v-mercado .hd span:first-child{text-align:left;padding-left:0}
#v-mercado .row{padding:4px 14px;border-bottom:1px solid color-mix(in srgb,var(--edge) 45%,transparent);
 font-size:12.5px}
#v-mercado .row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
#v-mercado .row .num{text-align:right;font-family:var(--mono);font-size:11.5px;padding-left:8px;
 font-variant-numeric:tabular-nums;color:var(--ink2)}
#v-mercado .row .num.dim{color:var(--ink3)}
#v-mercado .row .num.her{color:var(--ink3);font-style:italic}
/* blocos de natureza diferente ganham divisoria: empresa, energia, sazonalidade */
#v-mercado .hd .cpico,#v-mercado .row .cpico,#v-mercado .hd .cemp,#v-mercado .row .cemp,#v-mercado .hd .cuc,#v-mercado .row .cuc{border-left:1px solid var(--edge2);margin-left:6px;padding-left:8px}
html:not([data-emp]) #v-mercado .hd .cuc,html:not([data-emp]) #v-mercado .row .cuc{border-left:0;margin-left:0;padding-left:8px}
#v-mercado .row .cemp,#v-mercado .row .craz{color:var(--ink3)}
#v-mercado .row.hdr .cemp,#v-mercado .row.hdr .craz{color:var(--ink2)}
#v-mercado .nm{display:flex;align-items:baseline;gap:8px;min-width:0}
#v-mercado .nm code{font-family:var(--mono);font-size:10.5px;color:var(--ink3);flex:none}
#v-mercado .nm .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#v-mercado .lv1 .nm{padding-left:0}
#v-mercado .lv2 .nm{padding-left:15px}
#v-mercado .lv3 .nm{padding-left:30px}
#v-mercado .lv4 .nm{padding-left:45px}
#v-mercado .lv5 .nm{padding-left:60px}
#v-mercado .hdr{background:color-mix(in srgb,var(--ink) 5%,transparent)}
#v-mercado .hdr .t{font-weight:600}
/* AGRUPAMENTO: o cabecalho do grupo gruda no topo enquanto os filhos passam,
   os filhos ganham espinha lateral, e cada grupo comeca com uma regra propria. */
#v-mercado .row.lv1.hdr{position:sticky;top:31px;z-index:3;background:var(--slab);cursor:pointer;
 border-top:1px solid var(--amber-d);
 box-shadow:0 1px 0 color-mix(in srgb,var(--void) 55%,transparent)}
#v-mercado .row.lv1.hdr:hover{background:color-mix(in srgb,var(--slab) 88%,var(--ink))}
#v-mercado .row.lv1.leaf{border-top:1px solid color-mix(in srgb,var(--edge2) 50%,transparent)}
#v-mercado .row.filho{box-shadow:inset 3px 0 0 var(--amber-d)}
#v-mercado .row.filho.par{background:color-mix(in srgb,var(--ink) 2%,transparent)}
#v-mercado .row.filho.lv3{box-shadow:inset 3px 0 0 var(--amber-d),inset 15px 0 0 -12px var(--edge2)}
#v-mercado .cx{font-family:var(--mono);font-size:9px;color:var(--amber);flex:none;width:10px}
#v-mercado .gcount{font-family:var(--mono);font-size:9px;color:var(--ink3);flex:none}
/* BALDE de resto: e agregacao, nao alerta. Recua em vez de chamar. */
#v-mercado .row.resto{cursor:pointer;background:color-mix(in srgb,var(--ink) 3%,transparent)}
#v-mercado .row.resto:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
#v-mercado .row.resto .t{font-style:italic;color:var(--ink3)}
#v-mercado .row.resto code,#v-mercado .row.resto .cx{color:var(--ink3)}
#v-mercado .row.resto .num,#v-mercado .row.resto .mass .p{color:var(--ink3)}
#v-mercado .row.resto .mass .b i{background:var(--edge2)}
#v-mercado .row.doresto{background:color-mix(in srgb,var(--ink) 2%,transparent)}
/* MARCA: o balde pequeno demais para ter linha propria. Fica no pai, e abre no clique */
#v-mercado .marca{font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--ink3);
 border:1px solid var(--edge2);border-radius:2px;padding:1px 5px;flex:none;cursor:pointer;
 white-space:nowrap}
#v-mercado .marca:hover{color:var(--ink2);border-color:var(--ink3)}
#v-mercado .row.doresto .t{color:var(--ink2)}
#v-mercado .cls .t{font-size:11px;letter-spacing:.02em;color:var(--ink2)}
/* coluna de massa: numero mais barra proporcional a MAIOR LINHA VISIVEL */
#v-mercado .mass{padding-left:8px}
#v-mercado .mass .p{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--ink2);
 font-variant-numeric:tabular-nums}
#v-mercado .mass .b{height:4px;margin-top:2px;background:color-mix(in srgb,var(--ink) 9%,transparent);
 border-radius:2px;overflow:hidden}
#v-mercado .mass .b i{display:block;height:100%;background:var(--bt);border-radius:2px}
#v-mercado .hdr .mass .b i{background:var(--amber)}
#v-mercado .sel{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;padding:1px 5px;border-radius:2px;
 flex:none;text-transform:uppercase}
#v-mercado .sel.o{background:color-mix(in srgb,var(--alert) 18%,transparent);color:var(--alert)}
#v-mercado .sel.r{background:color-mix(in srgb,var(--at) 16%,transparent);color:var(--at)}
#v-mercado .sel.c{background:color-mix(in srgb,var(--bt) 15%,transparent);color:var(--bt)}
#v-mercado .sel.p{background:color-mix(in srgb,var(--mt) 18%,transparent);color:var(--mt)}
#v-mercado .sel.rf{background:color-mix(in srgb,var(--as) 15%,transparent);color:var(--as)}
/* barra da tabela: o que governa a lista mora colado nela */
#v-mercado .tbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:8px 12px;
 border:1px solid var(--edge);border-bottom:0;border-radius:3px 3px 0 0;
 background:var(--slab)}
#v-mercado .tbar .lbl{margin:0 7px 0 0;display:inline-block;vertical-align:middle}
#v-mercado .tbar .seg{display:inline-flex;vertical-align:middle}
#v-mercado .tbar .seg button{flex:1 0 auto;min-width:74px;text-align:center}
#v-mercado .tbar .cont{font-size:11.5px;color:var(--ink3)}
#v-mercado .tbar .dica-ord{margin-left:auto;font-style:italic}
/* ordenacao no proprio cabecalho da coluna */
#v-mercado .hd .ord{cursor:pointer;user-select:none}
#v-mercado .hd .ord:hover{color:var(--ink2)}
#v-mercado .hd .ord.on{color:var(--amber);font-weight:700}
#v-mercado .hd .ord.on::after{content:" ▼";font-size:7px;vertical-align:middle;letter-spacing:0}
/* totalizador fixo no rodape da tabela */
#v-mercado .tfoot{position:sticky;bottom:0;z-index:6;border-top:1px solid var(--amber-d);
 border-bottom:0;background:var(--slab);text-transform:none;font-family:var(--body);
 font-size:12px;color:var(--ink)}
#v-mercado .tfoot .nm{display:flex;align-items:baseline;gap:8px}
#v-mercado .tfoot .num,#v-mercado .tfoot .mass .p{font-family:var(--mono);font-size:10.5px;color:var(--ink);
 text-align:right;font-variant-numeric:tabular-nums;padding-left:10px;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
#v-mercado .tfoot .nm b{white-space:nowrap}
#v-mercado .tfoot .mass{padding-left:8px}
#v-mercado .rows.colada{border-radius:0 0 3px 3px}
#v-mercado .sw{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
 font-size:12px;color:var(--ink2)}
#v-mercado .sw input{appearance:none;width:32px;height:17px;border-radius:9px;background:var(--edge2);
 position:relative;cursor:pointer;transition:background .15s;flex:none;margin:0}
#v-mercado .sw input:checked{background:var(--amber-d)}
#v-mercado .sw input::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;
 border-radius:50%;background:var(--ink);transition:left .15s}
#v-mercado .sw input:checked::after{left:17px;background:var(--amber)}
/* AS LEGENDAS EM GRADE e nao em flex. Leonardo: "parece que a diagramacao ficou meio
   espacada, estranha". Sao DOZE itens de comprimentos muito diferentes, e o flex os
   quebrava em fileiras irregulares, com buracos no fim de cada uma. Em grade eles alinham
   em colunas, que e o padrao que as apartadas usam para lista de rotulo. */
#v-mercado .leg{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
 gap:7px 22px;font-size:11.5px;color:var(--ink3);margin-top:14px;
 padding-top:12px;border-top:1px solid var(--edge)}
#v-mercado .leg b{color:var(--ink2);font-weight:400}
#v-mercado .vazio{padding:40px;text-align:center;color:var(--ink3);font-size:13px}
@media(max-width:1240px){
  #v-mercado .hd,#v-mercado .row{grid-template-columns:minmax(0,1fr) 86px 86px 88px 58px}
  html[data-emp] #v-mercado .hd,html[data-emp] #v-mercado .row{grid-template-columns:minmax(0,1fr) 86px 48px 86px 86px 88px 58px}
  #v-mercado .cpico,#v-mercado .camp{display:none}
}