/* ===========================================================================
   PAINEL — linguagem visual nova do monitor (direccao "sala de controlo")
   Aprovada pelo Diogo em 2026-08-05. Aplicada por agora aos ecras 1 e 2; os
   restantes 14 continuam com o style.css antigo ate serem passados.

   TUDO tem ambito .painel de proposito: o style.css antigo define .titulo,
   .valor, .border e .margin de forma global e colidiria com estes nomes.

   Tipo de letra: Bahnschrift (condensada tecnica), ja instalada na VM que serve
   o dashboard — nao depende de descarregar nada da internet.

   PONTO DE CORTE A 1400px, e nao nos 768 do costume: o telemovel desenha a
   pagina com 980px de largura de LAYOUT e so depois a encolhe para o ecra
   fisico, portanto uma media query estreita nunca dispararia la. Aos 1400
   apanha-o, e o desenho passa a 2 por linha com os numeros MAIORES.
   NAO usar vw para tamanho de texto aqui — ja foi tentado e piorou o telemovel
   (ver o comentario no topo do style.css).
   =========================================================================== */

.painel{
  --fundo:#0b0f14;
  --linha:#1e2733;
  --texto:#e8eef5;
  --dim:#7d8b9c;
  --acento:#f0a028;
  --sobe:#4cc76e;
  --desce:#ef6a5a;
  --grade:#2a3644;
  --barra1:#4f7fb5;
  --barra2:#33587f;

  background:radial-gradient(120% 80% at 50% -10%, #16202c 0%, #0b0f14 55%), #0b0f14;
  color:var(--texto);
  font-family:'Bahnschrift','DIN Alternate','Roboto Condensed','Segoe UI',sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:1.6vh 1.6vw 1vh;
  overflow:hidden;
}
/* o border-box tem de valer para o PROPRIO .painel, nao so para os filhos:
   com height:100vh mais 2.6vh de padding em content-box, o painel media 1019
   numa janela de 993 e cortava 26px em baixo — nos ecras 1 e 2 comia a base do
   grafico sem se dar por isso. Detectado ao medir o ecra 4 (sessao 5). */
.painel,.painel *{box-sizing:border-box}
.painel *{margin:0;padding:0}

/* ---- cabecalho ---- */
/* o padding-right abre o canto para o #indicadorEcra (1/16), que e fixo e
   passaria por cima do texto da direita */
.painel .topo{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--acento);padding-bottom:0.8vh;margin-bottom:1.4vh;
  padding-right:4.6vw;flex:0 0 auto}
.painel .topo h1{font-size:34px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase}
.painel .topo .quando{font-size:25px;letter-spacing:0.16em;color:var(--dim);text-transform:uppercase}

