:where(html){--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--ease-circ-in:cubic-bezier(.6,.04,.98,.335);--ease-circ-in-out:cubic-bezier(.785,.135,.15,.86);--ease-circ-out:cubic-bezier(.075,.82,.165,1);--ease-cubic-in:cubic-bezier(.55,.055,.675,.19);--ease-cubic-in-out:cubic-bezier(.645,.045,.355,1);--ease-cubic-out:cubic-bezier(.215,.61,.355,1);--ease-expo-in:cubic-bezier(.95,.05,.795,.035);--ease-expo-in-out:cubic-bezier(1,0,0,1);--ease-expo-out:cubic-bezier(.19,1,.22,1);--ease-quad-in:cubic-bezier(.55,.085,.68,.53);--ease-quad-in-out:cubic-bezier(.455,.03,.515,.955);--ease-quad-out:cubic-bezier(.25,.46,.45,.94);--ease-quart-in:cubic-bezier(.895,.03,.685,.22);--ease-quart-in-out:cubic-bezier(.77,0,.175,1);--ease-quart-out:cubic-bezier(.165,.84,.44,1);--ease-quint-in:cubic-bezier(.755,.05,.855,.06);--ease-quint-in-out:cubic-bezier(.86,0,.07,1);--ease-quint-out:cubic-bezier(.23,1,.32,1);--ease-sine-in:cubic-bezier(.47,0,.745,.715);--ease-sine-in-out:cubic-bezier(.445,.05,.55,.95);--ease-sine-out:cubic-bezier(.39,.575,.565,1)}
:where(html){--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translateX(100%)}}@keyframes slide-out-left{to{transform:translateX(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}}@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}
/* Paleta "ardosia e ambar" (escolhida a 31/08/2026, fase de desenho
   visual). Os nomes das variaveis sao os de sempre -- mudam os valores,
   e o CSS todo vem atras. Duas regras que nao se quebram:
   - todos os --t* passam AA (4.5:1) sobre --papel, que e o pior fundo.
     A escala antiga descia a #b4b0a6, que dava 2.5:1 em texto de 10px;
   - o que e decoracao (setas, separadores, molduras) usa --traco ou
     --linha, nunca um --t*. Foi a confusao entre os dois que fez
     nascer os cinzentos ilegiveis. */
:root{
 --ink:#14181e;   
  
    
      
 
 /* fundos das notas: cada um so acompanha a cor de texto do mesmo nome */
  
   
 /* na barra escura o contraste conta ao contrario: estes tres sao os
    unicos claros que la vivem */
  
  
 
  
 /* o "Gov" do logotipo: azul, a pedido dele (14/09/2026); sobre a barra
    escura o --azul nao se le, por isso ha um claro so para la */
 
 
 
}
*{box-sizing:border-box}
/* Foco de teclado visivel e igual em toda a aplicacao. O contorno de
   omissao do browser sao 0,8px quase pretos, que numa lista de vinte
   accoes nao se ve; e ha campos que o desligam para o trocar por uma
   pista propria (o nome da fase, o responsavel, o "quem trabalha"),
   o que deixava a aplicacao com tres ideias diferentes de foco.
   :focus-visible e nao :focus -- so aparece a quem navega por teclado,
   e nao a cada clique do rato. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;
 border-radius:4px}
.barra :focus-visible{outline-color:var(--seal)}
body{margin:0;background:var(--surface);font-family:var(--font-sans);color:var(--ink);
 -webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}
.app{display:flex;flex-direction:column;min-height:100vh}

/* A barra, em cima (13/09/2026, "Mudancas na plataforma RADAR"). Foi
   lateral de 140px ate aqui; o que la vivia alem da navegacao -- as
   fontes, as contagens, o endereco, a hora da ultima verificacao -- saiu
   do ecra: as contagens estao nos Indicadores e a ultima verificacao
   tambem. Fica a marca, os tres itens, Configuracoes e quem esta. E a
   mesma barra em todos os tamanhos: o que era o bloco do telemovel
   passou a ser a regra. */
.barra{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
 gap:6px 14px;padding:10px 20px;background:var(--ink);color:#fff;
 position:sticky;top:0;z-index:20;box-sizing:border-box}
.marca{flex:none}
/* O logotipo E o Hoje (16/09/2026, decisao dele). Leva a mesma pastilha
   dos itens da barra quando esta aceso: sem ela, o unico caminho de
   volta a abertura nao se distingue de uma marca decorativa, e quem la
   esta nao sabe que ja la esta. */
