/* =====================================================================
   Gestão de Equipas Operacionais — sistema de design
   ---------------------------------------------------------------------
   Regras da casa:
     1. Nenhum componente escreve uma cor directamente. Tudo sai de
        tokens, para que o tema claro/escuro seja uma troca de valores
        e não uma segunda folha de estilos.
     2. Cada token de cor é definido no :root sem condições. Os blocos
        de tema só REDEFINEM. Assim nada fica sem valor quando o
        navegador ignora um media query.
     3. Alvos de toque crescem em ecrãs tácteis (@media pointer:coarse),
        em vez de encolher a interface toda para caber no telemóvel.
   ===================================================================== */

:root{
  /* --- Superfícies e texto ---------------------------------------- */
  --bg:#f4f6f8; --surface:#fff; --surface-2:#fafbfc; --surface-3:#f0f3f6;
  --surface-inset:#f7f9fb; --border:#e2e7ed; --border-strong:#cbd4dd;
  --text:#151d26; --text-2:#4d5a67;
  /* --text-3 era #7a8794: 3.6:1 sobre branco, abaixo do mínimo legível.
     Este valor dá 4.7:1 e cumpre a norma sem mudar o aspecto. */
  --text-3:#63707d;

  /* --- Marca e estados -------------------------------------------- */
  --brand:#1c5c88; --brand-hover:#174d73; --brand-soft:#e8f1f7; --brand-soft-border:#c9deeb;
  --brand-text:#1c5c88;
  --ok:#0f7248;   --ok-bg:#eaf6f0;   --ok-border:#c2e3d3;
  --warn:#8a5a09; --warn-bg:#fdf5e7; --warn-border:#eedcb6;
  --danger:#a52f2f; --danger-bg:#fdeded; --danger-border:#f0cfcf;

  /* --- Grelha da escala ------------------------------------------- */
  --noite-bg:#eff4f8; --dia-bg:#f7faf6; --fds-bg:#fbf4e8;

  /* --- Elevação e forma ------------------------------------------- */
  --sh-1:0 1px 2px rgba(18,32,46,.05);
  --sh-2:0 4px 14px rgba(18,32,46,.09);
  --sh-3:0 12px 32px rgba(18,32,46,.14);
  --veu:rgba(12,20,28,.42);
  --ring:0 0 0 3px rgba(28,92,136,.18);
  --r-sm:6px; --r:8px; --r-lg:12px; --r-full:999px;

  /* --- Escalas ----------------------------------------------------- */
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-md:13px;
  --fs-lg:15px; --fs-xl:19px; --fs-2xl:22px;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --alt-campo:32px;         /* altura de botões e campos */
  --sidebar-w:236px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Tema escuro. O mesmo bloco aparece duas vezes de propósito: um
   :root:not([data-theme="light"]) dentro do media query, para seguir o
   sistema, e um [data-theme="dark"] fora dele, para a escolha manual.
   Sem o segundo, quem tem o sistema em claro nunca chegava ao escuro. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1419; --surface:#161d25; --surface-2:#1a222b; --surface-3:#202932;
    --surface-inset:#141b22; --border:#28323d; --border-strong:#3a4653;
    --text:#e7edf3; --text-2:#a4b1bf; --text-3:#8b98a6;
    --brand:#4a9fd4; --brand-hover:#67b1e0; --brand-soft:#16293a; --brand-soft-border:#24425c;
    --brand-text:#7cbde8;
    --ok:#4cc38a; --ok-bg:#12251d; --ok-border:#1f4634;
    --warn:#d8a54a; --warn-bg:#272013; --warn-border:#4a3c1c;
    --danger:#e07070; --danger-bg:#2a1717; --danger-border:#4f2a2a;
    --noite-bg:#182029; --dia-bg:#161f1b; --fds-bg:#241f16;
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.5);
    --sh-3:0 12px 32px rgba(0,0,0,.6);
    --veu:rgba(0,0,0,.6);
    --ring:0 0 0 3px rgba(74,159,212,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1419; --surface:#161d25; --surface-2:#1a222b; --surface-3:#202932;
  --surface-inset:#141b22; --border:#28323d; --border-strong:#3a4653;
  --text:#e7edf3; --text-2:#a4b1bf; --text-3:#8b98a6;
  --brand:#4a9fd4; --brand-hover:#67b1e0; --brand-soft:#16293a; --brand-soft-border:#24425c;
  --brand-text:#7cbde8;
  --ok:#4cc38a; --ok-bg:#12251d; --ok-border:#1f4634;
  --warn:#d8a54a; --warn-bg:#272013; --warn-border:#4a3c1c;
  --danger:#e07070; --danger-bg:#2a1717; --danger-border:#4f2a2a;
  --noite-bg:#182029; --dia-bg:#161f1b; --fds-bg:#241f16;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.5);
  --sh-3:0 12px 32px rgba(0,0,0,.6);
  --veu:rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(74,159,212,.28);
}

/* Quem pede menos movimento no sistema não leva animação nenhuma. */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* --- Base ---------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);font-size:var(--fs-md);line-height:1.5;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
a{color:var(--brand-text)}
img,svg{max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}

/* Primeiro elemento tabulável: salta a navegação repetida em cada página. */
.salto{
  position:absolute;left:8px;top:-60px;z-index:100;
  background:var(--brand);color:#fff;padding:9px 14px;border-radius:var(--r);
  font-size:var(--fs-md);font-weight:600;text-decoration:none;
  transition:top .16s ease;
}
.salto:focus{top:8px}

/* Fora da sessão só existe o ecrã de entrada, e ele traz a sua própria
   cor. O corpo acompanha, para que nenhuma faixa por cobrir mostre o
   fundo do tema. */
body.sem-sessao{background:#fdf6ef}

/* --- Estrutura ----------------------------------------------------- */
.app{display:flex;min-height:100vh;min-height:100dvh}

.sidebar{
  width:var(--sidebar-w);flex:none;background:var(--surface);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;height:100dvh;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  border-bottom:1px solid var(--border);text-decoration:none;color:inherit;
}
.sidebar-brand:hover .sidebar-brand-text strong{color:var(--brand-text)}
/* Selo da marca. Aguenta tanto a chama em SVG como um ficheiro de
   logótipo verdadeiro, quando existir um em assets/img/. */
.brand-mark{
  width:34px;height:34px;flex:none;border-radius:10px;
  background:linear-gradient(150deg,#8f4513,#3a1a06);
  color:#fff;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 1px 3px rgba(58,26,6,.35);
}
.brand-mark svg{width:18px;height:18px}
.brand-mark img{height:19px;width:auto;max-width:100%;object-fit:contain}
.sidebar-brand-text{min-width:0;display:flex;flex-direction:column}
.sidebar-brand-text strong{
  font-size:var(--fs-md);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-brand-text span{font-size:var(--fs-xs);color:var(--text-3)}
.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:12px 10px;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);
  color:var(--text-2);text-decoration:none;font-size:var(--fs-md);font-weight:500;
  transition:background .14s ease,color .14s ease;
}
.nav-item svg{width:16px;height:16px;flex:none;opacity:.75}
.nav-item:hover{background:var(--surface-3);color:var(--text)}
.nav-item.active{background:var(--brand-soft);color:var(--brand-text);font-weight:600}
.nav-item.active svg{opacity:1}
.sidebar-rodape{
  margin-top:auto;padding:10px 14px;border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-3);line-height:1.5;
}
.sidebar-rodape .versao{font-variant-numeric:tabular-nums;opacity:.8}

.app-body{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  min-height:50px;flex:none;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 16px;position:sticky;top:0;z-index:30;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:8px;min-width:0}
.veu{
  position:fixed;inset:0;background:var(--veu);z-index:40;border:0;padding:0;
  cursor:pointer;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
}