.painel .rot{font-size:24px;letter-spacing:0.2em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- blocos de numero ---- */
.painel .blocos{display:grid;grid-template-columns:repeat(4,1fr);flex:0 0 auto}
.painel .bloco{padding:0.4vh 1.6vw 0;border-left:1px solid var(--linha);min-width:0}
.painel .bloco:first-child{border-left:0;padding-left:0.4vw}
.painel .num{font-size:104px;font-weight:600;line-height:1;margin:0.4vh 0 0.7vh;white-space:nowrap}
.painel .num .un{font-size:0.46em;font-weight:400;color:var(--dim);margin-left:0.1em}
.painel .risco{height:4px;width:52px;background:var(--acento);margin-bottom:0.9vh}
.painel .risco.v{background:var(--sobe)}
.painel .risco.r{background:var(--desce)}
.painel .comp{font-size:27px;line-height:1.35;color:var(--dim);min-height:72px}
.painel .comp b{font-weight:600}
.painel .sobe{color:var(--sobe)}
.painel .desce{color:var(--desce)}
.painel .avisa{color:var(--acento)}

/* ---- faixa secundaria ---- */
.painel .faixa{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  margin:1.4vh 0;padding:1.1vh 0;flex:0 0 auto}
.painel .mini{padding:0 1.6vw;border-left:1px solid var(--linha);min-width:0}
.painel .mini:first-child{border-left:0;padding-left:0.4vw}
.painel .mini .rot{font-size:22px}
.painel .mini .n{font-size:50px;font-weight:600;line-height:1.1}

/* ---- grafico de barras ---- */
.painel .grafico{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.painel .grafico .cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.8vh}
.painel .grafico .cab .rot{font-size:23px}
.painel .barras{flex:1 1 auto;display:flex;align-items:flex-end;min-height:0}
.painel .col{flex:1 1 0;min-width:0;padding:0 0.32vw;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;height:100%}
.painel .col .v{font-size:23px;font-weight:600;margin-bottom:5px;white-space:nowrap}
.painel .col .b{width:100%;background:linear-gradient(180deg,var(--barra1) 0%,var(--barra2) 100%);
  border-radius:2px 2px 0 0}
.painel .col.agora .b{background:repeating-linear-gradient(45deg,var(--acento),var(--acento) 7px,#9a6414 7px,#9a6414 14px)}
.painel .col.agora .v{color:var(--acento)}
/* Barra assinalada (ecra 8): ano em que o ProJetex ainda nao separava mercados, por
   isso conta por inteiro em vez da regua dos 45%. Esbatida, com asterisco no rotulo. */
.painel .col.marca .b{opacity:.45}
.painel .col.marca .v{color:var(--dim)}
.painel .meses{display:flex;border-top:1px solid var(--grade);flex:0 0 auto}
.painel .meses div{flex:1 1 0;min-width:0;text-align:center;font-size:22px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--dim);padding-top:6px}

/* ---- ecra 2: funil ---- */
.painel .tres{display:grid;grid-template-columns:repeat(3,1fr);flex:0 0 auto}
.painel .tres .bloco:first-child{padding-left:0.4vw}
.painel .taxa-g{font-size:30px;font-weight:600}
.painel .mercados{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0;
  margin:1.2vh 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:1.4vh 0}
.painel table{width:100%;border-collapse:collapse}
/* o style.css antigo poe thead th sticky e com fundo azul — aqui nao */
.painel thead th{position:static;background-color:transparent}
.painel th{font-size:23px;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim);
  font-weight:400;text-align:right;padding:0 1.4vw 1vh}
.painel th:first-child{text-align:left;padding-left:0.4vw}
.painel td{font-size:46px;font-weight:600;text-align:right;padding:0.7vh 1.4vw;white-space:nowrap}
.painel td:first-child{font-size:24px;letter-spacing:0.2em;text-transform:uppercase;color:var(--dim);
  font-weight:400;text-align:left;padding-left:0.4vw}
.painel td .pc{font-size:0.64em;margin-left:0.3em}
.painel tbody tr + tr td{border-top:1px solid var(--linha)}

.painel .tend{display:grid;grid-template-columns:repeat(3,1fr);flex:0 0 auto}
.painel .jan{padding:0 1.6vw;border-left:1px solid var(--linha);min-width:0}
.painel .jan:first-child{border-left:0;padding-left:0.4vw}
.painel .jan .aviso{font-size:20px;color:var(--acento);height:22px}
.painel .par{display:flex;gap:2.4vw;margin-top:0.4vh}
.painel .par > div{min-width:0}
.painel .par .l{font-size:21px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim)}
.painel .par .t{font-size:42px;font-weight:600;line-height:1.1}
.painel .par .p{font-size:22px;color:var(--dim)}

/* ---- ecra 3: trabalho em curso ----
   A faixa deste ecra usa .v em vez do .n da faixa do ecra 1 porque estes sao
   valores escritos de raiz (percentagens), sem passar pelas funcoes antigas que
   escrevem em '#id span'. */
.painel .faixa .v{font-size:50px;font-weight:600;line-height:1.1}
.painel .fuga{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding-bottom:1.6vh}
.painel .fuga .cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.6vh}
.painel .fuga .cab .rot{font-size:23px}
/* as linhas repartem a altura que sobra em vez de se amontoarem no topo; o
   padding-bottom do .fuga garante que a ultima nao encosta ao fundo do ecra */
