/* Montserrat (marca UpWeGo) VARIAVEL, subsetada a Latin, servida pela
   propria app em /static/ com o hash do conteudo no nome. Gerada de
   marca/pdf-brand/assets/Montserrat.ttf por scripts/build_montserrat_css.py,
   que escreve tambem o app/estaticos/montserrat.woff2.
   ESTE BLOCO NAO SE EDITA A MAO: corre o script outra vez.
   Eixo wght limitado a 400-700; cobre os quatro pesos da marca
   (400/500/600/700) num ficheiro so, em vez de quatro estaticas. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/montserrat.1385b0a1.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00AC,U+00AE-017F,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+20AC}
/* ============================================================
   Sistema visual UpWeGo para a intranet.
   Fonte da marca: ~/projects/upwego-knowledge/marca/pdf-brand
   (upwego-doc.css + README.md). Laranja #FF9E18, tinta #272727,
   Montserrat. Regras da casa: sem travessoes, sem gradientes
   roxos, sem hero com tres cards, sem fontes decorativas.

   Entrega: servido pela app em /static/upwego.<hash>.css (rota
   app/routes/estaticos.py) e pedido por um <link> do base.html,
   desde a fase 2 da spec dos estaticos. O bloco do @font-face no
   topo e gerado; daqui para baixo edita-se a mao.

   DENSIDADE: os componentes leem sempre das variaveis. A classe
   .up-compact no <body> troca a densidade inteira, sem CSS
   duplicado a manter em paralelo.
   ============================================================ */

:root{
  /* Marca, copiados do upwego-doc.css. Nao inventar tons novos. */
  --up-orange:#FF9E18;
  --up-orange-deep:#F07E00;
  --up-orange-tint:#FFF6E8;
  --up-amber-line:#F6D9A8;
  --up-ink:#272727;
  --up-body:#3A3A3A;
  --up-muted:#8C8C8C;
  --up-line:#ECECEC;
  --up-error-bg:#FDECE8;
  --up-error-line:#D64526;
  --up-error-ink:#7A2A17;

  /* Densidade confortavel: paginas de colaborador. */
  --up-fs:16px;
  --up-lh:1.6;
  --up-sp:1rem;
  --up-field-pad:.8rem 1rem;
  --up-cell-pad:.85rem 1rem;
  --up-radius:10px;
  --up-h1:2.25rem;
}

/* Densidade compacta: o /admin e ferramenta de uso diario com
   tabelas. O respiro que assenta num formulario publico torna
   uma lista de candidaturas cansativa de percorrer. */
.up-compact{
  --up-fs:14px;
  --up-lh:1.45;
  --up-sp:.6rem;
  --up-field-pad:.55rem .75rem;
  --up-cell-pad:.5rem .75rem;
  --up-radius:8px;
  --up-h1:1.5rem;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:#fff;
  color:var(--up-body);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--up-fs);
  line-height:var(--up-lh);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--up-orange-deep);text-underline-offset:2px;}
a:hover{color:var(--up-orange);}