/* Só o <main> de dentro do casco da aplicação. Sem este alcance, a
   regra apanhava também o <main class="login-layout"> do ecrã de
   entrada e enchia-o de margens. */
.app-body>main{
  flex:1;width:100%;max-width:1500px;margin:0 auto;
  padding:var(--e4) var(--e4) var(--e5);
  padding-left:max(var(--e4),env(safe-area-inset-left));
  padding-right:max(var(--e4),env(safe-area-inset-right));
}

.page-head{margin-bottom:14px}
.page-head h1{font-size:var(--fs-2xl);line-height:1.2}
.page-title-linha{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.eyebrow{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-3);font-weight:600;margin-bottom:4px;
}
.small{font-size:var(--fs-sm);color:var(--text-3)}

/* --- Superfícies --------------------------------------------------- */
.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:15px;margin-bottom:12px;box-shadow:var(--sh-1);
}
.panel-estreito{max-width:460px}
.panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:12px;flex-wrap:wrap;
}
.panel h2{font-size:var(--fs-xl);line-height:1.25}
/* Botões lado a lado num cabeçalho — de painel ou de página. O
   .data-actions traz uma margem de topo que aqui desalinhava. */
.linha-botoes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:10px;margin-bottom:12px}
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:12px 13px;box-shadow:var(--sh-1);
}
.stat .v{
  font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.025em;line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.stat .l{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px;font-weight:500}
.stat.bom .v{color:var(--ok)}
.stat.mau .v{color:var(--danger)}

/* --- Indicadores que se carregam -------------------------------------
   Só os que são <a>. Nas páginas onde o mesmo cartão continua a ser um
   número — Início, Configuração — nada muda, e não convida ao toque.

   O color:inherit é obrigatório: sem ele a regra geral de `a` pintava
   os números todos da cor da marca.                                   */
a.stat{
  display:block;color:inherit;text-decoration:none;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
a.stat:hover{border-color:var(--brand);box-shadow:var(--sh-2)}
a.stat:hover .stat-accao{color:var(--brand-text)}
a.stat.activa{
  border-color:var(--brand);background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand-soft-border);
}
a.stat.activa .stat-accao{color:var(--brand-text);font-weight:600}
/* O --text-3 foi medido sobre o branco, e sobre o fundo do cartão
   escolhido fica em 4,4:1 — a um passo do mínimo. Sobe um tom. */
a.stat.activa .l{color:var(--text-2)}

/* A linha que diz o que acontece se se carregar. Sem ela o cartão muda
   de aspecto ao passar o rato e não explica porquê. */
.stat-accao{
  display:block;margin-top:7px;font-size:var(--fs-xs);font-weight:500;
  color:var(--text-3);
}

/* Linha que explica uma lista cortada por uma lente. Sem ela, meia
   tabela ou meio quadro parecem estar estragados. */
.lente-nota{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:0 0 12px;font-size:var(--fs-sm);color:var(--text-3);
}
.lente-nota a{font-weight:600}
.lente-nota strong{color:var(--text)}

/* O painel onde se aterra acende-se, para não haver dúvida sobre para
   onde é que a página saltou.

   A margem de deslocamento fica no selector normal, e não no :target:
   a barra do topo é fixa, e sem isto o título do painel aterrava
   debaixo dela. */
.panel[id],.bloco-ranking[id]{scroll-margin-top:62px}
@keyframes acende{
  from{box-shadow:0 0 0 3px var(--brand)}
  to{box-shadow:0 0 0 3px transparent}
}
.panel:target,.bloco-ranking:target{animation:acende 1.8s ease-out}
@media (prefers-reduced-motion:reduce){
  /* Sem animação o realce fica; é preferível a não haver realce nenhum. */
  .panel:target,.bloco-ranking:target{animation:none;box-shadow:0 0 0 2px var(--brand)}
}

.empty-state{
  padding:30px 18px;text-align:center;color:var(--text-3);
  border:1px dashed var(--border-strong);border-radius:var(--r-lg);
  background:var(--surface-2);font-size:var(--fs-md);line-height:1.7;
}

/* --- Elementos ------------------------------------------------------ */
.chip,.badge-perfil{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;
  border:1px solid var(--border);background:var(--surface-inset);color:var(--text-2);
}
.badge-perfil{background:var(--brand-soft);border-color:var(--brand-soft-border);color:var(--brand-text)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid transparent;border-radius:var(--r);padding:0 12px;height:var(--alt-campo);
  font-family:inherit;font-size:var(--fs-md);font-weight:500;cursor:pointer;
  white-space:nowrap;text-decoration:none;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.btn svg{width:15px;height:15px;flex:none}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-hover)}
.btn.secondary{background:var(--surface);color:var(--text-2);border-color:var(--border)}
.btn.secondary:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong)}
.btn.ghost-danger{background:transparent;border-color:var(--border);color:var(--text-3)}
.btn.ghost-danger:hover{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.btn.perigo{background:var(--danger);color:#fff}
.btn.perigo:hover{filter:brightness(1.08)}
.btn[disabled],.btn.desactivado{opacity:.5;pointer-events:none}

.icon-btn{
  width:var(--alt-campo);height:var(--alt-campo);flex:none;display:grid;place-items:center;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  border-radius:var(--r);cursor:pointer;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.icon-btn svg{width:16px;height:16px}
/* O atributo hidden tem de ganhar a qualquer regra de autor. */
[hidden]{display:none!important}
.icon-btn:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong)}
/* Dois nomes de classe de propósito: o botão do menu tem também
   .icon-btn, e com a mesma especificidade ganhava o display do
   .icon-btn — que aparece depois nesta folha. */
.icon-btn.btn-menu{display:none}

.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;min-width:0}
.field label{font-size:var(--fs-xs);font-weight:500;color:var(--text-3)}
.campo-ajuda{font-size:var(--fs-xs);color:var(--text-3);line-height:1.5;margin-top:2px}
input,select,textarea{
  font-family:inherit;font-size:var(--fs-md);color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:0 9px;height:var(--alt-campo);
  transition:border-color .14s ease,box-shadow .14s ease;min-width:0;max-width:100%;
}
textarea{height:auto;padding:7px 9px;line-height:1.5;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--ring)}
input[type=checkbox],input[type=radio]{height:auto;width:auto;accent-color:var(--brand)}
input[type=file]{height:auto;padding:7px 9px;line-height:1.4}
input[disabled],select[disabled],textarea[disabled]{background:var(--surface-3);color:var(--text-3);cursor:not-allowed}

.alert{
  display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:var(--r);
  border:1px solid var(--border);border-left-width:3px;
  background:var(--surface-inset);font-size:var(--fs-sm);color:var(--text-2);
  line-height:1.55;margin-bottom:12px;
}
.alert svg{width:15px;height:15px;flex:none;margin-top:2px}
.alert.ok{background:var(--ok-bg);border-color:var(--ok-border);border-left-color:var(--ok);color:var(--ok)}
.alert.warn{background:var(--warn-bg);border-color:var(--warn-border);border-left-color:var(--warn);color:var(--warn)}
.alert.bad{background:var(--danger-bg);border-color:var(--danger-border);border-left-color:var(--danger);color:var(--danger)}

/* Comutador de secções — Configuração e Operacionais. */
.segmentos{
  display:flex;gap:2px;padding:3px;background:var(--surface-3);
  border:1px solid var(--border);border-radius:var(--r);
  overflow-x:auto;scrollbar-width:thin;margin-bottom:12px;
}
.segmento{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:0 12px;height:28px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);text-decoration:none;
  white-space:nowrap;border:1px solid transparent;
  transition:background .14s ease,color .14s ease;
}
.segmento svg{width:14px;height:14px;flex:none;opacity:.8}
.segmento:hover{color:var(--text)}
.segmento[aria-current="page"]{
  background:var(--surface);color:var(--text);font-weight:600;
  border-color:var(--border);box-shadow:var(--sh-1);
}

