/* ==========================================================================
   Relógio de Ponto — estilos base

   Direção: painel com barra lateral azul-marinho, cartões brancos sobre cinza
   claro, números grandes onde eles são o conteúdo.

   Regras que governam este ficheiro:

   1. NENHUMA COR FIXA fora dos blocos de tokens. Uma cor escrita à mão no
      corpo do ficheiro é uma cor que não existe no tema escuro.

   2. O TEMA ESCURO NÃO É O CLARO INVERTIDO. A barra lateral já é escura no
      tema claro; no escuro passa a ser mais escura que o painel, para
      continuar a ler-se como navegação. A hierarquia mantém-se invertendo a
      direção da luz.

   3. AZUL DE TEXTO E AZUL DE FUNDO SÃO VALORES DIFERENTES. O azul que se lê
      sobre fundo escuro é claro; usá-lo como fundo de texto branco dá
      contraste insuficiente. São papéis opostos.
   ========================================================================== */

:root {
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --t-xs: 11px;
  --t-sm: 13px;
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 20px;
  --t-2xl: 30px;

  --e1: .35rem;
  --e2: .7rem;
  --e3: 1.1rem;
  --e4: 1.75rem;
  --e5: 2.5rem;

  --raio: 10px;
  --raio-sm: 7px;
  --fio: 1px;
  --transicao: 150ms ease;
  --lado-largura: 240px;
}

/* Tema claro --------------------------------------------------------------- */
:root, [data-tema="claro"] {
  --fundo: #f1f4f9;
  --superficie: #ffffff;
  --superficie-2: #f7f9fc;
  --tinta: #0f1b2d;
  --tinta-media: #45566d;
  --tinta-suave: #5d6e85;
  --linha: #e6ebf2;
  --linha-forte: #d2dae5;

  --azul: #1e56c8;
  --azul-ativo: #1e56c8;
  --azul-claro: #eaf0fd;
  --ok: #0e7a4e;    --ok-claro: #e3f5ec;
  --aviso: #96601b; --aviso-claro: #fdf4e5;
  --mau: #b02a2a;   --mau-claro: #fbebeb;
  --contador: #c2410c;

  --barra: #0e2148;
  --barra-2: #16305f;
  --barra-txt: #93a7c6;
  --barra-grupo: #6f86a8;
  --barra-borda: transparent;

  --sombra-cartao: 0 1px 2px rgba(15,27,45,.05), 0 1px 3px rgba(15,27,45,.04);
  --sombra-flutua: 0 4px 16px rgba(15,27,45,.09);
  --realce: rgba(15,27,45,.02);
  --texto-btn: #ffffff;
  --calha: #cdd6e2;
  color-scheme: light;
}

/* Tema escuro -------------------------------------------------------------- */
[data-tema="escuro"] {
  --fundo: #0a0e15;
  --superficie: #141b26;
  --superficie-2: #1a2330;
  --tinta: #e4e9f0;
  --tinta-media: #a5b2c4;
  --tinta-suave: #7887a0;
  --linha: #232d3c;
  --linha-forte: #313d4f;

  --azul: #5c92f0;
  --azul-ativo: #14448f;
  --azul-claro: #16223c;
  --ok: #5ab88a;    --ok-claro: #10251b;
  --aviso: #d3a45c; --aviso-claro: #241d11;
  --mau: #e08585;   --mau-claro: #2a1717;
  --contador: #b45309;

  --barra: #060a12;
  --barra-2: #101a2c;
  --barra-txt: #8496b0;
  --barra-grupo: #6b7c96;
  --barra-borda: #35424f;

  --sombra-cartao: 0 1px 2px rgba(0,0,0,.4);
  --sombra-flutua: 0 4px 20px rgba(0,0,0,.45);
  --realce: rgba(255,255,255,.025);
  --texto-btn: #08101f;
  --calha: #38455a;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0a0e15; --superficie: #141b26; --superficie-2: #1a2330;
    --tinta: #e4e9f0; --tinta-media: #a5b2c4; --tinta-suave: #7887a0;
    --linha: #232d3c; --linha-forte: #313d4f;
    --azul: #5c92f0; --azul-ativo: #14448f; --azul-claro: #16223c;
    --ok: #5ab88a; --ok-claro: #10251b;
    --aviso: #d3a45c; --aviso-claro: #241d11;
    --mau: #e08585; --mau-claro: #2a1717;
    --contador: #b45309;
    --barra: #060a12; --barra-2: #101a2c; --barra-txt: #8496b0;
    --barra-grupo: #6b7c96; --barra-borda: #35424f;
    --sombra-cartao: 0 1px 2px rgba(0,0,0,.4);
    --sombra-flutua: 0 4px 20px rgba(0,0,0,.45);
    --realce: rgba(255,255,255,.025);
    --texto-btn: #08101f; --calha: #38455a;
    color-scheme: dark;
  }
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 var(--t-md)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--azul); color: #fff; }