.painel .fuga table{flex:1 1 auto}
.painel .fuga tbody tr{height:1px}
.painel .fuga td .sub{font-size:0.6em;color:var(--dim);font-weight:400;margin-left:0.28em}
.painel .fuga td:first-child{color:var(--texto);white-space:normal}
.painel .fuga td:first-child .projs{font-size:19px;letter-spacing:0.06em;color:var(--dim);
  margin-top:3px;text-transform:none}
/* no ecra 5 a tabela vem logo a seguir aos blocos, sem a faixa pelo meio a
   separar — leva risco e ar proprios */
.painel .fuga.separada{border-top:1px solid var(--linha);margin-top:1.4vh;padding-top:1.4vh}

/* ---- ecra 4: procura e conversao ----
   A tabela do ecra 2 cresce para encher o ecra (flex:1). Aqui em baixo dela ha
   um grafico, e os dois a crescer punham as barras fora do ecra. Esta variante
   ocupa so o que precisa. */
.painel .mercados.compacta{flex:0 0 auto;justify-content:flex-start;margin:1vh 0;padding:1vh 0}
.painel .mercados.compacta td{font-size:38px;padding:0.5vh 1.4vw}
.painel .mercados.compacta td:first-child{font-size:24px}
/* base zero: o grafico fica com o que sobra e nunca empurra o ecra para baixo
   (o do ecra 1 mantem-se como esta, por isso a classe e so daqui) */
.painel .grafico.resto{flex:1 1 0}

/* ---- onde vamos na rotacao (1/16) ----
   UNICA regra deste ficheiro sem ambito .painel, de proposito: o indicador tem
   de aparecer tambem nos ecras que ainda usam o style.css antigo. O id e
   proprio, portanto nao colide com nada. */
#indicadorEcra{
  position:fixed; top:0; right:0; z-index:50; pointer-events:none;
  padding:0.9vh 1.2vw 0 0;
  font-family:'Bahnschrift','DIN Alternate','Roboto Condensed','Segoe UI',sans-serif;
  font-variant-numeric:tabular-nums;
  font-size:19px; letter-spacing:0.14em; color:#7d8b9c; opacity:0.55;
}
#indicadorEcra b{font-weight:600; color:#e8eef5}

@media (max-width:1400px){
  #indicadorEcra{font-size:26px; padding:1.6vh 3vw 0 0}
}

/* ===========================================================================
   ECRA ESTREITO — apanha tambem o telemovel, que desenha a 980px
   =========================================================================== */