/* --- Tabelas -------------------------------------------------------- */
.table-wrap{
  overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);-webkit-overflow-scrolling:touch;
}
table{width:100%;border-collapse:collapse;background:var(--surface)}
th,td{padding:7px 10px;text-align:center;font-size:var(--fs-sm);border-bottom:1px solid var(--border)}
th{
  background:var(--surface-3);color:var(--text-2);font-weight:600;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
td{color:var(--text-2);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
.left{text-align:left}
.right{text-align:right}
td strong{color:var(--text);font-weight:600}
.dinheiro{font-weight:600;color:var(--text);white-space:nowrap}
tr.linha-total td{
  background:var(--surface-3);font-weight:600;color:var(--text);
  border-top:2px solid var(--border-strong);
}

/* Aviso de que a tabela continua para lá da margem. Só aparece quando
   o JavaScript confirma que há mesmo conteúdo escondido. */
.deslize{
  display:none;align-items:center;gap:6px;
  font-size:var(--fs-xs);color:var(--text-3);margin:6px 0 0;
}
.deslize svg{width:13px;height:13px;flex:none}
.rola + .deslize{display:flex}

/* =====================================================================
   Autenticação — painel de marca à esquerda, cartão à direita.

   Estrutura decalcada do login do EmerControl, a partir dos ficheiros
   fornecidos pelo comando. A paleta é que muda: em vez do azul, tons de
   laranja e brasa, que é o que foi pedido.

   Duas decisões deliberadas:

   1. Esta página NÃO segue o tema claro/escuro. Os tokens abaixo vivem em
      .login-layout, não no :root, e não são redefinidos em nenhum bloco de
      tema. É uma página de marca — e a marca não muda com a preferência de
      quem olha, tal como não muda no original.

   2. As medidas são fixas em px, e não em tokens. É a única página do
      produto desenhada para ser igual a outra que já existe; amarrá-la à
      escala tipográfica do resto faria com que qualquer ajuste geral a
      afastasse do original.
   ===================================================================== */
.login-layout{
  --ec-950:#241004;   /* brasa quase apagada — fundo do painel */
  --ec-900:#3a1a06;
  --ec-800:#6b3410;
  --ec-700:#8f4513;
  --ec-600:#c2610f;
  --ec-500:#ef8b23;
  --ec-100:#ffedd5;
  --ec-50:#fff7ed;
  --ink-900:#1c1310;
  --ink-700:#463a33;
  --ink-500:#7a6a60;   /* 5.2:1 sobre branco */
  --linha:#ecdccc;
  --folha:#fff;
  --pagina:#fdf6ef;
  --mau:#b42318;

  width:100%;max-width:none;margin:0;padding:0;
  min-height:100vh;min-height:100dvh;display:flex;
  color:var(--ink-900);background:var(--pagina);
  font-size:16px;line-height:1.5;
}

/* --- Painel da marca ------------------------------------------------- */
.brand-panel{
  display:none;                    /* aparece a partir de 769px */
  width:42%;min-width:345px;max-width:520px;
  position:relative;overflow:hidden;
  background:var(--ec-950);color:#fff;
}
/* Brasas: dois focos de luz e uma inclinação por cima. */
.brand-panel:before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(239,139,35,.40) 0%, transparent 54%),
    radial-gradient(ellipse at 86% 82%, rgba(143,69,19,.60) 0%, transparent 52%),
    linear-gradient(160deg, rgba(194,97,15,.30), transparent 58%);
}
/* Trama de pontos, esbatida nas bordas por uma máscara. */
.brand-panel:after{
  content:"";position:absolute;inset:0;z-index:1;opacity:.9;
  background-image:radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 74% at center, rgba(0,0,0,.75) 25%, transparent 82%);
  mask-image:radial-gradient(ellipse 80% 74% at center, rgba(0,0,0,.75) 25%, transparent 82%);
}
.brand-inner{
  position:relative;z-index:2;min-height:100vh;min-height:100dvh;
  padding:52px 42px;padding-left:max(42px,env(safe-area-inset-left));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}

.brand-logo-box{
  width:96px;height:96px;flex:none;border-radius:24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 10px rgba(239,139,35,.12),
             0 0 0 22px rgba(239,139,35,.05),
             0 26px 70px rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  margin-bottom:28px;
}
.marca-lockup{display:flex;align-items:center;justify-content:center;width:68px;height:68px}
.marca-lockup img{
  width:68px;height:auto;max-height:68px;object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.32));
}
/* Sem ficheiro de logótipo: chama desenhada, com o nome por baixo. */
.marca-lockup.sem-ficheiro{flex-direction:column;gap:4px;color:#fff}
.marca-lockup.sem-ficheiro svg{width:34px;height:34px}
.marca-lockup .lockup-nome{
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}

.brand-title{
  font-size:33px;line-height:1.05;font-weight:800;letter-spacing:-.03em;
  margin:0 0 9px;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.34);
}
.brand-subtitle{
  margin:0;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;color:rgba(255,255,255,.58);
}
.brand-sep{
  width:46px;height:2px;border-radius:99px;margin:42px 0;flex:none;
  background:linear-gradient(90deg, transparent, rgba(251,146,60,.95), transparent);
}
.brand-features{width:100%;max-width:286px;display:grid;gap:15px;text-align:left}
.brand-feature{display:flex;align-items:center;gap:13px}
.brand-feature-icon{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.80);
}
.brand-feature-icon svg{width:16px;height:16px}
.brand-feature-text{font-size:13.5px;line-height:1.38;color:rgba(255,255,255,.68)}
.brand-foot{
  margin-top:54px;font-size:10px;font-weight:800;letter-spacing:.11em;
  color:rgba(255,255,255,.28);text-transform:uppercase;
}

/* --- Lado do formulário ---------------------------------------------- */
.form-panel{
  flex:1;min-width:0;min-height:100vh;min-height:100dvh;
  padding:30px 18px calc(38px + env(safe-area-inset-bottom));
  padding-right:max(18px,env(safe-area-inset-right));
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:
    radial-gradient(ellipse at 68% 4%, rgba(239,139,35,.13) 0%, transparent 50%),
    var(--pagina);
}

.login-box{
  position:relative;width:100%;max-width:430px;overflow:hidden;
  background:var(--folha);border:1px solid rgba(143,69,19,.14);
  border-radius:20px;
  box-shadow:0 2px 8px rgba(28,19,16,.05), 0 20px 55px rgba(28,19,16,.12);
}
/* Fio de brasa no topo do cartão. */
.login-box:before{
  content:"";position:absolute;top:0;left:40px;right:40px;height:3px;z-index:3;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg, transparent, var(--ec-500), var(--ec-700), transparent);
}

/* A marca dentro do cartão, só enquanto o painel da esquerda não cabe. */
.mobile-brand{
  padding:32px 24px 24px;display:flex;flex-direction:column;align-items:center;
  gap:10px;text-align:center;background:#fff;border-bottom:1px solid #f2e6da;
}
.mobile-logo-box{
  width:70px;height:70px;flex:none;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--ec-700), var(--ec-500));
  box-shadow:0 7px 24px rgba(143,69,19,.30), 0 0 0 7px rgba(239,139,35,.10);
}
.mobile-selo{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#fff}
.mobile-selo img{height:30px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 1px 5px rgba(0,0,0,.25))}
.mobile-selo svg{width:26px;height:26px}
.mobile-app-name{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ec-900)}
.mobile-app-tag{
  font-size:10px;font-weight:800;letter-spacing:.14em;
  color:var(--ink-500);text-transform:uppercase;
}