/* Estrutura do painel ------------------------------------------------------ */
.app { display: grid; grid-template-columns: var(--lado-largura) 1fr; min-height: 100vh; }

.lado {
  background: var(--barra);
  border-right: var(--fio) solid var(--barra-borda);
  display: flex; flex-direction: column;
}
.lado-marca { padding: 1.35rem 1.4rem 1.15rem; text-decoration: none; display: block; }
.lado-marca b {
  display: block; color: #fff;
  font: 700 15px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase;
}
.lado-marca span { display: block; margin-top: .2rem; font-size: var(--t-xs); color: var(--barra-grupo); }

.lado nav { flex: 1; padding: .3rem 0 var(--e3); overflow-y: auto; }
.lado-grupo {
  padding: 1.15rem 1.4rem .4rem;
  font: 600 10px/1 var(--sans); letter-spacing: .11em; text-transform: uppercase;
  color: var(--barra-grupo);
}
.lado a {
  display: flex; align-items: center; gap: .8rem;
  padding: .62rem 1.4rem;
  color: var(--barra-txt); text-decoration: none;
  font-size: var(--t-md); font-weight: 500;
  transition: background var(--transicao), color var(--transicao);
}
.lado a:hover { color: #fff; background: var(--barra-2); }
.lado a.ativo { color: #fff; background: var(--azul-ativo); }
.lado a svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.lado .conta {
  margin-left: auto; min-width: 20px; padding: 0 5px; text-align: center;
  font: 600 var(--t-xs)/18px var(--sans); color: #fff;
  background: var(--contador); border-radius: 9px;
}
.lado a.ativo .conta { background: rgba(255,255,255,.25); }

.lado-fundo { padding: var(--e2) 1.4rem; border-top: var(--fio) solid rgba(255,255,255,.08); }
.lado-fundo b { display: block; color: #fff; font-size: var(--t-sm); font-weight: 500; }
.lado-fundo a { display: inline; padding: 0; font-size: 12.5px; color: var(--barra-grupo); text-decoration: none; }
.lado-fundo a:hover { color: #fff; background: none; }

.principal { display: flex; flex-direction: column; min-width: 0; }

.topo {
  background: var(--superficie); border-bottom: var(--fio) solid var(--linha);
  padding: var(--e3) var(--e4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
}
.topo h1 { font: 600 var(--t-xl)/1.3 var(--sans); margin: 0; letter-spacing: -.01em; }
.topo .data { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0 0 .1rem; }
.topo-dir { display: flex; align-items: center; gap: var(--e2); }

.folha { padding: var(--e4) var(--e4) 3.5rem; }

/* Tipografia --------------------------------------------------------------- */
.sobrescrito {
  font: 600 var(--t-xs)/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0 0 var(--e2);
}
h1 { font: 600 var(--t-xl)/1.3 var(--sans); margin: 0 0 var(--e2); letter-spacing: -.01em; }
h2 { font: 600 var(--t-lg)/1.35 var(--sans); margin: var(--e4) 0 var(--e2); }
h2.sem-margem { margin-top: 0; }
p { margin: 0 0 var(--e3); color: var(--tinta-media); }
a { color: var(--azul); }

/* Indicadores -------------------------------------------------------------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e3); margin-bottom: var(--e3); }
.cartoes .cartao { margin: 0; }
.numero-grande { font: 600 var(--t-2xl)/1 var(--sans); letter-spacing: -.025em; margin: 0 0 var(--e1); font-variant-numeric: tabular-nums; }
.legenda { font-size: 12.5px; color: var(--tinta-suave); margin: 0; }
.acao-propria { border-color: var(--azul); }
.acao-propria .numero-grande { color: var(--azul); }

/* Cartões ------------------------------------------------------------------ */
.cartao {
  background: var(--superficie);
  border: var(--fio) solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: var(--e3) 1.25rem;
  margin-bottom: var(--e3);
}
.cartao.destaque { border-color: var(--azul); }
.cartao.atencao { border-color: var(--aviso); }
.cabecalho-seccao { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }

/* Tabelas ------------------------------------------------------------------ */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-top: var(--e2); }
.tabela th {
  text-align: left; padding: .55rem var(--e2) .55rem 0;
  font: 600 var(--t-xs) var(--sans); letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-suave); border-bottom: var(--fio) solid var(--linha); white-space: nowrap;
}
.tabela td { padding: .6rem var(--e2) .6rem 0; border-bottom: var(--fio) solid var(--linha); vertical-align: baseline; }
.tabela tr:last-child td { border-bottom: none; }
.tabela td:last-child, .tabela th:last-child { padding-right: 0; }
.tabela .num { text-align: right; }
.tabela .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabela .principal { display: block; }
.tabela .secundario { display: block; font-size: 12.5px; color: var(--tinta-suave); }
.tabela tbody tr:hover td { background: var(--realce); }
.tabela tr.esmorecido td { color: var(--tinta-suave); }

.etiqueta {
  display: inline-block; margin-left: var(--e1); padding: .12rem .5rem;
  font: 500 var(--t-xs)/1.6 var(--sans); border-radius: 4px;
  color: var(--tinta-suave); background: var(--superficie-2); border: var(--fio) solid var(--linha-forte);
}
.etiqueta.alterada { color: var(--azul); background: var(--azul-claro); border-color: var(--azul); }
a.etiqueta { text-decoration: none; }
a.etiqueta:hover { color: var(--azul); border-color: var(--azul); }

.marca { font: 500 var(--t-xs)/1.7 var(--sans); padding: .12rem .5rem; border-radius: 4px; }
.marca.ok { color: var(--ok); background: var(--ok-claro); }
.marca.falha { color: var(--mau); background: var(--mau-claro); }
.marca.aviso { color: var(--aviso); background: var(--aviso-claro); }

/* Grelha de linhas --------------------------------------------------------- */
.grelha { border-top: var(--fio) solid var(--linha); margin: var(--e3) 0; }
.linha-req {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--e3);
  align-items: baseline; padding: var(--e2) 0; border-bottom: var(--fio) solid var(--linha);
}
.linha-req .ajuda { grid-column: 1 / -1; font-size: 12.5px; color: var(--tinta-suave); margin: -.15rem 0 0; }
.linha-req .valor { font: 400 var(--t-sm)/1 var(--mono); color: var(--tinta-suave); }

/* Notas e faixas ----------------------------------------------------------- */
.nota {
  border-left: 3px solid var(--azul); background: var(--azul-claro);
  padding: var(--e2) var(--e3); margin: var(--e3) 0;
  font-size: var(--t-md); color: var(--tinta); border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}
.nota.falha { border-left-color: var(--mau); background: var(--mau-claro); }
.nota.ok { border-left-color: var(--ok); background: var(--ok-claro); }

.faixa { padding: var(--e1) var(--e4); font-size: var(--t-sm); border-bottom: var(--fio) solid var(--linha); }
.faixa a { margin-left: var(--e1); font-weight: 500; }
.faixa.aviso { background: var(--aviso-claro); color: var(--aviso); }
.faixa.aviso a { color: var(--aviso); }
.faixa.falha { background: var(--mau-claro); color: var(--mau); }
.faixa.falha a { color: var(--mau); }

.selo {
  display: inline-block; padding: .12rem .5rem;
  font: 500 var(--t-xs)/1.7 var(--sans); border-radius: 4px;
  color: var(--tinta-suave); background: var(--superficie-2);
  border: var(--fio) solid var(--linha-forte); text-decoration: none; white-space: nowrap;
}
.selo:hover { color: var(--azul); border-color: var(--azul); }
.selo.expirado { color: var(--mau); border-color: var(--mau); background: var(--mau-claro); }

/* Formulários -------------------------------------------------------------- */
.campo { margin: 0 0 var(--e3); }
.campo label { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--e1); }
.campo .ajuda { font-size: 12.5px; color: var(--tinta-suave); margin: var(--e1) 0 0; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .48rem .65rem;
  font: 400 var(--t-md) var(--sans); color: var(--tinta);
  background: var(--superficie-2); border: var(--fio) solid var(--linha-forte);
  border-radius: var(--raio-sm); transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { line-height: 1.5; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-suave); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro);
}
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
label.opcao { display: inline-flex; align-items: center; gap: var(--e1); font-weight: 400; margin-right: var(--e3); }
label.opcao input { width: auto; }
.campo.definicao { padding-bottom: var(--e3); border-bottom: var(--fio) solid var(--linha); }
.campo.definicao:last-of-type { border-bottom: none; }