@media (max-width:1400px){
  .painel{height:auto;min-height:100vh;padding:2.4vh 3vw;overflow:visible}
  /* lado a lado o titulo e a data nao cabem e ficam colados um ao outro
     ("MERCADOSORCAMENTOS ENVIADOS"). Aqui passam a duas linhas. */
  .painel .topo{display:block;padding-right:16vw}
  .painel .topo h1{font-size:44px}
  .painel .topo .quando{display:block;font-size:30px;margin-top:0.6vh}
  .painel .rot{font-size:34px}

  /* em duas colunas o rotulo tem metade da largura: deixa-lo quebrar em vez de
     ser cortado com reticencias ("Custo freelan..."). Os rotulos curtos dos
     ecras 1 e 2 continuam numa linha so, portanto nada muda la. */
  .painel .bloco > .rot{white-space:normal}

  .painel .blocos,.painel .tres{grid-template-columns:repeat(2,1fr)}
  .painel .bloco{padding:3vh 2vw;border-top:1px solid var(--linha)}
  .painel .blocos .bloco:nth-child(-n+2),.painel .tres .bloco:nth-child(-n+2){border-top:0}
  .painel .bloco:nth-child(odd){border-left:0;padding-left:0}
  .painel .num{font-size:128px}
  .painel .comp{font-size:34px;min-height:0}
  .painel .risco{width:70px;height:5px}
  .painel .taxa-g{font-size:38px}

  .painel .faixa{grid-template-columns:repeat(2,1fr);padding:0}
  .painel .mini{padding:2.4vh 2vw;border-top:1px solid var(--linha)}
  .painel .mini:nth-child(-n+2){border-top:0}
  .painel .mini:nth-child(odd){border-left:0;padding-left:0}
  /* mesma razao dos rotulos dos blocos: em duas colunas nao cabem numa linha e
     ficavam cortados ("Orcamentos 7 di...", "Dias uteis por di..."). */
  .painel .mini .rot{font-size:30px;white-space:normal}
  .painel .mini .n{font-size:76px}
  .painel .faixa .v{font-size:76px}

  .painel .fuga{min-height:0}
  .painel .fuga .cab{flex-direction:column;align-items:flex-start;gap:0.6vh}
  .painel .fuga .cab .rot{font-size:30px;white-space:normal}
  /* cinco colunas nao cabem nos 980 com os 56px da tabela do ecra 2 — aqui
     a tabela vive por conta propria e leva numeros mais pequenos */
  .painel .fuga th{font-size:22px;padding:0 0.6vw 1vh}
  .painel .fuga td{font-size:38px;padding:1vh 0.6vw}
  .painel .fuga td:first-child{font-size:24px}

  .painel .grafico{min-height:46vh}
  /* lado a lado nao cabem nos 980 e ficavam ambos cortados ("...POR S..." e
     "SEMANA ..."); empilhados leem-se inteiros. Vale tambem para o ecra 1. */
  .painel .grafico .cab{flex-direction:column;align-items:flex-start;gap:0.4vh}
  .painel .grafico .cab .rot{font-size:30px;white-space:normal}
  .painel .col .v{font-size:25px}
  .painel .meses div{font-size:25px}

  .painel .mercados{padding:2vh 0}
  .painel th{font-size:28px;padding-bottom:1.4vh}
  .painel td{font-size:56px;padding:1.2vh 1.2vw}
  .painel td:first-child{font-size:28px}

  .painel .tend{grid-template-columns:1fr}
  .painel .jan{border-left:0;padding:2.4vh 0;border-top:1px solid var(--linha)}
  .painel .jan:first-child{border-top:0}
  .painel .jan .aviso{font-size:26px;height:auto}
  .painel .par .l{font-size:28px}
  .painel .par .t{font-size:60px}
  .painel .par .p{font-size:28px}
}

/* ---- ecra 7: mercados ----
   Uma percentagem feita de meia duzia de orcamentos nao sustenta juizo nenhum: em vez
   de a pintar de verde ou vermelho, escreve-se em cinzento (a mesma cor dos rotulos). */
.painel .fraco{color:var(--dim)}
/* o volume ao lado da taxa, tanto na tabela como na faixa dos particulares */
.painel .faixa .v .sub{font-size:0.52em;color:var(--dim);font-weight:400;margin-left:0.3em}
.painel .fuga td .sub{font-size:0.52em}
/* a moeda ao lado do valor na tabela do ecra 9 (a .mercados nao herda o .sub da .fuga) */
.painel .mercados td .sub{font-size:0.55em;color:var(--dim);font-weight:400;margin-left:0.22em}