.login-body{padding:26px 28px 28px}
.login-form{display:grid;gap:15px;margin:0}
.form-field{display:grid;gap:7px}
.form-field label{
  color:var(--ink-700);font-size:11px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;
}
.input-wrap{position:relative;display:flex;align-items:center}
.input-icon{
  position:absolute;left:14px;display:grid;place-items:center;
  color:var(--ink-500);pointer-events:none;transition:color .18s ease;
}
.input-icon svg{width:16px;height:16px}
.form-field input{
  width:100%;height:50px;padding:0 14px 0 42px;
  border:1.5px solid var(--linha);border-radius:10px;
  background:#fffaf5;color:var(--ink-900);
  font-family:inherit;font-size:16px;line-height:1.2;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-appearance:none;appearance:none;
}
/* Um pouco mais escuro do que o original: o texto de exemplo ali ficava
   nos 2.8:1 e nao se lia bem em ecra com reflexo. */
.form-field input::placeholder{color:#94806f;font-size:14px}
.form-field input:hover{border-color:#dcc3aa}
.form-field input:focus{
  background:#fff;border-color:var(--ec-600);
  box-shadow:0 0 0 4px rgba(194,97,15,.15);outline:none;
}
.input-wrap:focus-within .input-icon{color:var(--ec-600)}
.password-field input{padding-right:46px}

.toggle-password{
  position:absolute;right:10px;width:34px;height:34px;
  border:0;border-radius:8px;background:transparent;color:var(--ink-500);
  cursor:pointer;display:grid;place-items:center;
  transition:background .18s ease, color .18s ease;
}
.toggle-password svg{width:17px;height:17px}
.toggle-password:hover,.toggle-password:focus-visible{background:var(--ec-50);color:var(--ec-700)}

.login-button{
  width:100%;min-height:52px;margin-top:4px;padding:11px 16px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg, var(--ec-700), var(--ec-900));
  color:#fff;border:0;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 9px 24px rgba(143,69,19,.32);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  position:relative;overflow:hidden;
}
.login-button:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.13), transparent 56%);
}
.login-button svg{width:18px;height:18px;flex:none}
.login-button:hover,.login-button:focus-visible{
  filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 13px 30px rgba(143,69,19,.40);outline:none;
}
.login-button:active{transform:scale(.985)}
.login-button:disabled{opacity:.72;cursor:not-allowed;transform:none;filter:none}
/* Roda enquanto o pedido vai e vem. */
.login-button.a-entrar svg{animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

.forgot-link{margin-top:15px;text-align:center;font-size:13px}
.register-link{margin-top:20px;text-align:center;font-size:14px;color:var(--ink-500)}
.forgot-link a,.register-link a{color:var(--ec-800);font-weight:800;text-decoration:none}
.forgot-link a:hover,.forgot-link a:focus,
.register-link a:hover,.register-link a:focus{color:var(--ec-600);text-decoration:underline}

.erro,.sucesso{
  margin-top:16px;padding:11px 13px;border-radius:10px;
  font-size:14px;font-weight:600;text-align:center;
}
.erro{color:#7f1d1d;background:#fff1f2;border:1px solid #fecdd3;border-left:4px solid var(--mau)}
.sucesso{color:#166534;background:#ecfdf5;border:1px solid #bbf7d0;border-left:4px solid #166534}

.page-footer{margin:20px 0 0;font-size:12px;color:var(--ink-500);text-align:center}
.page-footer a{
  color:var(--ec-800);font-weight:800;text-decoration:none;
  border-bottom:1px dashed rgba(143,69,19,.35);
}
.page-footer a:hover{color:var(--ec-600)}

/* Passos da página de ajuda ao acesso, no mesmo cartão. */
.lista-passos{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:16px}
.lista-passos li{display:flex;gap:12px;font-size:14px;line-height:1.6;color:var(--ink-700)}
.lista-passos strong{color:var(--ink-900)}
.passo-icone{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--ec-50);border:1px solid #f6dcc3;color:var(--ec-700);
}
.passo-icone svg{width:16px;height:16px}
.login-head{text-align:center;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #f2e6da}
.login-head h2{margin:0 0 7px;color:var(--ec-900);font-size:26px;line-height:1.1;letter-spacing:-.03em;font-weight:800}
.login-head p{margin:0;color:var(--ink-500);font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}

/* A partir daqui há espaço para o painel da marca. */
@media (min-width:769px){
  .brand-panel{display:block}
  .mobile-brand{display:none}
  .login-box{overflow:visible;padding:42px 38px 34px}
  .login-body{padding:0}
}

@media (max-width:480px){
  .form-panel{justify-content:flex-start;padding:20px 14px 32px}
  .login-box{border-radius:18px}
  .login-body{padding:23px 21px 24px}
  .mobile-brand{padding:29px 20px 22px}
  .mobile-logo-box{width:62px;height:62px;border-radius:16px}
  .mobile-selo{width:36px;height:36px}
  .mobile-selo img{height:26px}
}

/* Em ecrãs tácteis os alvos já são grandes por natureza aqui; o que não
   se quer é o salto de 40px do resto da aplicação a esticar os campos. */
@media (pointer:coarse){
  .login-layout .form-field input{height:52px}
  .login-layout .toggle-password{width:38px;height:38px}
}

/* --- Menu do utilizador --------------------------------------------- */
.menu-utilizador{position:relative}
.menu-utilizador>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  height:var(--alt-campo);padding:0 9px 0 5px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface);color:var(--text-2);
  font-size:var(--fs-sm);font-weight:500;max-width:212px;
}
.menu-utilizador>summary::-webkit-details-marker{display:none}
.menu-utilizador>summary:hover{background:var(--surface-3);color:var(--text)}
.menu-utilizador>summary .nome-curto{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.menu-utilizador>summary .seta{width:13px;height:13px;flex:none;opacity:.7}
.menu-utilizador[open]>summary .seta{transform:rotate(180deg)}
.menu-painel{
  position:absolute;right:0;top:calc(100% + 6px);z-index:35;min-width:214px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:6px;
}
.menu-cabeca{padding:7px 9px 9px;border-bottom:1px solid var(--border);margin-bottom:5px}
.menu-cabeca strong{display:block;font-size:var(--fs-md);color:var(--text);line-height:1.35}
.menu-cabeca span{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.menu-item{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-sm);
  color:var(--text-2);text-decoration:none;font-size:var(--fs-sm);font-weight:500;
}
.menu-item svg{width:14px;height:14px;flex:none;opacity:.8}
.menu-item:hover{background:var(--surface-3);color:var(--text)}
.menu-item.saida:hover{background:var(--danger-bg);color:var(--danger)}

/* --- Escala ---------------------------------------------------------- */
.titulo-estado{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-badge{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;
  border:1px solid var(--border);border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;white-space:nowrap;
}
.status-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.status-badge.draft{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn)}
.status-badge.published{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok)}
.status-badge.closed{background:var(--surface-3);border-color:var(--border-strong);color:var(--text-2)}
.status-badge.none{background:var(--surface-3);color:var(--text-3)}

/* --- O ano inteiro à vista ------------------------------------------
   Antes só se saltava entre meses que já tinham escala. Agora estão lá
   os doze, cada um com o seu estado, e chega-se a um mês vazio para o
   gerar. */
.ano-barra{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:10px;
}
.ano-passos{display:flex;align-items:center;gap:8px}
.ano-numero{font-size:var(--fs-xl);font-weight:600;font-variant-numeric:tabular-nums;min-width:60px;text-align:center}
.ano-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.meses{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.mes{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 2px 7px;border-radius:var(--r);text-decoration:none;
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-2);font-size:var(--fs-sm);font-weight:500;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.mes:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong)}
.mes.activo{
  background:var(--brand-soft);border-color:var(--brand);color:var(--brand-text);
  font-weight:600;box-shadow:var(--sh-1);
}
.mes-marca{width:7px;height:7px;border-radius:50%;flex:none;background:var(--border-strong)}
.mes.vazio .mes-marca{background:transparent;border:1.5px dashed var(--border-strong)}
.mes.draft .mes-marca{background:var(--warn)}
.mes.published .mes-marca{background:var(--ok)}
.mes.closed .mes-marca{background:var(--text-3)}