button, .botao {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: .5rem 1.05rem; font: 600 var(--t-sm) var(--sans);
  color: var(--texto-btn); background: var(--azul);
  border: var(--fio) solid var(--azul); border-radius: var(--raio-sm);
  cursor: pointer; text-decoration: none; transition: filter var(--transicao);
}
button:hover, .botao:hover { filter: brightness(1.1); }
button:focus-visible, .botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
button[disabled] { opacity: .45; cursor: not-allowed; }
button.secundario, .botao.secundario {
  background: var(--superficie); color: var(--tinta-media); border-color: var(--linha-forte);
}
button.secundario:hover { color: var(--azul); border-color: var(--azul); filter: none; }
button.mini, .botao.mini { padding: .25rem .65rem; font-size: 12.5px; }

.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none;
  color: var(--tinta-suave); background: var(--superficie);
  border: var(--fio) solid var(--linha-forte); border-radius: var(--raio-sm); cursor: pointer;
}
.btn-icone:hover { color: var(--azul); border-color: var(--azul); filter: none; }
.btn-icone svg { width: 16px; height: 16px; display: block; }
.btn-icone .lua { display: none; }
[data-tema="escuro"] .btn-icone .sol { display: none; }
[data-tema="escuro"] .btn-icone .lua { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .btn-icone .sol { display: none; }
  :root:not([data-tema="claro"]) .btn-icone .lua { display: block; }
}