.marca .logo{display:block;padding:6px 8px;margin:-6px -8px;border-radius:5px;
 font:700 15px/1 var(--font-sans);letter-spacing:-.3px;color:#fff}
.marca .logo span{color:var(--on-header-muted)}
.marca .logo:hover,.marca .logo.on{background:rgba(255,255,255,.12)}
.barra nav{display:flex;flex-direction:row;flex-wrap:nowrap;gap:2px;margin:0 0 0 8px;
 overflow-x:auto;scrollbar-width:none;min-width:0}
.barra nav a{display:block;padding:7px 9px;border-radius:5px;white-space:nowrap;flex:none;
 color:var(--on-header-muted);font:500 12.5px/1.25 var(--font-sans)}
.barra nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.barra nav a.on{background:rgba(255,255,255,.12);color:#fff}
.barra nav a b{font:inherit;font-weight:600}
/* as duas vistas de um item aberto (Em curso, Mercado) */
.barra nav a.sub{padding:7px 9px}
.barra nav a.sub b{font-weight:400;font-size:12px}
.barra nav a.sub.on b{font-weight:600}
.caixa{display:flex;align-items:center;gap:10px;margin-left:auto}
.caixa a.conf{padding:7px 9px;border-radius:5px;font:500 12.5px/1.25 var(--font-sans);
 color:var(--on-header-muted)}
.caixa a.conf:hover{background:rgba(255,255,255,.12);color:#fff}
.caixa a.conf.on{background:rgba(255,255,255,.12);color:#fff}
/* Quem esta. Fechado por omissao; aberto, o menu cai por baixo da barra
   em vez de a esticar. */
.sou{flex:none;position:relative}
.sou > summary{display:flex;align-items:center;gap:7px;cursor:pointer;
 list-style:none;color:var(--on-header-muted);font:500 10.5px/1.3 var(--font-sans);
 padding:4px 0;min-height:24px;box-sizing:border-box}
.sou > summary::-webkit-details-marker{display:none}
.sou > summary:hover{color:#fff}
.sou .sou-menu{position:absolute;right:0;top:100%;margin-top:6px;background:var(--ink);
 border:1px solid rgba(255,255,255,.13);border-radius:7px;padding:8px 12px;
 display:flex;flex-direction:column;gap:4px;min-width:190px;z-index:30}
.sou form{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sou .av{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);
 flex:none;font:600 9px/22px var(--font-sans);color:#fff;text-align:center}
.sou input{flex:1;min-width:0;background:transparent;border:0;
 border-bottom:1px solid rgba(255,255,255,.13);color:#fff;
 font:500 11.5px/1.6 var(--font-sans);padding:2px 0}
.sou input::placeholder{color:var(--on-header-muted)}
.sou input:focus{border-bottom-color:var(--seal)}
.sou input:focus:not(:focus-visible){outline:none}
.sou button{background:none;border:0;color:var(--on-header-muted);cursor:pointer;
 font:400 10.5px/1.2 var(--font-sans);flex:none;
 padding:6px 5px;margin:-6px 0;min-height:24px;box-sizing:border-box}
.sou button:hover{color:#fff}
.sou .sou-menu a{color:var(--on-header-muted);font:400 10.5px/1.2 var(--font-sans);padding:6px 5px;
 margin:-6px 0;min-height:24px;box-sizing:border-box;display:inline-block}
.sou .sou-menu a:hover{color:#fff}
.sou .so-nome{display:flex;align-items:center;gap:7px;color:var(--on-header-muted);
 font:500 10.5px/1.3 var(--font-sans)}
/* O ecra de entrar: uma tarefa, sem barra lateral. */
/* Os dois ecras fora do molde (entrar, erro) mudaram-se para o sistema
   de desenho na fase 2 da migracao (21/09/2026): o cartao, os campos e
   o botao sao `.mg-*`, e o que os arruma esta em
   `estilo/miragov-radar.css`. As onze regras que aqui estavam sairam
   -- e tinham de sair, nao bastava deixa-las: `.entrar input` tem mais
   especificidade que `.mg-field__input`, e a borda do campo continuava
   a ser a antiga, fina e clara, por cima do campo novo. */

/* zona principal */
main{flex:1;min-width:0;display:flex;flex-direction:column}
/* O topo prende-se POR BAIXO da barra, e nao em cima dela: os dois em
   `top:0` faziam o topo ficar escondido atras da barra escura (z-index
   20 contra 5), e o que se perdia eram as migalhas e o "Verificar
   agora" -- e, na ficha, metade do titulo com a seta de voltar. O
   `--barra-h` e medido em JS porque a barra dobra em ecra estreito; o
   50px e o recurso para quando o script nao corre. */
.topo{padding:16px 34px 0;border-bottom:1px solid var(--line);background:var(--surface-raised);
 position:sticky;top:var(--barra-h,50px);z-index:5}
.migalhas{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.migalhas .b{display:flex;align-items:center;gap:8px;min-width:0;
 font:500 11.5px/1 var(--font-sans);color:var(--ink-secondary)}
/* o separador das migalhas e um caractere, nao um risco: leva cor de
   texto, ainda que a mais fraca da escala */
.migalhas .b s{text-decoration:none;color:var(--ink-muted)}
.migalhas .b em{font-style:normal;color:var(--ink)}
.accoes-topo{margin-left:auto;display:flex;align-items:center;gap:8px}
/* tudo o que altera dados e um <form method=post>; estas regras fazem
   com que continue a parecer um botao ou uma ligacao */
form.accao{display:inline-block;margin:0}
form.accao button{font-family:inherit}
.bt{cursor:pointer;padding:8px 13px;border-radius:7px;border:1px solid var(--line);
 background:#fff;font:600 12px/1 var(--font-sans);color:var(--ink-secondary);display:inline-block}
.bt:hover{border-color:var(--ink);color:var(--ink)}
.bt.forte{background:var(--brand);color:#fff;border-color:var(--brand)}
.bt.forte:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.bt.verde{background:var(--success);color:#fff;border-color:var(--success)}
.bt.verde:hover{background:#155f3c;color:#fff;border-color:#155f3c}
/* A escala tem degraus a serio. Estava tudo entre 10 e 13,5px e a
   hierarquia fazia-se so por peso e cor -- numa pagina densa lia-se
   tudo ao mesmo nivel. */
/* Fase 2 do docs/design.md (16/09/2026): o texto que explica a pagina
   sai do meio do que se usa. Eram 17 paginas a abrir com um paragrafo a
   dizer o que a pagina e -- util a quem chega uma vez, uma linha de
   ruido todos os dias a quem abre isto duas vezes por dia.
   O <h1> vai DENTRO do <summary>, que o HTML permite (o modelo de
   conteudo do summary aceita um elemento de cabecalho): assim o titulo e
   o "?" ficam na mesma linha, a linha toda alterna, e o texto aparece
   por baixo. Sem JS, nativo. Fechado por omissao e SEM memoria: um "?"
   que se lembra de estar aberto volta a por o paragrafo no ecra todos os
   dias, que e o que isto vem tirar. */
details.porque > summary{display:flex;align-items:baseline;gap:9px;
 cursor:pointer;list-style:none}
details.porque > summary::-webkit-details-marker{display:none}
/* O mesmo "?" dentro da ficha, ao lado do rotulo de um bloco. O
   rotulo e mais pequeno que o titulo da pagina, e por isso o circulo
   tambem: 16px em vez de 19. */
details.porque-bloco > summary{gap:7px}
details.porque-bloco > summary > i{width:16px;height:16px;
 font:600 10px/14px var(--font-sans)}
details.porque-bloco .rot{margin:0}
details.porque-bloco > .nota{margin:6px 0 12px}
details.porque > summary > i{flex:none;font-style:normal;align-self:center;
 width:19px;height:19px;border-radius:50%;border:1px solid var(--line-strong);
 color:var(--ink-muted);font:600 11px/17px var(--font-sans);text-align:center}
details.porque > summary:hover > i{border-color:var(--brand);color:var(--brand)}
details.porque[open] > summary > i{background:var(--brand);color:#fff;
 border-color:var(--brand)}
h1.tit{margin:8px 0 0;font:700 22px/1.25 var(--font-sans);color:var(--ink);
 letter-spacing:-.4px;max-width:900px;text-wrap:pretty}
p.subtit{margin:5px 0 0;font:400 12.5px/1.45 var(--font-sans);color:var(--ink-secondary);
 max-width:820px;text-wrap:pretty}
.abas{display:flex;align-items:center;gap:4px;margin-top:14px}
.abas a{padding:9px 14px;border-radius:7px 7px 0 0;font:600 12.5px/1 var(--font-sans);
 background:transparent;color:var(--ink-secondary);border:1px solid transparent;
 border-bottom:none;margin-bottom:-1px}
.abas a:hover{color:var(--ink)}
.abas a.on{background:#fff;color:var(--ink);border-color:var(--line);font-weight:700}
.abas a i{font:500 11px/1 var(--font-mono);font-style:normal;color:var(--ink-muted);margin-left:4px}
.abas a.on i{color:var(--ink-secondary)}
/* A escada (15/09/2026): dez ranhuras mais o "todos" nao cabem numa
   linha de tabuladores como as quatro abas de antes. Rolam na
   horizontal, e as tres naturezas distinguem-se -- as duas pontas (a
   entrada e o cemiterio) e o "todos" nao sao estados da empresa, e pinta-
   las como as oito dizia que ha dez estados quando ha dez coisas de
   tres naturezas. O separador vertical entre a entrada e as oito e
   onde a escada da empresa comeca. */
/* Onze abas -- dez ranhuras mais o "Todos" -- nao cabem numa linha num
   ecra normal, e rolar de lado com a barra de rolamento a vista era a
   coisa mais feia do ecra (palavra dele). Passam a QUEBRAR: a fila
   continua, mais abaixo, e nao ha nada a esconder-se. O tipo desce de
   12,5 para 11,5 px e o espaco aperta, que e o que faz caber uma linha
   so na maior parte dos ecras -- em 900 px vao a duas, e e essa a
   intencao.
   A nota da UX-Auditoria mantem-se: o alvo continua acima de 24 px de
   altura, que e o que a regra da empresa exige. */
.abas-escada{flex-wrap:wrap;row-gap:0}
.abas-escada a{white-space:nowrap;flex:0 0 auto}
/* As quatro fechadas (ganho, perdido, nao fomos, cancelado) sao o
   arquivo: ja nao pedem accao, e uma escada que as pinte com o mesmo
   peso das abertas poe o fim ao lado do que esta a acontecer. */
.abas-escada a.fechada{color:var(--ink-muted)}
.abas-escada a.fechada.on{color:var(--ink)}
.vazio-topo{height:16px}
/* A folga lateral e o tecto do conteudo acompanham o ecra. Com o
   .larg preso em 1240 sobravam 530px vazios num monitor de 1920 e
   1170 num de 2560 -- quase metade do ecra por usar. O tecto
   continua a existir: sem ele, uma linha de texto atravessava um
   ecra largo de ponta a ponta e deixava de se ler. */
.corpo{padding:24px clamp(20px,2.4vw,44px) 60px}
.larg{max-width:1560px}

/* pecas comuns */
.cx{background:#fff;border:1px solid var(--line);border-radius:8px;
 box-shadow:0 1px 2px rgba(20,24,30,.04)}
.rot{font:700 11px/1 var(--font-sans);color:var(--ink-secondary);text-transform:uppercase;
 letter-spacing:.07em}
.nota{font:400 11.5px/1.5 var(--font-sans);color:var(--ink-muted)}
.vazio{background:#fff;border:1px solid var(--line);border-radius:8px;
 padding:40px;text-align:center;color:var(--ink-muted);font:400 13px/1.55 var(--font-sans)}
.flash{background:var(--brand-soft);border:1px solid var(--brand-soft);border-radius:9px;
 padding:11px 15px;margin-bottom:14px;font:500 12.5px/1.4 var(--font-sans);
 color:var(--brand)}
.flash.mau{background:var(--danger-soft);border-color:#f0cfc7;color:var(--danger)}
.flash form.desfazer{margin-left:10px;vertical-align:middle}
.flash code{font:500 11.5px/1 var(--font-mono);background:rgba(0,0,0,.06);
 padding:2px 6px;border-radius:4px}
.tag{font:500 10.5px/1 var(--font-sans);padding:4px 7px;border-radius:4px;
 background:var(--surface-sunken);color:var(--ink-secondary);white-space:nowrap}
.tag.mono{font-family:var(--font-mono)}
.tag.ok{background:var(--success-soft);color:var(--success);font-weight:600}
.tag.avisa{background:var(--warning-soft);color:var(--warning);font-weight:600}
.tag.mau{background:var(--danger-soft);color:var(--danger);font-weight:600}
.tag.info{background:var(--brand-soft);color:var(--brand);font-weight:600}
.ponto{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
/* "Verificar agora" enquanto corre: o botao sai e fica o sinal de vida,
   para nao haver dois clientes a comecar duas recolhas. */
.accoes-topo .a-correr{font:500 12px/1 var(--font-sans);color:var(--warning);
 display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.accoes-topo .a-correr::before{content:'';width:8px;height:8px;flex:none;
 border-radius:50%;background:var(--warning);animation:pisca 1.1s infinite}

/* Filtros. A zona de controlo sao tres caixas irmas (campos, arvore de
   CPV, filtros guardados) e todas tinham o peso do conteudo: fundo
   branco, sombra e 14px de folga. Empilhadas antes do primeiro anuncio
   ocupavam meio ecra. Continuam as tres -- so as duas de baixo baixam
   de nivel, com o fundo do papel e sem sombra. */
.filtros{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
 padding:12px 14px;margin-bottom:8px}
.filtros input[type=text]{flex:1;min-width:220px;padding:9px 12px;
 border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);
 font:400 12.5px/1.2 var(--font-sans);color:var(--ink)}
/* A data e um campo de TEXTO com `dd/mm/aaaa` e nao um
   `<input type=date>` (16/09/2026): o nativo desenha-se no idioma do
   BROWSER e nao no da pagina, e num browser em ingles dizia
   `mm/dd/yyyy` numa aplicacao escrita em portugues. Nao ha atributo
   que o mude -- o `lang` da pagina e do proprio campo nao contam. O
   campo da data das tarefas na ficha ja era assim; os atalhos de
   periodo (12 meses, 3 anos, 2026...) continuam a ser o caminho
   rapido, e `data_de_filtro()` le as duas escritas. */
.filtros input.campo-data{padding:9px 12px;border:1px solid var(--line);
 border-radius:8px;background:var(--surface-raised);font:500 12.5px/1.2 var(--font-mono);
 color:var(--ink);width:110px;min-width:0;flex:none}
.filtros input.campo-data:invalid{border-color:var(--danger)}
.filtros select{padding:9px 12px;border:1px solid var(--line);border-radius:8px;
 background:var(--surface-raised);font:400 12.5px/1.2 var(--font-sans);color:var(--ink);
 /* o select cresce com a opcao mais longa ("Ao abrigo de acordo-quadro
    (art.o 259.o)") e punha a pagina a rolar de lado num ecra estreito */
 max-width:100%;min-width:0}
.filtros label{font:500 12px/1 var(--font-sans);color:var(--ink-secondary)}
/* a arvore por cima dos campos (14/09/2026): a caixa dos filtros
   encosta-se a ela */
.painel-filtros details.arvore{margin-bottom:10px}
/* Um campo desactivado tem de o parecer. No modo "por fim estimado" o
   de/ate desactiva-se com a explicacao no title (dois eixos do tempo na
   mesma pagina confundiam) -- mas desenhado igual aos outros, so quem
   tentasse escrever la e que descobria. */
.filtros input:disabled,.filtros select:disabled{background:var(--surface-sunken);
 color:var(--ink-muted);border-style:dashed;cursor:not-allowed}
.filtros:has(input:disabled) label{color:var(--ink-muted)}
.filtros button{cursor:pointer;padding:10px 18px;border-radius:8px;border:0;
 background:var(--brand);color:#fff;font:600 12.5px/1 var(--font-sans)}
.filtros button:hover{background:var(--ink)}
.filtros a.limpar{padding:10px 12px;font:500 12.5px/1 var(--font-sans);color:var(--ink-muted)}
.filtros a.limpar:hover{color:var(--ink)}
/* separador dos alertas */
.alertas{display:flex;flex-direction:column;gap:10px}
.alerta{display:flex;align-items:center;gap:14px;background:#fff;
 border:1px solid var(--line);border-radius:10px;padding:14px 16px;
 box-shadow:0 1px 2px rgba(0,0,0,.06)}
.alerta.on{border-color:var(--brand-soft);background:var(--surface-raised)}
.alerta .sobre{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.alerta .sobre a{font:600 13.5px/1.2 var(--font-sans);color:var(--ink)}
.alerta.on .sobre a{color:var(--brand)}
.alerta .sobre a:hover{text-decoration:underline}
.alerta .q{font:400 11.5px/1.4 var(--font-sans);color:var(--ink-muted);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alerta .conta{font:400 11.5px/1.4 var(--font-sans);color:var(--ink-muted);
 text-align:right;flex:none}
.alerta .conta b{color:var(--brand);font-weight:600}
.alerta .sobre b{font:600 13.5px/1.2 var(--font-sans);color:var(--ink)}
.alerta.on .sobre b{color:var(--brand)}
.alerta .onde{font:400 11px/1.3 var(--font-sans);color:var(--ink-muted)}
.alerta .onde a{color:var(--ink-muted)}
.alerta .onde a:hover{color:var(--brand);text-decoration:underline}
.alerta .avisa-mal{display:block;font:400 10.5px/1.4 var(--font-sans);
 color:var(--warning);margin-top:3px}
.alerta .apagar{cursor:pointer;border:0;background:none;color:var(--ink-muted);
 font:500 17px/1 var(--font-sans);padding:0 4px;
 min-width:24px;min-height:24px;box-sizing:border-box}
.alerta .apagar:hover{color:var(--danger)}
.alerta form{display:flex;flex:none}
.conf-email{padding:20px 22px}
.form-email{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.form-email label{display:flex;flex-direction:column;gap:5px;
 font:500 11px/1 var(--font-sans);color:var(--ink-muted);flex:1;min-width:150px}
.form-email input{padding:9px 12px;border:1px solid var(--line);
 border-radius:8px;background:var(--surface-raised);
 font:400 12.5px/1.2 var(--font-sans);color:var(--ink)}
.form-email button{flex:none}
.novo-filtro{padding:20px 22px}
.novo-filtro .filtros{padding:0;margin:0;box-shadow:none;border:0;
 background:none;gap:8px}
/* Treze campos em fila davam um muro onde nenhum se destacava. Os
   campos nao mudam nem mudam de ordem -- ganham um degrau de largura
   (o texto livre cresce, os selectores ficam do tamanho do que
   escolhem) e o botao corta a linha, para ser o fim de uma frase e nao
   mais uma caixa igual as outras. */
.novo-filtro .filtros input[type=text]{flex:1 1 200px;min-width:0}
.novo-filtro .filtros select{flex:0 1 auto}
.novo-filtro .filtros button{flex-basis:100%;max-width:150px;margin-top:4px}
.guardado.parcial{border-style:dashed}
.guardado i{font:400 9.5px/1 var(--font-sans);font-style:normal;color:var(--ink-muted);
 margin-left:6px;padding-right:11px}
.interruptor{cursor:pointer;width:42px;height:24px;border-radius:99px;
 border:1px solid var(--line);background:var(--surface-sunken);padding:0;
 position:relative;transition:background .12s}
.interruptor i{position:absolute;top:2px;left:2px;width:18px;height:18px;
 border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);
 transition:left .12s}
.interruptor.on{background:var(--brand);border-color:var(--brand)}
.interruptor.on i{left:21px}

/* barra do corpus, no topo dos contratos */
.corpus-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 margin-bottom:12px;font:400 11.5px/1.4 var(--font-sans);color:var(--ink-secondary)}
.corpus-barra .accao{margin-left:auto}
.corpus-barra .a-correr{margin-left:auto;font:500 12px/1 var(--font-sans);
 color:var(--brand);display:inline-flex;align-items:center;gap:8px}
.corpus-barra .a-correr::before{content:'';width:9px;height:9px;flex:none;
 border-radius:50%;background:var(--brand);animation:pisca 1.1s infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}

/* ficha da entidade */
.ent-cab{padding:20px 24px;margin-bottom:14px}
.ent-cab .n{font:600 22px/1.25 var(--font-sans);color:var(--ink);letter-spacing:-.3px}
.ent-cab .m{font:500 12px/1 var(--font-mono);color:var(--ink-muted);margin-top:7px}
/* Cliente ou concorrente. Duas cores e nao uma: o que se quer distinguir
   ao correr o olho e o LADO DA MESA, e um selo neutro para os dois
   obrigava a ler a palavra para saber qual e. O terceiro caso -- as que
   sao as duas coisas -- fica sem cor de propósito: nao ha lado. */
.ent-papel{display:inline-block;vertical-align:middle;margin-left:10px;
 padding:4px 9px;border-radius:999px;border:1px solid var(--line-strong);
 font:600 11px/1 var(--font-sans);letter-spacing:.2px;color:var(--ink-secondary);
 white-space:nowrap}
.ent-papel.cliente{color:var(--success);border-color:var(--success)}
.ent-papel.concorrente{color:var(--warning);border-color:var(--warning)}
/* O da LISTA é só a inicial: numa coluna de nomes o selo é um sinal e
   não uma etiqueta, e a palavra por extenso ao lado de cada nome
   dobrava a largura da coluna mais cheia da tabela. O `title` diz a
   palavra e o porquê. */
.ent-papel.curto{margin-left:5px;padding:1px 5px;text-align:center;
 font:600 9.5px/1.5 var(--font-sans);letter-spacing:.3px;vertical-align:1px;
 text-transform:uppercase}
.ent-nomes{margin-top:12px}
.ent-nomes summary{cursor:pointer;font:400 11.5px/1.4 var(--font-sans);color:var(--ink-muted)}
.ent-nomes summary:hover{color:var(--ink)}
.ent-nomes>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ent-nomes span{font:400 10.5px/1.3 var(--font-sans);color:var(--ink-muted);
 background:var(--surface-sunken);padding:4px 8px;border-radius:4px}
.kpis.dois{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi .r{font:600 11px/1 var(--font-sans);color:var(--ink-muted);text-transform:uppercase;
 letter-spacing:.07em}
.ent-atalhos{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.ent-atalhos a{padding:9px 14px;border:1px solid var(--line);border-radius:8px;
 background:#fff;font:500 12px/1 var(--font-sans);color:var(--ink-secondary);
 box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ent-atalhos a:hover{border-color:var(--ink);color:var(--ink)}
.ent-filtros{margin-bottom:14px}
.periodos{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
 flex-basis:100%;margin-top:2px}
.periodos span{font:400 11px/1 var(--font-sans);color:var(--ink-muted);margin-right:2px}
.periodos a{padding:6px 11px;border:1px solid var(--line);border-radius:99px;
 background:var(--surface-raised);font:500 11.5px/1 var(--font-sans);color:var(--ink-muted)}
.periodos a:hover{border-color:var(--ink-muted);color:var(--ink)}
.periodos a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.graf-corpo.solto{padding:0}
.bh .t a{color:var(--brand)}
.bh .t a:hover{color:var(--ink);text-decoration:underline}
.tab-contratos td a{color:var(--brand)}
.tab-contratos td a:hover{text-decoration:underline}

/* graficos dos contratos */
.graf-corpo{padding:16px 18px;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px}
.graf-corpo>.graf:last-child{grid-column:1/-1}
.graf{padding:16px 18px}
.barras-h{display:flex;flex-direction:column;gap:9px}
/* O nome levava 1.4fr contra 2fr da barra e saia "Capgemin…" em quase
   todas as linhas: numa lista de quem ganha, o nome e metade do que ha
   para ler. A barra e comparativa -- perde largura sem perder sentido. */
.bh{display:grid;grid-template-columns:minmax(0,2fr) minmax(50px,1.3fr) 76px 84px;
 align-items:center;gap:10px}
.bh .t{font:400 11.5px/1.3 var(--font-sans);color:var(--ink-secondary);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.bh .r{display:block;height:9px;border-radius:5px;background:var(--surface-sunken)}
.bh .r i{display:block;height:100%;border-radius:5px;background:var(--brand)}
.bh .v{font:600 11.5px/1 var(--font-mono);color:var(--ink);text-align:right}
.bh .k{font:400 10.5px/1 var(--font-sans);color:var(--ink-muted);text-align:right}
.graf .barras{height:150px}
.graf .barras .v{font:600 10.5px/1 var(--font-mono)}
.graf .barras .b{background:var(--brand)}
.graf .barras .col.parcial .b{background:repeating-linear-gradient(135deg,
 var(--brand) 0 4px,rgba(31,78,121,.35) 4px 8px)}
.graf .barras .col.parcial .v,.graf .barras .col.parcial .l{color:var(--ink-muted)}
.graf .barras .col.destaque .b{background:var(--success)}
.graf .barras .col.destaque .v{color:var(--success)}
.graf .barras .col.destaque .l{color:var(--success);font-weight:600}
.conc-n{font:700 34px/1 var(--font-mono);color:var(--ink);letter-spacing:-1.5px;
 margin-bottom:12px}
.conc-b{display:flex;height:22px;border-radius:5px;overflow:hidden;
 background:var(--surface-sunken)}
.conc-b i{display:block;height:100%}
@media (max-width:900px){.graf-corpo{grid-template-columns:minmax(0,1fr)}}

/* A lista das propostas (era a do "Em curso", que se fundiu na escada a
   15/09/2026). O `min-width` de 1400 px era para as treze colunas de
   entao; hoje sao nove, e um minimo dessa largura punha a rolar de lado
   uma tabela que cabe.
   E saiu o `.tab-lista td form{display:contents}`: existia para um
   `<form>` poder envolver celulas, que e coisa que o HTML nao deixa --
   e com os formularios por linha fora, o que ele fazia era derrotar o
   `display:flex` do selector de ranhura, que ficava espremido a mostrar
   "A pr" onde diz "A preparar proposta". Visto no ecra nessa noite. */
/* As larguras das duas colunas que quebram, postas a mao (16/09/2026).
   Com `max-width` sozinho, a repartição automática dá primeiro o que
   pedem as colunas que não quebram -- lote, preço, entrega, ranhura, e
   são quatro -- e o que sobra para o título é a largura MÍNIMA dele.
   Medido com três meses de uso: a coluna «Concurso» ficava a 110 px, os
   títulos partiam-se em cinco linhas e a linha da tabela tinha 90 px de
   altura. Vêem-se quatro propostas por ecrã numa lista feita para se
   correr o olho. Com um mínimo declarado são ~48 px e nove. */
.tab-lista{min-width:900px}
.tab-lista td.o{max-width:340px;min-width:180px}
.tab-lista td.g{max-width:200px;min-width:105px}
/* E o título corta-se a DUAS linhas, para a altura da linha ser a mesma
   em todas: com um título de 80 caracteres e outro de 20, uma lista de
   dez linhas tinha dez alturas diferentes e nenhuma coluna alinhada
   para baixo. O `title` da ligação leva o texto inteiro. */
.tab-lista td.o a,.tab-lista td.g span{display:-webkit-box;-webkit-line-clamp:2;
 -webkit-box-orient:vertical;overflow:hidden}
.tab-lista td.curta{width:96px}
.tab-lista td.d.esclarec{color:var(--ink-secondary)}

/* separador dos contratos */
.tab-cx{padding:0;overflow-x:auto}
.tab-contratos{width:100%;border-collapse:collapse;min-width:900px}
.tab-contratos th{text-align:left;padding:11px 12px;background:var(--surface-raised);
 border-bottom:1px solid var(--line);font:600 10.5px/1 var(--font-sans);
 color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.tab-contratos td{padding:10px 12px;border-bottom:1px solid var(--surface-sunken);
 font:400 12.5px/1.45 var(--font-sans);color:var(--ink-secondary);vertical-align:top}
.tab-contratos tr:last-child td{border-bottom:0}
.tab-contratos tr:hover td{background:var(--surface-raised)}
.tab-contratos td.d{font-family:var(--font-mono);white-space:nowrap;color:var(--ink-muted)}
/* O objecto e a coluna que responde a pergunta e era a mais apagada da
   tabela: os nomes de entidade, sendo ligacoes azuis, puxavam o olho
   primeiro. Invertido pelo peso, sem tirar o azul -- sao ligacoes e tem
   de o parecer. */
.tab-contratos td.o{color:var(--ink);font-weight:600;max-width:340px}
.tab-contratos td.g{color:var(--ink-secondary);max-width:220px}
.tab-contratos td a{font-weight:400}
.tab-contratos th.p,.tab-contratos td.p{text-align:right;white-space:nowrap;
 font-family:var(--font-mono);color:var(--ink)}
.vazio code,.larg>.nota code{font:500 11.5px/1 var(--font-mono);
 background:var(--surface-sunken);padding:2px 6px;border-radius:4px}
.vazio.comecar{display:flex;flex-direction:column;gap:10px;padding:48px 40px}
.vazio.comecar b{font:600 15px/1.3 var(--font-sans);color:var(--ink)}
.vazio.comecar span{max-width:620px;margin:0 auto}
.vazio.comecar .p{font-size:11.5px;color:var(--ink-muted)}

/* historico de adjudicacoes, na ficha */
.mercado{padding:16px 18px;margin-top:14px}
.tab-mercado{width:100%;border-collapse:collapse}
.tab-mercado th{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);
 font:600 10.5px/1 var(--font-sans);color:var(--ink-muted);text-transform:uppercase;
 letter-spacing:.06em;white-space:nowrap}
.tab-mercado td{padding:8px 10px;border-bottom:1px solid var(--surface-sunken);
 font:400 12px/1.35 var(--font-sans);color:var(--ink-secondary);vertical-align:top}
.tab-mercado td.d{font-family:var(--font-mono);white-space:nowrap;color:var(--ink-muted)}
.tab-mercado td.g{color:var(--ink);font-weight:500}
.tab-mercado th.p,.tab-mercado td.p{text-align:right;white-space:nowrap;
 font-family:var(--font-mono)}
.tab-mercado td.o{color:var(--ink);max-width:300px}
.tab-mercado tr:last-child td{border-bottom:0}
/* a coluna do objecto pode ser longa; a tabela rola dentro da caixa em
   vez de empurrar a ficha toda para o lado */
.ref-preco{border:1px solid var(--line);border-radius:9px;padding:14px 16px;
 margin-bottom:14px;background:var(--surface-raised);
 font:400 12.5px/1.5 var(--font-sans);color:var(--ink-secondary)}
.ref-preco b.bom{color:var(--success)}
.ref-preco b.mau{color:var(--danger)}
.escada{display:flex;gap:8px;margin:12px 0 4px}
.escada span{flex:1;display:flex;flex-direction:column;gap:4px;padding:8px 6px;
 border-radius:6px;background:#fff;border:1px solid var(--line);
 font:400 10px/1 var(--font-sans);color:var(--ink-muted);text-align:center}
.escada span b{font:600 12px/1 var(--font-mono);color:var(--ink)}
/* o rotulo desta esta sobre fundo azul-claro e nao sobre branco: com
   --t4 ficava a 4,3:1, por baixo do limite */
.escada span.med{border-color:var(--brand);background:var(--brand-soft)}
.escada span.med{color:var(--ink-secondary)}
.escada span.med b{color:var(--brand)}
.mercado-tab{overflow-x:auto}
.mercado-tab .tab-mercado{min-width:720px}
.mercado code{font:500 11.5px/1 var(--font-mono);background:var(--surface-sunken);
 padding:2px 5px;border-radius:4px}
/* O somario do desfecho: os numeros que fecham o funil (contratado,
   quem ganhou, quanto abaixo da base) lidos de relance, antes da
   tabela dos lotes. Envolve em vez de cortar -- ha adjudicatarios com
   nomes de setenta caracteres, e um agrupamento de tres nao cabe. */
.desfecho-som{display:flex;flex-wrap:wrap;gap:14px 30px;
 padding:12px 14px;background:var(--surface-raised);border:1px solid var(--surface-sunken);
 border-radius:6px}
.desfecho-som>div{display:flex;flex-direction:column;gap:4px;min-width:110px}
.desfecho-som b{font:600 15px/1.35 var(--font-sans);color:var(--ink)}
.desfecho-som b a{color:var(--brand)}
.desfecho-som span{font:400 11px/1 var(--font-sans);color:var(--ink-muted);
 text-transform:uppercase;letter-spacing:.06em}
.desfecho-som b span{text-transform:none;letter-spacing:0}
.guardados{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
 padding:10px 14px;margin-bottom:8px;background:var(--surface-raised);box-shadow:none}
.guardados .rot{margin-right:4px}
.guardados .nada{font:400 12px/1 var(--font-sans);color:var(--ink-muted)}
.guardado{display:inline-flex;align-items:center;border:1px solid var(--line);
 border-radius:99px;background:var(--surface-raised);overflow:hidden}
.guardado a{padding:7px 4px 7px 13px;font:500 12.5px/1 var(--font-sans);color:var(--ink-secondary)}
.guardado:hover{border-color:var(--ink-muted)}
.guardado:hover a{color:var(--ink)}
.guardado.on{border-color:var(--brand);background:var(--brand-soft)}
.guardado.on a{color:var(--brand);font-weight:600}
.guardado form{display:inline-flex}
.guardado button{cursor:pointer;border:0;background:none;color:var(--ink-muted);
 padding:7px 11px 7px 6px;font:500 14px/1 var(--font-sans)}
.guardado button:hover{color:var(--danger)}
.guardados .guardar{display:flex;align-items:center;gap:8px;margin-left:auto}
.guardados .guardar input{padding:8px 12px;min-width:200px;
 border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);
 font:400 12.5px/1.2 var(--font-sans);color:var(--ink)}
.guardados .guardar button{cursor:pointer;padding:9px 15px;border-radius:8px;
 border:1px solid var(--line);background:#fff;color:var(--ink-secondary);
 font:600 12.5px/1 var(--font-sans)}
.guardados .guardar button:hover{border-color:var(--ink);color:var(--ink)}
.cpv-activo{display:flex;align-items:center;gap:9px;padding:10px 14px;
 border:1px solid var(--brand-soft);background:var(--brand-soft);border-radius:9px;margin-bottom:12px;
 font:500 12px/1.3 var(--font-sans);color:var(--brand)}
.cpv-activo b{font:600 12px/1.3 var(--font-mono)}
.cpv-activo a{text-decoration:underline}

/* arvore de CPV */
details.arvore{margin-bottom:8px;overflow:hidden;background:var(--surface-raised);
 border:1px solid var(--line);border-radius:8px}
details.arvore[open]{background:#fff}
details.arvore>summary{cursor:pointer;display:flex;align-items:center;gap:10px;
 padding:11px 16px;background:var(--surface-raised);list-style:none}
details.arvore>summary::-webkit-details-marker{display:none}
details.arvore>summary::before{content:'\25B8';font:500 11px/1 var(--font-mono);color:var(--ink-secondary)}
details.arvore[open]>summary::before{content:'\25BE'}
.arv-tit{font:600 13px/1 var(--font-sans);color:var(--ink)}
.arv-sub{font:400 12px/1 var(--font-sans);color:var(--ink-muted)}
/* --t5 sobre --linha2 dava 4,35:1 -- a unica falha de AA que sobrou da
   passagem toda, e por pouco. Sobre um fundo que nao e branco a escala
   perde meio ponto de contraste: e por isso que os --t* se medem sobre
   o --papel e nao sobre o branco. */
.arv-chip{margin-left:auto;font:600 11px/1 var(--font-sans);padding:4px 8px;
 border-radius:5px;background:var(--surface-sunken);color:var(--ink-secondary)}
.arvore-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
 padding:14px 18px 12px;border-top:1px solid var(--line)}
.arvore-topo input{flex:1;min-width:220px;padding:8px 12px;border:1px solid var(--line);
 border-radius:8px;background:var(--surface-raised);font:400 12.5px/1.2 var(--font-sans)}
.arvore-topo button{cursor:pointer;padding:9px 14px;border-radius:7px;border:0;
 background:var(--brand);color:#fff;font:600 12px/1 var(--font-sans)}
.arvore-topo button.claro{background:#fff;color:var(--ink-secondary);border:1px solid var(--line)}
#arvore-contagem{font:400 11.5px/1 var(--font-sans);color:var(--ink-muted)}
#arvore-corpo{max-height:330px;overflow-y:auto;border:1px solid var(--surface-sunken);
 border-radius:9px;padding:8px 6px;background:var(--surface-raised);margin:0 18px 14px}
#arvore-corpo .no-envolve .no-envolve{margin-left:22px}
#arvore-corpo .no-envolve:not(.aberto)>.no-envolve{display:none}
/* o botao que abre o ramo leva o texto do no, e a seta que o <summary>
   desenhava (a arvore deixou de ser <details> a 25/09/2026) */
#arvore-corpo .abre{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto;
 padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
#arvore-corpo .abre::before{content:'▸';font-size:10px;color:var(--ink-muted);flex:none;
 width:10px}
#arvore-corpo .aberto>.no>.abre::before{content:'▾'}
#arvore-corpo .no{display:flex;align-items:center;gap:9px;padding:5px 8px;
 border-radius:6px}
#arvore-corpo .no:hover{background:var(--surface-sunken)}
/* codigo tirado a mao de dentro de um grupo marcado: fica riscado, para
   se ver de relance o que e que a divisao apanha e o que nao */
#arvore-corpo .no.excluido .lbl{text-decoration:line-through}
#arvore-corpo .no.excluido .cod{text-decoration:line-through}
#arvore-corpo .no.excluido{background:var(--surface-sunken)}
#arvore-corpo .no .fora{font:600 9.5px/1 var(--font-sans);color:var(--danger);
 letter-spacing:.04em;text-transform:uppercase;flex:none}
#arvore-corpo .cod{font:500 10.5px/1 var(--font-mono);color:var(--ink-muted);flex:none}
#arvore-corpo .lbl{font:500 12px/1.35 var(--font-sans);color:var(--brand);min-width:0;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arvore-corpo .n{font:400 10.5px/1 var(--font-sans);color:var(--ink-muted);flex:none}
/* codigo sem nada nesta fonte de contagem: escolhe-lo da lista vazia
   garantida, por isso esbatido -- mas nao escondido, que a mesma arvore
   conta doutras coisas no outro separador. Pela cor e nao pelo opacity,
   que baixava o texto abaixo dos 4,5:1 (25/09/2026) */
#arvore-corpo .no.zero .lbl,#arvore-corpo .no.zero .cod{color:var(--ink-muted)}
#arvore-corpo .escondido{display:none}
.arv-pe{padding:0 18px 16px;font:400 11px/1.5 var(--font-sans);color:var(--ink-muted)}

/* lista */
.linha-conta{display:flex;align-items:center;gap:10px;margin:12px 0;
 font:400 12px/1.5 var(--font-sans);color:var(--ink-muted)}
.linha-conta a{margin-left:auto;color:var(--ink-muted)}
.linha-conta a:hover{color:var(--ink)}
.linha-conta .teclas{font:500 11px/1 var(--font-mono);color:var(--ink-muted);
 border:1px solid var(--line);border-radius:4px;padding:3px 6px;cursor:help}
/* O anuncio focado pelo teclado (j/k). So o teclado o poe: o rato
   continua a ler sem contornos. */
.item.foco{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
/* Os tres blocos de filtro dentro de um <details>, recolhidos por
   omissao. A summary tem o resumo do filtro em uso; o resto vive
   igual la dentro. */
details.painel-filtros{margin-bottom:10px}
details.painel-filtros>summary{cursor:pointer;display:flex;align-items:center;gap:10px;
 list-style:none;padding:9px 12px;background:var(--surface-raised);border:1px solid var(--line);
 border-radius:8px;min-height:24px}
details.painel-filtros[open]>summary{margin-bottom:8px}
details.painel-filtros>summary::-webkit-details-marker{display:none}
details.painel-filtros>summary::before{content:'\25B8';font:500 11px/1 var(--font-mono);color:var(--ink-secondary)}
details.painel-filtros[open]>summary::before{content:'\25BE'}
details.painel-filtros .pf-tit{font:700 11px/1 var(--font-sans);color:var(--ink-secondary);
 text-transform:uppercase;letter-spacing:.07em}
details.painel-filtros .pf-sub{font:400 12px/1.4 var(--font-sans);color:var(--ink-muted)}
.paginas{display:flex;align-items:center;justify-content:center;gap:5px;
 flex-wrap:wrap;margin-top:16px}
.paginas a,.paginas b,.paginas span{min-width:32px;padding:7px 10px;
 border-radius:6px;text-align:center;font:500 12.5px/1 var(--font-sans)}
.paginas a{background:#fff;border:1px solid var(--line);color:var(--ink-muted);
 box-shadow:0 1px 2px rgba(0,0,0,.06)}
.paginas a:hover{border-color:var(--ink-muted);color:var(--ink)}
.paginas b.on{background:var(--ink);border:1px solid var(--ink);color:#fff;
 font-weight:600}
.paginas .morto{border:1px solid transparent;color:var(--ink-muted)}
.paginas .corte{border:1px solid transparent;color:var(--ink-muted);min-width:0;
 padding:7px 2px}
/* Saltar para uma pagina. Com 3300 paginas, andar de dez em dez nao la
   chega, e a unica forma de ver o meio do acervo era por filtro. */
.ir-pagina{display:flex;align-items:center;gap:6px;margin-left:10px}
.ir-pagina label{font:400 12px/1 var(--font-sans);color:var(--ink-secondary);padding:0}
.ir-pagina input{width:72px;padding:6px 8px;border:1px solid var(--line);
 border-radius:6px;font:500 12.5px/1 var(--font-sans);background:#fff;color:var(--ink)}
.ir-pagina button{padding:7px 11px;border:1px solid var(--line);border-radius:6px;
 background:#fff;color:var(--ink-muted);font:500 12.5px/1 var(--font-sans);cursor:pointer}
.ir-pagina button:hover{border-color:var(--ink-muted);color:var(--ink)}
.lista{display:flex;flex-direction:column;gap:9px}
.item{display:grid;grid-template-columns:minmax(0,1fr) 200px;background:#fff;
 border:1px solid var(--line);border-radius:7px;box-shadow:0 1px 2px rgba(20,24,30,.04);
 overflow:hidden}
.item:hover{border-color:var(--line-strong)}
.item-corpo{padding:14px 17px;min-width:0}
.item-titulo{font:700 15px/1.35 var(--font-sans);color:var(--brand);display:block;
 letter-spacing:-.1px;text-wrap:pretty}
.item-titulo:hover{color:var(--ink)}
.item-entidade{font:400 12.5px/1.4 var(--font-sans);color:var(--ink-secondary);margin-top:5px}
.item-entidade .quando{color:var(--ink-muted)}
.item-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.item-lado{padding:14px 17px;border-left:1px solid var(--surface-sunken);display:flex;
 flex-direction:column;align-items:flex-end;justify-content:center;gap:8px}
/* O prazo e o que decide, e le-se antes do preco. As tres cores sao as
   mesmas das etiquetas de estado (etiqueta_prazo devolve a classe): o
   que muda e o peso -- aqui e um numero, nao um distintivo. */
.item-prazo{font:700 13.5px/1 var(--font-mono);color:var(--ink-secondary)}
.item-prazo.mau{color:var(--danger)}
.item-prazo.avisa{color:var(--warning)}
.item-prazo.ok{color:var(--success)}
.item-preco{font:600 13px/1.2 var(--font-mono);color:var(--ink)}
.item-accoes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* o motivo do abandono pergunta-se numa caixa por cima (decisao do
   Afonso a 01/09/2026): um selector ao lado do botao punha uma pergunta
   permanente em cada uma das vinte linhas da lista, e a lista e para
   ler anuncios. Desde a migracao e o `.mg-dialog` do sistema (tamanho,
   canto, sombra); aqui fica o que o `<dialog>` do browser traz e o
   sistema nao desfaz -- o rebordo preto e o fundo -- e o recheio. Estas
   regras eram de `dialog.modal`, e ficaram mortas quando a classe mudou
   (visto na varredura de 25/09/2026). */
dialog.mg-dialog{border:0;color:var(--ink)}
dialog.mg-dialog::backdrop{background:rgba(22,27,38,.45)}
dialog.mg-dialog form{margin:0}
dialog.mg-dialog .alvo{font:400 12.5px/1.45 var(--font-sans);color:var(--ink-secondary);
 margin:0 0 12px;text-wrap:pretty}
dialog.mg-dialog .nota{font:400 11.5px/1.5 var(--font-sans);color:var(--ink-muted);
 margin:0 0 14px}
/* O `display` de uma regra ganha ao atributo `hidden`, que vem da
   folha do browser. Desde 15/09/2026 a caixa tem DOIS grupos de
   motivos -- um por estado -- e esconde um deles pelo `hidden`:
   sem esta linha, o dialogo do "Perdido" mostrava tambem os
   quatro motivos do "Nao fomos", oito opcoes para escolher uma.
   Visto no ecra. */
dialog.mg-dialog .escolhas[hidden]{display:none}
dialog.mg-dialog .escolhas{display:flex;flex-direction:column;gap:2px;
 margin-bottom:18px}
dialog.mg-dialog .escolhas label{display:flex;align-items:center;gap:9px;
 padding:9px 10px;border-radius:7px;border:1px solid var(--line);
 font:500 12.5px/1.3 var(--font-sans);color:var(--ink-secondary);cursor:pointer}
dialog.mg-dialog .escolhas label:hover{border-color:var(--ink-muted);background:var(--surface-raised)}
dialog.mg-dialog .escolhas input{margin:0;flex:none}
.mini{cursor:pointer;padding:7px 12px;border-radius:6px;font:600 11.5px/1 var(--font-sans);
 border:1px solid var(--line);color:var(--ink-secondary);background:#fff;display:inline-block}
.mini:hover{border-color:var(--danger);color:var(--danger)}
/* "interessa" em contorno e nao em bloco cheio: numa lista de vinte,
   vinte blocos verdes puxavam o olho todo para a coluna das accoes e
   os titulos -- o que se le para decidir -- ficavam em segundo plano. */
.mini.verde{background:#fff;color:var(--success);border-color:var(--success)}
.mini.verde:hover{background:var(--success);color:#fff;border-color:var(--success)}
.rodape{margin-top:18px;padding:12px 16px;border:1px solid var(--line);
 border-radius:8px;background:var(--surface-raised);display:flex;align-items:center;gap:10px}
.rodape .e{font:500 12px/1 var(--font-sans);color:var(--ink-secondary)}
.rodape .d{font:400 12px/1 var(--font-sans);color:var(--ink-muted)}

.chip-prazo{flex:none;font:700 12px/1 var(--font-mono);padding:6px 9px;border-radius:5px;
 background:var(--surface-sunken);color:var(--ink-secondary);white-space:nowrap}
.chip-prazo.mau{background:var(--danger-soft);color:var(--danger)}
.chip-prazo.avisa{background:var(--warning-soft);color:var(--warning)}
.chip-prazo.ok{background:var(--success-soft);color:var(--success)}
/* accoes de segunda linha: sao ligacoes, nao botoes -- competiam com o
   "Interessa" quando eram seis caixas iguais lado a lado */
.bt-leve{cursor:pointer;background:none;border:0;
 font:500 11.5px/1 var(--font-sans);color:var(--ink-secondary);display:inline-block;
 padding:6px 5px;margin:-6px 0;min-height:24px;box-sizing:border-box}
.bt-leve:hover{color:var(--brand);text-decoration:underline}
/* um titulo vazio nao ocupa espaco: a ficha nao usa o cabecalho grande */
h1.tit:empty,p.subtit:empty{display:none}
.facto{background:var(--surface-raised);padding:12px 15px;flex:1 1 180px;min-width:0}
.facto .k{font:600 9.5px/1 var(--font-sans);color:var(--ink-muted);text-transform:uppercase;
 letter-spacing:.08em}
.facto .v{font:600 13px/1.4 var(--font-sans);color:var(--ink);margin-top:6px}
.facto.larg{flex-basis:100%}
.facto .v.ok{color:var(--success)}
.facto .v.mau{color:var(--danger)}
details.sec{overflow:hidden;background:#fff;border:1px solid var(--line);
 border-radius:11px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
details.sec>summary{cursor:pointer;display:flex;align-items:center;gap:10px;
 padding:15px 22px;list-style:none}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::before{content:'\25B8';font:500 11px/1 var(--font-mono);color:var(--ink-muted)}
details.sec[open]>summary::before{content:'\25BE'}
details.sec .st{font:600 11.5px/1 var(--font-sans);color:var(--ink);
 text-transform:uppercase;letter-spacing:.07em}
details.sec .sh{margin-left:auto;font:400 11.5px/1 var(--font-sans);color:var(--ink-muted);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
details.sec dl{margin:0;padding:2px 22px 20px}
details.sec dt{font:400 12.5px/1.45 var(--font-sans);color:var(--ink-muted)}
details.sec dd{margin:0;font:500 12.5px/1.5 var(--font-sans);color:var(--ink);
 white-space:pre-line;text-wrap:pretty;word-break:break-word}
/* As tres formas dos campos longos lidos das pecas (desenha_valor).
   O texto e o mesmo -- o que muda e ter degraus: um perfil le-se como
   um cartao, uma enumeracao le-se como lista. Em bloco corrido, os 20
   perfis deste anuncio eram 3 200 caracteres com o peso do essencial. */
/* A linha de um campo de perfis abre-se a toda a largura: o rotulo
   sobe para cima e os cartoes ficam com a pagina inteira. Espremidos
   na coluna do valor davam duas colunas de 240px, e "Certificação
   Gestão de Projeto" partia em tres linhas. */
.perfis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
 gap:10px;margin-top:2px}
.perfil{border:1px solid var(--line);border-radius:7px;padding:11px 13px;
 background:var(--surface-raised)}
.perfil>b{display:block;font:700 12.5px/1.35 var(--font-sans);color:var(--ink);
 margin-bottom:7px}
.perfil dl{display:grid;grid-template-columns:minmax(0,104px) minmax(0,1fr);
 gap:3px 9px;margin:0}
.perfil dt{font:400 11px/1.45 var(--font-sans);color:var(--ink-muted)}
.perfil dd{margin:0;font:500 11px/1.45 var(--font-sans);color:var(--ink-secondary);min-width:0}
.pontos{margin:2px 0 0;padding:0 0 0 16px;display:flex;flex-direction:column;
 gap:6px}
.pontos li{font:400 12.5px/1.55 var(--font-sans);color:var(--ink-secondary);
 text-wrap:pretty;padding-left:2px;max-width:88ch}
.pontos li::marker{color:var(--line-strong)}
.numerados{margin:2px 0 0;padding:0 0 0 20px;display:flex;
 flex-direction:column;gap:8px}
.numerados li{font:400 12.5px/1.55 var(--font-sans);color:var(--ink-secondary)}
.numerados li::marker{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted)}
.numerados li b{display:block;font-weight:600;color:var(--ink)}
.numerados li span{display:block;text-wrap:pretty;max-width:88ch}
/* Configuracoes: o indice a esquerda, preso ao rolar como o da ficha,
   e a seccao a direita. Cada seccao e uma caixa com um formulario. */
.conf{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
.conf-indice{position:sticky;top:calc(var(--barra-h,56px) + 16px)}
.conf-cx{padding:18px 22px 22px}
.conf-form{display:flex;flex-direction:column;gap:12px;max-width:560px}
.conf-campo{display:flex;flex-direction:column;gap:4px;font:500 11.5px/1.4 var(--font-sans);color:var(--ink-secondary)}
.conf-campo input[type=text],.conf-campo input[type=password],.conf-campo input[type=email],
.conf-campo select,.conf-form textarea{padding:9px 12px;border:1px solid var(--line);
 border-radius:7px;font:400 13px/1.3 var(--font-sans);color:var(--ink);background:#fff}
.conf-campo input:disabled{background:var(--surface-sunken);color:var(--ink-muted)}
.conf-campo small{font:400 11px/1.4 var(--font-sans);color:var(--ink-muted)}
.conf-check{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}
.conf-check input{width:16px;height:16px;margin:0}
.conf-check small{flex-basis:100%}
.conf-form button{align-self:flex-start;margin-top:4px}
.conf-form textarea{font-family:var(--font-mono);font-size:11.5px;width:100%;max-width:560px}
.conf-forn{margin-top:18px;padding-top:16px;border-top:1px solid var(--surface-sunken)}
.conf-campo input[type=file]{font:400 12.5px/1.3 var(--font-sans);color:var(--ink-secondary)}
.tab-ensaio tr.erro td{background:var(--danger-soft)}
.tab-ensaio td .mau{color:var(--danger);font-weight:500}
.tab-ensaio td .aviso{color:var(--warning)}
.tab-ensaio td .ok{color:var(--success);font-weight:600}
.tab-ensaio td.n{font:500 12px/1.4 var(--font-mono);white-space:nowrap}
.conf-forn .saude{margin:6px 0 10px}
@media (max-width:1100px){.conf{grid-template-columns:minmax(0,1fr)}.conf-indice{position:static}}
.em-falta{font-weight:400;color:var(--ink-muted);font-style:italic}
.a-trazer{color:var(--brand)}
.a-trazer::before{content:'';display:inline-block;width:7px;height:7px;
 border-radius:50%;background:var(--brand);margin-right:7px;
 animation:pulsa 1s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
/* A caixa preta do prazo era o melhor elemento da aplicacao e nao
   sobreviveu a composicao em dossier -- vivia na coluna da direita. O
   prazo passou a facto do cabecalho, e a barra do decorrido veio com
   ele: e a mesma conta, noutro fundo. */
.facto .conta{display:inline-block;margin-left:8px;font:600 11.5px/1 var(--font-sans);
 color:var(--ink-secondary)}
.facto .conta.mau{color:var(--danger)}
.facto .conta.avisa{color:var(--warning)}
.facto .conta.ok{color:var(--success)}
.lado-cx{padding:18px 22px}
.lado-cx .cab{display:flex;align-items:center;gap:8px;margin-bottom:6px}

/* O leitor da peca, dentro da ficha e por baixo da lista das pecas
   (pedido do Afonso a 31/08/2026). A pagina propria /peca continua a
   existir e usa o mesmo codigo -- ver visualizador_de_peca(). */
.leitor{margin-top:16px;border:1px solid var(--line);border-radius:8px;
 overflow:hidden;background:var(--surface-raised)}
.leitor-cab{display:flex;align-items:center;gap:12px;padding:11px 15px;
 border-bottom:1px solid var(--line);background:#fff}
.leitor-cab .n{flex:1;min-width:0;font:600 12.5px/1.3 var(--font-sans);color:var(--ink);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leitor>.nota{padding:10px 15px 0}
.leitor .filtros{margin:10px 15px;box-shadow:none}
/* Os resultados da procura sao uma frase com ligacoes no fim, nao um
   chip: reaproveitavam o .cpv-activo, que e flex, e cada <b> e cada
   "pag. N" virava uma coluna -- a frase lia-se em bocados. */
.achados{padding:10px 14px;border:1px solid var(--brand-soft);
 background:var(--brand-soft);border-radius:8px;margin-bottom:12px;
 font:400 12.5px/1.9 var(--font-sans);color:var(--brand)}
.achados b{font-weight:700}
.achados a{text-decoration:underline;text-underline-offset:2px;
 white-space:nowrap;margin-right:4px}
.leitor .achados{margin:0 15px 12px}
.leitor>details.sec{margin:0 15px 15px}
.peca-folhas{padding:0 0 8px}
/* Dentro da ficha as folhas rolam na sua propria janela: 68 paginas a
   correr no meio do dossier empurravam o mercado e o historico para
   longe de mais. Na pagina propria da peca o documento e a pagina, e ai
   nao ha rolo dentro de rolo. */
.leitor .peca-folhas{padding:0 15px 15px;max-height:78vh;overflow-y:auto;
 background:var(--surface-sunken)}
.peca-pag{display:block;width:100%;max-width:960px;margin:14px auto 0;
 border:1px solid var(--line);border-radius:5px;background:#fff;
 box-shadow:0 1px 3px rgba(20,24,30,.08)}
.hist{display:flex;gap:10px;align-items:baseline;padding:9px 0;
 border-top:1px solid var(--surface)}
.hist .t{font:400 12px/1.4 var(--font-sans);color:var(--ink-secondary);min-width:0}
.hist .t b{font-weight:600;color:var(--ink)}
.hist .q{margin-left:auto;flex:none;font:400 10.5px/1 var(--font-mono);color:var(--ink-muted)}

/* As etiquetas: viviam no cartão do quadro e, com ele fora, vivem no
   bloco «A nossa proposta» da ficha. */
.etq{display:flex;align-items:center;gap:5px;padding:3px 7px;border-radius:4px;
 color:#fff;font:600 10.5px/1.3 var(--font-sans)}
.etq form.accao{display:inline-flex}
button.etq-x{background:none;border:0;color:#fff;opacity:.6;cursor:pointer;
 font-size:12px;line-height:1;padding:6px;margin:-6px -4px -6px 0;
 min-width:24px;min-height:24px;box-sizing:border-box}
button.etq-x:hover{opacity:1}
button.tirar{background:none;border:0;cursor:pointer;
 font:400 11px/1 var(--font-sans);color:var(--ink-muted);
 padding:7px 4px;margin:-7px 0;min-height:24px;box-sizing:border-box}
button.tirar:hover{color:var(--danger)}
.etq-form input{padding:3px 7px;border-radius:4px;border:1px dashed var(--line-strong);
 background:transparent;font:500 10.5px/1.3 var(--font-sans);color:var(--ink-muted);width:78px}
.etq-form input:focus{border-style:solid;border-color:var(--brand)}
.etq-form input:focus:not(:focus-visible){outline:none}
.prop-etq{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-strong)}
.prop-etq .rot{margin-bottom:8px}
.prop-etq .etq{display:inline-flex;margin:0 5px 5px 0}
/* a tabela dos lotes, na ficha */
.tab-lotes td.n{font:600 12px/1.4 var(--font-mono);white-space:nowrap}
.tab-lotes td.s{white-space:nowrap}
.tab-lotes .lote-prop{font:400 11.5px/1.4 var(--font-sans);color:var(--ink-muted)}

/* o selector de ranhura, na linha da lista e na ficha (15/09/2026).
   Com o quadro fora, é este o controlo que move um concurso na escada:
   oito destinos não cabem em botões, e dois botões de avançar/recuar
   davam vários gestos a qualquer salto -- e saltar é o caso. */
/* Na mesma linha dos botoes e nao por baixo deles: a linha da lista
   ficava com duas alturas, e vinte linhas assim sao um ecra a mais. */
.item-accoes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
 justify-content:flex-end}
.ranhura{display:flex;align-items:center;gap:4px}
/* A coluna da ranhura tem de caber a palavra mais comprida ("A
   preparar proposta"): numa `td.curta` o select encolhia e mostrava "A
   prep", que nao diz o estado nenhum. Visto no ecra a 15/09/2026. */
td.celula-ranhura{white-space:nowrap;width:1%}
.ranhura select{font:400 11.5px/1.2 var(--font-sans);padding:5px 7px;
 border:1px solid var(--line);border-radius:5px;background:#fff;
 color:var(--ink-secondary);min-height:24px;box-sizing:border-box}
.ranhura select:hover{border-color:var(--brand)}
/* o botão «ir» é para quem não tem JS: com JS o select grava sozinho ao
   mudar, e um botão a mais em cada uma de vinte linhas é ruído. O
   esconder é feito PELO JS (classe no <html>), e não ao contrário: sem
   JS a folha sozinha tem de o deixar visível. */
.com-js .ranhura button{display:none}

/* o bloco «A nossa proposta» na ficha: a empresa do que o cartão fazia */
.prop{border:1px solid var(--line);border-radius:6px;padding:14px;
 margin-bottom:12px;background:var(--surface-sunken)}
.prop:last-child{margin-bottom:0}
.prop-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
 margin-bottom:12px}
.prop-nome{font:700 13px/1.3 var(--font-sans);color:var(--ink);flex:1}
.prop-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 gap:10px;align-items:end}
.prop-campos label{display:flex;flex-direction:column;gap:4px;
 font:600 9.5px/1 var(--font-sans);color:var(--ink-muted);letter-spacing:.04em;
 text-transform:uppercase}
.prop-campos label.largo{grid-column:1/-1}
.prop-campos input,.prop-campos select{font:400 12px/1.3 var(--font-sans);
 padding:6px 8px;border:1px solid var(--line);border-radius:5px;
 background:#fff;color:var(--ink-secondary);text-transform:none;letter-spacing:0}
.prop-campos button{cursor:pointer;font:600 11px/1 var(--font-sans);padding:7px 12px;
 border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink-secondary);
 min-height:24px;box-sizing:border-box}
.prop-campos button:hover{border-color:var(--brand);color:var(--brand)}
.prop-accoes{display:flex;gap:6px;flex-wrap:wrap}
/* o que falta fazer, por proposta */
.prop-tarefas{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-strong)}
.prop-tarefas .rot{margin-bottom:8px}
ul.tarefas{list-style:none;margin:0 0 10px;padding:0;display:flex;
 flex-direction:column;gap:6px}
ul.tarefas li{display:flex;align-items:center;gap:7px;
 font:400 12px/1.4 var(--font-sans);color:var(--ink-secondary)}
ul.tarefas li .t{flex:1}
button.tq{cursor:pointer;width:24px;min-height:24px;padding:0;flex:none;
 border:1px solid var(--line);border-radius:4px;background:#fff;
 color:var(--ink-muted);font:600 11px/1 var(--font-sans);box-sizing:border-box}
button.tq:hover{border-color:var(--success);color:var(--success)}
.tarefa-nova{display:flex;gap:6px;flex-wrap:wrap}
.tarefa-nova input[type=text]{flex:1;min-width:140px}
.tarefa-nova input,.tarefa-nova button{font:400 11.5px/1.2 var(--font-sans);
 padding:6px 8px;border:1px solid var(--line);border-radius:5px;
 background:#fff;color:var(--ink-secondary);min-height:24px;box-sizing:border-box}
.tarefa-nova button{cursor:pointer;font-weight:600;color:var(--ink-secondary)}

/* A faixa que propõe fechar uma proposta com o que o Portal BASE diz
   (etapa 4). Cor de informação e não de alarme: é um facto que chegou,
   não um problema -- e o vermelho desta folha é o do prazo expirado. */
.desfecho-propoe{margin-top:14px;padding:12px 14px;border-radius:6px;
 background:var(--brand-soft);border:1px solid var(--line)}
.dp-facto{font:400 12px/1.5 var(--font-sans);color:var(--ink-secondary)}
.dp-botoes{display:flex;align-items:center;gap:8px;margin-top:10px;
 flex-wrap:wrap}
.dp-botoes a.bt-leve{margin-left:auto}

/* As barras horizontais dos motivos (etapa 5): são poucas e de nome
   longo, e em pé ficavam com o rótulo de lado a não se ler. */
.lh{display:flex;align-items:center;gap:10px}
.lh .t{flex:0 0 180px;font:400 11.5px/1.3 var(--font-sans);color:var(--ink-secondary);
 text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh .bh{height:12px;border-radius:3px;background:var(--brand);min-width:3px}
.lh .n{font:600 11px/1 var(--font-mono);color:var(--ink-secondary)}
/* o subtítulo de um número do bloco do negócio: diz sobre o que é que
   ele conta, que é o que separa um facto de um número solto */
.desfecho-som .sub{font:400 10.5px/1.3 var(--font-sans);color:var(--ink-muted);
 text-transform:none;letter-spacing:0}

/* Um número que ainda não existe diz-se por extenso, e não com um
   travessão: com a base quase vazia o bloco ficava a ser três
   travessões seguidos, o que dá ar de avariado em vez de «ainda não».
   Fica mais pequeno de propósito -- é uma nota, não um facto. */
.desfecho-som .por-haver b{font:400 12px/1.4 var(--font-sans);color:var(--ink-muted)}
.desfecho-som .por-haver{min-width:150px}
/* As propostas por fechar, no aviso do bloco do negócio: cada uma é um
   clique para arrumar, e por isso são ligações e não uma frase. */
.por-fechar{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.por-fechar a{font:500 12px/1.4 var(--font-sans)}
/* Os contactos (etapa 6) */
.ct{padding:9px 0;border-bottom:1px solid var(--surface);position:relative}
.ct:last-of-type{border-bottom:0}
.ct-nome{font:600 12.5px/1.4 var(--font-sans);color:var(--ink)}
.ct-papel{font:400 11px/1 var(--font-sans);color:var(--ink-muted);margin-left:6px}
.ct-l{display:inline-block;margin-right:12px;font:400 11.5px/1.5 var(--font-sans);
 color:var(--ink-secondary)}
a.ct-l{color:var(--brand)}
.ct-notas{font:400 11.5px/1.4 var(--font-sans);color:var(--ink-muted);margin-top:3px}
.ct-x{position:absolute;top:6px;right:0}
.ct-x button.etq-x{color:var(--ink-muted)}
.ct-x button.etq-x:hover{color:var(--danger);opacity:1}
.ct-novo{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;
 padding-top:12px;border-top:1px dashed var(--line-strong)}
.ct-novo input{flex:1 1 130px;font:400 11.5px/1.2 var(--font-sans);padding:6px 8px;
 border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink-secondary);
 min-height:24px;box-sizing:border-box}
.ct-novo button{cursor:pointer;font:600 11px/1 var(--font-sans);padding:6px 12px;
 border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink-secondary);
 min-height:24px;box-sizing:border-box}
.ct-novo button:hover{border-color:var(--brand);color:var(--brand)}

/* O calendario (16/09/2026, fase 3 do docs/design.md). Era uma grade de
   "uma linha por concurso x uma coluna por dia", que e a forma de um
   Gantt -- serve para INTERVALOS. Um prazo nao e um intervalo, e um
   dia. Medido na base verdadeira: 48 870 celulas desenhadas para
   mostrar 1 086 factos (2,2% cheias), 2,0 MB de HTML e 86 915 px de
   altura, e a pilula dizia "prazo" 1 086 vezes.
   Agora a unidade e o DIA: seis semanas, sete colunas, e dentro de cada
   dia o que fecha nesse dia. O choque de datas -- a razao de ser da
   pagina -- ve-se por a celula ter tres coisas em vez de uma. */
.cal-rolo{overflow-x:auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
 background:var(--line);border:1px solid var(--line);border-radius:9px;
 overflow:hidden;box-shadow:var(--shadow-sm)}
.cal-cab{background:var(--surface-raised);padding:8px 10px;
 font:600 12px/1 var(--font-sans);color:var(--ink-muted)}
.cal-dia{background:#fff;padding:7px 8px 9px;min-height:104px;
 display:flex;flex-direction:column;gap:4px;min-width:0}
/* Sabado e domingo distinguem-se: um prazo ao fim-de-semana importa,
   e sem isto a grade e uma tira de numeros onde nao se separa um
   sabado de uma terca. */
.cal-dia.fds{background:var(--surface-sunken)}
/* o que ja passou nesta semana continua a ver-se, apagado: um prazo de
   terca que hoje e quinta ainda explica o que aconteceu */
.cal-dia.passou{background:var(--surface-raised)}
.cal-dia.passou .cal-n{color:var(--ink-muted)}
.cal-n{font:600 13px/1 var(--font-mono);color:var(--ink-secondary);
 display:flex;align-items:baseline;gap:5px;margin-bottom:2px}
.cal-n span{font:500 9.5px/1 var(--font-sans);color:var(--ink-muted);
 text-transform:none;letter-spacing:0}
/* O dia e o eixo da pagina, e a urgencia e uma funcao DELE e nao de
   cada linha: no mesmo dia todas as linhas sao igualmente urgentes.
   Por isso a cor esta aqui e nao em 26 pilulas iguais. */
.cal-dia.hoje{background:var(--brand-soft)}
.cal-dia.hoje .cal-n{color:var(--brand);font-weight:700}
.cal-dia.avisa .cal-n{color:var(--warning)}
.cal-dia.mau .cal-n{color:var(--danger)}
.cal-dia.mes-novo .cal-n span{color:var(--ink-secondary);font-weight:700}
.cal-it{display:block;border-left:2px solid var(--line-strong);padding:2px 0 2px 6px;
 min-width:0}
.cal-it b{display:block;font:600 12px/1.3 var(--font-sans);color:var(--ink);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-it i{display:block;font:400 10px/1.3 var(--font-sans);color:var(--ink-muted);
 font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-it:hover b{color:var(--brand)}
.cal-it.empresa{border-left-color:var(--brand)}
/* "+23" abre no sitio. NAO e uma ligacao para a lista com ?de=&ate=:
   esses dois filtram por data_pub e nao por prazo, e um numero que abre
   uma lista diferente da que promete e a avaria que a regra da empresa
   proibe. */
.cal-mais{margin-top:1px}
.cal-mais > summary{cursor:pointer;list-style:none;
 font:600 10px/1 var(--font-sans);color:var(--ink-muted);padding:5px 4px;margin:-5px -4px;
 min-height:24px;box-sizing:border-box;display:flex;align-items:center}
.cal-mais > summary::-webkit-details-marker{display:none}
.cal-mais > summary:hover{color:var(--brand)}
.cal-mais[open] > summary{color:var(--ink-secondary)}
.cal-mais .cal-it{margin-top:4px}
/* a semana e a unidade de leitura: um risco mais forte entre elas */
.cal-legenda{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
 margin:0 0 12px;font:400 13px/1.4 var(--font-sans);color:var(--ink-muted)}

/* A abertura (fase 4 do docs/design.md, 16/09/2026). Prefixo `hj-`
   porque `tq` ja e o botao de marcar uma tarefa feita (button.tq). */
.kpis a.kpi{display:block;color:inherit}
.kpis a.kpi:hover{border-color:var(--line-strong);box-shadow:0 2px 6px rgba(17,20,24,.08)}
.kpis a.kpi:hover .r{color:var(--brand)}
.entrada-hoje{margin:14px 0 18px}
.entrada-hoje.mau{color:var(--danger)}
.cx.hoje > h2{font:620 17px/1.3 var(--font-sans);color:var(--ink);
 margin:0 0 14px;letter-spacing:-.2px}
/* Quatro baldes e nao uma ordem por data: o atrasado de ontem e outra
   categoria e nao um dia pior, e uma lista so por data poe-no a seguir
   ao de hoje como se fosse a mesma coisa. */
.hj-g{margin:0 0 16px}
.hj-g:last-child{margin-bottom:0}
.hj-t{display:flex;align-items:baseline;gap:7px;margin:0 0 6px;
 font:600 13px/1 var(--font-sans);color:var(--ink-muted)}
.hj-t i{font:500 10.5px/1 var(--font-mono);font-style:normal;color:var(--ink-muted)}
.hj-g.mau .hj-t{color:var(--danger)}
.hj-g.avisa .hj-t{color:var(--warning)}
.hj-l{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);
 gap:12px;align-items:baseline;padding:7px 9px;border-radius:6px;
 border-left:2px solid var(--line-strong);color:inherit}
.hj-l:hover{background:var(--surface-sunken)}
.hj-g.mau .hj-l{border-left-color:var(--danger)}
.hj-g.avisa .hj-l{border-left-color:var(--warning)}
.hj-q{font:600 12px/1.4 var(--font-mono);color:var(--ink-secondary)}
.hj-q.vago{color:var(--ink-muted);font-weight:400}
.hj-o{font:500 14px/1.4 var(--font-sans);color:var(--ink);min-width:0}
.hj-l:hover .hj-o{color:var(--brand)}
.hj-c{font:400 13px/1.4 var(--font-sans);color:var(--ink-muted);min-width:0;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.hj-l{grid-template-columns:minmax(0,1fr);gap:2px}}
/* O cabecalho do grupo: as tarefas agrupam-se por PROPOSTA e nao por
   data dentro do balde (D-c do CICLOS.md) -- 55 tarefas sao ~25
   concursos, e uma lista de 55 linhas iguais nao diz de que concurso
   cada uma e. */
.hj-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
 margin:10px 0 3px;padding:0 9px}
.hj-p a{font:600 13px/1.4 var(--font-sans);color:var(--ink-secondary)}
.hj-p a:hover{color:var(--brand)}
.hj-p .tag{font:500 10.5px/1.5 var(--font-sans)}
.hj-p form.ranhura{margin-left:auto}
.hj-l .hj-bts{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.hj-l .hj-bts input[type=text]{width:88px;font:400 11px/1.4 var(--font-sans);
 padding:2px 4px}
.hj-l .hj-bts input[name=quem]{width:76px}

/* --- movimento (17/09/2026)
   As curvas e os keyframes vêm do Open Props, em `estilo/` -- ver o
   LEIA-ME de lá. Havia DUAS regras de transition em 21 mil linhas, e a
   aplicação saltava de estado em estado sem dizer que tinha mudado.

   Três regras, e mais nenhuma: o que muda **por si** (o aviso) entra, o
   que muda **por causa do rato** acompanha, e o que se abre abre. Uma
   interface de trabalho não é um sítio para efeitos -- isto é para o
   olho não perder o fio, não para se ver.

   **`prefers-reduced-motion` desliga tudo**, e é por isso que o bloco
   está escrito dentro do `@media (prefers-reduced-motion: no-preference)`
   em vez de se desligar depois: quem pediu menos movimento nunca chega
   a receber nenhum, nem no primeiro fotograma. */
@media (prefers-reduced-motion: no-preference){
 /* O aviso é a única coisa que aparece sozinha depois de um gesto. Sem
    entrada, ele pisca no sítio e lê-se como se já lá estivesse. */
 /* as duas juntas: o deslizar sozinho vem de -100% da própria altura e
    passa por cima do que está acima; com o esbater, não se nota */
 .flash{animation:slide-in-down .18s var(--ease-out-3),
  fade-in .18s var(--ease-3)}
 /* O que responde ao rato ou ao teclado acompanha, em vez de trocar de
    cor de um fotograma para o outro. .12s é o que as duas transitions
    que já existiam usavam -- segue-se o que a casa já tinha. */
 .hj-l,.hj-p a,.ent-num,.hist a,.kpis a.kpi{
  transition:background .12s var(--ease-3),color .12s var(--ease-3)}
 .bt,.mini,button{transition:background .12s var(--ease-3),
  border-color .12s var(--ease-3),color .12s var(--ease-3)}
 /* O diálogo do motivo e o <details> do apagar: abrem, não aparecem. */
 dialog.mg-dialog[open]{animation:scale-up .14s var(--ease-out-3)}
 details.perigo[open] > *:not(summary){animation:fade-in .18s var(--ease-3)}
}
/* O que destrói dados vive fechado dentro de um <details>: um botão de
   apagar ao lado dos outros pede-se por engano. */
details.perigo{margin:16px 0 0;border-top:1px solid var(--line);
 padding-top:12px}
details.perigo > summary{cursor:pointer;font:500 13px/1.5
 var(--font-sans);color:var(--ink-muted)}
details.perigo[open] > summary{color:var(--danger)}
/* a cronologia e as propostas da ficha da entidade */
.ent-num{display:inline-block;margin:0 0 10px;color:inherit}
.ent-num:hover{color:var(--brand)}
.ent-nossas{margin-top:10px}
.ent-nossas .rot i{font-style:normal;color:var(--ink-muted)}

/* indicadores */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
 gap:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;
 box-shadow:0 1px 2px rgba(0,0,0,.06)}
.kpi .r{font:500 10px/1 var(--font-sans);color:var(--ink-muted);text-transform:uppercase;
 letter-spacing:.09em}
.kpi .v{font:700 30px/1 var(--font-mono);color:var(--ink);letter-spacing:-1.5px;margin:12px 0 6px}
.kpi .d{font:500 11.5px/1.4 var(--font-sans);color:var(--ink-muted)}
.ind-grelha{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;
 align-items:start}
/* A coluna e uma GRELHA de tres faixas -- valor, barra, rotulo -- e nao
   uma coluna flex (16/09/2026). Em flex, o `height:N%` da barra
   resolvia-se contra os 180px do grupo e depois era travado pelo espaco
   que sobrava depois do valor e do rotulo (137px, ou 76%): **qualquer
   valor acima de 76% desenhava a mesma altura**. Medido no ecra da
   abertura, com 94% e 78% a darem 136,8px os dois -- um grafico a
   dizer que duas coisas diferentes sao iguais. Com `1fr` a faixa do
   meio tem altura definida e a percentagem volta a ser proporcional. */
.barras{display:flex;align-items:stretch;gap:16px;height:180px}
.barras .col{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:9px;
 justify-items:center;height:100%}
.barras .v{font:600 12px/1 var(--font-mono);color:var(--ink)}
/* A cor tinha de vir de `.graf .barras .b`, e havia barras fora do
   `.graf` -- as do "Em jogo, por ranhura", que sairam para a abertura a
   16/09/2026 e ficaram transparentes: altura certa, cor nenhuma. */
.barras .b{width:100%;border-radius:4px 4px 0 0;align-self:end;
 background:var(--brand)}
.barras .l{font:400 11px/1.2 var(--font-sans);color:var(--ink-muted);text-align:center}
.saude{display:flex;flex-direction:column;gap:12px}
/* A linha de saude tem de aguentar valores de qualquer comprimento: as
   marcas de ultimo erro sao frases de 80 caracteres em mono, e com
   `flex:none` no valor a linha transbordava da caixa e o rotulo partia
   palavra a palavra a tentar dar-lhe espaco. Agora o valor encolhe,
   quebra e, se nao couber de todo, passa para a linha de baixo. */
.saude .l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.saude .t{font:400 12px/1.45 var(--font-sans);color:var(--ink-secondary);flex:1 1 auto;min-width:0}
.saude .v{margin-left:auto;flex:0 1 auto;min-width:0;
 font:600 11.5px/1.5 var(--font-mono);color:var(--ink);text-align:right;
 word-break:break-word;overflow-wrap:anywhere}
/* legenda: diz sobre o que e que as linhas seguintes contam */
.saude .legenda{margin-top:6px}
.saude .legenda .t{font:400 11px/1.45 var(--font-sans);color:var(--ink-muted);
 font-style:italic}
/* entidade sem NIF no corpus: agrupa-se pelo nome e pode ser a mesma
   empresa que outra linha */
.sem-nif{display:inline-block;margin-left:6px;padding:2px 5px;border-radius:4px;
 background:var(--surface-sunken);color:var(--ink-muted);font:600 9px/1.3 var(--font-sans);
 text-transform:uppercase;letter-spacing:.06em;vertical-align:middle}

@media (max-width:1100px){
 .ind-grelha{grid-template-columns:minmax(0,1fr)}
}

/* Ecras estreitos (8/09/2026, pedido do Afonso: "quero que o frontend
   seja responsive"). Ate aqui a barra lateral de 140px comia um terco
   de um telemovel, a linha da lista transbordava e o titulo da ficha
   vinha com 22px numa coluna de 230. A regra: a barra passa para cima
   e fica so com a marca, a navegacao e a porta das Configuracoes; tudo
   o que e grelha de duas colunas passa a uma; o que e largo por
   natureza (quadro, tabelas, abas, indice da ficha) rola de lado
   dentro do seu contentor, nunca a pagina. Um so ponto de corte, 900px,
   mais um afinamento a 600 para os telemoveis mesmo pequenos. */
@media (max-width:900px){
 .barra{padding:10px 14px}
 /* a navegacao vai para uma segunda linha, inteira, e rola de lado se
    nao caber: espremida ao lado da marca empilhava-se em coluna */
 .barra nav{order:10;flex-basis:100%;margin:2px 0 0}
 .topo{padding:12px 16px 0}
 .corpo{padding:14px 12px 44px}
 h1.tit{font-size:19px}
 .abas{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
 .abas a{white-space:nowrap;padding:9px 10px}
 .linha-conta{flex-wrap:wrap}
 .linha-conta a{margin-left:0}
 .item{grid-template-columns:minmax(0,1fr)}
 .item-corpo{padding:12px 14px}
 .item-lado{border-left:0;border-top:1px solid var(--surface-sunken);flex-direction:row;
  flex-wrap:wrap;justify-content:space-between;align-items:center;padding:10px 14px;gap:8px}
 .item-accoes{justify-content:flex-start}
 .filtros input[type=text]{min-width:0;flex-basis:100%}
 .filtros select,.filtros input.campo-data{flex:1 1 40%;min-width:0}
 .filtros input#filtro-cpv-excl{width:auto!important;flex:1 1 40%!important}
 details.painel-filtros .pf-sub{display:none}
 .guardados .guardar{margin-left:0;flex-basis:100%}
 .guardados .guardar input{min-width:0;flex:1}
 .paginas{flex-wrap:wrap}
 .lado-cx{padding:14px}
 .coluna{width:min(282px,86vw)}
 .escada{flex-wrap:wrap}
 .escada span{flex:1 1 40%;min-width:0}
 .barras{gap:8px}
 .barras .col{min-width:0}
 .barras .l{white-space:normal;text-align:center;overflow-wrap:anywhere}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .conf-indice a i{display:none}
 /* Sete colunas em 375px dao 49px cada, e o titulo sai "Ex...". E a
    mesma avaria do calendario antigo, que mostrava "A pr..." numa celula
    de 52px. A regra da empresa e rolar DENTRO de si e nunca alargar a
    pagina: 120px por coluna e o minimo em que o titulo diz alguma
    coisa. */
 .cal{min-width:840px}
 .conf-cx{padding:14px}
 .conf-form textarea{max-width:none}
 dialog.mg-dialog{width:94vw}
}
@media (max-width:600px){
 .barra nav a{padding:7px 7px;font-size:12px}
 h1.tit{font-size:17px}
 .kpis{grid-template-columns:minmax(0,1fr)}
 .filtros select,.filtros input.campo-data{flex-basis:100%}
 .filtros input#filtro-cpv-excl{flex-basis:100%!important}
 .entrar{padding:20px 18px 18px}
}

@font-face{font-family:'Inter';src:url('/tipo/inter.woff2') format('woff2');
 font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/tipo/plex-sans.woff2') format('woff2');
 font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/tipo/plex-mono-400.woff2') format('woff2');
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/tipo/plex-mono-600.woff2') format('woff2');
 font-weight:600;font-style:normal;font-display:swap}

[data-tipo=inter]{
 }
[data-tipo=plex]{
 }
/* data-tipo=sistema nao redefine nada: fica o que o CSS de cima diz */

/* A paleta. Medida sobre TODOS os fundos que existem, nao so sobre o
   papel: pior caso 4,52 (docs/design.md §4). A escala de texto passou a
   ter cinco degraus, todos AA sobre tudo -- o --t6 aponta para o --t5
   porque um sexto cinzento que so funciona em metade dos fundos e uma
   armadilha, e foi o que ja partiu as .coluna-pede a 2/09. */
[data-pele=novo]{
   
   
   --ink:#111418;
    
  
    
 
  
   
 
   
  
 /* A escala: seis degraus, no lugar dos dezanove tamanhos soltos.
    Os valores sao os da Plex Sans, que e a letra escolhida (decisao
    dele a 16/09/2026). A Plex tem altura-de-x 52 contra 54 da Inter --
    le-se 3,8% mais pequena ao mesmo tamanho --, e por isso a escala
    sobe meio pixel em vez de se copiar a da Inter. Nao custa densidade:
    medido, a mesma frase a 13,5px em Plex da 625,7px contra 637,3px a
    13px em Inter, que e 1,8% MAIS estreita ao mesmo tamanho optico. */
      
 
 
}
/* Regra 4: os numeros alinham por algarismo. Dinheiro, prazos, datas,
   referencias e CPV sao metade do que este ecra mostra, e sem isto uma
   coluna de precos nao se compara de relance. */
[data-pele=novo] body{background:var(--surface);
 font-variant-numeric:tabular-nums}

/* Regra 3: as superficies separam-se por tom, nao por risco. */
[data-pele=novo] .item,[data-pele=novo] .cx,[data-pele=novo] .sec,
[data-pele=novo] .kpi,[data-pele=novo] .conf-cx,[data-pele=novo] .prop{
 border-color:var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}

/* Regra 1: hierarquia pelo tamanho e pelo peso. */
[data-pele=novo] h1.tit{font:680 32px/1.2 var(--font-sans);letter-spacing:-.6px}
[data-pele=novo] .item-titulo{font:620 17px/1.3 var(--font-sans);
 letter-spacing:-.2px}
[data-pele=novo] .abas a,[data-pele=novo] .bt{font-size:14px}

/* Regra d do diagnostico: as maiusculas espacadas saem. Um rotulo de
   bloco passa a caixa normal, peso 600, --f2 -- le-se melhor, ocupa
   menos, e deixa de obrigar a letra a descer a 9px para caber. */
[data-pele=novo] .rot,[data-pele=novo] .kpi .r,[data-pele=novo] .facto .k,
[data-pele=novo] details.sec .st,[data-pele=novo] .prop-campos label,
[data-pele=novo] .tab-contratos th,[data-pele=novo] .tab-mercado th,
[data-pele=novo] details.painel-filtros .pf-tit,
[data-pele=novo] .desfecho-som span{
 text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;
 color:var(--ink-muted)}

/* Os botoes (docs/design.md §5). Cinco classes, e a funcao ve-se pela
   cor e pelo preenchimento antes de se ler a palavra.
   Os dois perigosos comecam em contorno e so se enchem ao passar ou ao
   receber foco: um botao vermelho cheio numa lista de vinte linhas e um
   alvo -- puxa o olho e convida ao clique errado, que e o contrario do
   que uma accao irreversivel quer. */
[data-pele=novo] .bt{border-radius:6px;font-weight:600;
 background:var(--surface-raised);border-color:var(--line-strong);color:var(--ink-secondary)}
[data-pele=novo] .bt:hover{border-color:var(--ink-secondary);color:var(--ink)}
[data-pele=novo] .bt.forte{background:var(--brand);border-color:var(--brand);
 color:#fff}
[data-pele=novo] .bt.forte:hover{background:#17509f;border-color:#17509f}
[data-pele=novo] .bt.ok,[data-pele=novo] .bt.verde{background:var(--success);
 border-color:var(--success);color:#fff}
[data-pele=novo] .bt.ok:hover,[data-pele=novo] .bt.verde:hover{
 background:#0e5c3c;border-color:#0e5c3c;color:#fff}
[data-pele=novo] .bt.cuidado{background:var(--surface-raised);color:var(--warning);
 border-color:#e0b48a}
[data-pele=novo] .bt.cuidado:hover,[data-pele=novo] .bt.cuidado:focus-visible{
 background:var(--warning);border-color:var(--warning);color:#fff}
[data-pele=novo] .bt.perigo{background:var(--surface-raised);color:var(--danger);
 border-color:#e5a9a2}
[data-pele=novo] .bt.perigo:hover,[data-pele=novo] .bt.perigo:focus-visible{
 background:var(--danger);border-color:var(--danger);color:#fff}

/* O `.mini` e o botao DA LINHA, e o `.bt` e o botao DA PAGINA. A
   diferenca nao e so o tamanho: numa lista de vinte linhas com dois
   botoes cada, encher quarenta botoes de cor faz quarenta alvos e
   nenhuma hierarquia. Por isso a regra do `.mini` e a mesma que a dos
   perigosos: **contorno com a cor do significado, e enche ao passar ou
   ao receber o foco**. O `.bt.forte` e o `.bt.ok` continuam cheios,
   porque sao um por bloco.

   E o `.mini` deixa de ficar VERMELHO ao passar por cima. Ficava, em
   todos -- no "ir" do selector, no "desfazer", no "X lotes" --, o que e
   o ponto (c) do diagnostico em estado puro: a cor de alarme a sair em
   coisas que nao alarmam nada, e por isso a nao querer dizer nada onde
   devia. Quem apaga mesmo leva `.mini.perigo`. */
[data-pele=novo] .mini{border-radius:6px;font-size:12px;
 background:var(--surface-raised);border-color:var(--line-strong);color:var(--ink-secondary)}
[data-pele=novo] .mini:hover{border-color:var(--ink-secondary);color:var(--ink);
 background:var(--surface-raised)}
[data-pele=novo] .mini.verde,[data-pele=novo] .mini.ok{color:var(--success);
 border-color:#9ac4ae}
[data-pele=novo] .mini.verde:hover,[data-pele=novo] .mini.ok:hover,
[data-pele=novo] .mini.verde:focus-visible,[data-pele=novo] .mini.ok:focus-visible{
 background:var(--success);border-color:var(--success);color:#fff}
[data-pele=novo] .mini.cuidado{color:var(--warning);border-color:#e0b48a}
[data-pele=novo] .mini.cuidado:hover,
[data-pele=novo] .mini.cuidado:focus-visible{
 background:var(--warning);border-color:var(--warning);color:#fff}
[data-pele=novo] .mini.perigo{color:var(--danger);border-color:#e5a9a2}
[data-pele=novo] .mini.perigo:hover,
[data-pele=novo] .mini.perigo:focus-visible{
 background:var(--danger);border-color:var(--danger);color:#fff}

/* O separador de milhares e um espaco INQUEBRAVEL (mil_pt), e faz falta:
   com um normal, o browser parte "1 363 300" ao fim da linha. Mas a
   30px, na Plex, esse espaco tem a largura de um algarismo e "209 903"
   le-se como dois numeros. Aperta-se so aqui, no numero de display --
   a 11 ou 12px o espaco esta certo e nao se toca. Nao se troca o
   caractere: o mil_pt serve tambem a consola e os dois CSV. */
[data-pele=novo] .kpi .v{word-spacing:-.3em}

/* --------------------------------------------------------------------
   A ABERTURA REDESENHADA (17/09/2026, pacote «Radar Gov UI redesign»,
   design_handoff_radar/README.md §1).

   Quatro cartoes `.kpi` ocupavam 120px de altura para dizerem quatro
   numeros; a linha de factos diz os mesmos quatro numa linha de 20px, e
   o que sobra e a fita da semana -- que responde a "o que fecha esta
   semana" sem ninguem ter de ir ao calendario. */

/* A linha de factos vai na ranhura das abas, logo por baixo do titulo:
   e onde uma barra de separadores estaria, e por isso nao empurra nada.
   Cada facto abre a lista que o produz -- a regra da empresa. */
[data-pele=novo] .factos-linha{display:flex;flex-wrap:wrap;
 align-items:baseline;gap:6px 22px;padding:2px 0 12px}
[data-pele=novo] .factos-linha a{color:var(--ink-muted);
 font:500 13px/1.5 var(--font-sans)}
[data-pele=novo] .factos-linha a:hover{color:var(--brand)}
[data-pele=novo] .factos-linha b{font:600 15px/1 var(--font-mono);
 color:var(--ink);margin-right:4px;word-spacing:-.3em}
[data-pele=novo] .factos-linha b.avisa{color:var(--warning)}
[data-pele=novo] .factos-linha b.mau{color:var(--danger)}
[data-pele=novo] .factos-linha .adiante{margin-left:auto;color:var(--ink-secondary)}

/* A fita da semana: sete celulas, 1px de intervalo sobre a linha -- a
   separacao e o fundo a aparecer, nao um risco desenhado (regra 3). */
[data-pele=novo] .fita{display:grid;
 grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
 background:var(--line);border:1px solid var(--line);border-radius:9px;
 overflow:hidden;box-shadow:var(--shadow-sm)}
[data-pele=novo] .fita a{display:flex;flex-direction:column;gap:3px;
 padding:8px 10px 10px;min-height:66px;background:var(--surface-raised);
 color:var(--ink-muted);font:400 12px/1.35 var(--font-sans)}
[data-pele=novo] .fita a:hover{background:var(--surface-sunken)}
[data-pele=novo] .fita .d{font:600 13px/1 var(--font-mono);color:var(--ink-secondary)}
/* os dias que passaram vão a cinzento, e nao a meia-luz: o opacity:.7
   baixava o texto a 3,1:1, abaixo dos 4,5 que o texto pede (axe, 25/09/2026) */
[data-pele=novo] .fita .passou .d{color:var(--ink-muted);font-weight:400}
[data-pele=novo] .fita .fds{background:var(--surface-sunken)}
[data-pele=novo] .fita .e{color:var(--warning)}
[data-pele=novo] .fita .m{color:var(--danger)}
[data-pele=novo] .fita .hoje{background:var(--brand-soft);opacity:1}
[data-pele=novo] .fita .hoje .d{color:var(--brand);font-weight:700}
[data-pele=novo] .fita .on{outline:2px solid var(--brand);outline-offset:-2px}
[data-pele=novo] .fita-nav{display:flex;gap:18px;margin:8px 0 16px;
 flex-wrap:wrap;font:500 13px/1.4 var(--font-sans);color:var(--ink-muted)}
[data-pele=novo] .fita-nav a{color:var(--ink-secondary)}
[data-pele=novo] .fita-nav .adiante{margin-left:auto}

/* Duas colunas: as tarefas a esquerda, o que mudou a direita. */
[data-pele=novo] .dois{display:grid;
 grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:18px;
 align-items:start}
[data-pele=novo] .lado{display:flex;flex-direction:column;gap:14px}
[data-pele=novo] .lado .cx{padding:14px 18px}

/* O cabecalho do "Para fazer": o rotulo, as pilhas de pessoa e o
   "esconder as feitas". */
[data-pele=novo] .fazer-topo{display:flex;align-items:center;gap:8px 12px;
 padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
[data-pele=novo] .fazer-topo .periodos{margin:0 0 0 6px}
[data-pele=novo] .fazer-topo .esconder{margin-left:auto;display:flex;gap:6px;
 align-items:center;font:400 13px/1 var(--font-sans);color:var(--ink-muted)}
[data-pele=novo] .periodos .av{margin-right:5px;width:16px;height:16px;
 line-height:16px;font-size:8px}
[data-pele=novo] .periodos a.on .av{background:rgba(255,255,255,.28);
 color:#fff}
[data-pele=novo] .periodos i{font:500 10.5px/1 var(--font-mono);font-style:normal;
 opacity:.8;margin-left:4px}
[data-pele=novo] .fazer-fundo{display:flex;gap:18px;padding:12px 16px;
 border-top:1px solid var(--line);flex-wrap:wrap;
 font:500 13px/1.4 var(--font-sans);color:var(--ink-muted)}
[data-pele=novo] .fazer-fundo .adiante{margin-left:auto}

/* Os baldes dobram com o <details> do browser -- nao ha JS nenhum a
   guardar isto, e por isso tambem nao ha estado escondido para
   divergir do que o servidor manda. */
[data-pele=novo] .hj-g{padding:4px 10px 8px;margin:0;
 border-top:1px solid var(--surface-sunken)}
[data-pele=novo] .hj-g:first-child{border-top:0}
[data-pele=novo] details.hj-g > summary{list-style:none}
[data-pele=novo] details.hj-g > summary::-webkit-details-marker{display:none}
[data-pele=novo] details.hj-g > summary .hj-t{cursor:pointer;
 padding:10px 8px 4px;margin:0}
[data-pele=novo] details.hj-g > summary .seta::before{content:'\25b8';
 font:500 10px/1 var(--font-mono);color:var(--ink-muted)}
[data-pele=novo] details.hj-g[open] > summary .seta::before{content:'\25be'}
[data-pele=novo] .hj-t .direita{margin-left:auto;font-weight:400;
 font-size:12px;color:var(--ink-muted)}
[data-pele=novo] .hj-t .feitas{font:400 12px/1 var(--font-sans);
 color:var(--ink-muted)}

/* A LINHA DE TAREFA. Rica-se no sitio: a queixa dele era "concluo a
   tarefa e volto para o inicio da pagina". */
[data-pele=novo] .hj-row{display:grid;
 grid-template-columns:20px minmax(0,1fr) 64px minmax(120px,220px) 20px 96px;
 gap:10px;align-items:center;padding:6px 8px;border-radius:6px;
 border-left:2px solid var(--line-strong)}
[data-pele=novo] .hj-row:hover{background:var(--surface-sunken)}
[data-pele=novo] .hj-g.mau .hj-row{border-left-color:var(--danger)}
[data-pele=novo] .hj-g.avisa .hj-row{border-left-color:var(--warning)}
[data-pele=novo] .hj-row form.accao{display:flex;margin:0}
[data-pele=novo] .hj-row .fim{justify-self:end;text-align:right;
 font:400 13px/1.4 var(--font-sans);color:var(--ink-muted)}
[data-pele=novo] .hj-row.feita{background:var(--surface-sunken)}
[data-pele=novo] .hj-row.feita .hj-o{color:var(--ink-muted);
 text-decoration:line-through}
[data-pele=novo] .hj-row .hj-q.avisa{color:var(--warning)}
[data-pele=novo] .hj-row .hj-q.mau{color:var(--danger)}
[data-pele=novo] .hj-sem{display:grid;grid-template-columns:minmax(0,1fr) auto;
 gap:10px;align-items:center;padding:7px 8px 7px 16px;border-radius:6px;
 border-left:2px solid var(--danger)}
[data-pele=novo] .hj-sem > div > a{font:600 14px/1.35 var(--font-sans);
 color:var(--ink)}
[data-pele=novo] .hj-sem .hj-c{white-space:normal}

/* A caixa de ✓ e um <button> de um POST, e nao um <input type=checkbox>:
   sem JS uma caixa nao submete nada, e este gesto tem de valer sem JS. */
[data-pele=novo] .chk{width:16px;height:16px;padding:0;flex:none;
 position:relative;border:1px solid var(--line-strong);border-radius:4px;
 background:var(--surface-raised);cursor:pointer}
[data-pele=novo] .chk:hover{border-color:var(--success)}
[data-pele=novo] .chk.on{background:var(--success);border-color:var(--success)}
[data-pele=novo] .chk.on::after{content:'';position:absolute;left:4px;top:1px;
 width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;
 transform:rotate(45deg)}

/* O avatar de quem e a tarefa. Sem dono e um circulo tracejado -- um
   lugar vazio a dizer que falta alguem, e nao a ausencia de marca. */
[data-pele=novo] .av{width:20px;height:20px;border-radius:50%;flex:none;
 display:inline-block;background:var(--surface-sunken);color:var(--ink-secondary);
 font:600 9px/20px var(--font-sans);text-align:center}
[data-pele=novo] .av.eu{background:var(--brand);color:#fff}
[data-pele=novo] .av.vago{background:transparent;
 border:1px dashed var(--line-strong)}

/* "O que mudou", "Prazos a chegar" e "Paradas ha mais tempo". */
[data-pele=novo] .mudou-n{display:flex;gap:12px;margin:12px 0 10px}
[data-pele=novo] .mudou-n a{flex:1;display:flex;flex-direction:column;gap:2px;
 color:inherit}
[data-pele=novo] .mudou-n b{font:600 22px/1 var(--font-mono);color:var(--ink)}
[data-pele=novo] .mudou-n b.azul{color:var(--brand)}
[data-pele=novo] .feed{display:flex;flex-direction:column;
 border-top:1px solid var(--surface-sunken)}
[data-pele=novo] .feed .l{display:grid;
 grid-template-columns:44px minmax(0,1fr);gap:10px;padding:8px 0;
 border-bottom:1px solid var(--surface-sunken)}
[data-pele=novo] .feed .l:last-child{border-bottom:0}
[data-pele=novo] .feed .l p{margin:0;font:500 13px/1.45 var(--font-sans);
 color:var(--ink)}
[data-pele=novo] .prazos{display:flex;flex-direction:column;margin-top:8px}
[data-pele=novo] .prazos a{display:grid;
 grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:baseline;
 padding:6px 0;border-top:1px solid var(--surface-sunken);color:inherit}
[data-pele=novo] .prazos a .hj-c{color:var(--ink);font-weight:500}
[data-pele=novo] .prazos .hj-q.avisa{color:var(--warning)}

/* Abaixo de 1180 a linha parte-se em duas: caixa + texto + dono +
   accao em cima, quando + concurso por baixo com o recuo da caixa. O
   alvo continua a ser >= 24px, que e o que a regra pede. */
@media (max-width:1180px){
 [data-pele=novo] .hj-row{display:flex;flex-wrap:wrap;gap:3px 10px}
 [data-pele=novo] .hj-row .hj-o{flex:1 1 100%;max-width:calc(100% - 150px);
  order:1}
 [data-pele=novo] .hj-row form.accao{order:0}
 [data-pele=novo] .hj-row .av{order:2}
 [data-pele=novo] .hj-row .fim{order:3;margin-left:auto}
 [data-pele=novo] .hj-row .hj-q{order:4;flex:0 0 auto;margin-left:26px}
 [data-pele=novo] .hj-row .hj-c{order:5;flex:1 1 0;min-width:0}}
@media (max-width:900px){
 [data-pele=novo] .dois{grid-template-columns:minmax(0,1fr)}}

/* O PONTO DE SITUACAO (redesenho §2). Os quatro numeros sao uma grelha
   de celulas separadas por 1px de fundo, e nao quatro cartoes: dentro
   de uma caixa que ja e um cartao, quatro cartoes sao cinco caixas. */
[data-pele=novo] .sit-numeros{display:grid;
 grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
 background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);
 overflow:hidden}
[data-pele=novo] .sit-n{background:var(--surface-raised);padding:16px 18px;
 display:flex;flex-direction:column;gap:6px}
[data-pele=novo] .sit-n .r{font:600 13px/1 var(--font-sans);color:var(--ink-muted)}
[data-pele=novo] .sit-n b{font:600 28px/1 var(--font-mono);color:var(--ink);
 letter-spacing:-1px;word-spacing:-.3em}
[data-pele=novo] .sit-n .d{font:400 12px/1.45 var(--font-sans);
 color:var(--ink-muted)}
/* O `word-spacing` volta ao normal: o aperto de -.3em é do NÚMERO de
   display (senão "209 903" lê-se como dois números), e aqui o `b` leva
   uma FRASE -- saía "1de1decididos—ataxadiz-seapartirde5". */
[data-pele=novo] .sit-n.por-haver b{font:400 13px/1.45 var(--font-sans);
 color:var(--ink-muted);letter-spacing:0;word-spacing:normal}
[data-pele=novo] .delta{font:600 13px/1 var(--font-mono)}
[data-pele=novo] .delta.sobe{color:var(--success)}
[data-pele=novo] .delta.desce{color:var(--danger)}
[data-pele=novo] .delta.igual,[data-pele=novo] .delta.vago{color:var(--ink-muted);
 font-weight:400}

/* AS ENTIDADES (redesenho §3). A fita do "connosco": um quadrado por
   proposta, com a cor do desfecho. Seis quadrados dizem se correram bem
   antes de se ler a taxa; "6 propostas" nao diz nada disso. */
[data-pele=novo] .ent-fita{display:flex;gap:2px;flex-wrap:wrap;
 margin-bottom:3px}
[data-pele=novo] .ent-fita i{width:8px;height:8px;border-radius:2px;
 display:block}
[data-pele=novo] .tab-pe{display:flex;gap:12px;align-items:center;
 flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line)}
[data-pele=novo] .tab-pe .nota{flex:1 1 320px}
[data-pele=novo] .comparar{border-color:var(--brand-soft);padding:0;
 margin-bottom:18px}
[data-pele=novo] .comparar .cab{display:grid;
 grid-template-columns:180px 1fr 1fr;gap:12px;padding:12px 16px;
 background:var(--brand-soft);border-bottom:1px solid var(--brand-soft);
 font:600 14px/1.3 var(--font-sans)}
[data-pele=novo] .comparar .grelha{display:grid;
 grid-template-columns:180px 1fr 1fr;gap:10px 12px;padding:14px 16px;
 font:400 13px/1.5 var(--font-sans);color:var(--ink-secondary)}
[data-pele=novo] .comparar .grelha .r{font-weight:600;color:var(--ink-muted)}
[data-pele=novo] .comparar > a{display:block;padding:0 16px 14px}
@media (max-width:760px){
 [data-pele=novo] .comparar .cab,[data-pele=novo] .comparar .grelha{
  grid-template-columns:minmax(0,1fr)}}

/* A ficha da entidade (redesenho §4): os seis factos, e o NOSSO lado à
   esquerda. Empilhados, o que já fizemos com ela ficava debaixo de seis
   gráficos do mercado -- e é a primeira pergunta ao abrir uma ficha. */
[data-pele=novo] .sit-numeros.seis{margin:0 0 14px;
 grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
[data-pele=novo] .sit-numeros.seis .sit-n b{font-size:22px}
[data-pele=novo] .ent-dois{grid-template-columns:minmax(0,360px) minmax(0,1fr);
 margin-top:14px}
[data-pele=novo] .ent-dois .lado-nosso > .cx{margin:0}
@media (max-width:900px){
 [data-pele=novo] .ent-dois{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
 [data-pele=novo] .fita a{min-height:52px;padding:6px}
 [data-pele=novo] .fita .nota-dia{display:none}}
:root, [data-theme="claro"]{--surface:#f1f3f8;--surface-raised:#ffffff;--surface-sunken:#e8ebf1;--surface-header:#004682;--on-header:#ffffff;--on-header-muted:#b9cde3;--line:#e1e4ea;--line-strong:#64718b;--ink:#2b363c;--ink-secondary:#475164;--ink-muted:#5b6780;--brand:#004682;--brand-hover:#00355f;--brand-soft:#e1ecf6;--on-brand:#ffffff;--seal:#7a5200;--seal-soft:#fff1cc;--success:#006432;--success-soft:#dff1e6;--warning:#8a4f00;--warning-soft:#fff0d6;--danger:#c8181a;--danger-soft:#fce4e3;--link:var(--brand);--focus:#dc00e6;--shadow-sm:0 1px 2px rgba(22, 27, 38, 0.04), 0 2px 8px rgba(22, 27, 38, 0.05);--shadow-md:0 8px 24px rgba(22, 27, 38, 0.10), 0 2px 6px rgba(22, 27, 38, 0.06)}
[data-theme="escuro"]{--surface:#14171c;--surface-raised:#1c2027;--surface-sunken:#0e1115;--surface-header:#004682;--on-header:#ffffff;--on-header-muted:#b9cde3;--line:#2c323b;--line-strong:#8893aa;--ink:#eceef1;--ink-secondary:#b8bec8;--ink-muted:#9199a5;--brand:#7fb3e6;--brand-hover:#9fc6ee;--brand-soft:#16304b;--on-brand:#0b1a2c;--seal:#ffc24d;--seal-soft:#3a2a05;--success:#6fcf93;--success-soft:#0f2e1c;--warning:#ffaa00;--warning-soft:#3b2a08;--danger:#f28b82;--danger-soft:#3f1513;--link:var(--brand);--focus:#dc00e6;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.35);--shadow-md:0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4)}
[data-theme="contraste"]{--surface:#ffffff;--surface-raised:#ffffff;--surface-sunken:#f0f0f0;--surface-header:#00305a;--on-header:#ffffff;--on-header-muted:#dbe6f2;--line:#6b6b6b;--line-strong:#000000;--ink:#000000;--ink-secondary:#1f1f1f;--ink-muted:#4a4a4a;--brand:#003c70;--brand-hover:#001f3d;--brand-soft:#e6eef7;--on-brand:#ffffff;--seal:#5a3c00;--seal-soft:#fff3d6;--success:#004d26;--success-soft:#e0f3e7;--warning:#6b3a00;--warning-soft:#fff0d9;--danger:#9b0000;--danger-soft:#fde5e5;--link:var(--brand);--focus:#000000;--shadow-sm:0 0 0 rgba(0,0,0,0);--shadow-md:0 0 0 rgba(0,0,0,0)}
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;--border-hairline:1px;--border-control:2px;--border-focus:2px;--font-serif:"Zilla Slab", "Roboto Slab", Georgia, serif;--font-sans:"Source Sans 3", "Segoe UI", system-ui, sans-serif;--font-mono:"Source Code Pro", ui-monospace, Consolas, monospace}
@font-face{font-family:"Zilla Slab";src:url("/tipo/ZillaSlab-SemiBold.woff2") format("woff2");font-weight:600}
@font-face{font-family:"Zilla Slab";src:url("/tipo/ZillaSlab-Medium.woff2") format("woff2");font-weight:500}
@font-face{font-family:"Source Sans 3";src:url("/tipo/SourceSans3-Variable.woff2") format("woff2");font-weight:200 900}
@font-face{font-family:"Source Code Pro";src:url("/tipo/SourceCodePro-Variable.woff2") format("woff2");font-weight:200 900}/* Mira Gov — folha dos componentes. Só variáveis de tokens.css; nenhum valor solto. */
.mg{font-family:var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums;box-sizing:border-box}
.mg *,.mg *::before,.mg *::after{box-sizing:inherit}
.mg :focus-visible{outline:var(--border-focus) solid var(--focus);outline-offset:2px}
.mg-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mg-serif{font-family:var(--font-serif)}

/* Button */
.mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
 min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-md);
 border:var(--border-control) solid transparent;cursor:pointer;white-space:nowrap;
 font:500 14px/20px var(--font-sans);text-decoration:none;transition:background-color .12s,border-color .12s,color .12s}
.mg-btn--sm{min-height:28px;padding:0 var(--space-3);font-size:13px;line-height:18px}
.mg-btn--primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.mg-btn--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.mg-btn--secondary{background:var(--surface-raised);border-color:var(--brand);color:var(--brand)}
.mg-btn--secondary:hover{border-color:var(--brand-hover);background:var(--brand-hover);color:var(--on-brand)}
.mg-btn--subtle{background:transparent;border-color:transparent;color:var(--brand)}
.mg-btn--subtle:hover{background:var(--brand-soft)}
.mg-btn--success{background:var(--surface-raised);border-color:var(--success);color:var(--success)}
.mg-btn--success:hover,.mg-btn--success:focus-visible{background:var(--success);color:var(--surface-raised)}
.mg-btn--warning{background:var(--surface-raised);border-color:var(--warning);color:var(--warning)}
.mg-btn--warning:hover,.mg-btn--warning:focus-visible{background:var(--warning);color:var(--surface-raised)}
.mg-btn--danger{background:var(--surface-raised);border-color:var(--danger);color:var(--danger)}
.mg-btn--danger:hover,.mg-btn--danger:focus-visible{background:var(--danger);color:var(--surface-raised)}
.mg-btn[disabled],.mg-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* Tag */
.mg-tag{display:inline-flex;align-items:center;gap:var(--space-1);height:22px;padding:0 var(--space-3);
 border-radius:var(--radius-full);font:600 12px/16px var(--font-sans);white-space:nowrap;
 background:var(--surface-sunken);color:var(--ink-secondary)}
.mg-tag--mono{font-family:var(--font-mono);font-weight:500}
.mg-tag--brand{background:var(--brand-soft);color:var(--brand)}
.mg-tag--seal{background:var(--seal-soft);color:var(--seal)}
.mg-tag--success{background:var(--success-soft);color:var(--success)}
.mg-tag--warning{background:var(--warning-soft);color:var(--warning)}
.mg-tag--danger{background:var(--danger-soft);color:var(--danger)}
.mg-tag__dot{width:6px;height:6px;border-radius:var(--radius-full);background:currentColor;flex:none}

/* Card */
.mg-card{background:var(--surface-raised);border:var(--border-hairline) solid var(--line);
 border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.mg-card__head{display:flex;align-items:flex-start;gap:var(--space-3);
 padding:var(--space-4) var(--space-5);border-bottom:var(--border-hairline) solid var(--line)}
.mg-card__title{margin:0;font:600 17px/24px var(--font-sans);color:var(--ink);flex:1 1 auto;min-width:0}
.mg-card__meta{margin:2px 0 0;font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.mg-card__actions{display:flex;gap:var(--space-2);flex:none}
.mg-card__body{padding:var(--space-4) var(--space-5);font:400 15px/22px var(--font-sans)}
.mg-card__body>:first-child{margin-top:0}.mg-card__body>:last-child{margin-bottom:0}
.mg-card__foot{padding:var(--space-3) var(--space-5);border-top:var(--border-hairline) solid var(--line);
 font:400 13px/18px var(--font-sans);color:var(--ink-muted)}

/* Card com banda (a linguagem do manual: secção em azul com texto branco) */
.mg-card--band .mg-card__head{background:var(--brand);border-bottom-color:var(--brand);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.mg-card--band .mg-card__title{color:var(--on-brand);font-family:var(--font-serif);font-size:18px}
.mg-card--band .mg-card__meta{color:var(--on-header-muted)}

/* DataTable */
.mg-table{width:100%;border-collapse:collapse;background:var(--surface-raised);
 border:var(--border-hairline) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
 font:400 14px/20px var(--font-sans)}
.mg-table table{width:100%;border-collapse:collapse}
.mg-table th{text-align:left;padding:var(--space-3) var(--space-4);background:var(--surface-sunken);
 color:var(--ink-muted);font:600 12px/16px var(--font-sans);border-bottom:var(--border-hairline) solid var(--line)}
.mg-table td{padding:var(--space-2) var(--space-4);border-bottom:var(--border-hairline) solid var(--line);
 vertical-align:middle;height:36px;color:var(--ink)}
.mg-table tr:last-child td{border-bottom:0}
.mg-table tbody tr:hover td{background:var(--surface)}
.mg-table tr.is-selected td{background:var(--brand-soft)}
.mg-table .mg-num{text-align:right;white-space:nowrap;font-family:var(--font-mono);font-size:13px}
.mg-table .mg-code{font-family:var(--font-mono);font-size:13px;color:var(--ink-secondary)}
.mg-table a{color:var(--link);text-decoration:none;font-weight:500}
.mg-table a:hover{text-decoration:underline}

/* Field */
.mg-field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.mg-field__label{font:500 14px/20px var(--font-sans);color:var(--ink)}
.mg-field__label em{font-style:normal;color:var(--danger)}
.mg-field__input{min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-md);
 border:var(--border-control) solid var(--line-strong);background:var(--surface-raised);color:var(--ink);
 font:400 14px/20px var(--font-sans);width:100%}
.mg-field__input::placeholder{color:var(--ink-muted)}
.mg-field__input:hover{border-color:var(--ink)}
.mg-field__input:focus{border-color:var(--brand);outline:var(--border-focus) solid var(--focus);outline-offset:0}
.mg-field--error .mg-field__input{border-color:var(--danger);background:var(--danger-soft)}
.mg-field__input[disabled]{background:var(--surface-sunken);border-color:var(--line);color:var(--ink-muted);cursor:not-allowed}
.mg-field__hint{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.mg-field__error{font:400 13px/18px var(--font-sans);color:var(--danger)}
textarea.mg-field__input{min-height:80px;padding:var(--space-2) var(--space-3);resize:vertical}

/* Tabs */
.mg-tabs{display:inline-flex;gap:var(--space-1);padding:var(--space-1);background:var(--surface-sunken);border-radius:var(--radius-full)}
.mg-tab{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px var(--space-4);
 border:0;border-radius:var(--radius-full);background:none;cursor:pointer;
 font:500 14px/20px var(--font-sans);color:var(--ink-secondary);transition:background-color .15s,color .15s}
.mg-tab:hover{color:var(--ink)}
.mg-tab[aria-selected="true"]{color:var(--brand);background:var(--surface-raised);box-shadow:var(--shadow-sm);font-weight:600}
.mg-tab__count{font:500 12px/16px var(--font-mono);color:var(--ink-muted)}
.mg-tab[aria-selected="true"] .mg-tab__count{color:var(--brand)}

/* Alert */
.mg-alert{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);
 border:var(--border-hairline) solid;border-radius:var(--radius-lg);font:400 14px/20px var(--font-sans)}
.mg-alert__bar{width:4px;border-radius:var(--radius-full);flex:none;background:currentColor;opacity:.8}
.mg-alert__body{flex:1 1 auto;min-width:0}
.mg-alert__title{margin:0;font-weight:600}
.mg-alert__text{margin:2px 0 0}
.mg-alert__action{flex:none;align-self:center}
.mg-alert--info{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand)}
.mg-alert--success{background:var(--success-soft);border-color:var(--success-soft);color:var(--success)}
.mg-alert--warning{background:var(--warning-soft);border-color:var(--warning-soft);color:var(--warning)}
.mg-alert--danger{background:var(--danger-soft);border-color:var(--danger-soft);color:var(--danger)}

/* Stat */
.mg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--border-hairline);
 background:var(--line);border:var(--border-hairline) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.mg-stat{background:var(--surface-raised);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-1)}
.mg-stat__label{font:600 12px/16px var(--font-sans);color:var(--ink-muted)}
.mg-stat__value{font:600 28px/32px var(--font-mono);letter-spacing:-.02em;color:var(--ink);word-spacing:-.25em}
.mg-stat__delta{font:600 13px/18px var(--font-mono)}
.mg-stat__delta--up{color:var(--success)}.mg-stat__delta--down{color:var(--danger)}.mg-stat__delta--flat{color:var(--ink-muted);font-weight:400}
.mg-stat__note{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.mg-stat--seal .mg-stat__value{color:var(--seal)}

/* TopBar */
.mg-topbar{display:flex;align-items:center;gap:var(--space-5);height:56px;padding:0 var(--space-5);
 background:var(--surface-header);color:var(--on-header);font-family:var(--font-sans)}
.mg-topbar__brand{display:inline-flex;align-items:center;gap:var(--space-2);font:600 18px/24px var(--font-serif);color:var(--on-header);text-decoration:none;
 letter-spacing:-.01em;white-space:nowrap}
.mg-topbar__brand small{font:400 12px/16px var(--font-sans);color:var(--on-header-muted);margin-left:var(--space-2)}
.mg-topbar__nav{display:flex;gap:var(--space-1);flex:1 1 auto}
.mg-topbar__link{padding:6px var(--space-4);border-radius:var(--radius-full);text-decoration:none;
 font:500 14px/20px var(--font-sans);color:var(--on-header-muted)}
.mg-topbar__link:hover{color:var(--on-header);background:rgba(255,255,255,.08)}
.mg-topbar__link[aria-current="page"]{color:var(--on-header);background:rgba(255,255,255,.12)}
.mg-topbar__user{display:flex;align-items:center;gap:var(--space-2);font:400 13px/18px var(--font-sans);color:var(--on-header-muted)}
.mg-avatar{width:28px;height:28px;border-radius:var(--radius-full);background:var(--seal);color:var(--on-brand);
 display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--font-sans);flex:none}
.mg-topbar .mg-avatar{color:var(--surface-header)}

/* PageHeader */
.mg-pagehead{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6) 0 var(--space-5)}
.mg-crumbs{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none;
 font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.mg-crumbs a{color:var(--ink-secondary);text-decoration:none}
.mg-crumbs a:hover{color:var(--brand);text-decoration:underline}
.mg-crumbs li+li::before{content:"›";margin-right:var(--space-1);color:var(--line-strong)}
.mg-pagehead__row{display:flex;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap}
.mg-pagehead__title{margin:0;font:600 30px/36px var(--font-serif);letter-spacing:-.01em;color:var(--ink);flex:1 1 auto;min-width:0}
.mg-pagehead__sub{margin:0;font:400 15px/22px var(--font-sans);color:var(--ink-secondary);max-width:64ch}
.mg-pagehead__actions{display:flex;gap:var(--space-2);flex:none}

/* utilitários de layout usados nos previews */
.mg-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.mg-stack{display:flex;flex-direction:column;gap:var(--space-3)}

/* Select */
.mg-select{position:relative;display:block}
.mg-select select{appearance:none;-webkit-appearance:none;padding-right:var(--space-7);cursor:pointer}
.mg-select::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;
 border:solid var(--ink-secondary);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}

/* Choice: checkbox, radio, switch */
.mg-choice{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;font:400 14px/20px var(--font-sans);color:var(--ink);min-height:24px}
.mg-choice input{position:absolute;opacity:0;width:1px;height:1px}
.mg-choice__box{flex:none;width:20px;height:20px;margin-top:0;border:var(--border-control) solid var(--line-strong);
 border-radius:var(--radius-sm);background:var(--surface-raised);position:relative;transition:background-color .12s,border-color .12s}
.mg-choice--radio .mg-choice__box{border-radius:var(--radius-full)}
.mg-choice:hover .mg-choice__box{border-color:var(--ink)}
.mg-choice input:checked+.mg-choice__box{background:var(--brand);border-color:var(--brand)}
.mg-choice input:checked+.mg-choice__box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
 border:solid var(--on-brand);border-width:0 2px 2px 0;transform:rotate(45deg)}
.mg-choice--radio input:checked+.mg-choice__box::after{left:5px;top:5px;width:6px;height:6px;border:0;border:0;border-radius:var(--radius-full);background:var(--on-brand)}
.mg-choice input:focus-visible+.mg-choice__box{outline:var(--border-focus) solid var(--focus);outline-offset:2px}
.mg-choice--switch .mg-choice__box{width:36px;height:20px;border-width:1px;border-radius:var(--radius-full);background:var(--line-strong);border-color:var(--line-strong)}
.mg-choice--switch .mg-choice__box::before{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:var(--radius-full);background:var(--surface-raised);transition:left .15s}
.mg-choice--switch input:checked+.mg-choice__box{background:var(--success);border-color:var(--success)}
.mg-choice--switch input:checked+.mg-choice__box::before{left:16px}
.mg-choice--switch input:checked+.mg-choice__box::after{display:none}
.mg-choice__text{display:flex;flex-direction:column}
.mg-choice__hint{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.mg-choice[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.mg-choices{display:flex;flex-direction:column;gap:var(--space-2)}
.mg-choices--row{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}

/* Menu */
.mg-menu{display:inline-flex;flex-direction:column;min-width:200px;padding:var(--space-2);background:var(--surface-raised);
 border:var(--border-hairline) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.mg-menu__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:0;background:none;
 border-radius:var(--radius-md);cursor:pointer;text-align:left;font:400 14px/20px var(--font-sans);color:var(--ink);text-decoration:none}
.mg-menu__item:hover{background:var(--surface-sunken)}
.mg-menu__item--danger{color:var(--danger)}
.mg-menu__item--danger:hover{background:var(--danger-soft)}
.mg-menu__item kbd{margin-left:auto;font:500 12px/16px var(--font-mono);color:var(--ink-muted)}
.mg-menu__sep{height:1px;margin:var(--space-2) var(--space-1);background:var(--line)}
.mg-menu__head{padding:var(--space-1) var(--space-3) var(--space-2);font:600 12px/16px var(--font-sans);color:var(--ink-muted)}

/* Dialog */
.mg-dialog-backdrop{position:fixed;inset:0;background:rgba(22,27,38,.45);display:flex;align-items:center;justify-content:center;padding:var(--space-5)}
.mg-dialog{width:min(440px,100%);background:var(--surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--space-5) var(--space-6)}
.mg-dialog__title{margin:0 0 var(--space-2);font:600 22px/28px var(--font-serif);color:var(--ink)}
.mg-dialog__body{font:400 15px/22px var(--font-sans);color:var(--ink-secondary)}
.mg-dialog__body>:first-child{margin-top:0}.mg-dialog__body>:last-child{margin-bottom:0}
.mg-dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-5)}

/* Disclosure (o «?») */
.mg-disc{display:block}
.mg-disc>summary{list-style:none;display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}
.mg-disc>summary::-webkit-details-marker{display:none}
.mg-disc__q{flex:none;width:20px;height:20px;border-radius:var(--radius-full);border:var(--border-hairline) solid var(--line-strong);
 color:var(--ink-muted);font:600 12px/18px var(--font-sans);text-align:center}
.mg-disc>summary:hover .mg-disc__q{border-color:var(--brand);color:var(--brand)}
.mg-disc[open]>summary .mg-disc__q{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.mg-disc__body{margin:var(--space-2) 0 0;padding:var(--space-3) var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-md);
 font:400 14px/20px var(--font-sans);color:var(--ink-secondary);max-width:72ch}

/* EmptyState */
.mg-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-7) var(--space-5);text-align:center;
 background:var(--surface-raised);border:var(--border-hairline) dashed var(--line-strong);border-radius:var(--radius-lg)}
.mg-empty__title{margin:0;font:600 17px/24px var(--font-serif);color:var(--ink)}
.mg-empty__text{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink-muted);max-width:44ch}
.mg-empty__action{margin-top:var(--space-2)}

/* Toast */
.mg-toast{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
 background:var(--ink);color:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);font:500 14px/20px var(--font-sans)}
.mg-toast .mg-btn--subtle{color:var(--surface);text-decoration:underline;text-underline-offset:3px}
.mg-toast .mg-btn--subtle:hover{background:rgba(255,255,255,.12)}
.mg-toast__dot{width:8px;height:8px;border-radius:var(--radius-full);flex:none}
.mg-toast--success .mg-toast__dot{background:var(--success)}
.mg-toast--danger .mg-toast__dot{background:var(--danger)}
.mg-toast--info .mg-toast__dot{background:var(--brand)}

/* Pagination */
.mg-pager{display:flex;align-items:center;gap:var(--space-4);font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.mg-pager__pages{display:flex;gap:var(--space-1)}
.mg-pager__pg{min-width:28px;height:28px;padding:0 var(--space-2);border:0;background:none;border-radius:var(--radius-full);
 font:500 13px/28px var(--font-mono);color:var(--ink-secondary);cursor:pointer;text-align:center}
.mg-pager__pg:hover{background:var(--surface-sunken);color:var(--ink)}
.mg-pager__pg[aria-current="page"]{background:var(--brand);color:var(--on-brand)}
.mg-pager__gap{line-height:28px;color:var(--ink-muted)}

/* SectionNav (menu de secções, Configurações) */
.mg-secnav{display:flex;flex-direction:column;gap:2px;min-width:200px}
.mg-secnav a{display:flex;align-items:center;gap:var(--space-2);padding:6px var(--space-3);border-radius:var(--radius-full);
 font:500 14px/20px var(--font-sans);color:var(--ink-secondary);text-decoration:none}
.mg-secnav a:hover{background:var(--surface-sunken);color:var(--ink)}
.mg-secnav a[aria-current="page"]{background:var(--brand-soft);color:var(--brand);font-weight:600}
.mg-secnav__sep{height:1px;margin:var(--space-2) var(--space-3);background:var(--line)}
.mg-secnav__note{padding:0 var(--space-3);font:400 12px/16px var(--font-sans);color:var(--ink-muted)}

/* Stepper (as ranhuras de uma proposta, ao estilo do step-list do Ágora) */
.mg-stepper{display:flex;gap:0;margin:0;padding:0;list-style:none;counter-reset:mg-step}
.mg-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);position:relative;padding:0 var(--space-2) 0 0}
.mg-step__bar{height:4px;border-radius:var(--radius-full);background:var(--line)}
.mg-step--done .mg-step__bar{background:var(--success)}
.mg-step--current .mg-step__bar{background:var(--brand)}
.mg-step--danger .mg-step__bar{background:var(--danger)}
.mg-step__label{font:600 13px/18px var(--font-sans);color:var(--ink-muted);display:flex;align-items:center;gap:var(--space-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-step__label::before{counter-increment:mg-step;content:counter(mg-step);width:20px;height:20px;border-radius:var(--radius-full);
 border:var(--border-control) solid var(--line-strong);color:var(--ink-muted);font:600 11px/16px var(--font-mono);text-align:center;flex:none;background:var(--surface-raised)}
.mg-step--done .mg-step__label{color:var(--success)}
.mg-step--done .mg-step__label::before{content:"✓";background:var(--success);border-color:var(--success);color:var(--surface-raised)}
.mg-step--current .mg-step__label{color:var(--brand)}
.mg-step--current .mg-step__label::before{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.mg-step--danger .mg-step__label{color:var(--danger)}
.mg-step--danger .mg-step__label::before{content:"×";background:var(--danger);border-color:var(--danger);color:var(--surface-raised)}
.mg-step__note{font:400 12px/16px var(--font-sans);color:var(--ink-muted);padding-left:28px}

/* Logo */
.mg-logo{display:inline-flex;align-items:center;font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;line-height:1;color:var(--ink);white-space:nowrap}
.mg-logo__eye{display:block;flex:none;margin-right:.25em;color:var(--brand)}
.mg-logo__mira{color:var(--ink);margin-right:.22em}
.mg-logo__gov{color:var(--brand)}
.mg-logo__verde{fill:#006432}
.mg-logo__verm{fill:#e61e1e}
.mg-logo--inverse,.mg-logo--inverse .mg-logo__mira,.mg-logo--inverse .mg-logo__gov,.mg-logo--inverse .mg-logo__eye{color:var(--on-header)}
.mg-logo--mark{font-size:0}
.mg-logo--mark .mg-logo__eye{margin-right:0}

/* Icon */
.mg-icon{display:inline-block;vertical-align:-.2em;flex:none}
.mg-btn .mg-icon{margin:0 -2px}
.mg-menu__item .mg-icon{color:var(--ink-muted)}
.mg-btn--icon{padding:0;width:40px;justify-content:center}
.mg-btn--sm.mg-btn--icon{width:28px}

/* Tema de alto contraste: fios em tudo o que era tom ou sombra, foco a 3px, sem relevo */
[data-theme="contraste"] .mg-card,[data-theme="contraste"] .mg-table,[data-theme="contraste"] .mg-stats,[data-theme="contraste"] .mg-menu,[data-theme="contraste"] .mg-dialog,[data-theme="contraste"] .mg-toast{box-shadow:none;border:var(--border-hairline) solid var(--line)}
[data-theme="contraste"] .mg-tabs{border:var(--border-hairline) solid var(--line);background:var(--surface-raised)}
[data-theme="contraste"] .mg-tab[aria-selected="true"]{box-shadow:none;outline:var(--border-control) solid var(--brand);outline-offset:-2px;background:var(--brand-soft)}
[data-theme="contraste"] .mg-tag{border:var(--border-hairline) solid currentColor}
[data-theme="contraste"] .mg-alert{border-color:currentColor}
[data-theme="contraste"] .mg-btn--subtle{text-decoration:underline;text-underline-offset:3px}
[data-theme="contraste"] .mg-btn--primary{border-color:var(--brand-hover)}
[data-theme="contraste"] .mg :focus-visible,[data-theme="contraste"] .mg-field__input:focus{outline-width:3px}
[data-theme="contraste"] .mg-topbar__link[aria-current="page"]{background:var(--on-header);color:var(--surface-header)}
[data-theme="contraste"] .mg-topbar__link:hover{background:rgba(255,255,255,.2)}
[data-theme="contraste"] .mg-secnav a[aria-current="page"]{outline:var(--border-control) solid var(--brand);outline-offset:-2px}
[data-theme="contraste"] .mg-empty{border-color:var(--line-strong)}
[data-theme="contraste"] .mg-stat__delta--flat,[data-theme="contraste"] .mg-crumbs a{color:var(--ink-secondary)}
[data-theme="contraste"] .mg-choice--switch .mg-choice__box{border-color:var(--line-strong);background:var(--surface-raised)}
[data-theme="contraste"] .mg-choice--switch .mg-choice__box::before{background:var(--line-strong)}
[data-theme="contraste"] .mg-choice--switch input:checked+.mg-choice__box::before{background:var(--surface-raised)}
/* miragov-radar.css: o que o RADAR precisa e o sistema de desenho ainda
   não tem. Entra a seguir aos componentes, e é o único sítio onde se
   escreve CSS de componente que não venha do design system — assim o
   `miragov-componentes.css` fica igual ao que o sistema publica, e
   vê-se de relance o que é nosso.

   Fase 2 da migração, 21/09/2026. */

/* As VISTAS de um item da barra (Calendário dentro de Concursos,
   Entidades dentro de Mercado). O sistema tem `.mg-topbar__link` e mais
   nada: uma vista precisa de se ler como filha do item, senão a barra
   passa a ter cinco itens de primeiro nível, que é exactamente o que a
   navegação de 16/09/2026 veio desfazer. */
.mg-topbar__link--sub{font-size:13px;padding-left:var(--space-3);
 padding-right:var(--space-3);opacity:.92}
.mg-topbar__link--sub::before{content:'';width:1px;height:14px;
 margin-right:var(--space-3);background:currentColor;opacity:.35;
 display:inline-block;vertical-align:-2px}

/* A barra dobra em ecrã estreito, e o `--barra-h` é medido em JS: o
   `height` fixo do `.mg-topbar` impedia-a de dobrar e cortava os itens
   a 375px. Passa a mínimo. */
.mg-topbar{height:auto;min-height:56px;flex-wrap:wrap;gap:var(--space-3)
 var(--space-5);padding-top:var(--space-2);padding-bottom:var(--space-2);
 position:sticky;top:0;z-index:20}

/* A navegação ROLA dentro da barra em ecrã estreito (varredura de
   25/09/2026): com os cinco itens do Mira Gov, a 390px a `nav` esticava
   até 522px e levava a página inteira a rolar de lado. O README do
   `TopBar` diz o mesmo: «abaixo de 900px os itens rolam dentro dela».
   O `min-width:0` deixa-a encolher como item de flex. */
.mg-topbar__nav{min-width:0}
@media (max-width:900px){
 .mg-topbar__nav{order:10;flex:1 1 100%;overflow-x:auto;flex-wrap:nowrap;
  scrollbar-width:none}
 .mg-topbar__nav::-webkit-scrollbar{display:none}
 .mg-topbar__nav .mg-topbar__link{flex:none;white-space:nowrap}}

/* O mesmo para o que vinha a seguir, medido na mesma varredura: nada
   destes pode empurrar a página para o lado.
   - as abas (as cinco das Entidades chegavam a 640px a 390) rolam;
   - o paginador dobra (a caixa «ir para» ficava fora, a 433px);
   - a tabela das nossas propostas na entidade rola no seu cartão (927px);
   - as colunas de um gráfico podem encolher (no Mercado, a coluna da
     direita levava a página a 1 707px, a 1280). */
.mg-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.mg-tabs::-webkit-scrollbar{display:none}
.mg-tabs>*{flex:none}
.mg-pager{flex-wrap:wrap}
.ent-nossas{overflow-x:auto}
.barras .col{min-width:0}

/* O `display:flex` do `.mg-field` ganha ao `[hidden]` do browser: a
   caixa da escada mostrava o «Lugar» a quem só lhe faltava o preço. */
/* As iniciais da barra: o sistema pinta-as com a cor do cabeçalho
   (#004682) sobre o selo (#7a5200) -- 1,38:1, ilegíveis (axe, varredura
   de 25/09/2026). O `--on-brand` serve os três temas: branco sobre o
   selo no claro (6,9:1) e no contraste, escuro sobre o selo amarelo no
   escuro. */
.mg-topbar .mg-avatar{color:var(--on-brand)}
/* Um aviso escrito sem o `.mg-alert__body` (são uns dez, de antes do
   sistema) levava cada pedaço de texto e cada ligação para a sua coluna
   do flex: «Alterado pelo anúncio | 21717/2026 | , publicado a…» em
   três colunas (varredura de 25/09/2026). Sem o corpo, o aviso é texto
   corrido. */
.mg-alert:not(:has(> .mg-alert__body)){display:block}
/* Uma ligação no meio de uma frase distingue-se por mais do que a cor
   (axe `link-in-text-block`, varredura de 25/09/2026): quem não vê bem
   a diferença entre o azul e o cinzento lia a frase sem saber onde
   carregar. Sublinhadas nas notas e nas frases corridas. */
.nota a,.ficha-nota a,.em-falta-frase a,.mg-pagehead__sub a,.mg-alert a,
.mg-card__meta a,
.entrar-nota a{text-decoration:underline;text-underline-offset:2px}
.mg-field[hidden]{display:none}
dialog.mg-dialog .mg-field{margin-bottom:var(--space-4)}

/* O menu da conta pendura-se da barra: é `.mg-menu`, mas posicionado. */
.mg-topbar .sou{position:relative;flex:none}
.mg-topbar .sou>summary{list-style:none;cursor:pointer;display:flex;
 align-items:center;gap:var(--space-2);color:var(--on-header-muted);
 font:400 13px/18px var(--font-sans)}
.mg-topbar .sou>summary::-webkit-details-marker{display:none}
.mg-topbar .sou[open]>summary{color:var(--on-header)}
.mg-topbar .sou-menu{position:absolute;right:0;top:100%;margin-top:6px;
 z-index:30}

/* Os dois ecrãs fora do molde (entrar, erro): o cartão ao centro. */
.entrar-fundo{background:var(--surface)}
main.entrar{max-width:420px;margin:12vh auto;padding:var(--space-6);
 background:var(--surface-raised);border:1px solid var(--line);
 border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
 display:flex;flex-direction:column;gap:var(--space-4)}
main.entrar h1{margin:0;font:600 22px/28px var(--font-serif);color:var(--ink)}
main.entrar form{display:flex;flex-direction:column;gap:var(--space-4)}
main.entrar .mg-empty{border:0;padding:0;background:none;align-items:stretch;
 text-align:left}

/* A LISTA DOS CONCURSOS como tabela (22/09/2026, `EcraConcursos` do
   sistema de desenho). As larguras são do domínio: o objecto leva o que
   sobra, e as outras sete colunas têm o tamanho do que lá cabe. */
.lista.mg-table table{table-layout:auto}
.lista .col-obj{min-width:280px}
.lista .col-obj .item-titulo{display:block;font:600 14px/1.35 var(--font-sans);
 color:var(--ink);text-decoration:none}
.lista .col-obj .item-titulo:hover{color:var(--link)}
.lista .col-obj small{display:block;margin-top:2px;
 font:400 13px/18px var(--font-sans);color:var(--ink-muted)}

.lista .col-plat,.lista .col-falta{white-space:nowrap}
/* O flex vive num <span> por dentro, e nao no <td>: um `td` com
   `display:flex` deixa de ser celula, perde a altura da linha e o fio
   de baixo ficava a meio da linha, por baixo da etiqueta. */
.lista .col-falta .falta{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center}
/* O cabecalho de uma coluna de numeros alinha a direita, mas e rotulo:
   em sans, como os outros. So as celulas vao em mono. */
.mg-table th.mg-num{font-family:var(--font-sans);font-size:12px}

/* Os filtros do `EcraConcursos`: uma grelha de uma linha em
   `surface-sunken`, com o `Field` do sistema. O `#filtros-lista`
   ganha as regras antigas do `.filtros`, que ainda servem as outras
   listas. */
#filtros-lista,#filtros-mercado{display:grid;align-items:end;
 grid-template-columns:2fr 1.5fr 1.2fr 1fr 1fr auto;gap:var(--space-3);
 padding:var(--space-4) var(--space-5);background:var(--surface-sunken);
 border:var(--border-hairline) solid var(--line);border-radius:var(--radius-lg);
 box-shadow:none}
#filtros-mercado .mg-field__label,#filtros-lista .mg-field__label{font:500 13px/18px var(--font-sans);color:var(--ink)}
#filtros-mercado .mg-field__input,#filtros-lista .mg-field__input{min-width:0;width:100%;box-sizing:border-box;
 min-height:40px;padding:0 var(--space-3);border:var(--border-control) solid var(--line-strong);
 border-radius:var(--radius-md);background:var(--surface-raised);
 font:400 14px/20px var(--font-sans);color:var(--ink)}
#filtros-mercado .mg-field__input:focus,#filtros-lista .mg-field__input:focus{border-color:var(--brand);
 outline:2px solid var(--brand);outline-offset:0;box-shadow:0 0 0 4px var(--brand-soft)}
#filtros-mercado .campo-data:invalid,#filtros-lista .campo-data:invalid{border-color:var(--danger)}
#filtros-mercado .f-accoes,#filtros-lista .f-accoes{display:flex;gap:var(--space-2)}
@media (max-width:900px){
 #filtros-lista{grid-template-columns:1fr 1fr}
 #filtros-lista .f-q{grid-column:1/-1}}

/* O resumo por cima da tabela: a contagem com os numeros a negro, o
   interesse numa etiqueta, e a direita as teclas e o CSV. */
.linha-conta.resumo{display:flex;flex-wrap:wrap;align-items:center;
 gap:var(--space-1) var(--space-4);margin:var(--space-3) 0 var(--space-4);
 font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.linha-conta.resumo b{font:600 14px/20px var(--font-mono);color:var(--ink)}
.linha-conta.resumo .cpv-activo{display:inline-flex;gap:var(--space-2);align-items:center;
 margin:0;padding:2px var(--space-3);border:0;border-radius:var(--radius-full);
 background:var(--brand-soft);color:var(--brand);font:500 12px/18px var(--font-sans)}
.linha-conta.resumo .cpv-activo b{font:600 12px/18px var(--font-mono);color:var(--brand)}
.linha-conta.resumo .teclas{margin-left:auto}
.linha-conta.resumo>a{margin-left:0;color:var(--link)}
.lista .col-acc{width:1%;white-space:nowrap}
.lista .col-acc form{display:inline-flex;margin:0 0 0 4px}
.lista .col-acc .ranhura{display:inline-flex;gap:4px;align-items:center}
@media (max-width:1100px){
 /* A tabela rola dentro de si, como manda a regra do ecrã estreito --
    não é a página que rola para o lado. */
 .lista.mg-table{overflow-x:auto}
 .lista.mg-table table{min-width:900px}}
/* A linha com o foco do teclado (j/k). */
.lista tbody tr.foco td{background:var(--brand-soft)}

/* O CABECALHO DA PAGINA como o `PageHeader` do sistema: o titulo a
   esquerda e a accao ("Verificar agora") a direita, na MESMA linha. O
   molde poe a accao na linha das migalhas; o `display:contents` solta
   os dois filhos da `.migalhas` para a grelha do `.topo`, sem mexer no
   molde. E a migalha de uma pagina de primeiro nivel -- so o nome dela,
   por cima do titulo com o mesmo nome -- nao se desenha. */
.topo{display:grid;grid-template-columns:minmax(0,1fr) auto;
 column-gap:var(--space-4);align-items:center}
.topo>.migalhas{display:contents}
.topo>.migalhas>.b{grid-column:1/-1;grid-row:1}
.topo>.migalhas>.b:has(>em:only-child){display:none}
.topo>.migalhas>.accoes-topo{grid-column:2;grid-row:2;margin-left:0}
.topo>details.porque,.topo>h1{grid-column:1;grid-row:2;min-width:0}
.topo>.mg-tabs,.topo>.vazio-topo{grid-column:1/-1;grid-row:3}

/* Os botoes dos filtros com a altura dos campos, e nao da grelha. */
#filtros-lista .f-accoes{align-self:end}
#filtros-lista .f-accoes .mg-btn{height:40px;padding:0 var(--space-4);
 display:inline-flex;align-items:center}

/* Densidade da linha (36px no sistema): o objecto em duas linhas no
   maximo, a entidade numa. O `title` do link continua a ter o texto
   inteiro, e a ficha tambem. */
.lista .col-obj .item-titulo{display:-webkit-box;-webkit-line-clamp:2;
 -webkit-box-orient:vertical;overflow:hidden}
.lista .col-obj small{max-width:560px;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
/* A coluna do objecto tem tecto: com o titulo cortado a duas linhas a
   celula alargava ate caber tudo numa, e empurrava as accoes para fora
   do ecra. */
.lista .col-obj .item-titulo,.lista .col-obj small{max-width:460px}

/* As onze abas da escada, em ecra estreito, rolam na horizontal dentro
   da pilula em vez de dobrarem numa mancha de quatro linhas. */
@media (max-width:900px){
 .mg-tabs.abas-escada{display:flex;flex-wrap:nowrap;overflow-x:auto;
  max-width:100%;border-radius:var(--radius-lg);scrollbar-width:none}
 .mg-tabs.abas-escada .mg-tab{flex:none}}
/* As abas dos Concursos vivem no corpo desde 24/09/2026 (o
   `EcraConcursos`): o segmento, e por baixo os filtros. */
.corpo>.mg-tabs{margin-bottom:var(--space-4)}
/* O padding de celula do sistema e `space-3` na horizontal (README,
   «Espaço, cantos, fios»); a folha dos componentes traz `space-4`, e na
   lista, com sete colunas, eram 112px de ar a empurrar as accoes. */
.lista.mg-table th,.lista.mg-table td{padding-left:var(--space-3);
 padding-right:var(--space-3)}
/* A tabela cabe sempre na largura do ecra (22/09/2026, pedido dele:
   no monitor dele os botoes ficavam cortados). `table-layout:fixed`
   com larguras por coluna: o objecto leva o que sobra e encolhe, as
   accoes tem sempre o seu lugar. Abaixo de 1100px a tabela rola dentro
   de si (regra do ecra estreito, em cima). */
.lista.mg-table table{table-layout:fixed;width:100%}
.lista.mg-table th:nth-child(1){width:124px}
.lista.mg-table th:nth-child(3){width:96px}
.lista.mg-table th:nth-child(4){width:128px}
.lista.mg-table th:nth-child(5){width:96px}
.lista.mg-table th:nth-child(6){width:128px}
.lista.mg-table th:nth-child(7){width:196px}
.lista .col-obj .item-titulo,.lista .col-obj small{max-width:100%}
.lista .col-acc{white-space:nowrap;text-align:right}
.lista .mg-code a{display:block;overflow:hidden;text-overflow:ellipsis}

/* O HOJE (22/09/2026, `EcraHoje`): os quatro indicadores por cima da
   fita, cada um uma ligacao para a lista que o produz. */
.hj-stats{margin:0 0 var(--space-5)}
.hj-stats a.mg-stat{text-decoration:none;color:inherit}
.hj-stats a.mg-stat:hover{background:var(--surface)}
.hj-stats .mg-stat.mau .mg-stat__note{color:var(--danger);font-weight:600}
/* O «mais N» de um balde comprido. */
details.hj-mais>summary{list-style:none;cursor:pointer;padding:6px var(--space-4);
 font:500 13px/18px var(--font-sans);color:var(--link)}
details.hj-mais>summary::-webkit-details-marker{display:none}
details.hj-mais[open]>summary{color:var(--ink-muted)}
/* A hora do «O que mudou» nao passa por cima do texto. */
.feed .l{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--space-2)}
/* A coluna da direita do Hoje: os cartoes com o padding do `Card`, o
   titulo como `h3`, e as ligacoes do feed no tamanho do texto. */
/* Os cartoes do Hoje sao `cartao()` desde 24/09/2026: a cabeca e o
   corpo trazem o padding do `Card`. */
.lado{display:flex;flex-direction:column;gap:var(--space-4)}
.mg-card__meta .mau{color:var(--danger)}
.feed .l a{font:500 14px/20px var(--font-sans)}
.feed .l .nota{font-size:12px}

/* ---- A BASE COMUM, para todos os ecras (22/09/2026) ----------------
   Os ecras que ainda nao passaram ao sistema desenhavam com o CSS
   antigo, e cada um tinha o seu campo, o seu botao e o seu cabecalho
   de tabela. Isto nao muda estrutura nenhuma: da-lhes o aspecto do
   `Field`, do `Button` e do `DataTable`. O `main.mg` e as negacoes
   dao-lhe o peso para ganhar ao CSS antigo sem `!important`. */

/* Os cabecalhos de tabela sao rotulos: em sans, mesmo nas colunas de
   numeros (so as celulas vao em mono). */
main.mg table th,main.mg table th.p,main.mg table th.n,main.mg table th.d{
 font-family:var(--font-sans);font-size:12px;letter-spacing:0;
 text-transform:none;font-weight:600;color:var(--ink-muted)}

/* Os campos: o `Field` (borda de 2px, cantos de 10px), um pouco mais
   baixo que os 40px para caber nas linhas das tabelas e das fichas. */
main.mg input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]),
main.mg select,main.mg textarea{
 box-sizing:border-box;min-height:36px;padding:0 var(--space-3);
 border:var(--border-control) solid var(--line-strong);border-radius:var(--radius-md);
 background:var(--surface-raised);color:var(--ink);
 font:400 14px/20px var(--font-sans);max-width:100%}
main.mg textarea{padding:var(--space-2) var(--space-3)}
main.mg input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
main.mg select:focus,main.mg textarea:focus{border-color:var(--brand);
 outline:2px solid var(--brand);outline-offset:0;box-shadow:0 0 0 4px var(--brand-soft)}
main.mg input::placeholder,main.mg textarea::placeholder{color:var(--ink-muted)}
/* Dentro de uma tabela (o selector da ranhura) fica mais baixo. */
main.mg td select,main.mg td input:not([type=checkbox]):not([type=radio]):not([type=hidden]){
 min-height:30px;border-width:1px;font-size:13px}

/* Os botoes sem classe do sistema: o `secondary` (contorno azul). */
main.mg button:not([class]),main.mg input[type=submit]:not([class]){
 display:inline-flex;align-items:center;justify-content:center;
 min-height:36px;padding:0 var(--space-4);border:var(--border-control) solid var(--brand);
 border-radius:var(--radius-md);background:var(--surface-raised);color:var(--brand);
 font:600 14px/20px var(--font-sans);cursor:pointer}
main.mg button:not([class]):hover{background:var(--brand-soft)}

/* A procura das listas de propostas (`form.pf`): numa linha. */
main.mg form.pf{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
main.mg form.pf input[type=search]{min-width:320px;flex:0 1 420px}
/* A etiqueta nova e uma pilula tracejada, nao um campo de formulario. */
main.mg .etq-form input[name=nome]{min-height:28px;width:120px;padding:0 var(--space-3);
 border:1px dashed var(--line-strong);border-radius:var(--radius-full);font-size:13px}
/* A procura das Entidades: rotulo por cima, campo e botao numa linha,
   encostados a esquerda como os filtros das outras listas. */
main.mg form.filtros[action='/entidade/procurar']{display:flex;align-items:flex-end;
 justify-content:flex-start;gap:var(--space-2);flex-wrap:wrap}
main.mg form.filtros[action='/entidade/procurar'] label{display:flex;flex-direction:column;
 gap:var(--space-1);font:500 13px/18px var(--font-sans);color:var(--ink)}
main.mg form.filtros[action='/entidade/procurar'] input{min-width:360px}

/* A FICHA (24/09/2026, o `EcraFicha` do Mira Gov). O cabecalho e o
   `PageHeader` sobre o fundo, a escada o `Stepper`, e o resto o que o
   preview do sistema escreve para a pagina de exemplo -- o indice em
   pilulas, os factos em grelha de dois pares, as listas com a medida a
   direita e o prazo grande. Duas colunas (`minmax(300px,360px)` a
   direita); abaixo de 1100px volta a uma so, com o anuncio primeiro. */
.corpo>.mg-pagehead{padding-top:var(--space-2)}
.ficha-escada{margin:var(--space-1) 0 var(--space-5)}
.ficha-indice ul{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;
 list-style:none;font:500 13px/18px var(--font-sans)}
.ficha-indice a{color:var(--ink-secondary);text-decoration:none;padding:4px 12px;
 border-radius:var(--radius-full);background:var(--surface-sunken);display:inline-block}
.ficha-indice a:hover{color:var(--link)}
.ficha-duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);
 gap:var(--space-5);align-items:start;margin-top:var(--space-5)}
.ficha-principal,.ficha-lado,#mercado{display:flex;flex-direction:column;
 gap:var(--space-4);min-width:0}
.ficha-duas .mg-card{scroll-margin-top:calc(var(--barra-h,56px) + 12px)}
.mg-card__cab{flex:1 1 auto;min-width:0}
.mg-card__head .porque-bloco>summary{display:flex;align-items:center;gap:var(--space-2)}
.ficha-factos{display:grid;grid-template-columns:150px minmax(0,1fr) 150px minmax(0,1fr);
 gap:var(--space-2) var(--space-4);margin:0}
.ficha-factos dt{font:600 12px/16px var(--font-sans);color:var(--ink-muted)}
.ficha-factos dd{margin:0 0 var(--space-2);font:400 15px/22px var(--font-sans);
 min-width:0;overflow-wrap:anywhere}
.ficha-factos dd.n{font:400 14px/22px var(--font-mono)}
/* um valor com degraus (perfis, enumeracoes: `desenha_valor()`) nao cabe
   numa das quatro colunas: ocupa a linha inteira por baixo do rotulo */
.ficha-factos dd:has(.perfis,.pontos,.numerados){grid-column:2/-1}
.ficha-factos dd a{color:var(--link);font-family:var(--font-sans);font-size:13px}
.mg-card__head .porque-bloco .mg-card__title{flex:0 1 auto}
.ficha-seccao{margin-top:var(--space-4)}
.ficha-seccao>summary{cursor:pointer;display:flex;gap:var(--space-3);align-items:baseline;
 font:600 14px/20px var(--font-sans);color:var(--ink);padding:var(--space-2) 0;
 border-top:var(--border-hairline) solid var(--line)}
.ficha-seccao>summary .sh{margin-left:auto;font-weight:400;color:var(--ink-muted);
 font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ficha-seccao>.ficha-factos{margin-top:var(--space-2)}
.ficha-lista{margin:0;padding:0;list-style:none}
.ficha-lista li{display:flex;gap:var(--space-3);padding:var(--space-2) 0;
 border-top:var(--border-hairline) solid var(--line);font:400 14px/20px var(--font-sans)}
.ficha-lista li:first-child{border-top:0}
.ficha-lista li a{color:var(--link);text-decoration:none;font-weight:500;
 flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ficha-lista li .t{flex:1 1 auto;min-width:0}
.ficha-lista li .n{font-family:var(--font-mono);font-size:13px;
 color:var(--ink-secondary);flex:none}
.ficha-lista li.aberta a{color:var(--ink);font-weight:700}
.ficha-prazo{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.ficha-prazo b{font:600 28px/32px var(--font-mono);letter-spacing:-.02em;color:var(--success)}
.ficha-prazo.avisa b{color:var(--warning)}
.ficha-prazo.mau b{color:var(--danger)}
.ficha-prazo span{color:var(--ink-secondary)}
.ficha-nota,.em-falta-frase{font:400 13px/18px var(--font-sans);color:var(--ink-muted);
 margin:var(--space-2) 0 0}
.em-falta-frase b{font-weight:600;color:var(--ink-secondary)}
.nota-campo{display:block;margin-top:3px;font:400 12px/16px var(--font-sans);
 color:var(--ink-muted)}
.mg-card__foot .mg-row{gap:var(--space-2)}
.ficha-lado .prop-campos{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.resp{display:flex;align-items:center;gap:var(--space-2)}
.resp .mg-field__input{flex:1 1 auto;min-width:0}
@media (max-width:1100px){.ficha-duas{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.ficha-factos{grid-template-columns:minmax(0,1fr)}
 .ficha-factos dd{margin-bottom:var(--space-3)}
 .mg-pagehead__actions{flex:1 1 100%;flex-wrap:wrap}}
/* A linha de tarefa na coluna estreita dobra: o texto e as etiquetas
   numa linha, o formulario do adiar/quem na seguinte, a toda a largura. */
.ficha-lado ul.tarefas li{flex-wrap:wrap}
.ficha-lado ul.tarefas li form.accao{flex:1 1 100%;display:flex;gap:6px;flex-wrap:wrap}
.ficha-lado ul.tarefas li form.accao input{flex:1 1 120px;min-width:0}
.ficha-lado .mg-card table{font-size:13px}

/* As PROPOSTAS (24/09/2026, o `EcraPropostas`): o cliente por baixo do
   objecto, e o «Falta» em cor de aviso -- e o que trava. */
.tab-lista td.o small{display:block;color:var(--ink-muted);font-size:12.5px}
.tab-lista td.falta{color:var(--warning);font-size:13.5px;min-width:120px}
.tab-lista td.falta .mg-mono{color:var(--ink-muted);font-size:12px}
.tab-lista td.o>a{color:var(--ink);font:600 14px/20px var(--font-sans);text-decoration:none}
.tab-lista td.o>a:hover{color:var(--link);text-decoration:underline}

/* O MERCADO (24/09/2026, o `EcraMercado`). Os campos numa grelha que
   dobra sozinha (sao sete, e no modo fim oito); a linha do resumo com os
   modos a direita; e a tabela com os graficos numa coluna ao lado. */
#filtros-mercado{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
 padding:0;background:none;border:0}
#filtros-mercado .f-q{grid-column:span 2}
.procura-entidade{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
 font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.procura-entidade .mg-field__input{min-height:32px;width:220px;padding:0 var(--space-2);
 border:var(--border-control) solid var(--line-strong);border-radius:var(--radius-md)}
.mercado-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
 margin:var(--space-4) 0}
.mercado-resumo .conta{font:400 13px/18px var(--font-sans);color:var(--ink-secondary)}
.mercado-resumo>.mg-tabs{margin-left:auto}
.mercado-duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);
 gap:var(--space-5);align-items:start}
.mercado-tabela{min-width:0}
.mercado-lado{display:flex;flex-direction:column;gap:var(--space-4)}
.mercado-lado.graf-corpo{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){.mercado-duas{grid-template-columns:minmax(0,1fr)}}

/* As CONFIGURACOES (24/09/2026, o `EcraConfiguracoes`): o `SectionNav`
   a esquerda (o sistema nao traz a regra base das ligacoes), e a seccao
   num cartao com faixa. */
.mg-secnav a,.conf-indice a{display:block;padding:8px var(--space-3);border-radius:var(--radius-md);
 color:var(--ink-secondary);text-decoration:none;font:500 14px/20px var(--font-sans)}
.conf-indice{display:flex;flex-direction:column;gap:2px;min-width:200px}
.conf-indice a:hover{background:var(--surface-sunken);color:var(--ink)}
.conf-indice a[aria-current="page"]{background:var(--brand-soft);color:var(--brand);font-weight:600}
.conf-indice .mg-secnav__sep{height:1px;margin:var(--space-2) var(--space-3);background:var(--line)}
.conf-indice .mg-secnav__note{padding:0 var(--space-3);font:400 12px/16px var(--font-sans);
 color:var(--ink-muted)}
.conf-corpo{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.conf-corpo>.mg-card--band .mg-card__body>.mg-field__label:first-child{display:none}
@media (max-width:1100px){.conf-indice{flex-direction:row;flex-wrap:wrap}
 .conf-indice .mg-secnav__sep,.conf-indice .mg-secnav__note{display:none}}

/* Vieram do `miragov-pontes.css` quando ele saiu (24/09/2026): sao as
   duas regras que nao eram pontes, e continuam a fazer falta. */
/* O CSS antigo pinta fundos a #fff à mão em .cx, .item, .bt, .entrar input, .abas a.on:
   no tema escuro e no contraste isso quebra. Enquanto a fase 3 não chega, esta regra corrige. */
[data-theme] .cx, [data-theme] .item, [data-theme] .vazio, [data-theme] .abas a.on, [data-theme] .bt, [data-theme] .entrar input { background: var(--surface-raised); }
/* A barra de topo fazia `background:var(--ink)`, que no sistema antigo
   era o quase-preto e no novo é a cor do TEXTO. O sistema tem uma cor
   própria para ela -- `--surface-header`, o azul institucional --, e é
   essa que deve pintar já na fase 1: a barra é a primeira coisa que se
   vê, e deixá-la cinzenta-escura até à fase 2 era mostrar meia mudança.
   O menu da conta pendura-se da barra e acompanha-a. */
[data-theme] .barra, [data-theme] .sou .sou-menu { background: var(--surface-header); }

/* ENTRAR (24/09/2026, o `EcraEntrar`): o painel institucional a
   esquerda, com os numeros da plataforma, e o formulario minimo a
   direita. Abaixo de 800px o painel vai para cima, mais baixo. */
main.entrar-duas{min-height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.entrar-lado{background:var(--surface-header);color:var(--on-header);
 padding:var(--space-7);border-radius:0 var(--radius-xl) var(--radius-xl) 0;
 display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6)}
.entrar-lado h1{margin:0;font:600 40px/44px var(--font-serif)}
.entrar-lado small{display:block;font:400 14px/20px var(--font-sans);
 color:var(--on-header-muted);margin-top:var(--space-2)}
.entrar-lado p{font:400 15px/22px var(--font-sans);color:var(--on-header-muted);
 max-width:36ch;margin:0}
.entrar-lado .kv{display:flex;flex-wrap:wrap;gap:var(--space-6);
 font:400 13px/18px var(--font-sans);color:var(--on-header-muted)}
.entrar-lado .kv b{display:block;font:600 22px/28px var(--font-mono);color:var(--on-header)}
.entrar-form{display:flex;align-items:center;justify-content:center;padding:var(--space-7)}
.entrar-cx{width:min(380px,100%);display:flex;flex-direction:column;gap:var(--space-4)}
.entrar-cx h2{margin:0;font:600 22px/28px var(--font-serif);color:var(--ink)}
.entrar-cx form{display:flex;flex-direction:column;gap:var(--space-4)}
.entrar-nota{margin:0;font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.entrar-nota a{color:var(--link)}
@media (max-width:800px){main.entrar-duas{grid-template-columns:minmax(0,1fr);min-height:0}
 .entrar-lado{border-radius:0 0 var(--radius-xl) var(--radius-xl);padding:var(--space-6)}
 .entrar-lado h1{font-size:32px;line-height:36px}
 .entrar-form{padding:var(--space-6) var(--space-4)}}

/* O FOCO DOS CAMPOS (24/09/2026, queixa dele: «o rebordo à volta da
   caixa a roxo fica feio»). O `--focus` do sistema e um magenta de alta
   visibilidade, e o `Field` pinta-o em qualquer campo com o cursor -- ao
   entrar, o «Utilizador» abria logo cercado de roxo. Nos campos o cursor
   ja diz onde se esta: o anel passa ao azul da marca, com um halo suave
   (continua acima dos 3:1 que o WCAG pede a um indicador). O magenta
   fica onde faz falta, no foco de TECLADO dos botoes e das ligacoes. */
.mg .mg-field__input:focus,.mg input:focus-visible,.mg select:focus-visible,
.mg textarea:focus-visible,.mg-dialog input:focus-visible,
.mg-dialog .mg-field__input:focus{outline:2px solid var(--brand);outline-offset:0;
 box-shadow:0 0 0 4px var(--brand-soft)}

/* Texto só para quem lê com leitor de ecrã: o cabeçalho da coluna das
   acções, que vazio o axe acusa e o leitor lê como «célula» (varredura
   de 25/09/2026). */
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
 overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* E quem o leva tem de estar posicionado: sem isto o absoluto conta-se a
   partir da página, e o «Acções» da última coluna de uma tabela que rola
   ficava a 729px num ecrã de 390 -- a página voltava a fugir de lado
   (medido no mesmo dia, depois de o pôr). */
th:has(> .so-leitor){position:relative}

/* «Saltar para o conteúdo» (teste com utilizadores, 25/09/2026; WCAG
   2.4.1): invisível até ter o foco, e aí aparece por cima da barra. É o
   primeiro Tab da página, e poupa os dez da barra a quem usa o teclado. */
.saltar{position:absolute;left:8px;top:-60px;z-index:1000;padding:8px 14px;
  background:var(--surface);color:var(--ink);border:2px solid var(--focus);
  border-radius:6px;font-weight:600;text-decoration:none}
.saltar:focus{top:8px}
main#conteudo:focus{outline:none}

/* Um botão discreto dentro de um cartão em banda é azul sobre azul
   (contraste 1:1): o «Anúncio completo» da ficha não se via, e com o foco
   era um contorno vazio (teste com utilizadores, 25/09/2026; WCAG
   1.4.3). Na banda, a cor de quem está sobre o azul. */
.mg-card--band .mg-card__actions .mg-btn--subtle,
.mg-card--band .mg-card__actions .mg-btn--secondary{color:var(--on-brand);
  border-color:rgba(255,255,255,.55);background:transparent}
.mg-card--band .mg-card__actions .mg-btn--subtle:hover,
.mg-card--band .mg-card__actions .mg-btn--secondary:hover{background:rgba(255,255,255,.12)}

/* Abaixo de 600px a barra DOBRA em vez de rolar (teste com utilizadores):
   a rolar, «Calend» aparecia cortado e as Configurações ficavam fora do
   ecrã, sem nada a dizer que havia mais. Duas linhas de itens gastam
   ~40px e mostram tudo. */
@media (max-width:600px){
 .mg-topbar__nav{flex-wrap:wrap;overflow-x:visible;row-gap:2px}
 .mg-topbar__nav .mg-topbar__link{padding-left:10px;padding-right:10px}}

/* As tabelas das listas viram cartões no telemóvel (teste com
   utilizadores, 25/09/2026): a 390px a tabela dos Concursos media 905px,
   e o prazo, o «Faltam» e os botões ficavam fora do ecrã — ao rolar
   para os ver deixava de se ver o título, e carregava-se «Interessa» às
   cegas. Cada linha passa a um bloco: a referência e o prazo em cima, o
   título a toda a largura, e as acções por baixo. */
@media (max-width:600px){
 .lista.tab-cx,.tab-cx:has(>.tab-lista){overflow-x:visible}
 .lista.tab-cx table,.tab-lista{display:block;min-width:0;width:100%}
 .lista.tab-cx thead,.tab-lista thead{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .lista.tab-cx tbody,.tab-lista tbody{display:block}
 .lista.tab-cx tbody tr,.tab-lista tbody tr{display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 10px;padding:12px var(--space-3);
  border-bottom:1px solid var(--line)}
 .lista.tab-cx tbody td,.tab-lista tbody td{display:block;padding:0;border:0;
  min-width:0;max-width:100%;height:auto;text-align:left}
 .lista .col-obj{min-width:0}
 .lista.tab-cx td.col-obj,.tab-lista td.o{order:-1;flex:1 1 100%}
 .lista.tab-cx td.col-acc,.tab-lista td.celula-ranhura{flex:1 1 100%}
 .lista.tab-cx td.col-acc .mg-row,.lista.tab-cx td.col-acc{display:flex;
  flex-wrap:wrap;gap:8px}}

/* A ficha no telemóvel (teste com utilizadores, 25/09/2026): o título a
   30px ocupava meio ecrã, e os quatro passos da escada cortavam-se a meio
   da palavra («Interess», «Em prep»). O título desce para 22px, e os
   passos mostram só o número e a nota; o nome do passo aceso fica. */
@media (max-width:600px){
 .mg-pagehead__title{font-size:22px;line-height:28px}
 .ficha-escada .mg-step__label{font-size:12px;overflow:visible;white-space:normal;
  text-overflow:clip;word-break:normal}}

/* O glossário (/ajuda, 25/09/2026): o termo em cima, a explicação por
   baixo, com ar entre os pares. */
dl.glossario{margin:0}
dl.glossario dt{font-weight:600;color:var(--ink);margin-top:var(--space-3)}
dl.glossario dt:first-child{margin-top:0}
dl.glossario dd{margin:2px 0 0;color:var(--ink-secondary);max-width:70ch}

/* Os distritos do interesse (25/09/2026): vinte caixas numa grelha que
   dobra, em vez de uma lista de vinte linhas. */
.dist-interesse{border:0;padding:0;margin:0 0 10px;flex:1 1 100%;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px}
.dist-interesse legend{font-weight:600;margin-bottom:6px;padding:0}
.dist-interesse .dist-cx{display:flex;align-items:center;gap:6px;font-size:13px}