/* O calendário é o bloco principal da página: fica com mais folga por
   dentro e a grelha ganha espaço. */
.calendario{padding:16px 16px 14px}
.grelha-mes{margin-top:14px}
.grelha-cabeca{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:8px;
}
.grelha-cabeca h2{font-size:var(--fs-lg)}
.grelha-passos{display:flex;gap:6px;align-items:center}

/* Gavetas das acções. <details> nativo: funciona sem JavaScript. */
.gaveta{
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface-2);margin-top:10px;
}
.gaveta.aviso{border-color:var(--warn-border);background:var(--warn-bg)}
.gaveta>summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  padding:10px 12px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
}
.gaveta>summary::-webkit-details-marker{display:none}
.gaveta>summary:hover{color:var(--text)}
.gaveta>summary svg{width:14px;height:14px;flex:none;transition:transform .16s ease}
.gaveta[open]>summary svg{transform:rotate(90deg)}
.gaveta[open]>summary{border-bottom:1px solid var(--border)}
.gaveta.aviso[open]>summary{border-bottom-color:var(--warn-border)}
.gaveta-nota{
  margin-left:auto;font-size:var(--fs-xs);font-weight:500;color:var(--text-3);
  white-space:nowrap;
}
.gaveta-nota.perigo{color:var(--danger);font-weight:700}
.gaveta-corpo{padding:12px}

.accoes-mes{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.accoes-mes h2{font-size:var(--fs-xl);line-height:1.25}

/* Compensações congeladas de um mês publicado, com a hipótese de as
   voltar a congelar quando ficaram erradas. */
.taxas-mes{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--border);
}

.grupos{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.grupo{
  display:flex;flex-direction:column;gap:7px;padding:9px 11px 10px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);min-width:0;
}
.grupo-largo{flex:1 1 420px}
.grupo-titulo{
  font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.06em;
}
.grupo-corpo{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:0}
.grupo-corpo .field{margin-bottom:0}
.grupo-nota{font-size:var(--fs-xs);color:var(--text-3);min-height:16px;line-height:1.5}
/* Quebra de linha de propósito: o formulário de acrescentar valência
   tem três campos e não cabe em 375px numa linha só. */
.linha{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.check-inline{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);
  color:var(--text-2);cursor:pointer;min-height:24px;
}
.check-inline input{height:auto;width:auto;margin:0}

.grelha-scroll{
  overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);-webkit-overflow-scrolling:touch;
}
.grelha{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;min-width:960px}
.grelha th,.grelha td{
  height:32px;padding:2px;font-size:var(--fs-xs);text-align:center;
  border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
.grelha tr:last-child td{border-bottom:0}
.grelha th:last-child,.grelha td:last-child{border-right:0}
.grelha th:first-child,.grelha td:first-child{
  width:84px;min-width:84px;position:sticky;left:0;z-index:2;
  background:var(--surface-3)!important;color:var(--text-2);font-weight:600;
  text-align:left;padding-left:12px;text-transform:uppercase;letter-spacing:.04em;
  border-right:1px solid var(--border-strong);
}
.grelha tr:first-child th{background:var(--surface-3);color:var(--text-3);font-weight:600}
.grelha .linha-noite td{background:var(--noite-bg)}
.grelha .linha-dia td{background:var(--dia-bg)}
.grelha .fds{background:var(--fds-bg)!important}
.pastilha{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:26px;padding:0 5px;border-radius:var(--r-sm);
  background:var(--brand);color:#fff;font-size:var(--fs-xs);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pastilha.com-falta:after{
  content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--danger);border:1.5px solid var(--surface);
}
.pastilha.clicavel{text-decoration:none;cursor:pointer;transition:background .14s ease}
.pastilha.clicavel:hover{background:var(--brand-hover)}

.legenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:var(--fs-xs);color:var(--text-3)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:11px;height:11px;border-radius:3px;border:1px solid var(--border-strong);display:inline-block;flex:none}
.legenda i.noite{background:var(--noite-bg)}
.legenda i.dia{background:var(--dia-bg)}
.legenda i.fim{background:var(--fds-bg)}
.legenda i.falta{background:var(--danger);border-color:var(--danger);border-radius:50%}
.legenda i.ponto{width:8px;height:8px;border-radius:50%;border:0}
.legenda i.ponto.vazio{background:transparent;border:1.5px dashed var(--border-strong)}
.legenda i.ponto.draft{background:var(--warn)}
.legenda i.ponto.published{background:var(--ok)}
.legenda i.ponto.closed{background:var(--text-3)}
.legenda-corte{
  width:1px;height:14px;background:var(--border-strong);
  display:inline-block;margin:0 2px;
}

/* --- Assiduidade ----------------------------------------------------- */
.lista-presencas{display:flex;flex-direction:column}
.linha-presenca{
  display:grid;
  /* Quatro colunas, não cinco: o estado e a justificação passaram a
     partilhar a mesma célula, um por cima do outro. A justificação
     aparecia longe de onde se tinha carregado, e a coluna dela ficava
     vazia em todas as linhas menos as poucas com falta justificada. */
  grid-template-columns:minmax(160px,1.4fr) minmax(200px,1fr) 104px 96px;
  gap:10px;align-items:start;padding:7px 0;
  border-bottom:1px solid var(--border);
}
.presenca-decisao{display:flex;flex-direction:column;gap:5px}

/* --- Relatórios de ocorrências --------------------------------------- */
.lista-ocorrencias{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ocorrencia{
  border:1px solid var(--border);border-radius:var(--r);
  padding:10px 12px;background:var(--surface-2);
}
.ocorrencia-cabeca{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ocorrencia-cabeca strong{font-size:var(--fs-md)}
/* O texto vem de quem o escreveu: quebras de linha e palavras compridas
   não podem esticar o cartão para fora da página. */
.ocorrencia-corpo{
  margin:0;font-size:var(--fs-sm);line-height:1.7;color:var(--text);
  overflow-wrap:anywhere;
}
.linha-presenca:last-child{border-bottom:0}
.presenca-pessoa strong{display:block;font-size:var(--fs-md);font-weight:600;color:var(--text)}
.presenca-pessoa span{font-size:var(--fs-xs);color:var(--text-3)}
.presenca-estado{height:30px;font-size:var(--fs-sm);width:100%}
.presenca-estado.presente{border-color:var(--ok-border);background:var(--ok-bg);color:var(--ok)}
.presenca-estado.justificada{border-color:var(--warn-border);background:var(--warn-bg);color:var(--warn)}
.presenca-estado.injustificada{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger)}
.presenca-motivo{height:30px;font-size:var(--fs-sm);width:100%}
/* Esconder tira do fluxo. A justificação vive debaixo do selector, na
   mesma célula: quando não se aplica, a linha simplesmente encolhe.
   Reservar-lhe o lugar era o que tornava a aparição quase invisível. */
.escondido{display:none}
.presenca-horas,.presenca-valor{
  text-align:right;font-size:var(--fs-sm);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--text-2);
}
/* As horas deixaram de ser um número impresso e passaram a campo: podem
   ter-se feito menos do que o turno inteiro. O 'h' fica ao lado, fora do
   campo — dentro de um type=number não cabe, e sem ele um 6 sozinho
   podia ler-se como qualquer coisa. */