pre.comando {
  font: 400 var(--t-sm)/1.55 var(--mono);
  background: var(--superficie-2); border: var(--fio) solid var(--linha);
  border-radius: var(--raio-sm); padding: var(--e2) var(--e3); overflow-x: auto; color: var(--tinta);
}

.filtros { display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap; margin: var(--e3) 0; }
.filtros .campo { margin: 0; min-width: 150px; }
.filtros .campo:last-child { min-width: 0; }
.accoes-marcar { display: flex; gap: var(--e2); flex-wrap: wrap; }
.em-linha { display: flex; gap: var(--e1); justify-content: flex-end; }
p.ajuda { font-size: 12.5px; margin-top: -.2rem; color: var(--tinta-suave); }

.separadores { display: flex; gap: var(--e4); flex-wrap: wrap; border-bottom: var(--fio) solid var(--linha); margin: 0 0 var(--e4); }
.separadores a { padding: var(--e1) 0; font-size: var(--t-sm); color: var(--tinta-suave); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.separadores a:hover { color: var(--tinta); }
.separadores a.ativo { color: var(--azul); border-bottom-color: var(--azul); }

/* Páginas fora do painel: entrada, recuperação, bloqueios ------------------- */
.folha-estreita { max-width: 420px; margin: 0 auto; padding: var(--e5) var(--e3) 4rem; }
.folha-estreita .cartao { padding: var(--e4); }
.idiomas { display: flex; gap: var(--e2); align-items: center; justify-content: flex-end; font-size: var(--t-sm); margin-bottom: var(--e3); }
.idiomas a { color: var(--tinta-suave); text-decoration: none; }
.idiomas a.ativo { color: var(--azul); font-weight: 500; }

.passos { display: flex; gap: var(--e2); flex-wrap: wrap; list-style: none; margin: 0 0 var(--e4); padding: 0; font: 400 var(--t-sm)/1 var(--sans); color: var(--tinta-suave); }
.passos li { display: flex; align-items: center; gap: var(--e2); }
.passos li + li::before { content: "/"; color: var(--linha-forte); }
.passos .agora { color: var(--azul); font-weight: 600; }

.codigo-convite { font: 400 34px/1.2 var(--mono); letter-spacing: .16em; margin: var(--e1) 0 var(--e3); color: var(--azul); word-break: break-all; }
.rodape-painel { padding: 0 var(--e4) var(--e4); font: 400 var(--t-xs) var(--mono); color: var(--tinta-suave); text-align: right; }
.rodape { margin-top: var(--e3); font: 400 var(--t-xs) var(--mono); color: var(--tinta-suave); text-align: right; }

.tabela-horario input[type="time"] {
  width: auto; min-width: 6.2rem; padding: .3rem .4rem;
  font: 400 var(--t-sm) var(--mono); color: var(--tinta);
  background: var(--superficie-2); border: var(--fio) solid var(--linha-forte); border-radius: var(--raio-sm);
}
.tabela-horario .par-horas { display: flex; gap: var(--e1); }
.tabela-horario td { padding-top: var(--e1); padding-bottom: var(--e1); }
.tabela-horario tfoot th { border-top: var(--fio) solid var(--linha-forte); padding-top: var(--e2); }

.anexar { display: flex; gap: var(--e1); align-items: center; margin-top: var(--e1); flex-wrap: wrap; }
.anexar input[type="file"] { font-size: var(--t-sm); max-width: 12rem; }

/* Gaveta em ecrã estreito -------------------------------------------------- */
.abrir-lado { display: none; }
.fundo-gaveta { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lado {
    position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 60;
    transform: translateX(-100%); transition: transform 200ms cubic-bezier(.2,.8,.3,1);
    box-shadow: var(--sombra-flutua);
  }
  .lado.aberta { transform: none; }
  .fundo-gaveta { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(6,10,18,.5); }
  .fundo-gaveta[hidden] { display: none; }
  .abrir-lado { display: inline-flex; }
  .topo { padding: var(--e2) var(--e3); }
  .folha { padding: var(--e3) var(--e3) 3rem; }
  .rodape-painel { padding: 0 var(--e3) var(--e3); }
  .par { grid-template-columns: 1fr; }
  body.sem-scroll { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) { .lado { transition: none; } }

/* ==========================================================================
   Listagens
   ========================================================================== */

/* Cabeçalho de página com ação principal à direita ------------------------- */
.cabecalho-lista {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3);
}
.cabecalho-lista .titulo h2 { margin: 0 0 .15rem; font-size: var(--t-lg); }
.cabecalho-lista .titulo p { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.cabecalho-lista .accoes { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* Cartão sem padding, para a tabela encostar às margens ------------------- */
.cartao.tabela-cheia { padding: 0; overflow: hidden; }
.cartao.tabela-cheia > .cartao-cabeca {
  padding: .9rem 1.25rem; border-bottom: var(--fio) solid var(--linha);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
}
.cartao.tabela-cheia > .cartao-cabeca h2 { margin: 0; font-size: 15px; }
.cartao.tabela-cheia .tabela { margin: 0; }
.cartao.tabela-cheia .tabela th { padding-left: 1.25rem; background: var(--superficie-2); }
.cartao.tabela-cheia .tabela th:last-child,
.cartao.tabela-cheia .tabela td:last-child { padding-right: 1.25rem; }
.cartao.tabela-cheia .tabela td { padding-left: 1.25rem; }
.cartao.tabela-cheia > .cartao-pe {
  padding: .8rem 1.25rem; background: var(--superficie-2);
  border-top: var(--fio) solid var(--linha);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--tinta-suave);
}

/* Barra de filtros --------------------------------------------------------- */
.barra-filtros {
  display: flex; gap: var(--e2); align-items: flex-end; flex-wrap: wrap;
  padding: .9rem 1.25rem; background: var(--superficie-2);
  border-bottom: var(--fio) solid var(--linha);
}
.barra-filtros .campo { margin: 0; min-width: 9rem; }
.barra-filtros .campo label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
.barra-filtros .campo input, .barra-filtros .campo select { background: var(--superficie); }
.barra-filtros .empurra { margin-left: auto; }

/* Estado vazio: explica o que fazer, não só que não há nada --------------- */
.vazio-estado { text-align: center; padding: var(--e5) var(--e3); }
.vazio-estado svg { width: 38px; height: 38px; color: var(--linha-forte); margin-bottom: var(--e2); }
.vazio-estado h3 { font: 600 var(--t-lg) var(--sans); margin: 0 0 var(--e1); color: var(--tinta); }
.vazio-estado p { max-width: 30rem; margin: 0 auto var(--e3); font-size: var(--t-sm); color: var(--tinta-suave); }

/* Linha de pessoa: avatar com iniciais ------------------------------------ */
.pessoa { display: flex; align-items: center; gap: .65rem; }
.avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 11.5px var(--sans); letter-spacing: .02em;
  color: var(--azul); background: var(--azul-claro);
}
.avatar.cinza { color: var(--tinta-suave); background: var(--superficie-2); border: var(--fio) solid var(--linha-forte); }

/* Ponto de estado ---------------------------------------------------------- */
.ponto-estado { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; flex: none; }
.ponto-estado.ok { background: var(--ok); }
.ponto-estado.aviso { background: var(--aviso); }
.ponto-estado.mau { background: var(--mau); }
.ponto-estado.neutro { background: var(--tinta-suave); }

/* Barra de progresso simples ---------------------------------------------- */
.progresso { height: 6px; background: var(--linha); border-radius: 3px; overflow: hidden; min-width: 5rem; }
.progresso span { display: block; height: 100%; background: var(--azul); border-radius: 3px; }
.progresso.ok span { background: var(--ok); }
.progresso.aviso span { background: var(--aviso); }

/* Definições: navegação própria à esquerda -------------------------------- */
.definicoes { display: flex; background: var(--superficie); border: var(--fio) solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-cartao); overflow: hidden; }
.def-lado { width: 226px; flex: none; background: var(--superficie-2); border-right: var(--fio) solid var(--linha); padding: var(--e2) 0; }
.def-grupo { padding: var(--e3) 1.15rem .35rem; font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.def-lado a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1.15rem; font-size: var(--t-sm); font-weight: 500;
  color: var(--tinta-media); text-decoration: none;
  border-left: 3px solid transparent;
}
.def-lado a:hover { color: var(--tinta); background: var(--realce); }
.def-lado a.ativo { color: var(--azul); background: var(--azul-claro); border-left-color: var(--azul); }
.def-lado a svg { width: 15px; height: 15px; flex: none; opacity: .85; }