/* ---- ecra 10: margem mes a mes, duas barras por mes ---- */
.painel .col.mgpar{flex-direction:row;align-items:flex-end;gap:4px}
.painel .col.mgpar .mgb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;height:100%}
.painel .col.mgpar .mgm{font-size:20px;height:24px;line-height:1}
.painel .col.mgpar .v{font-size:20px}
.painel .col.mgpar .b{width:100%}
.painel .col.mgpar .b.ant{background:linear-gradient(180deg,#4d7ab4 0%,#3b6496 100%)}
.painel .col.mgpar .b.atu{background:linear-gradient(180deg,#f0a52e 0%,#ec9000 100%)}
.painel .col.mgpar .b.neg{background:linear-gradient(180deg,#d2503f 0%,#c0392b 100%)}
.painel .mgleg{font-size:22px;vertical-align:-2px}
.painel .mgleg.ant{color:#3b6496}
.painel .mgleg.atu{color:#ec9000}

/* ---- ecra 12 (antes 11): adjudicacao contra o preciso ----
   Desde 2026-09-14 sao TRES barras (30 dias, mes, ano), cada uma contra o seu objectivo.
   O traco do objectivo e uma linha vertical na barra, nao o fim dela — assim ve-se
   tambem quando se PASSA. O cheio leva a cor do ritmo (verde/amarelo/vermelho, classes
   .v/.a/.r postas pelo kpiBarra); sem leitura fica vazio e sem cor. */
.painel .kpi-medidas{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly;
  min-height:0;margin:1.2vh 0;padding:0.6vh 0;border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha)}
.painel .kpi-medida{flex:0 0 auto}
.painel .kpi-cab{display:flex;justify-content:space-between;align-items:baseline;gap:2vw;margin-bottom:1.4vh}
/* o objectivo, no canto: o numero em branco, como os numeros grandes */
.painel .kpi-obj{flex:0 0 auto}
.painel .kpi-obj b{color:var(--texto);font-weight:600}
.painel .kpi-barra{position:relative;height:9vh;min-height:56px;background:var(--linha);
  border-radius:4px;overflow:visible}
.painel .kpi-cheio{height:100%;border-radius:4px;opacity:.85;transition:width .6s ease}
.painel .kpi-cheio.v{background:var(--sobe)}
.painel .kpi-cheio.a{background:var(--acento)}
.painel .kpi-cheio.r{background:var(--desce)}
/* O traco do objectivo e o "faltam": em branco, porque o cheio pode ser de qualquer das
   tres cores (o acento antigo desaparecia no amarelo). A sombra segura o texto sobre o cheio. */
.painel .kpi-meta{position:absolute;top:-6px;bottom:-6px;width:3px;background:var(--texto)}
.painel .kpi-meta span{position:absolute;left:12px;top:-2px;white-space:nowrap;
  font-size:26px;letter-spacing:0.14em;text-transform:uppercase;color:var(--texto);font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.75)}
/* Nota do rodape: ao contrario do .rot, esta QUEBRA a linha — e uma frase, nao um rotulo. */
.painel .kpi-nota{flex:0 0 auto;font-size:26px;line-height:1.5;color:var(--dim)}
.painel .kpi-nota b{color:var(--texto);font-weight:600}
/* Marca perto da direita: o rotulo passa para o lado de dentro, senao sai do ecra. */
.painel .kpi-meta.esq span{left:auto;right:12px}
/* Telemovel: o cabecalho da barra empilha, senao os dois rotulos disputam a largura e o
   numero que interessa ("faltam X") fica cortado pelo ellipsis do .rot. Mesmo corte a
   1400px que o resto do painel usa. */
@media (max-width:1400px){
  .painel .kpi-medida + .kpi-medida{margin-top:3vh}
  .painel .kpi-cab{flex-direction:column;align-items:flex-start;gap:0.4vh}
  .painel .kpi-obj{white-space:normal}
  .painel .kpi-barra{height:6vh}
  .painel .kpi-meta span{font-size:30px}
}
/* ---- ecra 3: meses e anos (entrou a 2026-09-11) ----
   NUMERACAO: os comentarios deste ficheiro escritos antes de 2026-09-11 usam a numeracao
   antiga. Antigo -> hoje: 1->1, 2->4, 3->5, 4->6, 5->7, 6 (Mes em curso)->2, 7->8, 8->9,
   9->10, 10->11, 11->12; o 3 de hoje e este. Tabela com os nomes no ajax-bearer.js.
   Duas tabelas empilhadas, cada uma com metade da altura que sobra. A coluna do periodo
   a decorrer vai a cor de acento, como as barras "agora" dos graficos. Na linha do
   periodo inteiro essa coluna nao tem numero (o periodo ainda nao acabou): leva uma
   frase curta, mais pequena, a dizer em que dia vai. */
.painel .periodos{flex:1 1 0;display:flex;flex-direction:column;min-height:0;
  border-top:1px solid var(--linha);padding:1.2vh 0 0.6vh}
.painel .periodos + .periodos{margin-top:0.6vh}
.painel .periodos .cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.8vh}
.painel .periodos .cab .rot{font-size:23px}
.painel .periodos .cab .rot b{font-weight:600}
/* colunas de numeros todas da mesma largura, para a vista correr a linha sem saltos */
.painel .periodos table{flex:1 1 auto;table-layout:fixed}
.painel .periodos th:first-child,.painel .periodos td:first-child{width:24%}
/* com as colunas iguais, o "SET A DECORRER" partia em duas linhas na TV (no telemovel
   volta a poder quebrar, mais abaixo) */
.painel .periodos th{letter-spacing:0.12em;white-space:nowrap}
.painel .periodos td .sub{font-size:0.55em;color:var(--dim);font-weight:400;margin-left:0.22em}
.painel .periodos th.agora,.painel .periodos td.agora{color:var(--acento)}
.painel .periodos td.falta{font-size:22px;font-weight:400;color:var(--dim);white-space:normal;
  letter-spacing:0.04em}
/* logo a seguir ao titulo, o risco do .topo ja separa: sem isto ficavam duas linhas */
.painel .topo + .periodos{border-top:0;padding-top:0}
/* Telemovel (desenha a 980): seis colunas com os 56px das outras tabelas saiam do ecra.
   Aqui os numeros encolhem, o rotulo da linha quebra, os dois rotulos do cabecalho
   empilham (lado a lado eram cortados com reticencias) e cada tabela fica com a altura
   que precisa em vez de encher meio ecra de 2100px. */
@media (max-width:1400px){
  .painel .periodos{flex:0 0 auto;padding-top:2.4vh}
  .painel .periodos .cab{flex-direction:column;align-items:flex-start;gap:0.4vh;margin-bottom:1.6vh}
  .painel .periodos .cab .rot{font-size:30px;white-space:normal}
  .painel .periodos th{font-size:22px;letter-spacing:0.1em;padding:0 0.6vw 1vh;white-space:normal}
  .painel .periodos td{font-size:36px;padding:2vh 0.6vw}
  .painel .periodos td:first-child{font-size:22px;letter-spacing:0.12em;white-space:normal}
  .painel .periodos td.falta{font-size:22px}
}

/* Nota de regua no rodape de um ecra (ex: «45% de Angola, sem Brasil»). Letra pequena
   mas legivel na TV; ao contrario do .rot, NAO corta com ellipsis. */
.painel .regua{flex:0 0 auto;font-size:20px;line-height:1.4;color:var(--dim);
  letter-spacing:0.04em;margin-top:0.6vh;opacity:.85}

/* ---- ecra «Venda e custo dos fechados» (2026-09-22): venda e custo lado a lado ----
   Por mes, um par de barras (venda / custo dos freelancers) e, por cima do par, a
   margem em percentagem. Debaixo do nome do mes vai a fatia dos euros ja fechada:
   os meses abaixo de 100% ficam assinalados (.parcial), porque a barra sai curta por
   ainda haver projectos abertos e nao por se ter vendido menos.
   Tamanhos em px, nunca em vw — o telemovel desenha a 980px de largura de layout. */
.painel .col.fechpar{padding:0 0.3vw}
/* A faixa da linha da margem (2026-09-22). Deixou de ser uma linha de texto de 26px:
   agora e uma faixa com altura propria onde o numero SOBE e DESCE conforme o valor, e
   uma linha liga os doze. A escala e colada aos dados e o intervalo vai escrito na
   ponta direita — ver escalaMargem() no ajax-bearer.js. */
.painel .col.fechpar .mgpct{position:relative;width:100%;height:112px;flex:0 0 auto;
  font-size:24px;font-weight:600;line-height:1;white-space:nowrap;margin-bottom:4px}
.painel .col.fechpar .mgpct.vazio{color:var(--dim)}
/* o numero assenta no seu ponto e cresce para cima, para a linha nao lhe passar por dentro */
.painel .col.fechpar .mgpct .n{position:absolute;left:0;right:0;text-align:center;
  padding-bottom:9px}
.painel .col.fechpar .mgpct .pt{position:absolute;left:50%;width:9px;height:9px;
  margin-left:-4.5px;margin-bottom:-4.5px;border-radius:50%;background:var(--texto)}
.painel .col.fechpar .mgpct .mgl{position:absolute;left:0;top:0;width:100%;height:100%;
  overflow:visible}
/* `preserveAspectRatio="none"` estica o viewBox quadrado ate a faixa, que nao e
   quadrada: sem o non-scaling-stroke a espessura e o tracejado saiam esticados */
.painel .col.fechpar .mgpct .mgl path{fill:none;stroke:var(--texto);stroke-width:2.5;
  stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.75}
/* meses que ainda nao fecharam por inteiro: o troco que chega a eles vai tracejado */
.painel .col.fechpar .mgpct .mgl path.trac{stroke-dasharray:7 6;opacity:.6}
/* o intervalo da escala, na ponta da linha; cresce para a esquerda para nao sair do ecra */
.painel .col.fechpar .mgpct .esc{position:absolute;right:0;font-size:19px;
  font-weight:400;color:var(--dim);letter-spacing:0.04em}
.painel .col.fechpar .mgpct .esc.cima{top:0}
.painel .col.fechpar .mgpct .esc.baixo{bottom:0}
.painel .col.fechpar .pares{flex:1 1 auto;min-height:0;width:100%;display:flex;
  align-items:flex-end;gap:4px}
.painel .col.fechpar .fb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;height:100%}
.painel .col.fechpar .fb .v{font-size:20px;font-weight:600;margin-bottom:4px;white-space:nowrap}
.painel .col.fechpar .fb .b{width:100%;border-radius:2px 2px 0 0}
.painel .col.fechpar .fb .b.venda{background:linear-gradient(180deg,#4d7ab4 0%,#3b6496 100%)}
.painel .col.fechpar .fb .b.custo{background:linear-gradient(180deg,#f0a52e 0%,#ec9000 100%)}
/* o mes ainda nao fechou todo: barras esbatidas e a fatia em cor de aviso */
.painel .col.fechpar.parcial .fb .b{opacity:.6}
.painel .meses div .fatia{display:block;font-size:18px;letter-spacing:0.04em;
  text-transform:none;padding-top:2px}
.painel .meses div .fatia.parcial{color:var(--acento);font-weight:600}

@media (max-width:1400px){
  .painel .col.fechpar{padding:0 0.6vw}
  .painel .col.fechpar .mgpct{font-size:30px;height:150px}
  .painel .col.fechpar .mgpct .n{padding-bottom:11px}
  .painel .col.fechpar .mgpct .esc{font-size:21px}
  .painel .col.fechpar .fb .v{font-size:24px}
  .painel .meses div .fatia{font-size:22px}

  /* ⚠️ No estreito o `.painel` passa a `height:auto` (a regra do topo desta media
     query) e a cadeia de `height:100%` quebra: as barras de TODOS os graficos ficam
     com altura ZERO — medido a 2026-09-22 nos ecras «Adjudicacao» e «Margem», que ja
     estavam assim antes deste ecra existir (`git show HEAD:site/css/painel.css` tem a
     mesma regra). Nao se corrige aqui, porque mexer nisso mexia nos outros ecras: este
     ecra leva altura PROPRIA em vh, e assim nao depende dessa cadeia. O defeito geral
     esta reportado. */
  .painel .col.fechpar{height:auto;justify-content:flex-end}
  .painel .col.fechpar .pares{height:50vh;flex:0 0 auto}
  /* sem isto o `.barras` continua a esticar por flex e deixa um vazio por cima das
     colunas, que agora sao mais baixas do que ele */
  .painel #fechChart{flex:0 0 auto}
}