.presenca-horas{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.presenca-horas-campo{
  width:64px;height:30px;padding:0 6px;
  font-size:var(--fs-sm);font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;
}
/* O placeholder é a duração do turno: em branco significa o turno todo.
   Tem de se ler como um valor real, não como texto de ajuda apagado — é
   a informação que ali está. */
.presenca-horas-campo::placeholder{color:var(--text-3);opacity:1}
.presenca-horas-un{color:var(--text-3);font-weight:500}
.presenca-resumo{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:12px}
.kpi{
  border:1px solid var(--border);background:var(--surface-inset);
  border-radius:var(--r-sm);padding:5px 9px;font-size:var(--fs-sm);color:var(--text-3);
}
.kpi strong{color:var(--text);font-weight:600}
.data-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}

/* --- Filtros --------------------------------------------------------- */
.filtros{
  display:grid;grid-template-columns:repeat(4,minmax(120px,1fr)) auto;
  gap:10px;align-items:flex-end;
}
.filtros .field{margin-bottom:0}
.filtros-accoes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* --- Relatórios ------------------------------------------------------ */
.seccao-titulo{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:var(--fs-sm);font-weight:600;color:var(--text);margin:14px 0 8px;
}
.seccao-titulo:first-child{margin-top:0}
.seccao-titulo span{font-size:var(--fs-xs);font-weight:400;color:var(--text-3)}
.cartoes-alerta{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:8px}
.cartao-alerta{border:1px solid var(--border);border-left-width:3px;border-radius:var(--r);padding:8px 11px}
.cartao-alerta.perigo{background:var(--danger-bg);border-color:var(--danger-border);border-left-color:var(--danger)}
.cartao-alerta.aviso{background:var(--warn-bg);border-color:var(--warn-border);border-left-color:var(--warn)}
.cartao-nome strong{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.cartao-motivo{font-size:var(--fs-xs);margin-top:2px;line-height:1.5}
.cartao-alerta.perigo .cartao-motivo{color:var(--danger)}
.cartao-alerta.aviso .cartao-motivo{color:var(--warn)}
.vazio{font-size:var(--fs-sm);color:var(--text-3);padding:8px 0}
.assinaturas{display:flex;justify-content:space-between;gap:30px;margin-top:26px}
.assinatura{
  width:42%;border-top:1px solid var(--border-strong);padding-top:6px;
  text-align:center;font-size:var(--fs-xs);color:var(--text-3);
}

/* --- Estatísticas ----------------------------------------------------- */
.grelha-rankings{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.bloco-ranking{border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);padding:10px 12px}
.ranking-cabeca{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:var(--fs-xs);font-weight:600;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.05em;
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.ranking-cabeca span{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-3)}
.ranking-linha{
  display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;
  padding:5px 0;border-bottom:1px solid var(--border);
}
.ranking-linha:last-child{border-bottom:0}
.ranking-pos{
  font-size:var(--fs-xs);font-weight:600;color:var(--text-3);text-align:center;
  font-variant-numeric:tabular-nums;
}
.ranking-nome{min-width:0;display:flex;flex-direction:column}
.ranking-nome strong{
  font-size:var(--fs-sm);font-weight:600;color:var(--text);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ranking-nome>span{font-size:var(--fs-xs);color:var(--text-3);line-height:1.3}
.ranking-valor{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ranking-valor small{font-weight:400;color:var(--text-3);font-size:var(--fs-xs)}
.ranking-valor.bom{color:var(--ok)}
.ranking-valor.mau{color:var(--danger)}

/* --- Operacionais ------------------------------------------------------ */
.resumo-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.mini-kpi{
  display:inline-flex;align-items:center;gap:5px;background:var(--surface-inset);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 9px;
  font-size:var(--fs-sm);color:var(--text-3);
}
.mini-kpi strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* Indicadores que filtram. Só os que são <a>: nas outras páginas o
   mesmo chip continua a ser um número e não deve convidar ao toque. */
a.mini-kpi.lente{
  color:var(--text-3);text-decoration:none;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
a.mini-kpi.lente:hover{
  background:var(--surface);border-color:var(--border-strong);color:var(--text-2);
}
a.mini-kpi.lente:hover strong{color:var(--brand-text)}
a.mini-kpi.lente.activa{
  background:var(--brand-soft);border-color:var(--brand);
  color:var(--brand-text);font-weight:500;
}
a.mini-kpi.lente.activa strong{color:var(--brand-text)}
/* Menos de .75 de opacidade e o × cai abaixo dos 3:1 sobre o fundo da
   pastilha escolhida. É decorativo — o rótulo e o title já dizem o que
   faz — mas quem o vê tem de o ver mesmo. */
.lente-x{
  margin-left:1px;font-size:14px;line-height:1;opacity:.75;
}
a.mini-kpi.lente.activa:hover .lente-x{opacity:1}

.tabela-ops td{padding:5px 10px}
.tabela-ops tr.inactivo td{opacity:.55}
.cel-nome{display:flex;align-items:center;gap:8px;min-width:0}
.avatar{
  width:26px;height:26px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--brand-soft);border:1px solid var(--brand-soft-border);
  color:var(--brand-text);font-size:var(--fs-xs);font-weight:600;
}
.avatar.pequeno{width:22px;height:22px;font-size:var(--fs-2xs)}
.nome-bloco{min-width:0}
.nome{
  font-size:var(--fs-sm);font-weight:600;color:var(--text);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nome-sub{
  font-size:var(--fs-xs);color:var(--text-3);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.etiqueta{
  display:inline-block;font-size:var(--fs-xs);padding:1px 7px;border-radius:var(--r-full);
  background:var(--brand-soft);border:1px solid var(--brand-soft-border);
  color:var(--brand-text);font-weight:500;white-space:nowrap;
}
.etiqueta.neutra{background:var(--surface-inset);border-color:var(--border);color:var(--text-3)}
.etiqueta.aviso{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn)}
.etiqueta.perigo{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.accoes-linha{display:flex;justify-content:center;gap:6px;align-items:center}
.em-linha{display:inline}
.accao{
  width:28px;height:28px;display:grid;place-items:center;
  border:1px solid var(--border);background:var(--surface);color:var(--text-3);
  border-radius:var(--r-sm);padding:0;cursor:pointer;text-decoration:none;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.accao svg{width:15px;height:15px}
.accao:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong)}
.accao.perigo:hover{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}

.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formgrid.tres{grid-template-columns:repeat(3,1fr)}
.campo-largo{grid-column:1/-1}
.caixas{display:flex;gap:12px;flex-wrap:wrap;padding:4px 0}
.rodape-lista{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:11px;flex-wrap:wrap;
}
.paginacao{display:flex;align-items:center;gap:8px}
.paginacao .btn{min-width:36px;padding:0 10px}

/* --- Quadro de equipas -------------------------------------------------- */
.quadro-equipas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.cartao-equipa{
  display:flex;flex-direction:column;border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface-2);overflow:hidden;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.cartao-equipa.incompleta{border-color:var(--warn-border)}
.cartao-equipa.destino{border-color:var(--brand);box-shadow:var(--ring)}
.cartao-equipa-cabeca{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border-bottom:1px solid var(--border);background:var(--surface);
}
.cartao-equipa-cabeca strong{font-size:var(--fs-md);color:var(--text)}
.cartao-equipa-cabeca .contagem{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.falhas-equipa{
  padding:6px 11px;background:var(--warn-bg);border-bottom:1px solid var(--warn-border);
  font-size:var(--fs-xs);color:var(--warn);line-height:1.55;
}
.membros{display:flex;flex-direction:column;gap:3px;padding:8px;min-height:60px}
.membro{
  display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border);
}
.membro[draggable=true]{cursor:grab}
.membro[draggable=true]:active{cursor:grabbing}
/* O cartão a ser arrastado vai andando pela lista para se ver onde cai.
   Fica esbatido e tracejado para não se confundir com os que já lá estão
   — sem isto, a lista parecia já ter guardado a ordem nova.            */
.membro.arrastando{opacity:.45;border-style:dashed;border-color:var(--brand)}
.membro[draggable="true"]{cursor:grab}
.membro.arrastando{cursor:grabbing}
.membro .nome-bloco{flex:1}
.membro.chefia{border-color:var(--brand-soft-border);background:var(--brand-soft)}
.membros-vazio{
  font-size:var(--fs-xs);color:var(--text-3);text-align:center;padding:16px 6px;
  border:1px dashed var(--border-strong);border-radius:var(--r-sm);
}

/* Zero equipas em falta é uma boa notícia, e ocupa uma coluna a dizê-lo. */
.quadro-vazio{
  align-items:center;justify-content:center;gap:7px;
  padding:26px 16px;text-align:center;
  border-style:dashed;border-color:var(--ok-border);
}
.quadro-vazio svg{width:24px;height:24px;color:var(--ok)}
.quadro-vazio strong{font-size:var(--fs-md);color:var(--text)}
.quadro-vazio span{font-size:var(--fs-xs);color:var(--text-3);line-height:1.55}

/* Ícone com um <select> a sério por cima, transparente e a cobri-lo por
   inteiro. Mostra um ícone, comporta-se como um campo — e continua a
   funcionar sem rato, que é onde o arrastar falha. */
.mover-atalho{
  position:relative;flex:none;width:26px;height:26px;
  display:grid;place-items:center;border-radius:var(--r-sm);
  color:var(--text-3);border:1px solid transparent;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.mover-atalho svg{width:15px;height:15px}
.mover-atalho:hover{background:var(--surface-3);color:var(--text);border-color:var(--border)}
.mover-atalho select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;padding:0;border:0;background:transparent;
}
/* O contorno de foco tem de aparecer no ícone: o campo é invisível. */
.mover-atalho:focus-within{
  outline:2px solid var(--brand);outline-offset:2px;
  background:var(--surface-3);color:var(--text);
}

/* =====================================================================
   Ecrãs tácteis
   Alvos maiores, em vez de encolher a interface para caber no telemóvel.
   32px é confortável com rato e apertado com o polegar.
   ===================================================================== */
@media (pointer:coarse){
  :root{--alt-campo:44px}
  .accao{width:40px;height:40px}
  .accao svg{width:18px;height:18px}
  .nav-item{padding:12px}
  .segmento{height:40px;padding:0 15px}
  .check-inline{min-height:40px}
  .presenca-estado,.presenca-motivo,.presenca-horas-campo{height:44px}
  .menu-item{padding:11px}

  /* A pastilha da escala é o alvo mais carregado da aplicação no
     telemóvel: é por ela que se abre a marcação de presenças de um
     turno. Estava com 28 px de largura — menos de metade de um dedo. */
  .pastilha{min-width:34px;height:36px;font-size:var(--fs-sm)}

  a.mini-kpi.lente{min-height:40px;padding:8px 12px}
  .mover-atalho{width:40px;height:40px}
  .mover-atalho svg{width:18px;height:18px}

  /* As caixas das valências ficavam com 13x13 px. O rótulo ao lado já
     tinha altura de toque, mas o QUADRADO não — e é nele que se carrega
     quando se quer ter a certeza. */
  .check-inline input[type="checkbox"],
  .caixas input[type="checkbox"]{width:20px;height:20px}

  /* Botões com alvo de dedo. O .btn usa --alt-campo, que já subiu; isto
     é para os que definem a altura por conta própria. */
  .btn{min-height:40px}
  .icon-btn{width:40px;height:40px}
}

/* Abaixo de 768px o Safari do iPhone amplia a página sempre que o campo
   tem menos de 16px de texto. Aumentar o texto é mais barato do que
   lutar contra o comportamento do navegador. */
@media (max-width:768px){
  input,select,textarea{font-size:16px}
  /* Estes dois definem o tamanho por conta própria e ganhavam ao
     selector genérico acima por especificidade. Um <select> com menos de
     16px faz o Safari AMPLIAR a página inteira quando se lhe toca — a
     página salta, e a seguir fica torta. É a regra que existe para o
     evitar; não pode ficar de fora justamente onde há um selector por
     cada pessoa do turno. */
  .presenca-estado,.presenca-motivo,.presenca-horas-campo{font-size:16px}
}

/* =====================================================================
   A ESCALA DE TEXTO NO TELEMÓVEL
   ---------------------------------------------------------------------
   Esta escala foi desenhada para um painel de secretária, onde a
   densidade compensa: 13px de corpo, 11px nas linhas secundárias, 10px
   no mais pequeno. Num ecrã de 375px, a 30 cm dos olhos, é outra coisa
   — e era o que fazia a aplicação parecer desconfigurada no telemóvel:
   não estava partida, estava toda encolhida.

   Pior, havia uma incoerência à vista: os campos de formulário já subiam
   para 16px (por causa do Safari, ver acima) e ficavam ao lado de
   etiquetas de 11px. O contraste entre os dois denunciava que ninguém
   tinha olhado para aquilo num telefone.

   Mexe-se nos TOKENS e não nas regras: toda a aplicação os usa, por isso
   sobe tudo junto e as proporções entre os tamanhos mantêm-se. O
   ambiente de trabalho fica exactamente como estava.
   ===================================================================== */
@media (max-width:768px){
  :root{
    --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px;
    --fs-lg:16px;  --fs-xl:21px; --fs-2xl:24px;
  }
}

/* =====================================================================
   Ecrãs estreitos — gaveta lateral
   ===================================================================== */
@media (max-width:900px){
  .icon-btn.btn-menu{display:grid}

  .sidebar{
    position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:50;
    width:min(282px,84vw);box-shadow:var(--sh-3);
    transform:translateX(-100%);transition:transform .2s ease;
    padding-left:env(safe-area-inset-left);
  }
  /* translateX(0) em vez da palavra none: são equivalentes, mas assim
     os dois extremos da transição são listas de transformação do mesmo
     tipo, que é o que os motores interpolam melhor. */
  .sidebar.aberta{transform:translateX(0)}
  body.menu-aberto{overflow:hidden}

  .topbar{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }
  .topbar-left .badge-perfil{display:none}
  .app-body>main{padding:12px 12px var(--e5)}
  .page-head h1{font-size:var(--fs-xl)}
  .panel{padding:13px}
  .assinaturas{flex-direction:column;gap:22px}
  .assinatura{width:100%}
}

@media (max-width:1000px){
  .filtros{grid-template-columns:1fr 1fr}
  .filtros-accoes{grid-column:1/-1}
}

/* As horas ficam. A compensação é que sai: aquela é um número calculado
   que se confirma depois no relatório, e as horas passaram a ser um
   campo que se preenche — escondê-lo aqui era esconder a coisa
   justamente no ecrã onde ela se usa, que é o telemóvel do chefe ao fim
   do turno. */
@media (max-width:820px){
  .linha-presenca{grid-template-columns:1fr 150px 96px;gap:8px}

  .presenca-valor{display:none}
}

/* No telemóvel a linha das presenças empilha.
   Lado a lado, sobravam 150px para o selector e os mesmos 150px para
   ESCREVER a justificação — não chega para "Serviço profissional". E o
   nome de quem tem dois apelidos partia-se em três linhas ao lado de um
   campo que ficava a meio.
   Empilhado: o nome numa linha, a decisão a toda a largura por baixo. É
   também a ordem por que se faz a coisa — lê-se o nome, escolhe-se o
   estado, escreve-se a justificação. */
/* Duas colunas e não uma: o nome ocupa a linha toda por cima, e por
   baixo fica a decisão com as horas encostadas à direita, à altura do
   selector. Numa coluna só, as horas caíam para uma terceira linha,
   longe do estado a que pertencem — e a lista de nove pessoas passava a
   ter vinte e sete linhas. */
@media (max-width:560px){
  .linha-presenca{grid-template-columns:1fr auto;gap:6px;padding:10px 0}
  .presenca-pessoa{grid-column:1/-1}
  .presenca-decisao{grid-column:1;width:100%}
  .presenca-horas{grid-column:2;align-self:start}
}

@media (max-width:900px){
  .meses{grid-template-columns:repeat(6,1fr)}
}

@media (max-width:720px){
  .meses{grid-template-columns:repeat(4,1fr)}
  .ano-info{width:100%}
  .ano-info .btn{flex:1}
  .formgrid,.formgrid.tres{grid-template-columns:1fr}
  .grid-kpi{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
  .stat .v{font-size:var(--fs-xl)}
}

/* Tabelas que se transformam em cartões: sete colunas numa linha deixam
   de ser legíveis em 360px de largura. Tabelas largas e numéricas
   (relatórios, grelha da escala) continuam a rolar — um cartão com
   treze campos seria pior do que deslizar. */
@media (max-width:640px){
  .filtros{grid-template-columns:1fr}

  .tabela-cartoes-wrap{border:0;background:transparent;overflow:visible}
  .tabela-cartoes thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .tabela-cartoes,.tabela-cartoes tbody,.tabela-cartoes tr,.tabela-cartoes td{display:block;width:100%}
  .tabela-cartoes{background:transparent}
  .tabela-cartoes tr{
    border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
    margin-bottom:8px;padding:9px 11px;box-shadow:var(--sh-1);
  }
  .tabela-cartoes tbody tr:hover td{background:transparent}
  .tabela-cartoes td{
    border:0;text-align:left;padding:4px 0;
    display:flex;justify-content:space-between;align-items:center;gap:14px;
  }
  .tabela-cartoes td:before{
    content:attr(data-r);flex:none;font-size:var(--fs-xs);color:var(--text-3);font-weight:500;
  }
  .tabela-cartoes td:not([data-r]):before{content:none}
  .tabela-cartoes td.cel-principal{
    display:block;padding:0 0 7px;margin-bottom:5px;border-bottom:1px solid var(--border);
  }
  .tabela-cartoes .accoes-linha{justify-content:flex-end}
  .quadro-equipas{grid-template-columns:1fr}
  .cartoes-alerta{grid-template-columns:1fr}
}

/* --- Impressão --------------------------------------------------------- */
/* Cabeçalho que só existe no papel: a folha sai do ecrã e vai para a
   parede, e tem de dizer sozinha de que corporação e de que mês é. */
.folha-cabeca{display:none}

@media print{
  .sidebar,.topbar,.no-print,.filtros,.grid-kpi,.veu,.salto,.deslize,.segmentos{display:none!important}
  .app{display:block}
  .app-body>main{max-width:none;padding:0}
  .panel{border:0;box-shadow:none;padding:0;margin-bottom:14px;break-inside:auto}
  .table-wrap{border:1px solid #ccc;overflow:visible}
  body{background:#fff}
  th,td{font-size:9px;padding:4px 6px}
  tr{break-inside:avoid}
  a{text-decoration:none;color:#000}

  /* --- Escala do mês -------------------------------------------------
     Trinta e um dias não cabem em retrato, e a grelha rola na horizontal
     no ecrã: sem tirar o overflow, o papel saía com o mês cortado a
     meio. */
  .folha-cabeca{
    display:block;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #999;
  }
  .folha-cabeca strong{display:block;font-size:13px}
  .folha-cabeca span{font-size:10px}

  .ano-barra,.meses,.grelha-passos,.page-title-linha .linha-botoes{display:none!important}
  .grelha-scroll{overflow:visible!important;border:1px solid #999;border-radius:0}
  .grelha{min-width:0!important;width:100%}
  .grelha th,.grelha td{height:auto;padding:3px 1px;font-size:8px}
  /* A coluna fixa deixa de flutuar: em papel não há para onde rolar. */
  .grelha th:first-child,.grelha td:first-child{
    position:static!important;width:52px;min-width:52px;padding-left:4px;font-size:7px;
  }

  /* As pastilhas são texto branco sobre fundo azul. O navegador não
     imprime fundos por omissão, e o número saía branco sobre branco —
     uma grelha vazia. Em papel são números pretos com um contorno. */
  /* background-color e não o abreviado background: o valor original vem
     de uma var(), e a abreviatura com !important por cima de uma var()
     não é terreno onde valha a pena confiar. */
  .pastilha{
    background-color:transparent!important;color:#000!important;
    border:1px solid #666;min-width:16px;height:14px;padding:0 3px;
    font-size:8px;border-radius:2px;
  }
  .pastilha.com-falta:after{
    background:#000;border-color:#fff;width:5px;height:5px;right:-2px;top:-2px;
  }

  /* O sombreado dos turnos e dos fins-de-semana é informação, não
     enfeite. Onde o navegador o recusar, a linha SEMANA continua a dizer
     S e D. */
  .grelha .linha-noite td,.grelha .linha-dia td,.grelha .fds{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  .legenda{margin-top:6px;font-size:8px;color:#000}
  .legenda i{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* --- Quadro das equipas --------------------------------------------
     Vai para a parede do quartel: cada equipa num cartão, com quem lá
     está e as valências de cada um.

     Três colunas em vez das quatro do ecrã. Em A4 retrato, quatro
     cartões lado a lado deixavam os nomes a partir-se a meio. */
  .quadro-equipas{
    display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;
  }
  .cartao-equipa{
    /* Uma equipa não se parte entre duas folhas: quem procura alguém
       percorre o cartão de cima a baixo, e metade dele na página
       seguinte obriga a virar a folha para trás e para a frente. */
    break-inside:avoid;page-break-inside:avoid;
    border:1px solid #999;border-radius:0;padding:6px;box-shadow:none;
  }
  /* No ecrã há uma altura mínima para o cartão receber quem se arrasta.
     Em papel não se arrasta nada, e ela só deixava buracos. */
  .membros{padding:0;min-height:0;gap:0}
  .cartao-equipa-cabeca{border-bottom:1px solid #ccc;padding-bottom:3px;margin-bottom:4px}
  .cartao-equipa-cabeca strong{font-size:10px}
  .cartao-equipa-cabeca .contagem{font-size:9px;border:0;padding:0;background:none}
  .membro{
    border:0;border-bottom:1px dotted #ddd;border-radius:0;padding:2px 0;
    background:none!important;
  }
  .membro:last-child{border-bottom:0}
  .membro .nome{font-size:9px}
  .membro .nome-sub{font-size:8px;color:#333}
  /* O chefe perde o fundo (que não se imprime) e fica a negrito. */
  .membro.chefia .nome{font-weight:700}
  .avatar.pequeno{
    width:14px;height:14px;font-size:7px;
    background:none!important;border:1px solid #999;color:#000!important;
  }
  /* Controlos não existem em papel. O resto do que é só de ecrã leva
     no-print na própria vista, para não apagar por engano avisos de
     outras páginas que partilham este bloco. */
  .mover-atalho,.membros-vazio{display:none!important}
  .falhas-equipa{font-size:8px;color:#000;border:0;padding:2px 0}
}

/* Trinta e um dias em retrato ficam ilegíveis. */
@page{size:landscape;margin:10mm}