.def-painel { flex: 1; padding: var(--e4) 1.9rem var(--e4); min-width: 0; }
.def-painel > h2 { margin: 0 0 .2rem; font-size: 17px; }
.def-painel > .intro { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0 0 var(--e4); max-width: 44rem; }

.def-cartao { border: var(--fio) solid var(--linha); border-radius: 9px; margin-bottom: var(--e3); overflow: hidden; }
.def-cartao > header {
  padding: .75rem 1.05rem; background: var(--superficie-2); border-bottom: var(--fio) solid var(--linha);
  font: 700 12.5px var(--sans);
}
.def-cartao > .corpo { padding: 1.05rem; }

.def-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.4rem; padding: .8rem 0; border-bottom: var(--fio) solid var(--linha); }
.def-linha:first-child { padding-top: 0; }
.def-linha:last-child { border-bottom: none; padding-bottom: 0; }
.def-txt { flex: 1; min-width: 0; }
.def-nome { font-size: var(--t-sm); font-weight: 500; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.def-sub { font-size: 12.5px; color: var(--tinta-suave); margin: .15rem 0 0; line-height: 1.5; }
.def-defeito { font: 400 11.5px var(--mono); color: var(--tinta-suave); background: var(--superficie-2); border: var(--fio) solid var(--linha); padding: 0 .35rem; border-radius: 3px; }
.def-ctl { flex: none; display: flex; align-items: center; gap: .45rem; }
.def-ctl input[type="number"] { width: 5.5rem; text-align: right; font-family: var(--mono); }
.def-ctl input[type="text"], .def-ctl select { width: 14rem; }
.def-ctl input, .def-ctl select {
  padding: .4rem .6rem; font: 400 var(--t-sm) var(--sans); color: var(--tinta);
  background: var(--superficie); border: var(--fio) solid var(--linha-forte); border-radius: var(--raio-sm);
}
.def-ctl input:focus-visible, .def-ctl select:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
.unidade { font-size: 12.5px; color: var(--tinta-suave); }

/* Interruptor -------------------------------------------------------------- */
.interruptor { position: relative; width: 42px; height: 23px; flex: none; display: inline-block; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.calha { position: absolute; inset: 0; cursor: pointer; background: var(--calha); border-radius: 23px; transition: background var(--transicao); }
.calha::before {
  content: ''; position: absolute; width: 17px; height: 17px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform var(--transicao); box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.interruptor input:checked + .calha { background: var(--azul); }
.interruptor input:checked + .calha::before { transform: translateX(19px); }
.interruptor input:focus-visible + .calha { box-shadow: 0 0 0 3px var(--azul-claro); }

/* Pastilhas de escolha múltipla ------------------------------------------- */
.pastilhas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--e1); }
.pastilha {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; font-size: 12.5px;
  background: var(--superficie-2); border: var(--fio) solid var(--linha-forte);
  border-radius: 20px; cursor: pointer; user-select: none;
}
.pastilha input { margin: 0; width: auto; }
.pastilha:has(input:checked) { background: var(--azul-claro); border-color: var(--azul); color: var(--azul); font-weight: 500; }

@media (max-width: 860px) {
  .definicoes { flex-direction: column; }
  .def-lado { width: 100%; display: flex; overflow-x: auto; padding: .3rem 0; border-right: none; border-bottom: var(--fio) solid var(--linha); }
  .def-grupo { display: none; }
  .def-lado a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .def-lado a.ativo { border-bottom-color: var(--azul); background: transparent; }
  .def-painel { padding: var(--e3) var(--e3) var(--e4); }
  .def-linha { flex-direction: column; gap: .5rem; }
  .def-ctl { width: 100%; }
  .def-ctl input[type="text"], .def-ctl select { width: 100%; }
  .barra-filtros { padding: .8rem var(--e3); }
  .cartao.tabela-cheia .tabela th, .cartao.tabela-cheia .tabela td { padding-left: var(--e3); }
  .cartao.tabela-cheia .tabela th:last-child, .cartao.tabela-cheia .tabela td:last-child { padding-right: var(--e3); }
}

.migalha { font-size: var(--t-sm); margin: 0 0 var(--e2); }
.migalha a { color: var(--tinta-suave); text-decoration: none; }
.migalha a:hover { color: var(--azul); }

/* Ecrãs próprios dentro de Definições: os cartões deixam de precisar de
   moldura própria, porque o painel já é um cartão. */
.def-painel > .cartao:first-child { margin-top: 0; }
.def-painel > .cartao { border: none; box-shadow: none; padding: 0 0 var(--e4); border-bottom: var(--fio) solid var(--linha); }
.def-painel > .cartao:last-child { border-bottom: none; padding-bottom: 0; }
.def-lado a .conta {
  margin-left: auto; min-width: 20px; padding: 0 5px; text-align: center;
  font: 600 var(--t-xs)/18px var(--sans); color: #fff;
  background: var(--contador); border-radius: 9px;
}

/* Seletor de idioma na barra lateral --------------------------------------
   Contorno em vez de fundo cheio: um fundo sólido num item de duas letras
   parece uma seleção acidental do rato. */
.idiomas-lado { display: inline-flex; gap: .3rem; margin-right: var(--e1); }
.idiomas-lado a {
  padding: .05rem .3rem; font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--barra-grupo); border: 1px solid transparent; border-radius: 4px;
  text-decoration: none;
}
.idiomas-lado a:hover { color: #fff; background: none; }
.idiomas-lado a.ativo { color: #fff; border-color: var(--barra-txt); background: none; }

/* Escalas ------------------------------------------------------------------
   A grelha é larga por natureza: uma coluna por dia. Rola dentro de si
   própria — a página nunca rola de lado, senão a barra lateral sai do ecrã.
   A primeira coluna fica presa, porque uma grelha de turnos sem saber de quem
   é a linha não vale nada. */
.escala-grelha { overflow-x: auto; margin: var(--e3) 0; }
.escala-tabela { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.escala-tabela th, .escala-tabela td { padding: .35rem .3rem; border-bottom: var(--fio) solid var(--linha); vertical-align: top; }
.escala-tabela thead th { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-suave); text-align: center; white-space: nowrap; }
.escala-tabela .col-pessoa {
  position: sticky; left: 0; z-index: 1; min-width: 150px; text-align: left;
  background: var(--superficie); border-right: var(--fio) solid var(--linha);
}
.escala-tabela thead .col-pessoa { background: var(--superficie-2); }
.escala-tabela .col-total { text-align: right; white-space: nowrap; font-family: var(--mono); }
.escala-dia .dia-nome { display: block; }
.escala-dia .dia-data { display: block; font-weight: 400; color: var(--tinta-suave); }
.escala-dia.fim-semana { background: var(--realce); }
.escala-dia.feriado .dia-nome { color: var(--contador); }
.escala-celula { min-width: 78px; text-align: center; }
.escala-celula.fim-semana { background: var(--realce); }

.turno-chip {
  display: block; width: 100%; margin: 0 0 2px; padding: .25rem .2rem;
  font: 500 var(--t-xs)/1.35 var(--sans); color: var(--tinta);
  background: var(--azul-claro); border: var(--fio) solid transparent; border-radius: var(--raio-sm);
  cursor: pointer; text-align: center;
}
.turno-chip:hover { border-color: var(--azul); }
.turno-chip .chip-pausa { display: block; font-weight: 400; color: var(--tinta-suave); }
.turno-chip.proposto { border-style: dashed; border-color: var(--linha-forte); }
.turno-chip.aberto { background: var(--aviso-claro); color: var(--aviso); }
.turno-chip.conflito { background: var(--mau-claro); color: var(--mau); border-color: var(--mau); }
.turno-juntar {
  display: block; width: 100%; padding: .2rem; border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-sm); background: none; color: var(--tinta-suave);
  font-size: var(--t-xs); cursor: pointer;
}
.turno-juntar:hover { border-color: var(--azul); color: var(--azul); }

.escala-estado { font-size: var(--t-xs); padding: .1rem .45rem; border-radius: 999px; }
.escala-estado.rascunho { color: var(--aviso); background: var(--aviso-claro); }
.escala-estado.publicada { color: var(--ok); background: var(--ok-claro); }
.escala-estado.arquivada { color: var(--tinta-suave); background: var(--superficie-2); }

/* Linha do tempo da vista diária -------------------------------------------
   Uma faixa de 24 horas por trabalhador, com a barra do turno posicionada em
   percentagem — o PHP põe-na no sítio certo, o JavaScript só a mexe. Sem
   JavaScript a página fica correta e editável pelos campos de hora. */
.linha-tempo { margin: var(--e3) 0; }
/* A régua partilha a estrutura das linhas: nome + trilho + campos. Margens
   próprias parecem alinhadas na largura de quem as escreve e desalinham-se em
   todas as outras — foi o defeito da a64, com as 09:00 a cair na casa das 06. */
.lt-regua { border-bottom: none; padding-bottom: 0; }
.lt-regua .lt-trilho { height: 16px; background: none; }
.lt-hora {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: var(--t-xs); color: var(--tinta-suave); white-space: nowrap;
}
.lt-hora.primeira { transform: translateX(0); }
.lt-hora.ultima { transform: translateX(-100%); }
.lt-marca { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--linha-forte); }
.lt-marca.forte { height: 7px; background: var(--calha); }
.lt-linha { display: flex; align-items: flex-start; gap: 8px; padding: .3rem 0; border-bottom: var(--fio) solid var(--linha); }
.lt-nome { width: 150px; flex: none; font-size: var(--t-sm); font-weight: 500; }
.lt-total { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--tinta-suave); font-family: var(--mono); }
/* O dia inteiro, sempre: 00:00 a 24:00, com uma linha de três em três horas
   para o olho poder apontar uma hora sem contar pixéis. */