:focus-visible{
  outline:3px solid var(--up-orange);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Cabecalho ----------
   O tra o laranja por baixo do cabecalho cita o #runhead dos PDFs
   da marca (border-bottom 1.4pt laranja). E o que liga a intranet
   aos documentos que a empresa ja envia. */
.up-head{
  display:flex;
  align-items:center;
  gap:2rem;
  border-bottom:2px solid var(--up-orange);
  /* A regra laranja atravessa o ecra todo, mas o conteudo do cabecalho
     alinha com a coluna da pagina. Sem isto o logo encosta a margem do
     viewport enquanto o texto fica centrado, e as duas coisas leem-se
     como se fossem de paginas diferentes. */
  padding:1rem max(1.5rem, calc((100% - 64rem) / 2 + 1.5rem));
}
.up-logo{height:30px;width:auto;display:block;flex:0 0 auto;}

/* ---------- A barra lateral do portal ----------
   Desde 2026-09-16 a intranet e um dos modulos do portal interno
   (portal.upwego.pt) e as paginas com navegacao usam a barra lateral dele,
   com o desenho do UpWeGo Financas: escura, 216px, logo em cima, as
   ferramentas por grupo, a atual com o traco amarelo a esquerda, e o email
   e o Sair no fundo. Os valores sao os do src/styles.css do Financas e do
   static/portal.css do portal; o contrato esta em docs/barra-do-portal.md
   no repo do portal. A .up-head simples (onboarding) continua como estava.
   O logo mantem os 30px da marca: a guarda da altura unica vale aqui. */
.up-app{display:flex;min-height:100vh;}
.up-app > .up-page{flex:1 1 auto;min-width:0;}
.up-lateral{
  width:216px;
  flex:0 0 216px;
  background:#171512;
  color:#B8B2A4;
  padding:18px 0 14px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.up-lateral-logo{
  display:block;
  padding:0 18px 16px;
  border-bottom:1px solid #2B2721;
  margin-bottom:10px;
  text-decoration:none;
}
.up-lateral-logo span{
  display:block;
  font-size:11px;
  color:#A8A290;
  margin-top:6px;
  letter-spacing:.04em;
}
.up-lateral .up-nav-menu{margin-left:0;}
.up-lateral .up-nav{flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;}
.up-lateral .up-nav a{
  display:block;
  padding:8px 18px;
  color:#B8B2A4;
  font-size:13px;
  font-weight:400;
  border-bottom:0;
  white-space:normal;
}
.up-lateral .up-nav a:hover{background:#26221C;color:#F5F2E8;}
.up-lateral .up-nav a[aria-current="page"],
.up-lateral .up-nav a.up-lateral-atual{
  background:#26221C;
  color:#fff;
  border-left:3px solid #FFCB47;
  padding-left:15px;
  font-weight:600;
}
.up-lateral-grupo{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#6B6558;
  padding:14px 18px 5px;
}
/* As seccoes da ferramenta atual, por baixo dela. */
.up-lateral-sub{display:flex;flex-direction:column;background:#1E1B17;padding:2px 0 6px;}
.up-lateral .up-lateral-sub a{padding:6px 18px 6px 30px;font-size:12.5px;}
.up-lateral .up-lateral-sub a[aria-current="page"]{
  background:transparent;
  border-left:0;
  padding-left:30px;
  color:#fff;
  font-weight:600;
}
.up-lateral .up-lateral-sub .up-nav-quiet{color:#8A8374;}
.up-lateral .up-nav .up-nav-sep{width:auto;height:1px;background:#2B2721;margin:6px 18px 6px 30px;}
.up-lateral-sessao{
  margin-top:auto;
  padding:14px 18px 0;
  border-top:1px solid #2B2721;
  font-size:11.5px;
  color:#A8A290;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-wrap:anywhere;
}
.up-lateral-sair{color:#FFCB47;font-weight:700;text-decoration:none;}
.up-lateral-sair:hover{color:#FFCB47;text-decoration:underline;}

/* O fundo e as linhas do Financas, nas paginas que sao modulos do portal. As
   paginas publicas (porta, onboarding, candidaturas) ficam brancas: quem la
   chega nao entrou no portal. Os cartoes e os vazios ganham fundo branco
   para se lerem como caixas em cima do creme. */
body.up-portal{background:#F5F2E8;--up-line:#E8E4D8;}
.up-portal .up-card,.up-portal .up-empty{background:#fff;}

/* Em telemovel a barra deixa de ser lateral: fica em cima, com o logo e o
   Sair na primeira linha e o <details> de sempre por baixo, que abre a lista
   num fundo escuro. */
@media (max-width:640px){
  .up-app{flex-direction:column;}
  /* Numa coluna flex, o `margin:0 auto` do .up-page desliga o esticar: o
     <main> ficava com a largura do conteudo, e uma tabela de 606px abria a
     pagina de lado a 390px (medido pela regua a 2026-09-16). */
  .up-app > .up-page{width:100%;}
  .up-lateral{
    width:100%;
    flex:0 0 auto;
    height:auto;
    position:static;
    padding:10px 14px;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:.5rem .75rem;
  }
  .up-lateral-logo{padding:0;border:0;margin:0;}
  .up-lateral-logo span{display:none;}
  .up-lateral .up-nav-menu{grid-column:1 / -1;}
  .up-lateral .up-nav-menu > summary{color:#fff;}
  .up-lateral .up-nav a{padding:.6rem .7rem;}
  .up-lateral .up-nav a[aria-current="page"],
  .up-lateral .up-nav a.up-lateral-atual{padding-left:.55rem;}
  .up-lateral .up-lateral-sub a,
  .up-lateral .up-lateral-sub a[aria-current="page"]{padding-left:1.5rem;}
  .up-lateral-sessao{
    grid-row:1;
    grid-column:2;
    justify-self:end;
    flex-direction:row;
    align-items:center;
    margin:0;
    padding:0;
    border:0;
  }
  .up-lateral-email{display:none;}
}

/* A navegacao do /admin vive dentro de um <details>. Em telemovel ele e o
   que parece: um menu. Aqui em cima deixa de se notar, porque o botao se
   esconde e a lista fica sempre visivel, devolvendo a linha de links de
   sempre.

   QUEM FAZ A REVELACAO e o facto de o filho ter display proprio: basta o
   .up-nav ser flex para um <details> fechado o mostrar. Medido. A linha
   abaixo repete isso ao nivel do menu de proposito, para que mudar o
   display do .up-nav um dia nao apague a navegacao do desktop sem se dar
   por isso; e a do ::details-content e a mesma ideia para os motores que
   ja usam o modelo novo. Nenhuma das duas e o que hoje faz o trabalho: sao
   rede. Prova disso e que apagar as duas nao muda nada, e foi preciso por
   o .up-nav a display:none para a regua acusar.

   Se um dia nenhuma pegar, o desktop fica sem navegacao visivel, porque o
   botao esta escondido nesta largura. Por isso a regua conta os links. */
.up-nav-menu{margin-left:auto;}
.up-nav-menu > summary{display:none;}
.up-nav-menu > .up-nav{display:flex;}
.up-nav-menu::details-content{display:contents;}

.up-nav{
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
}
.up-nav a{
  color:var(--up-ink);
  text-decoration:none;
  font-weight:500;
  font-size:.875rem;
  padding:.35rem 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.up-nav a:hover{color:var(--up-orange-deep);}
.up-nav a[aria-current="page"]{
  color:var(--up-ink);
  font-weight:700;
  border-bottom-color:var(--up-orange);
}
.up-nav .up-nav-sep{
  width:1px;
  height:1.1rem;
  background:var(--up-line);
  flex:0 0 auto;
}
.up-nav .up-nav-quiet{color:var(--up-muted);font-weight:400;}

/* ---------- Corpo da pagina ---------- */
.up-page{
  max-width:64rem;
  margin:0 auto;
  padding:2.5rem 1.5rem 4rem;
}
/* Coluna estreita para leitura, mas alinhada a esquerda com o cabecalho
   em vez de centrada. Centrar a 38rem debaixo de um cabecalho alinhado a
   64rem deixava o logo e o conteudo desencontrados. */
.up-page.up-narrow{max-width:64rem;}
.up-page.up-narrow > *{max-width:38rem;}

/* Listas com poucas colunas curtas nao devem esticar ate aos 64rem: a
   accao da linha acaba a flutuar longe da linha a que pertence. */
.up-page.up-list{max-width:52rem;}

.up-eyebrow{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--up-orange-deep);
  margin:0 0 .6rem;
}

h1{
  font-size:var(--up-h1);
  line-height:1.15;
  font-weight:700;
  color:var(--up-ink);
  margin:0 0 .75rem;
  letter-spacing:-.01em;
}
h2{
  font-size:1.0625rem;
  font-weight:700;
  color:var(--up-ink);
  margin:2.5rem 0 .75rem;
  letter-spacing:-.005em;
}
.up-compact h2{font-size:.95rem;margin:2rem 0 .6rem;}

.up-lead{
  font-size:1.0625rem;
  color:var(--up-body);
  max-width:52ch;
  margin:0 0 2rem;
}
.up-compact .up-lead{font-size:.95rem;margin-bottom:1.5rem;}

.up-meta{color:var(--up-muted);font-size:.875rem;}
.up-hint{color:var(--up-muted);font-size:.85rem;}
/* Lista de texto simples: sem marcador nem indentacao do UA. Cada <li> ja
   traz a sua propria hierarquia (nome a negrito, depois link ou hint), e o
   marcador do browser so acrescentava ruido a essa leitura. */
.up-plain{list-style:none;padding-left:0;}
/* O aviso de que o anexo se perdeu, colado ao campo. Nao usa .up-hint porque
   esse e cinzento esbatido de proposito e isto e para ser visto. */
.up-field-warn{color:var(--up-error-ink);font-size:.85rem;}

/* ---------- Blocos de aviso ---------- */
.up-errors,.up-notice{
  margin:0 0 1.75rem;
  padding:.9rem 1.15rem;
  border-radius:var(--up-radius);
  font-size:.9rem;
  list-style:none;
}
.up-errors{
  background:var(--up-error-bg);
  border-left:4px solid var(--up-error-line);
  color:var(--up-error-ink);
}
.up-errors li + li{margin-top:.35rem;}
.up-notice{
  background:var(--up-orange-tint);
  border-left:4px solid var(--up-orange);
  color:var(--up-ink);
}

/* ---------- Formularios ---------- */
.up-form{display:flex;flex-direction:column;gap:calc(var(--up-sp) * 1.25);}
.up-field{display:flex;flex-direction:column;gap:.35rem;}
.up-field-label{
  font-weight:500;
  color:var(--up-ink);
  font-size:.9rem;
}
.up-input{
  font-family:inherit;
  font-size:1rem;
  color:var(--up-body);
  padding:var(--up-field-pad);
  border:1px solid var(--up-line);
  border-radius:var(--up-radius);
  background:#fff;
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* Alvo anual dentro da celula da tabela: um campo de 4 ou 5 algarismos. Sem
   isto herda o width:100% do .up-input, enche a celula e empurra o botao
   para a linha de baixo. Seletor estreito de proposito. */
.up-input-curto{width:6rem;}
.up-compact .up-input{font-size:.9rem;}
.up-input:focus-visible{
  border-color:var(--up-orange);
  box-shadow:0 0 0 3px rgba(255,158,24,.22);
  outline:none;
}
textarea.up-input{resize:vertical;min-height:8rem;font-size:.9rem;}
input[type="file"].up-input{color:var(--up-muted);}
input[type="file"].up-input::file-selector-button{
  font-family:inherit;
  font-weight:600;
  font-size:.85rem;
  color:var(--up-ink);
  background:var(--up-orange-tint);
  border:none;
  border-radius:7px;
  padding:.45rem .85rem;
  margin-right:.85rem;
  cursor:pointer;
  transition:background-color .15s ease;
}
input[type="file"].up-input::file-selector-button:hover{background:#FFE9C6;}

/* A marca tambem chega aos controlos nativos. So a candidatura tinha isto;
   passa a ser de toda a app. */
input[type="checkbox"]{accent-color:var(--up-orange);}

/* Honeypot anti-spam. Fora do ecra e nao display:none de proposito: um
   campo escondido por display e ignorado por parte dos preenchedores
   automaticos, e deixa de apanhar o bot que era suposto apanhar. */
.up-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* Nota curta por baixo do lead, antes do primeiro campo. A margem
   negativa encosta-a ao lead em vez de a deixar a flutuar a meio do
   intervalo; o valor e o do .up-lead (2rem) menos o respiro que se quer. */
.up-required-note{font-size:.85rem;color:var(--up-muted);margin:-1.25rem 0 2rem;}

/* Campo revelado por JavaScript a partir de um <select>. NAO e o
   .up-conditional: esse depende de .up-toggle:checked e um <select> nao
   se apanha com :checked, portanto os dois nao se fundem. Tem de vir
   DEPOIS do .up-field, que poe display:flex com a mesma especificidade. */
.up-reveal{display:none;}
.up-reveal.up-reveal-on{display:flex;}

/* ---------- Botoes ---------- */
.up-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:inherit;
  font-weight:600;
  font-size:.9rem;
  line-height:1.2;
  border-radius:999px;
  padding:.7rem 1.6rem;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
/* O icone de um botao tem o tamanho do texto do botao, e nao se mexe.
   Um svg inline sem width/height nao tem tamanho intrinseco: aqui dentro,
   que e inline-flex, ele estica com o espaco que sobra e o racio do viewBox
   puxa a altura atras. O sistema antigo tinha esta regra e ela nao veio na
   unificacao; o CTA da candidatura ficou com a seta a 403x403 num ecra de
   640. Em em e nao em rem, para acompanhar os tres degraus sm/normal/lg. */
.up-btn svg{width:1em;height:1em;flex:0 0 auto;}
.up-btn-primary{
  background:var(--up-ink);
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.up-btn-primary:hover{
  background:#1b1b1b;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.up-btn-primary:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,0,0,.15);}

.up-btn-quiet{
  background:#fff;
  color:var(--up-ink);
  border-color:var(--up-line);
}
.up-btn-quiet:hover{border-color:var(--up-orange);color:var(--up-orange-deep);}

/* Destrutivo: so onde a accao e mesmo irreversivel. */
.up-btn-danger{
  background:var(--up-error-line);
  color:#fff;
}
.up-btn-danger:hover{background:#B93A1F;color:#fff;transform:translateY(-1px);}

.up-btn-sm{padding:.4rem 1rem;font-size:.8rem;}
/* Degrau acima do .up-btn, para o CTA de um formulario virado para fora.
   A candidatura usava um botao proprio com esta medida; em vez de o
   encolher na unificacao, a escala passa a ter sm, normal e lg. Nao
   precisa de regra propria em telemovel: dentro de um .up-actions ja
   estica com o resto. */
.up-btn-lg{padding:.95rem 2.25rem;font-size:1rem;}
/* flex-end e nao center: quando a linha mistura um campo com etiqueta e um
   botao, centrar deixa o botao a flutuar acima da linha de base do campo. */
.up-actions{display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap;}
/* Accoes encostadas a direita, para a celula de accoes de uma tabela. O gap
   tem de vir DESTE contentor: quando o .up-actions estava no form do "Enviar",
   o gap so chegava aos filhos do form e o "Ver" ao lado ficava a 3.67px, que e
   a largura de um espaco, e nao aos 12px que o resto da app usa.
   O nowrap e deliberado: a coluna de accoes e estreita e com o wrap herdado
   do .up-actions o "Ver" caia para debaixo do "Reenviar". */
.up-actions-end{justify-content:flex-end;flex-wrap:nowrap;}

/* Botao inline dentro de celulas de tabela, sem parecer um botao
   grande a mais numa lista de dez linhas. */
.up-linkbtn{
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:.85rem;
  font-weight:600;
  color:var(--up-orange-deep);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.up-linkbtn:hover{color:var(--up-orange);}
.up-linkbtn-danger{color:var(--up-error-line);}
.up-linkbtn-danger:hover{color:#B93A1F;}

/* ---------- Tabelas ----------
   Regra laranja por baixo do cabecalho, como nos documentos.
   Sem zebra: as linhas separam-se por uma hairline, que le
   melhor em listas curtas e nao suja o branco. */
.up-table-wrap{overflow-x:auto;}
.up-atalho-admin{margin:0 0 .75rem;font-size:.85rem;}
.up-atalho-admin a{color:var(--up-orange-deep);font-weight:600;}
/* A dica que diz como abrir uma linha quando a coluna de accao desaparece.
   ESCONDIDA POR OMISSAO: em ecra largo a coluna "Ver" esta la e a dica seria
   ruido a dizer duas vezes a mesma coisa. So o bloco @media (max-width:640px)
   a revela, e e la que esta o par dela. Ver a pendencia 12 e a guarda
   `portas_da_lista` da regua. */
.up-dica-porta{display:none;}
.up-table{
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
}
.up-table th{
  text-align:left;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--up-muted);
  padding:0 1rem .55rem;
  /* Mais fina do que a regra do cabecalho da pagina: as duas sao laranja
     e ficam perto uma da outra, portanto tem de ter pesos diferentes ou
     competem. A da pagina manda; esta acompanha. */
  border-bottom:1.5px solid var(--up-orange);
  white-space:nowrap;
}
.up-table th:first-child,.up-table td:first-child{padding-left:0;}
.up-table th:last-child,.up-table td:last-child{padding-right:0;}
.up-table td{
  padding:var(--up-cell-pad);
  border-bottom:1px solid var(--up-line);
  color:var(--up-body);
  vertical-align:middle;
}
.up-table tr:last-child td{border-bottom:none;}
.up-table .up-td-strong{color:var(--up-ink);font-weight:600;}
/* O nome da linha e um link, mas nao se pinta de laranja: numa lista de
   dez linhas isso seria uma parede de laranja. Fica tinta, e o sublinhado
   aparece ao passar. */
.up-table .up-td-strong a{color:inherit;text-decoration:none;}
.up-table .up-td-strong a:hover{color:var(--up-orange-deep);text-decoration:underline;}
.up-table .up-td-num{font-variant-numeric:tabular-nums;color:var(--up-muted);white-space:nowrap;}
.up-table .up-td-actions{text-align:right;white-space:nowrap;}

/* Numero grande do saldo. Existe uma vez, na pagina de ferias do
   colaborador: e a unica coisa daquela pagina que se le a distancia. */
.up-numero{font-size:2.5rem;font-weight:700;line-height:1.1;margin:.25rem 0;}
.up-numero .up-meta{font-size:1rem;font-weight:400;}

/* ---------- Etiquetas de estado ----------
   Usam a familia ambar que ja existe na marca. Sem verde nem
   vermelho: nenhum destes estados e sucesso ou erro. */
.up-tag{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.22rem .6rem;
  border-radius:999px;
  border:1px solid var(--up-line);
  color:var(--up-muted);
  background:#fff;
  white-space:nowrap;
}
/* A etiqueta com uma MEDIDA la dentro, nao uma palavra de estado.
   Toda a gente que usa a .up-tag la mete uma palavra ("publicado",
   "rascunho", "inativo") e o uppercase assenta-lhe. A formacao e a unica que
   la mete uma quantidade, e ai o uppercase estraga a unidade: "28h30" saia
   "28H30", e o simbolo da hora e minusculo. So se desliga o uppercase; a
   familia, a cor e a forma continuam a ser as da .up-tag. */
.up-tag-medida{
  text-transform:none;
  letter-spacing:.02em;
}
.up-tag-nova{
  background:var(--up-orange-tint);
  border-color:var(--up-amber-line);
  color:var(--up-orange-deep);
}
.up-tag-arquivada{
  background:#FAFAFA;
  border-color:var(--up-line);
  color:var(--up-muted);
}
/* Os cinco estados que o funil do recrutamento trouxe. A .up-tag-arquivada ja
   ca estava e serve o sexto. So se usam variaveis que a paleta ja tem: ela nao
   tem verde nem azul, e inventar uma cor aqui era abrir um segundo sistema
   visual dentro do primeiro. */
.up-tag-por_contactar{
  background:var(--up-orange-tint);
  border-color:var(--up-amber-line);
  color:var(--up-orange-deep);
}
/* A andar: alguem ja lhe pegou e nao pede acao imediata. */
.up-tag-contactado{
  background:#fff;
  border-color:var(--up-line);
  color:var(--up-body);
}
/* A andar e com data marcada: le-se como o contactado, mas com a linha quente
   para se distinguir de relance numa lista comprida. */
.up-tag-entrevista_marcada{
  background:#fff;
  border-color:var(--up-amber-line);
  color:var(--up-orange-deep);
}
.up-tag-aceite{
  background:var(--up-orange-tint);
  border-color:var(--up-orange-deep);
  color:var(--up-orange-deep);
}
/* Fechado em mau. Usa a familia de ERRO que o CSS ja tem, e nao uma cor nova:
   e a mesma afirmacao ("isto nao segue") que os formularios ja fazem. */
.up-tag-rejeitado{
  background:var(--up-error-bg);
  border-color:var(--up-error-line);
  color:var(--up-error-ink);
}
.up-tag-pendente{
  background:var(--up-orange-tint);
  border-color:var(--up-amber-line);
  color:var(--up-orange-deep);
}
.up-tag-aprovado{
  background:#fff;
  border-color:var(--up-line);
  color:var(--up-body);
}
.up-tag-recusado{
  background:#FAFAFA;
  border-color:var(--up-line);
  color:var(--up-muted);
}
.up-tag-cancelado{
  background:#FAFAFA;
  border-color:var(--up-line);
  color:var(--up-muted);
}

/* Listas de texto corrido (o que vai desaparecer, o que acontece ao reabrir).
   Os itens tem duas e tres linhas cada e a zero de distancia liam-se como um
   paragrafo so, deixando de ser tres avisos. O `:not([class])` deixa de fora o
   .up-errors e o .up-notice, que ja tem a sua propria separacao. */
.up-page ul:not([class]) li + li{margin-top:.4rem;}

/* ---------- Estado vazio ---------- */
.up-empty{
  padding:2.5rem 1.5rem;
  text-align:center;
  color:var(--up-muted);
  border:1px dashed var(--up-line);
  border-radius:var(--up-radius);
  font-size:.9rem;
}

/* ---------- Cartao ---------- */
.up-card{
  border:1px solid var(--up-line);
  border-radius:var(--up-radius);
  padding:1.5rem;
  margin:0 0 1.5rem;
}
.up-compact .up-card{padding:1.15rem;}

/* Cartao do link publico das candidaturas. O URL e comprido e nao tem espacos
   onde quebrar, portanto sem o break-word empurrava a pagina de lado em
   telemovel. O wrap manda o botao para baixo do URL quando deixa de caber, em
   vez de o espremer. */
.up-link-publico-linha{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1rem;
}
.up-link-publico-linha a{
  overflow-wrap:break-word;
  word-break:break-word;
  min-width:0;
}

/* Form de filtro da lista de candidaturas (estado + adequacao). Mesmo molde
   da .up-link-publico-linha: uma linha de controlos curtos que tem de
   quebrar em ecra estreito em vez de espremer. */
.up-filtros{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--up-sp);
}

/* O rotulo e o campo dele sao UM par e nao se separam. Soltos na barra eram
   dois itens de topo do flex, e a 390px o wrap cortava entre os dois: o
   `Adequacao` ficava no fim de uma linha e o `<select>` dela na seguinte.
   O `gap` e o MESMO da barra de proposito - o que muda e onde o wrap pode
   cortar, nao o espacamento, portanto nas larguras onde ja cabia nada mexe.
   O `medir_layout` mede o par por sobreposicao vertical. */
.up-filtro-par{
  display:flex;
  align-items:center;
  gap:var(--up-sp);
}

/* O cartao de cada morada de teletrabalho vive DENTRO do .up-form e e um
   bloco, portanto os campos la dentro nao apanhavam o gap do formulario: um
   gap de flex so chega aos filhos diretos. E a mesma correcao que a
   .up-conditional levou, no cartao que ficou de fora. O [hidden] no fim do
   ficheiro continua a ganhar a este display por ordem de origem, que e o que
   o script das moradas precisa. */
[data-morada-extra]{
  display:flex;
  flex-direction:column;
  gap:calc(var(--up-sp) * 1.25);
}

/* Lista de pares etiqueta/valor, para o detalhe da candidatura. */
.up-facts{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.45rem 1.25rem;
  margin:0;
  font-size:.9rem;
}
/* Duas moradas de teletrabalho sao dois .up-facts adjacentes dentro do mesmo
   .up-card (uma por endereco); margin:0 sozinho colava-as sem se perceber
   onde acaba a primeira. So entre irmaos, para nao empurrar o primeiro bloco
   para longe do <h2> do cartao. */
.up-facts + .up-facts{margin-top:1.25rem;}
.up-facts dt{
  color:var(--up-muted);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-top:.15rem;
}
/* Mesma razao do .up-table td: um email ou um IBAN sem ponto de quebra alarga
   a coluna `1fr` ate a sua largura minima e faz a pagina inteira deslizar de
   lado num telemovel. */
.up-facts dd{margin:0;color:var(--up-ink);overflow-wrap:anywhere;}

/* Texto que veio de um campo livre: preserva as quebras que a
   pessoa escreveu. Escapado pelo Jinja, nunca com | safe. */
.up-prose{white-space:pre-wrap;color:var(--up-body);margin:0;}

/* ---------- Login centrado ---------- */
.up-signin{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem 1.5rem;
  gap:2rem;
}
.up-signin .up-signin-box{width:100%;max-width:22rem;}
.up-signin h1{font-size:1.5rem;text-align:center;}
.up-signin .up-lead{text-align:center;margin-bottom:1.75rem;}
.up-signin .up-btn{width:100%;}
/* A porta em `/`: quatro botoes em pilha, com o mesmo gap do .up-form.
   Seletor preso ao .up-signin de proposito - nenhuma outra pagina leva
   esta classe, e uma regra larga aqui mexia com todas as pilhas. */
.up-signin .up-porta-areas{
  display:flex;
  flex-direction:column;
  gap:calc(var(--up-sp) * 1.25);
}

/* ---------- Voltar ---------- */
/* O texto do voltar e as vezes o email ou o nome de quem estamos a ver, nao
   uma palavra curta: a 390px o email de trinta e tres caracteres nao cabia e
   a pagina de reabrir passava a deslizar 7px de lado. */
.up-back{
  display:block;
  width:fit-content;
  max-width:100%;
  overflow-wrap:anywhere;
  font-size:.85rem;
  font-weight:500;
  color:var(--up-muted);
  text-decoration:none;
  margin:0 0 1.25rem;
}
.up-back:hover{color:var(--up-orange-deep);}
.up-back::before{content:"\2190";margin-right:.4rem;}

/* ---------- Sucesso ---------- */
/* text-align so centra o TEXTO dentro da caixa, nao a caixa em si. Os
   filhos diretos herdam max-width:38rem do .up-narrow mas ficam encostados
   a esquerda sem margem propria; o emblema e o lead escapavam a isto por
   terem margem auto propria, o eyebrow e o h1 nao. Uma regra so, aqui,
   centra os quatro filhos das duas paginas que usam .up-success
   (candidatura_done.html e onboarding_done.html) em vez de repetir a
   margem auto em cada elemento. */
.up-success{text-align:center;}
.up-success > *{margin-left:auto;margin-right:auto;}
.up-badge{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--up-orange-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.5rem;
}

/* ---------- Responsivo ---------- */
@media (max-width:640px){
  /* Um so bloco por seletor: dois .up-head separados aqui era so ruido a
     pedir para um deles ser esquecido numa alteracao futura. */
  .up-head{
    gap:.75rem;
    padding:.75rem 1.15rem;
    flex-wrap:wrap;
  }
  /* Aqui o <details> volta a ser um menu. A versao anterior encolhia os
     seis links para .8rem e punha-os em duas linhas: resolvia a altura e
     lia-se como texto encavalitado. Decisao do Tiago a 29/07, a olhar para
     o telemovel. Dentro do menu os links voltam ao tamanho normal, porque
     letra miudinha era metade do problema. */
  .up-nav-menu{width:100%;margin-left:0;}
  /* DESFAZ a revelacao da base. La em cima a lista e forcada a visivel para
     o desktop nao ter menu nenhum; aqui o <details> tem de voltar a mandar,
     senao o menu nasce aberto e fica-se com a nav encavalitada de sempre
     mais um botao por cima. Foi exatamente o que aconteceu a primeira vez
     que isto se escreveu, e foi a regua que o apanhou. */
  .up-nav-menu > .up-nav{display:none;}
  .up-nav-menu[open] > .up-nav{display:flex;}
  .up-nav-menu::details-content{display:block;}
  .up-nav-menu > summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    padding:.35rem 0;
    font-weight:600;
    font-size:.95rem;
    color:var(--up-ink);
    cursor:pointer;
    /* As duas linhas tiram o triangulo que o browser poe por sua conta:
       a primeira serve os motores novos, a segunda o WebKit. */
    list-style:none;
  }
  .up-nav-menu > summary::-webkit-details-marker{display:none;}
  /* O galao e desenhado com duas bordas e roda meia volta ao abrir, para
     nao trazer mais um svg para o cabecalho. */
  .up-nav-menu > summary::after{
    content:"";
    width:.45rem;
    height:.45rem;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-.15rem) rotate(45deg);
    transition:transform .15s ease;
    flex:0 0 auto;
  }
  .up-nav-menu[open] > summary::after{
    transform:translateY(.1rem) rotate(-135deg);
  }
  .up-nav{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
    padding:.25rem 0 .5rem;
  }
  /* Numa coluna, um tra o por baixo do link ativo lia-se como separador
     entre linhas e nao como marca. Passa para a esquerda, onde so pode
     querer dizer "e esta". */
  .up-nav a{
    padding:.6rem 0 .6rem .7rem;
    border-bottom-width:0;
    border-left:2px solid transparent;
  }
  .up-nav a[aria-current="page"]{border-left-color:var(--up-orange);}
  .up-nav .up-nav-sep{width:100%;height:1px;margin:.4rem 0;}

  .up-page,.up-page.up-narrow{padding:2rem 1.15rem 3rem;}
  /* Na coluna do telemovel o `margin:0 auto` da .up-page impedia-a de esticar:
     ficava da largura do conteudo e uma tabela larga alargava a pagina toda
     (Formacao a 506px e Ferias a 645px num ecra de 390, medido a 25/09/2026).
     Largura do ecra, e o que for mais largo rola dentro do .up-table-wrap. */
  .up-app > .up-page{width:100%;max-width:100%;box-sizing:border-box;}
  :root{--up-h1:1.75rem;}
  .up-form .up-btn{width:100%;}
  .up-actions{align-items:stretch;flex-direction:column;}
  .up-actions .up-btn{width:100%;}
  .up-table{font-size:.8rem;}

  /* A coluna de accao ficava fora do ecra e a lista deixava de ter forma
     de ser aberta. O nome passa a ser o link, que e maior e e para onde a
     pessoa olha, e a coluna redundante sai. */
  .up-table .up-td-actions{display:none;}
  /* E a dica entra no lugar dela, no MESMO bloco e coladas uma a outra de
     proposito: sao as duas metades de uma decisao so - a coluna sai, a dica
     entra - e separa-las era deixar nascer o estado em que nao ha porta
     nenhuma anunciada, que foi o defeito da pendencia 12. Quem mexer numa
     tem a outra debaixo dos olhos. */
  .up-dica-porta{display:block;}
  /* E o cabecalho DESSA coluna que sai com ela, nao o ultimo de qualquer
     tabela: a tabela de emails do detalhe acaba em "Estado", que e uma
     etiqueta a serio, e escondia-la deixava tres estados por baixo de um
     cabecalho que parava em "Quando". O :has liga o cabecalho a celula que
     ele nomeia, portanto uma tabela nova acerta sozinha. Regra separada de
     proposito: num browser sem :has um seletor invalido levava a linha toda
     com ele e a coluna de accoes voltava a empurrar o estado para fora do
     ecra. */
  .up-table:has(.up-td-actions) th:last-child{display:none;}
  /* Sublinhado obrigatorio aqui: sem hover no telemovel, e o unico sinal
     de que o nome abre a candidatura, e sem a coluna "Ver" e a unica
     porta de entrada. */
  .up-table .up-td-strong a{
    color:var(--up-orange-deep);
    text-decoration:underline;
    text-underline-offset:3px;
  }
  /* Um email nao tem ponto de quebra nenhum, portanto a largura minima da
     coluna do nome passava a ser a do endereco inteiro e empurrava a coluna do
     ESTADO para fora do ecra: a 390px a lista mostrava nomes e mais nada.
     `anywhere` e nao `break-word` porque so o primeiro conta para a largura
     minima que o algoritmo da tabela usa. So aqui, e so em ecra estreito: no
     resto da tabela isto deixava o algoritmo espremer uma coluna ate uma letra
     por linha, e foi o que aconteceu ao botao "Descarregar". */
  .up-table .up-td-strong,.up-table .up-hint{overflow-wrap:anywhere;}
  /* Chao para a coluna de quem e a linha, so nas paginas de lista. Sem ele o
     algoritmo da tabela dava 102px ao nome e 240px ao estado, e o nome partia
     a meio de cada palavra: poder encolher nao e o mesmo que dever encolher
     ate ao osso. Fora das listas nao se aplica, senao roubava largura as
     tabelas de quatro colunas do detalhe, e 10rem e o tecto: a 11rem a lista
     de candidaturas, que tem tres colunas, transbordava 7px. */
  .up-list .up-table .up-td-strong{min-width:10rem;}

  /* "2026-07-23 13:37" numa coluna com nowrap eram 23px de mais e punham a
     coluna do estado fora do ecra na tabela de emails. Parte-se no espaco
     entre a data e a hora. As celulas que so tem a data cabem com folga e
     ficam numa linha; nada aqui as obriga a isso, so a largura que sobra. */
  .up-table .up-td-num{white-space:normal;}

  /* Colunas marcadas como dispensaveis saem em ecra estreito. Com dados
     reais (nomes que partem em tres linhas, texto livre comprido) a
     tabela transbordava e era o ESTADO que caia fora do ecra, que e
     precisamente aquilo para que esta area serve. O que fica e a vista de
     triagem: quando chegou, quem e, em que estado esta. */
  .up-table .up-col-optional{display:none;}
}

/* A tabela dos colaboradores nao cabe num telemovel, e nao ha coluna que se
   corte para a fazer caber: medido a 31/07, nome (160) mais os dois campos
   editaveis mais os tres numeros derivados sao 608px num contentor de 353, ja
   com o email e as accoes escondidos. Esconder mais era esconder exatamente o
   que a pagina serve para ver. Portanto a LINHA passa a bloco e cada celula
   ganha a sua propria largura.

   Vem DEPOIS do bloco de cima de proposito: as tres regras abaixo tem a mesma
   especificidade das que as anulam, portanto e a ordem no ficheiro que decide.
   E so esta tabela leva a classe: as outras cabem, e mexer-lhes era alargar
   isto a paginas que ninguem mediu. */
@media (max-width:640px){
  .up-table-blocos thead{display:none;}
  .up-table-blocos tbody tr{
    display:block;
    padding:1rem 0;
    border-bottom:1px solid var(--up-line);
  }
  .up-table-blocos tbody tr:last-child{border-bottom:none;}
  .up-table-blocos tbody td{display:block;border-bottom:none;padding:.3rem 0;}
  /* As accoes voltam. A regra que as esconde foi escrita para listas em que o
     NOME e o link que as substitui; aqui o nome nao e link nenhum, portanto
     escondidas deixavam a pagina sem forma de desativar alguem no telemovel. */
  .up-table-blocos .up-td-actions{display:block;text-align:left;}
  /* O par rotulo-campo mantem-se em grelha, mas o rotulo passa a alinhar a
     esquerda: sem colunas a competir, alinhar a direita deixava-os a flutuar
     longe dos campos. */
  .up-table-blocos .up-par{grid-template-columns:7.5rem 4.2rem;}
  .up-table-blocos .up-par label{text-align:left;}
}

/* AS NORMAS EM DUAS LINHAS EM VEZ DE QUATRO. Pedido pelo Tiago a 2026-09-03,
   depois de ver a pagina no telemovel dele.

   UMA linha nao cabe, e mediu-se antes de escrever isto: na pagina de
   PRODUCAO o titulo mede 137px, o estado 71 e as duas accoes 140 - 348px de
   texto, ja sem gaps e sem o fundo da etiqueta, dentro dos 342px que a tabela
   tem a 390px. E "Manual de Normas" e o UNICO titulo que existe hoje, portanto
   e tambem o mais curto que a pagina alguma vez vai ter.

   AS QUATRO ALTURAS VINHAM DE DUAS REGRAS, e e por isso que aqui ha duas
   correccoes e nao uma: o `td{display:block}` do bloco de cima poe o titulo e
   o estado em linhas separadas, e o `.up-actions{flex-direction:column}` la
   atras separa o Despublicar do Apagar.

   SO AS NORMAS LEVAM A CLASSE. Os colaboradores ficam como estao - foram
   vistos no telemovel no mesmo dia e estavam bons - e os premios e os feriados
   nao foram pedidos. Alargar a quem ninguem mediu ja partiu coisas aqui.

   Vem DEPOIS do bloco de cima pela mesma razao que ele: mesma especificidade,
   decide a ordem no ficheiro. */
@media (max-width:640px){
  .up-blocos-compacto tbody tr{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:.6rem;
  }
  .up-blocos-compacto tbody td{padding:.15rem 0;}
  /* A celula das accoes leva a segunda linha inteira. */
  .up-blocos-compacto .up-td-actions{flex:1 0 100%;}
  /* Desfaz a coluna SO aqui: com a celula sozinha na sua linha sobra espaco
     para os dois lado a lado, e empilhados eram duas das quatro alturas que
     este bloco existe para cortar. */
  .up-blocos-compacto .up-actions{flex-direction:row;align-items:baseline;}
  /* Alinhar a direita numa celula da largura da pagina deixava os botoes
     longe do titulo a que pertencem. */
  .up-blocos-compacto .up-actions-end{justify-content:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  .up-btn,.up-input{transition:none;}
  .up-btn-primary:hover,.up-btn-danger:hover{transform:none;}
  /* So a transicao. O galao continua a rodar, porque a rotacao AQUI nao e
     enfeite: e o que diz se o menu esta aberto ou fechado. */
  .up-nav-menu > summary::after{transition:none;}
}

/* ---------- Pisco que revela uma seccao ---------- */
/* Sem JavaScript: a seccao e irma seguinte do checkbox e a cascata revela-a,
   portanto funciona com o script desligado e nao gasta nonce nenhum. Quem
   decide o que e obrigatorio e sempre o servidor. */
/* Uma linha (input + label), nao uma coluna: a coluna esticava o checkbox a
   largura toda do formulario (align-items:stretch por omissao) e o Chrome
   desenhava o glifo centrado, por cima do texto. flex-wrap deixa a seccao
   revelada cair para a linha seguinte sem sair de irma do input, que e o que
   a cascata abaixo exige. align-items:flex-start (nao center, herdado do
   .consent antigo) alinha o checkbox ao topo da primeira linha em vez de o
   centrar contra um texto de consentimento com duas linhas. */
.up-check{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:.5rem;
  margin:1rem 0 0;
}
/* Alvo de toque a serio (1.15rem, uns 18px) em vez do checkbox ao tamanho
   por omissao do browser (uns 13px). So o filho direto: nao ha checkbox
   nenhum dentro do .up-conditional para apanhar por engano. */
.up-check > input[type="checkbox"]{
  width:1.15rem;
  height:1.15rem;
  margin-top:.2rem;
  flex:0 0 auto;
}
/* Letra miuda de consentimento, herdada do .consent antigo da candidatura:
   so o <span> de texto livre. Nao no .up-check inteiro, senao herdava para
   dentro do .up-conditional, e la dentro isto e rotulo funcional e
   cabecalhos de um formulario a serio (ex.: "Beneficiario em caso de morte"
   no onboarding), nao letra miuda legal. */
.up-check > span{
  font-size:.9rem;
  color:var(--up-muted);
  font-weight:400;
}
/* flex-basis:100% obriga a quebra de linha num container com wrap mesmo
   quando .up-conditional ainda esta escondida (display:none ignora-o). */
.up-conditional{display:none;flex:1 0 100%;}
.up-toggle:checked ~ .up-conditional{
  display:flex;
  flex-direction:column;
  /* Mesma escala do .up-form: uma seccao revelada nao inventa o proprio
     respiro vertical. */
  gap:calc(var(--up-sp) * 1.25);
}

/* Bloco de erros no topo de um formulario reapresentado pelo servidor. Sem
   vermelho: a familia ambar da marca ja distingue o suficiente, e o resto da
   app nao usa semaforos. */
.up-erros{
  border:1px solid var(--up-amber-line);
  background:var(--up-orange-tint);
  border-radius:var(--up-radius);
  padding:var(--up-sp);
  margin-bottom:var(--up-sp);
}
.up-erros p{margin:0 0 .35rem;font-weight:600;}
.up-erros ul{margin:0;padding-left:1.1rem;}

/* Um form que e so um botao, dentro de uma celula de tabela. Sem isto o
   <form> quebrava a linha e a coluna de acoes duplicava de altura. */
.up-inline-form{display:inline-flex;gap:.4rem;align-items:center;margin:0;}
/* O email por baixo do nome, com o dominio esbatido. Uma coluna propria para o
   endereco custava 220px a repetir "@upwego.pt" em cada linha, e e essa
   largura que paga o Guardar ao lado dos campos. Esbatido e nao apagado: o
   endereco continua inteiro, selecionavel e copiavel. */
.up-sub-email{
  display:block;
  color:var(--up-muted);
  font-size:.78rem;
  font-weight:400;
  margin-top:.1rem;
}
.up-dominio{opacity:.5;}

/* O formulario do saldo dentro da tabela: um par rotulo-campo por linha, e o
   Guardar ao lado do par inteiro. Com os dois campos lado a lado e o rotulo
   por cima, liam-se como duas caixas soltas e nao havia como saber qual era
   qual, que foi a queixa que trouxe este desenho. */
.up-form-saldo{display:inline-flex;align-items:center;gap:.8rem;margin:0;}
.up-pares{display:inline-flex;flex-direction:column;gap:.3rem;}
/* Grelha e nao flex: as duas caixas alinham pela mesma coluna, senao o rotulo
   mais comprido empurrava o campo dele para a direita do outro. */
.up-par{display:grid;grid-template-columns:auto 4.2rem;align-items:center;gap:.5rem;}
.up-par label{font-size:.78rem;color:var(--up-muted);text-align:right;}

/* Fronteira entre dois blocos da mesma pagina. Existe porque o formulario de
   acrescentar colaborador nascia colado ao fim da tabela e lia-se como parte
   dela, e porque a CSP proibe o style= inline (o nonce so cobre blocos de
   estilo, nunca atributos). */
.up-sep{
  border:0;
  border-top:1px solid var(--up-line);
  margin:2.5rem 0 2rem;
}

/* Os tres numeros derivados do saldo, um por linha. Seletor estreito de
   proposito: um `td span` largo apanhava as etiquetas de estado das outras
   tabelas.

   Deliberadamente SEM `white-space:nowrap` na celula: o "sem saldo definido" e
   a linha mais larga das tres e travava a coluna em 148px, o que punha a
   tabela em 785 num contentor de 784 e cortava o `Desativar`. Deixando-a
   partir, o browser encolhe esta coluna quando falta largura. */
.up-situacao span{display:block;font-size:.8rem;color:var(--up-muted);}
/* O numero que manda e o unico que nunca parte em duas linhas. */
.up-situacao .up-situacao-forte{
  color:var(--up-ink);
  font-weight:600;
  white-space:nowrap;
}

/* Utilitarios minimos. Existem porque a CSP nao permite atributos style=
   inline (o nonce so se aplica a blocos de estilo, nunca a atributos), e
   estes casos nao justificam componentes proprios. Nao alargar esta lista sem
   pensar: o sistema e de componentes, nao de utilitarios.
   O `.up-u-inline` saiu daqui: punha display:inline num form que tambem era
   .up-actions e ganhava-lhe por ordem no ficheiro, portanto o gap desse
   .up-actions nunca chegava a existir. Foi assim que os botoes da lista de
   onboardings acabaram colados.
   ORDEM: este bloco tem de vir DEPOIS dos componentes, nunca antes. Estava
   antes do .up-check e o .up-u-mt-0 nunca ganhava contra ele: mesma
   especificidade (0,1,0), mesma origem, sem !important, e quem vem depois no
   ficheiro e que leva a melhor. Utilitarios por baixo dos componentes e a
   ordem que faz um utilitario valer sempre que e preciso, nao so as vezes.
   Nota: ate a fase 2 dos estaticos este ficheiro ia inline, e uma tag de
   fecho escrita por extenso num comentario fechava o bloco a meio da
   pagina. Hoje e servido como ficheiro proprio e isso ja nao acontece. */
.up-u-mt-0{margin-top:0;}
.up-u-mt-1{margin-top:1rem;}
.up-u-mt-3{margin-top:3rem;}
.up-u-mb-2{margin-bottom:2rem;}
.up-u-center{margin-left:auto;margin-right:auto;}

/* Rotulo so para leitores de ecra: os campos de saldo vivem dentro de uma
   celula de tabela onde um rotulo visivel nao cabe, mas um input sem rotulo
   nao se anuncia. */
.up-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* Fecha a lista: o atributo hidden e do UA e perde para qualquer declaracao
   de display do autor, e o script das moradas de teletrabalho usa-o. Fica no
   fim para ganhar por ordem sem precisar de forcar prioridade. */
[hidden]{display:none;}

/* ---------- Mapa de ferias ----------
   Uma linha por pessoa, uma coluna por dia (app/mapa_ferias.py, macro em
   _mapa_ferias.html). O mesmo desenho serve o /admin/ferias (com links e
   contagens) e o /ferias do colaborador (so os nomes). Rola na horizontal
   dentro do .up-mapa-wrap, com o nome fixo a esquerda: 31 colunas nunca
   couberam em 608px nem em 390px, e encolher as celulas ate caberem deixava
   de se ver qual era o dia. As cores sao proprias e NAO as das .up-tag: a
   etiqueta diz um estado e vive na familia ambar; a celula diz um dia e
   precisa de se distinguir do feriado (ambar) num relance, por isso o
   aprovado e verde. */
.up-mapa-wrap{overflow-x:auto;margin:.5rem 0 1rem;}
.up-mapa{border-collapse:collapse;font-size:.75rem;}
.up-mapa th,.up-mapa td{border:1px solid var(--up-line);text-align:center;padding:0;}
.up-mapa th{
  font-size:.55rem;
  font-weight:600;
  line-height:1.15;
  color:var(--up-muted);
  padding:.2rem 0;
  min-width:1rem;
  background:#fff;
}
/* 1rem por dia: 31 x 16px sao 496px, que mais um nome comprido cabem nos
   784px da lista do admin e, com um nome normal, nos 608px do colaborador.
   Medido a 2026-09-15 nas capturas de producao: com 1.4rem a vista do ano
   cortava no dia 25 e obrigava a rolar para ver o fim do mes, que e onde
   as ferias costumam estar. */
.up-mapa td{width:1rem;min-width:1rem;height:1.15rem;}
.up-mapa .up-mapa-nome{
  position:sticky;
  left:0;
  z-index:1;
  background:#fff;
  text-align:left;
  font-size:.75rem;
  font-weight:600;
  color:var(--up-ink);
  padding:.15rem .6rem;
  white-space:nowrap;
}
.up-mapa thead .up-mapa-nome{
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--up-muted);
}
.up-mapa-contagem{font-weight:400;color:var(--up-muted);margin-left:.4rem;}
.up-mapa th.up-mapa-fds,.up-mapa td.up-mapa-fds{background:#F2F2F2;}
.up-mapa th.up-mapa-feriado,.up-mapa td.up-mapa-feriado{background:var(--up-orange-tint);}
.up-mapa td.up-mapa-aprovado,.up-mapa-amostra.up-mapa-aprovado{background:#3C9A5F;}
.up-mapa td.up-mapa-pendente,.up-mapa-amostra.up-mapa-pendente{background:var(--up-orange);}
.up-mapa td.up-mapa-aprovado.up-mapa-meio,.up-mapa-amostra.up-mapa-aprovado.up-mapa-meio{
  background:linear-gradient(135deg,#3C9A5F 50%,#fff 50%);
}
.up-mapa td.up-mapa-pendente.up-mapa-meio{
  background:linear-gradient(135deg,var(--up-orange) 50%,#fff 50%);
}
/* O link ocupa a celula inteira: o alvo e o quadrado, nao um texto. */
.up-mapa td a{display:block;width:100%;height:100%;}
.up-mapa-legenda{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1rem;
  margin:.5rem 0 0;
  padding:0;
  list-style:none;
  font-size:.8rem;
  color:var(--up-muted);
}
.up-mapa-legenda li{display:inline-flex;align-items:center;gap:.4rem;}
.up-mapa-amostra{display:inline-block;width:.9rem;height:.9rem;border:1px solid var(--up-line);}
.up-mapa-amostra.up-mapa-feriado{background:var(--up-orange-tint);}
.up-mapa-amostra.up-mapa-fds{background:#F2F2F2;}
.up-mapa-mes{margin:1.5rem 0 .25rem;font-size:1rem;}
/* Uma seccao que abre e fecha (a lista de pedidos do /admin/ferias). O
   titulo e o proprio <summary>, com a margem que o h2 teria solto. */
.up-colapsavel > summary{cursor:pointer;margin:2rem 0 .6rem;}
.up-colapsavel > summary h2{display:inline;margin:0;}
/* O ano de UMA pessoa (macro `ano_pessoa`): doze linhas, uma por mes, e 37
   colunas alinhadas pelo dia da semana. Aqui a celula leva o numero do dia,
   porque a coluna so diz o dia da semana. 37 x 1.1rem sao 651px, que com o
   nome do mes cabem nos 784px da lista do admin sem rolar; abaixo disso rola
   dentro do .up-mapa-wrap com o mes fixo a esquerda, como o mapa de equipa.
   As celulas fora do mes ficam sem fundo, para o mes se ler
   como um bloco. */
.up-mapa-pessoa td{
  width:1.1rem;
  min-width:1.1rem;
  height:1.35rem;
  font-size:.6rem;
  line-height:1.35rem;
  color:var(--up-ink);
  background:#fff;
}
.up-mapa-pessoa td.up-mapa-fds,.up-mapa-pessoa td.up-mapa-feriado{color:var(--up-muted);}
.up-mapa-pessoa td.up-mapa-fora{background:transparent;}
.up-mapa-pessoa td.up-mapa-aprovado,.up-mapa-pessoa td.up-mapa-pendente{color:#fff;font-weight:700;}
.up-mapa-pessoa td a{color:inherit;text-decoration:none;}
/* No meio dia metade da celula e branca: o numero volta a tinta. */
.up-mapa-pessoa td.up-mapa-meio{color:var(--up-ink);}
/* A navegacao do mapa (vista, mes, filtro de estado): links em linha, o
   atual a tinta e a negrito. O ano e a pessoa escolhem-se nos seletores do
   .up-filtros, por cima do resumo. */
.up-mapa-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1rem;
  align-items:center;
  margin:.5rem 0;
  font-size:.875rem;
}
.up-mapa-nav a{color:var(--up-orange-deep);}
.up-mapa-nav a[aria-current="page"]{color:var(--up-ink);font-weight:700;text-decoration:none;}
.up-mapa-nav strong{color:var(--up-ink);}
/* Na coluna estreita do colaborador o nome vai mais miudo, para o mes
   caber inteiro ao lado de um nome normal. Um nome muito comprido continua
   a rolar, e e o menor dos males. */
.up-narrow .up-mapa .up-mapa-nome{padding:.1rem .45rem;font-size:.7rem;}
@media (max-width:640px){
  .up-mapa .up-mapa-nome{padding:.15rem .4rem;}
}