.lt-trilho {
  position: relative; flex: 1; min-width: 260px; height: 30px;
  background: var(--superficie-2); border-radius: var(--raio-sm);
  background-image: repeating-linear-gradient(to right,
    var(--linha) 0 1px, transparent 1px 100%);
  background-size: calc(100% / 8) 100%;
}
.lt-barra {
  position: absolute; top: 3px; height: 24px; box-sizing: border-box;
  background: var(--azul-claro); border: var(--fio) solid var(--azul);
  border-radius: var(--raio-sm); overflow: hidden; touch-action: none;
}
.linha-tempo[data-arrastavel="1"] .lt-barra { cursor: grab; }
.lt-barra.a-arrastar { cursor: grabbing; }
.lt-barra:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.lt-barra.atravessa { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lt-barra.aberto { background: var(--aviso-claro); border-color: var(--aviso); }
.lt-etiqueta {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); color: var(--tinta); pointer-events: none;
}
.lt-pausa {
  position: absolute; top: 0; bottom: 0; background: var(--superficie);
  border-left: var(--fio) solid var(--azul); border-right: var(--fio) solid var(--azul);
}
.linha-tempo[data-arrastavel="1"] .lt-pausa { cursor: ew-resize; }
.lt-campos { display: flex; flex-wrap: wrap; gap: 4px; width: 300px; flex: none; }
.lt-campos label { display: flex; flex-direction: column; font-size: var(--t-xs); color: var(--tinta-suave); }
.lt-campos input { padding: .15rem .3rem; font-size: var(--t-sm); }

/* A cobertura é o mínimo de cada meia hora, não a média: um buraco de dez
   minutos tem de aparecer. */
.lt-cobertura .lt-trilho { background: none; height: 34px; }
.lt-fatia { position: absolute; bottom: 0; background: var(--ok-claro); border-top: 2px solid var(--ok); height: var(--altura, 0%); min-height: 2px; }
.lt-fatia.em-falta { background: var(--mau-claro); border-top-color: var(--mau); }

@media (max-width: 900px) {
  .lt-linha { flex-wrap: wrap; }
  .lt-regua .lt-nome, .lt-regua .lt-campos { display: none; }
  .lt-nome { width: 100%; }
  .lt-campos { width: 100%; }
}
.escala-dia a { color: inherit; text-decoration: none; display: block; }
.escala-dia a:hover .dia-nome { color: var(--azul); text-decoration: underline; }

/* Turno que atravessa a meia-noite ----------------------------------------
   O dia mostra-se sempre de 00:00 a 24:00. Quem entra às 20:00 e sai às 04:00
   aparece duas vezes: hoje até à meia-noite, com para onde segue, e amanhã de
   madrugada, como continuação que se edita no dia a que pertence. Esticar o
   eixo para 28 ou 30 horas resolvia o desenho e estragava a leitura — duas
   linhas do tempo com escalas diferentes na mesma página não se comparam. */
.lt-segue {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: var(--t-xs); color: var(--tinta-suave); white-space: nowrap; pointer-events: none;
}
.lt-continuacao .lt-nome { color: var(--tinta-suave); font-weight: 400; }
.lt-barra.continua {
  background: var(--superficie-2); border-style: dashed; border-color: var(--linha-forte);
  border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: default;
}
.lt-barra.continua .lt-etiqueta { color: var(--tinta-suave); }
.lt-barra.continua .lt-pausa { border-color: var(--linha-forte); }
.lt-continuacao .lt-campos { font-size: var(--t-xs); align-items: center; }

/* Meia hora sem ninguém não desenha barra nenhuma. Um tracinho verde a dizer
   zero lê-se como cobertura, que é o contrário do que aconteceu. */
.lt-fatia.vazia { background: none; border-top: none; min-height: 0; }

/* Mapa de férias -----------------------------------------------------------
   Aproveita a grelha das escalas — mesma estrutura, colunas de meses em vez
   de dias. O bloco mostra os dias úteis daquele mês, e a cor diz se já está
   decidido: um pedido pendente não pode parecer marcado, senão o mapa mente
   sobre o que está garantido. */
.ferias-tabela .escala-celula { min-width: 42px; text-align: center; }
.ferias-bloco {
  display: inline-block; min-width: 24px; padding: .15rem .3rem;
  font: 500 var(--t-xs)/1.4 var(--sans); border-radius: var(--raio-sm);
  background: var(--ok-claro); color: var(--ok); border: var(--fio) solid transparent;
}
.ferias-bloco.pendente { background: var(--aviso-claro); color: var(--aviso); border-style: dashed; border-color: var(--aviso); }
.ferias-tabela .col-total.negativo { color: var(--mau); font-weight: 600; }

/* Indicadores --------------------------------------------------------------
   A barra é uma coluna da tabela, não um gráfico: mede-se contra o pior valor
   da lista, e por isso responde à pergunta que se faz a olhar para uma lista
   ordenada — "quão pior é o primeiro do que o terceiro" — sem precisar de eixo,
   legenda ou biblioteca. Um valor não-zero desenha sempre um traço mínimo,
   porque um caso pequeno que desaparece lê-se como zero. */
.ind-celula { width: 26%; min-width: 90px; padding-right: 1rem; }
.ind-barra {
  display: block; height: 8px; border-radius: 999px;
  background: var(--ok-claro); border: var(--fio) solid var(--ok);
}
.ind-barra.aviso { background: var(--aviso-claro); border-color: var(--aviso); }
.tabela td.negativo { color: var(--mau); font-weight: 600; }

/* Alternador de empresas (grupo de instalações irmãs) */
.lado-empresas summary { list-style: none; cursor: pointer; }
.lado-empresas summary::-webkit-details-marker { display: none; }
.lado-empresas-lista { display: flex; flex-direction: column; gap: 2px; padding: .2rem .9rem .55rem; }
.lado-empresas-lista a { font-size: var(--t-sm); color: var(--tinta-suave); text-decoration: none; padding: .28rem .4rem; border-radius: 6px; }
.lado-empresas-lista a:hover { background: var(--realce); color: var(--tinta); }